Ej1 api migration in EJ2 TypeScript 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

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

let maps: Maps = new 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: titleSettings.text

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

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

let maps: Maps = new Maps({
  titleSettings:{ alignment : ‘Center’ }
});
maps.appendTo(‘#container’);
Subtitle alignment Not Applicable Property: titleSettings.subtitleSettings.alignment

let maps: Maps = new 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

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

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

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

let maps: Maps = new Maps({
  layers:[{ visible:true }]
});
maps.appendTo(‘#container’)
Bing map type Property: layers.bingMapType

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

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

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

let maps: Maps = new 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

let maps: Maps = new 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

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

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

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

let data: DataManager = new DataManager({ url: ‘’ });
let maps: Maps = new Maps({
  layers:[{ query: new Query() }]
});
maps.appendTo(‘#container’)
Shape data path Property: layers.shapeDataPath

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

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

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

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

let maps: Maps = new 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

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

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

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

let maps: Maps = new 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

let maps: Maps = new 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

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

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

let maps: Maps = new 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

let maps: Maps = new 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

let maps: Maps = new 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

let maps: Maps = new 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

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

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

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

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

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

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

let maps: Maps = new Maps({
  layers:[{
    markerSettings:[{
      imageUrl:’https://ej2.syncfusion.com/home/’
    }]
  }]
});
maps.appendTo(‘#container’)
Marker opacity Not Applicable Property: layers.markerSettings.opacity

let maps: Maps = new Maps({
  layers:[{ markerSettings:[{ opacity:0.5 }] }]
});
maps.appendTo(‘#container’)
Marker legend text Not Applicable Property: layers.markerSettings.legendText

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

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

let maps: Maps = new Maps({
  layers:[{ markerSettings:[{ animationDuration:2000 }] }]
});
maps.appendTo(‘#container’)
Marker animation delay Not Applicable Property: layers.markerSettings.animationDelay

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

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

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

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

let maps: Maps = new 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

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

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

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

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

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

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

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

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

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

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

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

let maps: Maps = new 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

let maps: Maps = new 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

let maps: Maps = new 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

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

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

let maps: Maps = new 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

let maps: Maps = new 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

let maps: Maps = new 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

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

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

let maps: Maps = new 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

let maps: Maps = new Maps({
  layers:[{ dataLabelSettings:{ opacity:0.5 }]
});
maps.appendTo(‘#container’)
Smart label mode Not Applicable Property: layers.dataLabelSettings.smartLabelMode

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

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

let maps: Maps = new 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

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

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

let maps: Maps = new Maps({
  legendSettings: { toggleVisibility:true,
  toggleLegendSettings: { visible : true } }
});
maps.appendTo(‘#container’)
Legend location X Property: layers.legendSettings.positionX

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

let maps: Maps = new 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

let maps: Maps = new 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

let maps: Maps = new 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

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

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

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

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

let maps: Maps = new 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

let maps: Maps = new 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

let maps: Maps = new Maps({
  legendSettings: { shape:’Circle’ }
});
maps.appendTo(‘#container’)
Legend shape height Property: layers.legendSettings.iconHeight

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

let maps: Maps = new Maps({
  legendSettings: { shapeHeight:20 }
});
maps.appendTo(‘#container’)
Legend shape width Property: layers.legendSettings.iconWidth

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

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

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

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

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

let maps: Maps = new 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

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

let maps: Maps = new Maps({
  legendSettings: { labelPosition:’After’ }
});
maps.appendTo(‘#container’)
Label display mode Not Applicable Property: legendSettings.labelDisplayMode

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

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

let maps: Maps = new Maps({
  legendSettings: { fill:’red’ }]
});
maps.appendTo(‘#container’)
Legend shape padding Not Applicable Property: legendSettings.shapePadding

let maps: Maps = new Maps({
  legendSettings: { shapePadding:20 }
});
maps.appendTo(‘#container’)
Legend shape border color Not Applicable Property: legendSettings.shapeBorder.color

let maps: Maps = new Maps({
  legendSettings: { shapeBorder:{ color:’green’ } }
});
maps.appendTo(‘#container’)
Legend shape border width Not Applicable Property: legendSettings.shapeBorder.width

let maps: Maps = new Maps({
  legendSettings: { shapeBorder:{ width:2 } }
});
maps.appendTo(‘#container’)
Inverted pointer Not Applicable Property: legendSettings.invertedPointer

let maps: Maps = new Maps({
  legendSettings: { invertedPointer: true }
});
maps.appendTo(‘#container’)
Item text style Not Applicable Property: legendSettings.textStyle

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

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

Zooming Customization

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

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

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

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

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

let maps: Maps = new Maps({
  zoomSettings:{ maxZoom:5 }
});
maps.appendTo(‘#container’)
Mouse wheel zoom Property: zoomSettings.enableMouseWheelZoom

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

let maps: Maps = new Maps({
  zoomSettings:{ mouseWheelZoom:true }
});
maps.appendTo(‘#container’)
Double click zoom Not Applicable Property: zoomSettings.doubleClickZoom

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

let maps: Maps = new Maps({
  zoomSettings:{ pinchZooming:true }
});
maps.appendTo(‘#container’)
Single click zoom Property: zoomSettings.enableZoomOnSelection

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

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

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

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

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

let maps: Maps = new Maps({
  zoomSettings:{ toolBarOrientation:’Horizontal’ }
});
maps.appendTo(‘#container’)
Toolbar vertical alignment Not Applicable Property: zoomSettings.verticalAlignment

let maps: Maps = new Maps({
  zoomSettings:{ verticalAlignment:’Center’ }
});
maps.appendTo(‘#container’)
Toolbar horizontal alignment Not Applicable Property: zoomSettings.horizontalAlignment

let maps: Maps = new Maps({
  zoomSettings:{ horizontalAlignment:’Center’ }
});
maps.appendTo(‘#container’)
Toolbar highlight color Not Applicable Property: zoomSettings.highlightColor

let maps: Maps = new Maps({
  zoomSettings:{ highlightColor:’#e61576’ }
});
maps.appendTo(‘#container’)
Toolbar selection color Not Applicable Property: zoomSettings.selectionColor

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

let maps: Maps = new 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: layers.highlightSettings.fill

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

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

let maps: Maps = new 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

let maps: Maps = new 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

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

let maps: Maps = new 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

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

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

let maps: Maps = new 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

let maps: Maps = new 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

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

let maps: Maps = new 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

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

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

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

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

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

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

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

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

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

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

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

let maps: Maps = new Maps({
 layers:[{ navigationLineSettings:[{ arrowSettings:{ 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

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

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

let maps: Maps = new Maps({
 layers:[{ tooltipSettings:{ template: ‘#tooltipTemplate’ } }]
});
maps.appendTo(‘#container’)
Value path Not Applicable Property: layers.tooltipSettings.valuePath

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

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

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

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

let maps: Maps = new 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

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

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

let maps: Maps = new Maps({
  annotations: [{ y:’150px’ }]
});
maps.appendTo(‘#container’)
Vertical alignment Not Applicable Property: legendSettings.annotations.verticalAlignment

let maps: Maps = new Maps({
  annotations: [{ verticalAlignment:’Center’ }]
});
maps.appendTo(‘#container’)
Horizontal alignment Not Applicable Property: legendSettings.annotations.horizontalAlignment

let maps: Maps = new Maps({
  annotations: [{ horizontalAlignment:’Center’ }]
});
maps.appendTo(‘#container’)
Z index Not Applicable Property: legendSettings.annotations.zIndex

let maps: Maps = new 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

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

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

let maps: Maps = new Maps({
  background: ‘red’
});
maps.appendTo(‘#container’)
Enable group separator Property: enableGroupSeparator

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

let maps: Maps = new Maps({
  useGroupingSeparator: true
});
maps.appendTo(‘#container’)
Base layer index Property: baseMapIndex

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

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

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

let maps: Maps = new Maps({
  locale: ‘en-US’
});
maps.appendTo(‘#container’)
Responsive Property: isResponsive

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

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

let maps: Maps = new Maps({
  zoomSettings:{ enablePanning: true }
});
maps.appendTo(‘#container’)
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

let maps: Maps = new 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

let maps: Maps = new Maps({
  shapeSelected: (args: IShapeSelectedEventArgs): void => { }
});
maps.appendTo(‘#container’)
Marker selected Property: markerSelected

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

let maps: Maps = new Maps({
  markerClick: (args: IMarkerClickEventArgs): void => { }
});
maps.appendTo(‘#container’)
Marker move Property: markerEnter

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

let maps: Maps = new Maps({
  markerMouseMove: (args: IMarkerMoveEventArgs): void => { }
});
maps.appendTo(‘#container’)
Marker leave Property: markerLeave

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

$(“#container”).ejMap({
  legendItemRendering:’MapLegendItemRendering’
});
Property: legendRendering

let maps: Maps = new Maps({
  legendRendering: (args: ILayerRenderingEventArgs): void => { }
});
maps.appendTo(‘#container’)
Display text rendering Property: displayTextRendering

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

let maps: Maps = new Maps({
  dataLabelRendering: (args: ILabelRenderingEventArgs): void => { }
});
maps.appendTo(‘#container’)
Legend item click Property: legendItemClick

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

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

let maps: Maps = new Maps({
  bubbleRendering: (args: IBubbleRenderingEventArgs): void => { }
});
maps.appendTo(‘#container’)
Shape rendering Property: shapeRendering

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

let maps: Maps = new Maps({
  shapeRendering: (args: IShapeRenderingEventArgs): void => { }
});
maps.appendTo(‘#container’)
Zoomed in Property: zoomedIn

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

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

let maps: Maps = new Maps({
  loaded: (args: ILoadedEventArgs): void => { }
});
maps.appendTo(‘#container’)
Panned Property: panned

$(“#container”).ejMap({
  panned:’MapPanned’
});
Property: pan

let maps: Maps = new Maps({
  pan: (args: IMapPanEventArgs): void => {}
});
maps.appendTo(‘#container’)
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

let maps: Maps = new Maps({
  click: (args: IMouseEventArgs): void => {}
});
maps.appendTo(‘#container’)
Double click Property: doubleClick

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

let maps: Maps = new Maps({
  doubleClick: (args: IMouseEventArgs): void => { }
});
maps.appendTo(‘#container’)
Right click Property: rightClick

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

let maps: Maps = new Maps({
  rightClick: (args: IMouseEventArgs): void => { }
});
maps.appendTo(‘#container’)
Initial load Property: onLoad

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

let maps: Maps = new Maps({
  load: (args: ILoadedEventArgs): void => { }
});
maps.appendTo(‘#container’)
Before print Not Applicable Property: beforePrint

let maps: Maps = new Maps({
  beforePrint: (args: IPrintEventArgs): void => { }
});
maps.appendTo(‘#container’)
Resize Not Applicable Property: resize

let maps: Maps = new Maps({
  resize: (args: IResizeEventArgs): void => { }
});
maps.appendTo(‘#container’)
Tooltip render Not Applicable Property: tooltipRender

let maps: Maps = new Maps({
  tooltipRender: (args: ITooltipRenderEventArgs): void => { }
});
maps.appendTo(‘#container’)
Item selection Not Applicable Property: itemSelection

let maps: Maps = new Maps({
  itemSelection: (args: ISelectionEventArgs): void => { }
});
maps.appendTo(‘#container’)
Item highlight Not Applicable Property: itemHighlight

let maps: Maps = new Maps({
  itemHighlight: (args: ISelectionEventArgs): void => { }
});
maps.appendTo(‘#container’)
Shape highlight Not Applicable Property: shapeHighlight

let maps: Maps = new Maps({
  shapeHighlight: (args: IShapeSelectedEventArgs): void => { }
});
maps.appendTo(‘#container’)
Layer rendering Not Applicable Property: layerRendering

let maps: Maps = new Maps({
  layerRendering: (args: ILayerRenderingEventArgs): void => { }
});
maps.appendTo(‘#container’)
Marker rendering Not Applicable Property: markerRendering

let maps: Maps = new Maps({
  markerRendering: (args: IMarkerRenderingEventArgs): void => { }
});
maps.appendTo(‘#container’)
Bubble mouse move Not Applicable Property: bubbleMouseMove

let maps: Maps = new Maps({
  bubbleMouseMove: (args: IBubbleMoveEventArgs): void => { }
});
maps.appendTo(‘#container’)
Bubble mouse move Not Applicable Property: annotationRendering

let maps: Maps = new Maps({
  annotationRendering: (args: IAnnotationRenderingEventArgs): void => { }
});
maps.appendTo(‘#container’)
Animation complete Not Applicable Property: animationComplete

let maps: Maps = new Maps({
  animationComplete: (args: IAnimationCompleteEventArgs): void => { }
});
maps.appendTo(‘#container’)