Ej1 api migration in React Maps component

17 Mar 202524 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.toolbarSettings.buttonSettings.toolbarItems

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

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

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

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

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

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

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

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

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

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

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

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

<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={{ toolbarSettings:{ buttonSettings: { 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'); 		To render shape maps, there is no need to mention the layer type. You can use the shapeData property alone.
Property: layers.shapeData

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

document.getElementById('maps');

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

<MapsComponent id='maps'>
<LayersDirective> <LayerDirective urlTemplate='https://tile.openstreetmap.org/level/tileX/tileY.png'> </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'); 		There is no need to mention the type of Bing Maps. The type of Bing Maps will be available in the URL that you mention in the getBingUrlTemplate method.
Property: getBingUrlTemplate

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

document.getElementById('maps');
function load(args) {
 args.maps.getBingUrlTemplate("https://dev.virtualearth.net/REST/V1/Imagery/Metadata/Aerial?output=json&uriScheme=https&key=?").then(function(url) {
  args.maps.layers[0].urlTemplate= url;
 });
}
Bing Map Key Property: layers.key

var layers = [{ key:''}];
<EJ.Map id="maps" layers = {layers} > </EJ.Map>
document.getElementById('maps'); 		There is no need to mention the key for the online maps. The key will be available in the URL that you mention in the urlTemplate property. For Bing Maps, the key will be available in the URL that you mention in the getBingUrlTemplate method.
Property: getBingUrlTemplate

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

document.getElementById('maps');
function load(args) {
 args.maps.getBingUrlTemplate("https://dev.virtualearth.net/REST/V1/Imagery/Metadata/Aerial?output=json&uriScheme=https&key=?").then(function(url) {
  args.maps.layers[0].urlTemplate= url;
 });
}
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 {}