React Binding Shape Files with Geo-spatial Data
The Ignite UI for React map component, the IgrShapeDataSource
class loads geo-spatial data (points/locations, polylines, polygons) from shape files and converts it to a collection of IgrShapefileRecord
objects.
React Binding Shape Files with Geo-spatial Data Example
The following table explains properties of the IgrShapeDataSource
class for loading shape files.
Property | Type | Description |
---|---|---|
shapefileSource |
string | Specifies the Uri to a shape file (.shp) that contains geo-spatial data items. |
databaseSource |
string | Specifies the Uri to a shape database file (.dbf) that contains a data table for geo-spatial data items. |
When both source properties are set to non-null values, then the IgrShapeDataSource
object’s ImportAsync method is invoked which in return performs fetching and reading the shape files and finally doing the conversion. After this operation is complete, the IgrShapeDataSource
is populated with IgrShapefileRecord
objects and the ImportCompleted
event is raised in order to notify about completed process of loading and converting geo-spatial data from shape files.
Loading Shapefiles
The following code creates an instance of the IgrShapeDataSource
object for loading a shape file that contains locations of major cities in the world. It also demonstrates how to handle the ImportCompleted
event as a prerequisite for binding data to the map component.
import { IgrShapeDataSource } from 'igniteui-react-core';
// ...
const sds = new IgrShapeDataSource();
sds.importCompleted = this.onShapePolylinesLoaded;
sds.shapefileSource = url + "/shapes/WorldCableRoutes.shp";
sds.databaseSource = url + "/shapes/WorldCableRoutes.dbf";
sds.dataBind();
Binding Shapefiles
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 IgrShapeDataSource
is an example such array because it contains a list of IgrShapefileRecord
objects.
The IgrShapefileRecord
class provides properties for storing geo-spatial data, listed in the following table.
Property | Description |
---|---|
Points |
Contains all the points in one geo-spatial shape loaded from a shape file (.shp). For example, the country of Japan in shape file would be represented as a list of a list of points object, where:
|
This data structure is suitable for use in most Geographic Series as long as appropriate data columns are mapped to them.
Code Snippet
This code example assumes that shape files were loaded using the IgrShapeDataSource
.
The following code binds IgrGeographicPolylineSeries
in the map component to the IgrShapeDataSource
and maps the Points
property of all IgrShapefileRecord
objects.
import { IgrGeographicPolylineSeries } from 'igniteui-react-maps';
// ...
public onShapePolylinesLoaded(sds: IgrShapeDataSource, e: any) {
const geoPolylines: any[] = [];
for (const record of sds.getPointData()) {
// using field/column names from .DBF file
const route = {
points: record.points,
name: record.fieldValues["Name"],
capacity: record.fieldValues["CapacityG"],
distance: record.fieldValues["DistanceKM"],
isOverLand: record.fieldValues["OverLand"] === 0,
isActive: record.fieldValues["NotLive"] !== 0,
service: record.fieldValues["InService"]
};
geoPolylines.push(route);
}
const geoSeries = new IgrGeographicPolylineSeries( { name: "series" });
geoSeries.dataSource = geoPolylines;
geoSeries.shapeMemberPath = "points";
geoSeries.shapeFilterResolution = 0.0;
geoSeries.shapeStrokeThickness = 3;
geoSeries.shapeStroke = "rgb(82, 82, 82, 0.4)";
geoSeries.tooltipTemplate = this.createTooltip;
this.geoMap.series.add(symbolSeries);
}
API References
Fields
IgrGeographicPolylineSeries
ImportCompleted
ItemsSource
Points
IgrShapeDataSource