Web Components Geographic Symbol Map

    In Web Components map component, you can use the IgcGeographicSymbolSeriesComponent to display geo-spatial data using points or markers in a geographic context. This type of geographic series is often used to render a collection of geographic locations such as cities, airports, earthquakes, or points of interests.

    Web Components Geographic Symbol Map Example

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    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.

    Data Requirements

    Similarly to other types of geographic series in the map component, the IgcGeographicSymbolSeriesComponent has the ItemsSource property which can be bound to an array of objects. In addition, each data item in this object must have two numeric data columns that store a geographic location (longitude and latitude). These data columns are then mapped to the latitudeMemberPath and longitudeMemberPath properties. The IgcGeographicSymbolSeriesComponent uses values of these mapped data columns to plot symbol elements in the geographic map component.

    Ignite UI for Web Components | CTA Banner

    Code Snippet

    The following code shows how to bind the IgcGeographicSymbolSeriesComponent to locations of cities loaded from a shape file using the IgcShapeDataSource.

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

</igc-geographic-map>
html
    import { IgcGeographicSymbolSeriesComponent } from 'igniteui-webcomponents-maps';
import { MarkerType } from 'igniteui-webcomponents-charts';
//...
connectedCallback() {
    this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
    this.addSeriesWith(WorldLocations.getCities(), "Gray");
    this.addSeriesWith(WorldLocations.getCapitals(),"rgb(32, 146, 252)");
}

addSeriesWith(locations: any[], brush: string)
{
    const symbolSeries = new IgcGeographicSymbolSeriesComponent ();
    symbolSeries.dataSource = locations;
    symbolSeries.markerType = MarkerType.Circle;
    symbolSeries.latitudeMemberPath = "lat";
    symbolSeries.longitudeMemberPath = "lon";
    symbolSeries.markerBrush  = "White";
    symbolSeries.markerOutline = brush;

    this.geoMap.series.add(symbolSeries);
}
ts

    API References