This article describes the API migration process of Maps component from Essential JS 1 to Essential JS 2.
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’); |
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’); |
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’) |
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’) |
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’) |
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’) |
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’) |
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’) |
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’) |
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’) |
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’) |
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:’ USA Population 2018 ’ }] }); 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’) |
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’) |
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’) |