Angular Binding Multiple Data Sources

In the IgxGeographicMapComponent, you can add multiple geographic series objects to overlay custom data sources with geo-spacial data. For example, IgxGeographicSymbolSeriesComponent for plotting geographic locations of airports, the IgxGeographicPolylineSeriesComponent for plotting flights between airports, and 2nd IgxGeographicPolylineSeriesComponent for plotting gridlines of major geographic coordinates.

Demo

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

IgxGeographicSymbolSeriesComponent – displays locations of major airports IgxGeographicPolylineSeriesComponent – displays flights between airports IgxGeographicPolylineSeriesComponent – 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 IgxGeographicMapComponent. For example, you can the useWorldConnections script.

Overlaying Flights

Create first IgxGeographicPolylineSeriesComponent object with flight connections between major airports and add it to Series collection of the IgxGeographicMapComponent.

Overlaying Gridlines

Create second IgxGeographicPolylineSeriesComponent object with geographic gridlines and add it to Series collection of the IgxGeographicMapComponent.

Create IgxGeographicSymbolSeriesComponent object with geographic gridlines and add it to Series collection of the geographic IgxGeographicMapComponent.