Drill-down in ASP.NET CORE Maps Component

30 Sep 20226 minutes to read

By clicking a continent, all the countries available in that continent can be viewed using the drill-down feature. For example, the countries in the Africa continent have been showcased here. To showcase all the countries in Africa continent by clicking the ShapeSelected event as mentioned in the following example.

CSHTML
Drilldown.cs
@{ 
    var data = new[]
    {
        new { drillColor = "#C13664", continent = "North America", CategoryName = "Books", Sales = 10882,
              color="#71B081", visibility = true},
        new { drillColor = "#9C3367", continent = "South America", CategoryName = "Books", Sales = 13776,
              color="#5A9A77", visibility = true},
        new { drillColor = "#80306A", continent = "Europe", CategoryName = "Books", Sales = 3746,
              color="#39776C", visibility = false},
        new { drillColor = "#462A6D", continent = "Asia", CategoryName = "Books", Sales = 10688,
              color="#266665", visibility = false},
        new { drillColor = "#80306A", continent = "Africa", CategoryName = "Books", Sales = 18718,
              color="#498770", visibility = true},
        new { drillColor = "#2A2870", continent = "Australia", CategoryName = "Books", Sales = 30716,
              color="#124F5E", visibility = false}
    };
    var markerData = new[]
    {
        new {latitude = 10.97274101999902, longitude = 16.390625}
    };
}

<div id="map">
    <ejs-maps id="maps" shapeSelected="shapeSelected">
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.worldmap" shapeDataPath="continent" shapePropertyPath='new[] { "continent" }' 
                          dataSource="data">
            <e-layersettings-shapesettings colorValuePath="drillColor"></e-layersettings-shapesettings>
                <e-layersettings-markers>
                    <e-layersettings-marker visible="true" template= '<div id="marker3" class="markerTemplate">Africa</div>' 
                                            dataSource="markerData" animationDuration="0">
                    </e-layersettings-marker>
                </e-layersettings-markers>
            </e-maps-layer>
            <e-maps-layer shapeData="ViewBag.africa ">
                <e-layersettings-shapesettings fill="#80306A"></e-layersettings-shapesettings>
            </e-maps-layer>
        </e-maps-layers>
    </ejs-maps>
</div>

<script>
    function shapeSelected(args) {
        window.maps = args.maps;
        let shape = args.shapeData.continent;
        if (shape === 'Africa') {
            window.maps.baseLayerIndex = 1;
            window.maps.refresh();
        }
    }
</script>

<style>
    .markerTemplate {
        font-size: 12px;
        color: white;
        text-shadow: 0px 1px 1px black;
        font-weight: 500
    }

    .markerTemplate {
        height: 30px;
        width: 30px;
        display: block;
        margin: auto;
    }
</style>
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.africa = GetAfricaMap();
            return View();
        }
        public object GetWorldMap()
        {
            string text = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.json");
            return JsonConvert.DeserializeObject(text);
        }
        public object GetAfricaMap()
        {
            string text = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/Africa.json");
            return JsonConvert.DeserializeObject(text);
        }
    }
}

Drill-down