Search results

Populate Data

This section explains how to populate data inputs and provide it to the Maps component.

Shape data

The shape data collection describes geographical shape information that can be obtained from GeoJSON format shapes. The maps shapes are rendered with this data. You can also add custom shapes such as seat selection in bus, seat selection in cricket stadium, and more useful information besides geographical data.

Data source

The DataSource property is used to represent statistical data in the Maps component, and it accepts a collection of values as input. For example, you can provide a list of objects as input. This data source will be further used to color the map, display data labels, display tooltips, and more.

@code{
    public class PopulationDetails
    {
        public string Code;
        public double Value;
        public string Name;
        public double Population;
        public double Density;
    };
    private List<PopulationDetails> populationDetails = new List<PopulationDetails> {
        new PopulationDetails {
            Code = "AF",
            Value= 53,
            Name= "Afghanistan",
            Population= 29863010,
            Density= 119
        },
        new PopulationDetails {
            Code= "AL",
            Value= 117,
            Name= "Albania",
            Population= 3195000,
            Density= 111
        },
        new PopulationDetails {
            Code= "DZ",
            Value= 15,
            Name= "Algeria",
            Population= 34895000,
            Density= 15
        }
    };
}

Data binding

The following properties in the MapsLayer are used for binding data in the Maps component. Both the properties are related to each other.

  • ShapePropertyPath
  • ShapeDataPath

Shape property path

The ShapePropertyPath property is used to refer the field name in the ShapeData property of shape layers to identify the shape.

<EjsMaps>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
            ShapePropertyPath='@("name")'>
        </MapsLayer>
    </MapsLayers>
</EjsMaps>

world-map.json file contains following data and its field ‘name’ value is used to map the corresponding shape with our statistical data.

[
    {
        "type": "Feature",
        "properties": {
            "admin": "Afghanistan",
            "name": "Afghanistan",
            "continent": "Asia"
        },
        "geometry": { "type": "Polygon", "coordinates": [[[61.21081709172573, ...
    },
...
]

Shape data path

The ShapeDataPath property is similar to the ShapePropertyPath property, but it refers the field name in DataSource property value. For example, following population data contains field ‘Name’, ‘Population’ and ‘Density’. Here the ‘Name’ field is set to the ShapeDataPath to map the corresponding name field value of shape data.

<EjsMaps>
    <MapsLayers>
        <MapsLayer
            DataSource="@populationDetails"
            ShapeDataPath="Name">
        </MapsLayer>
    </MapsLayers>
</EjsMaps>

@code{
    public class PopulationDetails
    {
        public string Name;
        public double Population;
        public double Density;
    };
    private List<PopulationDetails> populationDetails = new List<PopulationDetails> {
        new PopulationDetails {
            Name= "Afghanistan",
            Population= 29863010,
            Density= 119
        },
        ...
    };
}

In the above example, both ‘name’ fields contain the same value as ‘Afghanistan’, this value is matched in both shape data and statistical data, so that the details associated with ‘Afghanistan’ will be mapped to the corresponding shape and used to color the corresponding shape, display data labels, display tooltips, and more.

When values of the ShapeDataPath property in the DataSource and ShapePropertyPath in the ShapeData match, then the associated object from the DataSource is bound to the corresponding shape.

Refer both shape data and data source as demonstrated in the following code example.

@using Syncfusion.EJ2.Blazor.Maps

<EjsMaps>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
            DataSource="@populationDetails"
            ShapeDataPath="Name"
            ShapePropertyPath='@("name")'>
            @*  It display data label for bounded items  *@
            <MapsDataLabelSettings Visible="true" LabelPath="Name"></MapsDataLabelSettings>
        </MapsLayer>
    </MapsLayers>
</EjsMaps>

@code{
    public class PopulationDetails
    {
        public string Code;
        public double Value;
        public string Name;
        public double Population;
        public double Density;
    };
    private List<PopulationDetails> populationDetails = new List<PopulationDetails> {
        new PopulationDetails {
            Code = "AF",
            Value= 53,
            Name= "Afghanistan",
            Population= 29863010,
            Density= 119
        },
        new PopulationDetails {
            Code= "AL",
            Value= 117,
            Name= "Albania",
            Population= 3195000,
            Density= 111
        },
        new PopulationDetails {
            Code= "DZ",
            Value= 15,
            Name= "Algeria",
            Population= 34895000,
            Density= 15
        }
    };
}

You can also set the MapsDataLabelSettings property to display the bound items.

Maps with data source

Fetching data from JSON file

You can also read the JSON file data, convert it to the C# object, and assign it to the Maps component’s DataSource property.

Refer to the following code sample for fetching data from JSON file.

The Http.GetJsonAsync is used in the ‘OnInitAsync’ lifecycle method to load JSON file data. As this will be executed asynchronously, check whether ‘populationDensity’ is available, render the Maps component, or display the loading statement.

@inject HttpClient Http;
@using Syncfusion.EJ2.Blazor.Maps

@if (populationDensity == null)
{
    <p><em>Loading Maps component...</em></p>
}
else
{
    <EjsMaps>
        <MapsLayers>
            <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
                       DataSource="@populationDensity"
                       ShapeDataPath="Name"
                       ShapePropertyPath='@("name")'>
                <MapsDataLabelSettings Visible="true" LabelPath="Name"></MapsDataLabelSettings>
            </MapsLayer>
        </MapsLayers>
    </EjsMaps>
}
@code{
    PopulationDensity[] populationDensity;
    protected override async Task OnInitAsync()
    {
        populationDensity = await Http.GetJsonAsync<PopulationDensity[]>("sample-data/PopulationDensity.json");
    }

    public class PopulationDensity
    {
        public string Code { get; set; }
        public double Value { get; set; }
        public string Name { get; set; }
        public double Population { get; set; }
        public float Density { get; set; }
    }
}

Here, the PopulationDensity.json file contains following data.

[
        {
            "code": "AF",
            "value": 53,
            "name": "Afghanistan",
            "population": 29863010,
            "density": 119
        },
        {
            "code"= "AL",
            "value"= 117,
            "name"= "Albania",
            "population"= 3195000,
            "density"= 111
        },
        {
            "code"= "DZ",
            "value"= 15,
            "name"= "Algeria",
            "population"= 34895000,
            "density"= 15
        }
]

Maps with JSON data source