React Binding Multiple Data Sources

    In the Ignite UI for React map, you can add multiple geographic series objects to overlay custom data sources with geo-spacial data. For example, IgrGeographicSymbolSeries for plotting geographic locations of airports, the IgrGeographicPolylineSeries for plotting flights between airports, and 2nd IgrGeographicPolylineSeries for plotting gridlines of major geographic coordinates.

    React Binding Multiple Data Sources Example

    This topic takes you step-by-step towards displaying multiple geographic series that will plot following geo-spatial data:

    You can use geographic series in this or other combinations to plot desired data.

    Creating Data Sources

    Create data sources for all geographic series that you want to display in the Ignite UI for React map. For example, you can the use WorldConnections script.

    import WorldConnections from "./WorldConnections";
    // ..
    
    public onMapReferenced(map: IgrGeographicMap) {
        this.geoMap = map;
    
        const worldFlights: any[] = WorldConnections.getFlights();
        const worldAirports: any[] = WorldConnections.getAirports();
        const worldGridlines: any[] = WorldConnections.getGridlines();
    
        // create and overlay geographic series here
    }
    

    Overlaying Flights

    Create first IgrGeographicPolylineSeries object with flight connections between major airports and add it to the Series collection of the Ignite UI for React map.

    const lineSeries = new IgrGeographicPolylineSeries ( { name: "lineSeries" });
    lineSeries.dataSource = worldFlights;
    lineSeries.shapeMemberPath = "points";
    lineSeries.shapeStroke = "rgba(196, 14, 14,0.05)";
    lineSeries.shapeStrokeThickness = 4;
    this.geoMap.series.add(lineSeries);
    

    Overlaying Gridlines

    Create second IgrGeographicPolylineSeries object with geographic gridlines and add it to the Series collection of the Ignite UI for React map.

    const gridSeries = new IgrGeographicPolylineSeries( { name: "gridSeries" });
    gridSeries.dataSource = worldGridlines;
    gridSeries.shapeMemberPath = "points";
    gridSeries.shapeStroke = "Gray";
    gridSeries.shapeStrokeThickness = 1;
    this.geoMap.series.add(gridSeries);
    

    Overlaying Airports

    Create IgrGeographicSymbolSeries object with airport points and add it to the Series collection of the geographic Ignite UI for React map.

    const symbolSeries = new IgrGeographicSymbolSeries ( { name: "symbolSeries" });
    symbolSeries.dataSource = worldAirports;
    symbolSeries.markerType = MarkerType.Circle;
    symbolSeries.latitudeMemberPath = "lat";
    symbolSeries.longitudeMemberPath = "lon";
    symbolSeries.markerBrush = "#aad3df";
    symbolSeries.markerOutline = "rgb(73, 73, 73)";
    this.geoMap.series.add(symbolSeries);
    

    Summary

    For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project.

    API References