Blazor Binding CSV Files with Geographic Locations

With the Ignite UI for Blazor map component, you can plot geographic data loaded from various file types. For example, you can load geographic locations from a comma separated values (CSV) file.

Blazor Binding CSV Files with Geographic Locations Example

Data Example

Here is an example of data from CSV file:

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

The following code loads and binds IgbGeographicHighDensityScatterSeries in the map component to an array of objects created from loaded CSV file with geographic locations.

@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 Binding CSV Files with Geographic Locations

Blazor Binding CSV Files with Geographic Locations Example

Data Example

Code Snippet

API References