You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/angular/src/content/en/components/geo-map-binding-data-model.mdx
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
11
11
12
12
# Angular Binding Geographic Data Models
13
13
14
-
The Ignite UI for Angular map component is designed to display geo-spatial data from shape files and/or geographic locations from data models on geographic imagery maps. The <ApiLinkpkg="maps"type="GeographicMap"member="ItemsSource"label="ItemsSource" /> property of geographic series is used for the purpose of binding to data models. This property can be bound an array of custom objects.
14
+
The Ignite UI for Angular map component is designed to display geo-spatial data from shape files and/or geographic locations from data models on geographic imagery maps. The <ApiLinkpkg="maps"type="GeographicMap"member="dataSource"label="DataSource" /> property of geographic series is used for the purpose of binding to data models. This property can be bound an array of custom objects.
15
15
16
16
## Angular Binding Geographic Data Models Example
17
17
@@ -30,8 +30,8 @@ The following table summarized data structures required for each type of geograp
30
30
| <ApiLinkpkg="maps"type="GeographicProportionalSymbolSeries" /> | <ApiLinkpkg="maps"type="GeographicScatterAreaSeries"member="longitudeMemberPath"label="LongitudeMemberPath" />, <ApiLinkpkg="maps"type="GeographicScatterAreaSeries"member="latitudeMemberPath"label="LatitudeMemberPath" />, <ApiLinkpkg="maps"type="GeographicProportionalSymbolSeries"member="radiusMemberPath"label="RadiusMemberPath" /> | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for size/radius of symbols |
31
31
| <ApiLinkpkg="maps"type="GeographicScatterAreaSeries" /> | <ApiLinkpkg="maps"type="GeographicScatterAreaSeries"member="longitudeMemberPath"label="LongitudeMemberPath" />, <ApiLinkpkg="maps"type="GeographicScatterAreaSeries"member="latitudeMemberPath"label="LatitudeMemberPath" />, <ApiLinkpkg="maps"type="GeographicScatterAreaSeries"member="colorMemberPath"label="ColorMemberPath" /> | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values |
32
32
| <ApiLinkpkg="maps"type="GeographicContourLineSeries" /> | <ApiLinkpkg="maps"type="GeographicScatterAreaSeries"member="longitudeMemberPath"label="LongitudeMemberPath" />, <ApiLinkpkg="maps"type="GeographicScatterAreaSeries"member="latitudeMemberPath"label="LatitudeMemberPath" />, <ApiLinkpkg="maps"type="GeographicContourLineSeries"member="valueMemberPath"label="ValueMemberPath" /> | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values |
33
-
|<ApiLinkpkg="maps"type="GeographicShapeSeries" />|<ApiLinkpkg="maps"type="GeographicShapeSeries"member="shapeMemberPath"label="ShapeMemberPath" />|Specifies the name of data column of <ApiLinkpkg="maps"type="GeographicMap"member="ItemsSource"label="ItemsSource" /> items that contains the geographic points of shapes. This property must be mapped to an array of arrays of objects with x and y properties. |
34
-
|<ApiLinkpkg="maps"type="GeographicPolylineSeries" />|<ApiLinkpkg="maps"type="GeographicShapeSeries"member="shapeMemberPath"label="ShapeMemberPath" />|Specifies the name of data column of <ApiLinkpkg="maps"type="GeographicMap"member="ItemsSource"label="ItemsSource" /> items that contains the geographic coordinates of lines. This property must be mapped to an array of arrays of objects with x and y properties. |
33
+
|<ApiLinkpkg="maps"type="GeographicShapeSeries" />|<ApiLinkpkg="maps"type="GeographicShapeSeries"member="shapeMemberPath"label="ShapeMemberPath" />|Specifies the name of data column of <ApiLinkpkg="maps"type="GeographicMap"member="dataSource"label="DataSource" /> items that contains the geographic points of shapes. This property must be mapped to an array of arrays of objects with x and y properties. |
34
+
|<ApiLinkpkg="maps"type="GeographicPolylineSeries" />|<ApiLinkpkg="maps"type="GeographicShapeSeries"member="shapeMemberPath"label="ShapeMemberPath" />|Specifies the name of data column of <ApiLinkpkg="maps"type="GeographicMap"member="dataSource"label="DataSource" /> items that contains the geographic coordinates of lines. This property must be mapped to an array of arrays of objects with x and y properties. |
35
35
36
36
## Code Snippet
37
37
The following code shows how to bind the <ApiLinkpkg="maps"type="GeographicSymbolSeries" /> to a custom data model that contains geographic locations of some cities of the world stored using longitude and latitude coordinates. Also, we use the <ApiLinkpkg="maps"type="GeographicPolylineSeries" /> to plot shortest geographic path between these locations using the [WorldUtility](geo-map-resources-world-util.md)
Copy file name to clipboardExpand all lines: docs/angular/src/content/en/components/geo-map-binding-data-overview.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
10
10
11
11
# Angular Data Binding
12
12
13
-
The Ignite UI for Angular map component is designed to display geo-spatial data from shape files and/or geographic locations from data models on geographic imagery maps. The <ApiLinkpkg="maps"type="GeographicMap"member="ItemsSource"label="ItemsSource" /> property of geographic series is used for the purpose of binding to data models.
13
+
The Ignite UI for Angular map component is designed to display geo-spatial data from shape files and/or geographic locations from data models on geographic imagery maps. The <ApiLinkpkg="maps"type="GeographicMap"member="dataSource"label="DataSource" /> property of geographic series is used for the purpose of binding to data models.
14
14
15
15
## Types of Data Sources
16
16
The following section list some of data source that you can bind in the geographic map component
Copy file name to clipboardExpand all lines: docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx
+5-1Lines changed: 5 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -41,7 +41,7 @@ The following code creates an instance of the <ApiLink pkg="geo-core" type="Shap
41
41
42
42
43
43
## Binding Shapefiles
44
-
In the map component, Geographic Series are used for displaying geo-spatial data that is loaded from shape files. All types of Geographic Series have an `ItemsSource` property which can be bound to an array of objects. The <ApiLinkpkg="geo-core"type="ShapefileRecord"suffix={false} /> is an example such array because it contains a list of `IgxShapefileRecord` objects.
44
+
In the map component, Geographic Series are used for displaying geo-spatial data that is loaded from shape files. All types of Geographic Series have an <ApiLinkpkg="maps"type="GeographicMap"member="dataSource"label="DataSource" /> property which can be bound to an array of objects. The <ApiLinkpkg="geo-core"type="ShapefileRecord"suffix={false} /> is an example such array because it contains a list of `IgxShapefileRecord` objects.
45
45
46
46
The `ShapefileRecord` class provides properties for storing geo-spatial data, listed in the following table.
47
47
@@ -148,3 +148,7 @@ export class MapBindingShapefilePolylinesComponent implements AfterViewInit {
Copy file name to clipboardExpand all lines: docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx
+12-12Lines changed: 12 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -31,14 +31,14 @@ The following table summarizes properties of GeographicScatterAreaSeries used fo
31
31
32
32
| Property Name | Property Type | Description |
33
33
|--------------|---------------| ---------------|
34
-
|`ItemsSource`|any|The source of data items to perform triangulation on if the `TrianglesSource` property provides no triangulation data.|
35
-
|`LongitudeMemberPath`|string|The name of the property containing the Longitude for all items bound to the `ItemsSource`.|
36
-
|`LatitudeMemberPath`|string|The name of the property containing the Latitude for all items bound to the `ItemsSource`.|
37
-
|`ColorMemberPath`|string|The name of the property containing a value at Latitude and Longitude coordinates of each data item. This numeric value will be be converted to a color when the `ColorScale` property is set.|
38
-
|`TrianglesSource`|any|The source of triangulation data. Setting Triangles of the `TriangulationSource` object to this property improves both runtime performance and geographic series rendering.|
39
-
|`TriangleVertexMemberPath1`|string|The name of the property of the `TrianglesSource` items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.|
40
-
|`TriangleVertexMemberPath2`|string|The name of the property of the `TrianglesSource` items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.|
41
-
|`TriangleVertexMemberPath3`|string|The name of the property of the `TrianglesSource` items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.|
34
+
|<ApiLinkpkg="maps"type="GeographicScatterAreaSeries"member="triangulationDataSource"label="ItemsSource" />|any|The source of data items to perform triangulation on if the <ApiLinkpkg="maps"type="GeographicScatterAreaSeries"member="trianglesSource"label="TrianglesSource" /> property provides no triangulation data.|
35
+
|<ApiLinkpkg="maps"type="GeographicScatterAreaSeries"member="longitudeMemberPath"label="LongitudeMemberPath" />|string|The name of the property containing the Longitude for all items bound to the <ApiLinkpkg="maps"type="GeographicScatterAreaSeries"member="triangulationDataSource"label="ItemsSource" />.|
36
+
|<ApiLinkpkg="maps"type="GeographicScatterAreaSeries"member="latitudeMemberPath"label="LatitudeMemberPath" />|string|The name of the property containing the Latitude for all items bound to the <ApiLinkpkg="maps"type="GeographicScatterAreaSeries"member="triangulationDataSource"label="ItemsSource" />.|
37
+
|<ApiLinkpkg="maps"type="GeographicScatterAreaSeries"member="colorMemberPath"label="ColorMemberPath" />|string|The name of the property containing a value at Latitude and Longitude coordinates of each data item. This numeric value will be be converted to a color when the `ColorScale` property is set.|
38
+
|<ApiLinkpkg="maps"type="GeographicScatterAreaSeries"member="trianglesSource"label="TrianglesSource" />|any|The source of triangulation data. Setting Triangles of the `TriangulationSource` object to this property improves both runtime performance and geographic series rendering.|
39
+
|<ApiLinkpkg="maps"type="GeographicScatterAreaSeries"member="triangleVertexMemberPath1"label="TriangleVertexMemberPath1" />|string|The name of the property of the <ApiLinkpkg="maps"type="GeographicScatterAreaSeries"member="trianglesSource"label="TrianglesSource" /> items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.|
40
+
|<ApiLinkpkg="maps"type="GeographicScatterAreaSeries"member="triangleVertexMemberPath2"label="TriangleVertexMemberPath2" />|string|The name of the property of the <ApiLinkpkg="maps"type="GeographicScatterAreaSeries"member="trianglesSource"label="TrianglesSource" /> items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.|
41
+
|<ApiLinkpkg="maps"type="GeographicScatterAreaSeries"member="triangleVertexMemberPath3"label="TriangleVertexMemberPath3" />|string|The name of the property of the <ApiLinkpkg="maps"type="GeographicScatterAreaSeries"member="trianglesSource"label="TrianglesSource" /> items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.|
42
42
43
43
## Color Scale
44
44
Use the ColorScale property of the <ApiLinkpkg="maps"type="GeographicScatterAreaSeries" /> to resolve colors values of points and thus fill surface of the geographic series. The colors are smoothly interpolated around the shape of the surface by applying a pixel-wise triangle rasterizer to a triangulation data. Because rendering of the surface is pixel-wise, the color scale uses colors instead of brushes.
@@ -48,10 +48,10 @@ The following table list properties of the `CustomPaletteColorScale` affecting s
48
48
49
49
| Property Name | Property Type | Description |
50
50
|--------------|---------------| ---------------|
51
-
|`Palette`|`ObservableCollection<Color>`|Gets or sets the collection of colors to select from or to interpolate between.|
52
-
|`InterpolationMode`|`ColorScaleInterpolationMode`|Gets or sets the method getting a color from the Palette.|
53
-
|`MaximumValue`|double|The highest value to assign a color. Any given value greater than this value will be Transparent.|
54
-
|`MinimumValue`|double|The lowest value to assign a color. Any given value less than this value will be Transparent.|
51
+
|<ApiLinkpkg="charts"type="CustomPaletteColorScale"member="palette"label="Palette" />|`ObservableCollection<Color>`|Gets or sets the collection of colors to select from or to interpolate between.|
52
+
|<ApiLinkpkg="charts"type="CustomPaletteColorScale"member="interpolationMode"label="InterpolationMode" />|`ColorScaleInterpolationMode`|Gets or sets the method getting a color from the Palette.|
53
+
|<ApiLinkpkg="charts"type="CustomPaletteColorScale"member="maximumValue"label="MaximumValue" />|double|The highest value to assign a color. Any given value greater than this value will be Transparent.|
54
+
|<ApiLinkpkg="charts"type="CustomPaletteColorScale"member="minimumValue"label="MinimumValue" />|double|The lowest value to assign a color. Any given value less than this value will be Transparent.|
55
55
56
56
## Code Snippet
57
57
The following code shows how to bind the <ApiLinkpkg="maps"type="GeographicScatterAreaSeries" /> to triangulation data representing surface temperatures in the world.
Copy file name to clipboardExpand all lines: docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -25,15 +25,15 @@ In Angular map component, you can use the <ApiLink pkg="maps" type="GeographicPr
25
25
The demo above shows the <ApiLinkpkg="maps"type="GeographicProportionalSymbolSeries" /> series and how to specify data binding options of the series. Automatic marker selection is configured along with marker collision avoidance logic, and marker outline and fill colors are specified too.
26
26
27
27
## Configuration Summary
28
-
Similar to other types of scatter series in the map control, the <ApiLinkpkg="maps"type="GeographicProportionalSymbolSeries" /> series has the <ApiLinkpkg="charts"type="Series"member="DataSource"label="ItemsSource" /> property which can be bound to an array of objects. In addition, each data item in the items source must have two data columns that store geographic longitude and latitude coordinates and uses the <ApiLinkpkg="maps"type="GeographicProportionalSymbolSeries"member="longitudeMemberPath"label="LongitudeMemberPath" /> and <ApiLinkpkg="maps"type="GeographicProportionalSymbolSeries"member="latitudeMemberPath"label="LatitudeMemberPath" /> properties to map these data columns. The <ApiLinkpkg="maps"type="GeographicProportionalSymbolSeries"member="radiusScale"label="RadiusScale" /> and <ApiLinkpkg="maps"type="GeographicProportionalSymbolSeries"member="radiusMemberPath"label="RadiusMemberPath" /> will settings configures the radius for the bubbles.
28
+
Similar to other types of scatter series in the map control, the <ApiLinkpkg="maps"type="GeographicProportionalSymbolSeries" /> series has the <ApiLinkpkg="maps"type="GeographicMap"member="dataSource"label="DataSource" /> property which can be bound to an array of objects. In addition, each data item in the items source must have two data columns that store geographic longitude and latitude coordinates and uses the <ApiLinkpkg="maps"type="GeographicProportionalSymbolSeries"member="longitudeMemberPath"label="LongitudeMemberPath" /> and <ApiLinkpkg="maps"type="GeographicProportionalSymbolSeries"member="latitudeMemberPath"label="LatitudeMemberPath" /> properties to map these data columns. The <ApiLinkpkg="maps"type="GeographicProportionalSymbolSeries"member="radiusScale"label="RadiusScale" /> and <ApiLinkpkg="maps"type="GeographicProportionalSymbolSeries"member="radiusMemberPath"label="RadiusMemberPath" /> will settings configures the radius for the bubbles.
29
29
30
30
The following table summarizes the GeographicHighDensityScatterSeries series properties used for data binding.
31
31
32
32
| Property|Type|Description |
33
33
| ---|---|--- |
34
-
| <ApiLinkpkg="charts"type="Series"member="DataSource"label="ItemsSource" />|any|Gets or sets the items source |
35
-
| <ApiLinkpkg="maps"type="GeographicProportionalSymbolSeries"member="longitudeMemberPath"label="LongitudeMemberPath" />|string|Uses the ItemsSource property to determine the location of the longitude values on the assigned items |
36
-
| <ApiLinkpkg="maps"type="GeographicProportionalSymbolSeries"member="latitudeMemberPath"label="LatitudeMemberPath" />|string|Uses the ItemsSource property to determine the location of the latitude values on the assigned items |
34
+
| <ApiLinkpkg="maps"type="GeographicMap"member="dataSource"label="DataSource" />|any|Gets or sets the items source |
35
+
| <ApiLinkpkg="maps"type="GeographicProportionalSymbolSeries"member="longitudeMemberPath"label="LongitudeMemberPath" />|string|Uses the DataSource property to determine the location of the longitude values on the assigned items |
36
+
| <ApiLinkpkg="maps"type="GeographicProportionalSymbolSeries"member="latitudeMemberPath"label="LatitudeMemberPath" />|string|Uses the DataSource property to determine the location of the latitude values on the assigned items |
37
37
| <ApiLinkpkg="maps"type="GeographicProportionalSymbolSeries"member="radiusMemberPath"label="RadiusMemberPath" />|string|Sets the path to use to get the radius values for the series. |
38
38
| <ApiLinkpkg="maps"type="GeographicProportionalSymbolSeries"member="radiusScale"label="RadiusScale" />|<ApiLinkpkg="charts"type="SizeScale" />|Gets or sets the radius scale property for the current bubble series. |
39
39
| <ApiLinkpkg="charts"type="SizeScale"member="minimumValue"label="MinimumValue" />|any|Configure the minimum value for calculating value sub ranges. |
0 commit comments