React Geographic Contour Map
In React map component, you can use the IgrGeographicContourLineSeries
to draw colored contour lines, in a geographic context, based on a triangulation of longitude and latitude data with a numeric value assigned to each point. This type of geographic series is useful for rendering scattered data defined by geographic locations such as weather temperature, atmospheric pressure, precipitation, population distribution, topographic data, etc.
React Geographic Contour Map Example
The IgrGeographicContourLineSeries
works a lot like the IgrGeographicScatterAreaSeries
except that it represents data as contour lines, colored using a fill scale and the geographic scatter area series, represents data as a surface interpolated using a color scale.
Data Requirements
Similar to other types of geographic series in the map component, the IgrGeographicContourLineSeries
has the ItemsSource
property which can be bound to an array of objects. In addition, each item in the items source must have three data columns, two that store geographic location (longitude and latitude coordinates) and one data column that stores a value associated with the geographic location. These data column, are identified by longitudeMemberPath
, latitudeMemberPath
, and valueMemberPath
properties of the geographic series.
The IgrGeographicContourLineSeries
automatically performs built-in data triangulation on items in the ItemsSource if no triangulation is set to the trianglesSource
property. However, computing triangulation can be a very time-consuming process, so the runtime performance will be better when specifying a TriangulationSource
for this property, especially when a large number of data items are present.
Data Binding
The following table summarizes properties of IgrGeographicContourLineSeries
used for data binding.
Property Name | Property Type | Description |
---|---|---|
ItemsSource |
any | The source of data items to perform triangulation on if the trianglesSource property provides no triangulation data. |
longitudeMemberPath |
string | The name of the property containing the Longitude for all items bound to the ItemsSource . |
latitudeMemberPath |
string | The name of the property containing the Latitude for all items bound to to the ItemsSource . |
valueMemberPath |
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 fillScale property is set. |
trianglesSource |
any | Gets or sets the source of triangulation data. Setting Triangles of the TriangulationSource object to this property improves both runtime performance and geographic series rendering. |
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. |
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. |
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. |
Contour Fill Scale
Use the fillScale
property of the IgrGeographicContourLineSeries
to resolve fill brushes of the contour lines of the geographic series.
The provided `ValueBrushScale class should satisfy most of your coloring needs, but the application for custom coloring logic can inherit the ValueBrushScale class.
The following table list properties of the CustomPaletteColorScale affecting the surface coloring of the GeographicContourLineSeries.
Property Name | Property Type | Description |
---|---|---|
brushes |
BrushCollection | Gets or sets the collection of brushes for filling contours of the IgrGeographicContourLineSeries |
maximumValue |
double | The highest value to assign a brush in a fill scale. |
minimumValue |
double | The lowest value to assign a brush in a fill scale. |
Code Snippet
The following code shows how to bind the IgrGeographicContourLineSeries
to triangulation data representing surface temperatures in the world.
import { IgrGeographicMapModule } from 'igniteui-react-maps';
import { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrGeographicContourLineSeries } from 'igniteui-react-maps';
import { IgrValueBrushScale } from 'igniteui-react-charts';
import { IgrCustomPaletteColorScale } from 'igniteui-react-charts';
import { IgrShapeDataSource } from 'igniteui-react-core';
IgrGeographicMapModule.register();
IgrDataChartInteractivityModule.register();
// ...
public render() {
return (
<IgrGeographicMap
ref={this.onMapReferenced}
width="600px"
height="600px"
zoomable="true" />
);
}
public onMapReferenced(map: IgrGeographicMap) {
this.geoMap = map;
this.geoMap.windowRect = { left: 0.2, top: 0.1, width: 0.6, height: 0.6 };
const sds = new IgrShapeDataSource();
sds.importCompleted = this.onDataLoaded;
sds.shapefileSource = "/Shapes/WorldTemperatures.shp";
sds.databaseSource = "/Shapes/WorldTemperatures.dbf";
sds.dataBind();
}
public onDataLoaded(sds: IgrShapeDataSource, e: any) {
const contourPoints: any[] = [];
for (const record of sds.getPointData()) {
const temp = record.fieldValues.Contour;
if (temp % 10 === 0 && temp >= 0) {
for (const shapes of record.points) {
for (let i = 0; i < shapes.length; i++) {
if (i % 5 === 0) {
const p = shapes[i];
const item = { lon: p.x, lat: p.y, value: temp};
contourPoints.push(item);
}
}
}
}
}
this.createContourSeries(contourPoints);
}
public createContourSeries(data: any[])
{
const brushes = [
"rgba(32, 146, 252, 0.5)",
"rgba(14, 194, 14, 0.5)",
"rgba(252, 120, 32, 0.5)",
"rgba(252, 32, 32, 0.5)",
];
const brushScale = new IgrValueBrushScale({});
brushScale.brushes = brushes;
brushScale.minimumValue = 0;
brushScale.maximumValue = 30;
const contourSeries = new IgrGeographicContourLineSeries( { name: "contourSeries" });
contourSeries.dataSource = data;
contourSeries.longitudeMemberPath = "lon";
contourSeries.latitudeMemberPath = "lat";
contourSeries.valueMemberPath = "value";
contourSeries.fillScale = brushScale;
contourSeries.thickness = 4;
this.geoMap.series.add(contourSeries);
}
API References
fillScale
IgrGeographicContourLineSeries
IgrGeographicScatterAreaSeries
ItemsSource
latitudeMemberPath
longitudeMemberPath
trianglesSource
TriangulationSource
IgrValueBrushScale
valueMemberPath