Options like zooming, panning, single click and double click, highlight and map selection enables the effective interaction on Map elements.
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.
To enable the zooming feature, set the zoomSettings.enable
to true in maps.
To enable the panning feature, set the EnablePanning
property of zoomSettings
to true.
@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);
}
}
}
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:
Refer to the API
links for zooming.
@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.
@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
@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.
@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.
@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);
}
}
}
You can use the animationDuration
property in layers
property to zoom in or zoom out the maps with animation.
@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);
}
}
}
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.
@{
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);
}
}
}
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.
@{
}
<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();
}
}
}
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.
@{
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 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.
@{
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);
}
}
}