React Enlazar archivos JSON con ubicaciones geográficas

    Con el mapa Ignite UI for React, 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).

    React Ejemplo de enlace de archivos JSON con ubicaciones geográficas

    EXAMPLE
    DATA
    TSX

    ¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus 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 React | CTA Banner

    Fragmento de código

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

    import { IgrGeographicSymbolSeries } from 'igniteui-react-maps';
    import { MarkerType } from 'igniteui-react-charts';
    // ...
    
    public componentDidMount() {
        // fetching JSON data with geographic locations from public folder
        fetch(url + "/Data/WorldCities.json")
            .then((response) => response.text())
            .then(data => this.onDataLoaded(data));
    }
    
    public onDataLoaded(jsonData: any[]) {
    
        const geoLocations: any[] = [];
        // parsing JSON data and using only cities that are capitals
        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);
            }
        }
        // creating symbol series with loaded data
        const geoSeries = new IgrGeographicSymbolSeries( { name: "series" });
        geoSeries.dataSource = geoLocations;
        geoSeries.markerType = MarkerType.Circle;
        geoSeries.latitudeMemberPath  = "latitude";
        geoSeries.longitudeMemberPath = "longitude";
        geoSeries.markerBrush = "LightGray";
        geoSeries.markerOutline = "Black";
        // adding symbol series to the geographic amp
        this.geoMap.series.add(geoSeries);
    }
    ts

    Referencias de API