Migration from Essential JS 1

17 Feb 202224 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"><e-maps-titlesettings text="Members of the UN Security Council"></e-maps-titlesettings></ejs-maps>
Subtitle Text Not Applicable Property: title.subtitle.text

<ejs-maps id="maps"><e-maps-titlesettings><e-titlesettings-subtitlesettings text="In 2017"></e-titlesettings-subtitlesettings></e-maps-titlesettings></ejs-maps>
Title Alignment Not Applicable Property: title.alignment

<ejs-maps id="maps"><e-maps-titlesettings alignment="@Syncfusion.EJ2.Maps.Alignment.Center"></e-maps-titlesettings></ejs-maps>
Subtitle Alignment Not Applicable Property: title.subtitle.alignment

<ejs-maps id="maps"><e-maps-titlesettings><e-titlesettings-subtitlesettings alignment="@Syncfusion.EJ2.Maps.Alignment.Center"> </e-titlesettings-subtitlesettings></e-maps-titlesettings></ejs-maps>

Zooming Customization

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

<ej-map id="container"><e-zoom-settings enable-zoom="true"></e-zoom-settings></ej-map> 		Property: zoomSettings.enable

<ejs-maps id="maps"><e-maps-zoomsettings enable="true"></e-maps-zoomsettings></ejs-maps>
Minimum Zoom Property: zoomSettings.minValue

<ej-map id="container"><e-zoom-settings min-value="2"></e-zoom-settings></ej-map> 		Property: zoomSettings.minZoom

<ejs-maps id="maps"><e-maps-zoomsettings minZoom="2"></e-maps-zoomsettings></ejs-maps>
Maximum Zoom Property: zoomSettings.maxValue

<ej-map id="container"><e-zoom-settings max-value="5"></e-zoom-settings></ej-map> 		Property: zoomSettings.maxZoom

<ejs-maps id="maps"><e-maps-zoomsettings maxZoom="5"></e-maps-zoomsettings></ejs-maps>
Mouse Wheel Zoom Property: zoomSettings.enableMouseWheelZoom

<ej-map id="container"><e-zoom-settings enable-mouse-wheel-zoom="true"></e-zoom-settings></ej-map> 		Property: zoomSettings.maxZoom

<ejs-maps id="maps"><e-maps-zoomsettings mouseWheelZoom="true"></e-maps-zoomsettings></ejs-maps>
Double Click Zoom Not Applicable Property: zoomSettings.doubleClickZoom

<ejs-maps id="maps"><e-maps-zoomsettings doubleClickZoom="true"></e-maps-zoomsettings></ejs-maps>
Pinch Zoom Not Applicable Property: zoomSettings.pinchZooming

<ejs-maps id="maps"><e-maps-zoomsettings pinchZooming="true"></e-maps-zoomsettings></ejs-maps>
Single Click Zoom Property: zoomSettings.enableZoomOnSelection

<ej-map id="container"><e-zoom-settings enable-zoom-on-selection="true"></e-zoom-settings></ej-map> 		Property: zoomSettings.zoomOnClick

<ejs-maps id="maps"><e-maps-zoomsettings zoomOnClick="true"></e-maps-zoomsettings></ejs-maps>
Zoom Factor Property: zoomSettings.factor

<ej-map id="container"><e-zoom-settings factor="2"></e-zoom-settings></ej-map> 		Property: zoomSettings.zoomFactor

<ejs-maps id="maps"><e-maps-zoomsettings zoomFactor="2"></e-maps-zoomsettings></ejs-maps>
Toolbars Not Applicable Property: zoomSettings.toolbars

var toolBarCollection = new[] { “”, “”, “” };
<ejs-maps id="maps">
    <e-maps-zoomsettings toolbars="toolBarCollection">
    </e-maps-zoomsettings>
</ejs-maps>
Toolbar Orientation Not Applicable Property: zoomSettings.toolBarOrientation

<ejs-maps id="maps"><e-maps-zoomsettings toolBarOrientation="@Syncfusion.EJ2.Maps.Orientation.Horizontal"></e-maps-zoomsettings></ejs-maps>
Toolbar Vertical Alignment Not Applicable Property: zoomSettings.verticalAlignment

<ejs-maps id="maps"><e-maps-zoomsettings verticalAlignment="@Syncfusion.EJ2.Maps.Alignment.Center"></e-maps-zoomsettings></ejs-maps>
Toolbar Horizontal Alignment Not Applicable Property: zoomSettings.horizontalAlignment

<ejs-maps id="maps"><e-maps-zoomsettings horizontalAlignment="@Syncfusion.EJ2.Maps.Alignment.Center"></e-maps-zoomsettings></ejs-maps>
Toolbar Highlight Color Not Applicable Property: zoomSettings.highlightColor

<ejs-maps id="maps"><e-maps-zoomsettings highlightColor="#e61576"></e-maps-zoomsettings></ejs-maps>
Toolbar Selection Color Not Applicable Property: zoomSettings.selectionColor

<ejs-maps id="maps"><e-maps-zoomsettings selectionColor="#e61576"></e-maps-zoomsettings></ejs-maps>
Toolbar Fill Color Not Applicable Property: zoomSettings.color

<ejs-maps id="maps"><e-maps-zoomsettings color="#e61576"></e-maps-zoomsettings></ejs-maps>

Layer Customization

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

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

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

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

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

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

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer bingMapType="Aerial"></e-maps-layer></e-maps-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-maps-layers><e-maps-layer key=""></e-maps-layer></e-maps-layers></ejs-maps>
URL Template Property: layers.urltemplate

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

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

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

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer shapeData="WorldMap"></e-maps-layer></e-maps-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-maps-layers><e-maps-layer dataSource="PopulationData"></e-maps-layer></e-maps-layers></ejs-maps>
Query Not Applicable Property: layers.query

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

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

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

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

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

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer animationDuration="100"></e-maps-layer></e-maps-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> <e-layer><e-shape-settings fill="#626171"></e-shape-settings></e-layer></e-layers></ej-map> 		Property: layers.shapeSettings.fill

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-shapesettings fill="#626171"></e-layersettings-shapesettings> </e-maps-layer> </e-maps-layers> </ejs-maps>
Shape Palette Property: layers.shapeSettings.colorPalette

<ej-map id="container"><e-layers> <e-layer><e-shape-settings color-palette="CustomPalette"></e-shape-settings></e-layer></e-layers></ej-map> 		Property: layers.shapeSettings.palette

var paletteCollection = new[] {“red”,”blue” };
<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-shapesettings palette="paletteCollection"></e-layersettings-shapesettings> </e-maps-layer> </e-maps-layers> </ejs-maps>
Shape Point Radius Not Applicable Property: layers.shapeSettings.circleRadius

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-shapesettings circleRadius="10"></e-layersettings-shapesettings> </e-maps-layer> </e-maps-layers> </ejs-maps>
Shape Color Value Path Property: layers.shapeSettings.colorValuePath

<ej-map id="container"><e-layers><e-layer><e-shape-settings color-value-path="Country"></e-shape-settings></e-layer></e-layers></ej-map> 		Property: layers.shapeSettings.colorValuePath

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-shapesettings colorValuePath="Country"></e-layersettings-shapesettings> </e-maps-layer> </e-maps-layers> </ejs-maps>
Shape Value Path Property: layers.shapeSettings.valuePath

<ej-map id="container"><e-layers><e-layer><e-shape-settings value-path="population"></e-shape-settings></e-layer></e-layers></ej-map> 		Property: layers.shapeSettings.valuePath

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-shapesettings valuePath="population"></e-layersettings-shapesettings> </e-maps-layer> </e-maps-layers> </ejs-maps>
Shape DashArray Not Applicable Property: layers.shapeSettings.dashArray

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-shapesettings dashArray="1,2"></e-layersettings-shapesettings> </e-maps-layer> </e-maps-layers> </ejs-maps>
Shape Opacity Not Applicable Property: layers.shapeSettings.opacity

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-shapesettings opacity="0.5"></e-layersettings-shapesettings> </e-maps-layer> </e-maps-layers> </ejs-maps>
Range Color Mapping Property: layers.shapeSettings.colorMappings.rangeColorMapping

List<object> colorMappings = new List<object>();
colorMappings.Add(new Syncfusion.JavaScript.DataVisualization.Models.RangeColorMapping { From="10" , To="40", Color="#D84444" });
<ej-map id="container"><e-layers><e-layer><e-shape-settings"><e-color-mappings range-color-map="colormapping"></e-color-mappings></e-shape-settings></e-layer></e-layers></ej-map> 		Property: layers.shapeSettings.colorMapping

var colormapping = new List<Syncfusion.EJ2.Maps.MapsColorMapping> {
new MapsColorMapping {From = 60000, To = 400000, Color = "#9fdfdf" },
};
<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-shapesettings colorMapping="colormapping"></e-layersettings-shapesettings> </e-maps-layer> </e-maps-layers> </ejs-maps>
Equal Color Mapping Property: layers.shapeSettings.colorMappings.equalColorMapping

List<object> colorMappings = new List<object>();
colorMappings.Add(new Syncfusion.JavaScript.DataVisualization.Models.EqualColorMapping { Value = "Clinton", Color = "#316DB5" });
<ej-map id="container"><e-layers><e-layer><e-shape-settings"><e-color-mappings equal-color-map="colorMappings"></e-color-mappings></e-shape-settings></e-layer></e-layers></ej-map> 		Property: layers.shapeSettings.colorMapping

var colormapping = new List<Syncfusion.EJ2.Maps.MapsColorMapping> {
new MapsColorMapping{ Value = "Trump", Color = "#D84444" },
new MapsColorMapping{ Value = "Clinton", Color = "#316DB5" }
};
<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-shapesettings colorMapping="colormapping"></e-layersettings-shapesettings> </e-maps-layer> </e-maps-layers> </ejs-maps>

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=""></e-layer></e-layers></ej-map> 		Property: layers.markerSettings.dataSource

var data1 = new[] {
new { weather = "clear", Name = "Perth", latitude = -31.950527, longitude = 115.860457, Temperature = 31.6 }
};
<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-markers><e-layersettings-marker dataSource=""> </e-layersettings-marker> </e-layersettings-markers> </e-maps-layer> </e-maps-layers> </ejs-maps>
Marker Template Property: layers.markerTemplate

<script id="template" type="application/jsrender">
<div style="background-image:url('');margin-left:5px;height:25px;width:80px;margin-top:-15px;">
</div>
</script>
<ej-map id="container"><e-layers><e-layer marker-template="template"></e-layer></e-layers></ej-map> 		Property: layers.markerSettings.template

<div id="Template" style="background-image:url('');margin-left:5px;height:25px;width:80px;margin-top:-15px;">
</div>
<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-markers><e-layersettings-marker template="#Template"> </e-layersettings-marker> </e-layersettings-markers> </e-maps-layer> </e-maps-layers> </ejs-maps>
Marker Visible Not Applicable Property: layers.markerSettings.visible

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-markers><e-layersettings-marker visible="true"> </e-layersettings-marker> </e-layersettings-markers> </e-maps-layer> </e-maps-layers> </ejs-maps>
Marker Fill Not Applicable Property: layers.markerSettings.fill

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-markers><e-layersettings-marker fill="#FF471A"> </e-layersettings-marker> </e-layersettings-markers> </e-maps-layer> </e-maps-layers> </ejs-maps>
Marker Height Not Applicable Property: layers.markerSettings.height

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-markers><e-layersettings-marker height="20"> </e-layersettings-marker> </e-layersettings-markers> </e-maps-layer> </e-maps-layers> </ejs-maps>
Marker Width Not Applicable Property: layers.markerSettings.width

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-markers><e-layersettings-marker width="20"> </e-layersettings-marker> </e-layersettings-markers> </e-maps-layer> </e-maps-layers> </ejs-maps>
Marker Shape Not Applicable Property: layers.markerSettings.shape

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-markers><e-layersettings-marker shape="Balloon"> </e-layersettings-marker> </e-layersettings-markers> </e-maps-layer> </e-maps-layers> </ejs-maps>
Marker ImageURL Not Applicable Property: layers.markerSettings.imageUrl

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-markers><e-layersettings-marker imageUrl="http://js.syncfusion.com/demos/web/Images/map/pin.png"> </e-layersettings-marker> </e-layersettings-markers> </e-maps-layer> </e-maps-layers> </ejs-maps>
Marker Opacity Not Applicable Property: layers.markerSettings.opacity

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-markers><e-layersettings-marker opacity="0.5"> </e-layersettings-marker> </e-layersettings-markers> </e-maps-layer> </e-maps-layers> </ejs-maps>
Marker Legend Text Not Applicable Property: layers.markerSettings.legendText

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-markers><e-layersettings-marker legendText="China"> </e-layersettings-marker> </e-layersettings-markers> </e-maps-layer> </e-maps-layers> </ejs-maps>
Marker Offset Not Applicable Property: layers.markerSettings.offset

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-markers><e-layersettings-marker offset="10"> </e-layersettings-marker> </e-layersettings-markers> </e-maps-layer> </e-maps-layers> </ejs-maps>
Marker Animation Duration Not Applicable Property: layers.markerSettings.animationDuration

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-markers><e-layersettings-marker animationDuration="2000"> </e-layersettings-marker> </e-layersettings-markers> </e-maps-layer> </e-maps-layers> </ejs-maps>
Marker Animation Delay Not Applicable Property: layers.markerSettings.animationDelay

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-markers><e-layersettings-marker animationDelay="100"> </e-layersettings-marker> </e-layersettings-markers> </e-maps-layer> </e-maps-layers> </ejs-maps>
Marker DashArray Not Applicable Property: layers.markerSettings.dashArray

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-markers><e-layersettings-marker dashArray="2,3"> </e-layersettings-marker> </e-layersettings-markers> </e-maps-layer> </e-maps-layers> </ejs-maps>
Marker Selection Not Applicable Property: layers.markerSettings.selectionSettings

var selection = new MapsSelectionSettings
{
Enable = true, Fill = "#D2691E", Opacity = 0.5,EnableMultiSelect=false,
};
<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-markers><e-layersettings-marker selectionSettings="selection"> </e-layersettings-marker> </e-layersettings-markers> </e-maps-layer> </e-maps-layers> </ejs-maps>
Marker Highlight Not Applicable Property: layers.markerSettings.highlightSettings

var highlight = new MapsHighlightSettings
{
Enable = true, Fill = "#D2691E", Opacity = 0.5,
};
<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-markers><e-layersettings-marker highlightSettings="highlight"> </e-layersettings-marker> </e-layersettings-markers> </e-maps-layer> </e-maps-layers> </ejs-maps>
Marker Tooltip Not Applicable Property: layers.markerSettings.tooltipSettings

var tooltip = new MapsTooltipSettings
{
Visible = true, Fill = "#363F4C", ValuePath ="State", Template = "#TooltipTemplate"
};
<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-markers><e-layersettings-marker tooltipSettings="tooltip"> </e-layersettings-marker> </e-layersettings-markers> </e-maps-layer> </e-maps-layers> </ejs-maps>

Bubble Customization

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

var bubble = new Syncfusion.JavaScript.DataVisualization.Models.BubbleSetting { ShowBubble = true };
<ej-map id="container"><e-layers><e-layer bubble-settings="bubble"></e-layer></e-layers></ej-map> 		Property: layers.bubbleSettings.visible

var bubbleSettings = new List<Syncfusion.EJ2.Maps.MapsBubble>
{
new Syncfusion.EJ2.Maps.MapsBubble
{ Visible = true }
};
<ejs-maps id="maps"> <e-maps-layers><e-maps-layer bubbleSettings="bubbleSettings"> </e-maps-layer> </e-maps-layers> </ejs-maps>
ValuePath Property: layers.bubbleSettings.valuePath

var bubble = new Syncfusion.JavaScript.DataVisualization.Models.BubbleSetting { ValuePath = "Population" };
<ej-map id="container"><e-layers><e-layer bubble-settings="bubble"></e-layer></e-layers></ej-map> 		Property: layers.bubbleSettings.valuePath

var bubbleSettings = new List<Syncfusion.EJ2.Maps.MapsBubble>
{
new Syncfusion.EJ2.Maps.MapsBubble
{ ValuePath = "Population" }
};
<ejs-maps id="maps"> <e-maps-layers><e-maps-layer bubbleSettings="bubbleSettings"> </e-maps-layer> </e-maps-layers> </ejs-maps>
MinValue Property: layers.bubbleSettings.minValue

var bubble = new Syncfusion.JavaScript.DataVisualization.Models.BubbleSetting { MinValue = 10 };
<ej-map id="container"><e-layers><e-layer bubble-settings="bubble"></e-layer></e-layers></ej-map> 		Property: layers.bubbleSettings.minRadius

var bubbleSettings = new List<Syncfusion.EJ2.Maps.MapsBubble>
{
new Syncfusion.EJ2.Maps.MapsBubble
{ MinRadius = 10 }
};
<ejs-maps id="maps"> <e-maps-layers><e-maps-layer bubbleSettings="bubbleSettings"> </e-maps-layer> </e-maps-layers> </ejs-maps>
MaxValue Property: layers.bubbleSettings.maxValue

var bubble = new Syncfusion.JavaScript.DataVisualization.Models.BubbleSetting { MaxValue = 20};
<ej-map id="container"><e-layers><e-layer bubble-settings="bubble"></e-layer></e-layers></ej-map> 		Property: layers.bubbleSettings.maxRadius

var bubbleSettings = new List<Syncfusion.EJ2.Maps.MapsBubble>
{
new Syncfusion.EJ2.Maps.MapsBubble
{ MaxRadius = 20 }
};
<ejs-maps id="maps"> <e-maps-layers><e-maps-layer bubbleSettings="bubbleSettings"> </e-maps-layer> </e-maps-layers> </ejs-maps>
Bubble Type Not Applicable Property: layers.bubbleSettings.bubbleType

var bubbleSettings = new List<Syncfusion.EJ2.Maps.MapsBubble>
{
new Syncfusion.EJ2.Maps.MapsBubble
{ BubbleType = BubbleType.Circle, }
};
<ejs-maps id="maps"> <e-maps-layers><e-maps-layer bubbleSettings="bubbleSettings"> </e-maps-layer> </e-maps-layers> </ejs-maps>
Color Property: layers.bubbleSettings.color

var bubble = new Syncfusion.JavaScript.DataVisualization.Models.BubbleSetting { Color = "green"};
<ej-map id="container"><e-layers><e-layer bubble-settings="bubble"></e-layer></e-layers></ej-map> 		Property: layers.bubbleSettings.fill

var bubbleSettings = new List<Syncfusion.EJ2.Maps.MapsBubble>
{
new Syncfusion.EJ2.Maps.MapsBubble
{ Fill = "red" }
};
<ejs-maps id="maps"> <e-maps-layers><e-maps-layer bubbleSettings="bubbleSettings"> </e-maps-layer> </e-maps-layers> </ejs-maps>
Opacity Property: layers.bubbleSettings.bubbleOpacity

var bubble = new Syncfusion.JavaScript.DataVisualization.Models.BubbleSetting { BubbleOpacity = 0.5};
<ej-map id="container"><e-layers><e-layer bubble-settings="bubble"></e-layer></e-layers></ej-map> 		Property: layers.bubbleSettings.opacity

var bubbleSettings = new List<Syncfusion.EJ2.Maps.MapsBubble>
{
new Syncfusion.EJ2.Maps.MapsBubble
{ Opacity = 0.5 }
};
<ejs-maps id="maps"> <e-maps-layers><e-maps-layer bubbleSettings="bubbleSettings"> </e-maps-layer> </e-maps-layers> </ejs-maps>
Color Value Path Property: layers.bubbleSettings.colorValuePath

var bubble = new Syncfusion.JavaScript.DataVisualization.Models.BubbleSetting { ColorValuePath = "Population"};
<ej-map id="container"><e-layers><e-layer bubble-settings="bubble"></e-layer></e-layers></ej-map> 		Property: layers.bubbleSettings.colorValuePath

var bubbleSettings = new List<Syncfusion.EJ2.Maps.MapsBubble>
{
new Syncfusion.EJ2.Maps.MapsBubble
{ ColorValuePath = "Population" }
};
<ejs-maps id="maps"> <e-maps-layers><e-maps-layer bubbleSettings="bubbleSettings"> </e-maps-layer> </e-maps-layers> </ejs-maps>
Enable Tooltip Property: layers.bubbleSettings.showTooltip

var bubble = new Syncfusion.JavaScript.DataVisualization.Models.BubbleSetting { ShowTooltip = true};
<ej-map id="container"><e-layers><e-layer bubble-settings="bubble"></e-layer></e-layers></ej-map> 		Property: layers.bubbleSettings.tooltipSettings.visible

var bubbleSettings = new List<Syncfusion.EJ2.Maps.MapsBubble> {
new Syncfusion.EJ2.Maps.MapsBubble {
TooltipSettings = new MapsTooltipSettings { Visible = true }
} };
<ejs-maps id="maps"> <e-maps-layers><e-maps-layer bubbleSettings="bubbleSettings"> </e-maps-layer> </e-maps-layers> </ejs-maps>
Tooltip Template Property: layers.bubbleSettings.tooltipTemplate

<div id="template">
// ..
</div>
var bubble = new Syncfusion.JavaScript.DataVisualization.Models.BubbleSetting { TooltipTemplate = "template"};
<ej-map id="container"><e-layers><e-layer bubble-settings="bubble"></e-layer></e-layers></ej-map> 		Property: layers.bubbleSettings.tooltipSettings.template

<div id="template">
//..
</div>
var bubbleSettings = new List<Syncfusion.EJ2.Maps.MapsBubble> {
new Syncfusion.EJ2.Maps.MapsBubble {
TooltipSettings = new MapsTooltipSettings { Template = "#template" }
} };
<ejs-maps id="maps"> <e-maps-layers><e-maps-layer bubbleSettings="bubbleSettings"> </e-maps-layer> </e-maps-layers> </ejs-maps>
Bubble Selection Not Applicable Property: layers.bubbleSettings.selectionSettings

var bubbleSettings = new List<Syncfusion.EJ2.Maps.MapsBubble> {
new Syncfusion.EJ2.Maps.MapsBubble {
SelectionSettings = new MapsSelectionSettings {
Fill = "#D2691E", Opacity = 1, Enable = true,
EnableMultiSelect = false, }
} };
<ejs-maps id="maps"> <e-maps-layers><e-maps-layer bubbleSettings="bubbleSettings"> </e-maps-layer> </e-maps-layers> </ejs-maps>
Bubble Highlight Not Applicable Property: layers.bubbleSettings.highlightSettings

var bubbleSettings = new List<Syncfusion.EJ2.Maps.MapsBubble> {
new Syncfusion.EJ2.Maps.MapsBubble {
HighlightSettings = new MapsHighlightSettings {
Fill = "#D2691E", Opacity = 1, Enable = true, }
} };
<ejs-maps id="maps"> <e-maps-layers><e-maps-layer bubbleSettings="bubbleSettings"> </e-maps-layer> </e-maps-layers> </ejs-maps>
Range Color Mapping Property: layers.bubbleSettings.colorMappings.rangeColorMapping

List<object> colorMappings = new List<object>();
colorMappings.Add(new Syncfusion.JavaScript.DataVisualization.Models.RangeColorMapping { From="10" , To="40", Color="#D84444" });
var bubblerange = new Syncfusion.JavaScript.DataVisualization.Models.ColorMapping { RangeColorMap = colorMappings,}
<ej-map id="container"><e-layers><e-layer><e-bubble-settings color-mappings="bubblerange" ></e-bubble-settings></e-layer></e-layers></ej-map> 		Property: layers.bubbleSettings.colorMapping

var colormapping = new List<Syncfusion.EJ2.Maps.MapsColorMapping> {
new MapsColorMapping {From = 60000, To = 400000, Color = "#9fdfdf" },
};
<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-bubbles> <e-layersettings-bubble colorMapping="colormapping"> </e-layersettings-bubble></e-layersettings-bubbles> </e-maps-layer> </e-maps-layers> </ejs-maps>
Equal Color Mapping Property: layers.bubbleSettings.colorMappings.equalColorMapping

List<object> equal = new List<object>();
equal.Add(new Syncfusion.JavaScript.DataVisualization.Models.EqualColorMapping { Value="Obama" , Color="red"});
var bubblerange = new Syncfusion.JavaScript.DataVisualization.Models.ColorMapping { EqualColorMap = equal,}
<ej-map id="container"><e-layers><e-layer><e-bubble-settings color-mappings="bubblerange" ></e-bubble-settings></e-layer></e-layers></ej-map> 		Property: layers.bubbleSettings.colorMapping

var colormapping = new List<Syncfusion.EJ2.Maps.MapsColorMapping> {
new MapsColorMapping{ Value = "Trump", Color = "#D84444" },
};
<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-bubbles> <e-layersettings-bubble colorMapping="colormapping"> </e-layersettings-bubble></e-layersettings-bubbles> </e-maps-layer> </e-maps-layers> </ejs-maps>

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> <e-label-settings show-labels="true"></e-label-settings></e-layer></e-layers></ej-map> 		Property: layers.dataLabelSettings.visible

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-datalabelsettings visible="true"> </e-layersettings-datalabelsettings></e-maps-layer> </e-maps-layers> </ejs-maps>
Label Path Property: layers.labelSettings.labelPath

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

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-datalabelsettings labelPath="Continent"> </e-layersettings-datalabelsettings></e-maps-layer> </e-maps-layers> </ejs-maps>
Enable Smart Label Property: layers.labelSettings.enableSmartLabel

<ej-map id="container"><e-layers><e-layer> <e-label-settings enable-smart-label="true"></e-label-settings></e-layer></e-layers></ej-map> 		Not Applicable
Smart Label Size Property: layers.labelSettings.smartLabelSize

<ej-map id="container"><e-layers><e-layer> <e-label-settings smart-label-size=20></e-label-settings></e-layer></e-layers></ej-map> 		Not Applicable
Label Length Property: layers.labelSettings.labelLength

<ej-map id="container"><e-layers><e-layer> <e-label-settings label-length=20></e-label-settings></e-layer></e-layers></ej-map> 		Not Applicable
Opacity Not Applicable Property: layers.dataLabelSettings.opacity

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-datalabelsettings opacity=0.5> </e-layersettings-datalabelsettings></e-maps-layer> </e-maps-layers> </ejs-maps>
Smart Label Mode Not Applicable Property: layers.dataLabelSettings.smartLabelMode

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-datalabelsettings smartLabelMode="@Syncfusion.EJ2.Maps.SmartLabelMode.Trim"> </e-layersettings-datalabelsettings></e-maps-layer> </e-maps-layers> </ejs-maps>
InterSectAction Not Applicable Property: layers.dataLabelSettings.intersectionAction

<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-datalabelsettings intersectionAction="@IntersectAction.None"> </e-layersettings-datalabelsettings></e-maps-layer> </e-maps-layers> </ejs-maps>
Template Not Applicable Property: layers.dataLabelSettings.template

<div id="template">
//..
</div>
<ejs-maps id="maps"> <e-maps-layers><e-maps-layer> <e-layersettings-datalabelsettings template="#template"> </e-layersettings-datalabelsettings></e-maps-layer> </e-maps-layers> </ejs-maps>

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> <e-legend-settings show-legend="true"></e-legend-settings></e-layer></e-layers></ej-map> 		Property: legendSettings.visible

<ejs-maps id="maps"> <e-maps-legendsettings visible="true"> </e-maps-legendsettings> </ejs-maps>
Toggle Visibility Property: layers.legendSettings.toggleVisibility

<ej-map id="container"><e-layers><e-layer> <e-legend-settings toggle-visibility="true"></e-legend-settings></e-layer></e-layers></ej-map> 		Property: legendSettings.toggleVisibility

<ejs-maps id="maps"> <e-maps-legendsettings toggleVisibility="true"> </e-maps-legendsettings> </ejs-maps>
Legend Location X Property: layers.legendSettings.positionX

<ej-map id="container"><e-layers><e-layer> <e-legend-settings position-x="250"></e-legend-settings></e-layer></e-layers></ej-map> 		Property: legendSettings.location

var legendLocation = new { x = 10 };
<ejs-maps id="maps"> <e-maps-legendsettings location="legendLocation"> </e-maps-legendsettings> </ejs-maps>
Legend Location Y Property: layers.legendSettings.positionY

<ej-map id="container"><e-layers><e-layer> <e-legend-settings position-y="350"></e-legend-settings></e-layer></e-layers></ej-map> 		Property: legendSettings.location

var legendLocation = new { y = 20 };
<ejs-maps id="maps"> <e-maps-legendsettings location="legendLocation"> </e-maps-legendsettings> </ejs-maps>
Legend Type Property: layers.legendSettings.type

<ej-map id="container"><e-layers><e-layer> <e-legend-settings type="@Syncfusion.JavaScript.DataVisualization.Models.LegendType.Layers"></e-legend-settings></e-layer></e-layers></ej-map> 		Property: legendSettings.type

<ejs-maps id="maps"> <e-maps-legendsettings type="Layers"> </e-maps-legendsettings> </ejs-maps>
Label Orientation Property: layers.legendSettings.labelOrientation

<ej-map id="container"><e-layers><e-layer> <e-legend-settings label-orientation="@Syncfusion.JavaScript.DataVisualization.Models.LabelOrientation.Vertical"></e-legend-settings></e-layer></e-layers></ej-map> 		Not Applicable
Legend Title Property: layers.legendSettings.title

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

<ejs-maps id="maps"> <e-maps-legendsettings> <e-legendsettings-title text="Union territories of India"> </e-legendsettings-title> </e-maps-legendsettings> </ejs-maps>
Legend Mode Property: layers.legendSettings.mode

<ej-map id="container"><e-layers><e-layer> <e-legend-settings mode="@Syncfusion.JavaScript.DataVisualization.Models.LegendMode.Default"></e-legend-settings></e-layer></e-layers></ej-map> 		Property: legendSettings.mode

<ejs-maps id="maps"> <e-maps-legendsettings mode="Default"> </e-maps-legendsettings> </ejs-maps>
Legend Position Property: layers.legendSettings.position

<ej-map id="container"><e-layers><e-layer> <e-legend-settings position="@Syncfusion.JavaScript.DataVisualization.Models.DockPosition.TopLeft"></e-legend-settings></e-layer></e-layers></ej-map> 		Property: legendSettings.position

<ejs-maps id="maps"> <e-maps-legendsettings position="Top"> </e-maps-legendsettings> </ejs-maps>
Legend DockOnMap Property: layers.legendSettings.dockOnMap

<ej-map id="container"><e-layers><e-layer> <e-legend-settings dock-on-map="true"></e-legend-settings></e-layer></e-layers></ej-map> 		Not Applicable
Legend Alignment Property: layers.legendSettings.dockPosition

<ej-map id="container"><e-layers><e-layer> <e-legend-settings dock-position="@Syncfusion.JavaScript.DataVisualization.Models.Position.Right"></e-legend-settings></e-layer></e-layers></ej-map> 		Property: legendSettings.alignment

<ejs-maps id="maps"> <e-maps-legendsettings alignment="Center"> </e-maps-legendsettings> </ejs-maps>
Legend Left Label Property: layers.legendSettings.leftLabel

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

<ej-map id="container"><e-layers><e-layer> <e-legend-settings right-label="3000M"></e-legend-settings></e-layer></e-layers></ej-map> 		Not Applicable
Legend Shape Property: layers.legendSettings.icon

<ej-map id="container"><e-layers><e-layer> <e-legend-settings shape="Circle"></e-legend-settings></e-layer></e-layers></ej-map> 		Property: legendSettings.shape

<ejs-maps id="maps"> <e-maps-legendsettings visible="true"> </e-maps-legendsettings> </ejs-maps>
Legend Shape Height Property: layers.legendSettings.iconHeight

<ej-map id="container"><e-layers><e-layer> <e-legend-settings icon-height="20"></e-legend-settings></e-layer></e-layers></ej-map> 		Property: legendSettings.shapeHeight

<ejs-maps id="maps"> <e-maps-legendsettings shapeHeight="20"> </e-maps-legendsettings> </ejs-maps>
Legend Shape Width Property: layers.legendSettings.iconWidth

<ej-map id="container"><e-layers><e-layer> <e-legend-settings icon-width="20"></e-legend-settings></e-layer></e-layers></ej-map> 		Property: legendSettings.shapeWidth

<ejs-maps id="maps"> <e-maps-legendsettings shapeWidth="20"> </e-maps-legendsettings> </ejs-maps>
Height Property: layers.legendSettings.height

<ej-map id="container"><e-layers><e-layer> <e-legend-settings height="50"></e-legend-settings></e-layer></e-layers></ej-map> 		Property: legendSettings.width

<ejs-maps id="maps"> <e-maps-legendsettings height="50px"> </e-maps-legendsettings> </ejs-maps>
Width Property: layers.legendSettings.width

<ej-map id="container"><e-layers><e-layer> <e-legend-settings width="150"></e-legend-settings></e-layer></e-layers></ej-map> 		Property: legendSettings.width

<ejs-maps id="maps"> <e-maps-legendsettings width="150px"> </e-maps-legendsettings> </ejs-maps>
Show Labels Property: layers.legendSettings.showLabels

<ej-map id="container"><e-layers><e-layer> <e-legend-settings show-labels="true"></e-legend-settings></e-layer></e-layers></ej-map> 		Not Applicable
Background Not Applicable Property: legendSettings.background

<ejs-maps id="maps"> <e-maps-legendsettings background="transparent"> </e-maps-legendsettings> </ejs-maps>
Label Position Not Applicable Property: legendSettings.labelPosition

<ejs-maps id="maps"> <e-maps-legendsettings labelPosition="@LabelPosition.After"> </e-maps-legendsettings> </ejs-maps>
Label Display Mode Not Applicable Property: legendSettings.labelDisplayMode

<ejs-maps id="maps"> <e-maps-legendsettings labelDisplayMode="@LabelIntersectAction.Trim"> </e-maps-legendsettings> </ejs-maps>
Legend Orientation Not Applicable Property: legendSettings.orientation

<ejs-maps id="maps"> <e-maps-legendsettings orientation="@LegendArrangement.Horizontal"> </e-maps-legendsettings> </ejs-maps>
Legend Item Fill Not Applicable Property: legendSettings.fill

<ejs-maps id="maps"> <e-maps-legendsettings fill="red"> </e-maps-legendsettings> </ejs-maps>
Legend Shape Padding Not Applicable Property: legendSettings.shapePadding

<ejs-maps id="maps"> <e-maps-legendsettings shapePadding="20"> </e-maps-legendsettings> </ejs-maps>
Legend Shape Border Color Not Applicable Property: legendSettings.shapeBorder.color

<ejs-maps id="maps"> <e-maps-legendsettings> <e-legendsettings-border color="green"> </e-legendsettings-border> </e-maps-legendsettings> </ejs-maps>
Legend Shape Border Width Not Applicable Property: legendSettings.shapeBorder.width

<ejs-maps id="maps"> <e-maps-legendsettings> <e-legendsettings-border width="2"> </e-legendsettings-border> </e-maps-legendsettings> </ejs-maps>
Inverter Pointer Not Applicable Property: legendSettings.invertedPointer

<ejs-maps id="maps"> <e-maps-legendsettings invertedPointer="true"> </e-maps-legendsettings> </ejs-maps>
Item Text Style Not Applicable Property: legendSettings.textStyle

<ejs-maps id="maps"> <e-maps-legendsettings> <e-legendsettings-textstyle fontWeight="400" size="14px"></e-legendsettings-textstyle> </e-maps-legendsettings> </ejs-maps>
Title Style Not Applicable Property: legendSettings.textStyle

<ejs-maps id="maps"> <e-maps-legendsettings><e-legendsettings-titlestyle fontWeight="400" size="14px"></e-legendsettings-titlestyle> </e-maps-legendsettings> </ejs-maps>

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><e-shape-settings highlight-color="green"></e-shape-settings> </e-layer></e-layers></ej-map> 		Property: fill

<ejs-maps id="maps"> <e-layersettings-highlightsettings fill="green"></e-layersettings-highlightsettings> </ejs-maps>
Enable Highlight Property: layers.enableMouseHover

<ej-map id="container"><e-layers><e-layer enable-mouse-hover="true"></e-layer></e-layers></ej-map> 		Property: enable

<ejs-maps id="maps"> <e-layersettings-highlightsettings enable="true"></e-layersettings-highlightsettings> </ejs-maps>
Highlight Border Color Property: layers.shapeSettings.highlightStroke

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

<ejs-maps id="maps"> <e-layersettings-highlightsettings ><e-layers-highlight-border color="red"></e-layers-highlight-border></e-layersettings-highlightsettings> </ejs-maps>
Highlight Border Width Property: layers.shapeSettings.highlightBorderWidth

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

<ejs-maps id="maps"> <e-layersettings-highlightsettings ><e-layers-highlight-border width="2"></e-layers-highlight-border></e-layersettings-highlightsettings> </ejs-maps>
Highlight Opacity Not Applicable Property: layers.layers.highlightSettings.opacity

<ejs-maps id="maps"> <e-layersettings-highlightsettings opacity="0.5"></e-layersettings-highlightsettings> </ejs-maps>
Selection Fill Property: layers.shapeSettings.selectionColor

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

<ejs-maps id="maps"> <e-layersettings-selectionsettings fill="#D2691E"></e-layersettings-selectionsettings> </ejs-maps>
Selection Enable Property: layers.enableSelection

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

<ejs-maps id="maps"> <e-layersettings-selectionsettings enable="true"></e-layersettings-selectionsettings> </ejs-maps>
Selection Border Width Property: layers.selectionSettings.selectionStrokeWidth

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

<ejs-maps id="maps"> <e-maps-layers> <e-maps-layer><e-layersettings-selectionsettings fill="#D2691E"></e-layersettings-selectionsettings></e-maps-layer> </e-maps-layers> </ejs-maps>
Selection Border Color Property: layers.selectionSettings.selectionStroke

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

<ejs-maps id="maps"> <e-layersettings-selectionsettings ><e-layers-selection-border color="red"></e-layers-selection-border></e-layersettings-selectionsettings> </ejs-maps>
Selection Opacity Not Applicable Property: layers.selectionSettings.opacity

<ejs-maps id="maps"> <e-maps-layers> <e-maps-layer> <e-layersettings-selectionsettings opacity="0.5"></e-layersettings-selectionsettings> </e-maps-layer> </e-maps-layers></ejs-maps>
Behavior API in Essential JS 1 API in Essential JS 2
Visible Not Applicable Property: layers.navigationLineSettings.visible

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

<ejs-maps id="maps"> <e-maps-layers> <e-maps-layer> <e-layersettings-navigationlines> <e-layersettings-navigationline width="2"></e-layersettings-navigationline> </e-layersettings-navigationlines> </e-maps-layers> </e-maps-layer></ejs-maps>
Longitude Not Applicable Property: layers.navigationLineSettings.longitude

double[] lng= new[] { -97.8717041015625, -89.6649169921875 };
<ejs-maps id="maps"> <e-maps-layers> <e-maps-layer> <e-layersettings-navigationlines> </e-layersettings-navigationlines> <e-layersettings-navigationline longitude="lng" ></e-layersettings-navigationline> </e-maps-layers> </e-maps-layer></ejs-maps>
Latitude Not Applicable Property: layers.navigationLineSettings.latitude

double[] lat= new[] { 22.403410892712124, 21.282336521195344 };
<ejs-maps id="maps"> <e-maps-layers> <e-maps-layer> <e-layersettings-navigationlines> <e-layersettings-navigationline latitude="lat" ></e-layersettings-navigationline> </e-layersettings-navigationlines> </e-maps-layers> </e-maps-layer></ejs-maps>
DashArray Not Applicable Property: layers.navigationLineSettings.dashArray

<ejs-maps id="maps"> <e-maps-layers> <e-maps-layer> <e-layersettings-navigationlines> <e-layersettings-navigationline dashArray="1,2"></e-layersettings-navigationline> </e-layersettings-navigationlines> </e-maps-layers> </e-maps-layer></ejs-maps>
Color Not Applicable Property: layers.navigationLineSettings.color

<ejs-maps id="maps"> <e-maps-layers> <e-maps-layer> <e-layersettings-navigationlines> <e-layersettings-navigationline color="green"></e-layersettings-navigationline> </e-layersettings-navigationlines> </e-maps-layers> </e-maps-layer></ejs-maps>
Angle Not Applicable Property: layers.navigationLineSettings.angle

<ejs-maps id="maps"> <e-maps-layers> <e-maps-layer> <e-layersettings-navigationlines> <e-layersettings-navigationline angle="180"></e-layersettings-navigationline> </e-layersettings-navigationlines> </e-maps-layers> </e-maps-layer></ejs-maps>
Arrow Position Not Applicable Property: layers.navigationLineSettings.arrow.position

var arrow = new MapsArrow {
Position="Start"
}
<ejs-maps id="maps"> <e-maps-layers> <e-maps-layer> <e-layersettings-navigationlines arrowSettings="arrow"> </e-layersettings-navigationlines> </e-maps-layers> </e-maps-layer></ejs-maps>
Show Arrow Not Applicable Property: layers.navigationLineSettings.arrow.showArrow

var arrow = new MapsArrow {
ShowArrow=true
}
<ejs-maps id="maps"> <e-maps-layers> <e-maps-layer> <e-layersettings-navigationlines arrowSettings="arrow"> </e-layersettings-navigationlines> </e-maps-layers> </e-maps-layer></ejs-maps>
Arrow size Not Applicable Property: layers.navigationLineSettings.arrow.size

var arrow = new MapsArrow {
Size=2
}
<ejs-maps id="maps"> <e-maps-layers> <e-maps-layer> <e-layersettings-navigationlines arrowSettings="arrow"> </e-layersettings-navigationlines> </e-maps-layers> </e-maps-layer></ejs-maps>
Arrow Color Not Applicable Property: layers.navigationLineSettings.arrow.color

var arrow = new MapsArrow {
Color="red"
}
<ejs-maps id="maps"> <e-maps-layers> <e-maps-layer> <e-layersettings-navigationlines arrowSettings="arrow"> </e-layersettings-navigationlines> </e-maps-layers> </e-maps-layer></ejs-maps>
Arrow Offset Not Applicable Property: layers.navigationLineSettings.arrow.offSet

var arrow = new MapsArrow {
Offset=10
}
<ejs-maps id="maps"> <e-maps-layers> <e-maps-layer> <e-layersettings-navigationlines arrowSettings="arrow"> </e-layersettings-navigationlines> </e-maps-layers> </e-maps-layer></ejs-maps>

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 show-tooltip="true"></e-layer></e-layers></ej-map> 		Property: layers.tooltipSettings.visible

<ejs-maps id="maps"> <e-maps-layers> <e-maps-layer> <e-layersettings-tooltipsettings visible="true"> </e-layersettings-tooltipsettings> </e-maps-layers> </e-maps-layer></ejs-maps>
Tooltip Template Property: layers.tooltipTemplate

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

<div id=template>
\\..
</div>
<ejs-maps id="maps"> <e-maps-layers> <e-maps-layer> <e-layersettings-tooltipsettings template="#template"> </e-layersettings-tooltipsettings> </e-maps-layers> </e-maps-layer></ejs-maps>
Value Path Not Applicable Property: layers.tooltipSettings.valuePath

<ejs-maps id="maps"> <e-maps-layers> <e-maps-layer> <e-layersettings-tooltipsettings valuePath="Population"> </e-layersettings-tooltipsettings> </e-maps-layers> </e-maps-layer></ejs-maps>
Format Not Applicable Property: layers.tooltipSettings.format

<ejs-maps id="maps"> <e-maps-layers> <e-maps-layer> <e-layersettings-tooltipsettings format=" ${State} ${Population} "> </e-layersettings-tooltipsettings> </e-maps-layers> </e-maps-layer></ejs-maps>
Border Color Not Applicable Property: layers.tooltipSettings.border.color

<ejs-maps id="maps"> <e-maps-layers> <e-maps-layer> <e-layersettings-tooltipsettings> <e-layers-tooltip-border color="red"> </e-layers-tooltip-border> </e-layersettings-tooltipsettings> </e-maps-layers> </e-maps-layer></ejs-maps>
Border Width Not Applicable Property: layers.tooltipSettings.border.width

<ejs-maps id="maps"> <e-maps-layers> <e-maps-layer> <e-layersettings-tooltipsettings> <e-layers-tooltip-border width="2"> </e-layers-tooltip-border> </e-layersettings-tooltipsettings> </e-maps-layers> </e-maps-layer></ejs-maps>

Annotation Cutomization

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

<ejs-maps id="maps"> <e-maps-annotations> <e-maps-annotation content=""> </e-maps-annotation> </e-maps-annotations> </ejs-maps>
Location X Not Applicable Property: legendSettings.annotations.x

<ejs-maps id="maps"> <e-maps-annotations> <e-maps-annotation x="250px"> </e-maps-annotation> </e-maps-annotations> </ejs-maps>
Location Y Not Applicable Property: legendSettings.annotations.y

<ejs-maps id="maps"> <e-maps-annotations> <e-maps-annotation y="150px"> </e-maps-annotation> </e-maps-annotations> </ejs-maps>
Vertical Alignment Not Applicable Property: legendSettings.annotations.verticalAlignment

<ejs-maps id="maps"> <e-maps-annotations> <e-maps-annotation verticalAlignment="@AnnotationAlignment.Center"> </e-maps-annotation> </e-maps-annotations> </ejs-maps>
Horizontal Alignment Not Applicable Property: legendSettings.annotations.horizontalAlignment

<ejs-maps id="maps"> <e-maps-annotations> <e-maps-annotation horizontalAlignment="@AnnotationAlignment.Center"> </e-maps-annotation> </e-maps-annotations> </ejs-maps>
Zindex Not Applicable Property: legendSettings.annotations.zIndex

<ejs-maps id="maps"> <e-maps-annotations> <e-maps-annotation content=""> </e-maps-annotation> </e-maps-annotations> </ejs-maps>

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="@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" enable-group-separator="true"></ej-map> 		Property: useGroupingSeparator

<ejs-maps id="container" useGroupingSeparator="true"> </ejs-maps>
Base Layer Index Property: baseMapIndex

<ej-map id="container" base-map-index="0"></ej-map> 		Property: baseLayerIndex

<ejs-maps id="container" baseLayerIndex="0"> </ejs-maps>
locale Property: locale

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

<ej-map id="container" is-responsive="true"></ej-map> 		Not Applicable
Enable Pan Property: enablePan

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

<ej-map id="container" enable-navigation="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" dock-position=""></ej-map> 		Not Applicable
Navigation Absolute Position Property: navigationControl.absolutePosition

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

<ej-map id="container" dragging-on-selection="true"></ej-map> 		Not Applicable
Resize Property: enableResize

<ej-map id="container" enable-resize="true"></ej-map> 		Not Applicable
Enable Animation Property: enableAnimation

<ej-map id="container" enable-animation="true"></ej-map> 		Not Applicable
Enable Layer Animation Property: enableLayerChangeAnimation

<ej-map id="container" enable-layer-animation="true"></ej-map> 		Not Applicable
Center Position Property: centerPosition

<ej-map id="container" center-position=""></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" shape-selected="shapeSelected"></ej-map>
function shapeSelected(args){
} 		Property: shapeSelected

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

<ej-map id="container" marker-selected="markerSelected"></ej-map>
function markerSelected(args){
} 		Property: markerClick

<ejs-maps id="maps" shapeSelected="shapeSelected"></ejs-maps>
function shapeSelected(args){} 		  Marker Move Property: markerEnter

<ej-map id="container" marker-enter="markerEnter"></ej-map>
function markerEnter(args){
} 		Property: markerMouseMove

<ejs-maps id="maps" shapeSelected="shapeSelected"></ejs-maps>
function shapeSelected(args){} 		  Marker Leave Property: markerLeave

<ej-map id="container" marker-leave="markerLeave"></ej-map>
function markerLeave(args){
} 		Not Applicable
Legend Item Rendering Property: legendItemRendering

<ej-map id="container" legend-item-rendering="legendItemRendering"></ej-map>
function legendItemRendering(args){
} 		Not Applicable                        
Display Text Rendering Property: displayTextRendering

<ej-map id="container" display-text-rendering="displayTextRendering"></ej-map>
function displayTextRendering(args){
} 		Property: dataLabelRendering

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

<ej-map id="container" legend-item-click="legendItemClick"></ej-map>
function legendItemClick(args){
} 		Not Applicable                        
Bubble Rendering Property: bubbleRendering

<ej-map id="container" bubble-rendering="bubbleRendering"></ej-map>
function bubbleRendering(args){
} 		Property: bubbleRendering

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

<ej-map id="container" shape-rendering="shapeRendering"></ej-map>
function shapeRendering(args){
} 		Property: shapeRendering

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

<ej-map id="container" zoomed-in="zoomedIn"></ej-map>
function zoomedIn(args){
} 		Not Applicable                        
Render Completed Property: onRenderComplete

<ej-map id="container" on-render-complete="onRenderComplete"></ej-map>
function onRenderComplete(args){
} 		Property: loaded

<ejs-maps id="maps" onRenderComplete="onRenderComplete"></ejs-maps>
function onRenderComplete(args){} 		                       
Panned Property: panned

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

<ej-map id="container" zoomed-out="zoomedOut"></ej-map>
function zoomedOut(args){
} 		Not Applicable                        
Mouse Over Property: mouseover

<ej-map id="container" mouse-over="mouseOver"></ej-map>
function mouseOver(args){
} 		Not Applicable                        
Mouse Leave Property: mouseleave

<ej-map id="container" mouse-leave="mouseLeave"></ej-map>
function mouseLeave(args){
} 		Not Applicable                        
Click Property: click

<ej-map id="container" click="click"></ej-map>
function click(args){
} 		Property: click

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

<ej-map id="container" double-click="doubleClick"></ej-map>
function doubleClick(args){
} 		Property: doubleClick

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

<ej-map id="container" right-click="rightClick"></ej-map>
function rightClick(args){
} 		Property: rightClick

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

<ej-map id="container" on-load="onLoad"></ej-map>
function onLoad(args){
} 		Property: load

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

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

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

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

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

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

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

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

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

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

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

<ejs-maps id="maps" animationComplete="animationComplete"></ejs-maps>
function animationComplete(args){}