Contents
- Size Customization
- Title and Subtitle Customization
- Layer Customization
- Shape Customization
- Marker Customization
- Bubble Customization
- DataLabel Customization
- Legend Customization
- Zooming Customization
- Highlight And Selection Customization
- Navigation Line Customization
- Tooltip Customization
- Annotation Cutomization
- Maps Other Properties Customization
- Events
Having trouble getting help?
Contact Support
Contact Support
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’) |
Navigation Line Customization
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’) |