ASP.NET Core

Search results

User Interactions in ASP.NET Core Maps control

18 Jan 2022 / 7 minutes to read

Zooming

The zooming feature is used to zoom in and out of Maps to show in-depth information. It is controlled by the ZoomFactor property of the MapsZoomSettings of the Maps. The ZoomFactor is increased or decrease dynamically based on zoom in and out interaction.

Enable zooming

Zooming of Maps is enabled by setting the Enable property of MapsZoomSettings to true.

Enable panning

To enable the panning feature, set the EnablePanning property of MapsZoomSettings to true.

tagHelper

panning.cs

@using Syncfusion.EJ2;
    <ejs-maps id="maps">
        <e-maps-zoomsettings enable="true" EnablePanning="true"></e-maps-zoomsettings>
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.world_map">
            </e-maps-layer>
        </e-maps-layers>
    </ejs-maps>

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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.world_map = GetWorldMap();
            ViewBag.worldMap = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Various type of zooming

Zooming can be performed in following types:

By default, the toolbar is rendered with zoom-in, zoom-out, and reset options when it is set to true in the Enable property of MapsZoomSettings.

The following options are available in toolbar.

Zoom - Provides rectangular zoom support.
ZoomIn - Zoom in the Maps.
ZoomOut - Zoom out the Maps.
Pan - Switches to panning if rectangular zoom is activated.
Reset - Restores the Maps to the default view.

The following properties are available in toolbars to customize the zooming toolbars.

Color - To apply the color for toolbars in Maps.
HighlightColor - To apply the color for the zooming toolbar when the mouse has hovered on the toolbar element in Maps.
HorizontalAlignment - To customize the position type of toolbar when it is placed horizontally.
SelectionColor - To apply the color for the zooming toolbar when clicking the zooming toolbar in Maps.
ToolBarOrientation - To customize the orientation of the zooming toolbar.
Toolbars - To customize the items that are to be shown in the zooming toolbar in Maps.
VerticalAlignment - To customize the position type of toolbar when it is placed vertically.

tagHelper

zoom.cs

@using Syncfusion.EJ2;

@{ 
    var toolbar = new string[] { "ZoomIn", "ZoomOut", "Pan", "Reset" };
}
<div id="control-section">
    <ejs-maps id="maps">
        <e-maps-zoomsettings enable="true" color="green" highlightColor="blue" selectionColor="orange"
                             horizontalAlignment="Center" toolbars="toolbar"></e-maps-zoomsettings>
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.world_map">
            </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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.world_map = GetWorldMap();
            ViewBag.worldMap = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Pinch zooming

To enable or disable the pinch zooming, use the PinchZooming property in MapsZoomSettings.

tagHelper

pinchzoom.cs

@using Syncfusion.EJ2;
<div id="control-section">
    <ejs-maps id="maps">
        <e-maps-zoomsettings enable="true" PinchZooming="true"></e-maps-zoomsettings>
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.world_map">
            </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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.world_map = GetWorldMap();
            ViewBag.worldMap = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Single-click zooming

To enable or disable the single-click zooming, use the ZoomOnClick property in MapsZoomSettings.

tagHelper

singleclick.cs

@using Syncfusion.EJ2;
<div id="control-section">
    <ejs-maps id="maps">
        <e-maps-zoomsettings enable="true" ZoomOnClick="true"></e-maps-zoomsettings>
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.world_map">
            </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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.world_map = GetWorldMap();
            ViewBag.worldMap = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Double-click zooming

To enable or disable the double-click zooming, use the DoubleClickZoom property in MapsZoomSettings.

tagHelper

doubleclick.cs

@using Syncfusion.EJ2;
<div id="control-section">
    <ejs-maps id="maps">
        <e-maps-zoomsettings enable="true" DoubleClickZoom="true"></e-maps-zoomsettings>
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.world_map">
            </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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.world_map = GetWorldMap();
            ViewBag.worldMap = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Mouse wheel zooming

To enable or disable mouse wheel zooming, use the MouseWheelZoom property in MapsZoomSettings.

tagHelper

mousewheel.cs

@using Syncfusion.EJ2;
<div id="control-section">
    <ejs-maps id="maps">
        <e-maps-zoomsettings enable="true" MouseWheelZoom="true"></e-maps-zoomsettings>
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.world_map">
            </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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.world_map = GetWorldMap();
            ViewBag.worldMap = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Selection zooming

To enable or disable selection zooming, use the EnableSelectionZooming property in MapsZoomSettings. The EnablePanning property must be set to false to enable the selection zooming in Maps.

tagHelper

selectionzooming.cs

@using Syncfusion.EJ2;
<div id="control-section">
    <ejs-maps id="maps">
        <e-maps-zoomsettings enable="true" EnableSelectionZooming="true" EnablePanning="false"></e-maps-zoomsettings>
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.world_map">
            </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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.world_map = GetWorldMap();
            ViewBag.worldMap = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Setting minimum and maximum values for zoom factor

The zooming range can be adjusted using the MinZoom and MaxZoom properties in MapsZoomSettings. The minZoom value is set to 1 by default, and the maxZoom value is set to 10.

tagHelper

minzooming.cs

@using Syncfusion.EJ2;
<div id="control-section">
    <ejs-maps id="maps">
        <e-maps-zoomsettings enable="true" minZoom=2 maxZoom=12></e-maps-zoomsettings>
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.world_map">
            </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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.world_map = GetWorldMap();
            ViewBag.worldMap = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Zooming with animation

To zoom in or zoom out the Maps with animation, use the AnimationDuration property in MapsLayer.

tagHelper

animationzoom.cs

@using Syncfusion.EJ2;
<div id="control-section">
    <ejs-maps id="maps">
        <e-maps-zoomsettings enable="true"></e-maps-zoomsettings>
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.world_map" AnimationDuration="500">
            </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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.world_map = GetWorldMap();
            ViewBag.worldMap = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Selection

Each shape in the Maps can be selected and deselected during interaction with the shapes. Selection is enabled by setting the Enable property of MapsSelectionSettings to true.

The following properties are available to customize the selection of Maps elements such as shapes, bubbles, markers and legends.

Border - To customize the color, width and opacity of the border of which element is selected in Maps.
Fill - Applies the color for the element that is selected.
Opacity - To customize the transparency for the element that is selected.
EnableMultiSelect - To enable or disable the selection for multiple shapes or markers or bubbles in the Maps.

By tapping on the specific legend, the shapes which are bounded to the selected legend is also selected and vice versa.

tagHelper

selection.cs

@using Syncfusion.EJ2.Maps;
@{
    var select = new Syncfusion.EJ2.Maps.MapsSelectionSettings
    {
        Enable = true,
        Fill = "green",
        Border = new Syncfusion.EJ2.Maps.MapsBorder
        {
            Color = "white",
            Width = 2,
            Opacity = 1
        }
    };
    var data = new[]
    {
        new { Country= "China", Membership= "Permanent" },
        new { Country= "France", Membership= "Permanent" },
        new { Country= "Russia", Membership= "Permanent" },
        new { Country= "Kazakhstan", Membership= "Non-Permanent" },
        new { Country= "Poland", Membership= "Non-Permanent" },
        new { Country= "Sweden", Membership= "Non-Permanent" }
    };
    var colormapping = new List<Syncfusion.EJ2.Maps.MapsColorMapping> {
        new  MapsColorMapping{ Color = "#D84444",Value= "Permanent"  },
        new MapsColorMapping { Color= "#316DB5", Value = "Non-Permanent" }
    };
}
@using Syncfusion.EJ2;
<div id="control-section">
    <ejs-maps id="maps">
        <e-maps-legendsettings visible="true"></e-maps-legendsettings>
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.world_map" shapeDataPath="Country" shapePropertyPath='new[] { "name" }' dataSource="data" selectionSettings="select">
                <e-layersettings-shapesettings colorValuePath="Membership" colorMapping="colormapping">
                </e-layersettings-shapesettings>
            </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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.world_map = GetWorldMap();
            ViewBag.worldMap = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Enable selection

Enable selection for bubbles

To enable the selection for bubbles in Maps, set the MapsSelectionSettings in MapsBubble and set the Enable property of MapsSelectionSettings as true.

tagHelper

selection-bubble.cs

@using Syncfusion.EJ2.Maps;

@{
    var select = new Syncfusion.EJ2.Maps.MapsSelectionSettings
    {
        Enable = true,
        Fill = "green",
        Border = new Syncfusion.EJ2.Maps.MapsBorder
        {
            Color = "white",
            Width = 2,
            Opacity = 1
        }

    };
    var data = new[]
    {
            new { name= "India", population= "38332521" },
            new { name= "Australia", population= "383521" },
            new { name= "Pakistan", population= "3090416" }
    };
}
<ejs-maps id="maps">
    <e-maps-layers>
        <e-maps-layer shapeData="ViewBag.world_map" shapeDataPath="name" shapePropertyPath='new[] { "name" }'>
            <e-layersettings-bubbles>
                <e-layersettings-bubble visible="true" minRadius="20" maxRadius="40" dataSource="data"
                                        valuePath="population" selectionSettings="select"></e-layersettings-bubble>
            </e-layersettings-bubbles>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>

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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.worldmap = GetWorldMap();
            ViewBag.worldMap = GetMap();
            List<BubbleData> data = new List<BubbleData>
            {
                new BubbleData { name= "India", population= "38332521" },
                new BubbleData { name= "Australia", population= "383521" },
                new BubbleData { name= "Pakistan", population= "3090416" }
            };
            ViewBag.bubbleData = data;
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
        public class BubbleData
        {
            public string name { get; set; }
            public string population { get; set; }
        }
    }
}

Enable selection for bubbles

Enable selection for markers

To enable the selection for markers in Maps, set the MapsSelectionSettings in the MapsMarker and set the Enable property of the MapsSelectionSettings as true.

tagHelper

selection-marker.cs

@{
    var select = new Syncfusion.EJ2.Maps.MapsSelectionSettings
    {
        Enable = true,
        Fill = "green",
        Border = new Syncfusion.EJ2.Maps.MapsBorder
        {
            Color = "white",
            Width = 2,
            Opacity = 1
        }
    };
    var data = new[]
    {
        new {latitude= 37.0000, longitude= -120.0000, city= "California" },
        new {latitude= 40.7127, longitude= -74.0059, city= "New York" },
        new {latitude= 42.0000, longitude= -93.0000, city= "Iowa" }
    };
}
@using Syncfusion.EJ2.Maps;
<div id="control-section">
    <ejs-maps id="maps">
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.world_map">
                <e-layersettings-markers>
                    <e-layersettings-marker visible="true" shape="Balloon" dataSource="data" 
                                            height="20" width="20" selectionSettings="select"></e-layersettings-marker>
                </e-layersettings-markers>
            </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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.world_map = GetWorldMap();
            ViewBag.worldMap = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Enable selection for markers

Public method for the shape selection

The shapeSelection method can be used to select each shape in the Maps. LayerIndex, propertyName, country name, and selected value as a boolean state(true / false) are the input parameters for this method.

tagHelper

selection-method.cs

@{
    var select = new Syncfusion.EJ2.Maps.MapsSelectionSettings
    {
        Enable = true,
        Fill = "green",
        Border = new Syncfusion.EJ2.Maps.MapsBorder
        {
            Color = "white",
            Width = 2,
            Opacity = 1
        }

    };
}
@using Syncfusion.EJ2;
<div id="map">
    <button id="selection">Selection</button>
    <button id="unselection">UnSelection</button>
    <ejs-maps id="maps" load="onMapLoad">
        <e-maps-layers>
            <e-maps-layer shapeData=" ViewBag.world_map" selectionSettings="select">
            </e-maps-layer>
        </e-maps-layers>
    </ejs-maps>
</div>

<script>
    function onMapLoad(args) {
        window.maps = args.maps;
    }
    window.onload = function () {
        document.getElementById('selection').onclick = () => {
            window.maps.shapeSelection(0, "continent", "Asia", true);
        };
        document.getElementById('unselection').onclick = () => {
            window.maps.shapeSelection(0, "continent", "Asia", false);
        };
    };
</script>

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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.world_map = GetWorldMap();
            ViewBag.worldMap = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Public method for the shape selection

Initial shape selection

The shape is initially selected using the MapsInitialShapeSelection, and the values are mapped to the ShapePath and ShapeValue.

tagHelper

initial-shape.cs

@using Syncfusion.EJ2.Maps;
<ejs-maps id="maps">
    <e-maps-layers>
        <e-maps-layer shapeData="ViewBag.world_map">
            <e-layersettings-initialshapeselections>
                <e-layersettings-initialshapeselection shapePath="continent", shapeValue="Africa"></e-layersettings-initialshapeselection>
                <e-layersettings-initialshapeselection shapePath="name", shapeValue="India"></e-layersettings-initialshapeselection>
            </e-layersettings-initialshapeselections>
            <e-layersettings-selectionsettings enable="true" fill="green">
                <e-layers-selection-border color="White" width="2" opacity="1"> </e-layers-selection-border>
            </e-layersettings-selectionsettings>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Maps;
using System.Web.Script.Serialization;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using EJ2MVCSampleBrowser.Models;

namespace EJ2MVCSampleBrowser.Controllers.Maps
{
    public partial class MapsController : Controller
    {
       public IActionResult Index()
        {
            ViewBag.world_map = GetWorldMap();
            ViewBag.worldMap = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Public method for the shape selection

Initial marker selection

Using the InitialMarkerSelection, the marker shape can be selected initially. Markers render based on the Latitude and Longitude values.

tagHelper

initialmarkerselection.cs

@{
    var select = new Syncfusion.EJ2.Maps.MapsSelectionSettings
    {
        Enable = true,
        Fill = "green",
        Border = new Syncfusion.EJ2.Maps.MapsBorder
        {
            Color = "white",
            Width = 2,
            Opacity = 1
        }
    };
    var point = new double[] { 42.0000, -93.0000 };
    var data = new[]
    {
        new {latitude= 37.0000, longitude= -120.0000, city= "California" },
        new {latitude= 40.7127, longitude= -74.0059, city= "New York" },
        new {latitude= 42.0000, longitude= -93.0000, city= "Iowa" }
    };
}
@using Syncfusion.EJ2.Maps;
<div id="control-section">
    <ejs-maps id="maps">
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.world_map">
                <e-layersettings-markers>
                    <e-layersettings-marker visible="true" shape="Balloon" dataSource="data"
                                            selectionSettings="select" initialMarkerSelection="point"
                                            height="20" width="20" fill="green">
                    </e-layersettings-marker>
                </e-layersettings-markers>
            </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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.world_map = GetWorldMap();
            ViewBag.worldMap = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Highlight

Each shape in the Maps can be highlighted during mouse hover on the Maps elements such as shapes, bubbles, markers and legends. Highlight is enabled by setting the Enable property of MapsHighlightSettings to true.

The following properties are available to customize the highlight of Maps elements such as shapes, bubbles, markers and legends.

Border - To customize the color, width and opacity of the border of which element is highlighted in Maps.
Fill - Applies the color for the element that is highlighted.
Opacity - To customize the transparency for the element that is highlighted.

Hovering on the specific legend, the shapes which are bounded to the selected legend is also highlighted and vice versa.

tagHelper

highlight.cs

@using Syncfusion.EJ2.Maps;
@{
    var highlight = new Syncfusion.EJ2.Maps.MapsHighlightSettings
    {
        Enable = true,
        Fill = "green",
        Border = new Syncfusion.EJ2.Maps.MapsBorder
        {
            Color = "white",
            Width = 2,
            Opacity = 1
        }
    };
    var data = new[]
    {
        new { Country= "China", Membership= "Permanent" },
        new { Country= "France", Membership= "Permanent" },
        new { Country= "Russia", Membership= "Permanent" },
        new { Country= "Kazakhstan", Membership= "Non-Permanent" },
        new { Country= "Poland", Membership= "Non-Permanent" },
        new { Country= "Sweden", Membership= "Non-Permanent" }
    };
    var colormapping = new List<Syncfusion.EJ2.Maps.MapsColorMapping> {
        new  MapsColorMapping{ Color = "#D84444",Value= "Permanent"  },
        new MapsColorMapping { Color= "#316DB5", Value = "Non-Permanent" }
    };
}
@using Syncfusion.EJ2;
<div id="control-section">
    <ejs-maps id="maps">
        <e-maps-legendsettings visible="true"></e-maps-legendsettings>
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.world_map" shapeDataPath="Country" shapePropertyPath='new[] { "name" }' dataSource="data" highlightSettings="highlight">
                <e-layersettings-shapesettings colorValuePath="Membership" colorMapping="colormapping">
                </e-layersettings-shapesettings>
            </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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.world_map = GetWorldMap();
            ViewBag.worldMap = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/worldmap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Enable highlight

Enable highlight for bubbles

To enable the highlight for bubbles in Maps, set the MapsHighlightSettings in MapsBubble and set the Enable property of MapsHighlightSettings as true.

tagHelper

highlight-bubble.cs

@using Syncfusion.EJ2.Maps;

@{
    var highlight = new Syncfusion.EJ2.Maps.MapsHighlightSettings
    {
        Enable = true,
        Fill = "green",
        Border = new Syncfusion.EJ2.Maps.MapsBorder
        {
            Color = "white",
            Width = 2,
            Opacity = 1
        }

    };
    var data = new[]
    {
            new { name= "India", population= "38332521" },
            new { name= "Australia", population= "383521" },
            new { name= "Pakistan", population= "3090416" }
    };
}
<ejs-maps id="maps">
    <e-maps-layers>
        <e-maps-layer shapeData="ViewBag.worldmap" shapeDataPath="name" shapePropertyPath='new[] { "name" }'>
            <e-layersettings-bubbles>
                <e-layersettings-bubble visible="true" minRadius="20" maxRadius="40" dataSource="data"
                                        valuePath="population" highlightSettings="highlight"></e-layersettings-bubble>
            </e-layersettings-bubbles>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>

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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.worldmap = GetWorldMap();
            ViewBag.worldMap = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/worldmap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Enable highlight for bubbles

Enable highlight for markers

To enable the highlight for markers in Maps, set the MapsHighlightSettings in MapsMarker and set the Enable property of MapsHighlightSettings as true.

tagHelper

highlight-marker.cs

@{
    var highlight = new Syncfusion.EJ2.Maps.MapsHighlightSettings
    {
        Enable = true,
        Fill = "green",
        Border = new Syncfusion.EJ2.Maps.MapsBorder
        {
            Color = "white",
            Width = 2,
            Opacity = 1
        }
    };
    var data = new[]
    {
        new {latitude= 37.0000, longitude= -120.0000, city= "California" },
        new {latitude= 40.7127, longitude= -74.0059, city= "New York" },
        new {latitude= 42.0000, longitude= -93.0000, city= "Iowa" }
    };
}
@using Syncfusion.EJ2.Maps;
<div id="control-section">
    <ejs-maps id="maps">
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.worldmap">
                <e-layersettings-markers>
                    <e-layersettings-marker visible="true" shape="Balloon" dataSource="data" 
                                            height="20" width="20" highlightSettings="highlight"></e-layersettings-marker>
                </e-layersettings-markers>
            </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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.world_map = GetWorldMap();
            ViewBag.worldMap = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/worldmap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Enable highlight for markers

On mouse over or touch end event, the tooltip is used to get more information about the layer, bubble, or marker. It can be enabled separately for layer or bubble or marker by using the Visible property of MapsTooltipSettings as true. The ValuePath property in the tooltip takes the field name that presents in data source and displays that value as tooltip text. The TooltipDisplayMode property is used to change the display mode of the tooltip in Maps. Following display modes of tooltip are available in the Maps component. By default, TooltipDisplayMode is set to MouseMove.

tagHelper

tooltip.cs

@{
    var tooltip = new Syncfusion.EJ2.Maps.MapsTooltipSettings
    {
        Visible = true,
        ValuePath = "name"
    };
}
@using Syncfusion.EJ2;
<div id="control-section">
    <ejs-maps id="maps">
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.world_map" tooltipSettings="tooltip">
            </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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.world_map = GetWorldMap();
            ViewBag.worldMap = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Enable tooltip

Customization

The following properties are available in the MapsTooltipSettings to customize the tooltip of the Maps component.

Border - To customize the color, width and opacity of the border of the tooltip in layers, markers, and bubbles of Maps.
Fill - Applies the color of the tooltip in layers, markers, and bubbles of Maps.
Format - To customize the format of the tooltip in layers, markers, and bubbles of Maps
TextStyle - To customize the style of the text in the tooltip for layers, markers, and bubbles of Maps.

tagHelper

tooltip-customization.cs

@using Syncfusion.EJ2.Maps;

@{
    var tooltip = new Syncfusion.EJ2.Maps.MapsTooltipSettings
    {
        Visible = true,
        ValuePath = "name",
        Format = "${name}: ${value1}",
        Fill = "#D0D0D0",
        TextStyle = new MapsFont
        {
            Color = "green",
            FontFamily = "Times New Roman",
            FontStyle = "Sans-serif"
        }
    };
    var colormapping = new List<Syncfusion.EJ2.Maps.MapsColorMapping> {
        new  MapsColorMapping{ Color = "#b3daff",Value= "1"  },
        new MapsColorMapping { Color= "#80c1ff", Value = "2" },
        new MapsColorMapping { Color= "#1a90ff", Value = "3" },
        new MapsColorMapping { Color= "#005cb3", Value = "7" }
    };
    var data = new[]
    {
        new { name= "India", value1= "3", value2="2", country="India" },
        new { name= "Dominican Rep.", value1= "3", value2="2", country="West Indies" },
        new { name= "Cuba", value1= "3", value2="2", country="West Indies" },
        new { name= "Jamaica", value1= "3", value2="2", country="West Indies" },
        new { name= "Haiti", value1= "3", value2="2", country="West Indies" },
        new { name= "Guyana", value1= "3", value2="2", country="West Indies" },
        new { name= "Suriname", value1= "3", value2="2", country="West Indies" },
        new { name= "Trinidad and Tobago", value1= "3", value2="2", country="West Indies" },
        new { name= "Sri Lanka", value1= "3", value2="1", country="Sri Lanka" },
        new { name= "United Kingdom", value1= "3", value2="0", country="England" },
        new { name= "Pakistan", value1= "2", value2="1", country="Pakistan" },
        new { name= "New Zealand", value1= "1", value2="0", country="New Zealand" },
        new { name= "Australia", value1= "7", value2="5", country="Australia" },
    };
}
<div id="control-section">
    <ejs-maps id="maps" tooltipRender="tooltipRender">
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.world_map" dataSource="data" shapeDataPath="name" shapePropertyPath='new[] { "name" }' tooltipSettings="tooltip">
                <e-layersettings-shapesettings fill="#E5E5E5" colorValuePath="value1" colorMapping="colormapping"></e-layersettings-shapesettings>
            </e-maps-layer>
        </e-maps-layers>
    </ejs-maps>
</div>

<script>
    function tooltipRender(args) {
        if (!args.options['data']) {
            args.cancel = true;
        }
    }
</script>

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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.worldmap = GetWorldMap();
            ViewBag.worldMap = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Enable tooltip

The HTML element can be rendered in the tooltip of the Maps using the Template property of the MapsTooltipSettings. In the following example, ${value1} and ${value2} are the place holders in the HTML element to display the value1 and value2 values of the corresponding shape.

tagHelper

tooltip-template.cs

@using Syncfusion.EJ2.Maps;

@{
    var tooltip = new Syncfusion.EJ2.Maps.MapsTooltipSettings
    {
        Visible = true,
        ValuePath = "name",
        Template = "#template"
    };
    var colormapping = new List<Syncfusion.EJ2.Maps.MapsColorMapping> {
        new  MapsColorMapping{ Color = "#b3daff",Value= "1"  },
        new MapsColorMapping { Color= "#80c1ff", Value = "2" },
        new MapsColorMapping { Color= "#1a90ff", Value = "3" },
        new MapsColorMapping { Color= "#005cb3", Value = "7" }
    };
    var data = new[]
    {
        new { name= "India", value1= "3", value2="2", country="India" },
        new { name= "Dominican Rep.", value1= "3", value2="2", country="West Indies" },
        new { name= "Cuba", value1= "3", value2="2", country="West Indies" },
        new { name= "Jamaica", value1= "3", value2="2", country="West Indies" },
        new { name= "Haiti", value1= "3", value2="2", country="West Indies" },
        new { name= "Guyana", value1= "3", value2="2", country="West Indies" },
        new { name= "Suriname", value1= "3", value2="2", country="West Indies" },
        new { name= "Trinidad and Tobago", value1= "3", value2="2", country="West Indies" },
        new { name= "Sri Lanka", value1= "3", value2="1", country="Sri Lanka" },
        new { name= "United Kingdom", value1= "3", value2="0", country="England" },
        new { name= "Pakistan", value1= "2", value2="1", country="Pakistan" },
        new { name= "New Zealand", value1= "1", value2="0", country="New Zealand" },
        new { name= "Australia", value1= "7", value2="5", country="Australia" },
    };
}
<div id="control-section">
    <ejs-maps id="maps" tooltipRender="tooltipRender">
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.world_map" dataSource="data" shapeDataPath="name" shapePropertyPath='new[] { "name" }' tooltipSettings="tooltip">
                <e-layersettings-shapesettings fill="#E5E5E5" colorValuePath="value1" colorMapping="colormapping"></e-layersettings-shapesettings>
            </e-maps-layer>
        </e-maps-layers>
    </ejs-maps>
    <div id="template" style="display:none">
        <div class="toolback">
            <div class="listing2">
                <center>
                    ${country}
                </center>
            </div>
            <hr style="margin-top: 2px;margin-bottom:5px;border:0.5px solid #DDDDDD">
            <div>
                <span class="listing1">Finalist : </span><span class="listing2">${value1}</span>
            </div>
            <div>
                <span class="listing1">Win : </span><span class="listing2">${value2}</span>
            </div>
        </div>
    </div>
</div>

<script>
    function tooltipRender(args) {
        if (!args.options['data']) {
            args.cancel = true;
        }
    }
</script>
<style>
    .toolback {
        border - radius: 4px;
        border: 1px #abb9c6;
        opacity: 90%;
        background: rgba(53, 63, 76, 0.90);
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.40);
        padding-bottom: 5px;
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
        width: 90px;
    }
    .listing1 {
        font - size:13px;
        color: #cccccc
    }
    .listing2 {
        font - size:13px;
        color: #ffffff;
        font-weight: 500;
    }
</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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.world_map = GetWorldMap();
            ViewBag.worldMap = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Enable tooltip

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!

User Interactions in ASP.NET Core Maps control

Zooming

Various type of zooming

Zooming toolbar

Pinch zooming

Single-click zooming

Double-click zooming

Mouse wheel zooming

Selection zooming

Setting minimum and maximum values for zoom factor

Zooming with animation

Selection

Enable selection for bubbles

Enable selection for markers

Public method for the shape selection

Initial shape selection

Initial marker selection

Highlight

Enable highlight for bubbles

Enable highlight for markers

Tooltip

Customization

Tooltip template