Migration from Essential® JS 1

8 Dec 202424 minutes to read

This article describes the API migration process of Maps component from Essential® JS 1 to Essential® JS 2.

Size Customization

Behavior API in Essential® JS 1 API in Essential® JS 2
Height Not Applicable Property: height

@Html.EJS().Maps("container")
.Load("load")
.Height('300px')Render()
Width Not Applicable Property: width

@Html.EJS().Maps("container")
.Load("load")
.Width('400px').Render()

Title and Subtitle Customization

Behavior API in Essential® JS 1 API in Essential® JS 2
Title Text Not Applicable Property: title.text

@Html.EJS().Maps("container")
.Load("load").TitleSettings
(new Syncfusion.EJ2.Maps.MapsTitleSettings
{Text="Members of the UN Security Council"}}).Render()
Subtitle Text Not Applicable Property: title.subtitle.text

@Html.EJS().Maps("container")
.Load("load")
.TitleSettings(title =>SubtitleSettings
(new MapsSubTitleSettings
{Text="- In 2017"})).Render()
Title Alignment Not Applicable Property: title.alignment

@Html.EJS().Maps("container")
.Load("load").TitleSettings
(new Syncfusion.EJ2.Maps.MapsTitleSettings
{Text="Members of the UN Security Council",
Alignment('Far')}}).Render())
Subtitle Alignment Not Applicable Property: title.subtitle.alignment

@Html.EJS().Maps("container")
.Load("load")
.TitleSettings(title =>SubtitleSettings
(new MapsSubTitleSettings
{Text="- In 2017",
Alignment='Far' })).Render()

Layer Customization

Behavior API in Essential® JS 1 API in Essential® JS 2
Type Not Applicable Property: layers.type

@Html.EJS().Maps("container").Load("load").Layers(layer =>{layer.Type('Layer')}).Render()
Layer Type Property: layers.layerType

@(Html.EJ().Map("container").Layers(layer =>{layer.LayerType(LayerType.Geometry)})) 		To render shape maps, there is no need to mention the layer type. You can use the ShapeData property alone.
Property: layers.shapeData

@Html.EJS().Maps("container").Load("load").Layers(layer =>{layer.ShapeData('usmap')}).Render()

To render online maps, there is no need to mention the layer type. You can use the UrlTemplate property alone.
Property: layers.urlTemplate

@Html.EJS().Maps("container").Load("load").Layers(layer =>{layer.UrlTemplate:'https://tile.openstreetmap.org/level/tileX/tileY.png' }).Render()
Visible Not Applicable Property: layers.visible

@Html.EJS().Maps("container").Load("load").Layers(layer =>{layer.Visible(true)}).Render()
Bing Map Type Property: layers.bingMapType

@(Html.EJ().Map("container").Layers(layer =>{layer.LayerType(Syncfusion.JavaScript.DataVisualization.Models.LayerType.Bing)})) 		There is no need to mention the type of Bing Maps. The type of Bing Maps will be available in the URL that you mention in the getBingUrlTemplate method.
Property: getBingUrlTemplate

@Html.EJS().Maps("container").Load("load").Layers(layer =>{layer.Add(); }).Render()
<script>
function load(args) {
 args.maps.getBingUrlTemplate("https://dev.virtualearth.net/REST/V1/Imagery/Metadata/Aerial?output=json&uriScheme=https&key=?").then(function(url) {
  args.maps.layers[0].urlTemplate= url;
 });
}
</script>
Bing Map Key Property: layers.key

@(Html.EJ().Map("container").Layers(layer =>{layer.Key("")})) 		There is no need to mention the key for the online maps. The key will be available in the URL that you mention in the UrlTemplate property. For Bing Maps, the key will be available in the URL that you mention in the getBingUrlTemplate method.
Property: getBingUrlTemplate

@Html.EJS().Maps("container").Load("load").Layers(layer =>{layer.Add(); }).Render()
<script>
function load(args) {
 args.maps.getBingUrlTemplate("https://dev.virtualearth.net/REST/V1/Imagery/Metadata/Aerial?output=json&uriScheme=https&key=?").then(function(url) {
  args.maps.layers[0].urlTemplate= url;
 });
}
</script>
URL Template Property: layers.urltemplate

@(Html.EJ().Map("container").Layers(layer =>{layer.Urltemplate:'http://a.tile.openstreetmap.org/level/tileX/tileY.png' })) 		Property: layers.urlTemplate

@Html.EJS().Maps("container").Load("load").Layers(layer =>{layer.UrlTemplate:'http://a.tile.openstreetmap.org/level/tileX/tileY.png' }).Render()
Shape Data Property: layers.shapeData

@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeData(usmap).Add})) 		Property: layers.shapeData

@Html.EJS().Maps("container").Load("load").Layers(layer =>{layer.ShapeData('usmap')}).Render()
Data Source Property: layers.dataSource

@(Html.EJ().Map("container").Layers(layer =>{layer.dataSource('PopulationData')})) 		Property: layers.dataSource

@Html.EJS().Maps("container").Load("load").Layers(layer =>{layer.DataSource('')}).Render()
Query Not Applicable Property: layers.query

@Html.EJS().Maps("container").Load("load").Layers(layer =>{layer.Query('')}).Render()
Shape Data Path Property: layers.shapeDataPath

@(Html.EJ().Map("container").Layers(layer =>{layer.shapeDataPath('population')})) 		Property: layers.shapeDataPath

@Html.EJS().Maps("container").Load("load").Layers(layer =>{layer.ShapeDataPath('')}).Render()
Shape Property Path Property: layers.shapePropertyPath

@(Html.EJ().Map("container").Layers(layer =>{layer.ShapePropertyPath('Continent')})) 		Property: layers.shapePropertyPath

@Html.EJS().Maps("container").Load("load").Layers(layer =>{layer.shapePropertyPath('')}).Render()
Layer Animation Not Applicable Property: layers.animationDuration

@Html.EJS().Maps("container").Load("load").Layers(layer =>{layer.ShapePropertyPath('')}).Render()

Shape Customization

Behavior API in Essential® JS 1 API in Essential® JS 2
Shape Fill Property: layers.shapeSettings.fill

@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeSettings(ss =>{ss.Fill('#626171')}}))) 		Property: layers.shapeSettings.fill

@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{Fill="red" }).Render()
Shape Palette Property: layers.shapeSettings.colorPalette

@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeSettings(ss =>{ss.ColorPalette(ColorPalette.CustomPalette)}})))
.CustomPalette(new List<string>{"#E51400", "#A4C400", "#730202",}) 		Property: layers.shapeSettings.palette

@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{ColorMapping = ViewBag.colorMappings}).Render()
ViewBag.colorMappings = data;
Shape Point Radius Not Applicable Property: layers.shapeSettings.circleRadius

@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{circleRadius= 10 }).Render()
Shape Color Value Path Property: layers.shapeSettings.colorValuePath

@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeSettings(ss =>{ss.ColorValuePath('')}}))) 		Property: layers.shapeSettings.colorValuePath

@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{ColorValuePath='' }).Render()
Shape Value Path Property: layers.shapeSettings.valuePath

@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeSettings(ss =>{ss.ValuePath('')}}))) 		Property: layers.shapeSettings.valuePath

@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{ valuePath='population'}).Render()
Shape DashArray Not Applicable Property: layers.shapeSettings.dashArray

@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{DashArray='1,2'}).Render()
Shape Opacity Not Applicable Property: layers.shapeSettings.opacity

@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{ Opacity='0.5' }).Render()
Range Color Mapping Property: layers.shapeSettings.colorMappings.rangeColorMapping

@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeSettings(ss =>{ss..RangeColorMappings(cm =>cm.From(10).To(100).color('blue')}}))) 		Property: layers.shapeSettings.colorMapping

@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{ColorMapping = ViewBag.ColorMapping }).Render()
ViewBag.ColorMapping = colorMapping;
colorMapping.Add(new MapsColorMapping{From =100, To=1000, Color = "#b3daff", Label = null})
Equal Color Mapping Property: layers.shapeSettings.colorMappings.equalColorMapping

@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeSettings(ss =>{ss.EqualColorMappings(cm =>cm.value('').color('blue')))) 		Property: layers.shapeSettings.colorMapping

@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{ColorMapping = ViewBag.ColorMapping }).Render()
ViewBag.ColorMapping = colorMapping;
colorMapping.Add(new MapsColorMapping{Value = "1", Color = "#b3daff", Label = null})

Marker Customization

Behavior API in Essential® JS 1 API in Essential® JS 2
Marker Data Source Property: layers.markers

@(Html.EJ().Map("container").Layers(layer =>{layer.Markers(datasource)}))
ViewData["datasource"]= Syncfusion_LocationData.GetSyncfusionLocationData();
List<MapMarker> syncfusionLocationData = new List<MapMarker>{new LocationData {Name = "USA", Latitude =38.8833 , Longitude = -77.0167 }} 		Property: layers.markerSettings.dataSource

@Html.EJS().Maps("container").Load("mapsLoad").Render()
function mapsLoad(args){ args.maps.layers[0].markerSettings=[{dataSource:[{latitude: 37.6276571, longitude: -122.4276688, name: 'San Bruno' },}]
Marker Template Property: layers.markerTemplate

@(Html.EJ().Map("container").Layers(layer =>{layer.Markers(datasource).MarkerTemplate("template")})) 		Property: layers.markerSettings.template

@Html.EJS().Maps("container").Load("mapsLoad").Render()
function mapsLoad(args){ args.maps.layers[0].markerSettings =[{template:'Template'}]
Marker Visible Not Applicable Property: layers.markerSettings.visible

@Html.EJS().Maps("container").Load("mapsLoad").Render()
function mapsLoad(args){ args.maps.layers[0].markerSettings =[{visible:true}]
Marker Fill Not Applicable Property: layers.markerSettings.fill

@Html.EJS().Maps("container").Load("mapsLoad").Render()
function mapsLoad(args){ args.maps.layers[0].markerSettings =[{fill:'red'}]
Marker Height Not Applicable Property: layers.markerSettings.height

@Html.EJS().Maps("container").Load("mapsLoad").Render()
function mapsLoad(args){ args.maps.layers[0].markerSettings =[{height:20}]
Marker Width Not Applicable Property: layers.markerSettings.width

@Html.EJS().Maps("container").Load("mapsLoad").Render()
function mapsLoad(args){ args.maps.layers[0].markerSettings =[{width:20}]
Marker Shape Not Applicable Property: layers.markerSettings.shape

@Html.EJS().Maps("container").Load("mapsLoad").Render()
function mapsLoad(args){ args.maps.layers[0].markerSettings =[{shape="Balloon"}]
Marker ImageURL Not Applicable Property: layers.markerSettings.imageUrl

@Html.EJS().Maps("container").Load("mapsLoad").Render()
function mapsLoad(args){ args.maps.layers[0].markerSettings =[{imageUrl:''}]
Marker Opacity Not Applicable Property: layers.markerSettings.opacity

@Html.EJS().Maps("container").Load("mapsLoad").Render()
function mapsLoad(args){ args.maps.layers[0].markerSettings =[{opacity:0.5}]
Marker Legend Text Not Applicable Property: layers.markerSettings.legendText

@Html.EJS().Maps("container").Load("mapsLoad").Render()
function mapsLoad(args){ args.maps.layers[0].markerSettings =[{legendText:'China'}]
Marker Offset Not Applicable Property: layers.markerSettings.offset

@Html.EJS().Maps("container").Load("mapsLoad").Render()
function mapsLoad(args){ args.maps.layers[0].markerSettings =[{offset:new Point(20, 20)}]
Marker Animation Duration Not Applicable Property: layers.markerSettings.animationDuration

@Html.EJS().Maps("container").Load("mapsLoad").Render()
function mapsLoad(args){ args.maps.layers[0].markerSettings =[{animationDuration:2000}]
Marker Animation Delay Not Applicable Property: layers.markerSettings.animationDelay

@Html.EJS().Maps("container").Load("mapsLoad").Render()
function mapsLoad(args){ args.maps.layers[0].markerSettings =[{animationDelay:100}]
Marker DashArray Not Applicable Property: layers.markerSettings.dashArray

@Html.EJS().Maps("container").Load("mapsLoad").Render()
function mapsLoad(args){ args.maps.layers[0].markerSettings =[{dashArray:'2,3'}]
Marker Selection Not Applicable Property: layers.markerSettings.selectionSettings

@Html.EJS().Maps("container").Load("mapsLoad").Render()
function mapsLoad(args){ args.maps.layers[0].markerSettings =[{ selectionSettings : { enable:true,fill:'#D2691E',opacity:1,enableMultiSelect:false }}]
Marker Highlight Not Applicable Property: layers.markerSettings.highlightSettings

@Html.EJS().Maps("container").Load("mapsLoad").Render()
function mapsLoad(args){ args.maps.layers[0].markerSettings =[{ highlightSettings : { enable:true,fill:'#D2691E',opacity:1 }}]
Marker Tooltip Not Applicable Property: layers.markerSettings.tooltipSettings

@Html.EJS().Maps("container").Load("mapsLoad").Render()
function mapsLoad(args){ args.maps.layers[0].markerSettings =[{tooltipSettings : { visible:true,fill:'#363F4C',template:'TooltipTemplate', valuePath:'State', format:'${State}${District}' } }]

Bubble Customization

Behavior API in Essential® JS 1 API in Essential® JS 2
Visible Property: layers.bubbleSettings.visible

@(Html.EJ().Map("container").Layers(layer=>{layer.BubbleSettings(bubble =>{bubble.ShowBubble(true) }}))) 		Property: layers.bubbleSettings.visible

@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()
MapsBubble bubble = new MapsBubble();
bubble.Visible=true
ValuePath Property: layers.bubbleSettings.valuePath

@(Html.EJ().Map("container").Layers(layer =>{layer.BubbleSettings(bubble =>{bubble.ValuePath('Population') }}))) 		Property: layers.bubbleSettings.valuePath

@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{l.BubbleSettings(ViewBag.bubbleSettings)}).Render()
MapsBubble bubble = new MapsBubble();
bubble.ValuePath='Population'
MinValue Property: layers.bubbleSettings.minValue

@(Html.EJ().Map("container").Layers(layer =>{layer.BubbleSettings(bubble =>{bubble.MinValue(20) }}))) 		Property: layers.bubbleSettings.minRadius

@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()
MapsBubble bubble = new MapsBubble();
bubble.MinRadius=10
MaxValue Property: layers.bubbleSettings.maxValue

@(Html.EJ().Map("container").Layers(layer =>{layer.BubbleSettings(bubble =>{bubble.MaxValue(30) }}))) 		 
Property: layers.bubbleSettings.maxRadius

@Html.EJS().Maps("container").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()

MapsBubble bubble = new MapsBubble();bubble.MaxRadius=20 		   
Bubble Type Not Applicable Property: layers.bubbleSettings.bubbleType

@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()
MapsBubble bubble = new MapsBubble();
bubble.BubbleType='Circle'
Color Property: layers.bubbleSettings.color

@(Html.EJ().Map("container").Layers(layer =>{layer.BubbleSettings(bubble =>{bubble.Color('red') }}))) 		Property: layers.bubbleSettings.fill

@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()
MapsBubble bubble = new MapsBubble();
bubble.Fill='red'
Opacity Property: layers.bubbleSettings.bubbleOpacity

@(Html.EJ().Map("container").Layers(layer =>{layer.BubbleSettings(bubble =>{bubble.BubbleOpacity(0.6) }}))) 		Property: layers.bubbleSettings.opacity

@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()
MapsBubble bubble = new MapsBubble();
bubble.Opacity=0.5
Color Value Path Property: layers.bubbleSettings.colorValuePath

@(Html.EJ().Map("container").Layers(layer =>{layer.BubbleSettings(bubble =>{bubble.ColorValuePath('')}}))) 		Property: layers.bubbleSettings.colorValuePath

@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()
MapsBubble bubble = new MapsBubble();
bubble.ColorValuePath=''
Enable Tooltip Property: layers.bubbleSettings.showTooltip

@(Html.EJ().Map("container").Layers(layer =>{layer.BubbleSettings(bubble =>{bubble.ShowTooltip(true) }}))) 		Property: layers.bubbleSettings.tooltipSettings.visible

@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()
MapsBubble bubble = new MapsBubble();
bubble.TooltipSetting.Visible=true
Tooltip Template Property: layers.bubbleSettings.tooltipTemplate

@(Html.EJ().Map("container").Layers(layer =>{layer.BubbleSettings(bubble =>{bubble.TooltipTemplate('Template') }}))) 		Property: layers.bubbleSettings.tooltipSettings.template

@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()
MapsBubble bubble = new MapsBubble();
bubble.TooltipSetting.Template='template'
Bubble Selection Not Applicable Property: layers.bubbleSettings.selectionSettings

@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()
MapsBubble bubble = new MapsBubble();
bubble.SelectionSetting.Enable=true
Bubble Highlight Not Applicable Property: layers.bubbleSettings.highlightSettings

@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()
MapsBubble bubble = new MapsBubble();
bubble.HighlightSetting.Enable=true
Range Color Mapping Property: layers.bubbleSettings.colorMappings.rangeColorMapping

@(Html.EJ().Map("container").Layers(layer =>{layer.BubbleSettings(bubble =>{}}))) 		Property: layers.bubbleSettings.colorMapping

@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()
MapsBubble bubble = new MapsBubble();
bubble.
Equal Color Mapping Property: layers.bubbleSettings.colorMappings.equalColorMapping

@(Html.EJ().Map("container").Layers(layer =>{layer.BubbleSettings(bubble =>{}}))) 		Property: layers.bubbleSettings.colorMapping

@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()
MapsBubble bubble = new MapsBubble();
bubble.

DataLabel Customization

Behavior API in Essential® JS 1 API in Essential® JS 2
Visible Property: layers.labelSettings.showLabels

@(Html.EJ().Map("container").Layers(layer =>{layer.LabelSettings(lb =>{lb.ShowLabels(true)})})) 		Property: layers.dataLabelSettings.visible

@Html.EJS().Maps("container").Layer({lr.DataLabelSettings(new MapsDataLabelSettings{Visible = true})).Render()
Label Path Property: layers.labelSettings.labelPath

@(Html.EJ().Map("container").Layers(layer =>{layer.LabelSettings(lb =>{lb.LabelPath("iso_3166_2")})})) 		Property: layers.dataLabelSettings.labelPath

@Html.EJS().Maps("container").Layer({lr.DataLabelSettings(new MapsDataLabelSettings{LabelPath = "name",})).Render()
Enable Smart Label Property: layers.labelSettings.enableSmartLabel

@(Html.EJ().Map("container").Layers(layer =>{layer.LabelSettings(lb =>{lb.EnableSmartLabel(true);})})) 		Not Applicable
Smart Label Size Property: layers.labelSettings.smartLabelSize

@(Html.EJ().Map("container").Layers(layer =>{layer.LabelSettings(lb =>{lb.SmartLabelSize(20)})})) 		Not Applicable
Label Length Property: layers.labelSettings.labelLength

@(Html.EJ().Map("container").Layers(layer =>{layer.LabelSettings(lb =>{lb.LabelLength(20) })})) 		Not Applicable
Opacity Not Applicable Property: layers.dataLabelSettings.opacity

@Html.EJS().Maps("container").Layer({lr.DataLabelSettings(new MapsDataLabelSettings{Opacity=0.5})).Render()
Smart Label Mode Not Applicable Property: layers.dataLabelSettings.smartLabelMode

@Html.EJS().Maps("container").Layer({lr.DataLabelSettings(new MapsDataLabelSettings{ SmartLabelMode = SmartLabelMode.Trim})).Render()
InterSectAction Not Applicable Property: layers.dataLabelSettings.intersectionAction

@Html.EJS().Maps("container").Layer({lr.DataLabelSettings(new MapsDataLabelSettings{ IntersectionAction = IntersectionAction.Trim})).Render()
Template Not Applicable Property: layers.dataLabelSettings.template

@Html.EJS().Maps("container").Layer({lr.DataLabelSettings(new MapsDataLabelSettings{Template='Temaplate'})).Render()

Legend Customization

Behavior API in Essential® JS 1 API in Essential® JS 2
Visible Property: layers.legendSettings.showLegend

@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.ShowLegend(true})})) 		Property: legendSettings.visible

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ Visible = true}).Render()
Toggle Visibility Property: layers.legendSettings.toggleVisibility

@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.ToggleVisibility(true)})})) 		Property: legendSettings.toggleVisibility

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ToggleVisibility = true}).Render()
Legend Location X Property: layers.legendSettings.positionX

@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.PositionX(250)})})) 		Property: legendSettings.location

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ }).Render()
Legend Location Y Property: layers.legendSettings.positionY

@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.PositionY(250)})})) 		Property: legendSettings.location

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ }).Render()
Legend Type Property: layers.legendSettings.type

@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.Type:'Layers'})})) 		Property: legendSettings.type

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ Type = Syncfusion.EJ2.Maps.LegendType.Layers}).Render()
Label Orientation Property: layers.legendSettings.labelOrientation

@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.LabelOrientation('Vertical')})})) 		Not Applicable
Legend Title Property: layers.legendSettings.title

@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.Title:'Union territories of India'})})) 		Property: legendSettings.title

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ Title= ""}).Render()
Legend Mode Property: layers.legendSettings.mode

@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.Mode('Default')})})) 		Property: legendSettings.mode

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ Mode = Syncfusion.EJ2.Maps.LegendMode.Default, }).Render()
Legend Position Property: layers.legendSettings.position

@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.Position('TopLeft')})})) 		Property: legendSettings.position

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{Position = Syncfusion.EJ2.Maps.LegendPosition.Bottom, }).Render()
Legend DockOnMap Property: layers.legendSettings.dockOnMap

@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.DockOnMap(true)})})) 		Not Applicable
Legend Alignment Property: layers.legendSettings.dockPosition

@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.DockPosition('Right')})})) 		Property: legendSettings.alignment

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{Alignment = Syncfusion.EJ2.Maps.Alignment.Center }).Render()
Legend Left Label Property: layers.legendSettings.leftLabel

@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.LeftLabel('1000M')})})) 		Not Applicable
Legend Right Label Property: layers.legendSettings.rightLabel

@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls. RightLabel('3000M')})})) 		Not Applicable
Legend Shape Property: layers.legendSettings.icon

@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.Icon('Circle')})})) 		Property: legendSettings.shape

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{Shape= Syncfusion.EJ2.Maps.LegendShape.Circle }).Render()
Legend Shape Height Property: layers.legendSettings.iconHeight

@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.IconHeight(20)})})) 		Property: legendSettings.shapeHeight

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ShapeHeight=20 }).Render()
Legend Shape Width Property: layers.legendSettings.iconWidth

@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.IconWidth(20)})})) 		Property: legendSettings.shapeWidth

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ShapeWidth=20 }).Render()
Height Property: layers.legendSettings.height

@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.Height(50)})})) 		Property: legendSettings.width

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{Height='50'}).Render()
Width Property: layers.legendSettings.width

@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.Width(50)})})) 		Property: legendSettings.width

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ Width='150' }).Render()
Show Labels Property: layers.legendSettings.showLabels

@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.ShowLabels(true)})})) 		Not Applicable
Background Not Applicable Property: legendSettings.background

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{Background='transparent' }).Render()
Label Position Not Applicable Property: legendSettings.labelPosition

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{LabelPosition = Syncfusion.EJ2.Maps.LabelPosition.After }).Render()
Label Display Mode Not Applicable Property: legendSettings.labelDisplayMode

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{LabelDisplayMode = Syncfusion.EJ2.Maps.LabelIntersectAction.Trim, }).Render()
Legend Orientation Not Applicable Property: legendSettings.orientation

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{Orientation = Syncfusion.EJ2.Maps.LegendArrangement.Horizontal, }).Render()
Legend Item Fill Not Applicable Property: legendSettings.fill

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ Fill='red'}).Render()
Legend Shape Padding Not Applicable Property: legendSettings.shapePadding

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ ShapePadding=20}).Render()
Legend Shape Border Color Not Applicable Property: legendSettings.shapeBorder.color

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ShapeBorder = { Color="green" }, }).Render()
Legend Shape Border Width Not Applicable Property: legendSettings.shapeBorder.width

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ShapeBorder = { Width=30 }, }).Render()
Inverter Pointer Not Applicable Property: legendSettings.invertedPointer

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{InvertedPointer= true }).Render()
Item Text Style Not Applicable Property: legendSettings.textStyle

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{TextStyle = new MapsFont { Size = "14px" } }).Render()
Title Style Not Applicable Property: legendSettings.textStyle

@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ TitleStyle= new MapsFont { Size = "14px" }}).Render()

Zooming Customization

Behavior API in Essential® JS 1 API in Essential® JS 2
Enable Not Applicable Property: zoomSettings.enableZoom

@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{ Enable=true}).Render()
Minimum Zoom Property: zoomSettings.minValue

@(Html.EJ().Map("container").ZoomSettings(zm=>{zm.MinValue(2)})) 		Property: zoomSettings.minZoom

@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{MinZoom=2,}).Render()
Maximum Zoom Property: zoomSettings.maxValue

@(Html.EJ().Map("container").ZoomSettings(zm=>{zm.MaxValue(50)})) 		Property: zoomSettings.maxZoom

@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{MaxZoom=4,}).Render()
Mouse Wheel Zoom Property: zoomSettings.enableMouseWheelZoom

@(Html.EJ().Map("container").ZoomSettings(zm=>{zm.EnableMouseWheelZoom(true)})) 		Property: zoomSettings.maxZoom

@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{MouseWheelZoom=true}).Render()
Double Click Zoom Not Applicable Property: zoomSettings.doubleClickZoom

@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{DoubleClickZoom=true}).Render()
Pinch Zoom Not Applicable Property: zoomSettings.pinchZooming

@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{PinchZooming=true}).Render()
Single Click Zoom Property: zoomSettings.enableZoomOnSelection

@(Html.EJ().Map("container").ZoomSettings(zm=>{zm.EnableZoomOnSelection(true)})) 		Property: zoomSettings.zoomOnClick

@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{ZoomOnClick=true}).Render()
Zoom Factor Property: zoomSettings.factor

@(Html.EJ().Map("container").ZoomSettings(zm=>{zm.Factor(2)})) 		Property: zoomSettings.zoomFactor

@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{ ZoomFactor=2,}).Render()
Toolbars Not Applicable Property: zoomSettings.toolbarSettings.buttonSettings.toolbarItems

@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{ToolbarSettings = new { buttonSettings = new { toolbarItems = new string[] { "ZoomIn" } } }}).Render()
Toolbar Orientation Not Applicable Property: zoomSettings.toolbarSettings.orientation

@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{ToolbarSettings = new {orientation = "Horizontal"}}).Render()
Toolbar Vertical Alignment Not Applicable Property: zoomSettings.toolbarSettings.verticalAlignment

@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{ToolbarSettings = new {verticalAlignment = "Center"}}).Render()
Toolbar Horizontal Alignment Not Applicable Property: zoomSettings.toolbarSettings.horizontalAlignment

@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{ToolbarSettings = new {horizontalAlignment = "Center"}}).Render()
Toolbar Highlight Color Not Applicable Property: zoomSettings.toolbarSettings.buttonSettings.highlightColor

@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{ToolbarSettings = new { buttonSettings = new { highlightColor = "#e61576" } }}).Render()
Toolbar Selection Color Not Applicable Property: zoomSettings.toolbarSettings.buttonSettings.selectionColor

@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{ToolbarSettings = new { buttonSettings = new { selectionColor = "#e61576" } }}).Render()
Toolbar Fill Color Not Applicable Property: zoomSettings.toolbarSettings.buttonSettings.color

@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{ToolbarSettings = new { buttonSettings = new { color = "#e61576"}).Render()

Highlight And Selection Customization

Behavior API in Essential® JS 1 API in Essential® JS 2
Highlight Fill Property: layers.shapeSettings.highlightColor

@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeSettings(shape =>{shape.HighlightColor('green') })})) 		Property: fill

l@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{HighlightSettings = new MapsHighlightSettings{Fill='red'}}).Render()
Enable Highlight Property: layers.enableMouseHover

@(Html.EJ().Map("container").Layers(layer =>{layer.EnableMouseHover(true)})) 		Property: enable

@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{HighlightSettings = new MapsHighlightSettings{Enable=true}}).Render()
Highlight Border Color Property: layers.shapeSettings.highlightStroke

@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeSettings(shape =>{shape.HighlightStroke('red')})})) 		Property: layers.highlightSettings.border.color

@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{HighlightSettings = new MapsHighlightSettings{Border={Color='green'}}}).Render()
Highlight Border Width Property: layers.shapeSettings.highlightBorderWidth

@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeSettings(shape =>{shape.HighlightBorderWidth=('2')})})) 		Property: layers.highlightSettings.border.width

@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{HighlightSettings = new MapsHighlightSettings{Border={Width=2}}}).Render()
Highlight Opacity Not Applicable Property: layers.layers.highlightSettings.opacity

@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{HighlightSettings = new MapsHighlightSettings{Opacity=0.3}}).Render()
Selection Fill Property: layers.shapeSettings.selectionColor

@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeSettings(shape =>{shape.SelectionColor('blue')})})) 		Property: layers.selectionSettings.fill

@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{SelectionSettings = new MapsSelectionSettings{Fill='red'}}).Render()
Selection Enable Property: layers.enableSelection

@(Html.EJ().Map("container").Layers(layer =>{layer.EnableSelection(true)})) 		Property: layers.selectionSettings.enable

@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{SelectionSettings = new MapsSelectionSettings{Enable= true}}).Render()
Selection Border Width Property: layers.selectionSettings.selectionStrokeWidth

@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeSettings(shape =>{shape.SelectionStrokeWidth(2)})})) 		Property: layers.selectionSettings.border.width

@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{SelectionSettings = new MapsSelectionSettings{Border={Width=2}}}).Render()
Selection Border Color Property: layers.selectionSettings.selectionStroke

@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeSettings(shape =>{shape.SelectionStroke("white")})})) 		Property: layers.selectionSettings.border.color

@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{SelectionSettings = new MapsSelectionSettings{Border={Color='red'}}}).Render()
Selection Opacity Not Applicable Property: layers.selectionSettings.opacity

@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{SelectionSettings = new MapsSelectionSettings{Opacity=0.3}}).Render()
Behavior API in Essential® JS 1 API in Essential® JS 2
Visible Not Applicable Property: layers.navigationLineSettings.visible

@Html.EJS().Maps("container").Render()
function mapsLoad(args){args.maps.layers[0].navigationLineSettings{ visible: true}}
Width Not Applicable Property: layers.navigationLineSettings.width

@Html.EJS().Maps("container").Render()
function mapsLoad(args){args.maps.layers[0].navigationLineSettings{width:2}}
Longitude Not Applicable Property: layers.navigationLineSettings.longitude

@Html.EJS().Maps("container").Render()
function mapsLoad(args){args.maps.layers[0].navigationLineSettings{longitude: [-97.8717041015625, -89.6649169921875]}}
Latitude Not Applicable Property: layers.navigationLineSettings.latitude

@Html.EJS().Maps("container").Render()
function mapsLoad(args){args.maps.layers[0].navigationLineSettings{Latitude= [22.403410892712124, 21.282336521195344] }}
DashArray Not Applicable Property: layers.navigationLineSettings.dashArray

@Html.EJS().Maps("container").Render()
function mapsLoad(args){args.maps.layers[0].navigationLineSettings{dashArray:"1,2"}}
Color Not Applicable Property: layers.navigationLineSettings.color

@Html.EJS().Maps("container").Render()
function mapsLoad(args){args.maps.layers[0].navigationLineSettings{color:"green"}}
Angle Not Applicable Property: layers.navigationLineSettings.angle

@Html.EJS().Maps("container").Render()
function mapsLoad(args){args.maps.layers[0].navigationLineSettings{angle:180}}
Arrow Position Not Applicable Property: layers.navigationLineSettings.arrow.position

@Html.EJS().Maps("container").Render()
function mapsLoad(args){args.maps.layers[0].navigationLineSettings{arrow:{ position:"start" }}}
Show Arrow Not Applicable Property: layers.navigationLineSettings.arrow.showArrow

@Html.EJS().Maps("container").Render()
function mapsLoad(args){args.maps.layers[0].navigationLineSettings{arrow:{ showArrow:true }}}
Arrow size Not Applicable Property: layers.navigationLineSettings.arrow.size

@Html.EJS().Maps("container").Render()
function mapsLoad(args){args.maps.layers[0].navigationLineSettings{ arrow:{ size:2 }}}
Arrow Color Not Applicable Property: layers.navigationLineSettings.arrow.color

@Html.EJS().Maps("container").Render()
function mapsLoad(args){args.maps.layers[0].navigationLineSettings{arrow:{ color:'red' }}}
Arrow Offset Not Applicable Property: layers.navigationLineSettings.arrow.offSet

@Html.EJS().Maps("container").Render()
function mapsLoad(args){args.maps.layers[0].navigationLineSettings{arrow:{ offSet:10 }}}

Tooltip Customization

Behavior API in Essential® JS 1 API in Essential® JS 2
Tooltip Enable Property: layers.showTooltip

@(Html.EJ().Map("container").Layers(layer =>{layer.ShowTooltip(true)})) 		Property: layers.tooltipSettings.visible

@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{ new Syncfusion.EJ2.Maps.MapsLayer{ TooltipSettings = new MapsTooltipSettings{Visible= true }}}).Render()
Tooltip Template Property: layers.tooltipTemplate

@(Html.EJ().Map("container").Layers(layer =>{layer.ToolTipTemplate('myTooltip').Add})) 		Property: layers.tooltipSettings.visible

@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{ new Syncfusion.EJ2.Maps.MapsLayer{ TooltipSettings = new MapsTooltipSettings{Template='template'}}}).Render()
Value Path Not Applicable Property: layers.tooltipSettings.valuePath

@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{ new Syncfusion.EJ2.Maps.MapsLayer{ TooltipSettings = new MapsTooltipSettings{ValuePath = "State"}}}).Render()
Format Not Applicable Property: layers.tooltipSettings.format

@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{ new Syncfusion.EJ2.Maps.MapsLayer{ TooltipSettings = new MapsTooltipSettings{Format='${State}}}}).Render()
Border Color Not Applicable Property: layers.tooltipSettings.border.color

@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{ new Syncfusion.EJ2.Maps.MapsLayer{ TooltipSettings = new MapsTooltipSettings{Border={ color:'red' } }}}).Render()
Border Width Not Applicable Property: layers.tooltipSettings.border.width

@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{ new Syncfusion.EJ2.Maps.MapsLayer{ TooltipSettings = new MapsTooltipSettings{Border={ width:'' }}}}).Render()
Text Style Not Applicable Property: layers.tooltipSettings.textStyle

@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{ new Syncfusion.EJ2.Maps.MapsLayer{ TooltipSettings = new MapsTooltipSettings{TextStyle= { Size="15px", Color="red", FontFamily="arial", FontWeight="bold", FontStyle="normal", Opacity=0.8 }}}}).Render()

Annotation Cutomization

Behavior API in Essential® JS 1 API in Essential® JS 2
Content Not Applicable Property: legendSettings.annotations.content

@Html.EJS().Maps("container")Load("mapsLoad").Render()
function mapsLoad(args){args.maps.annotations=[{ content:'USA Population 2018}]}
Location X Not Applicable Property: legendSettings.annotations.x

@Html.EJS().Maps("container")Load("mapsLoad").Render()
function mapsLoad(args){args.maps.annotations=[{x:'250px' }]}
Location Y Not Applicable Property: legendSettings.annotations.y

@Html.EJS().Maps("container")Load("mapsLoad").Render()
function mapsLoad(args){args.maps.annotations=[{ y:'150px'}]}
Vertical Alignment Not Applicable Property: legendSettings.annotations.verticalAlignment

@Html.EJS().Maps("container")Load("mapsLoad").Render()
function mapsLoad(args){args.maps.annotations=[{verticalAlignment:'Center'}]}
Horizontal Alignment Not Applicable Property: legendSettings.annotations.horizontalAlignment

@Html.EJS().Maps("container")Load("mapsLoad").Render()
function mapsLoad(args){args.maps.annotations=[{horizontalAlignment:'Center'}]}
Zindex Not Applicable Property: legendSettings.annotations.zIndex

@Html.EJS().Maps("container")Load("mapsLoad").Render()
function mapsLoad(args){args.maps.annotations=[{ zIndex:'-1' }]}

Maps Other Properties Customization

Behavior API in Essential® JS 1 API in Essential® JS 2
Projection Type Not Applicable Property: projectionType

@Html.EJS().Maps("container").ProjectionType(ProjectionType.Eckert3).Render()
Background Property: background

@Html.EJ().Maps("container").Background('red')) 		Property: background

@Html.EJS().Maps("container").Background("red").Render()
Enable Group Separator Property: enableGroupSeparator

@Html.EJ().Maps("container").UseGroupingSeparator(true)) 		Property: useGroupingSeparator

@Html.EJS().Maps("container").UseGroupingSeparator(true).Render()
Base Layer Index Property: baseMapIndex

@Html.EJ().Maps("container").BaseLayerIndex(1)) 		Property: baseLayerIndex

@Html.EJS().Maps("container").BaseLayerIndex(1).Render()
locale Property: locale

@(Html.EJ().Map("container").Locale('en-us') 		Not Applicable
Responsive Property: isResponsive

@(Html.EJ().Map("container").IsResponsive(true) 		Not Applicable
Enable Pan Property: enablePan

@(Html.EJ().Map("container").EnablePan(true) 		Not Applicable
Enable Navigation Property: navigationControl.enableNavigation

@(Html.EJ().Map("container").NavigationControl(new{ enableNavigation=true }) 		Not Applicable
Navigation Orientation Property: navigationControl.orientation

@(Html.EJ().Map("container").NavigationControl(new{ orientation='vertical' }) 		Not Applicable
Navigation Dock Position Property: navigationControl.dockPosition

@(Html.EJ().Map("container").NavigationControl(new{ dockPosition='centerLeft' }) 		Not Applicable
Navigation Absolute Position Property: navigationControl.absolutePosition

@(Html.EJ().Map("container").NavigationControl(new{ absolutePosition={ x: 100, y : 100 } }) 		Not Applicable
Dragging Selection Property: draggingOnSelection

@(Html.EJ().Map("container").DraggingOnSelection(true) 		Not Applicable
Resize Property: enableResize

@(Html.EJ().Map("container").EnableResize(true)) 		Not Applicable
Enable Animation Property: enableAnimation

@(Html.EJ().Map("container").EnableAnimation(true)) 		Not Applicable
Enable Layer Animation Property: enableLayerChangeAnimation

@(Html.EJ().Map("container").EnableLayerChangeAnimation(true)) 		Not Applicable
Center Position Property: centerPosition

@Html.EJS().Maps("container").CenterPosition(new { latitude = 35.65, longitude = -97.3 })) 		Property: centerPosition

@Html.EJS().Maps("container").CenterPosition(new { latitude = 35.65, longitude = -97.3 }).Render()

Events

Behavior API in Essential® JS 1 API in Essential® JS 2
Shape Selected Property: shapeSelected

@(Html.EJ().Map("container").ShapeSelected("shapeSelected"))
function shapeSelected(args){} 		Property: shapeSelected

@Html.EJS().Maps("container").ShapeSelected("shapeSelected").Render()
function shapeSelected(args){}
Marker Selected Property: markerSelected

@(Html.EJ().Map("container").MarkerClick("markerClick"))
function markerClick(args){} 		Property: markerClick

@Html.EJS().Maps("container").Load("mapLoad").Render()
function mapLoad(args){}
Marker Move Property: markerEnter

@(Html.EJ().Map("container"). MarkerClick(" markerClick"))
function markerClick(args){} 		Property: markerMouseMove

@Html.EJS().Maps("container").Load("mapLoad").Render()
function mapLoad(args){}
Marker Leave Property: markerLeave

@(Html.EJ().Map("container").MarkerLeave("markerLeave"))
function markerLeave(args){} 		Not Applicable
Legend Item Rendering Property: legendItemRendering

@(Html.EJ().Map("container").LegendItemRendering("legendItemRendering"))
function legendItemRendering(args){} 		Not Applicable
Display Text Rendering Property: displayTextRendering

@(Html.EJ().Map("container").DisplayTextRendering("displayTextRendering"))
function displayTextRendering(args){} 		Property: dataLabelRendering

@Html.EJS().Maps("container").DataLabelRendering("dataLabelRendering").Render()
function dataLabelRendering(args){}
Legend Item Click Property: legendItemClick

@(Html.EJ().Map("container").LegendItemClick("legendItemClick"))
function legendItemClick(args){} 		Not Applicable
Bubble Rendering Property: bubbleRendering

@(Html.EJ().Map("container").BubbleRendering("bubbleRendering"))
function bubbleRendering(args){} 		Property: bubbleRendering

@Html.EJS().Maps("container").BubbleRendering("bubbleRendering").Render()
function bubbleRendering(args){}
Shape Rendering Property: shapeRendering

@(Html.EJ().Map("container").ShapeRendering("shapeRendering"))
function shapeRendering(args){} 		Property: shapeRendering

@Html.EJS().Maps("container").ShapeRendering("shapeRendering").Render()
function shapeRendering(args){}
Zoomed In Property: zoomedIn

@(Html.EJ().Map("container"). ZoomedIn("zoomedIn"))
function zoomedIn(args){} 		Not Applicable
Render Completed Property: onRenderComplete

@(Html.EJ().Map("container").OnRenderComplete("onRenderComplete"))
function onRenderComplete(args){} 		Property: loaded

@Html.EJS().Maps("container").Click("click").Render()
function click(args){}
Panned Property: panned

@(Html.EJ().Map("container").Panned("panned"))
function panned(args){} 		Not Applicable
zoomed Out Property: zoomedOut

@(Html.EJ().Map("container").ZoomedOut("zoomedOut"))
function zoomedOut(args){} 		Not Applicable
Mouse Over Property: mouseover

@(Html.EJ().Map("container").Mouseover("mouseover"))
function mouseover(args){} 		Not Applicable
Mouse Leave Property: mouseleave

@(Html.EJ().Map("container").MouseLeave("mouseLeave"))
function mouseLeave(args){} 		Not Applicable
Click Property: click

@(Html.EJ().Map("container").Click("click"))
function markerSelected(args){} 		 
Double Click Property: doubleClick

@(Html.EJ().Map("container"). DoubleClick("doubleClick"))
function doubleClick(args){} 		Property: doubleClick

@Html.EJS().Maps("container").DoubleClick("doubleClick").Render()
function doubleClick(args){}
Right Click Property: rightClick

@(Html.EJ().Map("container").RightClick("rightClick"))
function rightClick(args){} 		Property: rightClick

@Html.EJS().Maps("container").RightClick("rightClick").Render()
function rightClick(args){}
Initial Load Property: onLoad

@(Html.EJ().Map("container"). OnLoad("onLoad"))
function onLoad(args){} 		Property: load

@Html.EJS().Maps("container").Load("mapLoad").Render()
function mapLoad(args){}
Before Print Not Applicable Property: beforePrint

@Html.EJS().Maps("container").BeforePrint("beforePrint").Render()
function beforePrint(args){}
Resize Not Applicable Property: resize

@Html.EJS().Maps("container").Resize("resize").Render()
function resize(args){}
Tooltip Render Not Applicable Property: tooltipRender

@Html.EJS().Maps("container").TooltipRender("tooltipRender").Render()
function tooltipRender(args){}
Item Selection Not Applicable Property: itemSelection

@Html.EJS().Maps("container").ItemSelection("itemSelection").Render()
function itemSelection(args){}
Item Highlight Not Applicable Property: itemHighlight

@Html.EJS().Maps("container").ItemHighlight("itemHighlight").Render()
function itemHighlight(args){}
Shape Highlight Not Applicable Property: shapeHighlight

@Html.EJS().Maps("container").ShapeHighlight("shapeHighlight").Render()
function shapeHighlight(args){}
Layer Rendering Not Applicable Property: layerRendering

@Html.EJS().Maps("container").LayerRendering("layerRendering").Render()
function layerRendering(args){}
Marker Rendering Not Applicable Property: markerRendering

@Html.EJS().Maps("container").MarkerRendering("markerRendering").Render()
function markerRendering(args){}
Bubble Mouse Move Not Applicable Property: bubbleMouseMove

@Html.EJS().Maps("container").BubbleMouseMove("bubbleMouseMove").Render()
function bubbleMouseMove(args){}
Bubble Mouse Move Not Applicable Property: annotationRendering

@Html.EJS().Maps("container").AnnotationRendering("annotationRendering").Render()
function annotationRendering(args){}
Animation Complete Not Applicable Property: animationComplete

@Html.EJS().Maps("container").AnimationComplete("animationComplete").Render()
function animationComplete(args){}