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 Binding JSON Files with Geographic Locations Example
Data Example
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 },
// ...
]
Code Snippet
El siguiente código se carga y se vinculaIgcGeographicHighDensityScatterSeriesComponent en el componente map a un array de objetos creados a partir de archivos JSON cargados con ubicaciones 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);
}