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.

@{ 
    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
        }
    };
}
<div id="map">
    <ejs-maps id="maps">
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.usa" shapeSettings="shapeSettings">
            </e-maps-layer>
            <e-maps-layer shapeData="ViewBag.california" type="SubLayer" shapeSettings="shapeSettings1">
            </e-maps-layer>
            <e-maps-layer shapeData="ViewBag.texas" type="SubLayer" shapeSettings="shapeSettings2">
            </e-maps-layer>
        </e-maps-layers>
    </ejs-maps>
</div>
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