Blazor Vinculando arquivos CSV com localizações geográficas

Com o componente Ignite UI for Blazor mapa, você pode plotar dados geográficos carregados de vários tipos de arquivo. Por exemplo, você pode carregar localizações geográficas de um arquivo CSV (valores separados por vírgula).

Blazor Binding CSV Files with Geographic Locations Example

Data Example

Aqui está um exemplo de dados do arquivo CSV:

City,Lat,Lon,State,Code,County,Density,Population
New York,40.7856,-74.0093,New Jersey,NJ,Hudson,21057,54227
Dundee,42.5236,-76.9775,New York,NY,Yates,579,1650

Code Snippet

O código a seguir é carregado e vinculado IgbGeographicHighDensityScatterSeries no componente de mapa a uma matriz de objetos criados a partir do arquivo CSV carregado com localizações geográficas.

@using IgniteUI.Blazor.Controls
@inject HttpClient Http

<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
    <IgbGeographicHighDensityScatterSeries DataSource="DataSource"
        LatitudeMemberPath="Lat"
        LongitudeMemberPath="Lon"
        HeatMaximumColor="Red"
        HeatMinimumColor="Black"
        HeatMinimum="0"
        HeatMaximum="5"
        PointExtent="1"
        MouseOverEnabled="true" />
</IgbGeographicMap>

@code {
    private List<WorldPlaceCsv> DataSource;

    protected override async Task OnInitializedAsync()
    {
        string url = "https://static.infragistics.com/xplatform/data/UsaCitiesPopulation.csv";
        string csv = await Http.GetStringAsync(url);

        string[] csvLines = csv.Split(Environment.NewLine);

        List<WorldPlaceCsv> dataItems = new List<WorldPlaceCsv>();

        for (int i = 1; i < csvLines.Length - 1; i++)
        {
            string[] columns = csvLines[i].Split(",");

            WorldPlaceCsv location = new WorldPlaceCsv() {
                Lat=  double.Parse(columns[1]),
                Lon= double.Parse(columns[2]),
                Name= columns[0],
                Pop= double.Parse(columns[3])
            };

            dataItems.Add(location);
        }

        this.DataSource = dataItems;

        await Task.Delay(1);
    }

    public class WorldPlaceCsv {

        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; }
    }
}

Blazor Vinculando arquivos CSV com localizações geográficas

Blazor Binding CSV Files with Geographic Locations Example

Data Example

Code Snippet

API References