ASP.NET MVC
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Populate Data in ASP.NET MVC Maps control

This section explains how to populate shape data for providing data input to maps control and usage of the DataSource property.

Shape data

The shape data collection describes geographical shape information that can be obtained from GEOJSON format shapes.

.\ Maps_GeoJSON\All Countries with States

Data binding

The maps control supports data binding with the dataSource property in shape layers.

Properties

The following properties in shape layers are used to bind data in maps control:

* dataSource
* shapeDataPath
* shapePropertyPath

Data source

The dataSource property accepts the collection values as input. For example, you can provide a list of objects as input.

Shape data path

The shapeDataPath property is used to reference the data ID in DataSource. For example, population MapData contains data ids ‘Name’ and ‘Population’. The shapeDataPath and the shapePropertyPath properties are related to each other (refer to the shapePropertyPath for more details).

Shape property path

The shapePropertyPath property is similar to the shapeDataPath that refers to the column name in the data property of shape layers to identify the shape. When the values of the shapeDataPath property in the dataSource property and the value of shapePropertyPath in the data property match, then the associated object from the dataSource is bound to the corresponding shape.

The datasource is populated with JSON data that relative to the shape data and stored in JSON object. The USA population as datasource is used for better understanding.

The populationdensity.js” file is used to store JSON data.

Refer to both shape data and datasource as illustrated in the following code example.

razor
populate-data.cs
@using Syncfusion.EJ2;
@Html.EJS().Maps("maps").Height("450px").Width("650px").Layers(m =>
{
    m.ShapeData(ViewBag.worldmap).ShapeDataPath("name").ShapePropertyPath("name").DataSource(ViewBag.populationData).Add();
}).Render()
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.worldmap = GetWorldMap();
            ViewBag.populationData = GetPopulationData();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.json");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetPopulationData()
        {
            string text = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/populationdensity.js");
            return JsonConvert.DeserializeObject(text);
        }
    }
}

Binding complex data source

You can bind the data field from data source to the maps in two different ways.

  1. Bind the field name directly to the properties as ShapeDataPath, ColorValuePath, ValuePath and ShapeValuePath.
  2. Bind the field name as data.field to the properties as ShapeDataPath, ColorValuePath, ValuePath and ShapeValuePath.

The complex data source binding can be done as illustrated in the following code example.

razor
complex-data.cs
@using Syncfusion.EJ2;
@Html.EJS().Maps("maps").Height("450px").Width("650px").Layers(m =>
{
    m.ShapeData(ViewBag.worldmap).ShapeDataPath("data.name").ShapePropertyPath("name").DataSource(ViewBag.populationData).Add();
}).Render()
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.worldmap = GetWorldMap();
            ViewBag.populationData = GetPopulationData();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.json");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetPopulationData()
        {
            string text = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/populationdensity.js");
            return JsonConvert.DeserializeObject(text);
        }
    }
}
Previous
Next