Angular Binding and Overlaying Multiple Shape Files

In the IgxGeographicMapComponent, you can add multiple geographic series objects to overlay a few shapefiles with geo-spacial data. For example, IgxGeographicSymbolSeriesComponent for plotting geographic locations of ports, the IgxGeographicPolylineSeriesComponent for plotting routes between ports, and the IgxGeographicShapeSeriesComponent for plotting shapes of countries.

Demo

This topic takes you step-by-step towards displaying multiple geographic series in the map component. All geographic series plot following geo-spatial data loaded from shape files using the ShapeDataSource class. Refer to the Binding Shape Files topic for more information about ShapeDataSource object.

IgxGeographicSymbolSeriesComponent – displays locations of major cities IgxGeographicPolylineSeriesComponent – displays routes between major ports IgxGeographicShapeSeriesComponent – displays shapes of countries of the world

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

Loading Multiple Shapefiles

In constructor of your page, add a ShapeDataSource for each shapefile that you want to display in the geographic map component.

Overlaying Shape Polygons

Create IgxGeographicShapeSeriesComponent object with shapes of countries of the world and add it to Series collection of the IgxGeographicMapComponent.

Overlaying Shape Polyline

Create IgxGeographicPolylineSeriesComponent object with routes between major ports and add it to Series collection of the IgxGeographicMapComponent.

Overlaying Shape Points

Create IgxGeographicSymbolSeriesComponent object with locations of major cities and add it to Series collection of the IgxGeographicMapComponent.

Also, you might want to hide geographic imagery from the map background content if your shape files provided sufficient geographic context (e.g. shape of countries) for your application.