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

Layers in ASP.NET MVC Maps control

The maps is maintained through layers, and it can accommodate one or more layers.

Multilayer

The multilayer support allows you to load multiple shape files in a single container. This enables maps to display more information.

Adding multiple layers to the maps

The shape layers are the core layers of a map. The multiple layers can be added in the shape layers as subLayers within the shape layers.

Sub Layer

The subLayer is the collection of shape layers.

In this example, the world map shape is used as shape data by utilizing the “WorldMap.json” file in the following folder structure obtained from downloaded Maps_GeoJSON folder.

..\ Maps_GeoJSON\

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

razor
layers.cs
@using Syncfusion.EJ2;
@Html.EJS().Maps("maps").Layers(l =>
   {
       l.ShapeSettings(ss =>ss.Fill("#9CBF4E").Border(border => border.Color("white").Width(0.5)))
       .ShapeData(ViewBag.worldMap).Add();
       l.ShapeSettings(ss => ss.Fill("orange").Border(border => border.Color("white").Width(1)))
       .ShapeData(ViewBag.usMap).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;
using Syncfusion.EJ2.Charts;

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

Displaying layer in the view

In Maps, you can load multiple shape files. Using the BaseLayerIndex property, you can select a layer to display on user interface.

In this example, we have loaded two layers with the World map and the United States map shape data and selected a layer using the BaseLayerIndex property to show that layer on the web page.

razor
layerview.cs
@using Syncfusion.EJ2;
@Html.EJS().Maps("maps").BaseLayerIndex(1).Layers(l =>
   {
       l.ShapeData(ViewBag.worldMap).Add();
       l.ShapeData(ViewBag.usMap).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;
using Syncfusion.EJ2.Charts;

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

Refer the API for Layers feature.

Previous
Next