Ej1 api migration in React Maps component

20 Jan 202324 minutes to read

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

Size Customization

Behavior API in Essential JS 1 API in Essential JS 2
Height Not Applicable Property: height
<MapsComponent id='maps' height="150"></MapsComponent>,

document.getElementById('maps');
Width Not Applicable Property: width
<MapsComponent id='maps' width="150"></MapsComponent>,

document.getElementById('maps');

Title and Subtitle Customization

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

<MapsComponent id='maps' ref={m => this.mapInstance = m} titleSettings = {{text:'Members of the UN Security Council'}}></MapsComponent>,

document.getElementById('maps');
Subtitle Text Not Applicable Property: title.subtitle.text

<MapsComponent id='maps' ref={m => this.mapInstance = m} titleSettings = {{ subtitleSettings:{ text:'In 2017'} }}></MapsComponent>,

document.getElementById('maps');
Title Alignment Not Applicable Property: title.alignment

<MapsComponent id='maps' ref={m => this.mapInstance = m} titleSettings = {{text:'Members of the UN Security Council', alignment: 'Center'}}></MapsComponent>,
Subtitle Alignment Not Applicable Property: title.subtitle.alignment

<MapsComponent id='maps' ref={m => this.mapInstance = m} titleSettings = {{ subtitleSettings:{ text:'In 2017', alignment: 'Center'} }}></MapsComponent>,

document.getElementById('maps');

Zooming Customization

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

var zoomSettings = { enableZoom:true};
<EJ.Map id="maps" zoomSettings = {zoomSettings} > </EJ.Map>
document.getElementById('maps'); 		Property: zoomSettings.enable

<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={{ enable: true }}>
<Inject services={[Zoom]} />
</MapsComponent>,

document.getElementById('maps');
Minimum Zoom Property: zoomSettings.minValue

var zoomSettings = { minValue:2};
<EJ.Map id="maps" zoomSettings = {zoomSettings} > </EJ.Map>
document.getElementById('maps'); 		Property: zoomSettings.minZoom

<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={{ minZoom: 2 }}>
<Inject services={[Zoom]} />
</MapsComponent>,

document.getElementById('maps');
Maximum Zoom Property: zoomSettings.maxValue

var zoomSettings = { maxValue:2};
<EJ.Map id="maps" zoomSettings = {zoomSettings} > </EJ.Map>
document.getElementById('maps'); 		Property: zoomSettings.maxZoom

<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={{ maxZoom: 2 }}>
<Inject services={[Zoom]} />
</MapsComponent>,

document.getElementById('maps');
Mouse Wheel Zoom Property: zoomSettings.enableMouseWheelZoom

var zoomSettings = { enableMouseWheelZoom:true};
<EJ.Map id="maps" zoomSettings = {zoomSettings} > </EJ.Map>
document.getElementById('maps'); 		Property: zoomSettings.mouseWheelZoom

<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={{ mouseWheelZoom: true }}>
<Inject services={[Zoom]} />
</MapsComponent>,

document.getElementById('maps');
Double Click Zoom Not Applicable Property: zoomSettings.doubleClickZoom

<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={{ doubleCLickZoom: true }}>
<Inject services={[Zoom]} />
</MapsComponent>,

document.getElementById('maps');
Pinch Zoom Not Applicable Property: zoomSettings.pinchZooming

<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={ pinchZooming: true }>
<Inject services={[Zoom]} />
</MapsComponent>,

document.getElementById('maps');
Single Click Zoom Property: zoomSettings.enableZoomOnSelection

var zoomSettings = { enableZoomOnSelection:true};
<EJ.Map id="maps" zoomSettings = {zoomSettings} > </EJ.Map>
document.getElementById('maps'); 		Property: zoomSettings.zoomOnClick

<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={{ zoomOnClick: true }}>
<Inject services={[Zoom]} />
</MapsComponent>,

document.getElementById('maps');
Zoom Factor Property: zoomSettings.factor

var zoomSettings = { factor:2};
<EJ.Map id="maps" zoomSettings = {zoomSettings} > </EJ.Map>
document.getElementById('maps'); 		Property: zoomSettings.zoomFactor

<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={{ zoomFactor: 2 }}>
<Inject services={[Zoom]} />
</MapsComponent>,

document.getElementById('maps');
Toolbars Not Applicable Property: zoomSettings.toolbars

<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={{ toolbars: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset'] }}>
<Inject services={[Zoom]} />
</MapsComponent>,

document.getElementById('maps');
Toolbar Orientation Not Applicable Property: zoomSettings.toolBarOrientation

<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={{ toolBarOrientation: 'Horizontal' }}>
<Inject services={[Zoom]} />
</MapsComponent>,

document.getElementById('maps');
Toolbar Vertical Alignment Not Applicable Property: zoomSettings.verticalAlignment

<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={{ verticalAlignment: 'Center' }}>
<Inject services={[Zoom]} />
</MapsComponent>,

document.getElementById('maps');
Toolbar Horizontal Alignment Not Applicable Property: zoomSettings.horizontalAlignment

<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={{ horizontalAlignment: 'Center' }}>
<Inject services={[Zoom]} />
</MapsComponent>,

document.getElementById('maps');
Toolbar Highlight Color Not Applicable Property: zoomSettings.highlightColor

<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={{ highlightColor: '#e61576' }}>
<Inject services={[Zoom]} />
</MapsComponent>,

document.getElementById('maps');
Toolbar Selection Color Not Applicable Property: zoomSettings.selectionColor

<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={{ selectionColor: '#e61576' }}>
<Inject services={[Zoom]} />
</MapsComponent>,

document.getElementById('maps');
Toolbar Fill Color Not Applicable Property: zoomSettings.color

<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={{ color: '#e61576' }}>
<Inject services={[Zoom]} />
</MapsComponent>,

document.getElementById('maps');

Layer Customization

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

<MapsComponent id='maps'>
<LayersDirective> <LayerDirective type="Layer"> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Layer Type Property: layers.layerType

var layers = [{ layerType:'Geometry'}];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.layerType

<MapsComponent id='maps'>
<LayersDirective> <LayerDirective layerType="Geometry"> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Visible Not Applicable Property: layers.visible

<MapsComponent id='maps'>
<LayersDirective> <LayerDirective visible="true"> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Bing Map Type Property: layers.bingMapType

var layers = [{ bingMapType:'Aerial'}];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.bingMapType

<MapsComponent id='maps'>
<LayersDirective> <LayerDirective bingMapType="Aerial"> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Bing Map Key Property: layers.key

var layers = [{ key:''}];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.key

<MapsComponent id='maps'>
<LayersDirective> <LayerDirective key=''> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
URL Template Property: layers.urltemplate

var layers = [{ urltemplate:'http://a.tile.openstreetmap.org/level/tileX/tileY.png'}];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.urlTemplate

<MapsComponent id='maps'>
<LayersDirective> <LayerDirective urlTemplate='http://a.tile.openstreetmap.org/level/tileX/tileY.png'> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Shape Data Property: layers.shapeData

var layers = [{ shapeData:world_map}];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.shapeData

<MapsComponent id='maps'>
<LayersDirective> <LayerDirective shapeData={world_map}> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Data Source Property: layers.dataSource

var layers = [{ dataSource:population_density}];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.dataSource

<MapsComponent id='maps'>
<LayersDirective> <LayerDirective dataSource={population_density}> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Query Not Applicable Property: layers.query

<MapsComponent id='maps'>
<LayersDirective> <LayerDirective query=''> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Shape Data Path Property: layers.shapeDataPath

var layers = [{ shapeDataPath:"name"}];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.shapeDataPath

<MapsComponent id='maps'>
<LayersDirective> <LayerDirective shapeDataPath='name'> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Shape Property Path Property: layers.shapePropertyPath

var layers = [{ shapePropertyPath:"name"}];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.shapePropertyPath

<MapsComponent id='maps'>
<LayersDirective> <LayerDirective shapePropertyPath='name'> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Layer Animation Not Applicable Property: layers.animationDuration

<MapsComponent id='maps'>
<LayersDirective> <LayerDirective animationDuration={500}> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');

Shape Customization

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

var layers = [{ shapeSettings:{fill:"#626171"}];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.shapeSettings.fill

<MapsComponent id='maps'>
<LayersDirective> <LayerDirective shapeSettings={{ fill:'#626171' }}> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Shape Palette Property: layers.shapeSettings.colorPalette

var layers = [{ shapeSettings:{colorPalette:"customPalette", customPalette: ["#E51400", "#A4C400"] }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.shapeSettings.palette

<MapsComponent id='maps'>
<LayersDirective> <LayerDirective palette=''> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Shape Point Radius Not Applicable Property: layers.shapeSettings.circleRadius

<MapsComponent id='maps'>
<LayersDirective> <LayerDirective shapeSettings={{ circleRadius:'10' }}> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Shape Color Value Path Property: layers.shapeSettings.colorValuePath

var layers = [{ shapeSettings:{colorValuePath:"Candidate"}];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.shapeSettings.colorValuePath

<MapsComponent id='maps'>
<LayersDirective> <LayerDirective shapeSettings={{ colorValuePath:'color' }}> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Shape Value Path Property: layers.shapeSettings.valuePath

var layers = [{ shapeSettings:{valuePath:"population"}];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.shapeSettings.valuePath

<MapsComponent id='maps'>
<LayersDirective> <LayerDirective shapeSettings={{ valuePath:'population' }}> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Shape DashArray Not Applicable Property: layers.shapeSettings.dashArray

<MapsComponent id='maps'>
<LayersDirective> <LayerDirective shapeSettings={{ dashArray:'1,2' }}> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Shape Opacity Not Applicable Property: layers.shapeSettings.opacity

<MapsComponent id='maps'>
<LayersDirective> <LayerDirective shapeSettings={{ opacity: 0.5 }}> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Range Color Mapping Property: layers.shapeSettings.colorMappings.rangeColorMapping

var layers = [{ shapeSettings:{valuePath:"population", enableGradient: true, colorMappings:{rangeColorMapping:[{from:50000,to:10000,gradientColors:["red","green"]}]}}];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.shapeSettings.colorMapping

<MapsComponent id='maps'>
<LayersDirective> <LayerDirective shapeSettings={{ colorValuePath: 'density',
colorMapping:[{ from:0.00001, to:100, color:'rgb(153,174,214)' }]
}}> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Equal Color Mapping Property: layers.shapeSettings.colorMappings.equalColorMapping

var layers = [{ shapeSettings:{colorValuePath:"Candidate", enableGradient: true, colorMappings:{equalColorMapping:[{value:"Trump",color:"red"}]}}];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.shapeSettings.colorMapping

<MapsComponent id='maps'>
<LayersDirective> <LayerDirective shapeSettings={{ colorValuePath: 'Candidate',
colorMapping:[{ value:'Trump', color:'#D84444' }]
}}> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');

Marker Customization

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

var markers = [{ latitude:37.0000, longitude: -120.000, city:"california"}]
var layers = [{ markers:markers }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.markerSettings.dataSource

<MapsComponent id='maps'>
<Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective dataSource={ topPopulation }> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Marker Template Property: layers.markerTemplate

<div> //... </div>
var layers = [{ markerTemplate:'template' }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.markerSettings.template

<MapsComponent id='maps'>
<Inject services={[Marker]} /> <LayersDirective> <LayerDirective> </LayerDirective> <MarkersDirective> <MarkerDirective template='<div id="marker1"><img style="height:30px;width:30px;display:block; margin: auto;" src="path"/></div>'> </MarkerDirective> </MarkersDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Marker Visible Not Applicable Property: layers.markerSettings.visible

<MapsComponent id='maps'>
<Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective visible={ true }> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Marker Fill Not Applicable Property: layers.markerSettings.fill

<MapsComponent id='maps'>
<Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective fill= 'white'> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Marker Height Not Applicable Property: layers.markerSettings.height

<MapsComponent id='maps'>
<Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective height= {20}> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Marker Width Not Applicable Property: layers.markerSettings.width

<MapsComponent id='maps'>
<Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective width= {20}> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Marker Shape Not Applicable Property: layers.markerSettings.shape

<MapsComponent id='maps'>
<Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective shape='Circle'> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Marker ImageURL Not Applicable Property: layers.markerSettings.imageUrl

<MapsComponent id='maps'>
<Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective imageUrl='http://js.syncfusion.com/demos/web/Images/map/pin.png'> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Marker Opacity Not Applicable Property: layers.markerSettings.opacity

<MapsComponent id='maps'>
<Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective opacity={ 0.5 }> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Marker Legend Text Not Applicable Property: layers.markerSettings.legendText

<MapsComponent id='maps'>
<Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective legendText='China'> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Marker Offset Not Applicable Property: layers.markerSettings.offset

<MapsComponent id='maps'>
<Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective offset={ 10 }> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Marker Animation Duration Not Applicable Property: layers.markerSettings.animationDuration

<MapsComponent id='maps'>
<Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective animationDuration={ 500 }> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Marker Animation Delay Not Applicable Property: layers.markerSettings.animationDelay

<MapsComponent id='maps'>
<Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective animationDelay={ 100 }> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Marker DashArray Not Applicable Property: layers.markerSettings.dashArray

<MapsComponent id='maps'>
<Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective dashArray={ 1,2 }> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Marker Selection Not Applicable Property: layers.markerSettings.selectionSettings

<MapsComponent id='maps'>
<Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective selectionSettings={ enable : true, fill : '#D2691E', opacity : 0.5,enableMultiSelect=false }> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Marker Highlight Not Applicable Property: layers.markerSettings.highlightSettings

<MapsComponent id='maps'>
<Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective highlightSettings={ enable : true, fill : '#D2691E', opacity : 0.5 }> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Marker Tooltip Not Applicable Property: layers.markerSettings.tooltipSettings

<MapsComponent id='maps'>
<Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective tooltipSettings={ visible : true, fill : '#363F4C', valuePath :"State", template = '<div> //... </div>' }> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');

Bubble Customization

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

var layers = [{ bubbleSettings:{ showBubble: true} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.bubbleSettings.visible

<MapsComponent id='maps'>
<Inject services={[Bubble]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective visible={ true }> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
ValuePath Property: layers.bubbleSettings.valuePath

var layers = [{ bubbleSettings:{ valuePath: "population"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.bubbleSettings.valuePath

<MapsComponent id='maps'>
<Inject services={[Bubble]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective valuePath='value'> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
MinValue Property: layers.bubbleSettings.minValue

var layers = [{ bubbleSettings:{ minValue: "20"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.bubbleSettings.minRadius

<MapsComponent id='maps'>
<Inject services={[Bubble]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective minRadius={ 10 }> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
MaxValue Property: layers.bubbleSettings.maxValue

var layers = [{ bubbleSettings:{ maxValue: "20"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.bubbleSettings.maxRadius

<MapsComponent id='maps'>
<Inject services={[Bubble]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective maxRadius={ 20 }> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Bubble Type Not Applicable Property: layers.bubbleSettings.bubbleType

<MapsComponent id='maps'>
<Inject services={[Bubble]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective bubbleType='Circle'> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Color Property: layers.bubbleSettings.color

var layers = [{ bubbleSettings:{ color: "red"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.bubbleSettings.fill

<MapsComponent id='maps'>
<Inject services={[Bubble]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective fill='red'> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Opacity Property: layers.bubbleSettings.bubbleOpacity

var layers = [{ bubbleSettings:{ opacity: "0.5"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.bubbleSettings.opacity

<MapsComponent id='maps'>
<Inject services={[Bubble]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective opacity={ 0.5 }> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Color Value Path Property: layers.bubbleSettings.colorValuePath

var layers = [{ bubbleSettings:{ colorValuePath: "Candidate"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.bubbleSettings.colorValuePath

<MapsComponent id='maps'>
<Inject services={[Bubble]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective colorValuePath='color'> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Enable Tooltip Property: layers.bubbleSettings.showTooltip

var layers = [{ bubbleSettings:{ showTooltip: true} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.bubbleSettings.tooltipSettings.visible

<MapsComponent id='maps'>
<Inject services={[Bubble]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective tooltipSettings={ visible:true }> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Tooltip Template Property: layers.bubbleSettings.tooltipTemplate

<div id="template">
// ..
</div>
var layers = [{ bubbleSettings:{ tooltipTemplate: "template"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.bubbleSettings.tooltipSettings.template

<MapsComponent id='maps'>
<Inject services={[Bubble,MapsTooltip]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective tooltipSettings={ template:'<div> //... </div>' }> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Bubble Selection Not Applicable Property: layers.bubbleSettings.selectionSettings

<MapsComponent id='maps'>
<Inject services={[Bubble]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective selectionSettings={ enable : true, fill : '#D2691E', opacity : 0.5,enableMultiSelect=false }> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Bubble Highlight Not Applicable Property: layers.bubbleSettings.highlightSettings

<MapsComponent id='maps'>
<Inject services={[Bubble,MapsTooltip]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective highlightSettings={ enable : true, fill : '#D2691E', opacity : 0.5 }> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Range Color Mapping Property: layers.bubbleSettings.colorMappings.rangeColorMapping

var layers = [{ bubbleSettings:{ colorMappings:{rangeColorMapping:[{from:50000,to:10000,gradientColors:["red","green"]}]} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.bubbleSettings.colorMapping

<MapsComponent id='maps'>
<Inject services={[Bubble]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective colorMapping:[{ from:0.00001, to:100, color:'rgb(153,174,214)' }] > </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Equal Color Mapping Property: layers.bubbleSettings.colorMappings.equalColorMapping

var layers = [{ bubbleSettings:{ colorMappings:{equalColorMapping:[{value:"trump",color:"red"}]} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.bubbleSettings.colorMapping

<MapsComponent id='maps'>
<Inject services={[Bubble]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective colorMapping:[{ value:'Trump', color:'#D84444' }]> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');

DataLabel Customization

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

var layers = [{ labelSettings:{ showLabels: true} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.dataLabelSettings.visible

<MapsComponent id='maps'>
<Inject services={[DataLabel]} /> <LayersDirective> <LayerDirective dataLabelSettings={ visible: true }> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Label Path Property: layers.labelSettings.labelPath

var layers = [{ labelSettings:{ labelPath: "name"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.dataLabelSettings.labelPath

<MapsComponent id='maps'>
<Inject services={[DataLabel]} /> <LayersDirective> <LayerDirective dataLabelSettings={ labelPath: 'name' }> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Enable Smart Label Property: layers.labelSettings.enableSmartLabel

var layers = [{ labelSettings:{ enableSmartLabel: true} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Not Applicable
Smart Label Size Property: layers.labelSettings.smartLabelSize

var layers = [{ labelSettings:{ smartLabelSize: 10} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Not Applicable
Label Length Property: layers.labelSettings.labelLength

var layers = [{ labelSettings:{ labelLength: 10} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Not Applicable
Opacity Not Applicable Property: layers.dataLabelSettings.opacity

<MapsComponent id='maps'>
<Inject services={[DataLabel]} /> <LayersDirective> <LayerDirective dataLabelSettings={ opacity: { 0.5 } }> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Smart Label Mode Not Applicable Property: layers.dataLabelSettings.smartLabelMode

<MapsComponent id='maps'>
<Inject services={[DataLabel]} /> <LayersDirective> <LayerDirective dataLabelSettings={ smartLabelMode: 'Trim' }> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
InterSectAction Not Applicable Property: layers.dataLabelSettings.intersectionAction

<MapsComponent id='maps'>
<Inject services={[DataLabel]} /> <LayersDirective> <LayerDirective dataLabelSettings={ intersectionAction: 'None' }> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');
Template Not Applicable Property: layers.dataLabelSettings.template

<div id="template">
//..
</div>
<MapsComponent id='maps'>
<Inject services={[DataLabel]} /> <LayersDirective> <LayerDirective dataLabelSettings={ template: '<div> //... </div>' }> </LayerDirective> </LayersDirective>
</MapsComponent>,

document.getElementById('maps');

Legend Customization

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

var layers = [{ legendSettings:{ showLegend: true} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: legendSettings.visible

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { visible:true}> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');
Toggle Visibility Property: layers.legendSettings.toggleVisibility

var layers = [{ legendSettings:{ toggleVisibility: true} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: legendSettings.toggleVisibility

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { toggleVisibility:true}> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');
Legend Location X Property: layers.legendSettings.positionX

var layers = [{ legendSettings:{ location: {x:250} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: legendSettings.location

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { location:{ x: 250}}> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');
Legend Location Y Property: layers.legendSettings.positionY

var layers = [{ legendSettings:{ location: {y:350} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: legendSettings.location

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { location:{ y: 350}}> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');
Legend Type Property: layers.legendSettings.type

var layers = [{ legendSettings:{ type:"Layers" }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: legendSettings.type

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { type:'Layers'}> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');
Label Orientation Property: layers.legendSettings.labelOrientation

var layers = [{ legendSettings:{ labelOrientation:"Vertical" }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Not Applicable
Legend Title Property: layers.legendSettings.title

var layers = [{ legendSettings:{ title: "Union territories of India"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: legendSettings.title

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { title:'Union territories of India'}> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');
Legend Mode Property: layers.legendSettings.mode

var layers = [{ legendSettings:{ mode: "Default"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: legendSettings.mode

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { mode:'Default'}> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');
Legend Position Property: layers.legendSettings.position

var layers = [{ legendSettings:{ position: "TopLeft"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: legendSettings.position

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { position:'Top'}> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');
Legend DockOnMap Property: layers.legendSettings.dockOnMap

var layers = [{ legendSettings:{ dockOnMap: true} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Not Applicable
Legend Alignment Property: layers.legendSettings.dockPosition

var layers = [{ legendSettings:{ dockPosition: "Right"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: legendSettings.alignment

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { alignment:'Center'}> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');
Legend Left Label Property: layers.legendSettings.leftLabel

var layers = [{ legendSettings:{ leftLabel: "1000M"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Not Applicable
Legend Right Label Property: layers.legendSettings.rightLabel

var layers = [{ legendSettings:{ rightLabel: "1000M"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Not Applicable
Legend Shape Property: layers.legendSettings.icon

var layers = [{ legendSettings:{ icon: "Circle"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: legendSettings.shape

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { shape:'Circle'}> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');
Legend Shape Height Property: layers.legendSettings.iconHeight

var layers = [{ legendSettings:{ iconHeight: "20"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: legendSettings.shapeHeight

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { shapeHeight:10}> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');
Legend Shape Width Property: layers.legendSettings.iconWidth

var layers = [{ legendSettings:{ iconWidth: "20"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: legendSettings.shapeWidth

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { shapeWidth:20}> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');
Height Property: layers.legendSettings.height

var layers = [{ legendSettings:{ height: "50"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: legendSettings.width

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { height:150}> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');
Width Property: layers.legendSettings.width

var layers = [{ legendSettings:{ width: "50"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: legendSettings.width

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { width:'150'}> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');
Show Labels Property: layers.legendSettings.showLabels

var layers = [{ legendSettings:{ showLabels: true} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Not Applicable
Background Not Applicable Property: legendSettings.background

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { background:'Transparent'}> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');
Label Position Not Applicable Property: legendSettings.labelPosition

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { labelPosition:'After'}> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');
Label Display Mode Not Applicable Property: legendSettings.labelDisplayMode

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { labelDisplayMode:'Trim'}> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');
Legend Orientation Not Applicable Property: legendSettings.orientation

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { legendOrientation:'Horizontal'}> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');
Legend Item Fill Not Applicable Property: legendSettings.fill

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { fill:'red'}> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');
Legend Shape Padding Not Applicable Property: legendSettings.shapePadding

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { shapePadding:20}> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');
Legend Shape Border Color Not Applicable Property: legendSettings.shapeBorder.color

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { shapeBorder: { color:'green'} }> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');
Legend Shape Border Width Not Applicable Property: legendSettings.shapeBorder.width

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { shapeBorder: { width:2}}> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');
Inverter Pointer Not Applicable Property: legendSettings.invertedPointer

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { invertedPointer : true }> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');
Item Text Style Not Applicable Property: legendSettings.textStyle

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { textStyle:{fontWeight:'400' size:'14px'}}> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');
Title Style Not Applicable Property: legendSettings.titleStyle

<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { titleStyle:{fontWeight:'400' size:'14px'}}> <Inject services={[Legend]} /> </MapsComponent>,

document.getElementById('maps');

Highlight And Selection Customization

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

var layers = [{ shapeSettings:{ highlightColor: "green"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: fill

<MapsComponent id='maps'> <LayersDirective> <LayerDirective highlightSettings={ fill:'green'}> <LayerDirective> </LayersDirective> <Inject services={[Highlight]} /> </MapsComponent>,

document.getElementById('maps');
Enable Highlight Property: layers.enableMouseHover

var layers = [{ shapeSettings:{ enableMouseHover: true} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: enable

<MapsComponent id='maps'> <LayersDirective> <LayerDirective highlightSettings={ enable:'true'}> <LayerDirective> </LayersDirective> <Inject services={[Highlight]} /> </MapsComponent>,

document.getElementById('maps');
Highlight Border Color Property: layers.shapeSettings.highlightStroke

var layers = [{ shapeSettings:{ highlightStroke: "red"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.highlightSettings.border.color

<MapsComponent id='maps'> <LayersDirective> <LayerDirective highlightSettings={ border:{color:'red'} }> <LayerDirective> </LayersDirective> <Inject services={[Highlight]} /> </MapsComponent>,

document.getElementById('maps');
Highlight Border Width Property: layers.shapeSettings.highlightBorderWidth

var layers = [{ shapeSettings:{ highlightBorderWidth: "2"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.highlightSettings.border.width

<MapsComponent id='maps'> <LayersDirective> <LayerDirective highlightSettings={ border:{width:2} }> <LayerDirective> </LayersDirective> <Inject services={[Highlight]} /> </MapsComponent>,

document.getElementById('maps');
Highlight Opacity Not Applicable Property: layers.layers.highlightSettings.opacity

<MapsComponent id='maps'> <LayersDirective> <LayerDirective highlightSettings={ opacity:0.5 }> <LayerDirective> </LayersDirective> <Inject services={[Highlight]} /> </MapsComponent>,

document.getElementById('maps');
Selection Fill Property: layers.shapeSettings.selectionColor

var layers = [{ shapeSettings:{ selectionColor: "#D2691E"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.selectionSettings.fill

<MapsComponent id='maps'> <LayersDirective> <LayerDirective selectionSettings={ fill:'#D2691E' }> <LayerDirective> </LayersDirective> <Inject services={[Selection]} /> </MapsComponent>,

document.getElementById('maps');
Selection Enable Property: layers.enableSelection

var layers = [{ shapeSettings:{ enableSelection: true} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.selectionSettings.enable

<MapsComponent id='maps'> <LayersDirective> <LayerDirective selectionSettings={ enable:'true' }> <LayerDirective> </LayersDirective> <Inject services={[Selection]} /> </MapsComponent>,

document.getElementById('maps');
Selection Border Width Property: layers.selectionSettings.selectionStrokeWidth

var layers = [{ shapeSettings:{ selectionStrokeWidth: "2"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.selectionSettings.border.width

<MapsComponent id='maps'> <LayersDirective> <LayerDirective selectionSettings={ border:{width:2} }> <LayerDirective> </LayersDirective> <Inject services={[Selection]} /> </MapsComponent>,

document.getElementById('maps');
Selection Border Color Property: layers.selectionSettings.selectionStroke

var layers = [{ shapeSettings:{ selectionStroke: "red"} }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.selectionSettings.border.color

<MapsComponent id='maps'> <LayersDirective> <LayerDirective selectionSettings={ border:{color:'red'} }> <LayerDirective> </LayersDirective> <Inject services={[Selection]} /> </MapsComponent>,

document.getElementById('maps');
Selection Opacity Not Applicable Property: layers.selectionSettings.opacity

<MapsComponent id='maps'> <LayersDirective> <LayerDirective selectionSettings={ opacity: 0.5 }> <LayerDirective> </LayersDirective> <Inject services={[Highlight]} /> </MapsComponent>,

document.getElementById('maps');
Behavior API in Essential JS 1 API in Essential JS 2
Visible Not Applicable Property: layers.navigationLineSettings.visible

<MapsComponent id='maps'> <LayersDirective> <LayerDirective> <NavigationLinesDirective> <NavigationLineDirective visible= {true}> </NavigationLineDirective> </NavigationLinesDirective> <LayerDirective> </LayersDirective> <Inject services={[NavigationLine]} /> </MapsComponent>,

document.getElementById('maps');
Width Not Applicable Property: layers.navigationLineSettings.width

<MapsComponent id='maps'> <LayersDirective> <LayerDirective> <NavigationLineDirective width= {2}> </NavigationLineDirective> </NavigationLinesDirective> <LayerDirective> </LayersDirective> <Inject services={[NavigationLine]} /> </MapsComponent>,

document.getElementById('maps');
Longitude Not Applicable Property: layers.navigationLineSettings.longitude

<MapsComponent id='maps'> <LayersDirective> <LayerDirective> <NavigationLineDirective longitude={[-74.0060, -51.9253]}> </NavigationLineDirective> </NavigationLinesDirective> <LayerDirective> </LayersDirective> <Inject services={[NavigationLine]} /> </MapsComponent>,

document.getElementById('maps');
Latitude Not Applicable Property: layers.navigationLineSettings.latitude

<MapsComponent id='maps'> <LayersDirective> <LayerDirective> <NavigationLineDirective latitude={[37.6276571, -14.2350]}> </NavigationLineDirective> </NavigationLinesDirective> <LayerDirective> </LayersDirective> <Inject services={[NavigationLine]} /> </MapsComponent>,

document.getElementById('maps');
DashArray Not Applicable Property: layers.navigationLineSettings.dashArray

<MapsComponent id='maps'> <LayersDirective> <LayerDirective> <NavigationLineDirective dashArray={1,2}> </NavigationLineDirective> </NavigationLinesDirective> <LayerDirective> </LayersDirective> <Inject services={[NavigationLine]} /> </MapsComponent>,

document.getElementById('maps');
Color Not Applicable Property: layers.navigationLineSettings.color

<MapsComponent id='maps'> <LayersDirective> <LayerDirective> <NavigationLineDirective color= "black"> </NavigationLineDirective> </NavigationLinesDirective> <LayerDirective> </LayersDirective> <Inject services={[NavigationLine]} /> </MapsComponent>,

document.getElementById('maps');
Angle Not Applicable Property: layers.navigationLineSettings.angle

<MapsComponent id='maps'> <LayersDirective> <LayerDirective> <NavigationLineDirective angle={-180}> </NavigationLineDirective> </NavigationLinesDirective> <LayerDirective> </LayersDirective> <Inject services={[NavigationLine]} /> </MapsComponent>,

document.getElementById('maps');
Arrow Position Not Applicable Property: layers.navigationLineSettings.arrow.position

var arrow = new MapsArrow {
Position="Start"
}
<MapsComponent id='maps'> <LayersDirective> <LayerDirective> <NavigationLineDirective arrow:{position:'Start'}> </NavigationLineDirective> </NavigationLinesDirective> <LayerDirective> </LayersDirective> <Inject services={[NavigationLine]} /> </MapsComponent>,

document.getElementById('maps');
Show Arrow Not Applicable Property: layers.navigationLineSettings.arrow.showArrow

<MapsComponent id='maps'> <LayersDirective> <LayerDirective> <NavigationLineDirective arrow:{showArrow:true}> </NavigationLineDirective> </NavigationLinesDirective> <LayerDirective> </LayersDirective> <Inject services={[NavigationLine]} /> </MapsComponent>,

document.getElementById('maps');
Arrow size Not Applicable Property: layers.navigationLineSettings.arrow.size

<MapsComponent id='maps'> <LayersDirective> <LayerDirective> <NavigationLineDirective arrow:{size:'10px'}> </NavigationLineDirective> </NavigationLinesDirective> <LayerDirective> </LayersDirective> <Inject services={[NavigationLine]} /> </MapsComponent>,

document.getElementById('maps');
Arrow Color Not Applicable Property: layers.navigationLineSettings.arrow.color

<MapsComponent id='maps'> <LayersDirective> <LayerDirective> <NavigationLineDirective arrow:{color:'green'}> </NavigationLineDirective> </NavigationLinesDirective> <LayerDirective> </LayersDirective> <Inject services={[NavigationLine]} /> </MapsComponent>,

document.getElementById('maps');
Arrow Offset Not Applicable Property: layers.navigationLineSettings.arrow.offSet

<MapsComponent id='maps'> <LayersDirective> <LayerDirective> <NavigationLineDirective arrow:{offset:10}> </NavigationLineDirective> </NavigationLinesDirective> </LayerDirective> </LayersDirective> <Inject services={[NavigationLine]} /> </MapsComponent>,

document.getElementById('maps');

Tooltip Customization

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

var layers = [{ shapeSettings:{ showTooltip:true } }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.tooltipSettings.visible

<MapsComponent id='maps'> <LayersDirective tooltipSettings={ visible:true}> <LayerDirective> </LayerDirective> </LayersDirective> <Inject services={[MapsTooltip]} /> </MapsComponent>,

document.getElementById('maps');
Tooltip Template Property: layers.tooltipTemplate

<div id=template>
\\..
</div>
var layers = [{ shapeSettings:{ tooltipTemplate:"template" } }];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		Property: layers.tooltipSettings.template

<MapsComponent id='maps'> <LayersDirective> <LayerDirective tooltipSettings={ template:'<div> //... </div>'}> </LayerDirective> </LayersDirective> <Inject services={[MapsTooltip]} /> </MapsComponent>,

document.getElementById('maps');
Value Path Not Applicable Property: layers.tooltipSettings.valuePath

<MapsComponent id='maps'> <LayersDirective tooltipSettings={ valuePath:'population'}> <LayerDirective> </LayerDirective> </LayersDirective> <Inject services={[MapsTooltip]} /> </MapsComponent>,

document.getElementById('maps');
Format Not Applicable Property: layers.tooltipSettings.format

<MapsComponent id='maps'> <LayersDirective tooltipSettings={ format:'${State} ${Population}'}> <LayerDirective> </LayerDirective> </LayersDirective> <Inject services={[MapsTooltip]} /> </MapsComponent>,

document.getElementById('maps');
Border Color Not Applicable Property: layers.tooltipSettings.border.color

<MapsComponent id='maps'> <LayersDirective tooltipSettings={ border:{color:'red'}}> <LayerDirective> </LayerDirective> </LayersDirective> <Inject services={[MapsTooltip]} /> </MapsComponent>,

document.getElementById('maps');
Border Width Not Applicable Property: layers.tooltipSettings.border.width

<MapsComponent id='maps'> <LayersDirective tooltipSettings={ color:{width:2}}> <LayerDirective> </LayerDirective> </LayersDirective> <Inject services={[MapsTooltip]} /> </MapsComponent>,

document.getElementById('maps');

Annotation Cutomization

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

<div id="template"> //... </div>
<MapsComponent id='maps' ref={m => this.mapInstance = m} annotation = {[content:'#template']}></MapsComponent>,

document.getElementById('maps');
Location X Not Applicable Property: legendSettings.annotations.x

<MapsComponent id='maps' ref={m => this.mapInstance = m} annotation = {[y:'250px']}></MapsComponent>,

document.getElementById('maps');
Location Y Not Applicable Property: legendSettings.annotations.y

<MapsComponent id='maps' ref={m => this.mapInstance = m} annotation = {[x:'250px']}></MapsComponent>,

document.getElementById('maps');
Vertical Alignment Not Applicable Property: legendSettings.annotations.verticalAlignment

<MapsComponent id='maps' ref={m => this.mapInstance = m} annotation = {[verticalAlignnebt:'Center']}></MapsComponent>,

document.getElementById('maps');
Horizontal Alignment Not Applicable Property: legendSettings.annotations.horizontalAlignment

<MapsComponent id='maps' ref={m => this.mapInstance = m} annotation = {[horizontalAlignment:'Center']}></MapsComponent>,

document.getElementById('maps');
Zindex Not Applicable Property: legendSettings.annotations.zIndex

<MapsComponent id='maps' ref={m => this.mapInstance = m} annotation = {[zIndex:2]}></MapsComponent>,

document.getElementById('maps');

Maps Other Properties Customization

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

<MapsComponent id='maps' projectionType='Mercator'></MapsComponent>,

document.getElementById('maps');
Background Property: background

<EJ.Map id="maps" background="red"> </EJ.Map>
document.getElementById('maps'); 		Property: background

<MapsComponent id='maps' background='red'></MapsComponent>,

document.getElementById('maps');
Enable Group Separator Property: enableGroupSeparator

<EJ.Map id="maps" enableGroupSeparator={true} > 		Property: useGroupingSeparator

<MapsComponent id='maps' useGroupingSeparator={true}></MapsComponent>,

document.getElementById('maps');
Base Layer Index Property: baseMapIndex

<EJ.Map id="maps" baseMapIndex={0} > 		Property: baseLayerIndex

<MapsComponent id='maps' baseMapIndex={0}></MapsComponent>,

document.getElementById('maps');
locale Property: locale

<EJ.Map id="maps" locale="" > 		Not Applicable
Responsive Property: isResponsive

<EJ.Map id="maps" isResponsive={true} > 		Not Applicable
Enable Pan Property: enablePan

<EJ.Map id="maps" enablePan={true} > 		Not Applicable
Enable Navigation Property: navigationControl.enableNavigation

var navigationControl ={enableNavigation:true};
<EJ.Map id="maps" navigationControl={navigationControl} > 		Not Applicable
Navigation Orientation Property: navigationControl.orientation

var navigationControl ={orientation:'Horizontal'};
<EJ.Map id="maps" navigationControl={navigationControl} > 		Not Applicable
Navigation Dock Position Property: navigationControl.dockPosition

var navigationControl ={dockPosition:'TopLeft'};
<EJ.Map id="maps" navigationControl={navigationControl} > 		Not Applicable
Navigation Absolute Position Property: navigationControl.absolutePosition

var navigationControl ={absolutePosition:{x:10 , y:10};
<EJ.Map id="maps" navigationControl={navigationControl} > 		Not Applicable
Dragging Selection Property: draggingOnSelection

<EJ.Map id="maps" draggingOnSelection={true} > 		Not Applicable
Resize Property: enableResize

<EJ.Map id="maps" enableResize={true} > 		Not Applicable
Enable Animation Property: enableAnimation

<EJ.Map id="maps" enableAnimation={true} > 		Not Applicable
Enable Layer Animation Property: enableLayerChangeAnimation

<EJ.Map id="maps" enableLayerAnimation={true} > 		Not Applicable
Center Position Property: centerPosition

<EJ.Map id="maps" centerPosition=[38.5000, -98] > 		Property: centerPosition

<MapsComponent id='maps' centerPosition=[38.5000, -98]></MapsComponent>,

document.getElementById('maps');

Events

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

<EJ.Map id="maps" shapeSelected={shapeSelected}></EJ.Map>,
document.getElementById('maps')
function shapeSelected(args) {} 		Property: shapeSelected

<MapsComponent id='maps' shapeSelected={this.shapeSelected.bind(this)}></MapsComponent>,
document.getElementById('maps');
public shapeSelected(args: IShapeSelectedEventArgs): void {} 		  Marker Selected Property: markerSelected

<EJ.Map id="maps" markerSelected={markerSelected}></EJ.Map>,
document.getElementById('maps')
function markerSelected(args) {} 		Property: markerClick

<MapsComponent id='maps' markerClick={this.markerClick.bind(this)}></MapsComponent>,
document.getElementById('maps');
public markerClick(args: IMarkerClickEventArgs): void {} 		  Marker Move Property: markerEnter

<EJ.Map id="maps" markerEnter={markerEnter}></EJ.Map>,
document.getElementById('maps')
function markerEnter(args) {} 		Property: markerMouseMove

<MapsComponent id='maps' markerMouseMove={this.markerMouseMove.bind(this)}></MapsComponent>,
document.getElementById('maps');
public markerMouseMove(args: IMarkerMouseMoveEventArgs): void {} 		  Marker Leave Property: markerLeave

<EJ.Map id="maps" markerLeave={markerLeave}></EJ.Map>,
document.getElementById('maps')
function markerLeave(args) {} 		Not Applicable
Legend Item Rendering Property: legendItemRendering

<EJ.Map id="maps" legendItemRendering={legendItemRendering}></EJ.Map>,
document.getElementById('maps')
function legendItemRendering(args) {} 		Not Applicable                        
Display Text Rendering Property: displayTextRendering

<EJ.Map id="maps" displayTextRendering={displayTextRendering}></EJ.Map>,
document.getElementById('maps')
function displayTextRendering(args) {} 		Property: dataLabelRendering

<ejs-maps id="maps" dataLabelRendering="dataLabelRendering"></ejs-maps>
function dataLabelRendering(args){} 		                       
Legend Item Click Property: legendItemClick

<EJ.Map id="maps" legendItemClick={legendItemClick}></EJ.Map>,
document.getElementById('maps')
function legendItemClick(args) {} 		Not Applicable                        
Bubble Rendering Property: bubbleRendering

<EJ.Map id="maps" bubbleRendering={bubbleRendering}></EJ.Map>,
document.getElementById('maps')
function bubbleRendering(args) {} 		Property: bubbleRendering

<MapsComponent id='maps' bubbleRendering={this.bubbleRendering.bind(this)}></MapsComponent>,
document.getElementById('maps');
public bubbleRendering(args: IBubbleRenderingEventArgs): void {}
function bubbleRendering(args){} 		                       
Shape Rendering Property: shapeRendering

<EJ.Map id="maps" shapeRendering={shapeRendering}></EJ.Map>,
document.getElementById('maps')
function shapeRendering(args) {} 		Property: shapeRendering

<MapsComponent id='maps' shapeRendering={this.shapeRendering.bind(this)}></MapsComponent>,
document.getElementById('maps');
public shapeRendering(args: IShapeRenderingEventArgs): void {} 		                       
Zoomed In Property: zoomedIn

<EJ.Map id="maps" zoomedIn={zoomedIn}></EJ.Map>,
document.getElementById('maps')
function zoomedIn(args) {} 		Not Applicable                        
Render Completed Property: onRenderComplete

<EJ.Map id="maps" onRenderComplete={onRenderComplete}></EJ.Map>,
document.getElementById('maps')
function onRenderComplete(args) {} 		Property: loaded

<MapsComponent id='maps' loaded={this.loaded.bind(this)}></MapsComponent>,
document.getElementById('maps');
public loaded(args: ILoadedEventArgs): void {} 		                       
Panned Property: panned

<EJ.Map id="maps" panned={panned}></EJ.Map>,
document.getElementById('maps')
function panned(args) {} 		Not Applicable                        
zoomed Out Property: zoomedOut

<EJ.Map id="maps" zoomedOut={zoomedOut}></EJ.Map>,
document.getElementById('maps')
function zoomedOut(args) {} 		Not Applicable                        
Mouse Over Property: mouseover

<EJ.Map id="maps" mouseover={mouseover}></EJ.Map>,
document.getElementById('maps')
function mouseover(args) {} 		Not Applicable                        
Mouse Leave Property: mouseleave

<EJ.Map id="maps" mouseleave={mouseleave}></EJ.Map>,
document.getElementById('maps')
function mouseleave(args) {} 		Not Applicable                        
Click Property: click

<EJ.Map id="maps" click={click}></EJ.Map>,
document.getElementById('maps')
function click(args) {} 		Property: click

<MapsComponent id='maps' click={this.click.bind(this)}></MapsComponent>,
document.getElementById('maps');
public click(args: IClickEventArgs): void {} 		                       
Double Click Property: doubleClick

<EJ.Map id="maps" doubleClick={doubleClick}></EJ.Map>,
document.getElementById('maps')
function doubleClick(args) {} 		Property: doubleClick

<MapsComponent id='maps' doubleClick={this.doubleClick.bind(this)}></MapsComponent>,
document.getElementById('maps');
public doubleClick(args: IDoubleClickEventArgs): void {} 		                       
Right Click Property: rightClick

<EJ.Map id="maps" rightClick={rightClick}></EJ.Map>,
document.getElementById('maps')
function rightClick(args) {} 		Property: rightClick

<MapsComponent id='maps' rightClick={this.rightClick.bind(this)}></MapsComponent>,
document.getElementById('maps');
public rightClick(args: IRightClickEventArgs): void {} 		                       
Initial Load Property: onLoad

<EJ.Map id="maps" onLoad={onLoad}></EJ.Map>,
document.getElementById('maps')
function onLoad(args) {} 		Property: load

<MapsComponent id='maps' load={this.load.bind(this)}></MapsComponent>,
document.getElementById('maps');
public load(args: ILoadEventArgs): void {} 		                       
Before Print Not Applicable Property: beforePrint

<MapsComponent id='maps' beforePrint={this.beforePrint.bind(this)}></MapsComponent>,
document.getElementById('maps');
public beforePrint(args: IBeforePrintEventArgs): void {} 		                       
Resize Not Applicable Property: resize

<MapsComponent id='maps' resize={this.resize.bind(this)}></MapsComponent>,
document.getElementById('maps');
public resize(args: IResizeEventArgs): void {} 		                       
Tooltip Render Not Applicable Property: tooltipRender

<MapsComponent id='maps' tooltipRender={this.tooltipRender.bind(this)}></MapsComponent>,
document.getElementById('maps');
public tooltipRender(args: ITooltipRenderEventArgs): void {} 		                       
Item Selection Not Applicable Property: itemSelection

<MapsComponent id='maps' itemSelection={this.itemSelection.bind(this)}></MapsComponent>,
document.getElementById('maps');
public itemSelection(args: IItemSelectionEventArgs): void {} 		                       
Item Highlight Not Applicable Property: itemHighlight

<MapsComponent id='maps' itemHighlight={this.itemHighlight.bind(this)}></MapsComponent>,
document.getElementById('maps');
public itemHighlight(args: IitemHighlightEventArgs): void {} 		                       
Shape Highlight Not Applicable Property: shapeHighlight

<MapsComponent id='maps' shapeHighlight={this.shapeHighlight.bind(this)}></MapsComponent>,
document.getElementById('maps');
public shapeHighlight(args: IShapeHighlightEventArgs): void {} 		                       
Layer Rendering Not Applicable Property: layerRendering

<MapsComponent id='maps' layerRendering={this.layerRendering.bind(this)}></MapsComponent>,
document.getElementById('maps');
public layerRendering(args: ILayerRenderingEventArgs): void {} 		                       
Marker Rendering Not Applicable Property: markerRendering

<MapsComponent id='maps' markerRendering={this.markerRendering.bind(this)}></MapsComponent>,
document.getElementById('maps');
public markerRendering(args: IMarkerRenderingEventArgs): void {} 		                       
Bubble Mouse Move Not Applicable Property: bubbleMouseMove

<MapsComponent id='maps' bubbleMouseMove={this.bubbleMouseMove.bind(this)}></MapsComponent>,
document.getElementById('maps');
public bubbleMouseMove(args: IBubbleMouseMoveEventArgs): void {} 		                       
Bubble Mouse Move Not Applicable Property: annotationRendering

<MapsComponent id='maps' annotationRendering={this.annotationRendering.bind(this)}></MapsComponent>,
document.getElementById('maps');
public annotationRendering(args: IAnnotationRenderingEventArgs): void {} 		                       
Animation Complete Not Applicable Property: animationComplete

<MapsComponent id='maps' animationComplete={this.animationComplete.bind(this)}></MapsComponent>,
document.getElementById('maps');
public animationComplete(args: IAnimationCompleteEventArgs): void {}