React Binding Geographic Data Models

    The Ignite UI for React map component is designed to display geo-spatial data from shape files and/or geographic locations from data models on geographic imagery maps. The 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.

    React Binding Geographic Data Models Example

    The following table summarized data structures required for each type of geographic series:

    Geographic Series Properties Description
    IgrGeographicSymbolSeries longitudeMemberPath, latitudeMemberPath Specifies names of 2 numeric longitude and latitude coordinates
    IgrGeographicHighDensityScatterSeries longitudeMemberPath, latitudeMemberPath Specifies names of 2 numeric longitude and latitude coordinates
    IgrGeographicProportionalSymbolSeries longitudeMemberPath, latitudeMemberPath, radiusMemberPath Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for size/radius of symbols
    IgrGeographicScatterAreaSeries longitudeMemberPath, latitudeMemberPath, colorMemberPath Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values
    IgrGeographicContourLineSeries longitudeMemberPath, latitudeMemberPath, valueMemberPath Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values
    IgrGeographicShapeSeries shapeMemberPath Specifies the name of data column of 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.
    IgrGeographicPolylineSeries shapeMemberPath Specifies the name of data column of 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.

    Code Snippet

    The following code shows how to bind the IgrGeographicSymbolSeries 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 IgrGeographicPolylineSeries to plot shortest geographic path between these locations using the WorldUtility

    import { IgrGeographicSymbolSeries } from 'igniteui-react-maps';
import { IgrGeographicPolylineSeries } from 'igniteui-react-maps';
import WorldUtils from "./WorldUtils" ;
// ...

constructor(props: any) {
    super(props);

    const cityDAL = { lat:  32.763, lon: -96.663, country: "US", name: "Dallas" };
    const cityNZL = { lat: -36.848, lon: 174.763, country: "New Zealand", name:"Auckland" };
    const cityCHL = { lat: -33.475, lon: -70.647, country: "Chile", name:"Santiago" };
    const cityJAP = { lat:  35.683, lon: 139.809, country: "Japan", name: "Tokyo" }
    const citySNG = { lat:  1.229, lon: 104.177,  country: "Singapore", name:"Singapore" };
    const cityMOS = { lat: 55.750, lon:  37.700,  country: "Russia", name: "Moscow"};

    this.flights = [
        { origin: cityDAL, dest: citySNG, color: "Green" },
        { origin: cityMOS, dest: cityNZL, color: "Red" },
        { origin: cityCHL, dest: cityJAP, color: "Blue" },
    ];

    for (const flight of this.flights) {
        this.createPolylineSeries(flight);
        this.createSymbolSeries(flight);
    }
}

public createSymbolSeries(flight: any)
{
    const geoLocations = [flight.origin, flight.dest ];
    const symbolSeries = new IgrGeographicSymbolSeries ( { name: "symbolSeries" });
    symbolSeries.dataSource = geoLocations;
    symbolSeries.markerType = MarkerType.Circle;
    symbolSeries.latitudeMemberPath = "lat";
    symbolSeries.longitudeMemberPath = "lon";
    symbolSeries.markerBrush  = "White";
    symbolSeries.markerOutline = flight.color;
    symbolSeries.thickness = 1;
    this.geoMap.series.add(symbolSeries);
}

public createPolylineSeries(flight: any)
{
    const geoPath = WorldUtils.calcPaths(flight.origin, flight.dest);
    const geoDistance = WorldUtils.calcDistance(flight.origin, flight.dest);
    const geoRoutes = [ { points: geoPath } ];
    const lineSeries = new IgrGeographicPolylineSeries ( { name: "lineSeries" });
    lineSeries.dataSource = geoRoutes;
    lineSeries.shapeMemberPath = "points";
    lineSeries.shapeStrokeThickness = 9;
    lineSeries.shapeOpacity = 0.5;
    lineSeries.shapeStroke = flight.color;
    this.geoMap.series.add(lineSeries);
}

    API References