Web Components Binding Multiple Data Sources

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

Web Components Binding Multiple Data Sources Example

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

• IgcGeographicSymbolSeriesComponent – displays locations of major airports
• IgcGeographicPolylineSeriesComponent – displays flights between airports
• IgcGeographicPolylineSeriesComponent – displays gridlines of major coordinates

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 Web Components map. For example, you can the use WorldConnections script.

<igc-geographic-map
    id="geoMap"
    height="100%"
    width="100%"
    zoomable="true">
</igc-geographic-map>

lineSeries.dataSource = this.worldFlights;
gridSeries.dataSource = this.worldGridlines;
symbolSeries.dataSource = this.worldAirports;

Overlaying Flights

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

<igc-geographic-polyline-series
    id="lineSeries"
    shape-member-path="points"
    shape-stroke="rgba(196, 14, 14, 0.05)"
    shape-stroke-thickness="4">
</igc-geographic-polyline-series>

Overlaying Gridlines

Create second IgcGeographicPolylineSeriesComponent object with geographic gridlines and add it to the Series collection of the Ignite UI for Web Components map.

<igc-geographic-polyline-series
    id="gridSeries"
    shape-member-path="points"
    shape-stroke="Gray"
    shape-stroke-thickness="1">
</igc-geographic-polyline-series>

Overlaying Airports

Create IgcGeographicSymbolSeriesComponent object with airport points and add it to the Series collection of the geographic Ignite UI for Web Components map.

<igc-geographic-symbol-series
    id="symbolSeries"
    latitude-member-path="lat"
    longitude-member-path="lon"
    marker-type="Circle"
    marker-brush="rgba(170, 211, 223, 1)"
    marker-outline="rgba(73, 73, 73, 1)"
    thickness="1">
</igc-geographic-symbol-series>

Summary

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

import { IgcGeographicMapComponent, IgcGeographicPolylineSeriesComponent, IgcGeographicSymbolSeriesComponent } from 'igniteui-webcomponents-maps';

<igc-geographic-map
    id="geoMap"
    height="100%"
    width="100%"
    zoomable="true">
    <igc-geographic-polyline-series
        id="lineSeries"
        shape-member-path="points"
        shape-stroke="rgba(196, 14, 14, 0.05)"
        shape-stroke-thickness="4">
    </igc-geographic-polyline-series>
    <igc-geographic-polyline-series
        id="gridSeries"
        shape-member-path="points"
        shape-stroke="Gray"
        shape-stroke-thickness="1">
    </igc-geographic-polyline-series>
    <igc-geographic-symbol-series
        id="symbolSeries"
        latitude-member-path="lat"
        longitude-member-path="lon"
        marker-type="Circle"
        marker-brush="rgba(170, 211, 223, 1)"
        marker-outline="rgba(73, 73, 73, 1)"
        thickness="1">
    </igc-geographic-symbol-series>
</igc-geographic-map>

// fields:
private geoMap: IgcGeographicMapComponent
private lineSeries: IgcGeographicPolylineSeriesComponent
private gridSeries: IgcGeographicPolylineSeriesComponent
private symbolSeries: IgcGeographicSymbolSeriesComponent

// initialization:
var geoMap = this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;
var lineSeries = this.lineSeries = document.getElementById('lineSeries') as IgcGeographicPolylineSeriesComponent;
var gridSeries = this.gridSeries = document.getElementById('gridSeries') as IgcGeographicPolylineSeriesComponent;
var symbolSeries = this.symbolSeries = document.getElementById('symbolSeries') as IgcGeographicSymbolSeriesComponent;

// bindings:
lineSeries.dataSource = this.worldFlights;
gridSeries.dataSource = this.worldGridlines;
symbolSeries.dataSource = this.worldAirports;

API References