Ej1 api migration in EJ2 JavaScript Maps control

27 Apr 202324 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

var maps = new ej.maps.Maps({
  height : ‘300px’
});
maps.appendTo(‘#container’);
Width Not Applicable Property: width

var maps = new ej.maps.Maps({
  width : ‘600px’
});
maps.appendTo(‘#container’);

Title and Subtitle Customization

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

var maps = new ej.maps.Maps({
  titleSettings:{ text : ‘Members of the UN Security Council’ }
});
maps.appendTo(‘#container’)
Subtitle Text Not Applicable Property: title.subtitle.text

var maps = new ej.maps.Maps({
  titleSettings:{ subtitleSettings:{ text : ‘In 2017’ }
} });
maps.appendTo(‘#container’);
Title Alignment Not Applicable Property: title.alignment

var maps = new ej.maps.Maps({
  titleSettings:{ alignment : ‘Center’ }
});
maps.appendTo(‘#container’);
Subtitle Alignment Not Applicable Property: title.subtitle.alignment

var maps = new ej.maps.Maps({
  titleSettings:{ subtitleSettings:{ alignment : ‘Center’ }
} });
maps.appendTo(‘#container’);

Layer Customization

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

var maps = new ej.maps.Maps({
  layers:[{ type:’Layer’ }]
});
maps.appendTo(‘#container’)
Layer Type Property: layers.layerType

$(“#container”).ejMap({
  layers:[{ layerType:’geometry’ }]
});		 Property: layers.layerType

var maps = new ej.maps.Maps({
  layers:[{ layerType:’Geometry’ }]
});
maps.appendTo(‘#container’)
Visible Not Applicable Property: layers.visible

var maps = new ej.maps.Maps({
  layers:[{ visible:true }]
});
maps.appendTo(‘#container’)
Bing Map Type Property: layers.bingMapType

$(“#container”).ejMap({
  layers:[{ bingMapType:’aerial’ }]
});		 Property: layers.bingMapType

var maps = new ej.maps.Maps({
  layers:[{ bingMapType:’Aerial’ }]
});
maps.appendTo(‘#container’)
Bing Map Key Property: layers.key

$(“#container”).ejMap({
  layers:[{ key:’’ }]
});		 Property: layers.key

var maps = new ej.maps.Maps({
  layers:[{ key:’’ }]
});
maps.appendTo(‘#container’)
URL Template Property: layers.urltemplate

$(“#container”).ejMap({
  layers:[{ urltemplate:’http://a.tile.openstreetmap.org/level/tileX/tileY.png’ }]
});		 Property: layers.urlTemplate

var maps = new ej.maps.Maps({
  layers:[{ urlTemplate:’http://a.tile.openstreetmap.org/level/tileX/tileY.png’ }]
});
maps.appendTo(‘#container’)
Shape Data Property: layers.shapeData

$(“#container”).ejMap({
  layers:[{ shapeData:’WorldMap’ }]
});		 Property: layers.shapeData

var maps = new ej.maps.Maps({
  layers:[{ shapeData:’WorldMap’ }]
});
maps.appendTo(‘#container’)
Data Source Property: layers.dataSource

$(“#container”).ejMap({
  layers:[{ dataSource:’PopulationData’ }]
});		 Property: layers.dataSource

var maps = new ej.maps.Maps({
  layers:[{ dataSource:’PopulationData’ }]
});
maps.appendTo(‘#container’)
Query Not Applicable Property: layers.query

var maps = new ej.maps.Maps({
  layers:[{ query:’’ }]
});
maps.appendTo(‘#container’)
Shape Data Path Property: layers.shapeDataPath

$(“#container”).ejMap({
  layers:[{ shapeDataPath:’Continent’ }]
});		 Property: layers.shapeDataPath

var maps = new ej.maps.Maps({
  layers:[{ shapeDataPath:’Continent’ }]
});
maps.appendTo(‘#container’)
Shape Property Path Property: layers.shapePropertyPath

$(“#container”).ejMap({
  layers:[{ shapePropertyPath:’Continent’ }]
});		 Property: layers.shapePropertyPath

var maps = new ej.maps.Maps({
  layers:[{ shapePropertyPath:’Continent’ }]
});
maps.appendTo(‘#container’)
Layer Animation Not Applicable Property: layers.animationDuration

var maps = new ej.maps.Maps({
  layers:[{ animationDuration: 100 }]
});
maps.appendTo(‘#container’)

Shape Customization

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

$(“#container”).ejMap({
  layers:[{ shapeSettings:{ fill:’#626171’ } }]
});		 Property: layers.shapeSettings.fill

var maps = new ej.maps.Maps({
  layers:[{ shapeSettings:{ fill: ‘#626171’ } }]
});
maps.appendTo(‘#container’)
Shape Palette Property: layers.shapeSettings.colorPalette

$(“#container”).ejMap({
  layers:[{ shapeSettings:{ colorPalette:’customPalette’ } }]
});		 Property: layers.shapeSettings.palette

var maps = new ej.maps.Maps({
  layers:[{ shapeSettings:{ palette: [‘red’,’green’] } }]
});
maps.appendTo(‘#container’)
Shape Point Radius Not Applicable Property: layers.shapeSettings.circleRadius

var maps = new ej.maps.Maps({
  layers:[{ shapeSettings:{ circleRadius: 10 } }]
});
maps.appendTo(‘#container’)
Shape Color Value Path Property: layers.shapeSettings.colorValuePath

$(“#container”).ejMap({
  layers:[{ shapeSettings:{ colorValuePath:’Country’ } }]
});		 Property: layers.shapeSettings.colorValuePath

var maps = new ej.maps.Maps({
  layers:[{ shapeSettings:{ colorValuePath:’Country’ } }]
});
maps.appendTo(‘#container’)
Shape Value Path Property: layers.shapeSettings.valuePath

$(“#container”).ejMap({
  layers:[{ shapeSettings:{ valuePath:’population’ } }]
});		 Property: layers.shapeSettings.valuePath

var maps = new ej.maps.Maps({
  layers:[{ shapeSettings:{ valuePath:’population’ } }]
});
maps.appendTo(‘#container’)
Shape DashArray Not Applicable Property: layers.shapeSettings.dashArray

var maps = new ej.maps.Maps({
  layers:[{ shapeSettings:{ dashArray:’1,2’ } }]
});
maps.appendTo(‘#container’)
Shape Opacity Not Applicable Property: layers.shapeSettings.opacity

var maps = new ej.maps.Maps({
  layers:[{ shapeSettings:{ opacity:’0.5’ } }]
});
maps.appendTo(‘#container’)
Range Color Mapping Property: layers.shapeSettings.colorMappings.rangeColorMapping

$(“#container”).ejMap({
  layers:[{ shapeSettings:{ colorMappings:{ rangeColorMapping:[{ from:’10’, to:’40’, color: “#D84444” }] } } }]
})		 Property: layers.shapeSettings.colorMapping

var maps = new ej.maps.Maps({
  layers:[{ shapeSettings:{ colorMapping:[{ from:10, to; 30, color: “#D84444” }] } }]
});
maps.appendTo(‘#container’)
Equal Color Mapping Property: layers.shapeSettings.colorMappings.equalColorMapping

$(“#container”).ejMap({
  layers:[{ shapeSettings:{ colorMappings:{ equalColorMapping:[{ { value: “Romney”, color: “#D84444” } }] } } }]
})		 Property: layers.shapeSettings.colorMapping

var maps = new ej.maps.Maps({
  layers:[{ shapeSettings:{ colorMapping: [{ value: ‘Romney’, color: ‘#D84444’ }] } }]
});
maps.appendTo(‘#container’)

Marker Customization

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

$(“#container”).ejMap({
  layers:[{ markers:[{ “Name”: “USA”, “latitude”: 38.8833, “longitude”: -77.0167 }] }]
})		 Property: layers.markerSettings.dataSource

var maps = new ej.maps.Maps({
  layers:[{ markerSettings:{ dataSource: [{ “Name”: “USA”, “latitude”: 38.8833, “longitude”: -77.0167 }] } }]
});
maps.appendTo(‘#container’)
Marker Template Property: layers.markerTemplate

$(“#container”).ejMap({
  layers:[{ markerTemplate:”Template” }]
})		 Property: layers.markerSettings.template

var maps = new ej.maps.Maps({
  layers:[{ markerSettings:{ template:’Template’ } }]
});
maps.appendTo(‘#container’)
Marker Visible Not Applicable Property: layers.markerSettings.visible

var maps = new ej.maps.Maps({
  layers:[{ markerSettings:{ visible:true } }]
});
maps.appendTo(‘#container’)
Marker Fill Not Applicable Property: layers.markerSettings.fill

var maps = new ej.maps.Maps({
  layers:[{ markerSettings:{ fill:’#FF471A’ } }]
});
maps.appendTo(‘#container’)
Marker Height Not Applicable Property: layers.markerSettings.height

var maps = new ej.maps.Maps({
  layers:[{ markerSettings:{ height:20 } }]
});
maps.appendTo(‘#container’)
Marker Width Not Applicable Property: layers.markerSettings.width

var maps = new ej.maps.Maps({
  layers:[{ markerSettings:{ width:20 } }]
});
maps.appendTo(‘#container’)
Marker Shape Not Applicable Property: layers.markerSettings.shape

var maps = new ej.maps.Maps({
  layers:[{ markerSettings:{ shape:’Balloon’ } }]
});
maps.appendTo(‘#container’)
Marker ImageURL Not Applicable Property: layers.markerSettings.imageUrl

var maps = new ej.maps.Maps({
  layers:[{ markerSettings:{ imageUrl:’http://js.syncfusion.com/demos/web/Images/map/pin.png’ } }]
});
maps.appendTo(‘#container’)
Marker Opacity Not Applicable Property: layers.markerSettings.opacity

var maps = new ej.maps.Maps({
  layers:[{ markerSettings:{ opacity:0.5 } }]
});
maps.appendTo(‘#container’)
Marker Legend Text Not Applicable Property: layers.markerSettings.legendText

var maps = new ej.maps.Maps({
  layers:[{ markerSettings:{ legendText:’China’ } }]
});
maps.appendTo(‘#container’)
Marker Offset Not Applicable Property: layers.markerSettings.offset

var maps = new ej.maps.Maps({
  layers:[{ markerSettings:{ offset:new Point(20, 20) } }]
});
maps.appendTo(‘#container’)
Marker Animation Duration Not Applicable Property: layers.markerSettings.animationDuration

var maps = new ej.maps.Maps({
  layers:[{ markerSettings:{ animationDuration:2000 } }]
});
maps.appendTo(‘#container’)
Marker Animation Delay Not Applicable Property: layers.markerSettings.animationDelay

var maps = new ej.maps.Maps({
  layers:[{ markerSettings:{ animationDelay:100 } }]
});
maps.appendTo(‘#container’)
Marker DashArray Not Applicable Property: layers.markerSettings.dashArray

var maps = new ej.maps.Maps({
  layers:[{ markerSettings:{ dashArray:’2,3’ } }]
});
maps.appendTo(‘#container’)
Marker Selection Not Applicable Property: layers.markerSettings.selectionSettings

var maps = new ej.maps.Maps({
  layers:[{ markerSettings:{
     selectionSettings : { enable:true,fill:’#D2691E’,opacity:1,enableMultiSelect:false }
}]
});
maps.appendTo(‘#container’)
Marker Highlight Not Applicable Property: layers.markerSettings.highlightSettings

var maps = new ej.maps.Maps({
  layers:[{ markerSettings:{
     highlightSettings : { enable:true,fill:’#D2691E’,opacity:1 }
}]
});
maps.appendTo(‘#container’)
Marker Tooltip Not Applicable Property: layers.markerSettings.tooltipSettings

var maps = new ej.maps.Maps({
  layers:[{ markerSettings:{
     tooltipSettings : { visible:true,fill:’#363F4C’,template:’TooltipTemplate’, valuePath:’State’, format:’${State}
${District}’ }
}]
});
maps.appendTo(‘#container’)

Bubble Customization

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

$(“#container”).ejMap({
  layers:[{ bubbleSettings: { showBubble:true } }]
})		 Property: layers.bubbleSettings.visible

var maps = new ej.maps.Maps({
  layers:[{ bubbleSettings:{ visible:true }]
});
maps.appendTo(‘#container’)
ValuePath Property: layers.bubbleSettings.valuePath

$(“#container”).ejMap({
  layers:[{ bubbleSettings: { valuePath:’Population’ } }]
})		 Property: layers.bubbleSettings.valuePath

var maps = new ej.maps.Maps({
  layers:[{ bubbleSettings:{ valuePath:’Population’ }]
});
maps.appendTo(‘#container’)
MinValue Property: layers.bubbleSettings.minValue

$(“#container”).ejMap({
  layers:[{ bubbleSettings: { minValue:20 } }]
})		 Property: layers.bubbleSettings.minRadius

var maps = new ej.maps.Maps({
  layers:[{ bubbleSettings:{ minRadius:10 }]
});
maps.appendTo(‘#container’)
MaxValue Property: layers.bubbleSettings.maxValue

$(“#container”).ejMap({
  layers:[{ bubbleSettings: { maxValue:30 } }]
})		 Property: layers.bubbleSettings.maxRadius

var maps = new ej.maps.Maps({
  layers:[{ bubbleSettings:{ maxRadius:20 }]
});
maps.appendTo(‘#container’)
Bubble Type Not Applicable Property: layers.bubbleSettings.bubbleType

var maps = new ej.maps.Maps({
  layers:[{ bubbleSettings:{ bubbleType:’Circle’ }]
});
maps.appendTo(‘#container’)
Color Property: layers.bubbleSettings.color

$(“#container”).ejMap({
  layers:[{ bubbleSettings: { color:’green’ } }]
})		 Property: layers.bubbleSettings.fill

var maps = new ej.maps.Maps({
  layers:[{ bubbleSettings:{ fill:’red’ }]
});
maps.appendTo(‘#container’)
Opacity Property: layers.bubbleSettings.bubbleOpacity

$(“#container”).ejMap({
  layers:[{ bubbleSettings: { bubbleOpacity:0.5 } }]
})		 Property: layers.bubbleSettings.opacity

var maps = new ej.maps.Maps({
  layers:[{ bubbleSettings:{ opacity:0.5 }]
});
maps.appendTo(‘#container’)
Color Value Path Property: layers.bubbleSettings.colorValuePath

$(“#container”).ejMap({
  layers:[{ bubbleSettings: { colorValuePath:’Population’ } }]
})		 Property: layers.bubbleSettings.colorValuePath

var maps = new ej.maps.Maps({
  layers:[{ bubbleSettings:{ colorValuePath:’Population’ }]
});
maps.appendTo(‘#container’)
Enable Tooltip Property: layers.bubbleSettings.showTooltip

$(“#container”).ejMap({
  layers:[{ bubbleSettings: { showTooltip:true } }]
})		 Property: layers.bubbleSettings.tooltipSettings.visible

var maps = new ej.maps.Maps({
  layers:[{ bubbleSettings:{
     tooltipSettings : { visible:true }
}]
});
maps.appendTo(‘#container’)
Tooltip Template Property: layers.bubbleSettings.tooltipTemplate

$(“#container”).ejMap({
  layers:[{ bubbleSettings: { tooltipTemplate:’Template’ } }]
})		 Property: layers.bubbleSettings.tooltipSettings.template

var maps = new ej.maps.Maps({
  layers:[{ bubbleSettings:{
     tooltipSettings : { template:’TooltipTemplate’ }
}]
});
maps.appendTo(‘#container’)
Bubble Selection Not Applicable Property: layers.bubbleSettings.selectionSettings

var maps = new ej.maps.Maps({
  layers:[{ bubbleSettings:{
     selectionSettings : { enable:true,fill:’#D2691E’,opacity:1,enableMultiSelect:false }
}]
});
maps.appendTo(‘#container’)
Bubble Highlight Not Applicable Property: layers.bubbleSettings.highlightSettings

var maps = new ej.maps.Maps({
  layers:[{ bubbleSettings:{
     highlightSettings : { enable:true,fill:’#D2691E’,opacity:1 }
}]
});
maps.appendTo(‘#container’)
Range Color Mapping Property: layers.bubbleSettings.colorMappings.rangeColorMapping

$(“#container”).ejMap({
  layers:[{ bubbleSettings:{ colorMappings:{ rangeColorMapping:[{ from:’10’, to:’40’, color: “#D84444” }] } } }]
})		 Property: layers.bubbleSettings.colorMapping

var maps = new ej.maps.Maps({
  layers:[{ bubbleSettings:{ colorMapping:[{ from:10, to; 30, color: “#D84444” }] } }]
});
maps.appendTo(‘#container’)
Equal Color Mapping Property: layers.bubbleSettings.colorMappings.equalColorMapping

$(“#container”).ejMap({
  layers:[{ bubbleSettings:{ colorMappings:{ equalColorMapping:[{ { value: “Romney”, color: “#D84444” } }] } } }]
})		 Property: layers.bubbleSettings.colorMapping

var maps = new ej.maps.Maps({
  layers:[{ bubbleSettings:{ colorMapping: [{ value: ‘Romney’, color: ‘#D84444’ }] } }]
});
maps.appendTo(‘#container’)

DataLabel Customization

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

$(“#container”).ejMap({
  layers:[{ labelSettings: { showLabels:true } }]
})		 Property: layers.dataLabelSettings.visible

var maps = new ej.maps.Maps({
  layers:[{ dataLabelSettings:{ visible:true }]
});
maps.appendTo(‘#container’)
Label Path Property: layers.labelSettings.labelPath

$(“#container”).ejMap({
  layers:[{ labelSettings: { labelPath:’Continent’ } }]
})		 Property: layers.dataLabelSettings.labelPath

var maps = new ej.maps.Maps({
  layers:[{ dataLabelSettings:{ labelPath:’Continent’ }]
});
maps.appendTo(‘#container’)
Enable Smart Label Property: layers.labelSettings.enableSmartLabel

$(“#container”).ejMap({
  layers:[{ labelSettings: { enableSmartLabel:true } }]
})		 Not Applicable
Smart Label Size Property: layers.labelSettings.smartLabelSize

$(“#container”).ejMap({
  layers:[{ labelSettings: { smartLabelSize:20 } }]
})		 Not Applicable
Label Length Property: layers.labelSettings.labelLength

$(“#container”).ejMap({
  layers:[{ labelSettings: { labelLength:20 } }]
})		 Not Applicable
Opacity Not Applicable Property: layers.dataLabelSettings.opacity

var maps = new ej.maps.Maps({
  layers:[{ dataLabelSettings:{ opacity:0.5 }]
});
maps.appendTo(‘#container’)
Smart Label Mode Not Applicable Property: layers.dataLabelSettings.smartLabelMode

var maps = new ej.maps.Maps({
  layers:[{ dataLabelSettings:{ smartLabelMode:’Trim’ }]
});
maps.appendTo(‘#container’)
InterSectAction Not Applicable Property: layers.dataLabelSettings.intersectionAction

var maps = new ej.maps.Maps({
  layers:[{ dataLabelSettings:{ intersectionAction:’Trim’ }]
});
maps.appendTo(‘#container’)
Template Not Applicable Property: layers.dataLabelSettings.template

var maps = new ej.maps.Maps({
  layers:[{ dataLabelSettings:{ template:’LabelTemplate’ }]
});
maps.appendTo(‘#container’)

Legend Customization

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

$(“#container”).ejMap({
  layers:[{ legendSettings: { showLegend:true } }]
})		 Property: legendSettings.visible

var maps = new ej.maps.Maps({
  legendSettings: { visible:true }}
});
maps.appendTo(‘#container’)
Toggle Visibility Property: layers.legendSettings.toggleVisibility

$(“#container”).ejMap({
  layers:[{ legendSettings: { toggleVisibility:true } }]
})		 Property: legendSettings.toggleVisibility

var maps = new ej.maps.Maps({
  legendSettings: { toggleVisibility:true }}
});
maps.appendTo(‘#container’)
Legend Location X Property: layers.legendSettings.positionX

$(“#container”).ejMap({
  layers:[{ legendSettings: { positionX:250 } }]
})		 Property: legendSettings.location

var maps = new ej.maps.Maps({
  legendSettings: { location:new Point(250,0) }}
});
maps.appendTo(‘#container’)
Legend Location Y Property: layers.legendSettings.positionY

$(“#container”).ejMap({
  layers:[{ legendSettings: { positionY:350 } }]
})		 Property: legendSettings.location

var maps = new ej.maps.Maps({
  legendSettings: { location:new Point(0,350)}}
});
maps.appendTo(‘#container’)
Legend Type Property: layers.legendSettings.type

$(“#container”).ejMap({
  layers:[{ legendSettings: { type:’Layers’ }}]
})		 Property: legendSettings.type

var maps = new ej.maps.Maps({
  legendSettings: { type:’Layers’}}
});
maps.appendTo(‘#container’)
Label Orientation Property: layers.legendSettings.labelOrientation

$(“#container”).ejMap({
  layers:[{ legendSettings: { labelOrientation:’Vertical’ }}
})		 Not Applicable
Legend Title Property: layers.legendSettings.title

$(“#container”).ejMap({
  layers:[{ legendSettings: { title:’Union territories of India’ } }
})		 Property: legendSettings.title

var maps = new ej.maps.Maps({
  legendSettings: { title:’Union territories of India’}}
});
maps.appendTo(‘#container’)
Legend Mode Property: layers.legendSettings.mode

$(“#container”).ejMap({
  layers:[{ legendSettings: { mode:’Default’ } }]
})		 Property: legendSettings.mode

var maps = new ej.maps.Maps({
  legendSettings: { mode:’Default’}}
});
maps.appendTo(‘#container’)
Legend Position Property: layers.legendSettings.position

$(“#container”).ejMap({
  layers:[{ legendSettings: { position:’TopLeft’ }}]
})		 Property: legendSettings.position

var maps = new ej.maps.Maps({
  legendSettings: { position:’Top’}}
});
maps.appendTo(‘#container’)
Legend DockOnMap Property: layers.legendSettings.dockOnMap

$(“#container”).ejMap({
  layers:[{ legendSettings: { dockOnMap:true } }
})		 Not Applicable
Legend Alignment Property: layers.legendSettings.dockPosition

$(“#container”).ejMap({
  layers:[{ legendSettings: { dockPosition:’Right’ } }]
})		 Property: legendSettings.alignment

var maps = new ej.maps.Maps({
  legendSettings: { alignment:’Center’}}
});
maps.appendTo(‘#container’)
Legend Left Label Property: layers.legendSettings.leftLabel

$(“#container”).ejMap({
  layers:[{ legendSettings: { leftLabel:’1000M’ } }
})		 Not Applicable
Legend Right Label Property: layers.legendSettings.rightLabel

$(“#container”).ejMap({
  layers:[{ legendSettings: { rightLabel:’3000M’ } }]
})		 Not Applicable
Legend Shape Property: layers.legendSettings.icon

$(“#container”).ejMap({
  layers:[{ legendSettings: { icon:’Circle’ } }]
})		 Property: legendSettings.shape

var maps = new ej.maps.Maps({
  legendSettings: { shape:’Circle’}}
});
maps.appendTo(‘#container’)
Legend Shape Height Property: layers.legendSettings.iconHeight

$(“#container”).ejMap({
  layers:[{ legendSettings: { iconHeight: 20 } }]
})		 Property: legendSettings.shapeHeight

var maps = new ej.maps.Maps({
  legendSettings: { shapeHeight:20 }}
});
maps.appendTo(‘#container’)
Legend Shape Width Property: layers.legendSettings.iconWidth

$(“#container”).ejMap({
  layers:[{ legendSettings: { iconWidth: 20 } }
})		 Property: legendSettings.shapeWidth

var maps = new ej.maps.Maps({
  legendSettings: { shapeWidth:20 }}
});
maps.appendTo(‘#container’)
Height Property: layers.legendSettings.height

$(“#container”).ejMap({
  layers:[{ legendSettings: { height: 50 } }]
})		 Property: legendSettings.width

var maps = new ej.maps.Maps({
  legendSettings: { height:’50’ }}
});
maps.appendTo(‘#container’)
Width Property: layers.legendSettings.width

$(“#container”).ejMap({
  layers:[{ legendSettings: { width: 150 } }]
})		 Property: legendSettings.width

var maps = new ej.maps.Maps({
  legendSettings: { width:’150’ }}
});
maps.appendTo(‘#container’)
Show Labels Property: layers.legendSettings.showLabels

$(“#container”).ejMap({
  layers:[{ legendSettings: { showLabels: true } }]
})		 Not Applicable
Background Not Applicable Property: legendSettings.background

var maps = new ej.maps.Maps({
  legendSettings: { background:’transparent’ }}
});
maps.appendTo(‘#container’)
Label Position Not Applicable Property: legendSettings.labelPosition

var maps = new ej.maps.Maps({
  legendSettings: { labelPosition:’After’ }}
});
maps.appendTo(‘#container’)
Label Display Mode Not Applicable Property: legendSettings.labelDisplayMode

var maps = new ej.maps.Maps({
  legendSettings: { labelDisplayMode:’Trim’ }}
});
maps.appendTo(‘#container’)
Label Display Mode Not Applicable Property: legendSettings.labelDisplayMode

var maps = new ej.maps.Maps({
  legendSettings: { labelDisplayMode:’Trim’ }}
});
maps.appendTo(‘#container’)
Legend Orientation Not Applicable Property: legendSettings.orientation

var maps = new ej.maps.Maps({
  legendSettings: { orientation:’Horizontal’ }}
});
maps.appendTo(‘#container’)
Legend Item Fill Not Applicable Property: legendSettings.fill

var maps = new ej.maps.Maps({
  legendSettings: { fill:’red’ }}]
});
maps.appendTo(‘#container’)
Legend Shape Padding Not Applicable Property: legendSettings.shapePadding

var maps = new ej.maps.Maps({
  legendSettings: { shapePadding:20 }}
});
maps.appendTo(‘#container’)
Legend Shape Border Color Not Applicable Property: legendSettings.shapeBorder.color

var maps = new ej.maps.Maps({
  legendSettings: { shapeBorder:{ color:’green’ } }}
});
maps.appendTo(‘#container’)
Legend Shape Border Width Not Applicable Property: legendSettings.shapeBorder.width

var maps = new ej.maps.Maps({
  legendSettings: { shapeBorder:{ width:2 } }}
});
maps.appendTo(‘#container’)
Inverter Pointer Not Applicable Property: legendSettings.invertedPointer

var maps = new ej.maps.Maps({
  legendSettings: { invertedPointer: true }}
});
maps.appendTo(‘#container’)
Item Text Style Not Applicable Property: legendSettings.textStyle

var maps = new ej.maps.Maps({
  legendSettings: { textStyle: { size:’12px’ } }}
});
maps.appendTo(‘#container’)
Title Style Not Applicable Property: legendSettings.textStyle

var maps = new ej.maps.Maps({
  legendSettings: { textStyle: { size:’12px’ } }}
});
maps.appendTo(‘#container’)

Zooming Customization

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

var maps = new ej.maps.Maps({
  zoomSettings:{ enable:true }
});
maps.appendTo(‘#container’)
Minimum Zoom Property: zoomSettings.minValue

$(“#container”).ejMap({
  zoomSettings:{ minValue:2 }
});		 Property: zoomSettings.minZoom

var maps = new ej.maps.Maps({
  zoomSettings:{ minZoom:2 }
});
maps.appendTo(‘#container’)
Maximum Zoom Property: zoomSettings.maxValue

$(“#container”).ejMap({
  zoomSettings:{ maxValue:50 }
});		 Property: zoomSettings.maxZoom

var maps = new ej.maps.Maps({
  zoomSettings:{ maxZoom:5 }
});
maps.appendTo(‘#container’)
Mouse Wheel Zoom Property: zoomSettings.enableMouseWheelZoom

$(“#container”).ejMap({
  zoomSettings:{ enableMouseWheelZoom:true }
});		 Property: zoomSettings.maxZoom

var maps = new ej.maps.Maps({
  zoomSettings:{ mouseWheelZoom:true }
});
maps.appendTo(‘#container’)
Double Click Zoom Not Applicable Property: zoomSettings.doubleClickZoom

var maps = new ej.maps.Maps({
  zoomSettings:{ doubleClickZoom:true }
});
maps.appendTo(‘#container’)
Pinch Zoom Not Applicable Property: zoomSettings.pinchZooming

var maps = new ej.maps.Maps({
  zoomSettings:{ pinchZooming:true }
});
maps.appendTo(‘#container’)
Single Click Zoom Property: zoomSettings.enableZoomOnSelection

$(“#container”).ejMap({
  zoomSettings:{ enableZoomOnSelection:true }
});		 Property: zoomSettings.zoomOnClick

var maps = new ej.maps.Maps({
  zoomSettings:{ zoomOnClick:true }
});
maps.appendTo(‘#container’)
Zoom Factor Property: zoomSettings.factor

$(“#container”).ejMap({
  zoomSettings:{ factor:2 }
});		 Property: zoomSettings.zoomFactor

var maps = new ej.maps.Maps({
  zoomSettings:{ zoomFactor:2 }
});
maps.appendTo(‘#container’)
Toolbars Not Applicable Property: zoomSettings.toolbars

var maps = new ej.maps.Maps({
  zoomSettings:{ toolbars:[‘ZoomIn’] }
});
maps.appendTo(‘#container’)
Toolbar Orientation Not Applicable Property: zoomSettings.toolBarOrientation

var maps = new ej.maps.Maps({
  zoomSettings:{ toolBarOrientation:’Horizontal’ }
});
maps.appendTo(‘#container’)
Toolbar Vertical Alignment Not Applicable Property: zoomSettings.verticalAlignment

var maps = new ej.maps.Maps({
  zoomSettings:{ verticalAlignment:’Center’ }
});
maps.appendTo(‘#container’)
Toolbar Horizontal Alignment Not Applicable Property: zoomSettings.horizontalAlignment

var maps = new ej.maps.Maps({
  zoomSettings:{ horizontalAlignment:’Center’ }
});
maps.appendTo(‘#container’)
Toolbar Highlight Color Not Applicable Property: zoomSettings.highlightColor

var maps = new ej.maps.Maps({
  zoomSettings:{ highlightColor:’#e61576’ }
});
maps.appendTo(‘#container’)
Toolbar Selection Color Not Applicable Property: zoomSettings.selectionColor

var maps = new ej.maps.Maps({
  zoomSettings:{ selectionColor:’#e61576’ }
});
maps.appendTo(‘#container’)
Toolbar Fill Color Not Applicable Property: zoomSettings.color

var maps = new ej.maps.Maps({
  zoomSettings:{ color:’#e61576’ }
});
maps.appendTo(‘#container’)

Highlight And Selection Customization

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

$(“#container”).ejMap({
  layers:{ shapeSettings:{ highlightColor:’green’ } }
});		 Property: fill

var maps = new ej.maps.Maps({
  layers:[{ highlightSettings:{ fill:’green’ }}]
});
maps.appendTo(‘#container’)
Enable Highlight Property: layers.enableMouseHover

$(“#container”).ejMap({
  layers:{ enableMouseHover:true }
});		 Property: enable

var maps = new ej.maps.Maps({
  layers:[{ highlightSettings:{ enable:true }}]
});
maps.appendTo(‘#container’)
Highlight Border Color Property: layers.shapeSettings.highlightStroke

$(“#container”).ejMap({
  layers:{ shapeSettings:{ highlightStroke:’red’ } }
});		 Property: layers.highlightSettings.border.color

var maps = new ej.maps.Maps({
 layers:[{ highlightSettings:{ border:{ color: ‘green’} }}]
});
maps.appendTo(‘#container’)
Highlight Border Width Property: layers.shapeSettings.highlightBorderWidth

$(“#container”).ejMap({
  layers:{ shapeSettings:{ highlightBorderWidth:’2’ } }
});		 Property: layers.highlightSettings.border.width

var maps = new ej.maps.Maps({
  layers:[{ highlightSettings:{ border:{ width: 2 } }}]
});
maps.appendTo(‘#container’)
Highlight Opacity Not Applicable Property: layers.layers.highlightSettings.opacity

var maps = new ej.maps.Maps({
  layers:[{ highlightSettings:{ opacity: 0.5 }}]
});
maps.appendTo(‘#container’)
Selection Fill Property: layers.shapeSettings.selectionColor

$(“#container”).ejMap({
  layers:{ shapeSettings:{ selectionColor:’blue’ } }
});		 Property: layers.selectionSettings.fill

var maps = new ej.maps.Maps({
  layers:[{selectionSettings:{ fill:’#D2691E’ }}]
});
maps.appendTo(‘#container’)
Selection Enable Property: layers.enableSelection

$(“#container”).ejMap({
  layers:{ enableSelection:true }
});		 Property: layers.selectionSettings.enable

var maps = new ej.maps.Maps({
  layers:[{selectionSettings:{ enable:true }}]
});
maps.appendTo(‘#container’)
Selection Border Width Property: layers.selectionSettings.selectionStrokeWidth

$(“#container”).ejMap({
  layers:{ selectionSettings:{ selectionStrokeWidth:’2’ }
});		 Property: layers.selectionSettings.border.width

var maps = new ej.maps.Maps({
  layers:[{selectionSettings:{ border:{ width:2 } }}]
});
maps.appendTo(‘#container’)
Selection Border Color Property: layers.selectionSettings.selectionStroke

$(“#container”).ejMap({
  layers:{ layers:[{selectionSettings:{ selectionStroke:’red’ }}]
});		 Property: layers.selectionSettings.border.color

var maps = new ej.maps.Maps({
  ;layers:[{selectionSettings:{ border:{ color:’blue’ } }}]
});
maps.appendTo(‘#container’)
Selection Opacity Not Applicable Property: layers.selectionSettings.opacity

var maps = new ej.maps.Maps({
  layers:[{selectionSettings:{ opacity:2 }}]
});
maps.appendTo(‘#container’)
Behavior API in Essential JS 1 API in Essential JS 2
Visible Not Applicable Property: layers.navigationLineSettings.visible

var maps = new ej.maps.Maps({
 layers:[{ navigationLineSettings:{ visible:true } }]
});
maps.appendTo(‘#container’)
Width Not Applicable Property: layers.navigationLineSettings.width

var maps = new ej.maps.Maps({
 layers:[{ navigationLineSettings:{ width:2 } }]
});
maps.appendTo(‘#container’)
Longitude Not Applicable Property: layers.navigationLineSettings.longitude

var maps = new ej.maps.Maps({
 layers:[{ navigationLineSettings:{ longitude: [-97.8717041015625, -89.6649169921875] } }]
});
maps.appendTo(‘#container’)
Latitude Not Applicable Property: layers.navigationLineSettings.latitude

var maps = new ej.maps.Maps({
 layers:[{ navigationLineSettings:{ latitude: [22.403410892712124, 21.282336521195344] } }]
});
maps.appendTo(‘#container’)
DashArray Not Applicable Property: layers.navigationLineSettings.dashArray

var maps = new ej.maps.Maps({
 layers:[{ navigationLineSettings:{ dashArray:”1,2” } }]
});
maps.appendTo(‘#container’)
Color Not Applicable Property: layers.navigationLineSettings.color

var maps = new ej.maps.Maps({
 layers:[{ navigationLineSettings:{ color:”green” } }]
});
maps.appendTo(‘#container’)
Angle Not Applicable Property: layers.navigationLineSettings.angle

var maps = new ej.maps.Maps({
 layers:[{ navigationLineSettings:{ angle:180 } }]
});
maps.appendTo(‘#container’)
Arrow Position Not Applicable Property: layers.navigationLineSettings.arrow.position

var maps = new ej.maps.Maps({
 layers:[{ navigationLineSettings:{ arrow:{ position:”start” } } }]
});
maps.appendTo(‘#container’)
Show Arrow Not Applicable Property: layers.navigationLineSettings.arrow.showArrow

var maps = new ej.maps.Maps({
 layers:[{ navigationLineSettings:{ arrow:{ showArrow:true } } }]
});
maps.appendTo(‘#container’)
Arrow size Not Applicable Property: layers.navigationLineSettings.arrow.size

var maps = new ej.maps.Maps({
 layers:[{ navigationLineSettings:{ arrow:{ size:2 } } }]
});
maps.appendTo(‘#container’)
Arrow Color Not Applicable Property: layers.navigationLineSettings.arrow.color

var maps = new ej.maps.Maps({
 layers:[{ navigationLineSettings:{ arrow:{ color:’red’ } } }]
});
maps.appendTo(‘#container’)
Arrow Offset Not Applicable Property: layers.navigationLineSettings.arrow.offSet

var maps = new ej.maps.Maps({
 layers:[{ navigationLineSettings:{ arrow:{ offSet:10 } } }]
});
maps.appendTo(‘#container’)

Tooltip Customization

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

$(“#container”).ejMap({
  layers:{ layers:[{ showTooltip: true }]
});		 Property: layers.tooltipSettings.visible

var maps = new ej.maps.Maps({
 layers:[{ tooltipSettings:{ visible: true }]
});
maps.appendTo(‘#container’)
Tooltip Template Property: layers.tooltipTemplate

$(“#container”).ejMap({
  layers:{ layers:[{ tooltipTemplate: “Template” }]
});		 Property: layers.tooltipSettings.visible

var maps = new ej.maps.Maps({
 layers:[{ tooltipSettings:{ visible: true }]
});
maps.appendTo(‘#container’)
Value Path Not Applicable Property: layers.tooltipSettings.valuePath

var maps = new ej.maps.Maps({
  layers:[{ tooltipSettings:{ valuePath:’Population’ }]
});
maps.appendTo(‘#container’)
Format Not Applicable Property: layers.tooltipSettings.format

var maps = new ej.maps.Maps({
  layers:[{ tooltipSettings:{ format:’${State}
${Population}’ }]
});
maps.appendTo(‘#container’)
Border Color Not Applicable Property: layers.tooltipSettings.border.color

var maps = new ej.maps.Maps({
  layers:[{ tooltipSettings:{ border :{ color:’red’ } }]
});
maps.appendTo(‘#container’)
Border Width Not Applicable Property: layers.tooltipSettings.border.width

var maps = new ej.maps.Maps({
  layers:[{ tooltipSettings:{ border :{ width:’’ } }]
});
maps.appendTo(‘#container’)
Text Style Not Applicable Property: layers.tooltipSettings.textStyle

var maps = new ej.maps.Maps({
  layers:[{ tooltipSettings:{ textStyle: { size:’15px’, color:’red’, fontFamily:’arial’, fontWeight:’bold’, fontStyle:’normal’, opacity:0.8 }}]
});
maps.appendTo(‘#container’)

Annotation Cutomization

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

var maps = new ej.maps.Maps({
  annotations: { content:’<div>USA Population 2018</div>’ }}
});
maps.appendTo(‘#container’)
Location X Not Applicable Property: legendSettings.annotations.x

var maps = new ej.maps.Maps({
  annotations: { x:’250px’ }}
});
maps.appendTo(‘#container’)
Location Y Not Applicable Property: legendSettings.annotations.y

var maps = new ej.maps.Maps({
  annotations: { y:’150px’ }}
});
maps.appendTo(‘#container’)
Vertical Alignment Not Applicable Property: legendSettings.annotations.verticalAlignment

var maps = new ej.maps.Maps({
  annotations: { verticalAlignment:’Center’ }}
});
maps.appendTo(‘#container’)
Horizontal Alignment Not Applicable Property: legendSettings.annotations.horizontalAlignment

var maps = new ej.maps.Maps({
  annotations: { horizontalAlignment:’Center’ }}
});
maps.appendTo(‘#container’)
Zindex Not Applicable Property: legendSettings.annotations.zIndex

var maps = new ej.maps.Maps({
  annotations: { zIndex:’-1’ }}
});
maps.appendTo(‘#container’)

Maps Other Properties Customization

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

var maps = new ej.maps.Maps({
  projectionType: ‘Mercator’
});
maps.appendTo(‘#container’)
Background Property: background

$(“#container”).ejMap({
  background:’red’
});		 Property: background

var maps = new ej.maps.Maps({
  background: ‘red’
});
maps.appendTo(‘#container’)
Enable Group Separator Property: enableGroupSeparator

$(“#container”).ejMap({
  enableGroupSeparator:true
});		 Property: useGroupingSeparator

var maps = new ej.maps.Maps({
  useGroupingSeparator: true
});
maps.appendTo(‘#container’)
Base Layer Index Property: baseMapIndex

$(“#container”).ejMap({
  baseMapIndex:0
});		 Property: baseLayerIndex

var maps = new ej.maps.Maps({
  baseLayerIndex: 0
});
maps.appendTo(‘#container’)
locale Property: locale

$(“#container”).ejMap({
  locale:’en-us’
});		 Not Applicable
Responsive Property: isResponsive

$(“#container”).ejMap({
  isResponsive:true
});		 Not Applicable
Enable Pan Property: enablePan

$(“#container”).ejMap({
  enablePan:true
});		 Not Applicable
Enable Navigation Property: navigationControl.enableNavigation

$(“#container”).ejMap({
  navigationControl:{ enableNavigation:true }
});		 Not Applicable
Navigation Orientation Property: navigationControl.orientation

$(“#container”).ejMap({
  navigationControl:{ orientation:’vertical’ }
});		 Not Applicable
Navigation Dock Position Property: navigationControl.dockPosition

$(“#container”).ejMap({
  navigationControl:{ dockPosition:’centerleft’ }
});		 Not Applicable
Navigation Absolute Position Property: navigationControl.absolutePosition

$(“#container”).ejMap({
  navigationControl:{ absolutePosition:{ x: 100, y : 100 } }
});		 Not Applicable
Dragging Selection Property: draggingOnSelection

$(“#container”).ejMap({
  draggingOnSelection : true
});		 Not Applicable
Resize Property: enableResize

$(“#container”).ejMap({
  enableResize : true
});		 Not Applicable
Enable Animation Property: enableAnimation

$(“#container”).ejMap({
  enableAnimation : true
});		 Not Applicable
Enable Layer Animation Property: enableLayerChangeAnimation

$(“#container”).ejMap({
  enableLayerChangeAnimation : true
});		 Not Applicable
Center Position Property: centerPosition

$(“#container”).ejMap({
  centerPosition:[90.52734374999999,30.41078179084589]
});		 Property: centerPosition

var maps = new ej.maps.Maps({
  centerPosition:{ latitude: 30.41078179084589,longitude: 90.52734374999999 }
});
maps.appendTo(‘#container’)

Events

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

$(“#container”).ejMap({
  shapeSelected:’MapShapeSelected’
});		 Property: shapeSelected

var maps = new ej.maps.Maps({
  shapeSelected:’MapShapeSelected’
});
maps.appendTo(‘#container’)
Marker Selected Property: markerSelected

$(“#container”).ejMap({
  markerSelected:’MapMarkerSelected’
});		 Property: markerClick

var maps = new ej.maps.Maps({
  markerClick:’MapMarkerSelected’
});
maps.appendTo(‘#container’)
Marker Move Property: markerEnter

$(“#container”).ejMap({
  markerEnter:’MapMarkerMove’
});		 Property: markerMouseMove

var maps = new ej.maps.Maps({
  markerMouseMove:’MapMarkerMove’
});
maps.appendTo(‘#container’)
Marker Leave Property: markerLeave

$(“#container”).ejMap({
  markerLeave:’MapMarkerLeave’
});		 Not Applicable
Legend Item Rendering Property: legendItemRendering

$(“#container”).ejMap({
  legendItemRendering:’MapLegendItemRendering’
});		 Not Applicable
Display Text Rendering Property: displayTextRendering

$(“#container”).ejMap({
  displayTextRendering:’MapDisplayTextRendering’
});		 Property: dataLabelRendering

var maps = new ej.maps.Maps({
  dataLabelRendering:’MapDataLabelRendering’
});
maps.appendTo(‘#container’)
Legend Item Click Property: legendItemClick

$(“#container”).ejMap({
  legendItemClick:’MapLegendItemClick’
});		 Not Applicable
Bubble Rendering Property: bubbleRendering

$(“#container”).ejMap({
  bubbleRendering:’MapBubbleRendering’
});		 Property: bubbleRendering

var maps = new ej.maps.Maps({
  bubbleRendering:’MapBubbleRendering’
});
maps.appendTo(‘#container’)
Shape Rendering Property: shapeRendering

$(“#container”).ejMap({
  shapeRendering:’MapShapeRendering’
});		 Property: shapeRendering

var maps = new ej.maps.Maps({
  shapeRendering:’MapShapeRendering’
});
maps.appendTo(‘#container’)
Zoomed In Property: zoomedIn

$(“#container”).ejMap({
  zoomedIn:’MapZooming’
});		 Not Applicable
Render Completed Property: onRenderComplete

$(“#container”).ejMap({
  onRenderComplete:’MapRenderCompleted’
});		 Property: loaded

var maps = new ej.maps.Maps({
  loaded:’MapRenderCompleted’
});
maps.appendTo(‘#container’)
Panned Property: panned

$(“#container”).ejMap({
  panned:’MapPanned’
});		 Not Applicable
zoomed Out Property: zoomedOut

$(“#container”).ejMap({
  zoomedOut:’MapZoomedOut’
});		 Not Applicable
Mouse Over Property: mouseover

$(“#container”).ejMap({
  mouseover:’MapMouseOver’
});		 Not Applicable
Mouse Leave Property: mouseleave

$(“#container”).ejMap({
  mouseover:’MapMouseLeave’
});		 Not Applicable
Click Property: click

$(“#container”).ejMap({
  click:’ClickOnMap’
});		 Property: click

var maps = new ej.maps.Maps({
  click:’ClickOnMap’
});
maps.appendTo(‘#container’)
Double Click Property: doubleClick

$(“#container”).ejMap({
  doubleClick:’DoubleClickOnMap’
});		 Property: doubleClick

var maps = new ej.maps.Maps({
  doubleClick:’DoubleClickOnMap’
});
maps.appendTo(‘#container’)
Right Click Property: rightClick

$(“#container”).ejMap({
  rightClick:’RightClickOnMap’
});		 Property: rightClick

var maps = new ej.maps.Maps({
  rightClick:’RightClickOnMap’
});
maps.appendTo(‘#container’)
Initial Load Property: onLoad

$(“#container”).ejMap({
  onLoad:’loadOnMap’
});		 Property: load

var maps = new ej.maps.Maps({
  load:’loadOnMap’
});
maps.appendTo(‘#container’)
Before Print Not Applicable Property: beforePrint

var maps = new ej.maps.Maps({
  beforePrint:’MapBeforePrint’
});
maps.appendTo(‘#container’)
Resize Not Applicable Property: resize

var maps = new ej.maps.Maps({
  resize:’ResizeOnMap’
});
maps.appendTo(‘#container’)
Tooltip Render Not Applicable Property: tooltipRender

var maps = new ej.maps.Maps({
  tooltipRender:’MapTooltipRender’
});
maps.appendTo(‘#container’)
Item Selection Not Applicable Property: itemSelection

var maps = new ej.maps.Maps({
  itemSelection:’MapItemSelection’
});
maps.appendTo(‘#container’)
Item Highlight Not Applicable Property: itemHighlight

var maps = new ej.maps.Maps({
  itemHighlight:’MapItemHighlight’
});
maps.appendTo(‘#container’)
Shape Highlight Not Applicable Property: shapeHighlight

var maps = new ej.maps.Maps({
  shapeHighlight:’MapShapeHighlight’
});
maps.appendTo(‘#container’)
Layer Rendering Not Applicable Property: layerRendering

var maps = new ej.maps.Maps({
  layerRendering:’MapLayerRendering’
});
maps.appendTo(‘#container’)
Marker Rendering Not Applicable Property: markerRendering

var maps = new ej.maps.Maps({
  markerRendering:’MapMarkerRendering’
});
maps.appendTo(‘#container’)
Bubble Mouse Move Not Applicable Property: bubbleMouseMove

var maps = new ej.maps.Maps({
  bubbleMouseMove:’MouseMoveOnBubble’
});
maps.appendTo(‘#container’)
Bubble Mouse Move Not Applicable Property: annotationRendering

var maps = new ej.maps.Maps({
  annotationRendering:’MapAnnotationRendering’
});
maps.appendTo(‘#container’)
Animation Complete Not Applicable Property: animationComplete

var maps = new ej.maps.Maps({
  animationComplete:’MapAnimationComplete’
});
maps.appendTo(‘#container’)