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 é carregado e vinculado IgcGeographicHighDensityScatterSeriesComponent no componente de mapa a uma matriz de objetos criados a partir do arquivo JSON carregado 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