Web Components Binding JSON Files with Geographic Locations

With the Ignite UI for Web Components map, you can plot geographic data loaded from various file types. For example, you can load geographic locations from JavaScript Object Notation (JSON) file.

Web Components Binding JSON Files with Geographic Locations Example

Data Example

Here is an example of data from JSON file:

[
   { "name": "Sydney Island", "lat": -16.68972, "lon": 139.45917 },
   { "name": "Sydney Creek",  "lat": -16.3,     "lon": 128.95 },
   { "name": "Mount Sydney",  "lat": -21.39864, "lon": 121.193 },
 // ...
]

Code Snippet

The following code loads and binds GeographicHighDensityScatterSeries in the map component to an array of objects created from loaded JSON file with geographic locations:

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

</igc-geographic-map>

connectedCallback() {
    const url = "../data/WorldCities.json";

    fetch(url)
        .then((response) => response.json())
        .then(data => this.onDataLoaded(data));
}

onDataLoaded(jsonData: any[]) {
    const geoLocations: any[] = [];
    for (const jsonItem of jsonData) {
        if (jsonItem.cap) {
            const location = {
                latitude: jsonItem.lat,
                longitude: jsonItem.lon,
                population: jsonItem.pop,
                city: jsonItem.name,
                country: jsonItem.country
            };
            geoLocations.push(location);
        }
    }

    let geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
    let geoSeries : IgcGeographicSymbolSeriesComponent = new IgcGeographicSymbolSeriesComponent();
    geoSeries.dataSource = geoLocations;
    geoSeries.markerType = MarkerType.Circle;
    geoSeries.latitudeMemberPath  = "latitude";
    geoSeries.longitudeMemberPath = "longitude";
    geoSeries.markerBrush = "LightGray";
    geoSeries.markerOutline = "Black";

    geoMap.series.add(geoSeries);
}

API References