Angular JSON ファイルを地理的な場所にバインド

Ignite UI for Angular Map マップは、さまざまな種類のファイルからロードされた地理データをプロットできます。たとえば、JavaScript Object Notation (JSON) ファイルから地理的位置をロードできます。

Angular JSON ファイルを地理的な場所にバインドの例

データ例

JSON ファイルからのデータの例:

[
    { "cap": false, "pop":  0.47, "lat":  68.96, "lon":   33.09, "country": "Russia" ,    "name": "Murmansk" },
    { "cap": true,  "pop":  1.65, "lat":  53.90, "lon":   27.58, "country": "Byelarus" ,  "name": "Minsk" },
    { "cap": true,  "pop":  0.58, "lat":  54.69, "lon":   25.28, "country": "Lithuania" , "name": "Vilnius" },
 // ...
]

コード スニペット

以下のコードは、マップコンポーネント内の IgxGeographicHighDensityScatterSeriesComponent を、ロードされた JSON ファイルから作成された地理的位置を含むオブジェクトの配列にバインドします。

<igx-geographic-map
    #geoMap
    height="100%"
    width="100%"
    zoomable="true">
</igx-geographic-map>

var map = this.geoMap;
var url = "https://static.infragistics.com/xplatform/data/WorldCities.json";
fetch(url)
    .then((response) => response.json())
    .then((data: any[]) => {
        var geoLocations: any[] = [];
        // parsing JSON data and using only cities that are capitals
        for (var item of data) {
            if (!item.cap) continue;
            // the series binds to member names, so each item is projected onto them --
            // the shape the other platforms give a type of its own
            geoLocations.push({
                latitude: item.lat,
                longitude: item.lon,
                population: item.pop,
                city: item.name,
                country: item.country
            });
        }
        var series = new IgxGeographicSymbolSeriesComponent();
        series.dataSource = geoLocations;
        series.latitudeMemberPath = "latitude";
        series.longitudeMemberPath = "longitude";
        series.markerBrush = "rgba(255, 255, 255, 1.0)";
        series.markerOutline = "rgba(135, 5, 255, 1.0)";
        series.markerThickness = 1;
        series.markerType = MarkerType.Circle;
        map.series.add(series);
    });

API リファレンス