Web Components Associando arquivos JSON com localizações geográficas

    Com o mapa Ignite UI for Web Components, você pode plotar dados geográficos carregados de vários tipos de arquivo. Por exemplo, você pode carregar localizações geográficas do arquivo JavaScript Object Notation (JSON).

    Web Components Binding JSON Files with Geographic Locations Example

    Data Example

    Aqui está um exemplo de dados do arquivo JSON:

    [
   { "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

    O código a seguir carrega e vinculaIgcGeographicHighDensityScatterSeriesComponent no componente mapa a um array de objetos criados a partir de arquivos JSON carregados com localizações geográficas:

    <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