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

Ignite UI for Blazor Map コンポーネントを使用すると、さまざまな種類のファイルからロードされた地理データをプロットできます。たとえば、カンマ区切り値 (CSV) ファイルから地理的な場所を読み込むことができます。

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

データ例

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

CityName,Lat,Lon,Population
New York,40.6943,-73.9249,19354922
Los Angeles,34.1139,-118.4068,12815475

CityName,Lat,Lon,Population
New York,40.6943,-73.9249,19354922
Los Angeles,34.1139,-118.4068,12815475

コード スニペット

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

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

public class WorldPlaceCsv
{
    public string Name { get; set; }
    public double Latitude { get; set; }
    public double Longitude { get; set; }
    public double Population { get; set; }
}

public async void MapBindingDataCsvOnViewInit()
{
    var map = this.geoMap;
    var url = "https://static.infragistics.com/xplatform/data/UsaCitiesPopulation.csv";
    var client = new HttpClient();
    var csv = await client.GetStringAsync(url);
    var csvLines = csv.Split('\n');
    var geoLocations = new List<WorldPlaceCsv>();
    // parsing CSV data and creating geographic locations
    for (int i = 1; i < csvLines.Length; i++)
    {
        var columns = csvLines[i].Split(',');
        if (columns.Length < 4) continue;
        geoLocations.Add(new WorldPlaceCsv
        {
            Name = columns[0],
            Latitude = double.Parse(columns[1]),
            Longitude = double.Parse(columns[2]),
            Population = double.Parse(columns[3])
        });
    }
    // creating the series with the loaded data
    var series = new IgbGeographicHighDensityScatterSeries
    {
        Name = "hdSeries",
        DataSource = geoLocations,
        LatitudeMemberPath = "Latitude",
        LongitudeMemberPath = "Longitude",
        HeatMaximumColor = "Red",
        HeatMinimumColor = "Black",
        HeatMinimum = 0,
        HeatMaximum = 5,
        PointExtent = 1,
        MouseOverEnabled = true
    };
    map.Series.Add(series);

    var geoBounds = new Rect() { Left = -130, Top = 15, Width = Math.Abs(-130 + 65), Height = Math.Abs(50 - 15) };
    // zooming to the bounds of the lower 48 states
    map.ZoomToGeographic(geoBounds);
}

API リファレンス