Blazor JSON ファイルを地理的な場所にバインド
Ignite UI for Blazor Map マップは、さまざまな種類のファイルからロードされた地理データをプロットできます。たとえば、JavaScript Object Notation (JSON) ファイルから地理的位置をロードできます。
Blazor 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 },
// ...
]
コード スニペット
以下のコードは、マップコンポーネント内の IgbGeographicHighDensityScatterSeries
を、ロードされた JSON ファイルから作成された地理的位置を含むオブジェクトの配列にバインドします。
@using System.Net.Http.Json
@using IgniteUI.Blazor.Controls
@inject HttpClient Http
<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
<IgbGeographicSymbolSeries DataSource="DataSource"
MarkerType="MarkerType.Circle"
LatitudeMemberPath="Lat"
LongitudeMemberPath="Lon"
MarkerBrush="LightGray"
MarkerOutline="Black" />
</IgbGeographicMap>
@code {
private WorldPlaceJson[] DataSource;
protected override async Task OnInitializedAsync()
{
var url = "https://static.infragistics.com/xplatform/data/WorldCities.json";
var http = new HttpClient();
this.DataSource = await http.GetFromJsonAsync<WorldPlaceJson[]>(url);
await Task.Delay(1);
}
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; }
}
}
API リファレンス
IgbGeographicHighDensityScatterSeries
IgbGeographicSymbolSeries
GeographicMap
DataSource
LatitudeMemberPath
LongitudeMemberPath