This article describes the API migration process of Maps component from Essential JS 1 to Essential JS 2.
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Height | Not Applicable | Property: height<MapsComponent id='maps' height="150"></MapsComponent>, document.getElementById('maps'); |
Width | Not Applicable | Property: width<MapsComponent id='maps' width="150"></MapsComponent>, document.getElementById('maps'); |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Title Text | Not Applicable | Property: title.text<MapsComponent id='maps' ref={m => this.mapInstance = m} titleSettings = {text:'Members of the UN Security Council'}></MapsComponent>, document.getElementById('maps'); |
Subtitle Text | Not Applicable | Property: title.subtitle.text<MapsComponent id='maps' ref={m => this.mapInstance = m} titleSettings = { subtitleSettings:{ text:'In 2017'} }></MapsComponent>, document.getElementById('maps'); |
Title Alignment | Not Applicable | Property: title.alignment<MapsComponent id='maps' ref={m => this.mapInstance = m} titleSettings = {text:'Members of the UN Security Council', alignment: 'Center'}></MapsComponent>, |
Subtitle Alignment | Not Applicable | Property: title.subtitle.alignment<MapsComponent id='maps' ref={m => this.mapInstance = m} titleSettings = { subtitleSettings:{ text:'In 2017', alignment: 'Center'} }></MapsComponent>, document.getElementById('maps'); |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Enable | Property: zoomSettings.enableZoomvar zoomSettings = { enableZoom:true}; <EJ.Map id="maps" zoomSettings = {zoomSettings} > </EJ.Map> document.getElementById('maps'); |
Property: zoomSettings.enable<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={ enable: true }> <Inject services={[Zoom]} /> </MapsComponent>, document.getElementById('maps'); |
Minimum Zoom | Property: zoomSettings.minValuevar zoomSettings = { minValue:2}; <EJ.Map id="maps" zoomSettings = {zoomSettings} > </EJ.Map> document.getElementById('maps'); |
Property: zoomSettings.minZoom<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={ minZoom: 2 }> <Inject services={[Zoom]} /> </MapsComponent>, document.getElementById('maps'); |
Maximum Zoom | Property: zoomSettings.maxValuevar zoomSettings = { maxValue:2}; <EJ.Map id="maps" zoomSettings = {zoomSettings} > </EJ.Map> document.getElementById('maps'); |
Property: zoomSettings.maxZoom<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={ maxZoom: 2 }> <Inject services={[Zoom]} /> </MapsComponent>, document.getElementById('maps'); |
Mouse Wheel Zoom | Property: zoomSettings.enableMouseWheelZoomvar zoomSettings = { enableMouseWheelZoom:true}; <EJ.Map id="maps" zoomSettings = {zoomSettings} > </EJ.Map> document.getElementById('maps'); |
Property: zoomSettings.mouseWheelZoom<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={ mouseWheelZoom: true }> <Inject services={[Zoom]} /> </MapsComponent>, document.getElementById('maps'); |
Double Click Zoom | Not Applicable | Property: zoomSettings.doubleClickZoom<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={ doubleCLickZoom: true }> <Inject services={[Zoom]} /> </MapsComponent>, document.getElementById('maps'); |
Pinch Zoom | Not Applicable | Property: zoomSettings.pinchZooming<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={ pinchZooming: true }> <Inject services={[Zoom]} /> </MapsComponent>, document.getElementById('maps'); |
Single Click Zoom | Property: zoomSettings.enableZoomOnSelectionvar zoomSettings = { enableZoomOnSelection:true}; <EJ.Map id="maps" zoomSettings = {zoomSettings} > </EJ.Map> document.getElementById('maps'); |
Property: zoomSettings.zoomOnClick<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={ zoomOnClick: true }> <Inject services={[Zoom]} /> </MapsComponent>, document.getElementById('maps'); |
Zoom Factor | Property: zoomSettings.factorvar zoomSettings = { factor:2}; <EJ.Map id="maps" zoomSettings = {zoomSettings} > </EJ.Map> document.getElementById('maps'); |
Property: zoomSettings.zoomFactor<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={ zoomFactor: 2 }> <Inject services={[Zoom]} /> </MapsComponent>, document.getElementById('maps'); |
Toolbars | Not Applicable | Property: zoomSettings.toolbars<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={ toolbars: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset'] }> <Inject services={[Zoom]} /> </MapsComponent>, document.getElementById('maps'); |
Toolbar Orientation | Not Applicable | Property: zoomSettings.toolBarOrientation<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={ toolBarOrientation: 'Horizontal' }> <Inject services={[Zoom]} /> </MapsComponent>, document.getElementById('maps'); |
Toolbar Vertical Alignment | Not Applicable | Property: zoomSettings.verticalAlignment<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={ verticalAlignment: 'Center' }> <Inject services={[Zoom]} /> </MapsComponent>, document.getElementById('maps'); |
Toolbar Horizontal Alignment | Not Applicable | Property: zoomSettings.horizontalAlignment<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={ horizontalAlignment: 'Center' }> <Inject services={[Zoom]} /> </MapsComponent>, document.getElementById('maps'); |
Toolbar Highlight Color | Not Applicable | Property: zoomSettings.highlightColor<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={ highlightColor: '#e61576' }> <Inject services={[Zoom]} /> </MapsComponent>, document.getElementById('maps'); |
Toolbar Selection Color | Not Applicable | Property: zoomSettings.selectionColor<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={ selectionColor: '#e61576' }> <Inject services={[Zoom]} /> </MapsComponent>, document.getElementById('maps'); |
Toolbar Fill Color | Not Applicable | Property: zoomSettings.color<MapsComponent id='maps' ref={m => this.mapInstance = m} zoomSettings={ color: '#e61576' }> <Inject services={[Zoom]} /> </MapsComponent>, document.getElementById('maps'); |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Type | Not Applicable | Property: layers.type<MapsComponent id='maps'> <LayersDirective> <LayerDirective type="Layer"> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Layer Type | Property: layers.layerTypevar layers = [{ layerType:'Geometry'}]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.layerType<MapsComponent id='maps'> <LayersDirective> <LayerDirective layerType="Geometry"> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Visible | Not Applicable | Property: layers.visible<MapsComponent id='maps'> <LayersDirective> <LayerDirective visible=true> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Bing Map Type | Property: layers.bingMapTypevar layers = [{ bingMapType:'Aerial'}]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.bingMapType<MapsComponent id='maps'> <LayersDirective> <LayerDirective bingMapType="Aerial"> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Bing Map Key | Property: layers.keyvar layers = [{ key:''}]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.key<MapsComponent id='maps'> <LayersDirective> <LayerDirective key=''> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
URL Template | Property: layers.urltemplatevar layers = [{ urltemplate:'http://a.tile.openstreetmap.org/level/tileX/tileY.png'}]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.urlTemplate<MapsComponent id='maps'> <LayersDirective> <LayerDirective urlTemplate='http://a.tile.openstreetmap.org/level/tileX/tileY.png'> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Shape Data | Property: layers.shapeDatavar layers = [{ shapeData:world_map}]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.shapeData<MapsComponent id='maps'> <LayersDirective> <LayerDirective shapeData={world_map}> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Data Source | Property: layers.dataSourcevar layers = [{ dataSource:population_density}]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.dataSource<MapsComponent id='maps'> <LayersDirective> <LayerDirective dataSource={population_density}> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Query | Not Applicable | Property: layers.query<MapsComponent id='maps'> <LayersDirective> <LayerDirective query=''> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Shape Data Path | Property: layers.shapeDataPathvar layers = [{ shapeDataPath:"name"}]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.shapeDataPath<MapsComponent id='maps'> <LayersDirective> <LayerDirective shapeDataPath='name'> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Shape Property Path | Property: layers.shapePropertyPathvar layers = [{ shapePropertyPath:"name"}]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.shapePropertyPath<MapsComponent id='maps'> <LayersDirective> <LayerDirective shapePropertyPath='name'> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Layer Animation | Not Applicable | Property: layers.animationDuration<MapsComponent id='maps'> <LayersDirective> <LayerDirective animationDuration={500}> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Shape Fill | Property: layers.shapeSettings.fillvar layers = [{ shapeSettings:{fill:"#626171"}]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.shapeSettings.fill<MapsComponent id='maps'> <LayersDirective> <LayerDirective shapeSettings={ fill:'#626171' }> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Shape Palette | Property: layers.shapeSettings.colorPalettevar layers = [{ shapeSettings:{colorPalette:"customPalette", customPalette: ["#E51400", "#A4C400"] }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.shapeSettings.palette<MapsComponent id='maps'> <LayersDirective> <LayerDirective palette=''> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Shape Point Radius | Not Applicable | Property: layers.shapeSettings.circleRadius<MapsComponent id='maps'> <LayersDirective> <LayerDirective shapeSettings={ circleRadius:'10' }> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Shape Color Value Path | Property: layers.shapeSettings.colorValuePathvar layers = [{ shapeSettings:{colorValuePath:"Candidate"}]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.shapeSettings.colorValuePath<MapsComponent id='maps'> <LayersDirective> <LayerDirective shapeSettings={ colorValuePath:'color' }> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Shape Value Path | Property: layers.shapeSettings.valuePathvar layers = [{ shapeSettings:{valuePath:"population"}]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.shapeSettings.valuePath<MapsComponent id='maps'> <LayersDirective> <LayerDirective shapeSettings={ valuePath:'population' }> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Shape DashArray | Not Applicable | Property: layers.shapeSettings.dashArray<MapsComponent id='maps'> <LayersDirective> <LayerDirective shapeSettings={ dashArray:'1,2' }> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Shape Opacity | Not Applicable | Property: layers.shapeSettings.opacity<MapsComponent id='maps'> <LayersDirective> <LayerDirective shapeSettings={ opacity: 0.5 }> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Range Color Mapping | Property: layers.shapeSettings.colorMappings.rangeColorMappingvar layers = [{ shapeSettings:{valuePath:"population", enableGradient: true, colorMappings:{rangeColorMapping:[{from:50000,to:10000,gradientColors:["red","green"]}]}}]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.shapeSettings.colorMapping<MapsComponent id='maps'> <LayersDirective> <LayerDirective shapeSettings={ colorValuePath: 'density' colorMapping:[{ from:0.00001, to:100, color:'rgb(153,174,214)' }] }> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Equal Color Mapping | Property: layers.shapeSettings.colorMappings.equalColorMappingvar layers = [{ shapeSettings:{colorValuePath:"Candidate", enableGradient: true, colorMappings:{equalColorMapping:[{value:"Trump",color:"red"}]}}]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.shapeSettings.colorMapping <MapsComponent id='maps'> <LayersDirective> <LayerDirective shapeSettings={ colorValuePath: 'Candidate' colorMapping:[{ value:'Trump', color:'#D84444' }] }> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Marker Data Source | Property: layers.markersvar markers = [{ latitude:37.0000, longitude: -120.000, city:"california"}] var layers = [{ markers:markers }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.markerSettings.dataSource<MapsComponent id='maps'> <Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective dataSource={ topPopulation }> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Marker Template | Property: layers.markerTemplate<div> //... </div> var layers = [{ markerTemplate:'template' }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.markerSettings.template<MapsComponent id='maps'> <Inject services={[Marker]} /> <LayersDirective> <LayerDirective> </LayerDirective> <MarkersDirective> <MarkerDirective template='<div id="marker1"><img style="height:30px;width:30px;display:block; margin: auto;" src="path"/></div>'> </MarkerDirective> </MarkersDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Marker Visible | Not Applicable | Property: layers.markerSettings.visible<MapsComponent id='maps'> <Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective visible={ true }> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Marker Fill | Not Applicable | Property: layers.markerSettings.fill<MapsComponent id='maps'> <Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective fill= 'white'> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Marker Height | Not Applicable | Property: layers.markerSettings.height<MapsComponent id='maps'> <Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective height= {20}> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Marker Width | Not Applicable | Property: layers.markerSettings.width<MapsComponent id='maps'> <Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective width= {20}> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Marker Shape | Not Applicable | Property: layers.markerSettings.shape<MapsComponent id='maps'> <Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective shape='Circle'> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Marker ImageURL | Not Applicable | Property: layers.markerSettings.imageUrl<MapsComponent id='maps'> <Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective imageUrl='http://js.syncfusion.com/demos/web/Images/map/pin.png'> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Marker Opacity | Not Applicable | Property: layers.markerSettings.opacity<MapsComponent id='maps'> <Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective opacity={ 0.5 }> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Marker Legend Text | Not Applicable | Property: layers.markerSettings.legendText<MapsComponent id='maps'> <Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective legendText='China'> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Marker Offset | Not Applicable | Property: layers.markerSettings.offset<MapsComponent id='maps'> <Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective offset={ 10 }> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Marker Animation Duration | Not Applicable | Property: layers.markerSettings.animationDuration<MapsComponent id='maps'> <Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective animationDuration={ 500 }> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Marker Animation Delay | Not Applicable | Property: layers.markerSettings.animationDelay<MapsComponent id='maps'> <Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective animationDelay={ 100 }> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Marker DashArray | Not Applicable | Property: layers.markerSettings.dashArray<MapsComponent id='maps'> <Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective dashArray={ 1,2 }> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Marker Selection | Not Applicable | Property: layers.markerSettings.selectionSettings<MapsComponent id='maps'> <Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective selectionSettings={ enable : true, fill : '#D2691E', opacity : 0.5,enableMultiSelect=false }> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Marker Highlight | Not Applicable | Property: layers.markerSettings.highlightSettings<MapsComponent id='maps'> <Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective highlightSettings={ enable : true, fill : '#D2691E', opacity : 0.5 }> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Marker Tooltip | Not Applicable | Property: layers.markerSettings.tooltipSettings<MapsComponent id='maps'> <Inject services={[Marker]} /> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective tooltipSettings={ visible : true, fill : '#363F4C', valuePath :"State", template = '<div> //... </div>' }> </MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Visible | Property: layers.bubbleSettings.visiblevar layers = [{ bubbleSettings:{ showBubble: true} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.bubbleSettings.visible<MapsComponent id='maps'> <Inject services={[Bubble]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective visible={ true }> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
ValuePath | Property: layers.bubbleSettings.valuePathvar layers = [{ bubbleSettings:{ valuePath: "population"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.bubbleSettings.valuePath<MapsComponent id='maps'> <Inject services={[Bubble]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective valuePath='value'> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
MinValue | Property: layers.bubbleSettings.minValuevar layers = [{ bubbleSettings:{ minValue: "20"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.bubbleSettings.minRadius<MapsComponent id='maps'> <Inject services={[Bubble]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective minRadius={ 10 }> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
MaxValue | Property: layers.bubbleSettings.maxValuevar layers = [{ bubbleSettings:{ maxValue: "20"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.bubbleSettings.maxRadius<MapsComponent id='maps'> <Inject services={[Bubble]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective maxRadius={ 20 }> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Bubble Type | Not Applicable | Property: layers.bubbleSettings.bubbleType<MapsComponent id='maps'> <Inject services={[Bubble]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective bubbleType='Circle'> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Color | Property: layers.bubbleSettings.colorvar layers = [{ bubbleSettings:{ color: "red"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.bubbleSettings.fill<MapsComponent id='maps'> <Inject services={[Bubble]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective fill='red'> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Opacity | Property: layers.bubbleSettings.bubbleOpacityvar layers = [{ bubbleSettings:{ opacity: "0.5"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.bubbleSettings.opacity<MapsComponent id='maps'> <Inject services={[Bubble]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective opacity={ 0.5 }> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Color Value Path | Property: layers.bubbleSettings.colorValuePathvar layers = [{ bubbleSettings:{ colorValuePath: "Candidate"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.bubbleSettings.colorValuePath<MapsComponent id='maps'> <Inject services={[Bubble]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective colorValuePath='color'> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Enable Tooltip | Property: layers.bubbleSettings.showTooltipvar layers = [{ bubbleSettings:{ showTooltip: true} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.bubbleSettings.tooltipSettings.visible<MapsComponent id='maps'> <Inject services={[Bubble]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective tooltipSettings={ visible:true }> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Tooltip Template | Property: layers.bubbleSettings.tooltipTemplate<div id="template"> // .. </div> var layers = [{ bubbleSettings:{ tooltipTemplate: "template"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.bubbleSettings.tooltipSettings.template<MapsComponent id='maps'> <Inject services={[Bubble,MapsTooltip]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective tooltipSettings={ template:'<div> //... </div>' }> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Bubble Selection | Not Applicable | Property: layers.bubbleSettings.selectionSettings<MapsComponent id='maps'> <Inject services={[Bubble]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective selectionSettings={ enable : true, fill : '#D2691E', opacity : 0.5,enableMultiSelect=false }> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Bubble Highlight | Not Applicable | Property: layers.bubbleSettings.highlightSettings<MapsComponent id='maps'> <Inject services={[Bubble,MapsTooltip]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective highlightSettings={ enable : true, fill : '#D2691E', opacity : 0.5 }> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Range Color Mapping | Property: layers.bubbleSettings.colorMappings.rangeColorMappingvar layers = [{ bubbleSettings:{ colorMappings:{rangeColorMapping:[{from:50000,to:10000,gradientColors:["red","green"]}]} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.bubbleSettings.colorMapping<MapsComponent id='maps'> <Inject services={[Bubble]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective colorMapping:[{ from:0.00001, to:100, color:'rgb(153,174,214)' }] > </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Equal Color Mapping | Property: layers.bubbleSettings.colorMappings.equalColorMappingvar layers = [{ bubbleSettings:{ colorMappings:{equalColorMapping:[{value:"trump",color:"red"}]} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.bubbleSettings.colorMapping<MapsComponent id='maps'> <Inject services={[Bubble]} /> <LayersDirective> <LayerDirective> <BubblesDirective> <BubbleDirective colorMapping:[{ value:'Trump', color:'#D84444' }]> </BubbleDirective> </BubblesDirective> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Visible | Property: layers.labelSettings.showLabelsvar layers = [{ labelSettings:{ showLabels: true} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.dataLabelSettings.visible<MapsComponent id='maps'> <Inject services={[DataLabel]} /> <LayersDirective> <LayerDirective dataLabelSettings={ visible: true }> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Label Path | Property: layers.labelSettings.labelPathvar layers = [{ labelSettings:{ labelPath: "name"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.dataLabelSettings.labelPath<MapsComponent id='maps'> <Inject services={[DataLabel]} /> <LayersDirective> <LayerDirective dataLabelSettings={ labelPath: 'name' }> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Enable Smart Label | Property: layers.labelSettings.enableSmartLabelvar layers = [{ labelSettings:{ enableSmartLabel: true} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Not Applicable |
Smart Label Size | Property: layers.labelSettings.smartLabelSizevar layers = [{ labelSettings:{ smartLabelSize: 10} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Not Applicable |
Label Length | Property: layers.labelSettings.labelLengthvar layers = [{ labelSettings:{ labelLength: 10} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Not Applicable |
Opacity | Not Applicable | Property: layers.dataLabelSettings.opacity<MapsComponent id='maps'> <Inject services={[DataLabel]} /> <LayersDirective> <LayerDirective dataLabelSettings={ opacity: { 0.5 } }> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Smart Label Mode | Not Applicable | Property: layers.dataLabelSettings.smartLabelMode<MapsComponent id='maps'> <Inject services={[DataLabel]} /> <LayersDirective> <LayerDirective dataLabelSettings={ smartLabelMode: 'Trim' }> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
InterSectAction | Not Applicable | Property: layers.dataLabelSettings.intersectionAction<MapsComponent id='maps'> <Inject services={[DataLabel]} /> <LayersDirective> <LayerDirective dataLabelSettings={ intersectionAction: 'None' }> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Template | Not Applicable | Property: layers.dataLabelSettings.template<div id="template"> //.. </div> <MapsComponent id='maps'> <Inject services={[DataLabel]} /> <LayersDirective> <LayerDirective dataLabelSettings={ template: '<div> //... </div>' }> </LayerDirective> </LayersDirective> </MapsComponent>, document.getElementById('maps'); |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Visible | Property: layers.legendSettings.showLegendvar layers = [{ legendSettings:{ showLegend: true} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: legendSettings.visible<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { visible:true}> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Toggle Visibility | Property: layers.legendSettings.toggleVisibilityvar layers = [{ legendSettings:{ toggleVisibility: true} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: legendSettings.toggleVisibility<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { toggleVisibility:true}> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Legend Location X | Property: layers.legendSettings.positionXvar layers = [{ legendSettings:{ location: {x:250} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: legendSettings.location<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { location:{ x: 250}}> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Legend Location Y | Property: layers.legendSettings.positionYvar layers = [{ legendSettings:{ location: {y:350} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: legendSettings.location<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { location:{ y: 350}}> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Legend Type | Property: layers.legendSettings.typevar layers = [{ legendSettings:{ type:"Layers" }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: legendSettings.type<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { type:'Layers'}> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Label Orientation | Property: layers.legendSettings.labelOrientationvar layers = [{ legendSettings:{ labelOrientation:"Vertical" }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Not Applicable |
Legend Title | Property: layers.legendSettings.titlevar layers = [{ legendSettings:{ title: "Union territories of India"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: legendSettings.title<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { title:'Union territories of India'}> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Legend Mode | Property: layers.legendSettings.modevar layers = [{ legendSettings:{ mode: "Default"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: legendSettings.mode<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { mode:'Default'}> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Legend Position | Property: layers.legendSettings.positionvar layers = [{ legendSettings:{ position: "TopLeft"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: legendSettings.position<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { position:'Top'}> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Legend DockOnMap | Property: layers.legendSettings.dockOnMapvar layers = [{ legendSettings:{ dockOnMap: true} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Not Applicable |
Legend Alignment | Property: layers.legendSettings.dockPositionvar layers = [{ legendSettings:{ dockPosition: "Right"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: legendSettings.alignment<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { alignment:'Center'}> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Legend Left Label | Property: layers.legendSettings.leftLabelvar layers = [{ legendSettings:{ leftLabel: "1000M"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Not Applicable |
Legend Right Label | Property: layers.legendSettings.rightLabelvar layers = [{ legendSettings:{ rightLabel: "1000M"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Not Applicable |
Legend Shape | Property: layers.legendSettings.iconvar layers = [{ legendSettings:{ icon: "Circle"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: legendSettings.shape<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { shape:'Circle'}> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Legend Shape Height | Property: layers.legendSettings.iconHeightvar layers = [{ legendSettings:{ iconHeight: "20"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: legendSettings.shapeHeight<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { shapeHeight:10}> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Legend Shape Width | Property: layers.legendSettings.iconWidthvar layers = [{ legendSettings:{ iconWidth: "20"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: legendSettings.shapeWidth<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { shapeWidth:20}> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Height | Property: layers.legendSettings.heightvar layers = [{ legendSettings:{ height: "50"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: legendSettings.width<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { height:150}> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Width | Property: layers.legendSettings.widthvar layers = [{ legendSettings:{ width: "50"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: legendSettings.width<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { width:'150'}> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Show Labels | Property: layers.legendSettings.showLabelsvar layers = [{ legendSettings:{ showLabels: true} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Not Applicable |
Background | Not Applicable | Property: legendSettings.background<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { background:'Transparent'}> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Label Position | Not Applicable | Property: legendSettings.labelPosition<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { labelPosition:'After'}> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Label Display Mode | Not Applicable | Property: legendSettings.labelDisplayMode<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { labelDisplayMode:'Trim'}> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Legend Orientation | Not Applicable | Property: legendSettings.orientation<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { legendOrientation:'Horizontal'}> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Legend Item Fill | Not Applicable | Property: legendSettings.fill<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { fill:'red'}> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Legend Shape Padding | Not Applicable | Property: legendSettings.shapePadding<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { shapePadding:20}> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Legend Shape Border Color | Not Applicable | Property: legendSettings.shapeBorder.color<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { shapeBorder: { color:'green'} }> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Legend Shape Border Width | Not Applicable | Property: legendSettings.shapeBorder.width<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { shapeBorder: { width:2}}> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Inverter Pointer | Not Applicable | Property: legendSettings.invertedPointer<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { invertedPointer : true }> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Item Text Style | Not Applicable | Property: legendSettings.textStyle<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { textStyle:{fontWeight:'400' size:'14px'}}> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Title Style | Not Applicable | Property: legendSettings.titleStyle<MapsComponent id='maps' ref={m => this.mapInstance = m} legendSettings = { titleStyle:{fontWeight:'400' size:'14px'}}> <Inject services={[Legend]} /> </MapsComponent>, document.getElementById('maps'); |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Highlight Fill | Property: layers.shapeSettings.highlightColorvar layers = [{ shapeSettings:{ highlightColor: "green"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: fill<MapsComponent id='maps'> <LayersDirective> <LayerDirective highlightSettings={ fill:'green'}> <LayerDirective> </LayersDirective> <Inject services={[Highlight]} /> </MapsComponent>, document.getElementById('maps'); |
Enable Highlight | Property: layers.enableMouseHovervar layers = [{ shapeSettings:{ enableMouseHover: true} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: enable<MapsComponent id='maps'> <LayersDirective> <LayerDirective highlightSettings={ enable:'true'}> <LayerDirective> </LayersDirective> <Inject services={[Highlight]} /> </MapsComponent>, document.getElementById('maps'); |
Highlight Border Color | Property: layers.shapeSettings.highlightStrokevar layers = [{ shapeSettings:{ highlightStroke: "red"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.highlightSettings.border.color<MapsComponent id='maps'> <LayersDirective> <LayerDirective highlightSettings={ border:{color:'red'} }> <LayerDirective> </LayersDirective> <Inject services={[Highlight]} /> </MapsComponent>, document.getElementById('maps'); |
Highlight Border Width | Property: layers.shapeSettings.highlightBorderWidthvar layers = [{ shapeSettings:{ highlightBorderWidth: "2"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.highlightSettings.border.width<MapsComponent id='maps'> <LayersDirective> <LayerDirective highlightSettings={ border:{width:2} }> <LayerDirective> </LayersDirective> <Inject services={[Highlight]} /> </MapsComponent>, document.getElementById('maps'); |
Highlight Opacity | Not Applicable | Property: layers.layers.highlightSettings.opacity<MapsComponent id='maps'> <LayersDirective> <LayerDirective highlightSettings={ opacity:0.5 }> <LayerDirective> </LayersDirective> <Inject services={[Highlight]} /> </MapsComponent>, document.getElementById('maps'); |
Selection Fill | Property: layers.shapeSettings.selectionColorvar layers = [{ shapeSettings:{ selectionColor: "#D2691E"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.selectionSettings.fill<MapsComponent id='maps'> <LayersDirective> <LayerDirective selectionSettings={ fill:'#D2691E' }> <LayerDirective> </LayersDirective> <Inject services={[Selection]} /> </MapsComponent>, document.getElementById('maps'); |
Selection Enable | Property: layers.enableSelectionvar layers = [{ shapeSettings:{ enableSelection: true} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.selectionSettings.enable<MapsComponent id='maps'> <LayersDirective> <LayerDirective selectionSettings={ enable:'true' }> <LayerDirective> </LayersDirective> <Inject services={[Selection]} /> </MapsComponent>, document.getElementById('maps'); |
Selection Border Width | Property: layers.selectionSettings.selectionStrokeWidthvar layers = [{ shapeSettings:{ selectionStrokeWidth: "2"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.selectionSettings.border.width<MapsComponent id='maps'> <LayersDirective> <LayerDirective selectionSettings={ border:{width:2} }> <LayerDirective> </LayersDirective> <Inject services={[Selection]} /> </MapsComponent>, document.getElementById('maps'); |
Selection Border Color | Property: layers.selectionSettings.selectionStrokevar layers = [{ shapeSettings:{ selectionStroke: "red"} }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.selectionSettings.border.color<MapsComponent id='maps'> <LayersDirective> <LayerDirective selectionSettings={ border:{color:'red'} }> <LayerDirective> </LayersDirective> <Inject services={[Selection]} /> </MapsComponent>, document.getElementById('maps'); |
Selection Opacity | Not Applicable | Property: layers.selectionSettings.opacity<MapsComponent id='maps'> <LayersDirective> <LayerDirective selectionSettings={ opacity: 0.5 }> <LayerDirective> </LayersDirective> <Inject services={[Highlight]} /> </MapsComponent>, document.getElementById('maps'); |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Visible | Not Applicable | Property: layers.navigationLineSettings.visible<MapsComponent id='maps'> <LayersDirective> <LayerDirective> <NavigationLinesDirective> <NavigationLineDirective visible= {true}> </NavigationLineDirective> </NavigationLinesDirective> <LayerDirective> </LayersDirective> <Inject services={[NavigationLine]} /> </MapsComponent>, document.getElementById('maps'); |
Width | Not Applicable | Property: layers.navigationLineSettings.width<MapsComponent id='maps'> <LayersDirective> <LayerDirective> <NavigationLineDirective width= {2}> </NavigationLineDirective> </NavigationLinesDirective> <LayerDirective> </LayersDirective> <Inject services={[NavigationLine]} /> </MapsComponent>, document.getElementById('maps'); |
Longitude | Not Applicable | Property: layers.navigationLineSettings.longitude<MapsComponent id='maps'> <LayersDirective> <LayerDirective> <NavigationLineDirective longitude={[-74.0060, -51.9253]}> </NavigationLineDirective> </NavigationLinesDirective> <LayerDirective> </LayersDirective> <Inject services={[NavigationLine]} /> </MapsComponent>, document.getElementById('maps'); |
Latitude | Not Applicable | Property: layers.navigationLineSettings.latitude<MapsComponent id='maps'> <LayersDirective> <LayerDirective> <NavigationLineDirective latitude={[37.6276571, -14.2350]}> </NavigationLineDirective> </NavigationLinesDirective> <LayerDirective> </LayersDirective> <Inject services={[NavigationLine]} /> </MapsComponent>, document.getElementById('maps'); |
DashArray | Not Applicable | Property: layers.navigationLineSettings.dashArray<MapsComponent id='maps'> <LayersDirective> <LayerDirective> <NavigationLineDirective dashArray={1,2}> </NavigationLineDirective> </NavigationLinesDirective> <LayerDirective> </LayersDirective> <Inject services={[NavigationLine]} /> </MapsComponent>, document.getElementById('maps'); |
Color | Not Applicable | Property: layers.navigationLineSettings.color<MapsComponent id='maps'> <LayersDirective> <LayerDirective> <NavigationLineDirective color= "black"> </NavigationLineDirective> </NavigationLinesDirective> <LayerDirective> </LayersDirective> <Inject services={[NavigationLine]} /> </MapsComponent>, document.getElementById('maps'); |
Angle | Not Applicable | Property: layers.navigationLineSettings.angle<MapsComponent id='maps'> <LayersDirective> <LayerDirective> <NavigationLineDirective angle={-180}> </NavigationLineDirective> </NavigationLinesDirective> <LayerDirective> </LayersDirective> <Inject services={[NavigationLine]} /> </MapsComponent>, document.getElementById('maps'); |
Arrow Position | Not Applicable | Property: layers.navigationLineSettings.arrow.positionvar arrow = new MapsArrow { Position="Start" } <MapsComponent id='maps'> <LayersDirective> <LayerDirective> <NavigationLineDirective arrow:{position:'Start'}> </NavigationLineDirective> </NavigationLinesDirective> <LayerDirective> </LayersDirective> <Inject services={[NavigationLine]} /> </MapsComponent>, document.getElementById('maps'); |
Show Arrow | Not Applicable | Property: layers.navigationLineSettings.arrow.showArrow<MapsComponent id='maps'> <LayersDirective> <LayerDirective> <NavigationLineDirective arrow:{showArrow:true}> </NavigationLineDirective> </NavigationLinesDirective> <LayerDirective> </LayersDirective> <Inject services={[NavigationLine]} /> </MapsComponent>, document.getElementById('maps'); |
Arrow size | Not Applicable | Property: layers.navigationLineSettings.arrow.size<MapsComponent id='maps'> <LayersDirective> <LayerDirective> <NavigationLineDirective arrow:{size:'10px'}> </NavigationLineDirective> </NavigationLinesDirective> <LayerDirective> </LayersDirective> <Inject services={[NavigationLine]} /> </MapsComponent>, document.getElementById('maps'); |
Arrow Color | Not Applicable | Property: layers.navigationLineSettings.arrow.color<MapsComponent id='maps'> <LayersDirective> <LayerDirective> <NavigationLineDirective arrow:{color:'green'}> </NavigationLineDirective> </NavigationLinesDirective> <LayerDirective> </LayersDirective> <Inject services={[NavigationLine]} /> </MapsComponent>, document.getElementById('maps'); |
Arrow Offset | Not Applicable | Property: layers.navigationLineSettings.arrow.offSet<MapsComponent id='maps'> <LayersDirective> <LayerDirective> <NavigationLineDirective arrow:{offset:10}> </NavigationLineDirective> </NavigationLinesDirective> </LayerDirective> </LayersDirective> <Inject services={[NavigationLine]} /> </MapsComponent>, document.getElementById('maps'); |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Tooltip Enable | Property: layers.showTooltipvar layers = [{ shapeSettings:{ showTooltip:true } }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.tooltipSettings.visible<MapsComponent id='maps'> <LayersDirective tooltipSettings={ visible:true}> <LayerDirective> </LayerDirective> </LayersDirective> <Inject services={[MapsTooltip]} /> </MapsComponent>, document.getElementById('maps'); |
Tooltip Template | Property: layers.tooltipTemplate<div id=template> \\.. </div> var layers = [{ shapeSettings:{ tooltipTemplate:"template" } }]; <EJ.Map id="maps" layers = {layers} > </EJ.Map> document.getElementById('maps'); |
Property: layers.tooltipSettings.template<MapsComponent id='maps'> <LayersDirective> <LayerDirective tooltipSettings={ template:'<div> //... </div>'}> </LayerDirective> </LayersDirective> <Inject services={[MapsTooltip]} /> </MapsComponent>, document.getElementById('maps'); |
Value Path | Not Applicable | Property: layers.tooltipSettings.valuePath<MapsComponent id='maps'> <LayersDirective tooltipSettings={ valuePath:'population'}> <LayerDirective> </LayerDirective> </LayersDirective> <Inject services={[MapsTooltip]} /> </MapsComponent>, document.getElementById('maps'); |
Format | Not Applicable | Property: layers.tooltipSettings.format<MapsComponent id='maps'> <LayersDirective tooltipSettings={ format:'${State} ${Population}'}> <LayerDirective> </LayerDirective> </LayersDirective> <Inject services={[MapsTooltip]} /> </MapsComponent>, document.getElementById('maps'); |
Border Color | Not Applicable | Property: layers.tooltipSettings.border.color<MapsComponent id='maps'> <LayersDirective tooltipSettings={ border:{color:'red'}}> <LayerDirective> </LayerDirective> </LayersDirective> <Inject services={[MapsTooltip]} /> </MapsComponent>, document.getElementById('maps'); |
Border Width | Not Applicable | Property: layers.tooltipSettings.border.width<MapsComponent id='maps'> <LayersDirective tooltipSettings={ color:{width:2}}> <LayerDirective> </LayerDirective> </LayersDirective> <Inject services={[MapsTooltip]} /> </MapsComponent>, document.getElementById('maps'); |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Content | Not Applicable | Property: legendSettings.annotations.content<div id="template"> //... </div> <MapsComponent id='maps' ref={m => this.mapInstance = m} annotation = {[content:'#template']}></MapsComponent>, document.getElementById('maps'); |
Location X | Not Applicable | Property: legendSettings.annotations.x<MapsComponent id='maps' ref={m => this.mapInstance = m} annotation = {[y:'250px']}></MapsComponent>, document.getElementById('maps'); |
Location Y | Not Applicable | Property: legendSettings.annotations.y<MapsComponent id='maps' ref={m => this.mapInstance = m} annotation = {[x:'250px']}></MapsComponent>, document.getElementById('maps'); |
Vertical Alignment | Not Applicable | Property: legendSettings.annotations.verticalAlignment<MapsComponent id='maps' ref={m => this.mapInstance = m} annotation = {[verticalAlignnebt:'Center']}></MapsComponent>, document.getElementById('maps'); |
Horizontal Alignment | Not Applicable | Property: legendSettings.annotations.horizontalAlignment<MapsComponent id='maps' ref={m => this.mapInstance = m} annotation = {[horizontalAlignment:'Center']}></MapsComponent>, document.getElementById('maps'); |
Zindex | Not Applicable | Property: legendSettings.annotations.zIndex<MapsComponent id='maps' ref={m => this.mapInstance = m} annotation = {[zIndex:2]}></MapsComponent>, document.getElementById('maps'); |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Projection Type | Not Applicable | Property: projectionType<MapsComponent id='maps' projectionType='Mercator'></MapsComponent>, document.getElementById('maps'); |
Background | Property: background<EJ.Map id="maps" background="red"> </EJ.Map> document.getElementById('maps'); |
Property: background<MapsComponent id='maps' background='red'></MapsComponent>, document.getElementById('maps'); |
Enable Group Separator | Property: enableGroupSeparator<EJ.Map id="maps" enableGroupSeparator={true} > |
Property: useGroupingSeparator<MapsComponent id='maps' useGroupingSeparator={true}></MapsComponent>, document.getElementById('maps'); |
Base Layer Index | Property: baseMapIndex<EJ.Map id="maps" baseMapIndex={0} > |
Property: baseLayerIndex<MapsComponent id='maps' baseMapIndex={0}></MapsComponent>, document.getElementById('maps'); |
locale | Property: locale<EJ.Map id="maps" locale="" > |
Not Applicable |
Responsive | Property: isResponsive<EJ.Map id="maps" isResponsive={true} > |
Not Applicable |
Enable Pan | Property: enablePan<EJ.Map id="maps" enablePan={true} > |
Not Applicable |
Enable Navigation | Property: navigationControl.enableNavigationvar navigationControl ={enableNavigation:true}; <EJ.Map id="maps" navigationControl={navigationControl} > |
Not Applicable |
Navigation Orientation | Property: navigationControl.orientationvar navigationControl ={orientation:'Horizontal'}; <EJ.Map id="maps" navigationControl={navigationControl} > |
Not Applicable |
Navigation Dock Position | Property: navigationControl.dockPositionvar navigationControl ={dockPosition:'TopLeft'}; <EJ.Map id="maps" navigationControl={navigationControl} > |
Not Applicable |
Navigation Absolute Position | Property: navigationControl.absolutePositionvar navigationControl ={absolutePosition:{x:10 , y:10}; <EJ.Map id="maps" navigationControl={navigationControl} > |
Not Applicable |
Dragging Selection | Property: draggingOnSelection<EJ.Map id="maps" draggingOnSelection={true} > |
Not Applicable |
Resize | Property: enableResize<EJ.Map id="maps" enableResize={true} > |
Not Applicable |
Enable Animation | Property: enableAnimation<EJ.Map id="maps" enableAnimation={true} > |
Not Applicable |
Enable Layer Animation | Property: enableLayerChangeAnimation<EJ.Map id="maps" enableLayerAnimation={true} > |
Not Applicable |
Center Position | Property: centerPosition<EJ.Map id="maps" centerPosition=[38.5000, -98] > |
Property: centerPosition<MapsComponent id='maps' centerPosition=[38.5000, -98]></MapsComponent>, document.getElementById('maps'); |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Shape Selected | Property: shapeSelected<EJ.Map id="maps" shapeSelected={shapeSelected}></EJ.Map>, document.getElementById('maps') function shapeSelected(args) {} |
Property: shapeSelected<MapsComponent id='maps' shapeSelected={this.shapeSelected.bind(this)}></MapsComponent>, document.getElementById('maps'); public shapeSelected(args: IShapeSelectedEventArgs): void {} |
Legend Item Rendering | Property: legendItemRendering<EJ.Map id="maps" legendItemRendering={legendItemRendering}></EJ.Map>, document.getElementById('maps') function legendItemRendering(args) {} |
Not Applicable |
Display Text Rendering | Property: displayTextRendering<EJ.Map id="maps" displayTextRendering={displayTextRendering}></EJ.Map>, document.getElementById('maps') function displayTextRendering(args) {} |
Property: dataLabelRendering<ejs-maps id="maps" dataLabelRendering="dataLabelRendering"></ejs-maps> function dataLabelRendering(args){} |
Legend Item Click | Property: legendItemClick<EJ.Map id="maps" legendItemClick={legendItemClick}></EJ.Map>, document.getElementById('maps') function legendItemClick(args) {} |
Not Applicable |
Bubble Rendering | Property: bubbleRendering<EJ.Map id="maps" bubbleRendering={bubbleRendering}></EJ.Map>, document.getElementById('maps') function bubbleRendering(args) {} |
Property: bubbleRendering<MapsComponent id='maps' bubbleRendering={this.bubbleRendering.bind(this)}></MapsComponent>, document.getElementById('maps'); public bubbleRendering(args: IBubbleRenderingEventArgs): void {} function bubbleRendering(args){} |
Shape Rendering | Property: shapeRendering<EJ.Map id="maps" shapeRendering={shapeRendering}></EJ.Map>, document.getElementById('maps') function shapeRendering(args) {} |
Property: shapeRendering<MapsComponent id='maps' shapeRendering={this.shapeRendering.bind(this)}></MapsComponent>, document.getElementById('maps'); public shapeRendering(args: IShapeRenderingEventArgs): void {} |
Zoomed In | Property: zoomedIn<EJ.Map id="maps" zoomedIn={zoomedIn}></EJ.Map>, document.getElementById('maps') function zoomedIn(args) {} |
Not Applicable |
Render Completed | Property: onRenderComplete<EJ.Map id="maps" onRenderComplete={onRenderComplete}></EJ.Map>, document.getElementById('maps') function onRenderComplete(args) {} |
Property: loaded<MapsComponent id='maps' loaded={this.loaded.bind(this)}></MapsComponent>, document.getElementById('maps'); public loaded(args: ILoadedEventArgs): void {} |
Panned | Property: panned<EJ.Map id="maps" panned={panned}></EJ.Map>, document.getElementById('maps') function panned(args) {} |
Not Applicable |
zoomed Out | Property: zoomedOut<EJ.Map id="maps" zoomedOut={zoomedOut}></EJ.Map>, document.getElementById('maps') function zoomedOut(args) {} |
Not Applicable |
Mouse Over | Property: mouseover<EJ.Map id="maps" mouseover={mouseover}></EJ.Map>, document.getElementById('maps') function mouseover(args) {} |
Not Applicable |
Mouse Leave | Property: mouseleave<EJ.Map id="maps" mouseleave={mouseleave}></EJ.Map>, document.getElementById('maps') function mouseleave(args) {} |
Not Applicable |
Click | Property: click<EJ.Map id="maps" click={click}></EJ.Map>, document.getElementById('maps') function click(args) {} |
Property: click<MapsComponent id='maps' click={this.click.bind(this)}></MapsComponent>, document.getElementById('maps'); public click(args: IClickEventArgs): void {} |
Double Click | Property: doubleClick<EJ.Map id="maps" doubleClick={doubleClick}></EJ.Map>, document.getElementById('maps') function doubleClick(args) {} |
Property: doubleClick<MapsComponent id='maps' doubleClick={this.doubleClick.bind(this)}></MapsComponent>, document.getElementById('maps'); public doubleClick(args: IDoubleClickEventArgs): void {} |
Right Click | Property: rightClick<EJ.Map id="maps" rightClick={rightClick}></EJ.Map>, document.getElementById('maps') function rightClick(args) {} |
Property: rightClick<MapsComponent id='maps' rightClick={this.rightClick.bind(this)}></MapsComponent>, document.getElementById('maps'); public rightClick(args: IRightClickEventArgs): void {} |
Initial Load | Property: onLoad<EJ.Map id="maps" onLoad={onLoad}></EJ.Map>, document.getElementById('maps') function onLoad(args) {} |
Property: load<MapsComponent id='maps' load={this.load.bind(this)}></MapsComponent>, document.getElementById('maps'); public load(args: ILoadEventArgs): void {} |
Before Print | Not Applicable | Property: beforePrint<MapsComponent id='maps' beforePrint={this.beforePrint.bind(this)}></MapsComponent>, document.getElementById('maps'); public beforePrint(args: IBeforePrintEventArgs): void {} |
Resize | Not Applicable | Property: resize<MapsComponent id='maps' resize={this.resize.bind(this)}></MapsComponent>, document.getElementById('maps'); public resize(args: IResizeEventArgs): void {} |
Tooltip Render | Not Applicable | Property: tooltipRender<MapsComponent id='maps' tooltipRender={this.tooltipRender.bind(this)}></MapsComponent>, document.getElementById('maps'); public tooltipRender(args: ITooltipRenderEventArgs): void {} |
Item Selection | Not Applicable | Property: itemSelection<MapsComponent id='maps' itemSelection={this.itemSelection.bind(this)}></MapsComponent>, document.getElementById('maps'); public itemSelection(args: IItemSelectionEventArgs): void {} |
Item Highlight | Not Applicable | Property: itemHighlight<MapsComponent id='maps' itemHighlight={this.itemHighlight.bind(this)}></MapsComponent>, document.getElementById('maps'); public itemHighlight(args: IitemHighlightEventArgs): void {} |
Shape Highlight | Not Applicable | Property: shapeHighlight<MapsComponent id='maps' shapeHighlight={this.shapeHighlight.bind(this)}></MapsComponent>, document.getElementById('maps'); public shapeHighlight(args: IShapeHighlightEventArgs): void {} |
Layer Rendering | Not Applicable | Property: layerRendering<MapsComponent id='maps' layerRendering={this.layerRendering.bind(this)}></MapsComponent>, document.getElementById('maps'); public layerRendering(args: ILayerRenderingEventArgs): void {} |
Marker Rendering | Not Applicable | Property: markerRendering<MapsComponent id='maps' markerRendering={this.markerRendering.bind(this)}></MapsComponent>, document.getElementById('maps'); public markerRendering(args: IMarkerRenderingEventArgs): void {} |
Bubble Mouse Move | Not Applicable | Property: bubbleMouseMove<MapsComponent id='maps' bubbleMouseMove={this.bubbleMouseMove.bind(this)}></MapsComponent>, document.getElementById('maps'); public bubbleMouseMove(args: IBubbleMouseMoveEventArgs): void {} |
Bubble Mouse Move | Not Applicable | Property: annotationRendering<MapsComponent id='maps' annotationRendering={this.annotationRendering.bind(this)}></MapsComponent>, document.getElementById('maps'); public annotationRendering(args: IAnnotationRenderingEventArgs): void {} |
Animation Complete | Not Applicable | Property: animationComplete<MapsComponent id='maps' animationComplete={this.animationComplete.bind(this)}></MapsComponent>, document.getElementById('maps'); public animationComplete(args: IAnimationCompleteEventArgs): void {} |