Search results

Drilldown in ASP.NET Core Maps control

18 Jan 2022 / 1 minute 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.

tagHelper
drilldown.cs
Copied to clipboard
@{ 
    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" layerType="Geometry" 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 layerType="Geometry" 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>
Copied to clipboard
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