ASP.NET Core
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

User Interactions in ASP.NET Core Maps control

Options like zooming, panning, single click and double click, highlight and map selection enables the effective interaction on Map elements.

Zooming

The zooming feature enables you to zoom in and zoom out a map to show in-depth information. It is controlled by using the zoomFactor property of the zoomSettings. When the zoomFactor is increased, the map is zoomed in. When the zoomFactor is decreased, the map is zoomed out.

Enable zooming

To enable the zooming feature, set the zoomSettings.enable to true in maps.

Enable panning

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

tagHelper
panning.cs
@using Syncfusion.EJ2;
<div id="control-section">
    <ejs-maps id="maps">
        <e-maps-zoomsettings enable="true" EnablePanning="true"></e-maps-zoomsettings>
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.worldmap">
            </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.worldmap = GetWorldMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
    }
}

Various type of zooming

Zooming can be performed in following types:

Zooming toolbar

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 zoomSettings. You can also customize the toolbar items using the toolBArs property in zoomSettings.

The following options are available in toolbar, and you can use the options as needed:

  1. Zoom - Provides rectangular zoom support.
  2. ZoomIn - Zooms in the maps.
  3. ZoomOut - Zooms out the maps.
  4. Pan - Switches to panning if rectangular zoom is activated.
  5. Reset - Restores the maps to the default view.

Refer to the API links for zooming.

tagHelper
zoom.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.worldmap">
            </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.worldmap = GetWorldMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
    }
}

Pinch Zooming

Use the pinchZooming property in zoomSettings to enable or disable the pinch zooming.

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.worldmap">
            </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.worldmap = GetWorldMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
    }
}

Single-click zooming

Use the zoomOnClick property in zoomSettings to enable or disable the single-click zooming

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.worldmap">
            </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.worldmap = GetWorldMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
    }
}

Double-click zooming

Use the doubleClickZoom property in zoomSettings to enable or disable the double-click zooming.

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.worldmap">
            </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.worldmap = GetWorldMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
    }
}

Mouse wheel zooming

Use the mouseWheelZoom property in zoomSettings to enable or disable mouse wheel zooming.

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.worldmap">
            </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.worldmap = GetWorldMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
    }
}

Zooming with animation

You can use the animationDuration property in layers property to zoom in or zoom out the maps with animation.

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.worldmap" 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.worldmap = GetWorldMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
    }
}

Selection

Each shape in a map can be selected and deselected while interacting with the shapes.

The selectionSettings.fill property is used to change the selected layer shape’s color. The selectionSettings.border.color and selectionSettings.border.width properties are used to customize the selected shape’s border.

You can select a shape by tapping the shape. The single selection is enabled by using the selectionSettings.enable property of shape layer. When the selectionSettings.enable is set to false, the shapes cannot be selected.

Refer to the API and code snippet for selection.

tagHelper
selection.cs
@{ 
    var select = new
    {
        enable = true,
        fill = "green",
        border = new
        {
            color = "white",
            width = 2
        }

    };
}
@using Syncfusion.EJ2;
<div id="control-section">
    <ejs-maps id="maps">
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.worldmap" selectionSettings="select">
            </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.worldmap = GetWorldMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
    }
}

Initial shape selection

Initially, the shape can be selected by using the property initialShapeSelection and the values are mapped to the shapePath and shapeValue.

Note: initialShapeSelection is an Array property.

tagHelper
initial-shape.cs
@{       
        
     }
    <div class="control-section">
        <ejs-maps id="maps" >            
            <e-maps-layers>
                <e-maps-layer shapeData="ViewBag.world">
                <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-initialshapeselection>    
                    <e-layersettings-selectionsettings enable= true fill= "green">
                        <e-layers-selection-border color="White" width= 2> </e-layers-selection-border>
                     </e-layersettings-selectionsettings>
                </e-maps-layer>
            </e-maps-layers>
        </ejs-maps>
    </div>
    }
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
    {
        // GET: MarkerClustering
        public ActionResult MarkerClustering()
        {
            ViewBag.shapeData = this.getWorldMap();
            return View();
        }
    }
}

Highlight

Each shape in a map can be highlighted while hovering the mouse over the shapes.

The highlightSettings.fill property is used to change the highlighted layer shape’s color. The highlightSettings.border.color and highlightSettings.border.width properties are used to customize the highlighted shape’s border.

You can highlight the a by hovering the mouse over the shape. The highlight is enabled by using the highlightSettings.enable property of shape layer. When the highlightSettings.enable property is set to false, the shapes cannot be highlighted.

Refer to the API and code snippet for highlight.

tagHelper
highlight.cs
@{ 
    var highlight = new
    {
        enable = true,
        fill = "green",
        border = new
        {
            color = "white",
            width = 2
        }

    };
}
@using Syncfusion.EJ2;
<div id="control-section">
    <ejs-maps id="maps">
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.worldmap" highlightSettings="highlight">
            </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.worldmap = GetWorldMap();
            return View();
        }
        public object GetUSMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/worldmap.js");
            return JsonConvert.DeserializeObject(allText);
        }
    }
}

Tooltip

Tooltip is used to show more information about a layer, bubble or marker on mouse over or touch end event performing.

Tooltip can be enabled separately for layer, bubble or marker by setting the tooltipSettings.visible to true. Tooltip’s valuePath value needs to be set to display the dataSource, which field is tooltip text.

The following code snippet illustrates the tooltip that is enabled for layer to show shape data name field.

Refer to the API for tooltip feature.

tagHelper
tooltip.cs
@{ 
    var tooltip = new
    {
     visible=true,
     valuePath="name"
    };
}
@using Syncfusion.EJ2;
<div id="control-section">
    <ejs-maps id="maps">
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.worldmap" 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.worldmap = GetWorldMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
    }
}
Previous
Next