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

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

Blazor 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" },
 // ...
]

コード スニペット

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

<IgbGeographicMap
    @ref="geoMap"
    Height="100%"
    Width="100%"
    Zoomable="true" />

public class WorldPlaceJson
{
    public string Name { get; set; }
    public double Lat { get; set; }
    public double Lon { get; set; }
    public double Pop { get; set; }
    public string Country { get; set; }
    public bool Cap { get; set; }
}

public async void MapBindingDataJsonPointsOnViewInit()
{
    var map = this.geoMap;
    var url = "https://static.infragistics.com/xplatform/data/WorldCities.json";
    var client = new HttpClient();
    var json = await client.GetStringAsync(url);
    var geoLocations = new List<WorldPlaceJson>();
    using (var document = JsonDocument.Parse(json))
    {
        foreach (var item in document.RootElement.EnumerateArray())
        {
            if (!item.GetProperty("cap").GetBoolean()) continue;
            geoLocations.Add(new WorldPlaceJson
            {
                Name = item.GetProperty("name").GetString(),
                Lat = item.GetProperty("lat").GetDouble(),
                Lon = item.GetProperty("lon").GetDouble(),
                Pop = item.GetProperty("pop").GetDouble(),
                Country = item.GetProperty("country").GetString(),
                Cap = item.GetProperty("cap").GetBoolean()
            });
        }
    }
    var series = new IgbGeographicSymbolSeries
    {
        DataSource = geoLocations,
        LatitudeMemberPath = "Lat",
        LongitudeMemberPath = "Lon",
        MarkerBrush = "rgba(255, 255, 255, 1.0)",
        MarkerOutline = "rgba(135, 5, 255, 1.0)",
        MarkerThickness = 1,
        MarkerType = MarkerType.Circle
    };
    map.Series.Add(series);
}

API リファレンス