Ej1 api migration in EJ2 TypeScript Maps control

25 Dec 202424 minutes to read

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

Size Customization

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

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’ }]
});		 To render shape maps, there is no need to mention the layer type. You can use the shapeData property alone.
Property: layers.shapeData

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

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

let maps: Maps = new Maps({
  layers:[{ urlTemplate:’http://a.tile.openstreetmap.org/level/tileX/tileY.png’
  }]
});
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’ }]
});		 There is no need to mention the type of Bing Maps. The type of Bing Maps will be available in the URL that you mention in the getBingUrlTemplate method.
Property: getBingUrlTemplate

let maps: Maps = new Maps({
  load: function(args){
  args.maps.getBingUrlTemplate(“https://dev.virtualearth.net/REST/V1/Imagery/Metadata/Aerial?output=json&uriScheme=https&key=?”).then(function(url) {
args.maps.layers[0].urlTemplate= url;
});},
 layers:[{
 }]
});
maps.appendTo(‘#container’)
Bing Map key Property: layers.key

$(“#container”).ejMap({
  layers:[{ key:’’ }]
});		 There is no need to mention the key for the online maps. The key will be available in the URL that you mention in the urlTemplate property. For Bing Maps, the key will be available in the URL that you mention in the getBingUrlTemplate method.
Property: getBingUrlTemplate

let maps: Maps = new Maps({
  load: function(args){
  args.maps.getBingUrlTemplate(“https://dev.virtualearth.net/REST/V1/Imagery/Metadata/Aerial?output=json&uriScheme=https&key=?”).then(function(url) {
args.maps.layers[0].urlTemplate= url;
});
},
  layers:[{
 }]
});
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.toolbarSettings.buttonSettings.toolbarItems

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

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

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

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

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

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

let maps: Maps = new Maps({
  zoomSettings:{ toolbarSettings:{ buttonSettings: { 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’)