Search results

Migration from Essential JS 1

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(lr =>{lr.Type('Layer')}).Render()
Layer Type Property: layers.layerType

@(Html.EJ().Map("container").Layers(lr =>{lr.LayerType(LayerType.Geometry)}))
Property: layers.layerType

@Html.EJS().Maps("container").Load("load").Layers(lr =>{lr.LayerType('Geometry')}).Render()
Visible Not Applicable Property: layers.visible

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

@(Html.EJ().Map("container").Layers(lr =>{lr.LayerType(Syncfusion.JavaScript.DataVisualization.Models.LayerType.Bing)}))
Property: layers.bingMapType

@Html.EJS().Maps("container").Load("load").Layers(lr =>{lr.BingMapType('Aerial')}).Render()
Bing Map Key Property: layers.key

@(Html.EJ().Map("container").Layers(lr =>{lr.Key("")}))
Property: layers.key

@Html.EJS().Maps("container").Load("load").Layers(lr =>{lr.Key('')}).Render()
URL Template Property: layers.urltemplate

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

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

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

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

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

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

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

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

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

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

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

@Html.EJS().Maps("container").Load("load").Layers(lr =>{lr.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(lr =>{lr.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(lr =>{lr.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(lr =>{lr.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(lr =>{lr.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(lr =>{lr.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(lr =>{lr.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(lr =>{lr.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(lr =>{lr.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(lr =>{lr.BubbleSettings(bs =>{bs.ShowBubble(true) }})))
Property: layers.bubbleSettings.visible

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

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

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

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

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

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

@Html.EJS().Maps("container").Layer(lr=>{lr.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(lr=>{lr.BubbleSettings(ViewBag.bubbleSettings)}).Render()
MapsBubble bubble = new MapsBubble();
bubble.BubbleType='Circle'
Color Property: layers.bubbleSettings.color

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

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

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

@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{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(lr =>{lr.BubbleSettings(bs =>{bs.ColorValuePath('')}})))
Property: layers.bubbleSettings.colorValuePath

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

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

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

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

@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{lr.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(lr=>{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(lr=>{lr.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(lr =>{lr.BubbleSettings(bs =>{bs. }})))
Property: layers.bubbleSettings.colorMapping

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

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

@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{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(lr =>{lr.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(lr =>{lr.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(lr =>{lr.LabelSettings(lb =>{lb.EnableSmartLabel(true);})}))
Not Applicable
Smart Label Size Property: layers.labelSettings.smartLabelSize

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

@(Html.EJ().Map("container").Layers(lr =>{lr.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(lr =>{lr.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(lr =>{lr.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(lr =>{lr.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(lr =>{lr.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(lr =>{lr.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(lr =>{lr.LegendSettings(ls =>{ls.LabelOrientation('Vertical')})}))
Not Applicable
Legend Title Property: layers.legendSettings.title

@(Html.EJ().Map("container").Layers(lr =>{lr.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(lr =>{lr.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(lr =>{lr.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(lr =>{lr.LegendSettings(ls =>{ls.DockOnMap(true)})}))
Not Applicable
Legend Alignment Property: layers.legendSettings.dockPosition

@(Html.EJ().Map("container").Layers(lr =>{lr.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(lr =>{lr.LegendSettings(ls =>{ls.LeftLabel('1000M')})}))
Not Applicable
Legend Right Label Property: layers.legendSettings.rightLabel

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

@(Html.EJ().Map("container").Layers(lr =>{lr.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(lr =>{lr.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(lr =>{lr.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(lr =>{lr.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(lr =>{lr.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(lr =>{lr.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.toolbars

@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{Toolbars =['ZoomIn']}).Render()
Toolbar Orientation Not Applicable Property: zoomSettings.toolBarOrientation

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

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

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

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

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

@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{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(lr =>{lr.ShapeSettings(sp =>{sp.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(lr =>{lr.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(lr =>{lr.ShapeSettings(sp =>{sp.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(lr =>{lr.ShapeSettings(sp =>{sp.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(lr =>{lr.ShapeSettings(sp =>{sp.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(lr =>{lr.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(lr =>{lr.ShapeSettings(sp =>{sp.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(lr =>{lr.ShapeSettings(sp =>{sp.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(lr =>{lr.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(lr =>{lr.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='tremplate'}}}).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").IsResponsivet(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){}