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@Html.EJS().Maps("container") .Load("load") .Height('300px')Render()
|
Width | Not Applicable |
Property: width@Html.EJS().Maps("container") .Load("load") .Width('400px').Render()
|
Title and Subtitle Customization
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Title Text | Not Applicable |
Property: title.text@Html.EJS().Maps("container") .Load("load").TitleSettings (new Syncfusion.EJ2.Maps.MapsTitleSettings {Text="Members of the UN Security Council"}}).Render()
|
Subtitle Text | Not Applicable |
Property: title.subtitle.text@Html.EJS().Maps("container") .Load("load") .TitleSettings(title =>SubtitleSettings (new MapsSubTitleSettings {Text="- In 2017"})).Render()
|
Title Alignment | Not Applicable |
Property: title.alignment@Html.EJS().Maps("container") .Load("load").TitleSettings (new Syncfusion.EJ2.Maps.MapsTitleSettings {Text="Members of the UN Security Council", Alignment('Far')}}).Render() ) |
Subtitle Alignment | Not Applicable |
Property: title.subtitle.alignment@Html.EJS().Maps("container") .Load("load") .TitleSettings(title =>SubtitleSettings (new MapsSubTitleSettings {Text="- In 2017", Alignment='Far' })).Render()
|
Layer Customization
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Type | Not Applicable |
Property: layers.type@Html.EJS().Maps("container").Load("load").Layers(lr =>{lr.Type('Layer')}).Render()
|
Layer Type |
Property: layers.layerType@(Html.EJ().Map("container").Layers(lr =>{lr.LayerType(LayerType.Geometry)}))
|
Property: layers.layerType@Html.EJS().Maps("container").Load("load").Layers(lr =>{lr.LayerType('Geometry')}).Render()
|
Visible | Not Applicable |
Property: layers.visible@Html.EJS().Maps("container").Load("load").Layers(lr =>{lr.Visible(true)}).Render()
|
Bing Map Type |
Property: layers.bingMapType@(Html.EJ().Map("container").Layers(lr =>{lr.LayerType(Syncfusion.JavaScript.DataVisualization.Models.LayerType.Bing)}))
|
Property: layers.bingMapType@Html.EJS().Maps("container").Load("load").Layers(lr =>{lr.BingMapType('Aerial')}).Render()
|
Bing Map Key |
Property: layers.key@(Html.EJ().Map("container").Layers(lr =>{lr.Key("")}))
|
|
Property: layers.key@Html.EJS().Maps("container").Load("load").Layers(lr =>{lr.Key('')}).Render()
|
||
URL Template |
Property: layers.urltemplate@(Html.EJ().Map("container").Layers(lr =>{ir.Urltemplate:'http://a.tile.openstreetmap.org/level/tileX/tileY.png' }))
|
Property: layers.urlTemplate@Html.EJS().Maps("container").Load("load").Layers(lr =>{lr.UrlTemplate:'http://a.tile.openstreetmap.org/level/tileX/tileY.png' }).Render()
|
Shape Data |
Property: layers.shapeData@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeData(usmap).Add}))
|
Property: layers.shapeData@Html.EJS().Maps("container").Load("load").Layers(lr =>{lr.ShapeData('usmap')}).Render()
|
Data Source |
Property: layers.dataSource@(Html.EJ().Map("container").Layers(lr =>{lr.dataSource('PopulationData')}))
|
Property: layers.dataSource@Html.EJS().Maps("container").Load("load").Layers(lr =>{lr.DataSource('')}).Render()
|
Query | Not Applicable |
Property: layers.query@Html.EJS().Maps("container").Load("load").Layers(lr =>{lr.Query('')}).Render()
|
Shape Data Path |
Property: layers.shapeDataPath@(Html.EJ().Map("container").Layers(lr =>{lr.shapeDataPath('population')}))
|
Property: layers.shapeDataPath@Html.EJS().Maps("container").Load("load").Layers(lr =>{lr.ShapeDataPath('')}).Render()
|
Shape Property Path |
Property: layers.shapePropertyPath@(Html.EJ().Map("container").Layers(lr =>{lr.ShapePropertyPath('Continent')}))
|
Property: layers.shapePropertyPath@Html.EJS().Maps("container").Load("load").Layers(lr =>{lr.shapePropertyPath('')}).Render()
|
Layer Animation | Not Applicable |
Property: layers.animationDuration@Html.EJS().Maps("container").Load("load").Layers(lr =>{lr.ShapePropertyPath('')}).Render()
|
Shape Customization
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Shape Fill |
Property: layers.shapeSettings.fill@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeSettings(ss =>{ss.Fill('#626171')}})))
|
Property: layers.shapeSettings.fill@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{Fill="red" }).Render()
|
Shape Palette |
Property: layers.shapeSettings.colorPalette@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeSettings(ss =>{ss.ColorPalette(ColorPalette.CustomPalette)}}))) .CustomPalette(new List<string>{"#E51400", "#A4C400", "#730202",})
|
Property: layers.shapeSettings.palette@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{ColorMapping = ViewBag.colorMappings}).Render() ViewBag.colorMappings = data;
|
Shape Point Radius | Not Applicable |
Property: layers.shapeSettings.circleRadius@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{circleRadius= 10 }).Render()
|
Shape Color Value Path |
Property: layers.shapeSettings.colorValuePath@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeSettings(ss =>{ss.ColorValuePath('')}})))
|
Property: layers.shapeSettings.colorValuePath@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{ColorValuePath='' }).Render()
|
Shape Value Path |
Property: layers.shapeSettings.valuePath@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeSettings(ss =>{ss.ValuePath('')}})))
|
Property: layers.shapeSettings.valuePath@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{ valuePath='population'}).Render()
|
Shape DashArray | Not Applicable |
Property: layers.shapeSettings.dashArray@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{DashArray='1,2'}).Render()
|
Shape Opacity | Not Applicable |
Property: layers.shapeSettings.opacity@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{ Opacity='0.5' }).Render()
|
Range Color Mapping |
Property: layers.shapeSettings.colorMappings.rangeColorMapping@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeSettings(ss =>{ss..RangeColorMappings(cm =>cm.From(10).To(100).color('blue')}})))
|
Property: layers.shapeSettings.colorMapping@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{ColorMapping = ViewBag.ColorMapping }).Render() ViewBag.ColorMapping = colorMapping; colorMapping.Add(new MapsColorMapping{From =100, To=1000, Color = "#b3daff", Label = null})
|
Equal Color Mapping |
Property: layers.shapeSettings.colorMappings.equalColorMapping@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeSettings(ss =>{ss.EqualColorMappings(cm =>cm.value('').color('blue'))))
|
Property: layers.shapeSettings.colorMapping@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{ColorMapping = ViewBag.ColorMapping }).Render() ViewBag.ColorMapping = colorMapping; colorMapping.Add(new MapsColorMapping{Value = "1", Color = "#b3daff", Label = null})
|
Marker Customization
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Marker Data Source |
Property: layers.markers@(Html.EJ().Map("container").Layers(lr =>{lr.Markers(datasource)})) ViewData["datasource"]= Syncfusion_LocationData.GetSyncfusionLocationData(); List<MapMarker> syncfusionLocationData = new List<MapMarker>{new LocationData {Name = "USA", Latitude =38.8833 , Longitude = -77.0167 }}
|
Property: layers.markerSettings.dataSource@Html.EJS().Maps("container").Load("mapsLoad").Render() function mapsLoad(args){ args.maps.layers[0].markerSettings=[{dataSource:[{latitude: 37.6276571, longitude: -122.4276688, name: 'San Bruno' },}]
|
Marker Template |
Property: layers.markerTemplate@(Html.EJ().Map("container").Layers(lr =>{lr.Markers(datasource)..MarkerTemplate("template")}))
|
Property: layers.markerSettings.template@Html.EJS().Maps("container").Load("mapsLoad").Render() function mapsLoad(args){ args.maps.layers[0].markerSettings =[{template:'Template'}]
|
Marker Visible | Not Applicable |
Property: layers.markerSettings.visible@Html.EJS().Maps("container").Load("mapsLoad").Render() function mapsLoad(args){ args.maps.layers[0].markerSettings =[{visible:true}]
|
Marker Fill | Not Applicable |
Property: layers.markerSettings.fill@Html.EJS().Maps("container").Load("mapsLoad").Render() function mapsLoad(args){ args.maps.layers[0].markerSettings =[{fill:'red'}]
|
Marker Height | Not Applicable |
Property: layers.markerSettings.height@Html.EJS().Maps("container").Load("mapsLoad").Render() function mapsLoad(args){ args.maps.layers[0].markerSettings =[{height:20}]
|
Marker Width | Not Applicable |
Property: layers.markerSettings.width@Html.EJS().Maps("container").Load("mapsLoad").Render() function mapsLoad(args){ args.maps.layers[0].markerSettings =[{width:20}]
|
Marker Shape | Not Applicable |
Property: layers.markerSettings.shape@Html.EJS().Maps("container").Load("mapsLoad").Render() function mapsLoad(args){ args.maps.layers[0].markerSettings =[{shape="Balloon"}]
|
Marker ImageURL | Not Applicable |
Property: layers.markerSettings.imageUrl@Html.EJS().Maps("container").Load("mapsLoad").Render() function mapsLoad(args){ args.maps.layers[0].markerSettings =[{imageUrl:''}]
|
Marker Opacity | Not Applicable |
Property: layers.markerSettings.opacity@Html.EJS().Maps("container").Load("mapsLoad").Render() function mapsLoad(args){ args.maps.layers[0].markerSettings =[{opacity:0.5}]
|
Marker Legend Text | Not Applicable |
Property: layers.markerSettings.legendText@Html.EJS().Maps("container").Load("mapsLoad").Render() function mapsLoad(args){ args.maps.layers[0].markerSettings =[{legendText:'China'}]
|
Marker Offset | Not Applicable |
Property: layers.markerSettings.offset@Html.EJS().Maps("container").Load("mapsLoad").Render() function mapsLoad(args){ args.maps.layers[0].markerSettings =[{offset:new Point(20, 20)}]
|
Marker Animation Duration | Not Applicable |
Property: layers.markerSettings.animationDuration@Html.EJS().Maps("container").Load("mapsLoad").Render() function mapsLoad(args){ args.maps.layers[0].markerSettings =[{animationDuration:2000}]
|
Marker Animation Delay | Not Applicable |
Property: layers.markerSettings.animationDelay@Html.EJS().Maps("container").Load("mapsLoad").Render() function mapsLoad(args){ args.maps.layers[0].markerSettings =[{animationDelay:100}]
|
Marker DashArray | Not Applicable |
Property: layers.markerSettings.dashArray@Html.EJS().Maps("container").Load("mapsLoad").Render() function mapsLoad(args){ args.maps.layers[0].markerSettings =[{dashArray:'2,3'}]
|
Marker Selection | Not Applicable |
Property: layers.markerSettings.selectionSettings@Html.EJS().Maps("container").Load("mapsLoad").Render() function mapsLoad(args){ args.maps.layers[0].markerSettings =[{ selectionSettings : { enable:true,fill:'#D2691E',opacity:1,enableMultiSelect:false }}]
|
Marker Highlight | Not Applicable |
Property: layers.markerSettings.highlightSettings@Html.EJS().Maps("container").Load("mapsLoad").Render() function mapsLoad(args){ args.maps.layers[0].markerSettings =[{ highlightSettings : { enable:true,fill:'#D2691E',opacity:1 }}]
|
Marker Tooltip | Not Applicable |
Property: layers.markerSettings.tooltipSettings@Html.EJS().Maps("container").Load("mapsLoad").Render() function mapsLoad(args){ args.maps.layers[0].markerSettings =[{tooltipSettings : { visible:true,fill:'#363F4C',template:'TooltipTemplate', valuePath:'State', format:'${State}${District}' } }]
|
Bubble Customization
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Visible |
Property: layers.bubbleSettings.visible@(Html.EJ().Map("container").Layers(lr =>{lr.BubbleSettings(bs =>{bs.ShowBubble(true) }})))
|
Property: layers.bubbleSettings.visible@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{lr.BubbleSettings(ViewBag.bubbleSettings)}).Render() MapsBubble bubble = new MapsBubble(); bubble.Visible=true
|
ValuePath |
Property: layers.bubbleSettings.valuePath@(Html.EJ().Map("container").Layers(lr =>{lr.BubbleSettings(bs =>{bs.ValuePath('Population') }})))
|
Property: layers.bubbleSettings.valuePath@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{lr.BubbleSettings(ViewBag.bubbleSettings)}).Render() MapsBubble bubble = new MapsBubble(); bubble.ValuePath='Population'
|
MinValue |
Property: layers.bubbleSettings.minValue@(Html.EJ().Map("container").Layers(lr =>{lr.BubbleSettings(bs =>{bs.MinValue(20) }})))
|
Property: layers.bubbleSettings.minRadius@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{lr.BubbleSettings(ViewBag.bubbleSettings)}).Render() MapsBubble bubble = new MapsBubble(); bubble.MinRadius=10
|
MaxValue |
Property: layers.bubbleSettings.maxValue@(Html.EJ().Map("container").Layers(lr =>{lr.BubbleSettings(bs =>{bs.MaxValue(30) }})))
|
|
Property: layers.bubbleSettings.maxRadius@Html.EJS().Maps("container").Layer(lr=>{lr.BubbleSettings(ViewBag.bubbleSettings)}).Render() MapsBubble bubble = new MapsBubble();bubble.MaxRadius=20
|
||
Bubble Type | Not Applicable |
Property: layers.bubbleSettings.bubbleType@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{lr.BubbleSettings(ViewBag.bubbleSettings)}).Render() MapsBubble bubble = new MapsBubble(); bubble.BubbleType='Circle'
|
Color |
Property: layers.bubbleSettings.color@(Html.EJ().Map("container").Layers(lr =>{lr.BubbleSettings(bs =>{bs.Color('red') }})))
|
Property: layers.bubbleSettings.fill@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{lr.BubbleSettings(ViewBag.bubbleSettings)}).Render() MapsBubble bubble = new MapsBubble(); bubble.Fill='red'
|
Opacity |
Property: layers.bubbleSettings.bubbleOpacity@(Html.EJ().Map("container").Layers(lr =>{lr.BubbleSettings(bs =>{bs.BubbleOpacity(0.6) }})))
|
Property: layers.bubbleSettings.opacity@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render() MapsBubble bubble = new MapsBubble(); bubble.Opacity=0.5
|
Color Value Path |
Property: layers.bubbleSettings.colorValuePath@(Html.EJ().Map("container").Layers(lr =>{lr.BubbleSettings(bs =>{bs.ColorValuePath('')}})))
|
Property: layers.bubbleSettings.colorValuePath@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render() MapsBubble bubble = new MapsBubble(); bubble.ColorValuePath=''
|
Enable Tooltip |
Property: layers.bubbleSettings.showTooltip@(Html.EJ().Map("container").Layers(lr =>{lr.BubbleSettings(bs =>{bs.ShowTooltip(true) }})))
|
Property: layers.bubbleSettings.tooltipSettings.visible@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{lr.BubbleSettings(ViewBag.bubbleSettings)}).Render() MapsBubble bubble = new MapsBubble(); bubble.TooltipSetting.Visible=true
|
Tooltip Template |
Property: layers.bubbleSettings.tooltipTemplate@(Html.EJ().Map("container").Layers(lr =>{lr.BubbleSettings(bs =>{bs.TooltipTemplate('Template') }})))
|
Property: layers.bubbleSettings.tooltipSettings.template@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{lr.BubbleSettings(ViewBag.bubbleSettings)}).Render() MapsBubble bubble = new MapsBubble(); bubble.TooltipSetting.Template='template'
|
Bubble Selection | Not Applicable |
Property: layers.bubbleSettings.selectionSettings@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render() MapsBubble bubble = new MapsBubble(); bubble.SelectionSetting.Enable=true
|
Bubble Highlight | Not Applicable |
Property: layers.bubbleSettings.highlightSettings@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{lr.BubbleSettings(ViewBag.bubbleSettings)}).Render() MapsBubble bubble = new MapsBubble(); bubble.HighlightSetting.Enable=true
|
Range Color Mapping |
Property: layers.bubbleSettings.colorMappings.rangeColorMapping@(Html.EJ().Map("container").Layers(lr =>{lr.BubbleSettings(bs =>{bs. }})))
|
Property: layers.bubbleSettings.colorMapping@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{lr.BubbleSettings(ViewBag.bubbleSettings)}).Render() MapsBubble bubble = new MapsBubble(); bubble.
|
Equal Color Mapping |
Property: layers.bubbleSettings.colorMappings.equalColorMapping@(Html.EJ().Map("container").Layers(lr =>{lr.BubbleSettings(bs =>{bs. }})))
|
Property: layers.bubbleSettings.colorMapping@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render() MapsBubble bubble = new MapsBubble(); bubble.
|
DataLabel Customization
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Visible |
Property: layers.labelSettings.showLabels@(Html.EJ().Map("container").Layers(lr =>{lr.LabelSettings(lb =>{lb.ShowLabels(true)})}))
|
Property: layers.dataLabelSettings.visible@Html.EJS().Maps("container").Layer({lr.DataLabelSettings(new MapsDataLabelSettings{Visible = true})).Render()
|
Label Path |
Property: layers.labelSettings.labelPath@(Html.EJ().Map("container").Layers(lr =>{lr.LabelSettings(lb =>{lb.LabelPath("iso_3166_2")})}))
|
Property: layers.dataLabelSettings.labelPath@Html.EJS().Maps("container").Layer({lr.DataLabelSettings(new MapsDataLabelSettings{LabelPath = "name",})).Render()
|
Enable Smart Label |
Property: layers.labelSettings.enableSmartLabel@(Html.EJ().Map("container").Layers(lr =>{lr.LabelSettings(lb =>{lb.EnableSmartLabel(true);})}))
|
Not Applicable |
Smart Label Size |
Property: layers.labelSettings.smartLabelSize@(Html.EJ().Map("container").Layers(lr =>{lr.LabelSettings(lb =>{lb.SmartLabelSize(20)})}))
|
Not Applicable |
Label Length |
Property: layers.labelSettings.labelLength@(Html.EJ().Map("container").Layers(lr =>{lr.LabelSettings(lb =>{lb.LabelLength(20) })}))
|
Not Applicable |
Opacity | Not Applicable |
Property: layers.dataLabelSettings.opacity@Html.EJS().Maps("container").Layer({lr.DataLabelSettings(new MapsDataLabelSettings{Opacity=0.5})).Render()
|
Smart Label Mode | Not Applicable |
Property: layers.dataLabelSettings.smartLabelMode@Html.EJS().Maps("container").Layer({lr.DataLabelSettings(new MapsDataLabelSettings{ SmartLabelMode = SmartLabelMode.Trim})).Render()
|
InterSectAction | Not Applicable |
Property: layers.dataLabelSettings.intersectionAction@Html.EJS().Maps("container").Layer({lr.DataLabelSettings(new MapsDataLabelSettings{ IntersectionAction = IntersectionAction.Trim})).Render()
|
Template | Not Applicable |
Property: layers.dataLabelSettings.template@Html.EJS().Maps("container").Layer({lr.DataLabelSettings(new MapsDataLabelSettings{Template='Temaplate'})).Render()
|
Legend Customization
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Visible |
Property: layers.legendSettings.showLegend@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.ShowLegend(true})}))
|
Property: legendSettings.visible@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ Visible = true}).Render()
|
Toggle Visibility |
Property: layers.legendSettings.toggleVisibility@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.ToggleVisibility(true)})}))
|
Property: legendSettings.toggleVisibility@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ToggleVisibility = true}).Render()
|
Legend Location X |
Property: layers.legendSettings.positionX@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.PositionX(250)})}))
|
Property: legendSettings.location@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ }).Render()
|
Legend Location Y |
Property: layers.legendSettings.positionY@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.PositionY(250)})}))
|
Property: legendSettings.location@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ }).Render()
|
Legend Type |
Property: layers.legendSettings.type@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.Type:'Layers'})}))
|
Property: legendSettings.type@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ Type = Syncfusion.EJ2.Maps.LegendType.Layers}).Render()
|
Label Orientation |
Property: layers.legendSettings.labelOrientation@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.LabelOrientation('Vertical')})}))
|
Not Applicable |
Legend Title |
Property: layers.legendSettings.title@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.Title:'Union territories of India'})}))
|
Property: legendSettings.title@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ Title= ""}).Render()
|
Legend Mode |
Property: layers.legendSettings.mode@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.Mode('Default')})}))
|
Property: legendSettings.mode@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ Mode = Syncfusion.EJ2.Maps.LegendMode.Default, }).Render()
|
Legend Position |
Property: layers.legendSettings.position@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.Position('TopLeft')})}))
|
Property: legendSettings.position@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{Position = Syncfusion.EJ2.Maps.LegendPosition.Bottom, }).Render()
|
Legend DockOnMap |
Property: layers.legendSettings.dockOnMap@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.DockOnMap(true)})}))
|
Not Applicable |
Legend Alignment |
Property: layers.legendSettings.dockPosition@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.DockPosition('Right')})}))
|
Property: legendSettings.alignment@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{Alignment = Syncfusion.EJ2.Maps.Alignment.Center }).Render()
|
Legend Left Label |
Property: layers.legendSettings.leftLabel@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.LeftLabel('1000M')})}))
|
Not Applicable |
Legend Right Label |
Property: layers.legendSettings.rightLabel@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls. RightLabel('3000M')})}))
|
Not Applicable |
Legend Shape |
Property: layers.legendSettings.icon@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.Icon('Circle')})}))
|
Property: legendSettings.shape@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{Shape= Syncfusion.EJ2.Maps.LegendShape.Circle }).Render()
|
Legend Shape Height |
Property: layers.legendSettings.iconHeight@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.IconHeight(20)})}))
|
Property: legendSettings.shapeHeight@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ShapeHeight=20 }).Render()
|
Legend Shape Width |
Property: layers.legendSettings.iconWidth@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.IconWidth(20)})}))
|
Property: legendSettings.shapeWidth@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ShapeWidth=20 }).Render()
|
Height |
Property: layers.legendSettings.height@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.Height(50)})}))
|
Property: legendSettings.width@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{Height='50'}).Render()
|
Width |
Property: layers.legendSettings.width@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.Width(50)})}))
|
Property: legendSettings.width@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ Width='150' }).Render()
|
Show Labels |
Property: layers.legendSettings.showLabels@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.ShowLabels(true)})}))
|
Not Applicable |
Background | Not Applicable |
Property: legendSettings.background@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{Background='transparent' }).Render()
|
Label Position | Not Applicable |
Property: legendSettings.labelPosition@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{LabelPosition = Syncfusion.EJ2.Maps.LabelPosition.After }).Render()
|
Label Display Mode | Not Applicable |
Property: legendSettings.labelDisplayMode@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{LabelDisplayMode = Syncfusion.EJ2.Maps.LabelIntersectAction.Trim, }).Render()
|
Legend Orientation | Not Applicable |
Property: legendSettings.orientation@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{Orientation = Syncfusion.EJ2.Maps.LegendArrangement.Horizontal, }).Render()
|
Legend Item Fill | Not Applicable |
Property: legendSettings.fill@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ Fill='red'}).Render()
|
Legend Shape Padding | Not Applicable |
Property: legendSettings.shapePadding@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ ShapePadding=20}).Render()
|
Legend Shape Border Color | Not Applicable |
Property: legendSettings.shapeBorder.color@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ShapeBorder = { Color="green" }, }).Render()
|
Legend Shape Border Width | Not Applicable |
Property: legendSettings.shapeBorder.width@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ShapeBorder = { Width=30 }, }).Render()
|
Inverter Pointer | Not Applicable |
Property: legendSettings.invertedPointer@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{InvertedPointer= true }).Render()
|
Item Text Style | Not Applicable |
Property: legendSettings.textStyle@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{TextStyle = new MapsFont { Size = "14px" } }).Render()
|
Title Style | Not Applicable |
Property: legendSettings.textStyle@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ TitleStyle= new MapsFont { Size = "14px" }}).Render()
|
Zooming Customization
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Enable | Not Applicable |
Property: zoomSettings.enableZoom@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{ Enable=true}).Render()
|
Minimum Zoom |
Property: zoomSettings.minValue@(Html.EJ().Map("container").ZoomSettings(zm=>{zm.MinValue(2)}))
|
Property: zoomSettings.minZoom@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{MinZoom=2,}).Render()
|
Maximum Zoom |
Property: zoomSettings.maxValue@(Html.EJ().Map("container").ZoomSettings(zm=>{zm.MaxValue(50)}))
|
Property: zoomSettings.maxZoom@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{MaxZoom=4,}).Render()
|
Mouse Wheel Zoom |
Property: zoomSettings.enableMouseWheelZoom@(Html.EJ().Map("container").ZoomSettings(zm=>{zm.EnableMouseWheelZoom(true)}))
|
Property: zoomSettings.maxZoom@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{MouseWheelZoom=true}).Render()
|
Double Click Zoom | Not Applicable |
Property: zoomSettings.doubleClickZoom@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{DoubleClickZoom=true}).Render()
|
Pinch Zoom | Not Applicable |
Property: zoomSettings.pinchZooming@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{PinchZooming=true}).Render()
|
Single Click Zoom |
Property: zoomSettings.enableZoomOnSelection@(Html.EJ().Map("container").ZoomSettings(zm=>{zm.EnableZoomOnSelection(true)}))
|
Property: zoomSettings.zoomOnClick@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{ZoomOnClick=true}).Render()
|
Zoom Factor |
Property: zoomSettings.factor@(Html.EJ().Map("container").ZoomSettings(zm=>{zm.Factor(2)}))
|
Property: zoomSettings.zoomFactor@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{ ZoomFactor=2,}).Render()
|
Toolbars | Not Applicable |
Property: zoomSettings.toolbars@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{Toolbars =['ZoomIn']}).Render()
|
Toolbar Orientation | Not Applicable |
Property: zoomSettings.toolBarOrientation@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{ToolBarOrientation= Syncfusion.EJ2.Maps.Orientation.Horizontal}).Render()
|
Toolbar Vertical Alignment | Not Applicable |
Property: zoomSettings.verticalAlignment@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{VerticalAlignment = Syncfusion.EJ2.Maps.Alignment.Center}).Render()
|
Toolbar Horizontal Alignment | Not Applicable |
Property: zoomSettings.horizontalAlignment@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{HorizontalAlignment=Syncfusion.EJ2.Maps.Alignment.Center}).Render()
|
Toolbar Highlight Color | Not Applicable |
Property: zoomSettings.highlightColor@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{HighlightColor="#e61576"}).Render()
|
Toolbar Selection Color | Not Applicable |
Property: zoomSettings.selectionColor@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{SelectionColor="#e61576"}).Render()
|
Toolbar Fill Color | Not Applicable |
Property: zoomSettings.color@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{Color="#e61576"}).Render()
|
Highlight And Selection Customization
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Highlight Fill |
Property: layers.shapeSettings.highlightColor@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeSettings(sp =>{sp.HighlightColor('green') })}))
|
Property: fill l @Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{HighlightSettings = new MapsHighlightSettings{Fill='red'}}).Render()
|
Enable Highlight |
Property: layers.enableMouseHover@(Html.EJ().Map("container").Layers(lr =>{lr.EnableMouseHover(true)}))
|
Property: enable@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{HighlightSettings = new MapsHighlightSettings{Enable=true}}).Render()
|
Highlight Border Color |
Property: layers.shapeSettings.highlightStroke@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeSettings(sp =>{sp.HighlightStroke('red')})}))
|
Property: layers.highlightSettings.border.color@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{HighlightSettings = new MapsHighlightSettings{Border={Color='green'}}}).Render()
|
Highlight Border Width |
Property: layers.shapeSettings.highlightBorderWidth@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeSettings(sp =>{sp.HighlightBorderWidth=('2')})}))
|
Property: layers.highlightSettings.border.width@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{HighlightSettings = new MapsHighlightSettings{Border={Width=2}}}).Render()
|
Highlight Opacity | Not Applicable |
Property: layers.layers.highlightSettings.opacity@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{HighlightSettings = new MapsHighlightSettings{Opacity=0.3}}).Render()
|
Selection Fill |
Property: layers.shapeSettings.selectionColor@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeSettings(sp =>{sp.SelectionColor('blue')})}))
|
Property: layers.selectionSettings.fill@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{SelectionSettings = new MapsSelectionSettings{Fill='red'}}).Render()
|
Selection Enable |
Property: layers.enableSelection@(Html.EJ().Map("container").Layers(lr =>{lr.EnableSelection(true)}))
|
Property: layers.selectionSettings.enable@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{SelectionSettings = new MapsSelectionSettings{Enable= true}}).Render()
|
Selection Border Width |
Property: layers.selectionSettings.selectionStrokeWidth@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeSettings(sp =>{sp.SelectionStrokeWidth(2)})}))
|
Property: layers.selectionSettings.border.width@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{SelectionSettings = new MapsSelectionSettings{Border={Width=2}}}).Render()
|
Selection Border Color |
Property: layers.selectionSettings.selectionStroke@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeSettings(sp =>{sp.SelectionStroke("white")})}))
|
Property: layers.selectionSettings.border.color@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{SelectionSettings = new MapsSelectionSettings{Border={Color='red'}}}).Render()
|
Selection Opacity | Not Applicable |
Property: layers.selectionSettings.opacity@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{SelectionSettings = new MapsSelectionSettings{Opacity=0.3}}).Render()
|
Navigation Line Customization
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Visible | Not Applicable |
Property: layers.navigationLineSettings.visible@Html.EJS().Maps("container").Render() function mapsLoad(args){args.maps.layers[0].navigationLineSettings{ visible: true}}
|
Width | Not Applicable |
Property: layers.navigationLineSettings.width@Html.EJS().Maps("container").Render() function mapsLoad(args){args.maps.layers[0].navigationLineSettings{width:2}}
|
Longitude | Not Applicable |
Property: layers.navigationLineSettings.longitude@Html.EJS().Maps("container").Render() function mapsLoad(args){args.maps.layers[0].navigationLineSettings{longitude: [-97.8717041015625, -89.6649169921875]}}
|
Latitude | Not Applicable |
Property: layers.navigationLineSettings.latitude@Html.EJS().Maps("container").Render() function mapsLoad(args){args.maps.layers[0].navigationLineSettings{Latitude= [22.403410892712124, 21.282336521195344] }}
|
DashArray | Not Applicable |
Property: layers.navigationLineSettings.dashArray@Html.EJS().Maps("container").Render() function mapsLoad(args){args.maps.layers[0].navigationLineSettings{dashArray:"1,2"}}
|
Color | Not Applicable |
Property: layers.navigationLineSettings.color@Html.EJS().Maps("container").Render() function mapsLoad(args){args.maps.layers[0].navigationLineSettings{color:"green"}}
|
Angle | Not Applicable |
Property: layers.navigationLineSettings.angle@Html.EJS().Maps("container").Render() function mapsLoad(args){args.maps.layers[0].navigationLineSettings{angle:180}}
|
Arrow Position | Not Applicable |
Property: layers.navigationLineSettings.arrow.position@Html.EJS().Maps("container").Render() function mapsLoad(args){args.maps.layers[0].navigationLineSettings{arrow:{ position:"start" }}}
|
Show Arrow | Not Applicable |
Property: layers.navigationLineSettings.arrow.showArrow@Html.EJS().Maps("container").Render() function mapsLoad(args){args.maps.layers[0].navigationLineSettings{arrow:{ showArrow:true }}}
|
Arrow size | Not Applicable |
Property: layers.navigationLineSettings.arrow.size@Html.EJS().Maps("container").Render() function mapsLoad(args){args.maps.layers[0].navigationLineSettings{ arrow:{ size:2 }}}
|
Arrow Color | Not Applicable |
Property: layers.navigationLineSettings.arrow.color@Html.EJS().Maps("container").Render() function mapsLoad(args){args.maps.layers[0].navigationLineSettings{arrow:{ color:'red' }}}
|
Arrow Offset | Not Applicable |
Property: layers.navigationLineSettings.arrow.offSet@Html.EJS().Maps("container").Render() function mapsLoad(args){args.maps.layers[0].navigationLineSettings{arrow:{ offSet:10 }}}
|
Tooltip Customization
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Tooltip Enable |
Property: layers.showTooltip@(Html.EJ().Map("container").Layers(lr =>{lr.ShowTooltip(true)}))
|
Property: layers.tooltipSettings.visible@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{ new Syncfusion.EJ2.Maps.MapsLayer{ TooltipSettings = new MapsTooltipSettings{Visible= true }}}).Render()
|
Tooltip Template |
Property: layers.tooltipTemplate@(Html.EJ().Map("container").Layers(lr =>{lr.ToolTipTemplate('myTooltip').Add}))
|
Property: layers.tooltipSettings.visible@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{ new Syncfusion.EJ2.Maps.MapsLayer{ TooltipSettings = new MapsTooltipSettings{Template='tremplate'}}}).Render()
|
Value Path | Not Applicable |
Property: layers.tooltipSettings.valuePath@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{ new Syncfusion.EJ2.Maps.MapsLayer{ TooltipSettings = new MapsTooltipSettings{ValuePath = "State"}}}).Render()
|
Format | Not Applicable |
Property: layers.tooltipSettings.format@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{ new Syncfusion.EJ2.Maps.MapsLayer{ TooltipSettings = new MapsTooltipSettings{Format='${State}}}}).Render()
|
Border Color | Not Applicable |
Property: layers.tooltipSettings.border.color@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{ new Syncfusion.EJ2.Maps.MapsLayer{ TooltipSettings = new MapsTooltipSettings{Border={ color:'red' } }}}).Render()
|
Border Width | Not Applicable |
Property: layers.tooltipSettings.border.width@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{ new Syncfusion.EJ2.Maps.MapsLayer{ TooltipSettings = new MapsTooltipSettings{Border={ width:'' }}}}).Render()
|
Text Style | Not Applicable |
Property: layers.tooltipSettings.textStyle@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>{ new Syncfusion.EJ2.Maps.MapsLayer{ TooltipSettings = new MapsTooltipSettings{TextStyle= { Size="15px", Color="red", FontFamily="arial", FontWeight="bold", FontStyle="normal", Opacity=0.8 }}}}).Render()
|
Annotation Cutomization
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Content | Not Applicable |
Property: legendSettings.annotations.content@Html.EJS().Maps("container")Load("mapsLoad").Render() function mapsLoad(args){args.maps.annotations=[{ content:'USA Population 2018}]}
|
Location X | Not Applicable |
Property: legendSettings.annotations.x@Html.EJS().Maps("container")Load("mapsLoad").Render() function mapsLoad(args){args.maps.annotations=[{x:'250px' }]}
|
Location Y | Not Applicable |
Property: legendSettings.annotations.y@Html.EJS().Maps("container")Load("mapsLoad").Render() function mapsLoad(args){args.maps.annotations=[{ y:'150px'}]}
|
Vertical Alignment | Not Applicable |
Property: legendSettings.annotations.verticalAlignment@Html.EJS().Maps("container")Load("mapsLoad").Render() function mapsLoad(args){args.maps.annotations=[{verticalAlignment:'Center'}]}
|
Horizontal Alignment | Not Applicable |
Property: legendSettings.annotations.horizontalAlignment@Html.EJS().Maps("container")Load("mapsLoad").Render() function mapsLoad(args){args.maps.annotations=[{horizontalAlignment:'Center'}]}
|
Zindex | Not Applicable |
Property: legendSettings.annotations.zIndex@Html.EJS().Maps("container")Load("mapsLoad").Render() function mapsLoad(args){args.maps.annotations=[{ zIndex:'-1' }]}
|
Maps Other Properties Customization
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Projection Type | Not Applicable |
Property: projectionType@Html.EJS().Maps("container").ProjectionType(ProjectionType.Eckert3).Render()
|
Background |
Property: background@Html.EJ().Maps("container").Background('red'))
|
Property: background@Html.EJS().Maps("container").Background("red").Render()
|
Enable Group Separator |
Property: enableGroupSeparator@Html.EJ().Maps("container").UseGroupingSeparator(true))
|
Property: useGroupingSeparator@Html.EJS().Maps("container").UseGroupingSeparator(true).Render()
|
Base Layer Index |
Property: baseMapIndex@Html.EJ().Maps("container").BaseLayerIndex(1))
|
Property: baseLayerIndex@Html.EJS().Maps("container").BaseLayerIndex(1).Render()
|
locale |
Property: locale@(Html.EJ().Map("container").Locale('en-us')
|
Not Applicable |
Responsive |
Property: isResponsive@(Html.EJ().Map("container").IsResponsivet(true)
|
Not Applicable |
Enable Pan |
Property: enablePan@(Html.EJ().Map("container").EnablePan(true)
|
Not Applicable |
Enable Navigation |
Property: navigationControl.enableNavigation@(Html.EJ().Map("container").NavigationControl(new{ enableNavigation=true })
|
Not Applicable |
Navigation Orientation |
Property: navigationControl.orientation@(Html.EJ().Map("container").NavigationControl(new{ orientation='vertical' })
|
Not Applicable |
Navigation Dock Position |
Property: navigationControl.dockPosition@(Html.EJ().Map("container").NavigationControl(new{ dockPosition='centerleft' })
|
Not Applicable |
Navigation Absolute Position |
Property: navigationControl.absolutePosition@(Html.EJ().Map("container").NavigationControl(new{ absolutePosition={ x: 100, y : 100 } })
|
Not Applicable |
Dragging Selection |
Property: draggingOnSelection@(Html.EJ().Map("container").DraggingOnSelection(true)
|
Not Applicable |
Resize |
Property: enableResize@(Html.EJ().Map("container").EnableResize(true))
|
Not Applicable |
Enable Animation |
Property: enableAnimation@(Html.EJ().Map("container").EnableAnimation(true))
|
Not Applicable |
Enable Layer Animation |
Property: enableLayerChangeAnimation@(Html.EJ().Map("container").EnableLayerChangeAnimation(true))
|
Not Applicable |
Center Position |
Property: centerPosition@Html.EJS().Maps("container").CenterPosition(new { latitude = 35.65, longitude = -97.3 }))
|
Property: centerPosition@Html.EJS().Maps("container").CenterPosition(new { latitude = 35.65, longitude = -97.3 }).Render()
|
Events
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Shape Selected |
Property: shapeSelected@(Html.EJ().Map("container").ShapeSelected("shapeSelected")) function shapeSelected(args){}
|
Property: shapeSelected@Html.EJS().Maps("container").ShapeSelected("shapeSelected").Render() function shapeSelected(args){}
|
Marker Selected |
Property: markerSelected@(Html.EJ().Map("container").MarkerClick("markerClick")) function markerClick(args){}
|
Property: markerClick@Html.EJS().Maps("container").Load("mapLoad").Render() function mapLoad(args){}
|
Marker Move |
Property: markerEnter@(Html.EJ().Map("container"). MarkerClick(" markerClick")) function markerClick(args){}
|
Property: markerMouseMove@Html.EJS().Maps("container").Load("mapLoad").Render() function mapLoad(args){}
|
Marker Leave |
Property: markerLeave@(Html.EJ().Map("container").MarkerLeave("markerLeave")) function markerLeave(args){}
|
Not Applicable |
Legend Item Rendering |
Property: legendItemRendering@(Html.EJ().Map("container").LegendItemRendering("legendItemRendering")) function legendItemRendering(args){}
|
Not Applicable |
Display Text Rendering |
Property: displayTextRendering@(Html.EJ().Map("container").DisplayTextRendering("displayTextRendering")) function displayTextRendering(args){}
|
Property: dataLabelRendering@Html.EJS().Maps("container").DataLabelRendering("dataLabelRendering").Render() function dataLabelRendering(args){}
|
Legend Item Click |
Property: legendItemClick@(Html.EJ().Map("container").LegendItemClick("legendItemClick")) function legendItemClick(args){}
|
Not Applicable |
Bubble Rendering |
Property: bubbleRendering@(Html.EJ().Map("container").BubbleRendering("bubbleRendering")) function bubbleRendering(args){}
|
Property: bubbleRendering@Html.EJS().Maps("container").BubbleRendering("bubbleRendering").Render() function bubbleRendering(args){}
|
Shape Rendering |
Property: shapeRendering@(Html.EJ().Map("container").ShapeRendering("shapeRendering")) function shapeRendering(args){}
|
Property: shapeRendering@Html.EJS().Maps("container").ShapeRendering("shapeRendering").Render() function shapeRendering(args){}
|
Zoomed In |
Property: zoomedIn@(Html.EJ().Map("container"). ZoomedIn("zoomedIn")) function zoomedIn(args){}
|
Not Applicable |
Render Completed |
Property: onRenderComplete@(Html.EJ().Map("container").OnRenderComplete("onRenderComplete")) function onRenderComplete(args){}
|
Property: loaded@Html.EJS().Maps("container").Click("click").Render() function click(args){}
|
Panned |
Property: panned@(Html.EJ().Map("container").Panned("panned")) function panned(args){}
|
Not Applicable |
zoomed Out |
Property: zoomedOut@(Html.EJ().Map("container").ZoomedOut("zoomedOut")) function zoomedOut(args){}
|
Not Applicable |
Mouse Over |
Property: mouseover@(Html.EJ().Map("container").Mouseover("mouseover")) function mouseover(args){}
|
Not Applicable |
Mouse Leave |
Property: mouseleave@(Html.EJ().Map("container").MouseLeave("mouseLeave")) function mouseLeave(args){}
|
Not Applicable |
Click |
Property: click@(Html.EJ().Map("container").Click("click")) function markerSelected(args){}
|
|
Double Click |
Property: doubleClick@(Html.EJ().Map("container"). DoubleClick("doubleClick")) function doubleClick(args){}
|
Property: doubleClick@Html.EJS().Maps("container").DoubleClick("doubleClick").Render() function doubleClick(args){}
|
Right Click |
Property: rightClick@(Html.EJ().Map("container").RightClick("rightClick")) function rightClick(args){}
|
Property: rightClick@Html.EJS().Maps("container").RightClick("rightClick").Render() function rightClick(args){}
|
Initial Load |
Property: onLoad@(Html.EJ().Map("container"). OnLoad("onLoad")) function onLoad(args){}
|
Property: load@Html.EJS().Maps("container").Load("mapLoad").Render() function mapLoad(args){}
|
Before Print | Not Applicable |
Property: beforePrint@Html.EJS().Maps("container").BeforePrint("beforePrint").Render() function beforePrint(args){}
|
Resize | Not Applicable |
Property: resize@Html.EJS().Maps("container").Resize("resize").Render() function resize(args){}
|
Tooltip Render | Not Applicable |
Property: tooltipRender@Html.EJS().Maps("container").TooltipRender("tooltipRender").Render() function tooltipRender(args){}
|
Item Selection | Not Applicable |
Property: itemSelection@Html.EJS().Maps("container").ItemSelection("itemSelection").Render() function itemSelection(args){}
|
Item Highlight | Not Applicable |
Property: itemHighlight@Html.EJS().Maps("container").ItemHighlight("itemHighlight").Render() function itemHighlight(args){}
|
Shape Highlight | Not Applicable |
Property: shapeHighlight@Html.EJS().Maps("container").ShapeHighlight("shapeHighlight").Render() function shapeHighlight(args){}
|
Layer Rendering | Not Applicable |
Property: layerRendering@Html.EJS().Maps("container").LayerRendering("layerRendering").Render() function layerRendering(args){}
|
Marker Rendering | Not Applicable |
Property: markerRendering@Html.EJS().Maps("container").MarkerRendering("markerRendering").Render() function markerRendering(args){}
|
Bubble Mouse Move | Not Applicable |
Property: bubbleMouseMove@Html.EJS().Maps("container").BubbleMouseMove("bubbleMouseMove").Render() function bubbleMouseMove(args){}
|
Bubble Mouse Move | Not Applicable |
Property: annotationRendering@Html.EJS().Maps("container").AnnotationRendering("annotationRendering").Render() function annotationRendering(args){}
|
Animation Complete | Not Applicable |
Property: animationComplete@Html.EJS().Maps("container").AnimationComplete("animationComplete").Render() function animationComplete(args){}
|