Web Components que vinculan 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 de notación de objetos JavaScript (JSON).
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 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>
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);
}