Web Components JSON ファイルを地理的な場所にバインド
Ignite UI for Web Components Map マップは、さまざまな種類のファイルからロードされた地理データをプロットできます。たとえば、JavaScript Object Notation (JSON) ファイルから地理的位置をロードできます。
Web Components JSON ファイルを地理的な場所にバインドの例
データ例
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 },
// ...
]
コード スニペット
以下のコードは、マップコンポーネント内の IgcGeographicHighDensityScatterSeriesComponent を、ロードされた JSON ファイルから作成された地理的位置を含むオブジェクトの配列にバインドします。
<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);
}