Search results

Migration from Essential JS 1

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
<ejs-maps id="maps" height="150px"></ejs-maps>
Width Not Applicable Property: width
<ejs-maps id="maps" width="150px"></ejs-maps>

Title and Subtitle Customization

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

<ejs-maps id="maps" [titlleSettings]="titleSettings"></ejs-maps>
TS: public titleSettings: Object = { text: “Maps title” }
Subtitle Text Not Applicable Property: title.subtitle.text

<ejs-maps id="maps" [titlleSettings]="titleSettings"></ejs-maps>
TS: public titleSettings: Object = { subTitleSettings: { text: “Maps sub title” } }
Title Alignment Not Applicable Property: title.alignment

<ejs-maps id="maps" [titlleSettings]="titleSettings"></ejs-maps>
TS: public titleSettings: Object = { alignment: “Center” }
Subtitle Alignment Not Applicable Property: title.subtitle.alignment

<ejs-maps id="maps" [titlleSettings]="titleSettings"></ejs-maps>
TS: public titleSettings: Object = { subTitleSettings: { alignment: “Center” } }

Zooming Customization

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

<ej-map id="container" [zoomSettings.enableZoom]="true"></ej-map>
Property: zoomSettings.enable

<ejs-maps id="maps" [zoomSettings]="zoomSettings"></ejs-maps>
TS: public zoomSettings: Object = { enable: true }
Minimum Zoom Property: zoomSettings.minValue

<ej-map id="container" [zoomSettings.minValue]=2></ej-map>
Property: zoomSettings.minZoom

<ejs-maps id="maps" [zoomSettings]="zoomSettings"></ejs-maps>
TS: public zoomSettings: Object = { minZoom: 2 }
Maximum Zoom Property: zoomSettings.maxValue

<ej-map id="container" [zoomSettings.maxValue]=5></ej-map>
Property: zoomSettings.maxZoom

<ejs-maps id=“maps” [zoomSettings]=“zoomSettings”>`
TS: public zoomSettings: Object = { maxZoom: 5 }
Mouse Wheel Zoom Property: zoomSettings.enableMouseWheelZoom

<ej-map id="container" [zoomSettings.enableMouseWheelZoom]="true"></ej-map>
Property: zoomSettings.mouseWheelZoom

<ejs-maps id="maps" [zoomSettings]="zoomSettings"></ejs-maps>
TS: public zoomSettings: Object = { mouseWheelZoom: true }
Double Click Zoom Not Applicable Property: zoomSettings.doubleClickZoom

<ejs-maps id="maps" [zoomSettings]="zoomSettings"></ejs-maps>
TS: public zoomSettings: Object = { doubleClickZoom: true }
Pinch Zoom Not Applicable Property: zoomSettings.pinchZooming

<ejs-maps id="maps" [zoomSettings]="zoomSettings"></ejs-maps>
TS: public zoomSettings: Object = { pinchZooming: true }
Single Click Zoom Property: zoomSettings.enableZoomOnSelection

<ej-map id="container" [zoomSettings.enableZoomOnSelection]="true"></ej-map>
Property: zoomSettings.zoomOnClick

<ejs-maps id="maps" [zoomSettings]="zoomSettings"></ejs-maps>
TS: public zoomSettings: Object = { zoomOnClick: true }
Zoom Factor Property: zoomSettings.factor

<ej-map id="container" [zoomSettings.factor]=2></ej-map>
Property: zoomSettings.zoomFactor

<ejs-maps id="maps" [zoomSettings]="zoomSettings"></ejs-maps>
TS: public zoomSettings: Object = { zoomFactor: 2 }
Toolbars Not Applicable Property: zoomSettings.toolbars

<ejs-maps id="maps" [zoomSettings]="zoomSettings"></ejs-maps>
TS: public zoomSettings: Object = { toolbars: [“ZoomIn”,“ZoomOut”] }
Toolbar Orientation Not Applicable Property: zoomSettings.toolBarOrientation

<ejs-maps id="maps" [zoomSettings]="zoomSettings"></ejs-maps>
TS: public zoomSettings: Object = { toolBarOrientation: “Horizontal” }
Toolbar Vertical Alignment Not Applicable Property: zoomSettings.verticalAlignment

<ejs-maps id="maps" [zoomSettings]="zoomSettings"></ejs-maps>
TS: public zoomSettings: Object = { verticalAlignment: “Center” }
Toolbar Horizontal Alignment Not Applicable Property: zoomSettings.horizontalAlignment

<ejs-maps id="maps" [zoomSettings]="zoomSettings"></ejs-maps>
TS: public zoomSettings: Object = { horizontalAlignment: “Center” }
Toolbar Highlight Color Not Applicable Property: zoomSettings.highlightColor

<ejs-maps id="maps" [zoomSettings]="zoomSettings"></ejs-maps>
TS: public zoomSettings: Object = { highlightColor: “#e61576” }
Toolbar Selection Color Not Applicable Property: zoomSettings.selectionColor

<ejs-maps id="maps" [zoomSettings]="zoomSettings"></ejs-maps>
TS: public zoomSettings: Object = { selectionColor: “#e61576” }
Toolbar Fill Color Not Applicable Property: zoomSettings.color

<ejs-maps id="maps" [zoomSettings]="zoomSettings"></ejs-maps>
TS: public zoomSettings: Object = { color: “#e61576” }

Layer Customization

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

<ejs-maps id="maps"> <e-layers><e-layer type="Layer"></e-layer></e-layers></ejs-maps>
Layer Type Property: layers.layerType

<ej-map id="container"><e-layers><e-layer layerType="Geometry"></e-layer></e-layers></ej-map>
Property: layers.layerType

<ejs-maps id="maps"><e-layers><e-layer layerType="Geometry"></e-layer></e-layers></ejs-maps>
Visible Not Applicable Property: layers.visible

<ejs-maps id="maps"> <e-layers><e-layer visible="true"></e-layer></e-layers></ejs-maps>
Bing Map Type Property: layers.bingMapType

<ej-map id="container"><e-layers><e-layer bingMapType="Aerial"></e-layer></e-layers></ej-map>
Property: layers.bingMapType

<ejs-maps id="maps"><e-layers><e-layer bingMapType="Aerial"></e-layer></e-layers></ejs-maps>
Bing Map Key Property: layers.key

<ej-map id="container"><e-layers><e-layer key=""></e-layer></e-layers></ej-map>
Property: layers.key

<ejs-maps id="maps"> <e-layers><e-layer key=""></e-layer></e-layers></ejs-maps>
URL Template Property: layers.urltemplate

<ej-map id="container"><e-layers><e-layer urlTemplate="http://a.tile.openstreetmap.org/level/tileX/tileY.png"></e-layer></e-layers></ej-map>
Property: layers.urlTemplate

<ejs-maps id="maps"> <e-layers><e-layer urlTemplate="http://a.tile.openstreetmap.org/level/tileX/tileY.png"></e-layer></e-layers></ejs-maps>
Shape Data Property: layers.shapeData

<ej-map id="container"><e-layers><e-layer [shapeData]="WorldMap"></e-layer></e-layers></ej-map>
Property: layers.shapeData

<ejs-maps id="maps"> <e-layers><e-layer [shapeData]="WorldMap"></e-layer></e-layers></ejs-maps>
Data Source Property: layers.dataSource

<ej-map id="container"><e-layers><e-layer [dataSource]="PopulationData"></e-layer></e-layers></ej-map>
Property: layers.dataSource

<ejs-maps id="maps"> <e-layers><e-layer [dataSource]="PopulationData"></e-layer></e-layers></ejs-maps>
Query Not Applicable Property: layers.query

<ejs-maps id="maps"> <e-layers><e-layer query=""></e-layer></e-layers></ejs-maps>
Shape Data Path Property: layers.shapeDataPath

<ej-map id="container"><e-layers><e-layer shapeDataPath="Continent"></e-layer></e-layers></ej-map>
Property: layers.shapeDataPath

<ejs-maps id="maps"> <e-layers><e-layer shapeDataPath="Continent"></e-layer></e-layers></ejs-maps>
Shape Property Path Property: layers.shapePropertyPath

<ej-map id="container"><e-layers><e-layer shapePropertyPath="Continent"></e-layer></e-layers></ej-map>
Property: layers.shapePropertyPath

<ejs-maps id="maps"> <e-layers><e-layer shapePropertyPath="Continent"></e-layer></e-layers></ejs-maps>
Layer Animation Not Applicable Property: layers.animationDuration

<ejs-maps id="maps"> <e-layers><e-layer animationDuration="100"></e-layer></e-layers></ejs-maps>

Shape Customization

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

<ej-map id="container"><e-layers shapeSettings.fill="#9CBF4E"></e-layer></e-layers></ej-map>
Property: layers.shapeSettings.fill

<ejs-maps id="maps"><e-layers><e-layer [shapeSettings] ='shapeSettings'></e-layer> </e-layers></ejs-maps>
TS:
public shapeSettings: Object = { fill: “red” }
Shape Palette Property: layers.shapeSettings.colorPalette

<ej-map id="container"><e-layers><e-layer shapeSettings.colorPalette="customPalette"></e-layer></e-layers></ej-map>
Property: layers.shapeSettings.palette

<ejs-maps id="maps"><e-layers><e-layer [shapeSettings] ='shapeSettings'></e-layer> </e-layers></ejs-maps>
TS:
public shapeSettings: Object = { palette: [“red”,“green”] }
Shape Point Radius Not Applicable Property: layers.shapeSettings.circleRadius

<ejs-maps id="maps"><e-layers><e-layer [shapeSettings] ='shapeSettings'></e-layer> </e-layers></ejs-maps>
TS:
public shapeSettings: Object = { circleRadius: 10 }
Shape Color Value Path Property: layers.shapeSettings.colorValuePath

<ej-map id="container"><e-layers shapeSettings.colorValuePath="Sales"><e-layer></e-layer></e-layers></ej-map>
Property: layers.shapeSettings.colorValuePath

<ejs-maps id="maps"><e-layers><e-layer [shapeSettings] ='shapeSettings'></e-layer> </e-layers></ejs-maps>
TS:
public shapeSettings: Object = { colorValuePath: “country” }
Shape Value Path Property: layers.shapeSettings.valuePath

<ej-map id="container"><e-layers><e-layer shapeSettings.valuePath="Sales"></e-layer></e-layers></ej-map>
Property: layers.shapeSettings.valuePath

<ejs-maps id="maps"><e-layers><e-layer [shapeSettings] ='shapeSettings'></e-layer> </e-layers></ejs-maps>
TS:
public shapeSettings: Object = { valuePath: “Sales” }
Shape DashArray Not Applicable Property: layers.shapeSettings.dashArray

<ejs-maps id="maps"><e-layers><e-layer [shapeSettings] ='shapeSettings'></e-layer> </e-layers></ejs-maps>
TS:
public shapeSettings: Object = { dashArray: “5,3” }
Shape Opacity Not Applicable Property: layers.shapeSettings.opacity

<ejs-maps id="maps"><e-layers><e-layer [shapeSettings] ='shapeSettings'></e-layer> </e-layers></ejs-maps>
TS:
public shapeSettings: Object = { opacity: 0.5 }
Range Color Mapping Property: layers.shapeSettings.colorMappings.rangeColorMapping

<ej-map id="container"><e-layers><e-layer [shapeSettings.colorMappings]="colorMapping"></e-layer></e-layers></ej-map>
TS:
public colorMapping: any = {
   rangeColorMapping: [ { from: ‘400’, to: ‘600’, color: ‘#C6C35C’} ]
}
Property: layers.shapeSettings.colorMapping

<ejs-maps id="maps"><e-layers><e-layer [shapeSettings] ='shapeSettings'></e-layer> </e-layers></ejs-maps>
TS:
public shapeSettings: Object = { colorMapping: [{from: ‘400’, to: ‘600’, color: “green”}] }
Equal Color Mapping Property: layers.shapeSettings.colorMappings.equalColorMapping

<ej-map id="container"><e-layers><e-layer [shapeSettings.colorMappings]="colorMapping"></e-layer></e-layers></ej-map>
TS:
public colorMapping: any = {
   equalColorMapping: [ { value: “Ckinton”, color: ‘#C6C35C’} ]
}
Property: layers.shapeSettings.colorMapping

<ejs-maps id="maps"><e-layers><e-layer [shapeSettings] ='shapeSettings'></e-layer> </e-layers></ejs-maps>
TS:
public shapeSettings: Object = { colorMapping: [ { value: “Ckinton”, color: ‘#C6C35C’} ]}

Marker Customization

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

<ej-map id="container"><e-layers><e-layer [markers]="markers"></e-layer></e-layers></ej-map>
TS:
public markers: any = [ { latitude: 42, longitude: -93, label: “Iowa” } ]
Property: layers.markerSettings.dataSource

<ejs-maps id="maps"><e-layers><e-layer></e-layer [markerSettings] = 'markerSettings'> </e-layers></ejs-maps>
TS:
public markerSettings: Object = [{
  dataSource: [{
    latitude: 49.95121990866204, longitude: 18.468749999999998
  }]
}]
Marker Template Property: layers.markerTemplate

<div id="Template" style="background-image:url;margin-left:5px;height:25px;width:80px;margin-top:-15px;">
</div>
<ej-map id="container"><e-layers><e-layer markerTemplate="template"></e-layer></e-layers></ej-map>
Property: layers.markerSettings.template

<ejs-maps id="maps"><e-layers><e-layer></e-layer [markerSettings] = 'markerSettings'> </e-layers></ejs-maps>
TS:
public markerSettings: Object = [{
  template: “template”
}]
Marker Visible Not Applicable Property: layers.markerSettings.visible

<ejs-maps id="maps"><e-layers><e-layer></e-layer [markerSettings] = 'markerSettings'> </e-layers></ejs-maps>
TS:
public markerSettings: Object = [{
  visible: true
}]
Marker Fill Not Applicable Property: layers.markerSettings.fill

<ejs-maps id="maps"><e-layers><e-layer></e-layer [markerSettings] = 'markerSettings'> </e-layers></ejs-maps>
TS:
public markerSettings: Object = [{
  fill: “red”
}]
Marker Height Not Applicable Property: layers.markerSettings.height

<ejs-maps id="maps"><e-layers><e-layer></e-layer [markerSettings] = 'markerSettings'> </e-layers></ejs-maps>
TS:
public markerSettings: Object = [{
  height: 10
}]
Marker Width Not Applicable Property: layers.markerSettings.width

<ejs-maps id="maps"><e-layers><e-layer></e-layer [markerSettings] = 'markerSettings'> </e-layers></ejs-maps>
TS:
public markerSettings: Object = [{
  width: 10
}]
Marker Shape Not Applicable Property: layers.markerSettings.shape

<ejs-maps id="maps"><e-layers><e-layer></e-layer [markerSettings] = 'markerSettings'> </e-layers></ejs-maps>
TS:
public markerSettings: Object = [{
  shape: “Circle”
}]
Marker ImageURL Not Applicable Property: layers.markerSettings.imageUrl

<ejs-maps id="maps"><e-layers><e-layer></e-layer [markerSettings] = 'markerSettings'> </e-layers></ejs-maps>
TS:
public markerSettings: Object = [{
  imageUrl: “http://js.syncfusion.com/demos/web/Images/map/pin.png”
}]
Marker Opacity Not Applicable Property: layers.markerSettings.opacity

<ejs-maps id="maps"><e-layers><e-layer></e-layer [markerSettings] = 'markerSettings'> </e-layers></ejs-maps>
TS:
public markerSettings: Object = [{
  opacity: 0.5
}]
Marker Legend Text Not Applicable Property: layers.markerSettings.legendText

<ejs-maps id="maps"><e-layers><e-layer></e-layer [markerSettings] = 'markerSettings'> </e-layers></ejs-maps>
TS:
public markerSettings: Object = [{
  legendText: “China”
}]
Marker Offset Not Applicable Property: layers.markerSettings.offset

<ejs-maps id="maps"><e-layers><e-layer></e-layer [markerSettings] = 'markerSettings'> </e-layers></ejs-maps>
TS:
public markerSettings: Object = [{
  offset: 10
}]
Marker Animation Duration Not Applicable Property: layers.markerSettings.animationDuration

<ejs-maps id="maps"><e-layers><e-layer></e-layer [markerSettings] = 'markerSettings'> </e-layers></ejs-maps>
TS:
public markerSettings: Object = [{
  animationDuration: 2000
}]
Marker Animation Delay Not Applicable Property: layers.markerSettings.animationDelay

<ejs-maps id="maps"><e-layers><e-layer></e-layer [markerSettings] = 'markerSettings'> </e-layers></ejs-maps>
TS:
public markerSettings: Object = [{
  animationDelay: 100
}]
Marker DashArray Not Applicable Property: layers.markerSettings.dashArray

<ejs-maps id="maps"><e-layers><e-layer></e-layer [markerSettings] = 'markerSettings'> </e-layers></ejs-maps>
TS:
public markerSettings: Object = [{
  dashArray: “2,3”
}]
Marker Selection Not Applicable Property: layers.markerSettings.selectionSettings

<ejs-maps id="maps"><e-layers><e-layer></e-layer [markerSettings] = 'markerSettings'> </e-layers></ejs-maps>
TS:
public markerSettings: Object = [{
  selectionSettings: {enable: true, fill: “lime”, opaciy:0.5, enaleMultiSelect: false }
}]
Marker Highlight Not Applicable Property: layers.markerSettings.highlightSettings

<ejs-maps id="maps"><e-layers><e-layer></e-layer [markerSettings] = 'markerSettings'> </e-layers></ejs-maps>
TS:
public markerSettings: Object = [{
  highlightSettings: {enable: true, fill: “lime”, opaciy:0.5 }
}]
Marker Tooltip Not Applicable Property: layers.markerSettings.tooltipSettings

<ejs-maps id="maps"><e-layers><e-layer></e-layer [markerSettings] = 'markerSettings'> </e-layers></ejs-maps>
TS:
public markerSettings: Object = [{
  tooltipSettings: {enable: true, fill: “lime”, valuePath: “State”, template: “tooltipTemplate” }
}]

Bubble Customization

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

<ej-map id="container"><e-layers><e-layer [bubbleSettings]="bubbleSettings"></e-layer></e-layers></ej-map>
TS:
public bubbleSettings: any = { showBubble = true };
Property: layers.bubbleSettings.visible

<ejs-maps id="maps"> <e-layers><e-layer bubbleSettings="bubbleSettings"></e-layer></e-layers></ejs-maps>
TS:
public bubbleSettings: Object = [{ visible : true }];
ValuePath Property: layers.bubbleSettings.valuePath

<ej-map id="container"><e-layers><e-layer [bubbleSettings]="bubbleSettings"></e-layer></e-layers></ej-map>
TS:
public bubbleSettings: any = { valuePath = “Sales” };
Property: layers.bubbleSettings.valuePath

<ejs-maps id="maps"> <e-layers><e-layer bubbleSettings="bubbleSettings"></e-layer></e-layers></ejs-maps>
TS:
public bubbleSettings: Object = [{ valuePath : “Sales” }];
MinValue Property: layers.bubbleSettings.minValue

<ej-map id="container"><e-layers><e-layer [bubbleSettings]="bubbleSettings"></e-layer></e-layers></ej-map>
TS:
public bubbleSettings: any = { minValue = 10 };
Property: layers.bubbleSettings.minRadius

<ejs-maps id="maps"> <e-layers><e-layer bubbleSettings="bubbleSettings"></e-layer></e-layers></ejs-maps>
TS:
public bubbleSettings: Object = [{ minRadius : 10 }];
MaxValue Property: layers.bubbleSettings.maxValue

<ej-map id="container"><e-layers><e-layer [bubbleSettings]="bubbleSettings"></e-layer></e-layers></ej-map>
TS:
public bubbleSettings: any = { maxValue = 20 };
Property: layers.bubbleSettings.maxRadius

<ejs-maps id="maps"> <e-layers><e-layer bubbleSettings="bubbleSettings"></e-layer></e-layers></ejs-maps>
TS:
public bubbleSettings: Object = [{ maxRadius : 20 }];
Bubble Type Not Applicable Property: layers.bubbleSettings.bubbleType

<ejs-maps id="maps"> <e-layers><e-layer bubbleSettings="bubbleSettings"></e-layer></e-layers></ejs-maps>
TS:
public bubbleSettings: Object = [{ bubbleType : “Circle” }];
Color Property: layers.bubbleSettings.color

<ej-map id="container"><e-layers><e-layer [bubbleSettings]="bubbleSettings"></e-layer></e-layers></ej-map>
TS:
public bubbleSettings: any = { color = “green” };
Property: layers.bubbleSettings.fill

<ejs-maps id="maps"> <e-layers><e-layer bubbleSettings="bubbleSettings"></e-layer></e-layers></ejs-maps>
TS:
public bubbleSettings: Object = [{ fill : “red” }];
Opacity Property: layers.bubbleSettings.bubbleOpacity

<ej-map id="container"><e-layers><e-layer [bubbleSettings]="bubbleSettings"></e-layer></e-layers></ej-map>
TS:
public bubbleSettings: any = { bubbleOpacity = 0.4 };
Property: layers.bubbleSettings.opacity

<ejs-maps id="maps"> <e-layers><e-layer bubbleSettings="bubbleSettings"></e-layer></e-layers></ejs-maps>
TS:
public bubbleSettings: Object = [{ bubbleOpacity : 0.5 }];
Color Value Path Property: layers.bubbleSettings.colorValuePath

<ej-map id="container"><e-layers><e-layer [bubbleSettings]="bubbleSettings"></e-layer></e-layers></ej-map>
TS:
public bubbleSettings: any = { colorValuePath = “Sales” };
Property: layers.bubbleSettings.colorValuePath

<ejs-maps id="maps"> <e-layers><e-layer bubbleSettings="bubbleSettings"></e-layer></e-layers></ejs-maps>
TS:
public bubbleSettings: Object = [{ colorValuePath : “Sales” }];
Enable Tooltip Property: layers.bubbleSettings.showTooltip

<ej-map id="container"><e-layers><e-layer [bubbleSettings]="bubbleSettings"></e-layer></e-layers></ej-map>
TS:
public bubbleSettings: any = { showTooltip = true };
Property: layers.bubbleSettings.tooltipSettings.visible

<ejs-maps id="maps"> <e-layers><e-layer bubbleSettings="bubbleSettings"></e-layer></e-layers></ejs-maps>
TS:
public bubbleSettings: Object = [{
tooltipSettings: { visible : true }
}];
Tooltip Template Property: layers.bubbleSettings.tooltipTemplate

<ej-map id="container"><e-layers><e-layer [bubbleSettings]="bubbleSettings"></e-layer></e-layers></ej-map>
<div id="template">
// ..
</div>
TS:
public bubbleSettings: any = { tooltipTemplate = “template” };
Property: layers.bubbleSettings.tooltipSettings.template

<div id="template">
//..
</div>
<ejs-maps id="maps"> <e-layers><e-layer bubbleSettings="bubbleSettings"></e-layer></e-layers></ejs-maps>
TS:
public bubbleSettings: Object = [{
tooltipSettings: { template: “template”}
}];
Bubble Selection Not Applicable Property: layers.bubbleSettings.selectionSettings

<ejs-maps id="maps"> <e-layers><e-layer bubbleSettings="bubbleSettings"></e-layer></e-layers></ejs-maps>
TS:
public bubbleSettings: Object = [{
selectionSettings: { fill: “red”, opacity: 1, enable: true, enableMultiSelect: false }
}];
Bubble Highlight Not Applicable Property: layers.bubbleSettings.highlightSettings

<ejs-maps id="maps"> <e-layers><e-layer bubbleSettings="bubbleSettings"></e-layer></e-layers></ejs-maps>
TS:
public bubbleSettings: Object = [{
highlightSettings: { fill: “red”, opacity: 1, enable: true }
}];
Range Color Mapping Property: layers.bubbleSettings.colorMappings.rangeColorMapping

<ej-map id="container"><e-layers><e-layer [bubbleSettings]="bubbleSettings"></e-layer></e-layers></ej-map>
TS:
public bubbleSettings: any = {
   colorMappings: {rangeColorMapping: [{from: 10, to:40, color: “red” }]}
};
Property: layers.bubbleSettings.colorMapping

<ejs-maps id="maps"> <e-layers><e-layer bubbleSettings="bubbleSettings"></e-layer></e-layers></ejs-maps>
TS:
public bubbleSettings: Object = [{
colorMapping: [{ from: 60000, to: 10000, color: “red” }]
}];
Equal Color Mapping Property: layers.bubbleSettings.colorMappings.equalColorMapping

<ej-map id="container"><e-layers><e-layer [bubbleSettings]="bubbleSettings"></e-layer></e-layers></ej-map>
TS:
public bubbleSettings: any = {
   colorMappings: { equalColorMapping: [{value: “china”, color: “red” }]}
};
Property: layers.bubbleSettings.colorMapping

<ejs-maps id="maps"> <e-layers><e-layer bubbleSettings="bubbleSettings"></e-layer></e-layers></ejs-maps>
TS:
public bubbleSettings: Object = [{
colorMapping: [{ value: “China”, color: “red” }]
}];

DataLabel Customization

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

<ej-map id="container"><e-layers><e-layer [labelSettings.showLabels]=true></e-layer></e-layers></ej-map>
Property: layers.dataLabelSettings.visible

<ejs-maps id="maps"> <e-layers><e-layer [datalabelsettings]="datalabelsettings"></e-layer></e-layers></ejs-maps>
TS:
public datalabelsettings: Object = {
visible: true
};
Label Path Property: layers.labelSettings.labelPath

<ej-map id="container"><e-layers><e-layer labelSettings.labelPath="Continent"></e-layer></e-layers></ej-map>
Property: layers.dataLabelSettings.labelPath

<ejs-maps id="maps"> <e-layers><e-layer [datalabelsettings]="datalabelsettings"></e-layer></e-layers></ejs-maps>
TS:
public datalabelsettings: Object = {
labelPath: “Continent”
};
Enable Smart Label Property: layers.labelSettings.enableSmartLabel

<ej-map id="container"><e-layers><e-layer [labelSettings.enableSmartLabels]=true></e-layer></e-layers></ej-map>
Not Applicable
Smart Label Size Property: layers.labelSettings.smartLabelSize

<ej-map id="container"><e-layers><e-layer [labelSettings.smartLabelSize]=20></e-layer></e-layers></ej-map>
Not Applicable
Label Length Property: layers.labelSettings.labelLength

<ej-map id="container"><e-layers><e-layer [labelSettings.labelLength]=20></e-layer></e-layers></ej-map>
Not Applicable
Opacity Not Applicable Property: layers.dataLabelSettings.opacity

<ejs-maps id="maps"> <e-layers><e-layer [datalabelsettings]="datalabelsettings"></e-layer></e-layers></ejs-maps>
TS:
public datalabelsettings: Object = {
opacity: 0.5
};
Smart Label Mode Not Applicable Property: layers.dataLabelSettings.smartLabelMode

<ejs-maps id="maps"> <e-layers><e-layer [datalabelsettings]="datalabelsettings"></e-layer></e-layers></ejs-maps>
TS:
public datalabelsettings: Object = {
smartLabelsMode: “Trim”
};
InterSectAction Not Applicable Property: layers.dataLabelSettings.intersectionAction

<ejs-maps id="maps"> <e-layers><e-layer [datalabelsettings]="datalabelsettings"></e-layer></e-layers></ejs-maps>
TS:
public datalabelsettings: Object = {
intersectionAction: “None”
};
Template Not Applicable Property: layers.dataLabelSettings.template

<ejs-maps id="maps"> <e-layers><e-layer [datalabelsettings]="datalabelsettings"></e-layer></e-layers></ejs-maps>
<div id="template">
//..
</div>
TS:
public datalabelsettings: Object = {
template: “template”
};

Legend Customization

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

<ej-map id="container"><e-layers><e-layer [legendSettings.showLegend]=true></e-layer></e-layers></ej-map>
Property: legendSettings.visible

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
visible: true
};
Toggle Visibility Property: layers.legendSettings.toggleVisibility

<ej-map id="container"><e-layers><e-layer [legendSettings.toggleVisibility]=true></e-layer></e-layers></ej-map>
Property: legendSettings.toggleVisibility

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
toggleVisibility: true
};
Legend Location X Property: layers.legendSettings.positionX

<ej-map id="container"><e-layers><e-layer [legendSettings.positionX]=250></e-layer></e-layers></ej-map>
Property: legendSettings.location

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
location:{ x: 10 }
};
Legend Location Y Property: layers.legendSettings.positionY

<ej-map id="container"><e-layers><e-layer [legendSettings.positionY]=250></e-layer></e-layers></ej-map>
Property: legendSettings.location

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
location: { y: 20 }
};
Legend Type Property: layers.legendSettings.type

<ej-map id="container"><e-layers><e-layer legendSettings.type="Layers"></e-layer></e-layers></ej-map>
Property: legendSettings.type

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
type: “Layers”
};
Label Orientation Property: layers.legendSettings.labelOrientation

<ej-map id="container"><e-layers><e-layer legendSettings.labelOrientation="Vertical"></e-layer></e-layers></ej-map>
Not Applicable
Legend Title Property: layers.legendSettings.title

<ej-map id="container"><e-layers><e-layer legendSettings.title="Unio territories of India"></e-layer></e-layers></ej-map>
Property: legendSettings.title

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
title: { text: “Union territories of India” }
};
Legend Mode Property: layers.legendSettings.mode

<ej-map id="container"><e-layers><e-layer legendSettings.mode="Default"></e-layer></e-layers></ej-map>
Property: legendSettings.mode

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
mode: “Default”
};
Legend Position Property: layers.legendSettings.position

<ej-map id="container"><e-layers><e-layer legendSettings.position="topleft"></e-layer></e-layers></ej-map>
Property: legendSettings.position

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
position: “Top”
};
Legend DockOnMap Property: layers.legendSettings.dockOnMap

<ej-map id="container"><e-layers><e-layer [legendSettings.dockOnMap]=true></e-layer></e-layers></ej-map>
Not Applicable
Legend Alignment Property: layers.legendSettings.dockPosition

<ej-map id="container"><e-layers><e-layer legendSettings.dockPosition="right"></e-layer></e-layers></ej-map>
Property: legendSettings.alignment

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
alignment: “Center”
};
Legend Left Label Property: layers.legendSettings.leftLabel

<ej-map id="container"><e-layers><e-layer legendSettings.leftLael="1000M"></e-layer></e-layers></ej-map>
Not Applicable
Legend Right Label Property: layers.legendSettings.rightLabel

<ej-map id="container"><e-layers><e-layer legendSettings.rightLabel="300M"></e-layer></e-layers></ej-map>
Not Applicable
Legend Shape Property: layers.legendSettings.icon

<ej-map id="container"><e-layers><e-layer legendSettings.icon="rectangle"></e-layer></e-layers></ej-map>
Property: legendSettings.shape

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
shape: “Circle”
};
Legend Shape Height Property: layers.legendSettings.iconHeight

<ej-map id="container"><e-layers><e-layer [legendSettings.iconHeight]=10></e-layer></e-layers></ej-map>
Property: legendSettings.shapeHeight

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
shapeHeight: 10
};
Legend Shape Width Property: layers.legendSettings.iconWidth

<ej-map id="container"><e-layers><e-layer [legendSettings.iconWidth]=10></e-layer></e-layers></ej-map>
Property: legendSettings.shapeWidth

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
shapeWidth: 10
};
Height Property: layers.legendSettings.height

<ej-map id="container"><e-layers><e-layer [legendSettings.height]=10></e-layer></e-layers></ej-map>
Property: legendSettings.width

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
height:20
};
Width Property: layers.legendSettings.width

<ej-map id="container"><e-layers><e-layer [legendSettings.width]=10></e-layer></e-layers></ej-map>
Property: legendSettings.width

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
width: 20
};
Show Labels Property: layers.legendSettings.showLabels

<ej-map id="container"><e-layers><e-layer [legendSettings.showLabels]=true></e-layer></e-layers></ej-map>
Not Applicable
Background Not Applicable Property: legendSettings.background

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
background: “transparent”
};
Label Position Not Applicable Property: legendSettings.labelPosition

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
labelPosition: “After”
};
Label Display Mode Not Applicable Property: legendSettings.labelDisplayMode

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
labelDisplayMode: “Trim”
};
Legend Orientation Not Applicable Property: legendSettings.orientation

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
orientation: “Horizontal”
};
Legend Item Fill Not Applicable Property: legendSettings.fill

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
fill: “red”
};
Legend Shape Padding Not Applicable Property: legendSettings.shapePadding

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
shapePadding: 20
};
Legend Shape Border Color Not Applicable Property: legendSettings.shapeBorder.color

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
shapeBorder: { color: “red”}
};
Legend Shape Border Width Not Applicable Property: legendSettings.shapeBorder.width

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
shapeBorder: { width: 2 }
};
Inverter Pointer Not Applicable Property: legendSettings.invertedPointer

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
invertedPointer: true
};
Item Text Style Not Applicable Property: legendSettings.textStyle

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
textStyle: { fontWeight: “400”, size: “14px” }
};
Title Style Not Applicable Property: legendSettings.textStyle

<ejs-maps id="maps" [legendSettings]="legendSettings"></ejs-maps>
TS:
public legendSettings: Object = {
titleStyle: { fontWeight: “400”, size: “14px” }
};

Highlight And Selection Customization

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

<ej-map id="container"><e-layers><e-layer shapeSettings.highlightColor="#BC5353" ></e-layer></e-layers></ej-map>
Property: fill

<ejs-maps id="maps" ><e-layers><e-layer [highlightSettings] ='highlightSettings'></e-layer></e-layers></ejs-maps>
TS:
public highlightSettings : Object = { fill: “green” };
Enable Highlight Property: layers.enableMouseHover

<ej-map id="container"><e-layers><e-layer [enableMouseHover]=true></e-layer></e-layers></ej-map>
Property: enable

<ejs-maps id="maps" ><e-layers><e-layer [highlightSettings] ='highlightSettings'></e-layer></e-layers></ejs-maps>
TS:
public highlightSettings : Object = { enable: true };
Highlight Border Color Property: layers.shapeSettings.highlightStroke

<ej-map id="container"><e-layers><e-layer shapeSettings.highlightStroke="red"></e-layer></e-layers></ej-map>
Property: layers.highlightSettings.border.color

<ejs-maps id="maps" ><e-layers><e-layer [highlightSettings] ='highlightSettings'></e-layer></e-layers></ejs-maps>
TS:
public highlightSettings : Object = { border” { color: “green” } };
Highlight Border Width Property: layers.shapeSettings.highlightBorderWidth

<ej-map id="container"><e-layers><e-layer [shapeSettings.highlightBorderWidth]=2></e-layer></e-layers></ej-map>
Property: layers.highlightSettings.border.width

<ejs-maps id="maps" ><e-layers><e-layer [highlightSettings] ='highlightSettings'></e-layer></e-layers></ejs-maps>
TS:
public highlightSettings : Object = { border” { width: 2 } };
Highlight Opacity Not Applicable Property: layers.layers.highlightSettings.opacity

<ejs-maps id="maps" ><e-layers><e-layer [highlightSettings] ='highlightSettings'></e-layer></e-layers></ejs-maps>
TS:
public highlightSettings : Object = { opacity: 0.5 };
Selection Fill Property: layers.shapeSettings.selectionColor

<ej-map id="container"><e-layers><e-layer shapeSettings.selectionColor="blue"></e-layer></e-layers></ej-map>
Property: layers.selectionSettings.fill

<ejs-maps id="maps" ><e-layers><e-layer [selectionSettings] ='selectionSettings'></e-layer></e-layers></ejs-maps>
TS:
public selectionSettings : Object = { fill: “green” };
Selection Enable Property: layers.enableSelection

<ej-map id="container"><e-layers><e-layer [enableSelection]=true></e-layer></e-layers></ej-map>
Property: layers.selectionSettings.enable

<ejs-maps id="maps" ><e-layers><e-layer [selectionSettings] ='selectionSettings'></e-layer></e-layers></ejs-maps>
TS:
public selectionSettings : Object = { enable: true };
Selection Border Width Property: layers.selectionSettings.selectionStrokeWidth

<ej-map id="container"><e-layers><e-layer selectionSettings.selectionStrokeWidth="2"></e-layer></e-layers></ej-map>
Property: layers.selectionSettings.border.width

<ejs-maps id="maps"><e-layers><e-layer [selectionSettings] ='selectionSettings'></e-layer></e-layers></ejs-maps>
TS:
public selectionSettings : Object = { border: { width: 2 } };
Selection Border Color Property: layers.selectionSettings.selectionStroke

<ej-map id="container"><e-layers><e-layer selectionSettings.selectionStroke="red"></e-layer></e-layers></ej-map>
Property: layers.selectionSettings.border.color

<ejs-maps id="maps"><e-layers><e-layer [selectionSettings] ='selectionSettings'></e-layer></e-layers></ejs-maps>
TS:
public selectionSettings : Object = { border: { color: “green” } };
Selection Opacity Not Applicable Property: layers.selectionSettings.opacity

<ejs-maps id="maps"><e-layers><e-layer [selectionSettings] ='selectionSettings'></e-layer></e-layers></ejs-maps>
TS:
public selectionSettings : Object = { opacity: 0.7 };
Behavior API in Essential JS 1 API in Essential JS 2
Visible Not Applicable Property: layers.navigationLineSettings.visible

<ejs-maps id="maps"> <e-layers> <e-layer> <e-layersettings-navigationlines> <e-layersettings-navigationline visible="true" ></e-layersettings-navigationline> </e-layersettings-navigationlines> </e-layers> </e-layer></ejs-maps>
Width Not Applicable Property: layers.navigationLineSettings.width

<ejs-maps id="maps"><e-layers><e-layer [navigationLineSettings] = 'navigationLineSettings'></e-layers></e-layer></ejs-maps>
TS:
public navigationLineSettings: Object[] = [{
width: 2
}];
Longitude Not Applicable Property: layers.navigationLineSettings.longitude

<ejs-maps id="maps"><e-layers><e-layer [navigationLineSettings] = 'navigationLineSettings'></e-layers></e-layer></ejs-maps>
TS:
public navigationLineSettings: Object[] = [{
latitude: [37.6276571, -14.2350]
}];
Latitude Not Applicable Property: layers.navigationLineSettings.latitude

<ejs-maps id="maps"><e-layers><e-layer [navigationLineSettings] = 'navigationLineSettings'></e-layers></e-layer></ejs-maps>
TS:
public navigationLineSettings: Object[] = [{
longitude: [-74.0060, -51.9253]
}];
DashArray Not Applicable Property: layers.navigationLineSettings.dashArray

<ejs-maps id="maps"><e-layers><e-layer [navigationLineSettings] = 'navigationLineSettings'></e-layers></e-layer></ejs-maps>
TS:
public navigationLineSettings: Object[] = [{
dashArray: “5,3”
}];
Color Not Applicable Property: layers.navigationLineSettings.color

<ejs-maps id="maps"><e-layers><e-layer [navigationLineSettings] = 'navigationLineSettings'></e-layers></e-layer></ejs-maps>
TS:
public navigationLineSettings: Object[] = [{
color: “green”
}];
Angle Not Applicable Property: layers.navigationLineSettings.angle

<ejs-maps id="maps"><e-layers><e-layer [navigationLineSettings] = 'navigationLineSettings'></e-layers></e-layer></ejs-maps>
TS:
public navigationLineSettings: Object[] = [{
angle: 180
}];
Arrow Position Not Applicable Property: layers.navigationLineSettings.arrow.position

<ejs-maps id="maps"><e-layers><e-layer [navigationLineSettings] = 'navigationLineSettings'></e-layers></e-layer></ejs-maps>
TS:
public navigationLineSettings: Object[] = [{
arrow: { position: “Start” }
}];
Show Arrow Not Applicable Property: layers.navigationLineSettings.arrow.showArrow

<ejs-maps id="maps"><e-layers><e-layer [navigationLineSettings] = 'navigationLineSettings'></e-layers></e-layer></ejs-maps>
TS:
public navigationLineSettings: Object[] = [{
arrow: { showArrow: true }
}];
Arrow size Not Applicable Property: layers.navigationLineSettings.arrow.size

<ejs-maps id="maps"><e-layers><e-layer [navigationLineSettings] = 'navigationLineSettings'></e-layers></e-layer></ejs-maps>
TS:
public navigationLineSettings: Object[] = [{
arrow: { size: 2 }
}];
Arrow Color Not Applicable Property: layers.navigationLineSettings.arrow.color

<ejs-maps id="maps"><e-layers><e-layer [navigationLineSettings] = 'navigationLineSettings'></e-layers></e-layer></ejs-maps>
TS:
public navigationLineSettings: Object[] = [{
arrow: { color: “red” }
}];
Arrow Offset Not Applicable Property: layers.navigationLineSettings.arrow.offSet

<ejs-maps id="maps"><e-layers><e-layer [navigationLineSettings] = 'navigationLineSettings'></e-layers></e-layer></ejs-maps>
TS:
public navigationLineSettings: Object[] = [{
arrow: { offset: 10 }
}];

Tooltip Customization

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

<ej-map id="container"><e-layers><e-layer [showTooltip]=true></e-layer></e-layers></ej-map>
Property: layers.tooltipSettings.visible

<ejs-maps id="maps"><e-layers><e-layer [tooltipSettings]='tooltipSettings'></e-layers></e-layer></ejs-maps>
TS:
public tooltipSettings: Object ={
visible: true
};
Tooltip Template Property: layers.tooltipTemplate

<div id=template>
\\..
</div>
<ej-map id="container"><e-layers><e-layer tooltipTemplate="template"></e-layer></e-layers></ej-map>
Property: layers.tooltipSettings.template

<div id=template>
\\..
</div>
<ejs-maps id="maps"><e-layers><e-layer [tooltipSettings]='tooltipSettings'></e-layers></e-layer></ejs-maps>
TS:
public tooltipSettings: Object ={
template: “template”
};
Value Path Not Applicable Property: layers.tooltipSettings.valuePath

<ejs-maps id="maps"><e-layers><e-layer [tooltipSettings]='tooltipSettings'></e-layers></e-layer></ejs-maps>
TS:
public tooltipSettings: Object ={
valuePath: “Sales”
};
Format Not Applicable Property: layers.tooltipSettings.format

<ejs-maps id="maps"><e-layers><e-layer [tooltipSettings]='tooltipSettings'></e-layers></e-layer></ejs-maps>
TS:
public tooltipSettings: Object ={
format: ”${State} ${Population}”
};
Border Color Not Applicable Property: layers.tooltipSettings.border.color

<ejs-maps id="maps"><e-layers><e-layer [tooltipSettings]='tooltipSettings'></e-layers></e-layer></ejs-maps>
TS:
public tooltipSettings: Object ={
border: {color: “red” }
};
Border Width Not Applicable Property: layers.tooltipSettings.border.width

<ejs-maps id="maps"><e-layers><e-layer [tooltipSettings]='tooltipSettings'></e-layers></e-layer></ejs-maps>
TS:
public tooltipSettings: Object ={
border: { width: 2 }
};

Annotation Cutomization

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

<ejs-maps id="maps" [annotations]='annotations'></ejs-maps>
TS:
public annotations: Object[] = [{
content: ""
}];
Location X Not Applicable Property: legendSettings.annotations.x

<ejs-maps id="maps" [annotations]='annotations'></ejs-maps>
TS:
public annotations: Object[] = [{
x: “100px”
}];
Location Y Not Applicable Property: legendSettings.annotations.y

<ejs-maps id="maps" [annotations]='annotations'></ejs-maps>
TS:
public annotations: Object[] = [{
y: 250px”
}];
Vertical Alignment Not Applicable Property: legendSettings.annotations.verticalAlignment

<ejs-maps id="maps" [annotations]='annotations'></ejs-maps>
TS:
public annotations: Object[] = [{
verticalAlignment: “Center”
}];
Horizontal Alignment Not Applicable Property: legendSettings.annotations.horizontalAlignment

<ejs-maps id="maps" [annotations]='annotations'></ejs-maps>
TS:
public annotations: Object[] = [{
horizontalAlignment: “Center”
}];
Zindex Not Applicable Property: legendSettings.annotations.zIndex

<ejs-maps id="maps" [annotations]='annotations'></ejs-maps>
TS:
public annotations: Object[] = [{
zIndex: “-1”
}];

Maps Other Properties Customization

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

<ejs-maps id="container" projectionType="Mercator"></ejs-maps>
Background Property: background

<ej-map id="container" background="red"></ej-map>
Property: background

<ejs-maps id="container" background="red"> </ejs-maps>
Enable Group Separator Property: enableGroupSeparator

<ej-map id="container" [enableGroupSeparator]=true></ej-map>
Property: useGroupingSeparator

<ejs-maps id="container" [useGroupingSeparator]="separator"></ejs-maps>
TS:
public separator: boolean: true;
Base Layer Index Property: baseMapIndex

<ej-map id="container" [baseMapIndex]=0></ej-map>
Property: baseLayerIndex

<ejs-maps id="container" [baseLayerIndex]="index"></ejs-maps>
TS:
public index: number:0;
locale Property: locale

<ej-map id="container" locale=""></ej-map>
Not Applicable
Responsive Property: isResponsive

<ej-map id="container" [isResponsive]=true></ej-map>
Not Applicable
Enable Pan Property: enablePan

<ej-map id="container" [enablePan]=true></ej-map>
Not Applicable
Enable Navigation Property: navigationControl.enableNavigation

<ej-map id="container" [enableNavigation]=true></ej-map>
Not Applicable
Navigation Orientation Property: navigationControl.orientation

<ej-map id="container" orientation=""></ej-map>
Not Applicable
Navigation Dock Position Property: navigationControl.dockPosition

<ej-map id="container" dockPosition=""></ej-map>
Not Applicable
Navigation Absolute Position Property: navigationControl.absolutePosition

<ej-map id="container" absolutePosition=""></ej-map>
Not Applicable
Dragging Selection Property: draggingOnSelection

<ej-map id="container" [draggingOnSelection]=true></ej-map>
Not Applicable
Resize Property: enableResize

<ej-map id="container" [enableResize]=true></ej-map>
Not Applicable
Enable Animation Property: enableAnimation

<ej-map id="container" [enableAnimation]=true></ej-map>
Not Applicable
Enable Layer Animation Property: enableLayerChangeAnimation

<ej-map id="container" [enableLayerAnimation]=true></ej-map>
Not Applicable
Center Position Property: centerPosition

<ej-map id="container" centerPosition=""></ej-map>
Property: centerPosition

<ejs-maps id="container" centerPosition=""> </ejs-maps>

Events

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

<ej-map id="container" (shapeSelected)="shapeSelected($event)"></ej-map>
TS:
public shapeSelected(args){
}
Property: shapeSelected

<ejs-maps id="maps" (shapeSelected)="shapeSelected($event)"></ejs-maps>
TS:
public shapeSelected(args){
}
Marker Selected Property: markerSelected

<ej-map id="container" (markerSelected)="markerSelected($event)"></ej-map>
TS:
public markerSelected(args){
}
Property: markerClick

<ejs-maps id="maps" (markerClick)="markerClick($event)"></ejs-maps>
TS:
public markerClick(args){
}
Marker Move Property: markerEnter

<ej-map id="container" (markerEnter)="markerEnter($event)"></ej-map>
TS:
public markerEnter(args){
}
Property: markerMouseMove

<ejs-maps id="maps" (markerMouseMove)="markerMouseMove($event)"></ejs-maps>
TS:
public markerMouseMove(args){
}
Marker Leave Property: markerLeave

<ej-map id="container" (markerLeave)="markerLeave($event)"></ej-map>
TS:
public markerLeave(args){
}
Not Applicable
Legend Item Rendering Property: legendItemRendering

<ej-map id="container" (legendItemRendering)="legendItemRendering($event)"></ej-map>
TS:
public legendItemRendering(args){
}
Not Applicable
Display Text Rendering Property: displayTextRendering

<ej-map id="container" (displayTextRendering)="displayTextRendering($event)"></ej-map>
TS:
public displayTextRendering(args){
}
Property: dataLabelRendering

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

<ej-map id="container" (legendItemClick)="legendItemClick($event)"></ej-map>
TS:
public legendItemClick(args){
}
Not Applicable
Bubble Rendering Property: bubbleRendering

<ej-map id="container" (bubbleRendering)="bubbleRendering($event)"></ej-map>
TS:
public bubbleRendering(args){
}
Property: bubbleRendering

<ejs-maps id="maps" (bubbleRendering)="bubbleRendering($event)"></ejs-maps>
TS:
public bubbleRendering(args){
}
Shape Rendering Property: shapeRendering

<ej-map id="container" (shapeRendering)="shapeRendering($event)"></ej-map>
TS:
public shapeRendering(args){
}
Property: shapeRendering

<ejs-maps id="maps" (shapeRendering)="shapeRendering($event)"></ejs-maps>
TS:
public shapeRendering(args){
}
Zoomed In Property: zoomedIn

<ej-map id="container" (zoomedIn)="zoomedIn($event)"></ej-map>
TS:
public zoomedIn(args){
}
Not Applicable
Render Completed Property: onRenderComplete

<ej-map id="container" (onRenderComplete)="onRenderComplete($event)"></ej-map>
TS:
public onRenderComplete(args){
}
Property: loaded

<ejs-maps id="maps" (loaded)="loaded($event)"></ejs-maps>
TS:
public loaded(args){
}
Panned Property: panned

<ej-map id="container" (panned)="panned($event)"></ej-map>
TS:
public panned(args){
}
Not Applicable
zoomed Out Property: zoomedOut

<ej-map id="container" (zoomedOut)="zoomedOut($event)"></ej-map>
TS:
public zoomedOut(args){
}
Not Applicable
Mouse Over Property: mouseover

<ej-map id="container" (mouseover)="mouseover($event)"></ej-map>
TS:
public mouseover(args){
}
Not Applicable
Mouse Leave Property: mouseleave

<ej-map id="container" (mouseleave)="mouseleave($event)"></ej-map>
TS:
public mouseleave(args){
}
Not Applicable
Click Property: click

<ej-map id="container" (click)="click($event)"></ej-map>
TS:
public click(args){
}
Property: click

<ejs-maps id="maps" (click)="click($event)"></ejs-maps>
TS:
public click(args){
}
Double Click Property: doubleClick

<ej-map id="container" (doubleClick)="doubleClick($event)"></ej-map>
TS:
public doubleClick(args){
}
Property: doubleClick

<ejs-maps id="maps" (doubleClick)="doubleClick($event)"></ejs-maps>
TS:
public doubleClick(args){
}
Right Click Property: rightClick

<ej-map id="container" (rightClick)="rightClick($event)"></ej-map>
TS:
public rightClick(args){
}
Property: rightClick

<ejs-maps id="maps" (rightClick)="rightClick($event)"></ejs-maps>
TS:
public rightClick(args){
}
Initial Load Property: onLoad

<ej-map id="container" (onLoad)="onLoad($event)"></ej-map>
TS:
public onLoad(args){
}
Property: load

<ejs-maps id="maps" (load)="load($event)"></ejs-maps>
TS:
public load(args){
}
Before Print Not Applicable Property: beforePrint

<ejs-maps id="maps" (beforePrint)="beforePrint($event)"></ejs-maps>
TS:
public beforePrint(args){
}
Resize Not Applicable Property: resize

<ejs-maps id="maps" (resize)="resize($event)"></ejs-maps>
TS:
public resize(args){
}
Tooltip Render Not Applicable Property: tooltipRender

<ejs-maps id="maps" (tooltipRender)="tooltipRender($event)"></ejs-maps>
TS:
public tooltipRender(args){
}
Item Selection Not Applicable Property: itemSelection

<ejs-maps id="maps" (itemSelection)="itemSelection($event)"></ejs-maps>
TS:
public itemSelection(args){
}
Item Highlight Not Applicable Property: itemHighlight

<ejs-maps id="maps" (itemHighlight)="itemHighlight($event)"></ejs-maps>
TS:
public itemHighlight(args){
}
Shape Highlight Not Applicable Property: shapeHighlight

<ejs-maps id="maps" (shapeHighlight)="shapeHighlight($event)"></ejs-maps>
TS:
public shapeHighlight(args){
}
Layer Rendering Not Applicable Property: layerRendering

<ejs-maps id="maps" (layerRendering)="layerRendering($event)"></ejs-maps>
TS:
public layerRendering(args){
}
Marker Rendering Not Applicable Property: markerRendering

<ejs-maps id="maps" (markerRendering)="markerRendering($event)"></ejs-maps>
TS:
public markerRendering(args){
}
Bubble Mouse Move Not Applicable Property: bubbleMouseMove

<ejs-maps id="maps" (bubbleMouseMove)="bubbleMouseMove($event)"></ejs-maps>
TS:
public bubbleMouseMove(args){
}
Bubble Mouse Move Not Applicable Property: annotationRendering

<ejs-maps id="maps" (annotationRendering)="annotationRendering($event)"></ejs-maps>
TS:
public annotationRendering(args){
}
Animation Complete Not Applicable Property: animationComplete

<ejs-maps id="maps" (animationComplete)="animationComplete($event)"></ejs-maps>
TS:
public animationComplete(args){
}