Adding multiple layers in the Map

30 Sep 20224 minutes to read

The multilayer support allows loading multiple shape files in a single container and enables Maps to display more information. The shape layer is the main layer of the Maps. Multiple layers can be added in a shape layer as SubLayer using the Type property.

@using Syncfusion.EJ2.Maps;
@using Syncfusion.EJ2;

@{
    var shapeSettings = new Syncfusion.EJ2.Maps.MapsShapeSettings
    {
        Fill = "#E5E5E5",
        Border = new Syncfusion.EJ2.Maps.MapsBorder
        {
            Color = "black",
            Width = 0.1,
            Opacity = 1
        }
    };
    var shapeSettings1 = new Syncfusion.EJ2.Maps.MapsShapeSettings
    {
        Fill = "rgba(141, 206, 255, 0.6)",
        Border = new Syncfusion.EJ2.Maps.MapsBorder
        {
            Color = "#1a9cff",
            Width = 0.25,
            Opacity = 1
        }
    };
    var shapeSettings2 = new Syncfusion.EJ2.Maps.MapsShapeSettings
    {
        Fill = "rgba(141, 206, 255, 0.6)",
        Border = new Syncfusion.EJ2.Maps.MapsBorder
        {
            Color = "#1a9cff",
            Width = 0.25,
            Opacity = 1
        }
    };
}

@Html.EJS().Maps("maps").Layers(l =>
{
    l.ShapeSettings(shapeSettings).ShapeData(ViewBag.usmap).Add();
    l.ShapeSettings(shapeSettings1).Type(Syncfusion.EJ2.Maps.Type.SubLayer).ShapeData(ViewBag.california).Add();
    l.ShapeSettings(shapeSettings2).Type(Syncfusion.EJ2.Maps.Type.SubLayer).ShapeData(ViewBag.texas).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.usa = GetUSMap();
            ViewBag.california = GetCaliforniaMap();
            ViewBag.texas = GetTexasMap();
            return View();
        }
        public object GetUSMap()
        {
            string text = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/USA.json");
            return JsonConvert.DeserializeObject(text);
        }
        public object GetCaliforniaMap()
        {
            string text = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/California.json");
            return JsonConvert.DeserializeObject(text);
        }
        public object GetTexasMap()
        {
            string text = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/Texas.json");
            return JsonConvert.DeserializeObject(text);
        }
    }
}

Adding multiple layers in the Map