Options such as zooming, panning, single click, double click, highlight and map selection enable 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.
Zooming can be performed by various types such as click zooming, double-click zooming, toolbar zooming, rectangular zooming, mouse wheel zooming and pinch zooming.
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-layers>
<e-layer shapeData="ViewBag.worldmap">
</e-layer>
</e-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-layers>
<e-layer shapeData="ViewBag.worldmap" selectionSettings="select">
</e-layer>
</e-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 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-layers>
<e-layer shapeData="ViewBag.worldmap" highlightSettings="highlight">
</e-layer>
</e-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-layers>
<e-layer shapeData="ViewBag.worldmap" tooltipSettings="tooltip">
</e-layer>
</e-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);
}
}
}