Ej1 api migration in Angular Maps component
13 Jun 202424 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.toolbarSettings.buttonSettings.toolbarItems*<br/><br/> <ejs-maps id=”maps” [zoomSettings]=”zoomSettings”></ejs-maps><br/> **TS:** public zoomSettings: Object = { toolbarSettings:{ buttonSettings: { toolbarItems: ['ZoomIn','ZoomOut'] } } }|
| Toolbar Orientation | Not Applicable | **Property:** *zoomSettings.toolbarSettings.orientation*<br/><br/> <ejs-maps id=”maps” [zoomSettings]=”zoomSettings”></ejs-maps><br/> **TS:** public zoomSettings: Object = { toolbarSettings:{ orientation:"Horizontal"} }|
| Toolbar Vertical Alignment | Not Applicable | **Property:** *zoomSettings.toolbarSettings.verticalAlignment*<br/><br/> <ejs-maps id=”maps” [zoomSettings]=”zoomSettings”></ejs-maps><br/> **TS:** public zoomSettings: Object = { toolbarSettings:{ verticalAlignment: "Center" } }|
| Toolbar Horizontal Alignment | Not Applicable | **Property:** *zoomSettings.toolbarSettings.horizontalAlignment*<br/><br/> <ejs-maps id=”maps” [zoomSettings]=”zoomSettings”></ejs-maps><br/> **TS:** public zoomSettings: Object = { toolbarSettings:{ horizontalAlignment: "Center" } }|
| Toolbar Highlight Color | Not Applicable | **Property:** *zoomSettings.toolbarSettings.buttonSettings.highlightColor*<br/><br/> <ejs-maps id=”maps” [zoomSettings]=”zoomSettings”></ejs-maps><br/> **TS:** public zoomSettings: Object = { toolbarSettings:{ buttonSettings: { highlightColor: "#e61576" } } } |
| Toolbar Selection Color | Not Applicable | **Property:** *zoomSettings.toolbarSettings.buttonSettings.selectionColor*<br/><br/> <ejs-maps id=”maps” [zoomSettings]=”zoomSettings”></ejs-maps><br/> **TS:** public zoomSettings: Object = { toolbarSettings:{ buttonSettings: { selectionColor: "#e61576" } } } |
| Toolbar Fill Color | Not Applicable | **Property:** *zoomSettings.toolbarSettings.buttonSettings.color*<br/><br/> <ejs-maps id=”maps” [zoomSettings]=”zoomSettings”></ejs-maps>`
TS: public zoomSettings: Object = { toolbarSettings:{ buttonSettings: { 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>
|
To render shape maps, there is no need to mention the layer type. You can use the shapeData property alone.Property: layers.shapeData <ejs-maps id="maps"> <e-layers><e-layer [shapeData]="WorldMap"></e-layer></e-layers></ejs-maps>To render online maps, there is no need to mention the layer type. You can use the urlTemplate property alone.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>
|
| 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>
|
There is no need to mention the type of Bing Maps. The type of Bing Maps will be available in the URL that you mention in the getBingUrlTemplate method.Property: getBingUrlTemplate <ejs-maps id="maps" (load)="load($event)"> <e-layers><e-layer></e-layer></e-layers></ejs-maps>TS: public load = (args: ILoadEventArgs) : void => { args.maps.getBingUrlTemplate(“https://dev.virtualearth.net/REST/V1/Imagery/Metadata/Aerial?output=json&uriScheme=https&key=?”).then(function(url) { args.maps.layers[0].urlTemplate= url; }); }; |
| Bing Map Key |
Property: layers.key<ej-map id="container"><e-layers><e-layer key=""></e-layer></e-layers></ej-map>
|
There is no need to mention the key for the online maps. The key will be available in the URL that you mention in the urlTemplate property. For Bing Maps, the key will be available in the URL that you mention in the getBingUrlTemplate method.Property: getBingUrlTemplate <ejs-maps id="maps" (load)="load($event)"> <e-layers><e-layer></e-layer></e-layers></ejs-maps>TS: public load = (args: ILoadEventArgs) : void => { args.maps.getBingUrlTemplate(“https://dev.virtualearth.net/REST/V1/Imagery/Metadata/Aerial?output=json&uriScheme=https&key=?”).then(function(url) { args.maps.layers[0].urlTemplate= url; }); }; |
| URL Template |
Property: layers.urltemplate<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){ } |