Web Components Enlazar archivos JSON con ubicaciones geográficas

    Con el mapa Ignite UI for Web Components, puede trazar datos geográficos cargados desde varios tipos de archivos. Por ejemplo, puede cargar ubicaciones geográficas desde un archivo JSON (JavaScript Object Notation).

    Web Components Ejemplo de enlace de archivos JSON con ubicaciones geográficas

    EXAMPLE
    TS
    HTML
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Ejemplo de datos

    Aquí hay un ejemplo de datos del archivo 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 },
     // ...
    ]
    json
    Ignite UI for Web Components | CTA Banner

    Fragmento de código

    El siguiente código carga y vincula IgcGeographicHighDensityScatterSeriesComponent en el componente de mapa a una matriz de objetos creados a partir de un archivo JSON cargado con ubicaciones geográficas:

    <igc-geographic-map id="geoMap" width="100%" height="100%">
    
    </igc-geographic-map>
    html
    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);
    }
    ts

    Referencias de API