Migration from Essential® JS 1

8 Dec 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"><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.toolbarSettings.buttonSettings.toolbarItems

var toolbarSettings = new { buttonSettings = new { toolbarItems = new string[] { “Zoom”, “ZoomIn”, “Pan”, “Reset” } } };
<ejs-maps id="maps">
    <e-maps-zoomsettings toolbarSettings="toolbarSettings">
    </e-maps-zoomsettings>
</ejs-maps>
Toolbar Orientation Not Applicable Property: zoomSettings.toolbarSettings.orientation

var toolbarSettings = new { orientation = “Horizontal” };
<ejs-maps id="maps"><e-maps-zoomsettings toolbarSettings="toolbarSettings"></e-maps-zoomsettings></ejs-maps>
Toolbar Vertical Alignment Not Applicable Property: zoomSettings.toolbarSettings.verticalAlignment

var toolbarSettings = new { verticalAlignment = “Center” };
<ejs-maps id="maps"><e-maps-zoomsettings toolbarSettings="toolbarSettings"></e-maps-zoomsettings></ejs-maps>
Toolbar Horizontal Alignment Not Applicable Property: zoomSettings.toolbarSettings.horizontalAlignment

var toolbarSettings = new { horizontalAlignment = “Center” };
<ejs-maps id="maps"><e-maps-zoomsettings toolbarSettings="toolbarSettings"></e-maps-zoomsettings></ejs-maps>
Toolbar Highlight Color Not Applicable Property: zoomSettings.toolbarSettings.buttonSettings.highlightColor

var toolbarSettings = new { buttonSettings = new { highlightColor = “#e61576” } };
<ejs-maps id="maps"><e-maps-zoomsettings toolbarSettings="toolbarSettings"></e-maps-zoomsettings></ejs-maps>
Toolbar Selection Color Not Applicable Property: zoomSettings.toolbarSettings.buttonSettings.selectionColor

var toolbarSettings = new { buttonSettings = new { selectionColor = “#e61576” } };
<ejs-maps id="maps"><e-maps-zoomsettings toolbarSettings="toolbarSettings"></e-maps-zoomsettings></ejs-maps>
Toolbar Fill Color Not Applicable Property: zoomSettings.toolbarSettings.buttonSettings.color

var toolbarSettings = new { buttonSettings = new { color = “#e61576” } };
<ejs-maps id="maps"><e-maps-zoomsettings toolbarSettings="toolbarSettings"></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> 		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-maps-layers><e-maps-layer shapeData="WorldMap"></e-maps-layer></e-maps-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-maps-layers><e-maps-layer urlTemplate="http://a.tile.openstreetmap.org/level/tileX/tileY.png"></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> 		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"> <e-maps-layers><e-maps-layer></e-maps-layer></e-maps-layers></ejs-maps>
<script>
function load(args) {
 args.maps.getBingUrlTemplate("https://dev.virtualearth.net/REST/V1/Imagery/Metadata/Aerial?output=json&uriScheme=https&key=?").then(function(url) {
  args.maps.layers[0].urlTemplate= url;
 });
}
</script>
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"> <e-maps-layers><e-maps-layer></e-maps-layer></e-maps-layers></ejs-maps>
<script>
function load(args) {
 args.maps.getBingUrlTemplate("https://dev.virtualearth.net/REST/V1/Imagery/Metadata/Aerial?output=json&uriScheme=https&key=?").then(function(url) {
  args.maps.layers[0].urlTemplate= url;
 });
}
</script>
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){}