Ej1 api migration in Angular Maps component
4 Apr 202324 minutes to read
This article describes the API migration process of Maps component from Essential JS 1 to Essential JS 2.
Size Customization
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Height | Not Applicable |
Property: height<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”></ejs-maps><br/> **TS:** public zoomSettings: Object = { maxZoom: 5 }|
|Mouse Wheel Zoom| **Property:** *zoomSettings.enableMouseWheelZoom*<br/><br/> <ej-map id=”container” [zoomSettings.enableMouseWheelZoom]=”true”></ej-map> | **Property:** *zoomSettings.mouseWheelZoom*<br/><br/> <ejs-maps id=”maps” [zoomSettings]=”zoomSettings”></ejs-maps><br/> **TS:** public zoomSettings: Object = { mouseWheelZoom: true }|
| Double Click Zoom | Not Applicable | **Property:** *zoomSettings.doubleClickZoom*<br/><br/> <ejs-maps id=”maps” [zoomSettings]=”zoomSettings”></ejs-maps><br/> **TS:** public zoomSettings: Object = { doubleClickZoom: true }|
| Pinch Zoom | Not Applicable | **Property:** *zoomSettings.pinchZooming*<br/><br/> <ejs-maps id=”maps” [zoomSettings]=”zoomSettings”></ejs-maps><br/> **TS:** public zoomSettings: Object = { pinchZooming: true }|
| Single Click Zoom | **Property:** *zoomSettings.enableZoomOnSelection*<br/><br/> <ej-map id=”container” [zoomSettings.enableZoomOnSelection]=”true”></ej-map> | **Property:** *zoomSettings.zoomOnClick*<br/><br/> <ejs-maps id=”maps” [zoomSettings]=”zoomSettings”></ejs-maps><br/> **TS:** public zoomSettings: Object = { zoomOnClick: true }|
| Zoom Factor | **Property:** *zoomSettings.factor*<br/><br/><ej-map id=”container” [zoomSettings.factor]=2></ej-map> | **Property:** *zoomSettings.zoomFactor*<br/><br/> <ejs-maps id=”maps” [zoomSettings]=”zoomSettings”></ejs-maps><br/> **TS:** public zoomSettings: Object = { zoomFactor: 2 }|
| Toolbars | Not Applicable | **Property:** *zoomSettings.toolbars*<br/><br/> <ejs-maps id=”maps” [zoomSettings]=”zoomSettings”></ejs-maps><br/> **TS:** public zoomSettings: Object = { toolbars: ["ZoomIn","ZoomOut"] }|
| Toolbar Orientation | Not Applicable | **Property:** *zoomSettings.toolBarOrientation*<br/><br/> <ejs-maps id=”maps” [zoomSettings]=”zoomSettings”></ejs-maps><br/> **TS:** public zoomSettings: Object = { toolBarOrientation: "Horizontal" }|
| Toolbar Vertical Alignment | Not Applicable | **Property:** *zoomSettings.verticalAlignment*<br/><br/> <ejs-maps id=”maps” [zoomSettings]=”zoomSettings”></ejs-maps><br/> **TS:** public zoomSettings: Object = { verticalAlignment: "Center" }|
| Toolbar Horizontal Alignment | Not Applicable | **Property:** *zoomSettings.horizontalAlignment*<br/><br/> <ejs-maps id=”maps” [zoomSettings]=”zoomSettings”></ejs-maps><br/> **TS:** public zoomSettings: Object = { horizontalAlignment: "Center" }|
| Toolbar Highlight Color | Not Applicable | **Property:** *zoomSettings.highlightColor*<br/><br/> <ejs-maps id=”maps” [zoomSettings]=”zoomSettings”></ejs-maps><br/> **TS:** public zoomSettings: Object = { highlightColor: "#e61576" } |
| Toolbar Selection Color | Not Applicable | **Property:** *zoomSettings.selectionColor*<br/><br/> <ejs-maps id=”maps” [zoomSettings]=”zoomSettings”></ejs-maps><br/> **TS:** public zoomSettings: Object = { selectionColor: "#e61576" } |
| Toolbar Fill Color | Not Applicable | **Property:** *zoomSettings.color*<br/><br/> <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 }; |
Navigation Line Customization
| 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){ } |