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:

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

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.

<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 References