Web Components Binding and Overlaying Multiple Shape Files
In the Ignite UI for Web Components map, you can add multiple geographic series objects to overlay a few shapefiles with geo-spacial data. For example, IgcGeographicSymbolSeriesComponent
for plotting geographic locations of ports, the IgcGeographicPolylineSeriesComponent
for plotting routes between ports, and the IgcGeographicShapeSeriesComponent
for plotting shapes of countries.
Web Components Binding and Overlaying Multiple Shape Files Example
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
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 IgcShapeDataSource
class. Refer to the Binding Shape Files topic for more information about IgcShapeDataSource
object.
IgcGeographicSymbolSeriesComponent
– displays locations of major citiesIgcGeographicPolylineSeriesComponent
– displays routes between major portsIgcGeographicShapeSeriesComponent
– displays shapes of countries of the world
You can use geographic series in above or other combinations to plot desired data.
Importing Components
First, let's import required components and modules:
import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcGeographicMapComponent } from 'igniteui-webcomponents-maps';
import { IgcGeographicShapeSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcGeographicPolylineSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcGeographicSymbolSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(
IgcDataChartInteractivityModule,
IgcGeographicMapModule
);
ts
Creating Series
Next, we need to create a map with a few Geographic Series that will later load different type of shapefile.
<igc-geographic-map id="geoMap" width="100%" height="100%" >
<igc-geographic-shape-series
id="polygonSeries"
shape-memberPath="points"
shape-fill="rgb(150, 150, 150)"
shape-stroke="Black"
shape-stroke-thickness="1.0">
</igc-geographic-shape-series>
<igc-geographic-polyline-series
id="lineSeries"
shape-member-path="points"
shape-stroke="rgba(147, 15, 180, 0.5)"
thickness="3.0" >
</igc-geographic-polyline-series>
<igc-geographic-symbol-series
id="symbolSeries"
longitude-member-path="longitude"
latitude-member-path="latitude"
marker-type="Circle"
marker-outline="rgb(2, 102, 196)"
marker-brush="White">
</igc-geographic-symbol-series>
</igc-geographic-map>
html
Loading Shapefiles
Next, in constructor of your page, add a IgcShapeDataSource
for each shapefile that you want to display in the geographic map component.
const sdsPolygons = new IgcShapeDataSource();
sdsPolygons.importCompleted = this.onPolygonsLoaded;
sdsPolygons.shapefileSource = url + "/shapes/WorldCountries.shp";
sdsPolygons.databaseSource = url + "/shapes/WorldCountries.dbf";
sdsPolygons.dataBind();
const sdsPolylines = new IgcShapeDataSource();
sdsPolylines.importCompleted = this.onPolylinesLoaded;
sdsPolylines.shapefileSource = url + "/shapes/WorldConnections.shp";
sdsPolylines.databaseSource = url + "/shapes/WorldConnections.dbf";
sdsPolylines.dataBind();
const sdsLocations = new IgcShapeDataSource();
sdsLocations.importCompleted = this.onPointsLoaded;
sdsLocations.shapefileSource = url + "/Shapes/WorldCities.shp";
sdsLocations.databaseSource = url + "/Shapes/WorldCities.dbf";
sdsLocations.dataBind();
ts
Processing Polygons
Process shapes data loaded in IgcShapeDataSource
with of countries of the world and assign it to IgcGeographicShapeSeriesComponent
object.
import { IgcGeographicShapeSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
// ...
public onPolygonsLoaded(sds: IgcShapeDataSource, e: any) {
const geoPolygons: any[] = [];
// parsing shapefile data and creating geo-polygons
let pointData = sds.getPointData();
for ( let i = 0; i < pointData.length; i++ ) {
let record = pointData[i];
// using field/column names from .DBF file
const country = {
points: record.points,
name: record.fieldValues.NAME,
gdp: record.fieldValues.GDP,
population: record.fieldValues.POPULATION
};
geoPolygons.push(country);
};
let polygonSeries = (document.getElementById("polygonSeries") as IgcGeographicShapeSeriesComponent);
polygonSeries.dataSource = geoPolygons;
polygonSeries.renderSeries(false);
}
ts
Processing Polyline
Process shapes data loaded in IgcShapeDataSource
with communication routes between major cities and assign it to IgcGeographicPolylineSeriesComponent
object.
import { IgcGeographicPolylineSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
// ...
public onPolylinesLoaded(sds: IgcShapeDataSource, e: any) {
const geoPolylines: any[] = [];
// parsing shapefile data and creating geo-polygons
let pointData = sds.getPointData();
for ( let i = 0; i < pointData.length; i++ ) {
let record = pointData[i];
// using field/column names from .DBF file
const route = {
points: record.points,
name: record.fieldValues.Name,
capacity: record.fieldValues.CapacityG,
distance: record.fieldValues.DistanceKM,
isOverLand: record.fieldValues.OverLand === 0,
isActive: record.fieldValues.NotLive !== 0,
service: record.fieldValues.InService
};
geoPolylines.push(route);
}
let lineSeries = (document.getElementById("lineSeries") as IgcGeographicPolylineSeriesComponent);
lineSeries.dataSource = geoPolylines;
lineSeries.renderSeries(false);
}
ts
Processing Points
Process shapes data loaded in IgcShapeDataSource
with locations of major cities and assign it to IgcGeographicSymbolSeriesComponent
object.
import { IgcGeographicSymbolSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
// ...
public onPointsLoaded(sds: IgcShapeDataSource, e: any) {
const geoLocations: any[] = [];
// parsing shapefile data and creating geo-locations
let pointData = sds.getPointData();
for ( let i = 0; i < pointData.length; i++ ) {
let record = pointData[i];
const pop = record.fieldValues.POPULATION;
if (pop > 0) {
// each shapefile record has just one point
const location = {
latitude: record.points[0][0].y,
longitude: record.points[0][0].x,
city: record.fieldValues.NAME,
population: pop
};
geoLocations.push(location);
}
}
let symbolSeries = (document.getElementById("symbolSeries") as IgcGeographicSymbolSeriesComponent);
symbolSeries.dataSource = geoLocations;
symbolSeries.renderSeries(false);
}
ts
Map Background
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.
public geoMap: IgcGeographicMapComponent;
// ...
this.geoMap.backgroundContent = null;
ts
Summary
For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project.
import { SampleBase } from "../../sample-base";
import { AssetsUtils } from "../../../utilities/AssetsUtils";
import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcGeographicMapComponent } from 'igniteui-webcomponents-maps';
import { IgcGeographicShapeSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcGeographicPolylineSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcGeographicSymbolSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(
IgcDataChartInteractivityModule,
IgcGeographicMapModule
);
let templateHTML = `
<div class="sample-container" style="background: #aad3df;">
<igc-geographic-map id="geoMap" width="100%" height="100%" >
<igc-geographic-shape-series
id="polygonSeries"
shape-memberPath="points"
shape-fill="rgb(150, 150, 150)"
shape-stroke="Black"
shape-stroke-thickness="1.0">
</igc-geographic-shape-series>
<igc-geographic-polyline-series
id="lineSeries"
shape-member-path="points"
shape-stroke="rgba(147, 15, 180, 0.5)"
thickness="3.0" >
</igc-geographic-polyline-series>
<igc-geographic-symbol-series
id="symbolSeries"
longitude-member-path="longitude"
latitude-member-path="latitude"
marker-type="Circle"
marker-outline="rgb(2, 102, 196)"
marker-brush="White">
</igc-geographic-symbol-series>
</igc-geographic-map>
</div>
`;
export class MapBindingMultipleShapes extends SampleBase {
public static htmlTagName: string = SampleBase.tag("MapBindingMultipleShapes");
public static register(): any {
window.customElements.define(this.htmlTagName, MapBindingMultipleShapes); return this;
}
private geoMap: IgcGeographicMapComponent;
constructor() {
super();
this.onPointsLoaded = this.onPointsLoaded.bind(this);
this.onPolylinesLoaded = this.onPolylinesLoaded.bind(this);
this.onPolygonsLoaded = this.onPolygonsLoaded.bind(this);
}
connectedCallback() {
this.innerHTML = templateHTML;
this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
this.geoMap.backgroundContent = null;
this.geoMap.windowRect = { left: 0.2, top: 0.1, width: 0.6, height: 0.6 };
const url = AssetsUtils.getAssetsPath();
const sdsPolygons = new IgcShapeDataSource();
sdsPolygons.importCompleted = this.onPolygonsLoaded;
sdsPolygons.shapefileSource = url + "/shapes/WorldCountries.shp";
sdsPolygons.databaseSource = url + "/shapes/WorldCountries.dbf";
sdsPolygons.dataBind();
const sdsPolylines = new IgcShapeDataSource();
sdsPolylines.importCompleted = this.onPolylinesLoaded;
sdsPolylines.shapefileSource = url + "/shapes/WorldCableRoutes.shp";
sdsPolylines.databaseSource = url + "/shapes/WorldCableRoutes.dbf";
sdsPolylines.dataBind();
// // loading a shapefile with geographic points
const sdsPoints = new IgcShapeDataSource();
sdsPoints.importCompleted = this.onPointsLoaded;
sdsPoints.shapefileSource = url + "/shapes/WorldCities.shp";
sdsPoints.databaseSource = url + "/shapes/WorldCities.dbf";
sdsPoints.dataBind();
}
public onPointsLoaded(sds: IgcShapeDataSource, e: any) {
console.log("onPoints");
const geoLocations: any[] = [];
// parsing shapefile data and creating geo-locations
let pointData = sds.getPointData();
for ( let i = 0; i < pointData.length; i++ ) {
let record = pointData[i];
const pop = record.fieldValues.POPULATION;
if (pop > 0) {
// each shapefile record has just one point
const location = {
latitude: record.points[0][0].y,
longitude: record.points[0][0].x,
city: record.fieldValues.NAME,
population: pop
};
geoLocations.push(location);
}
}
let symbolSeries = (document.getElementById("symbolSeries") as IgcGeographicSymbolSeriesComponent);
symbolSeries.dataSource = geoLocations;
symbolSeries.renderSeries(false);
}
public onPolylinesLoaded(sds: IgcShapeDataSource, e: any) {
console.log("onPolylines");
const geoPolylines: any[] = [];
// parsing shapefile data and creating geo-polygons
let pointData = sds.getPointData();
for ( let i = 0; i < pointData.length; i++ ) {
let record = pointData[i];
// using field/column names from .DBF file
const route = {
points: record.points,
name: record.fieldValues.Name,
capacity: record.fieldValues.CapacityG,
distance: record.fieldValues.DistanceKM,
isOverLand: record.fieldValues.OverLand === 0,
isActive: record.fieldValues.NotLive !== 0,
service: record.fieldValues.InService
};
geoPolylines.push(route);
}
let lineSeries = (document.getElementById("lineSeries") as IgcGeographicPolylineSeriesComponent);
lineSeries.dataSource = geoPolylines;
lineSeries.renderSeries(false);
}
public onPolygonsLoaded(sds: IgcShapeDataSource, e: any) {
console.log("onPolygons ");
const geoPolygons: any[] = [];
// parsing shapefile data and creating geo-polygons
let pointData = sds.getPointData();
for ( let i = 0; i < pointData.length; i++ ) {
let record = pointData[i];
// using field/column names from .DBF file
const country = {
points: record.points,
name: record.fieldValues.NAME,
gdp: record.fieldValues.GDP,
population: record.fieldValues.POPULATION
};
geoPolygons.push(country);
};
let polygonSeries = (document.getElementById("polygonSeries") as IgcGeographicShapeSeriesComponent);
polygonSeries.dataSource = geoPolygons;
polygonSeries.renderSeries(false);
}
}
ts