ejMap

9 Aug 201824 minutes to read

The map can be easily configured to the DOM element, such as div and can be created with a highly customized look and feel.

Syntax

  • JS
  • $(element).ejMap();

    Example

  • HTML
  • <div id="container"> 
     
    <script>
    // Create Map
    $('#container').ejMap();        
    </script> 
      
    </div>

    Requires

    • module:jQuery.js

    • module:ej.core.js

    • module:ej.data.js

    • module:ej.map.js

    • module:jsrender.js

    • module:properties.js

    Members

    background string

    Specifies the background color for map

    Default Value

    • “transparent”

    Example

  • JS
  • //To set background API value during initialization 
      $("#container").ejMap({background:'transparent'});
  • JS
  • //Get or set the background API, after initialization:
    
      //Gets the background value
       
      var property = $("#container").data("ejMap").model.background;
      
      //Sets the background value 
      
      $("#container").data("ejMap").model.background="transparent";

    baseMapIndex number

    Specifies the index of the map to determine the shape layer to be displayed

    Default Value

    • 0

    Example

  • JS
  • //To set baseMapIndex API value during initialization 
      $("#container").ejMap({baseMapIndex:0});
  • JS
  • //Get or set the baseMapIndex API, after initialization:
    
       //Gets the baseMapIndex value 
       
       var property = $("#container").data("ejMap").model.baseMapIndex;
       
       //Sets the baseMapIndex value 
       
       $("#container").data("ejMap").model.baseMapIndex= 0;

    centerPosition object

    Specify the center position where map should be displayed

    Default Value

    • [0,0]

    Example

  • JS
  • // Set the centerPosition during initialization.                        
       $("#container").ejMap({centerPosition: [38.5000, -98]});
  • JS
  • //Get or set the centerPosition after initialization:
    
      //Gets the centerPosition from map.
      
      var property =$("#container").data("ejMap").model.centerPosition;
      
      //Sets the centerPosition to map.
      
      $("#container").data("ejMap").model.centerPosition = [38.5000, -98];

    draggingOnSelection boolean

    Controls the selection through dragging

    Default Value

    • false

    Example

  • JS
  • //To set draggingOnSelection API value during initialization 
       $("#container").ejMap({draggingOnSelection:true});
  • JS
  • //Get or set the draggingOnSelection API, after initialization:
       
       //Gets the draggingOnSelection value 
       
       var property = $("#container").data("ejMap").model.draggingOnSelection;
             
       //Sets the draggingOnSelection value
        
       $("#container").data("ejMap").model.draggingOnSelection=true });

    enableAnimation boolean

    Enables or Disables the map animation

    Default Value

    • false

    Example

  • JS
  • //To set enableAnimation API value during initialization 
       $("#container").ejMap({enableAnimation:true});
  • JS
  • //Get or set the enableAnimation API, after initialization:
       
       //Gets the enableAnimation value 
       
       var property = $("#container").data("ejMap").model.enableAnimation;
             
       //Sets the enableAnimation value
        
       $("#container").data("ejMap").model.enableAnimation=true });

    enableRTL boolean

    Enables or Disables right to left(RTL) support for maps.

    Default Value

    • false

    Example

  • JS
  • //To set enableRTL API value during initialization
       $("#container").ejMap({enableRTL:false});
  • JS
  • //Get or set the enableRTL API, after initialization:
    
       //Gets the enableRTL value 
    
       var property = $("#container").data("ejMap").model.enableRTL;
    
       //Sets the enableRTL value
    
       $("#container").data("ejMap").model.enableRTL=true });

    enableLayerChangeAnimation boolean

    Enables or Disables the animation for layer change in map

    Default Value

    • false

    Example

  • JS
  • //To set enableLayerChangeAnimation API value during initialization 
       $("#container").ejMap({enableLayerChangeAnimation:true});
  • JS
  • //Get or set the enableLayerChangeAnimation API, after initialization:
    
       //Gets the enableLayerChangeAnimation value 
       
       var property = $("#container").data("ejMap").model.enableLayerChangeAnimation;
                  
       //Sets the enableLayerChangeAnimation value
        
       $("#container").data("ejMap").model.enableLayerChangeAnimation=false });

    enablePan boolean

    Enables or Disables the map panning

    Default Value

    • true

    Example

  • JS
  • //To set enablePan API value during initialization 
       $("#container").ejMap({enablePan:true});
  • JS
  • //Get or set the enablePan API, after initialization:
     
       //Gets the enablePan value 
       
       var property = $("#container").data("ejMap").model.enablePan;
                   
       //Sets the enablePan value
        
       $("#container").data("ejMap").model.enablePan=true });

    enableResize boolean

    Determines whether map need to resize when container is resized

    Default Value

    • true

    Example

  • JS
  • //To set enableResize API value during initialization 
       $("#container").ejMap({enableResize:true});
  • JS
  • //Get or set the enableResize API, after initialization:
       
       //Gets the enableResize value 
       
       var property = $("#container").data("ejMap").model.enableResize;
                
       //Sets the enableResize value 
       
       $("#container").data("ejMap").model.enableResize= true });

    isResponsive boolean

    Determines whether map need to resize when container is resized

    Default Value

    • true

    Example

  • JS
  • //To set isResponsive API value during initialization 
       $("#container").ejMap({isResponsive:true});
  • JS
  • //Get or set the isResponsive API, after initialization:
       
       //Gets the isResponsive value 
       
       var property = $("#container").data("ejMap").model.isResponsive;
                
       //Sets the isResponsive value 
       
       $("#container").data("ejMap").model.isResponsive= true });

    zoomSettings object

    Enables or Disables the Zooming for map.

    zoomSettings.animationDuration string

    Specifies animation duration for map shapes while zooming.

    Default Value

    • 600

    Example

  • JS
  • //To set animationDuration API value during initialization 
       $("#container").ejMap({zoomSettings:{animationDuration:1000}});
  • JS
  • //Get or set the animationDuration API, after initialization:
    
       //Gets the animationDuration value 
       
       var property = $("#container").data("ejMap").model.zoomSettings.animationDuration;
             
       //Sets the animationDuration value
        
       $("#container").data("ejMap").model.zoomSettings.animationDuration=true });

    zoomSettings.enableZoom boolean

    Enables or Disables the zooming of map

    Default Value

    • true

    Example

  • JS
  • //To set enableZoom API value during initialization 
       $("#container").ejMap({zoomSettings:{enableZoom:true}});
  • JS
  • //Get or set the enableZoom API, after initialization:
    
       //Gets the enableZoom value 
       
       var property = $("#container").data("ejMap").model.zoomSettings.enableZoom;
             
       //Sets the enableZoom value
        
       $("#container").data("ejMap").model.zoomSettings.enableZoom=true });

    zoomSettings.enableZoomOnSelection boolean

    Enables or Disables the zoom on selecting the map shape

    Default Value

    • false

    Example

  • JS
  • //To set enableZoomOnSelection API value during initialization 
       $("#container").ejMap({zoomSettings:{enableZoomOnSelection:true}});
  • JS
  • //Get or set the enableZoomOnSelection API, after initialization:
    
       //Gets the enableZoomOnSelection value
        
       var property = $("#container").data("ejMap").model.zoomSettings.enableZoomOnSelection;
                  
       //Sets the enableZoomOnSelection value
        
       $("#container").data("ejMap").model.zoomSettings.enableZoomOnSelection=true });

    zoomSettings.enableMouseWheelZoom boolean

    Enables or Disables the zoom on mouse wheel the map.

    Default Value

    • true

    Example

  • JS
  • //To set enableMouseWheelZoom API value during initialization 
       $("#container").ejMap({zoomSettings:{enableMouseWheelZoom:true}});
  • JS
  • //Get or set the enableMouseWheelZoom API, after initialization:
    
       //Gets the enableMouseWheelZoom value
        
       var property = $("#container").data("ejMap").model.zoomSettings.enableMouseWheelZoom;
                  
       //Sets the enableMouseWheelZoom value
        
       $("#container").data("ejMap").model.zoomSettings.enableMouseWheelZoom=true });

    zoomSettings.factor number

    Specifies the zoom factor for map zoom value.

    Default Value

    • 1

    Example

  • JS
  • //To set zoomFactor API value during initialization 
      $("#container").ejMap({zoomSettings:{factor:1}});
  • JS
  • //Get or set the zoomFactor API, after initialization:
       
       //Gets the zoomFactor value 
       
       var property = $("#container").data("ejMap").model.zoomSettings.factor;
       
       //Sets the zoomFactor value
        
       $("#container").data("ejMap").model.zoomSettings.factor= 1;

    zoomSettings.level number

    Specifies the zoom level value for which map to be zoomed

    Default Value

    • 1

    Example

  • JS
  • //To set zoomLevel API value during initialization 
      $("#container").ejMap({zoomSettings:{level:1}});
  • JS
  • //Get or set the zoomLevel API, after initialization:
       //Gets the zoomLevel value
        
       var property = $("#container").data("ejMap").model.zoomSettings.level;
       
       //Sets the zoomLevel value
        
       $("#container").data("ejMap").model.zoomSettings.level= 1;

    zoomSettings.minValue number

    Specifies the minimum zoomSettings level of the map

    Default Value

    • 1

    Example

  • JS
  • //To set minValue API value during initialization 
      $("#container").ejMap({zoomSettings:{minValue:1}});
  • JS
  • //Get or set the minValue API, after initialization:
       
       //Gets the minValue value 
       
       var property = $("#container").data("ejMap").model.zoomSettings.minValue;
       
       //Sets the minValue value
        
       $("#container").data("ejMap").model.zoomSettings.minValue= 1;

    zoomSettings.maxValue number

    Specifies the maximum zoom level of the map

    Default Value

    • 100

    Example

  • JS
  • //To set maxValue API value during initialization 
      $("#container").ejMap({zoomSettings:{maxValue:100}});
  • JS
  • //Get or set the maxValue API, after initialization:
       
       //Gets the maxValue value
        
       var property = $("#container").data("ejMap").model.zoomSettings.maxValue;
       
       //Sets the maxValue value 
       
       $("#container").data("ejMap").model.zoomSettings.maxValue= 100;

    navigationControl object

    Enables or Disables the navigation control for map to perform zooming and panning on map shapes.

    navigationControl.absolutePosition object

    Set the absolutePosition for navigation control

    Default Value

    • {x:0,y:0}

    Example

  • JS
  • //To set absolutePosition API value during initialization 
       $("#container").ejMap(navigationControl:{absolutePosition:{x:5,y:20}});
  • JS
  • //Get or set the absolutePosition, after initialization:
       
       //Gets the absolutePosition value
       
       var property = $("#container").data("ejMap").model.navigationControl.absolutePosition;
       
       //Sets the absolutePosition value
       
       $("#container").data("ejMap").model.navigationControl.absolutePosition={x:5,y:20}});

    navigationControl.content string

    Specifies the navigation control template for map

    Default Value

    • null

    Example

  • JS
  • //To set navigation control template for map during initialization 
       $("#container").ejMap(navigationControl:{content:null});
  • JS
  • //Get or set the navigation control template for map, after initialization:
    
       //Gets the navigation control template
       
       var property = $("#container").data("ejMap").model.navigationControl.content;
       
       //Sets the navigation control template
       
       $("#container").data("ejMap").model.navigationControl.content=null });

    navigationControl.dockPosition enum

    Set the dockPosition value for navigation control

    Name Description
    none specifies the none position
    topleft specifies the topleft position
    topcenter specifies the topcenter position
    topright specifies the topright position
    centerleft specifies the centerleft position
    center specifies the center position
    centerright specifies the centerright position
    bottomleft specifies the bottomleft position
    bottomcenter specifies the bottomcenter position
    bottomright specifies the bottomright position

    Default Value

    • centerleft

    Example

  • JS
  • //To set dockPosition value during initialization 
       $("#container").ejMap(navigationControl:{dockPosition:'centerleft'});
  • JS
  • //Get or set the dockPosition value, after initialization:
       
       //Gets the dockPosition value
       
       var property = $("#container").data("ejMap").model.navigationControl.dockPosition;
       
       //Sets the dockPosition value
       
       $("#container").data("ejMap").model.navigationControl.dockPosition='centerleft' });

    navigationControl.enableNavigation boolean

    Enables or Disables the Navigation for handling zooming map

    Default Value

    • false

    Example

  • JS
  • //To set enableNavigation API value during initialization 
       $("#container").ejMap(navigationControl:{enableNavigation:false});
  • JS
  • //Get or set the enableNavigation, after initialization:
       
       //Gets the enableNavigation value
       
       var property = $("#container").data("ejMap").model.navigationControl.enableNavigation;
       
       //Sets the enableNavigation value
       
       $("#container").data("ejMap").model.navigationControl.enableNavigation=false });

    navigationControl.orientation enum

    Set the orientation value for navigation control

    Name Description
    horizontal specifies the horizontal position
    vertical specifies the vertical position

    Default Value

    • vertical

    Example

  • JS
  • //To set orientation value during initialization 
       $("#container").ejMap(navigationControl:{orientation:'vertical'});
  • JS
  • //Get or set the orientation value, after initialization:
       
       //Gets the orientation value
       
       var property = $("#container").data("ejMap").model.navigationControl.orientation;
       
       //Sets the orientation value
       
       $("#container").data("ejMap").model.navigationControl.orientation='vertical' });

    locale string

    Name of the culture based on which map should be localized. Labels are localized with respect to the culture name.
    String type properties like template text are not localized automatically. Provide localized text as value to string type properties.

    Default Value

    • “en-US”

    Example

  • JS
  • //To set locale for map during initialization 
       $("#container").ejMap(locale:"en-US");
  • JS
  • //Get or set locale for map, after initialization:
    
       //Gets the locale
       
       var property = $("#container").data("ejMap").model.locale;
       
       //Sets the locale
       
       $("#container").data("ejMap").model.locale= "en-US" });

    layers array

    Layer for holding the map shapes

    layers.bingMapType enum

    to get the type of bing map.

    Name Description
    aerial specifies the aerial type
    aerialwithlabel specifies the aerialwithlabel type
    road specifies the road type

    Default Value

    • “aerial”

    Example

  • JS
  • // Set the type of bing map during initialization.                      
       $("#container").ejMap({layers: [{ bingMapType:'aerial' }]})
  • JS
  • //Get or set the type of bing map after initialization:
    
      //Gets the type of bing map.
    
      var property =$("#container").data("ejMap").model.layers[layerIndex].bingMapType;
    
      //Sets the type of bing map.
    
      $("#container").data("ejMap").model.layers[layerIndex].bingMapType  = 'aerial';

    layers.bubbleSettings object

    Specifies the bubble settings for map

    Example

  • JS
  • // Set the bubbleSettings of layer during initialization.                       
       $("#container").ejMap({layers: [{ layerType: "geometry", enableMouseHover: true, shapeSettings: { stroke: "black", fill: "#C3E6ED", highlightColor: "#63B7B7", selectionColor: "#207BB2", strokeThickness: "0.5" },bubbleSettings:{ valuePath: "valuePath", minValue: 20, maxValue: 30, color: "#379F64",}, shapeData: mapShapeData }]})
  • JS
  • //Get or set the bubbleSettings after initialization:
      
      //Gets the bubbleSettings from map.
      
      var bubbleSettings =$("#container").data("ejMap").model.layers[layerIndex].bubbleSettings;
      
      //Sets the bubbleSettings to map.
      
      $("#container").data("ejMap").model.layers[layerIndex].bubbleSettings  = { valuePath: "valuePath", minValue: 20, maxValue: 30, color: "#379F64"};

    layers.bubbleSettings.bubbleOpacity number

    Specifies the bubble Opacity value of bubbles for shape layer in map

    Default Value

    • “0.9”

    Example

  • JS
  • //To set bubbleOpacity API value during initialization 
      $("#container").ejMap({layers: {bubbleSettings: {bubbleOpacity:'0.9'}}});
  • JS
  • //Get or set the bubbleOpacity API, after initialization:
    
       //Gets the bubble Opacity value 
       
       var bubbleProperty =$("#container").data("ejMap").model.layers[layerIndex].bubbleSettings.bubbleOpacity;
      
       //Sets the bubble Opacity value 
       
       $("#container").data("ejMap").model.layers[0].bubbleSettings.bubbleOpacity='0.9';

    layers.bubbleSettings.color string

    Specifies the mouse hover color of the shape layer in map

    Default Value

    • “gray”

    Example

  • JS
  • //To set color API value during initialization 
       $("#container").ejMap({layers:{bubbleSettings: {color:'gray'}}});
  • JS
  • //Get or set the color API, after initialization:
       
       //Gets the color value 
       
       var bubbleProperty =$("#container").data("ejMap").model.layers[layerIndex].bubbleSettings.color;
      
       //Sets the color value 
       
       $("#container").data("ejMap").model.layers[0].bubbleSettings.color='gray';

    layers.bubbleSettings.colorMappings object

    Specifies the colorMappings of the shape layer in map

    Default Value

    • null

    Example

  • JS
  • //To set colorMappings API value during initialization 
      $("#container").ejMap({layers:{ bubbleSettings: {colorMappings:{rangeColorMapping:{from: 0,to: 100000,gradientColors: ["#9CBF4E", "#B8CE7B"]}}}}});
  • JS
  • //Get or set the colorMappings API, after initialization:
       
       //Gets the colorMappings value 
       
       var bubbleProperty =$("#container").data("ejMap").model.layers[layerIndex].bubbleSettings.colorMappings;
      
       //Sets the colorMappings value 
       
       $("#container").data("ejMap").model.layers[0].bubbleSettings.colorMappings={rangeColorMapping:{from: 0,to: 100000,gradientColors: ["#9CBF4E", "#B8CE7B"]}};

    layers.bubbleSettings.colorMappings.rangeColorMapping array

    Specifies the range colorMappings in the bubble layer.

    Default Value

    • null

      layers.bubbleSettings.colorMappings.rangeColorMapping.from number

    Start range colorMappings in the bubble layer.

    Default Value

    • null

    Example

  • JS
  • //To set start range colorMapping API value during initialization 
      $("#container").ejMap({layers:{ bubbleSettings: {colorMappings:{rangeColorMapping:[{from: 0,to: 100000,gradientColors: ["#9CBF4E", "#B8CE7B"]}]}}}});

    layers.bubbleSettings.colorMappings.rangeColorMapping.to number

    End range colorMappings in the bubble layer.

    Default Value

    • null

    Example

  • JS
  • //To set to range colorMapping API value during initialization 
      $("#container").ejMap({layers:{ bubbleSettings: {colorMappings:{rangeColorMapping:[{from: 0,to: 100000,gradientColors: ["#9CBF4E", "#B8CE7B"]}]}}}});

    layers.bubbleSettings.colorMappings.rangeColorMapping.gradientColors array

    GradientColors in the bubble layer of map.

    layers.bubbleSettings.colorMappings.rangeColorMapping.color string

    Color of the bubble layer.

    Default Value

    • null

    Example

  • JS
  • //To set gradientColors API value during initialization 
      $("#container").ejMap({layers:{ bubbleSettings: {colorMappings:{rangeColorMapping:[{from: 0,to: 100000,color:"#9CBF4E"}]}}}});

    layers.bubbleSettings.colorValuePath string

    Specifies the bubble color valuePath of the shape layer in map

    Default Value

    • null

    Example

  • JS
  • //To set colorValuePath  API value during initialization 
      $("#container").ejMap({layers: {bubbleSettings: {colorValuePath :'sales'}}});
  • JS
  • //Get or set the colorValuePath  API, after initialization:
       //Gets the colorValuePath  value 
       
       var bubbleProperty =$("#container").data("ejMap").model.layers[layerIndex].bubbleSettings.colorValuePath ;
            
       //Sets the colorValuePath  value 
       
       $("#container").data("ejMap").model.layers[0].bubbleSettings.colorValuePath ='sales';

    layers.bubbleSettings.maxValue number

    Specifies the maximum size value of bubbles for shape layer in map

    Default Value

    • “20”

    Example

  • JS
  • //To set maxValue API value during initialization 
      $("#container").ejMap({layers: {bubbleSettings: {maxValue:'20'}}});
  • JS
  • //Get or set the maxValue API, after initialization:
       
       //Gets the maxValue value 
       
       var bubbleProperty =$("#container").data("ejMap").model.layers[layerIndex].bubbleSettings.maxValue;
           
       //Sets the maxValue value 
       
       $("#container").data("ejMap").model.layers[0].bubbleSettings.maxValue='20';

    layers.bubbleSettings.minValue number

    Specifies the minimum size value of bubbles for shape layer in map

    Default Value

    • “10”

    Example

  • JS
  • //To set minValue API value during initialization 
      $("#container").ejMap({layers: {bubbleSettings: {minValue:'10'}}});
  • JS
  • //Get or set the minValue API, after initialization:
       
       //Gets the minValue value 
       
       var bubbleProperty =$("#container").data("ejMap").model.layers[layerIndex].bubbleSettings.minValue;
           
       //Sets the minValue value 
       
       $("#container").data("ejMap").model.layers[0].bubbleSettings.minValue='10';

    layers.bubbleSettings.showBubble boolean

    Specifies the showBubble visibility status map

    Default Value

    • true

    Example

  • JS
  • //To set showBubble API value during initialization 
      $("#container").ejMap({layers: {bubbleSettings: {showBubble:true}}});
  • JS
  • //Get or set the showBubble API, after initialization:
       
       //Gets the showBubble value 
       
       var bubbleProperty =$("#container").data("ejMap").model.layers[layerIndex].bubbleSettings.showBubble;
         
       //Sets the showBubble value 
       
       $("#container").data("ejMap").model.layers[0].bubbleSettings.showBubble=true;

    layers.bubbleSettings.showTooltip boolean

    Specifies the tooltip visibility status of the shape layer in map

    Default Value

    • false

    Example

  • JS
  • //To set showTooltip API value during initialization 
      $("#container").ejMap({layers: {bubbleSettings: {showTooltip:false}}});
  • JS
  • //Get or set the showTooltip API, after initialization:
       
       //Gets the showTooltip value 
       
       var bubbleProperty =$("#container").data("ejMap").model.layers[layerIndex].bubbleSettings.showTooltip;
        
       //Sets the showTooltip value 
       
       $("#container").data("ejMap").model.layers[0].bubbleSettings.showTooltip=false;

    layers.bubbleSettings.tooltipTemplate string

    Specifies the bubble tooltip template of the shape layer in map

    Default Value

    • null

    Example

  • JS
  • //To set tooltipTemplate API value during initialization 
      $("#container").ejMap({layers: {bubbleSettings: {tooltipTemplate:'template'}}});
  • JS
  • //Get or set the tooltipTemplate API, after initialization:
       
       //Gets the tooltipTemplate value 
       
       var bubbleProperty =$("#container").data("ejMap").model.layers[layerIndex].bubbleSettings.tooltipTemplate;
            
       //Sets the tooltipTemplate value 
       
       $("#container").data("ejMap").model.layers[0].bubbleSettings.tooltipTemplate='template';

    layers.bubbleSettings.valuePath string

    Specifies the bubble valuePath of the shape layer in map

    Default Value

    • null

    Example

  • JS
  • //To set valuePath API value during initialization 
      $("#container").ejMap({layers: {bubbleSettings: {valuePath:'name'}}});
  • JS
  • //Get or set the valuePath API, after initialization:
       
       //Gets the valuePath value 
       
       var bubbleProperty =$("#container").data("ejMap").model.layers[layerIndex].bubbleSettings.valuePath;
          
       //Sets the valuePath value 
       
       $("#container").data("ejMap").model.layers[0].bubbleSettings.valuePath='name';

    layers.dataSource object

    Specifies the datasource for the shape layer

    Example

  • JS
  • // Set the dataSource of layer during initialization.                        
       $("#container").ejMap({layers: [{ layerType: "geometry", dataSource: source,  shapeData: mapShapeData }]})
  • JS
  • //Get or set the dataSource after initialization:
       
       //Gets the dataSource from map layer.
       
       var dataSource =$("#container").data("ejMap").model.layers[layerIndex].dataSource;
       
       //Sets the dataSource to map layer.
       
       $("#container").data("ejMap").model.layers[layerIndex].dataSource  = source;

    layers.shapeDataPath string

    Specifies the data path of shape

    Example

  • JS
  • // Set the shapeDataPath of layer during initialization.                        
       $("#container").ejMap({layers: [{ shapeDataPath: "name"}]})
  • JS
  • //Get or set the shapeDataPath after initialization:
       
       //Gets the shapeDataPath from map layer.
       
       var property =$("#container").data("ejMap").model.layers[layerIndex].shapeDataPath;
       
       //Sets the shapeDataPath to map layer.
       
       $("#container").data("ejMap").model.layers[layerIndex].shapeDataPath  = 'name';

    layers.shapePropertyPath string

    Specifies the data path of shape

    Example

  • JS
  • // Set the shapePropertyPath of layer during initialization.                        
       $("#container").ejMap({layers: [{ shapePropertyPath: "name"}]})
  • JS
  • //Get or set the shapePropertyPath after initialization:
       
       //Gets the shapePropertyPath from map layer.
       
       var property =$("#container").data("ejMap").model.layers[layerIndex].shapePropertyPath;
       
       //Sets the shapePropertyPath to map layer.
       
       $("#container").data("ejMap").model.layers[layerIndex].shapePropertyPath  = 'name';

    layers.enableMouseHover boolean

    Enables or disables the shape mouse hover

    Default Value

    • false

    Example

  • JS
  • // Set the enableMouseHover during initialization.                      
       $("#container").ejMap({layers: [{ enableMouseHover:false }]})
  • JS
  • //Get or set the enableMouseHover after initialization:
       
       //Gets the enableMouseHover from map.
       
       var property =$("#container").data("ejMap").model.layers[layerIndex].enableMouseHover;
       
       //Sets the enableMouseHover to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].enableMouseHover  = false;

    layers.enableSelection boolean

    Enables or disables the shape selection

    Default Value

    • true

    Example

  • JS
  • // Set the enableSelection during initialization.                       
       $("#container").ejMap({layers: [{ enableSelection:true }]})
  • JS
  • //Get or set the enableSelection after initialization:
       
       //Gets the enableSelection from map.
       
       var property =$("#container").data("ejMap").model.layers[layerIndex].enableSelection;
       
       //Sets the enableSelection to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].enableSelection  = true;

    layers.key string

    {:#members:layers-key}}

    to get the key of bing map

    Default Value

    • null

    Example

  • JS
  • //to get the key of bing map during initialization 
       $("#container").ejMap({layers: [{  layerType: 'bing', key: "" }]})
  • JS
  • //Get or set the key of bing map after initialization:
       
       //Gets the key of bing map value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].key;     
       
       //Sets the bing map key value 
       
       $("#container").data("ejMap").model.layers[layerIndex].key = "";

    layers.labelSettings object

    Options for enabling and configuring labelSettings labelPath, smartLabelSize, labelLength etc.,

    layers.labelSettings.enableSmartLabel boolean

    enable or disable the enableSmartLabel property

    Default Value

    • false

    Example

  • JS
  • // Set the enableSmartLabel value of layer during initialization.                    
       $("#container").ejMap({layers:[{labelSettings: { enableSmartLabel: false}}]})
  • JS
  • //Get or set the enableSmartLabel value after initialization:
       
       //Gets the enableSmartLabel value 
       
       var labelSettings =$("#container").data("ejMap").model.layers[layerIndex].labelSettings.enableSmartLabel;
       
       //Sets the enableSmartLabel value
       
       $("#container").data("ejMap").model.layers[layerIndex].labelSettings = { enableSmartLabel: false};

    layers.labelSettings.labelLength number

    set the labelLength property

    Default Value

    • ‘2’

    Example

  • JS
  • // Set the labelLength value of layer during initialization.                         
       $("#container").ejMap({layers:[{labelSettings: { labelLength: 2}}]})
  • JS
  • //Get or set the labelLength value after initialization:
       
       //Gets the labelLength value 
       
       var labelSettings =$("#container").data("ejMap").model.layers[layerIndex].labelSettings.labelLength;
       
       //Sets the labelLength value
    
       $("#container").data("ejMap").model.layers[layerIndex].labelSettings = { labelLength: 2};

    layers.labelSettings.labelPath string

    set the labelPath property

    Default Value

    • null

    Example

  • JS
  • // Set the labelPath value of layer during initialization.                   
       $("#container").ejMap({layers:[{labelSettings: { labelPath: ""}}]})
  • JS
  • //Get or set the labelPath value after initialization:
       
       //Gets the labelPath value 
       
       var labelSettings =$("#container").data("ejMap").model.layers[layerIndex].labelSettings.labelPath;
       
       //Sets the labelPath value
       
       $("#container").data("ejMap").model.layers[layerIndex].labelSettings = { labelPath: ""};

    layers.labelSettings.showLabels boolean

    The property specifies whether to show labels or not.

    Default Value

    • false

    Example

  • JS
  • // Set the showLabel value of layer during initialization.                   
       $("#container").ejMap({layers:[{labelSettings: { showLabels: false}}]})
  • JS
  • //Get or set the showLabel value after initialization:
       
       //Gets the showLabel value 
       
       var labelSettings =$("#container").data("ejMap").model.layers[layerIndex].labelSettings.showLabels;
       
       //Sets the showLabel value
       
       $("#container").data("ejMap").model.layers[layerIndex].labelSettings = { showLabels: false};

    layers.labelSettings.smartLabelSize enum

    set the smartLabelSize property

    Name Description
    fixed specifies the fixed size
    default specifies the default size

    Default Value

    • “fixed”

    Example

  • JS
  • // Set the smartLabelSize value of layer during initialization.                      
       $("#container").ejMap({layers:[{labelSettings: { smartLabelSize: 'fixed'}}]})
  • JS
  • //Get or set the smartLabelSize value after initialization:
       
       //Gets the smartLabelSize value 
       
       var labelSettings =$("#container").data("ejMap").model.layers[layerIndex].labelSettings.smartLabelSize;
       
       //Sets the smartLabelSize value
       
       $("#container").data("ejMap").model.layers[layerIndex].labelSettings = { smartLabelSize: 'fixed'};

    layers.labelSettings.font object

    Options for customizing the data label font.

    layers.labelSettings.font.fontFamily string

    Font family of the data label.

    Default Value

    • “Segoe UI”

    Example

  • JS
  • $("#container").ejMap({
        layers : [{
             labelSettings:{
                 font :{fontFamily : "Algerian"}
             }    
        }]
    });

    layers.labelSettings.font.fontStyle enum

    Font style of the data label.

    Name Type Description
    Normal string Specifies the fontStyle as normal.
    Italic string Specifies the fontStyle as italic.

    Default Value

    • “normal”.

    Example

  • JS
  • $("#container").ejMap({
        layers : [{
            labelSettings:{
                font :{fontStyle : "italic"}
            }    
        }]                 
    });

    layers.labelSettings.font.fontWeight enum

    Name Type Description
    Regular string Specifies the font weight as regular.
    Bold string Specifies the font weight as bold.
    Lighter string Specifies the font weight as lighter.

    Font weight of the data label.

    Default Value

    • “regular”. See

    Example

  • JS
  • $("#container").ejMap({
        layers : [{
            labelSettings:{
                font :{fontWeight : "lighter"}
            }    
        }]                 
    });

    layers.labelSettings.font.opacity number

    Opacity of the text.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejMap({
        layers : [{
            labelSettings:{
                font :{opacity : 0.5}
            }    
        }]                 
    });

    layers.labelSettings.font.color string

    Font color of the data label text.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejMap({
        layers : [{
            labelSettings:{
                font :{color : "red"}
            }    
        }]                 
    });

    layers.labelSettings.font.size string

    Font size of the data label.

    Default Value

    • “12px”

    Example

  • JS
  • $("#container").ejMap({
        layers : [{
            labelSettings:{
                font :{size : "14px"}
            }    
        }]                 
    });

    layers.geometryType enum

    Specifies the map view type.

    Name Description
    geographic specifies the geographic view of map
    normal specifies the normal land view of map

    Default Value

    • ‘geographic’

    Example

  • JS
  • // Set the geometryType during initialization.                     
       $("#container").ejMap({layers: [{ geometryType:'geographic' }]})
  • JS
  • //Get or set the geometryType after initialization:
       
       //Gets the geometryType from map.
       
       var property =$("#container").data("ejMap").model.layers[layerIndex].geometryType;
       
       //Sets the geometryType to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].geometryType  = 'normal';

    layers.layerType enum

    Specifies the map type.

    Name Description
    geometry specifies the geometry type
    osm specifies the osm type
    bing specifies the bing type

    Default Value

    • ‘geometry’

    Example

  • JS
  • // Set the layerType during initialization.                     
       $("#container").ejMap({layers: [{ layerType:'geometry' }]})
  • JS
  • //Get or set the layerType after initialization:
       
       //Gets the layerType from map.
       
       var property =$("#container").data("ejMap").model.layers[layerIndex].layerType;
       
       //Sets the layerType to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].layerType  = 'geometry';

    layers.legendSettings object

    Options for enabling and configuring legendSettings position, height, width, mode, type etc.,

    layers.legendSettings.dockOnMap boolean

    Determines whether the legend should be placed outside or inside the map bounds

    Default Value

    • false

    Example

  • JS
  • //To set dockOnMap API value during initialization 
       $("#container").ejMap({layers: [{legendSettings: {dockOnMap:false} }]})
  • JS
  • //Get or set the dockOnMap API, after initialization:
       
       //Gets the dockOnMap value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].legendSettings.dockOnMap;        
       
       //Sets the dockOnMap value 
       
       $("#container").data("ejMap").model.layers[layerIndex].legendSettings  = {dockOnMap:false};

    layers.legendSettings.dockPosition enum

    Determines the legend placement and it is valid only when dockOnMap is true

    Name Description
    top specifies the top position
    bottom specifies the bottom position
    right specifies the bottom position
    left specifies the left position

    Default Value

    • “top”

    Example

  • JS
  • //To set dockPosition value during initialization 
       $("#container").ejMap({layers: [{legendSettings: {dockPosition:"top"} }]})
  • JS
  • //Get or set dockPosition value after initialization:
      
      //Gets the dockPosition value
      
      var property = =$("#container").data("ejMap").model.layers[layerIndex].legendSettings.dockPosition;     
      
      //Sets the dockPosition value value 
      
      $("#container").data("ejMap").model.layers[layerIndex].legendSettings  = {dockPosition:"top"};

    layers.legendSettings.height number

    height value for legend setting

    Default Value

    • 0

    Example

  • JS
  • //To set height value for legend during initialization 
       $("#container").ejMap({layers: [{legendSettings: {height:20} }]})
  • JS
  • //Get or set the height value for legend, after initialization:
       
       //Gets the height value for legend value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].legendSettings.height;   
       
       //Sets the height value for legend value 
       
       $("#container").data("ejMap").model.layers[layerIndex].legendSettings  = {height:20};

    layers.legendSettings.icon enum

    to get icon value for legend setting

    Name Description
    rectangle specifies the rectangle position
    circle specifies the circle position

    Default Value

    • “rectangle”

    Example

  • JS
  • //To set icon value during initialization 
       $("#container").ejMap({layers: [{legendSettings: {icon:"rectangle"} }]})
  • JS
  • //Get or set icon value after initialization:
       
       //Gets the icon value value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].legendSettings.icon;     
       
       //Sets the icon value value 
       
       $("#container").data("ejMap").model.layers[layerIndex].legendSettings  = {icon:"rectangle"};

    layers.legendSettings.iconHeight number

    icon height value for legend setting

    Default Value

    • 20

    Example

  • JS
  • //To set iconHeight value for legend during initialization 
       $("#container").ejMap({layers: [{legendSettings: {iconHeight:20} }]})
  • JS
  • //Get or set the iconHeight value for legend, after initialization:
       
       //Gets the iconHeight value for legend value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].legendSettings.iconHeight;       
       
       //Sets the iconHeight value for legend value 
       
       $("#container").data("ejMap").model.layers[layerIndex].legendSettings  = {iconHeight:20};

    layers.legendSettings.iconWidth number

    icon Width value for legend setting

    Default Value:

    • 20

    Example

  • JS
  • //To set iconWidth value for legend during initialization 
       $("#container").ejMap({layers: [{legendSettings: {iconWidth:20} }]})
  • JS
  • //Get or set the iconWidth value for legend, after initialization:
       
       //Gets the iconWidth value for legend value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].legendSettings.iconWidth;        
       
       //Sets the iconWidth value for legend value 
       
       $("#container").data("ejMap").model.layers[layerIndex].legendSettings  = {iconWidth:20};

    layers.legendSettings.labelOrientation enum

    set the orientation of legend labels

    Name Description
    horizontal specifies the horizontal position
    vertical specifies the vertical position

    Default Value

    • vertical

    Example

  • JS
  • //To set label orientation API value for legend setting during initialization 
       $("#container").ejMap({layers: [{legendSettings: {labelOrientation: "vertical"} }]})
  • JS
  • //Get or set the label orientation API, after initialization:
       
       //Gets the label orientation value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].legendSettings.labelOrientation; 
       
       //Sets the label orientation value 
       
       $("#container").data("ejMap").model.layers[layerIndex].legendSettings  = {labelOrientation: "vertical"};

    layers.legendSettings.leftLabel string

    to get leftLabel value for legend setting

    Default Value

    • null

    Example

  • JS
  • //To set leftLabel value during initialization 
       $("#container").ejMap({layers: [{legendSettings: {leftLabel:""} }]})
  • JS
  • //Get or set leftLabel value after initialization:
       
       //Gets the leftLabel value value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].legendSettings.leftLabel;        
       
       //Sets the leftLabel value value 
       
       $("#container").data("ejMap").model.layers[layerIndex].legendSettings  = {leftLabel:""};

    layers.legendSettings.textPath string

    To get the field name in the datasource for generating legend items.

    Default Value

    • null

    Example

  • JS
  • //To set textPath value during initialization 
       $("#container").ejMap({layers: [{legendSettings: {textPath:""} }]})
  • JS
  • //Get or set textPath value after initialization:
       
       //Gets the textPath value value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].legendSettings.textPath;        
       
       //Sets the textPath value value 
       
       $("#container").data("ejMap").model.layers[layerIndex].legendSettings  = {textPath:""};

    layers.legendSettings.mode enum

    to get mode of legend setting

    Name Description
    default specifies the default mode
    interactive specifies the interactive mode

    Default Value

    • “default”

    Example

  • JS
  • //To set legend mode during initialization 
       $("#container").ejMap({layers: [{legendSettings: {mode:"default"} }]})
  • JS
  • //Get or set the legend mode after initialization:
       
       //Gets the legend mode value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].legendSettings.mode;     
       
       //Sets the legend mode value 
       
       $("#container").data("ejMap").model.layers[layerIndex].legendSettings  = {mode:"default"};

    layers.legendSettings.position enum

    set the position of legend settings

    Name Description
    none specifies the none position
    topleft specifies the topleft position
    topcenter specifies the topcenter position
    topright specifies the topright position
    centerleft specifies the centerleft position
    center specifies the center position
    centerright specifies the centerright position
    bottomleft specifies the bottomleft position
    bottomcenter specifies the bottomcenter position
    bottomright specifies the bottomright position

    Default Value

    • topleft

    Example

  • JS
  • //To set legend position API value for legend setting during initialization 
       $("#container").ejMap({layers: [{legendSettings: {position: "topleft"} }]})
  • JS
  • //Get or set the legend position API, after initialization:
       
       //Gets the legend position value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].legendSettings.position; 
       
       //Sets the legend position value 
       
       $("#container").data("ejMap").model.layers[layerIndex].legendSettings  = {position: "topleft"};

    layers.legendSettings.positionX number

    x position value for legend setting

    Default Value

    • 0

    Example

  • JS
  • //To set x position value during initialization 
       $("#container").ejMap({layers: [{legendSettings: {positionX: 0} }]})
  • JS
  • //Get or set the x position, after initialization:
       
       //Gets the x position value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].legendSettings.positionX;        
       
       //Sets the x position value 
       
       $("#container").data("ejMap").model.layers[layerIndex].legendSettings  = {positionX: 0};

    layers.legendSettings.positionY number

    y position value for legend setting

    Default Value

    • 0

    Example

  • JS
  • //To set y position value during initialization 
       $("#container").ejMap({layers: [{legendSettings: {positionY: 0} }]})
  • JS
  • //Get or set the y position, after initialization:
       
       //Gets the y position value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].legendSettings.positionY;        
       
       //Sets the y position value 
       
       $("#container").data("ejMap").model.layers[layerIndex].legendSettings  = {positionY: 0};

    layers.legendSettings.rightLabel string

    to get rightLabel value for legend setting

    Default Value

    • null

    Example

  • JS
  • //To set rightLabel value during initialization 
       $("#container").ejMap({layers: [{legendSettings: {rightLabel:""} }]})
  • JS
  • //Get or set rightLabel value after initialization:
       
       //Gets the rightLabel value value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].legendSettings.rightLabel;       
       
       //Sets the rightLabel value value 
       
       $("#container").data("ejMap").model.layers[layerIndex].legendSettings  = {rightLabel:""};

    layers.legendSettings.showLabels boolean

    Enables or Disables the showLabels

    Default Value

    • false

    Example

  • JS
  • //To set showLabels API value during initialization 
       $("#container").ejMap({layers: [{legendSettings: {showLabels:false} }]})
  • JS
  • //Get or set the showLabels API, after initialization:
       
       //Gets the showLabels value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].legendSettings.showLabels;       
       
       //Sets the showLabels value 
       
       $("#container").data("ejMap").model.layers[layerIndex].legendSettings  = {showLabels:false};

    layers.legendSettings.showLegend boolean

    Enables or Disables the showLegend

    Default Value

    • false

    Example

  • JS
  • //To set showLegend API value during initialization 
       $("#container").ejMap({layers: [{legendSettings: {showLegend:false} }]})
  • JS
  • //Get or set the showLegend API, after initialization:
       
       //Gets the showLegend value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].legendSettings.showLegend;       
       
       //Sets the showLegend value 
    
       $("#container").data("ejMap").model.layers[layerIndex].legendSettings  = {showLegend:false};

    layers.legendSettings.toggleVisibility boolean

    Toggle the visibility of the legend.

    Default Value

    • false

    Example

  • JS
  • //To set toggleVisibility API value during initialization 
       $("#container").ejMap({layers: [{legendSettings: {toggleVisibility:true} }]})
  • JS
  • //Get or set the toggleVisibility API, after initialization:
       
       //Gets the toggleVisibility value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].legendSettings.toggleVisibility;       
       
       //Sets the toggleVisibility value 
    
       $("#container").data("ejMap").model.layers[layerIndex].legendSettings  = {toggleVisibility:true};

    layers.legendSettings.title string

    to get title of legend setting

    Default Value

    • null

    Example

  • JS
  • //To set legend title during initialization 
       $("#container").ejMap({layers: [{legendSettings: {title: ""} }]})
  • JS
  • //Get or set the legend title after initialization:
       
       //Gets the legend title value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].legendSettings.title;    
       
       //Sets the legend title value 
       
       $("#container").data("ejMap").model.layers[layerIndex].legendSettings  = {title: ""};

    layers.legendSettings.type enum

    to get type of legend setting

    Name Description
    layers specifies the layers type
    bubbles specifies the bubbles type

    Default Value

    • “layers”

    Example

  • JS
  • //To set legend type value during initialization 
       $("#container").ejMap({layers: [{legendSettings: {type:"layers"} }]})
  • JS
  • //Get or set the legend type value after initialization:
       
       //Gets the legend type value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].legendSettings.type;     
       
       //Sets the legend type value 
       
       $("#container").data("ejMap").model.layers[layerIndex].legendSettings  = {type:"layers"};

    layers.legendSettings.width number

    width value for legend setting

    Default Value

    • 0

    Example

  • JS
  • //To set width value for legend during initialization 
       $("#container").ejMap({layers: [{legendSettings: {width:20} }]})
  • JS
  • //Get or set the width value for legend, after initialization:
       
       //Gets the width value for legend value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].legendSettings.width;    
       
       //Sets the width value for legend value 
       
       $("#container").data("ejMap").model.layers[layerIndex].legendSettings  = {width:20};

    layers.mapItemsTemplate string

    Specifies the map items template for shapes.

    Example

  • JS
  • // Set the mapItemsTemplate of layer during initialization.                  
       $("#container").ejMap({layers: [{ layerType: "geometry", mapItemsTemplate: "Template",  shapeData: mapShapeData }]})
  • JS
  • //Get or set the mapItemsTemplate after initialization:
       
       //Gets the mapItemsTemplate from map.
       
       var mapItemsTemplate =$("#container").data("ejMap").model.layers[layerIndex].mapItemsTemplate;
       
       //Sets the mapItemsTemplate to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].mapItemsTemplate  = "Template";

    layers.markers Array

    Specify markers for shape layer.

    layers.markers.label string

    Display the value in the marker

    Default Value

    • ” “

    Example

  • JS
  • // Set the markers during initialization.                       
       $("#container").ejMap({layers: [{markers:[{label : "chennai",latitude : 13.08 ,longitude : 80.27}]}]})
  • JS
  • //Get or set the markers after initialization:
       
       //Gets the markers from map.
       
       var marker =$("#container").data("ejMap").model.layers[layerIndex].markers[markerIndex];
       
       //Sets the marker to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].markers[markerIndex]  = {label : "chennai",latitude : 13.08 ,longitude : 80.27};

    layers.markers.latitude number

    Display the value in the marker

    Default Value

    • 0

    Example

  • JS
  • // Set the markers during initialization.                       
       $("#container").ejMap({layers: [{markers:[{label : "chennai",latitude : 13.08 ,longitude : 80.27}]}]})
  • JS
  • //Get or set the markers after initialization:
       
       //Gets the markers from map.
       
       var marker =$("#container").data("ejMap").model.layers[layerIndex].markers[markerIndex];
       
       //Sets the marker to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].markers[markerIndex]  = {label : "chennai",latitude : 13.08 ,longitude : 80.27};

    layers.markers.longitude number

    Display the value in the marker

    Default Value

    • 0

    Example

  • JS
  • // Set the markers during initialization.                       
       $("#container").ejMap({layers: [{markers:[{label : "chennai",latitude : 13.08 ,longitude : 80.27}]}]})
  • JS
  • //Get or set the markers after initialization:
       
       //Gets the markers from map.
       
       var marker =$("#container").data("ejMap").model.layers[layerIndex].markers[markerIndex];
       
       //Sets the marker to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].markers[markerIndex]  = {label : "chennai",latitude : 13.08 ,longitude : 80.27};

    layers.markerTemplate string

    Specifies the map marker template for map layer.

    Default Value

    • null

    Example

  • JS
  • // Set the markerTemplate of layer during initialization.                    
       $("#container").ejMap({layers: [{ layerType: "geometry", markerTemplate: "Template",  shapeData: mapShapeData }]})
  • JS
  • //Get or set the markerTemplate after initialization:
       
       //Gets the markerTemplate from map.
       
       var markerTemplate =$("#container").data("ejMap").model.layers[layerIndex].markerTemplate;
       
       //Sets the markerTemplate to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].markerTemplate  = "Template";

    layers.selectedMapShapes Array

    Specify selectedMapShapes for shape layer

    Default Value

    • []

    Example

  • JS
  • //Gets the selectedMapShapes from map 
       var selectedShapes =$("#container").data("ejMap").model.layers[layerIndex].selectedMapShapes;

    layers.selectionMode enum

    Specifies the selection mode of the map. Accepted selection mode values are Default and Multiple.

    Name Description
    default specifies the default position
    multiple specifies the multiple position

    Default Value

    • “default”

    Example

  • JS
  • // Set the selection mode during initialization.                        
       $("#container").ejMap({layers: [{ selectionMode:'default' }]})
  • JS
  • //Get or set the selection mode after initialization:
       
       //Gets the selection mode from map.
       
       var property =$("#container").data("ejMap").model.layers[layerIndex].selectionMode;
       
       //Sets the selection mode to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].selectionMode  = 'default';

    layers.shapeData object

    Specifies the shape data for the shape layer

    Example

  • JS
  • // Set the shapeData of layer during initialization.                         
       $("#container").ejMap({layers: [{ layerType: "geometry", shapeData: mapShapeData }]})
  • JS
  • //Get or set the data after initialization:
       
       //Gets the data from map layer.
       
       var data =$("#container").data("ejMap").model.layers[layerIndex].shapeData;
       
       //Sets the data to map layer.
       
       $("#container").data("ejMap").model.layers[layerIndex].shapeData  = mapShapeData;

    layers.shapeSettings object

    Specifies the shape settings of map layer

    Example

  • JS
  • // Set the shapeSettings of layer during initialization.                     
       $("#container").ejMap({layers: [{ layerType: "geometry", enableMouseHover: true, shapeSettings: { stroke: "black", fill: "#C3E6ED", highlightColor: "#63B7B7", selectionColor: "#207BB2", strokeThickness: "0.5" }, shapeData: Africa }]})
  • JS
  • //Get or set the shapeSettings after initialization:
       
       //Gets the shapeSettings from map.
       
       var shapeSettings =$("#container").data("ejMap").model.layers[layerIndex].shapeSettings;
       
       //Sets the shapeSettings to map.
       
       $("#container").data("ejMap").model.layers[layerIndex]  = { layerType: "geometry", enableMouseHover: true, shapeSettings: { stroke: "black", fill: "#C3E6ED", highlightColor: "#63B7B7", selectionColor: "#207BB2", strokeThickness: "0.5" }, shapeData: Africa };

    layers.shapeSettings.autoFill boolean

    Enables or Disables the auto fill colors for shape layer in map. When this property value set to true, shapes will be filled with palette colors.

    Default Value

    • false

    Example

  • JS
  • //To set autoFill API value during initialization 
      $("#container").ejMap({layers: {shapeSettings: {autoFill:false}}});
  • JS
  • //Get or set the autoFill API, after initialization:
       
       //Gets the autoFill value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].shapeSettings.autoFill;
             
       //Sets the autoFill value 
       
       $("#container").data("ejMap").model.layers[0].shapeSettings.autoFill=false;

    layers.shapeSettings.colorMappings object

    Specifies the colorMappings of the shape layer in map

    Default Value

    • null

    Example

  • JS
  • //To set colorMappings API value during initialization 
      $("#container").ejMap({layers:{ shapeSettings: {colorMappings:{rangeColorMapping:[{from: 0,to: 100000,gradientColors: ["#9CBF4E", "#B8CE7B"]}]}}}});
  • JS
  • //Get or set the colorMappings API, after initialization:
       
       //Gets the colorMappings value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].shapeSettings.colorMappings;
        
       //Sets the colorMappings value 
       
       $("#container").data("ejMap").model.layers[0].shapeSettings.colorMappings={rangeColorMapping:[{from: 0,to: 100000,gradientColors: ["#9CBF4E", "#B8CE7B"]}]};

    layers.shapeSettings.colorMappings.rangeColorMapping array

    Specifies the range colorMappings in the shape layer of map.

    Default Value

    • null

    Example

  • JS
  • //To set rangeColorMapping API value during initialization 
      $("#container").ejMap({layers:{ shapeSettings: {colorMappings:{rangeColorMapping:[{from: 0,to: 100000,gradientColors: ["#9CBF4E", "#B8CE7B"]}]}}}});

    layers.shapeSettings.colorMappings.rangeColorMapping.from number

    Specifies the start range colorMappings in the shape layer of map.

    Default Value

    • null

    Example

  • JS
  • //To set start range colorMapping API value during initialization 
      $("#container").ejMap({layers:{ shapeSettings: {colorMappings:{rangeColorMapping:[{from: 0,to: 100000,gradientColors: ["#9CBF4E", "#B8CE7B"]}]}}}});

    layers.shapeSettings.colorMappings.rangeColorMapping.to number

    Specifies the to range colorMappings in the shape layer of map.

    Default Value

    • null

    Example

  • JS
  • //To set to range colorMapping API value during initialization 
      $("#container").ejMap({layers:{ shapeSettings: {colorMappings:{rangeColorMapping:[{from: 0,to: 100000,gradientColors: ["#9CBF4E", "#B8CE7B"]}]}}}});

    layers.shapeSettings.colorMappings.rangeColorMapping.gradientColors array

    Specifies the gradientColors in the shape layer of map.

    Default Value

    • null

    Example

  • JS
  • //To set gradientColors API value during initialization 
      $("#container").ejMap({layers:{ shapeSettings: {colorMappings:{rangeColorMapping:[{from: 0,to: 100000,gradientColors: ["#9CBF4E", "#B8CE7B"]}]}}}});

    layers.shapeSettings.colorMappings.equalColorMapping array

    Specifies the equalColorMapping in the shape layer of map.

    Default Value

    • null

    Example

  • JS
  • //To set equalColorMapping API value during initialization 
      $("#container").ejMap({layers:{ shapeSettings: {colorMappings:{equalColorMapping:[{ value: "Romney", color: "#D84444" }]}}}});

    layers.shapeSettings.colorMappings.equalColorMapping.value string

    Specifies the equalColorMapping value in the shape layer of map.

    Default Value

    • null

    Example

  • JS
  • //To set equalColorMapping value API value during initialization 
      $("#container").ejMap({layers:{ shapeSettings: {colorMappings:{equalColorMapping:[{ value: "Romney", color: "#D84444" }]}}}});

    layers.shapeSettings.colorMappings.equalColorMapping.color string

    Specifies the equalColorMapping color in the shape layer of map.

    Default Value

    • null

    Example

  • JS
  • //To set equalColorMapping color API value during initialization 
      $("#container").ejMap({layers:{ shapeSettings: {colorMappings:{equalColorMapping:[{ value: "Romney", color: "#D84444" }]}}}});
  • JS
  • //Get or set the colorMappings API, after initialization:
       
       //Gets the colorMappings value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].shapeSettings.colorMappings;
        
       //Sets the colorMappings value 
       
       $("#container").data("ejMap").model.layers[0].shapeSettings.colorMappings={rangeColorMapping:{from: 0,to: 100000,gradientColors: ["#9CBF4E", "#B8CE7B"]}};

    layers.shapeSettings.colorPalette enum

    Specifies the shape color palette value of the shape layer in map. Accepted colorPalette values are palette1, palette2, palette3 and custompalette.

    Name Description
    palette1 specifies the palette1 color
    palette2 specifies the palette2 color
    palette3 specifies the palette3 color
    custompalette specifies the custom color

    Default Value

    • “palette1”

    Example

  • JS
  • //To set colorPalette API value during initialization 
      $("#container").ejMap({layers: {shapeSettings: {colorPalette:'palette1'}}});
  • JS
  • //Get or set the colorPalette API, after initialization:
       
       //Gets the colorPalette value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].shapeSettings.colorPalette;
         
       //Sets the colorPalette value 
       
       $("#container").data("ejMap").model.layers[0].shapeSettings.colorPalette='palette1';

    layers.shapeSettings.colorValuePath string

    Specifies the shape color valuePath of the shape layer in map

    Default Value

    • null

    Example

  • JS
  • //To set colorValuePath  API value during initialization 
      $("#container").ejMap({layers: {shapeSettings: {colorValuePath :'sales'}}});
  • JS
  • //Get or set the colorValuePath  API, after initialization:
       
       //Gets the colorValuePath  value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].shapeSettings.colorValuePath ;
      
       //Sets the colorValuePath  value 
       
       $("#container").data("ejMap").model.layers[0].shapeSettings.colorValuePath ='sales';

    layers.shapeSettings.colorPath string

    Specifies the field name in the datasource that contains color values for each shapes.

    Default Value

    • null

    Example

  • JS
  • //To set colorPath  API value during initialization 
      $("#container").ejMap({layers: {shapeSettings: {colorPath :'fill'}}});
  • JS
  • //Get or set the colorPath  API, after initialization:
       
       //Gets the colorPath  value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].shapeSettings.colorPath ;
      
       //Sets the colorValuePath  value 
       
       $("#container").data("ejMap").model.layers[0].shapeSettings.colorPath ='fill';

    layers.shapeSettings.enableGradient boolean

    Enables or Disables the gradient colors for map shapes.

    Default Value

    • false

    Example

  • JS
  • //To set enableGradient API value during initialization 
      $("#container").ejMap({layers: {shapeSettings: {enableGradient:false}}});
  • JS
  • //Get or set the enableGradient API, after initialization:
       
       //Gets the enableGradient value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].shapeSettings.enableGradient;
       
       //Sets the enableGradient value 
       
       $("#container").data("ejMap").model.layers[0].shapeSettings.enableGradient=false;

    layers.shapeSettings.fill string

    Specifies the shape fill color of the shape layer in map

    Default Value

    • “#E5E5E5”

    Example

  • JS
  • //To set fill API value during initialization 
      $("#container").ejMap({layers: {shapeSettings: {fill:'#E5E5E5'}}});
  • JS
  • //Get or set the fill API, after initialization:
    
       //Gets the fill value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].shapeSettings.fill;
         
       //Sets the fill value 
       
       $("#container").data("ejMap").model.layers[0].shapeSettings.fill='#E5E5E5';

    layers.shapeSettings.highlightBorderWidth number

    Specifies the mouse over width of the shape layer in map

    Default Value

    • 1

    Example

  • JS
  • //To set highlightBorderWidth API value during initialization 
      $("#container").ejMap({layers: {shapeSettings: {highlightBorderWidth:1}}});
  • JS
  • //Get or set the highlightBorderWidth API, after initialization:
       
       //Gets the highlightBorderWidth value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].shapeSettings.highlightBorderWidth;
         
       //Sets the highlightBorderWidth value 
       
       $("#container").data("ejMap").model.layers[0].shapeSettings.highlightBorderWidth=1;

    layers.shapeSettings.highlightColor string

    Specifies the mouse hover color of the shape layer in map

    Default Value

    • “gray”

    Example

  • JS
  • //To set highlightColor API value during initialization 
      $("#container").ejMap({layers:{shapeSettings: {highlightColor:'gray'}}});
  • JS
  • //Get or set the highlightColor API, after initialization:
       
       //Gets the highlightColor value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].shapeSettings.highlightColor;
       
       //Sets the highlightColor value 
       
       $("#container").data("ejMap").model.layers[0].shapeSettings.highlightColor='gray';

    layers.shapeSettings.highlightStroke string

    Specifies the mouse over stroke color of the shape layer in map

    Default Value

    • “#C1C1C1”

    Example

  • JS
  • //To set highlightStroke API value during initialization 
      $("#container").ejMap({layers: {shapeSettings: {highlightStroke:'#C1C1C1'}}});
  • JS
  • //Get or set the highlightStroke API, after initialization:
       
       //Gets the highlightStroke value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].shapeSettings.highlightStroke;
      
       //Sets the highlightStroke value 
       
       $("#container").data("ejMap").model.layers[0].shapeSettings.highlightStroke='#C1C1C1';

    layers.shapeSettings.selectionColor string

    Specifies the shape selection color of the shape layer in map

    Default Value

    • “gray”

    Example

  • JS
  • //To set selectionColor API value during initialization 
      $("#container").ejMap({layers: {shapeSettings: {selectionColor:'gray'}}});
  • JS
  • //Get or set the selectionColor API, after initialization:
       
       //Gets the selectionColor value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].shapeSettings.selectionColor;
       
       //Sets the selectionColor value 
       
       $("#container").data("ejMap").model.layers[0].shapeSettings.selectionColor='gray';

    layers.shapeSettings.selectionStroke string

    Specifies the shape selection stroke color of the shape layer in map

    Default Value

    • “#C1C1C1”

    Example

  • JS
  • //To set selectionStroke API value during initialization 
      $("#container").ejMap({layers: {shapeSettings: {selectionStroke:'#C1C1C1'}}});
  • JS
  • //Get or set the selectionStroke API, after initialization:
       
       //Gets the selectionStroke value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].shapeSettings.selectionStroke;
      
       //Sets the selectionStroke value 
       
       $("#container").data("ejMap").model.layers[0].shapeSettings.selectionStroke='#C1C1C1';

    layers.shapeSettings.selectionStrokeWidth number

    Specifies the shape selection stroke width of the shape layer in map

    Default Value

    • 1

    Example

  • JS
  • //To set selectionStrokeWidth API value during initialization 
      $("#container").ejMap({layers: {shapeSettings: {selectionStrokeWidth:1}}});
  • JS
  • //Get or set the selectionStrokeWidth API, after initialization:
       
       //Gets the selectionStrokeWidth value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].shapeSettings.selectionStrokeWidth;
         
       //Sets the selectionStrokeWidth value 
       
       $("#container").data("ejMap").model.layers[0].shapeSettings.selectionStrokeWidth=1;

    layers.shapeSettings.stroke string

    Specifies the shape stroke color of the shape layer in map

    Default Value

    • “#C1C1C1”

    Example

  • JS
  • //To set stroke API value during initialization 
      $("#container").ejMap({layers: {shapeSettings: {stroke:'#C1C1C1'}}});
  • JS
  • //Get or set the stroke API, after initialization:
       
       //Gets the stroke value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].shapeSettings.stroke;
       
       //Sets the stroke value 
       
       $("#container").data("ejMap").model.layers[0].shapeSettings.stroke='#C1C1C1';

    layers.shapeSettings.strokeThickness number

    Specifies the shape stroke thickness value of the shape layer in map

    Default Value

    • “0.2”

    Example

  • JS
  • //To set strokeThickness API value during initialization 
      $("#container").ejMap({layers: {shapeSettings: {strokeThickness:'0.2'}}});
  • JS
  • //Get or set the strokeThickness API, after initialization:
       
       //Gets the strokeThickness value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].shapeSettings.strokeThickness;
      
       //Sets the strokeThickness value 
       
       $("#container").data("ejMap").model.layers[0].shapeSettings.strokeThickness='0.2';

    layers.shapeSettings.valuePath string

    Specifies the shape valuePath of the shape layer in map

    Default Value

    • null

    Example

  • JS
  • //To set valuePath API value during initialization 
      $("#container").ejMap({layers: {shapeSettings: {valuePath:'name'}}});
  • JS
  • //Get or set the valuePath API, after initialization:
       
       //Gets the valuePath value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].shapeSettings.valuePath;
            
       //Sets the valuePath value 
       
       $("#container").data("ejMap").model.layers[0].shapeSettings.valuePath='name';

    layers.showMapItems boolean

    Shows or hides the map items.

    Default Value

    • false

    Example

  • JS
  • // Set the showMapItems during initialization.                  
       $("#container").ejMap({layers: [{ showMapItems:false }]})
  • JS
  • //Get or set the showMapItems after initialization:
    
      //Gets the showMapItems from map.
    
      var property =$("#container").data("ejMap").model.layers[layerIndex].showMapItems;
    
      //Sets the showMapItems to map.
    
      $("#container").data("ejMap").model.layers[layerIndex].showMapItems  = false;

    layers.showTooltip boolean

    Shows or hides the tooltip for shapes

    Default Value

    • false

    Example

  • JS
  • // Set the showTooltip during initialization.                   
       $("#container").ejMap({layers: [{ showTooltip:false }]})
  • JS
  • //Get or set the showTooltip after initialization:
    
      //Gets the showTooltip from map.
    
      var property =$("#container").data("ejMap").model.layers[layerIndex].showTooltip;
    
      //Sets the showTooltip to map.
    
      $("#container").data("ejMap").model.layers[layerIndex].showTooltip  = false;

    layers.tooltipTemplate string

    Specifies the tooltip template for shapes.

    Example

  • JS
  • // Set the tooltipTemplate of layer during initialization.                   
            $("#container").ejMap({layers: [{ layerType: "geometry", tooltipTemplate: "Template",  shapeData: mapShapeData }]})
  • JS
  • //Get or set the tooltipTemplate after initialization:
       
       //Gets the tooltipTemplate from map.
       
       var tooltipTemplate =$("#container").data("ejMap").model.layers[layerIndex].tooltipTemplate;
       
       //Sets the tooltipTemplate to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].tooltipTemplate  ="Template";

    layers.urlTemplate string

    Specifies the URL template for the OSM type map.

    Default Value

    • ‘http://a.tile.openstreetmap.org/level/tileX/tileY.png’

    Example

  • JS
  • // Set the urlTemplate during initialization.                   
       $("#container").ejMap({layers: [{ urlTemplate:'http://a.tile.openstreetmap.org/level/tileX/tileY.png' }]})
  • JS
  • //Get or set the urlTemplate after initialization:
     
       //Gets the urlTemplate from map.
      
       var property =$("#container").data("ejMap").model.layers[layerIndex].urlTemplate;
       
       //Sets the urlTemplate to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].urlTemplate  = 'http://a.tile.openstreetmap.org/level/tileX/tileY.png';

    layers.subLayers array

    Sublayer is the collection of shape Layer

    layers.subLayers.bingMapType enum

    to get the type of bing map.

    Default Value

    • “aerial”

    Example

  • JS
  • // Set the type of bing map during initialization.                      
       $("#container").ejMap({layers: [{ sublayers: [{ bingMapType:'aerial' }]} ]})
  • JS
  • //Get or set the type of bing map after initialization:
    
      //Gets the type of bing map.
    
      var property =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].bingMapType;
    
      //Sets the type of bing map.
    
      $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].bingMapType  = 'aerial';

    layers.subLayers.bubbleSettings object

    Specifies the bubble settings for map

    Example

  • JS
  • // Set the bubbleSettings of layer during initialization.                       
       $("#container").ejMap({layers: [{ sublayers: [{ layerType: "geometry", enableMouseHover: true, shapeSettings: { stroke: "black", fill: "#C3E6ED", highlightColor: "#63B7B7", selectionColor: "#207BB2", strokeThickness: "0.5" },bubbleSettings:{ valuePath: "valuePath", minValue: 20, maxValue: 30, color: "#379F64",}, shapeData: mapShapeData }]} ]})
  • JS
  • //Get or set the bubbleSettings after initialization:
      
      //Gets the bubbleSettings from map.
      
      var bubbleSettings =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].bubbleSettings;
      
      //Sets the bubbleSettings to map.
      
      $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].bubbleSettings  = { valuePath: "valuePath", minValue: 20, maxValue: 30, color: "#379F64"};

    layers.subLayers.bubbleSettings.bubbleOpacity number

    Specifies the bubble Opacity value of bubbles for shape layer in map

    Default Value

    • “0.9”

    Example

  • JS
  • //To set bubbleOpacity API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{ bubbleSettings: {bubbleOpacity:'0.9'}}] } ]);
  • JS
  • //Get or set the bubbleOpacity API, after initialization:
    
       //Gets the bubble Opacity value 
       
       var bubbleProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].bubbleSettings.bubbleOpacity;
      
       //Sets the bubble Opacity value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].bubbleSettings.bubbleOpacity='0.9';

    layers.subLayers.bubbleSettings.color string

    Specifies the mouse hover color of the shape layer in map

    Default Value

    • “gray”

    Example

  • JS
  • //To set color API value during initialization 
        $("#container").ejMap({layers:[{ subLayers: [{ bubbleSettings: {color:'gray'}}] } ]);
  • JS
  • //Get or set the color API, after initialization:
       
       //Gets the color value 
       
       var bubbleProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].bubbleSettings.color;
      
       //Sets the color value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].bubbleSettings.color='gray';

    layers.subLayers.bubbleSettings.colorMappings object

    Specifies the colorMappings of the shape layer in map

    Default Value

    • null

    Example

  • JS
  • //To set colorMappings API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{bubbleSettings: {colorMappings:{rangeColorMapping:{from: 0,to: 100000,gradientColors: ["#9CBF4E", "#B8CE7B"]} }}}]}]});
  • JS
  • //Get or set the colorMappings API, after initialization:
       
       //Gets the colorMappings value 
       
       var bubbleProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].bubbleSettings.colorMappings;
      
       //Sets the colorMappings value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].bubbleSettings.colorMappings={rangeColorMapping:{from: 0,to: 100000,gradientColors: ["#9CBF4E", "#B8CE7B"]} ]}};

    layers.subLayers.bubbleSettings.colorMappings.rangeColorMapping array

    Specifies the range colorMappings in the bubble layer.

    Default Value

    • null

      layers.subLayers.bubbleSettings.colorMappings.rangeColorMapping.from number

    Start range colorMappings in the bubble layer.

    Default Value

    • null

    Example

  • JS
  • //To set start range colorMapping API value during initialization 
      $("#container").ejMap({layers:[{ subLayers:[{ bubbleSettings: {colorMappings:{rangeColorMapping:[{from: 0,to: 100000,gradientColors: ["#9CBF4E", "#B8CE7B"]} ]}} }]}]});

    layers.subLayers.bubbleSettings.colorMappings.rangeColorMapping.to number

    End range colorMappings in the bubble layer.

    Default Value

    • null

    Example

  • JS
  • //To set to range colorMapping API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{ bubbleSettings: {colorMappings:{rangeColorMapping:[{from: 0,to: 100000,gradientColors: ["#9CBF4E", "#B8CE7B"]} ]}}}]}}]});

    layers.subLayers.bubbleSettings.colorMappings.rangeColorMapping.gradientColors array

    GradientColors in the bubble layer of map.

    layers.subLayers.bubbleSettings.colorMappings.rangeColorMapping.color string

    Color of the bubble layer.

    Default Value

    • null

    Example

  • JS
  • //To set gradientColors API value during initialization 
      $("#container").ejMap({layers:[{ subLayers:[{ bubbleSettings: {colorMappings:{rangeColorMapping:[{from: 0,to: 100000,color:"#9CBF4E"}]}}]}]});

    layers.subLayers.bubbleSettings.colorValuePath string

    Specifies the bubble color valuePath of the shape layer in map

    Default Value

    • null

    Example

  • JS
  • //To set colorValuePath  API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{bubbleSettings: {colorValuePath :'sales'}}]}]});
  • JS
  • //Get or set the colorValuePath  API, after initialization:
       //Gets the colorValuePath  value 
       
       var bubbleProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].bubbleSettings.colorValuePath ;
            
       //Sets the colorValuePath  value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayersIndex].bubbleSettings.colorValuePath ='sales';

    layers.subLayers.bubbleSettings.colorPath string

    Specifies the field name in the datasource that contains color values for each bubbles.

    Default Value

    • null

    Example

  • JS
  • //To set colorPath  API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{bubbleSettings: {colorPath :'fill'}}]}]});
  • JS
  • //Get or set the colorPath  API, after initialization:
       //Gets the colorPath  value 
       
       var bubbleProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].bubbleSettings.colorPath ;
            
       //Sets the colorPath  value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayersIndex].bubbleSettings.colorPath ='fill';

    layers.subLayers.bubbleSettings.maxValue number

    Specifies the maximum size value of bubbles for shape layer in map

    Default Value

    • “20”

    Example

  • JS
  • //To set maxValue API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{bubbleSettings: {maxValue:'20'}}]}] });
  • JS
  • //Get or set the maxValue API, after initialization:
       
       //Gets the maxValue value 
       
       var bubbleProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].bubbleSettings.maxValue;
           
       //Sets the maxValue value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayersIndex].bubbleSettings.maxValue='20';

    layers.subLayers.bubbleSettings.minValue number

    Specifies the minimum size value of bubbles for shape layer in map

    Default Value

    • “10”

    Example

  • JS
  • //To set minValue API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{bubbleSettings: {minValue:'10'}}]}]});
  • JS
  • //Get or set the minValue API, after initialization:
       
       //Gets the minValue value 
       
       var bubbleProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].bubbleSettings.minValue;
           
       //Sets the minValue value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayersIndex].bubbleSettings.minValue='10';

    layers.subLayers.bubbleSettings.showBubble boolean

    Specifies the showBubble visibility status map

    Default Value

    • true

    Example

  • JS
  • //To set showBubble API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{bubbleSettings: {showBubble:true}}]}]});
  • JS
  • //Get or set the showBubble API, after initialization:
       
       //Gets the showBubble value 
       
       var bubbleProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].bubbleSettings.showBubble;
         
       //Sets the showBubble value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayersIndex].bubbleSettings.showBubble=true;

    layers.subLayers.bubbleSettings.showTooltip boolean

    Specifies the tooltip visibility status of the shape layer in map

    Default Value

    • false

    Example

  • JS
  • //To set showTooltip API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{bubbleSettings: {showTooltip:false}}]}]});
  • JS
  • //Get or set the showTooltip API, after initialization:
       
       //Gets the showTooltip value 
       
       var bubbleProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].bubbleSettings.showTooltip;
        
       //Sets the showTooltip value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayersIndex].bubbleSettings.showTooltip=false;

    layers.subLayers.bubbleSettings.tooltipTemplate string

    Specifies the bubble tooltip template of the shape layer in map

    Default Value

    • null

    Example

  • JS
  • //To set tooltipTemplate API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{bubbleSettings: {tooltipTemplate:'template'}}]}]});
  • JS
  • //Get or set the tooltipTemplate API, after initialization:
       
       //Gets the tooltipTemplate value 
       
       var bubbleProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].bubbleSettings.tooltipTemplate;
            
       //Sets the tooltipTemplate value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayersIndex].bubbleSettings.tooltipTemplate='template';

    layers.subLayers.bubbleSettings.valuePath string

    Specifies the bubble valuePath of the shape layer in map

    Default Value

    • null

    Example

  • JS
  • //To set valuePath API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{bubbleSettings: {valuePath:'name'}}]}]});
  • JS
  • //Get or set the valuePath API, after initialization:
       
       //Gets the valuePath value 
       
       var bubbleProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].bubbleSettings.valuePath;
          
       //Sets the valuePath value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayersIndex].bubbleSettings.valuePath='name';

    layers.subLayers.dataSource object

    Specifies the datasource for the shape layer

    Example

  • JS
  • // Set the dataSource of layer during initialization.                        
       $("#container").ejMap({layers: [{ subLayers: [{ layerType: "geometry", dataSource: source,  shapeData: mapShapeData }]} ]});
  • JS
  • //Get or set the dataSource after initialization:
       
       //Gets the dataSource from map layer.
       
       var dataSource =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].dataSource;
       
       //Sets the dataSource to map layer.
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].dataSource  = source;

    layers.subLayers.shapeDataPath string

    Specifies the data path of shape

    Example

  • JS
  • // Set the shapeDataPath of layer during initialization.                        
       $("#container").ejMap({layers: [{ subLayers: [{ shapeDataPath: "name"}]} ]});
  • JS
  • //Get or set the shapeDataPath after initialization:
       
       //Gets the shapeDataPath from map layer.
       
       var property =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].shapeDataPath;
       
       //Sets the shapeDataPath to map layer.
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].shapeDataPath  = 'name';

    layers.subLayers.shapePropertyPath string

    Specifies the data path of shape

    Example

  • JS
  • // Set the shapePropertyPath of layer during initialization.                        
       $("#container").ejMap({layers: [{ subLayers: [{ shapePropertyPath: "name"}]} ]});
  • JS
  • //Get or set the shapePropertyPath after initialization:
       
       //Gets the shapePropertyPath from map layer.
       
       var property =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].shapePropertyPath;
       
       //Sets the shapePropertyPath to map layer.
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].shapePropertyPath  = 'name';

    layers.subLayers.enableMouseHover boolean

    Enables or disables the shape mouse hover

    Default Value

    • false

    Example

  • JS
  • // Set the enableMouseHover during initialization.                      
       $("#container").ejMap({layers: [{ subLayers: [{ enableMouseHover:false }]} ]});
  • JS
  • //Get or set the enableMouseHover after initialization:
       
       //Gets the enableMouseHover from map.
       
       var property =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].enableMouseHover;
       
       //Sets the enableMouseHover to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].enableMouseHover  = false;

    layers.subLayers.enableSelection boolean

    Enables or disables the shape selection

    Default Value

    • true

    Example

  • JS
  • // Set the enableSelection during initialization.                       
       $("#container").ejMap({layers: [{ subLayers: [{ enableSelection:true }]} ]});
  • JS
  • //Get or set the enableSelection after initialization:
       
       //Gets the enableSelection from map.
       
       var property =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].enableSelection;
       
       //Sets the enableSelection to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].enableSelection  = true;

    layers.subLayers.key string

    {:#members:layers-sublayers-key}}

    to get the key of bing map

    Default Value

    • null

    Example

  • JS
  • //to get the key of bing map during initialization 
       $("#container").ejMap({layers: [{ subLayers: [{  layerType: 'bing', key: "" }]} ]});
  • JS
  • //Get or set the key of bing map after initialization:
       
       //Gets the key of bing map value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].key;     
       
       //Sets the bing map key value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].key = "";

    layers.subLayers.labelSettings object

    Options for enabling and configuring labelSettings labelPath, smartLabelSize, labelLength etc.,

    layers.subLayers.labelSettings.enableSmartLabel boolean

    enable or disable the enableSmartLabel property

    Default Value

    • false

    Example

  • JS
  • // Set the enableSmartLabel value of layer during initialization.                    
       $("#container").ejMap({layers:[{ subLayers: [{labelSettings: { enableSmartLabel: false}}]} ]});
  • JS
  • //Get or set the enableSmartLabel value after initialization:
       
       //Gets the enableSmartLabel value 
       
       var labelSettings =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].labelSettings.enableSmartLabel;
       
       //Sets the enableSmartLabel value
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].labelSettings = { enableSmartLabel: false};

    layers.subLayers.labelSettings.labelLength number

    set the labelLength property

    Default Value

    • ‘2’

    Example

  • JS
  • // Set the labelLength value of layer during initialization.                         
       $("#container").ejMap({layers:[{subLayers: [{labelSettings: { labelLength: 2}}]} ]});
  • JS
  • //Get or set the labelLength value after initialization:
       
       //Gets the labelLength value 
       
       var labelSettings =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].labelSettings.labelLength;
       
       //Sets the labelLength value
    
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].labelSettings = { labelLength: 2};

    layers.subLayers.labelSettings.labelPath string

    set the labelPath property

    Default Value

    • null

    Example

  • JS
  • // Set the labelPath value of layer during initialization.                   
       $("#container").ejMap({layers:[{subLayers:[{ labelSettings: { labelPath: ""}}]} ]});
  • JS
  • //Get or set the labelPath value after initialization:
       
       //Gets the labelPath value 
       
       var labelSettings =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].labelSettings.labelPath;
       
       //Sets the labelPath value
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].labelSettings = { labelPath: ""};

    layers.subLayers.labelSettings.showLabels boolean

    The property specifies whether to show labels or not.

    Default Value

    • false

    Example

  • JS
  • // Set the showLabel value of layer during initialization.                   
       $("#container").ejMap({layers:[{ subLayers: [{labelSettings: { showLabels: false}}]} ]});
  • JS
  • //Get or set the showLabel value after initialization:
       
       //Gets the showLabel value 
       
       var labelSettings =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].labelSettings.showLabels;
       
       //Sets the showLabel value
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].labelSettings = { showLabels: false};

    layers.subLayers.labelSettings.smartLabelSize enum

    set the smartLabelSize property

    Default Value

    • “fixed”

    Example

  • JS
  • // Set the smartLabelSize value of layer during initialization.                      
       $("#container").ejMap({layers:[{ subLayers:[{ labelSettings: { smartLabelSize: 'fixed'}}]} ]});
  • JS
  • //Get or set the smartLabelSize value after initialization:
       
       //Gets the smartLabelSize value 
       
       var labelSettings =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].labelSettings.smartLabelSize;
       
       //Sets the smartLabelSize value
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].labelSettings = { smartLabelSize: 'fixed'};

    layers.subLayers.geometryType enum

    Specifies the map view type.

    Default Value

    • ‘geographic’

    Example

  • JS
  • // Set the geometryType during initialization.                     
       $("#container").ejMap({layers: [{ subLayers: [{ geometryType:'geographic' }]} ]});
  • JS
  • //Get or set the geometryType after initialization:
       
       //Gets the geometryType from map.
       
       var property =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].geometryType;
       
       //Sets the geometryType to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].geometryType  = 'normal';

    layers.subLayers.layerType enum

    Specifies the map type.

    Default Value

    • ‘geometry’

    Example

  • JS
  • // Set the layerType during initialization.                     
       $("#container").ejMap({layers: [{ sublayers: [{ layerType:'geometry' }]} ]});
  • JS
  • //Get or set the layerType after initialization:
       
       //Gets the layerType from map.
       
       var property =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].layerType;
       
       //Sets the layerType to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].layerType  = 'geometry';

    layers.subLayers.legendSettings object

    Options for enabling and configuring legendSettings position, height, width, mode, type etc.,

    layers.subLayers.legendSettings.dockOnMap boolean

    Determines whether the legend should be placed outside or inside the map bounds

    Default Value

    • false

    Example

  • JS
  • //To set dockOnMap API value during initialization 
       $("#container").ejMap({layers: [{ subLayers: [{legendSettings: {dockOnMap:false} }]} ]});
  • JS
  • //Get or set the dockOnMap API, after initialization:
       
       //Gets the dockOnMap value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings.dockOnMap;        
       
       //Sets the dockOnMap value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings  = {dockOnMap:false};

    layers.subLayers.legendSettings.dockPosition enum

    Determines the legend placement and it is valid only when dockOnMap is true

    Default Value

    • “top”

    Example

  • JS
  • //To set dockPosition value during initialization 
       $("#container").ejMap({layers: [{ subLayers: [{legendSettings: {dockPosition:"top"} }]} ]});
  • JS
  • //Get or set dockPosition value after initialization:
      
      //Gets the dockPosition value
      
      var property = =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings.dockPosition;     
      
      //Sets the dockPosition value value 
      
      $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings  = {dockPosition:"top"};

    layers.subLayers.legendSettings.height number

    height value for legend setting

    Default Value

    • 0

    Example

  • JS
  • //To set height value for legend during initialization 
       $("#container").ejMap({layers: [{ subLayers: [{legendSettings: {height:20} }]} ]});
  • JS
  • //Get or set the height value for legend, after initialization:
       
       //Gets the height value for legend value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings.height;   
       
       //Sets the height value for legend value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings  = {height:20};

    layers.subLayers.legendSettings.icon enum

    to get icon value for legend setting

    Default Value

    • “rectangle”

    Example

  • JS
  • //To set icon value during initialization 
       $("#container").ejMap({layers: [{ subLayers: [{legendSettings: {icon:"rectangle"} }]} ]});
  • JS
  • //Get or set icon value after initialization:
       
       //Gets the icon value value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings.icon;     
       
       //Sets the icon value value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings  = {icon:"rectangle"};

    layers.subLayers.legendSettings.iconHeight number

    icon height value for legend setting

    Default Value

    • 20

    Example

  • JS
  • //To set iconHeight value for legend during initialization 
       $("#container").ejMap({layers: [{ subLayers: [{legendSettings: {iconHeight:20} }]} ]}) ;
  • JS
  • //Get or set the iconHeight value for legend, after initialization:
       
       //Gets the iconHeight value for legend value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings.iconHeight;       
       
       //Sets the iconHeight value for legend value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings  = {iconHeight:20};

    layers.subLayers.legendSettings.iconWidth number

    icon Width value for legend setting

    Default Value:

    • 20

    Example

  • JS
  • //To set iconWidth value for legend during initialization 
       $("#container").ejMap({layers: [{ subLayers: [{legendSettings: {iconWidth:20} }]} ]});
  • JS
  • //Get or set the iconWidth value for legend, after initialization:
       
       //Gets the iconWidth value for legend value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings.iconWidth;        
       
       //Sets the iconWidth value for legend value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings  = {iconWidth:20};

    layers.subLayers.legendSettings.labelOrientation enum

    set the orientation of legend labels

    Default Value

    • vertical

    Example

  • JS
  • //To set label orientation API value for legend setting during initialization 
       $("#container").ejMap({layers: [{ subLayers: [{legendSettings: {labelOrientation: "vertical"} }]} ]});
  • JS
  • //Get or set the label orientation API, after initialization:
       
       //Gets the label orientation value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings.labelOrientation; 
       
       //Sets the label orientation value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings  = {labelOrientation: "vertical"};

    layers.subLayers.legendSettings.leftLabel string

    to get leftLabel value for legend setting

    Default Value

    • null

    Example

  • JS
  • //To set leftLabel value during initialization 
       $("#container").ejMap({layers: [{ subLayers: [{legendSettings: {leftLabel:""} }]} ]});
  • JS
  • //Get or set leftLabel value after initialization:
       
       //Gets the leftLabel value value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings.leftLabel;        
       
       //Sets the leftLabel value value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings  = {leftLabel:""};

    layers.subLayers.legendSettings.textPath string

    To get the field name in the datasource for generating legend items.

    Default Value

    • null

    Example

  • JS
  • //To set textPath value during initialization 
       $("#container").ejMap({layers: [{ subLayers: [{legendSettings: {textPath:""} }]} ]});
  • JS
  • //Get or set textPath value after initialization:
       
       //Gets the textPath value value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings.textPath;        
       
       //Sets the textPath value value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings  = {textPath:""};

    layers.subLayers.legendSettings.mode enum

    to get mode of legend setting

    Default Value

    • “default”

    Example

  • JS
  • //To set legend mode during initialization 
       $("#container").ejMap({layers: [{ subLayers: [{legendSettings: {mode:"default"} }]} ]});
  • JS
  • //Get or set the legend mode after initialization:
       
       //Gets the legend mode value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings.mode;     
       
       //Sets the legend mode value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings  = {mode:"default"};

    layers.subLayers.legendSettings.position enum

    set the position of legend settings

    Default Value

    • topleft

    Example

  • JS
  • //To set legend position API value for legend setting during initialization 
       $("#container").ejMap({layers: [{ subLayers: [{legendSettings: {position: "topleft"} }]} ]});
  • JS
  • //Get or set the legend position API, after initialization:
       
       //Gets the legend position value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings.position; 
       
       //Sets the legend position value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings  = {position: "topleft"};

    layers.subLayers.legendSettings.positionX number

    x position value for legend setting

    Default Value

    • 0

    Example

  • JS
  • //To set x position value during initialization 
       $("#container").ejMap({layers: [{ subLayers: [{legendSettings: {positionX: 0} }]} ]});
  • JS
  • //Get or set the x position, after initialization:
       
       //Gets the x position value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings.positionX;        
       
       //Sets the x position value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings  = {positionX: 0};

    layers.subLayers.legendSettings.positionY number

    y position value for legend setting

    Default Value

    • 0

    Example

  • JS
  • //To set y position value during initialization 
       $("#container").ejMap({layers: [{ subLayers: [{legendSettings: {positionY: 0} }]} ]});
  • JS
  • //Get or set the y position, after initialization:
       
       //Gets the y position value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings.positionY;        
       
       //Sets the y position value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings  = {positionY: 0};

    layers.subLayers.legendSettings.rightLabel string

    to get rightLabel value for legend setting

    Default Value

    • null

    Example

  • JS
  • //To set rightLabel value during initialization 
       $("#container").ejMap({layers: [{ subLayers: [{legendSettings: {rightLabel:""} }]} ]});
  • JS
  • //Get or set rightLabel value after initialization:
       
       //Gets the rightLabel value value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings.rightLabel;       
       
       //Sets the rightLabel value value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings  = {rightLabel:""};

    layers.subLayers.legendSettings.showLabels boolean

    Enables or Disables the showLabels

    Default Value

    • false

    Example

  • JS
  • //To set showLabels API value during initialization 
       $("#container").ejMap({layers: [{ subLayers: [{legendSettings: {showLabels:false} }]} ]});
  • JS
  • //Get or set the showLabels API, after initialization:
       
       //Gets the showLabels value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings.showLabels;       
       
       //Sets the showLabels value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings  = {showLabels:false};

    layers.subLayers.legendSettings.showLegend boolean

    Enables or Disables the showLegend

    Default Value

    • false

    Example

  • JS
  • //To set showLegend API value during initialization 
       $("#container").ejMap({layers: [{ subLayers: [{legendSettings: {showLegend:false} }]} ]});
  • JS
  • //Get or set the showLegend API, after initialization:
       
       //Gets the showLegend value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings.showLegend;       
       
       //Sets the showLegend value 
    
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings  = {showLegend:false};

    layers.subLayers.legendSettings.title string

    to get title of legend setting

    Default Value

    • null

    Example

  • JS
  • //To set legend title during initialization 
       $("#container").ejMap({layers: [{ subLayers: [{legendSettings: {title: ""} }]} ]}) ;
  • JS
  • //Get or set the legend title after initialization:
       
       //Gets the legend title value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings.title;    
       
       //Sets the legend title value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings  = {title: ""};

    layers.subLayers.legendSettings.type enum

    to get type of legend setting

    Default Value

    • “layers”

    Example

  • JS
  • //To set legend type value during initialization 
       $("#container").ejMap({layers: [{ subLayers: [{legendSettings: {type:"layers"} }]} ]});
  • JS
  • //Get or set the legend type value after initialization:
       
       //Gets the legend type value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings.type;     
       
       //Sets the legend type value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings  = {type:"layers"};

    layers.subLayers.legendSettings.width number

    width value for legend setting

    Default Value

    • 0

    Example

  • JS
  • //To set width value for legend during initialization 
       $("#container").ejMap({layers: [{ subLayers: [{legendSettings: {width:20} }]} ]}) ;
  • JS
  • //Get or set the width value for legend, after initialization:
       
       //Gets the width value for legend value 
       
       var property = =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings.width;    
       
       //Sets the width value for legend value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].legendSettings  = {width:20};

    layers.subLayers.mapItemsTemplate string

    Specifies the map items template for shapes.

    Example

  • JS
  • // Set the mapItemsTemplate of layer during initialization.                  
       $("#container").ejMap({layers: [{ subLayers: [{ layerType: "geometry", mapItemsTemplate: "Template",  shapeData: mapShapeData }]} ]});
  • JS
  • //Get or set the mapItemsTemplate after initialization:
       
       //Gets the mapItemsTemplate from map.
       
       var mapItemsTemplate =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].mapItemsTemplate;
       
       //Sets the mapItemsTemplate to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].mapItemsTemplate  = "Template";

    layers.subLayers.markers Array

    Specify markers for shape layer.

    layers.subLayers.markers.label string

    Display the value in the marker

    Default Value

    • ” “

    Example

  • JS
  • // Set the markers during initialization.                       
       $("#container").ejMap({layers: [{ subLayers: [{markers:[{label : "chennai",latitude : 13.08 ,longitude : 80.27}]} ]}]} ]});
  • JS
  • //Get or set the markers after initialization:
       
       //Gets the markers from map.
       
       var marker =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].markers[markerIndex];
       
       //Sets the marker to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].markers[markerIndex]  = {label : "chennai",latitude : 13.08 ,longitude : 80.27};

    layers.subLayers.markers.latitude number

    Display the value in the marker

    Default Value

    • null

    Example

  • JS
  • // Set the markers during initialization.                       
       $("#container").ejMap({layers: [{ subLayers: [{markers:[{label : "chennai",latitude : 13.08 ,longitude : 80.27}]} ]}]} ]});
  • JS
  • //Get or set the markers after initialization:
       
       //Gets the markers from map.
       
       var marker =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].markers[markerIndex];
       
       //Sets the marker to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].markers[markerIndex]  = {label : "chennai",latitude : 13.08 ,longitude : 80.27};

    layers.subLayers.markers.longitude number

    Display the value in the marker

    Default Value

    • null

    Example

  • JS
  • // Set the markers during initialization.                       
       $("#container").ejMap({layers: [{ subLayers: [{markers:[{label : "chennai",latitude : 13.08 ,longitude : 80.27}]} ]}]} ]});
  • JS
  • //Get or set the markers after initialization:
       
       //Gets the markers from map.
       
       var marker =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].markers[markerIndex];
       
       //Sets the marker to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].markers[markerIndex]  = {label : "chennai",latitude : 13.08 ,longitude : 80.27};

    layers.subLayers.markerTemplate string

    Specifies the map marker template for map layer.

    Default Value

    • null

    Example

  • JS
  • // Set the markerTemplate of layer during initialization.                    
       $("#container").ejMap({layers: [{ subLayers: [{ layerType: "geometry", markerTemplate: "Template",  shapeData: mapShapeData }]} ]});
  • JS
  • //Get or set the markerTemplate after initialization:
       
       //Gets the markerTemplate from map.
       
       var markerTemplate =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].markerTemplate;
       
       //Sets the markerTemplate to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].markerTemplate  = "Template";

    layers.subLayers.selectedMapShapes Array

    Specify selectedMapShapes for shape layer

    Default Value

    • []

    Example

  • JS
  • //Gets the selectedMapShapes from map 
       var selectedShapes =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].selectedMapShapes;

    layers.subLayers.selectionMode enum

    Specifies the selection mode of the map. Accepted selection mode values are Default and Multiple.

    Default Value

    • “default”

    Example

  • JS
  • // Set the selection mode during initialization.                        
       $("#container").ejMap({layers: [{ subLayers: [{ selectionMode:'default' }]} ]});
  • JS
  • //Get or set the selection mode after initialization:
       
       //Gets the selection mode from map.
       
       var property =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].selectionMode;
       
       //Sets the selection mode to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].selectionMode  = 'default';

    layers.subLayers.shapeData object

    Specifies the shape data for the shape layer

    Example

  • JS
  • // Set the shapeData of layer during initialization.                         
       $("#container").ejMap({layers: [{ subLayers: [{ layerType: "geometry", shapeData: mapShapeData }]} ]});
  • JS
  • //Get or set the data after initialization:
       
       //Gets the data from map layer.
       
       var data =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].shapeData;
       
       //Sets the data to map layer.
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].shapeData  = mapShapeData;

    layers.subLayers.shapeSettings object

    Specifies the shape settings of map layer

    Example

  • JS
  • // Set the shapeSettings of layer during initialization.                     
       $("#container").ejMap({layers: [{ subLayers: [{ layerType: "geometry", enableMouseHover: true, shapeSettings: { stroke: "black", fill: "#C3E6ED", highlightColor: "#63B7B7", selectionColor: "#207BB2", strokeThickness: "0.5" }, shapeData: Africa }]} ]});
  • JS
  • //Get or set the shapeSettings after initialization:
       
       //Gets the shapeSettings from map.
       
       var shapeSettings =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].shapeSettings;
       
       //Sets the shapeSettings to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex]  = { layerType: "geometry", enableMouseHover: true, shapeSettings: { stroke: "black", fill: "#C3E6ED", highlightColor: "#63B7B7", selectionColor: "#207BB2", strokeThickness: "0.5" }, shapeData: Africa };

    layers.subLayers.shapeSettings.autoFill boolean

    Enables or Disables the auto fill colors for shape layer in map. When this property value set to true, shapes will be filled with palette colors.

    Default Value

    • false

    Example

  • JS
  • //To set autoFill API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{shapeSettings: {autoFill:false}}});
  • JS
  • //Get or set the autoFill API, after initialization:
       
       //Gets the autoFill value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].shapeSettings.autoFill;
             
       //Sets the autoFill value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayersIndex].shapeSettings.autoFill=false;

    layers.subLayers.shapeSettings.colorMappings object

    Specifies the colorMappings of the shape layer in map

    Default Value

    • null

    Example

  • JS
  • //To set colorMappings API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{ shapeSettings: {colorMappings:{rangeColorMapping:[{from: 0,to: 100000,gradientColors: ["#9CBF4E", "#B8CE7B"]} ]}}}]}]}] });
  • JS
  • //Get or set the colorMappings API, after initialization:
       
       //Gets the colorMappings value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].shapeSettings.colorMappings;
        
       //Sets the colorMappings value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayersIndex].shapeSettings.colorMappings={rangeColorMapping:[{from: 0,to: 100000,gradientColors: ["#9CBF4E", "#B8CE7B"]} ]}]} ]};

    layers.subLayers.shapeSettings.colorMappings.rangeColorMapping array

    Specifies the range colorMappings in the shape layer of map.

    Default Value

    • null

    Example

  • JS
  • //To set rangeColorMapping API value during initialization 
      $("#container").ejMap({layers:[{ subLayers:[{ shapeSettings: {colorMappings:{rangeColorMapping:[{from: 0,to: 100000,gradientColors: ["#9CBF4E", "#B8CE7B"]} ]}]} ]}}}}]}]});

    layers.subLayers.shapeSettings.colorMappings.rangeColorMapping.from number

    Specifies the start range colorMappings in the shape layer of map.

    Default Value

    • null

    Example

  • JS
  • //To set start range colorMapping API value during initialization 
      $("#container").ejMap({layers:{ shapeSettings: {colorMappings:{rangeColorMapping:[{from: 0,to: 100000,gradientColors: ["#9CBF4E", "#B8CE7B"]} ]}]} ]}}}});

    layers.subLayers.shapeSettings.colorMappings.rangeColorMapping.to number

    Specifies the to range colorMappings in the shape layer of map.

    Default Value

    • null

    Example

  • JS
  • //To set to range colorMapping API value during initialization 
      $("#container").ejMap({layers:[{ subLayers:[{ shapeSettings: {colorMappings:{rangeColorMapping:[{from: 0,to: 100000,gradientColors: ["#9CBF4E", "#B8CE7B"]} ]}]} ]}}}]}]});

    layers.subLayers.shapeSettings.colorMappings.rangeColorMapping.gradientColors array

    Specifies the gradientColors in the shape layer of map.

    Default Value

    • null

    Example

  • JS
  • //To set gradientColors API value during initialization 
      $("#container").ejMap({layers:[{subLayers:[{ shapeSettings: {colorMappings:{rangeColorMapping:[{from: 0,to: 100000,gradientColors: ["#9CBF4E", "#B8CE7B"]} ]}]}}]} ]});

    layers.subLayers.shapeSettings.colorMappings.equalColorMapping array

    Specifies the equalColorMapping in the shape layer of map.

    Default Value

    • null

    Example

  • JS
  • //To set equalColorMapping API value during initialization 
      $("#container").ejMap({layers:[{ subLayers:[{ shapeSettings: {colorMappings:{equalColorMapping:[{ value: "Romney", color: "#D84444" }]} ]}]}]});

    layers.subLayers.shapeSettings.colorMappings.equalColorMapping.value string

    Specifies the equalColorMapping value in the shape layer of map.

    Default Value

    • null

    Example

  • JS
  • //To set equalColorMapping value API value during initialization 
      $("#container").ejMap({layers:[{ subLayers:[{ shapeSettings: {colorMappings:{equalColorMapping:[{ value: "Romney", color: "#D84444" }]}}}]}]});

    layers.subLayers.shapeSettings.colorMappings.equalColorMapping.color string

    Specifies the equalColorMapping color in the shape layer of map.

    Default Value

    • null

    Example

  • JS
  • //To set equalColorMapping color API value during initialization 
      $("#container").ejMap({layers:[{ subLayers:[{ shapeSettings: {colorMappings:{equalColorMapping:[{ value: "Romney", color: "#D84444" }]}}}]}]});
  • JS
  • //Get or set the colorMappings API, after initialization:
       
       //Gets the colorMappings value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].shapeSettings.colorMappings;
        
       //Sets the colorMappings value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayersIndex].shapeSettings.colorMappings={rangeColorMapping:{from: 0,to: 100000,gradientColors: ["#9CBF4E", "#B8CE7B"]} ]}};

    layers.subLayers.shapeSettings.colorPalette enum

    Specifies the shape color palette value of the shape layer in map. Accepted colorPalette values are palette1, palette2, palette3 and custompalette.

    Default Value

    • “palette1”

    Example

  • JS
  • //To set colorPalette API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{shapeSettings: {colorPalette:'palette1'}}]}]});
  • JS
  • //Get or set the colorPalette API, after initialization:
       
       //Gets the colorPalette value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].shapeSettings.colorPalette;
         
       //Sets the colorPalette value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayersIndex].shapeSettings.colorPalette='palette1';

    layers.subLayers.shapeSettings.colorValuePath string

    Specifies the shape color valuePath of the shape layer in map

    Default Value

    • null

    Example

  • JS
  • //To set colorValuePath  API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{shapeSettings: {colorValuePath :'sales'}}]}]});
  • JS
  • //Get or set the colorValuePath  API, after initialization:
       
       //Gets the colorValuePath  value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].shapeSettings.colorValuePath ;
      
       //Sets the colorValuePath  value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayersIndex].shapeSettings.colorValuePath ='sales';

    layers.subLayers.shapeSettings.enableGradient boolean

    Enables or Disables the gradient colors for map shapes.

    Default Value

    • false

    Example

  • JS
  • //To set enableGradient API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{shapeSettings: {enableGradient:false}}]}]});
  • JS
  • //Get or set the enableGradient API, after initialization:
       
       //Gets the enableGradient value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].shapeSettings.enableGradient;
       
       //Sets the enableGradient value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayersIndex].shapeSettings.enableGradient=false;

    layers.subLayers.shapeSettings.fill string

    Specifies the shape fill color of the shape layer in map

    Default Value

    • “#E5E5E5”

    Example

  • JS
  • //To set fill API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{shapeSettings: {fill:'#E5E5E5'}}]}]});
  • JS
  • //Get or set the fill API, after initialization:
    
       //Gets the fill value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].shapeSettings.fill;
         
       //Sets the fill value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayersIndex].shapeSettings.fill='#E5E5E5';

    layers.subLayers.shapeSettings.highlightBorderWidth number

    Specifies the mouse over width of the shape layer in map

    Default Value

    • 1

    Example

  • JS
  • //To set highlightBorderWidth API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{shapeSettings: {highlightBorderWidth:1}}]}]});
  • JS
  • //Get or set the highlightBorderWidth API, after initialization:
       
       //Gets the highlightBorderWidth value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].shapeSettings.highlightBorderWidth;
         
       //Sets the highlightBorderWidth value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayersIndex].shapeSettings.highlightBorderWidth=1;

    layers.subLayers.shapeSettings.highlightColor string

    Specifies the mouse hover color of the shape layer in map

    Default Value

    • “gray”

    Example

  • JS
  • //To set highlightColor API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{shapeSettings: {highlightColor:'gray'}}]}]});
  • JS
  • //Get or set the highlightColor API, after initialization:
       
       //Gets the highlightColor value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].shapeSettings.highlightColor;
       
       //Sets the highlightColor value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayersIndex].shapeSettings.highlightColor='gray';

    layers.subLayers.shapeSettings.highlightStroke string

    Specifies the mouse over stroke color of the shape layer in map

    Default Value

    • “#C1C1C1”

    Example

  • JS
  • //To set highlightStroke API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{shapeSettings: {highlightStroke:'#C1C1C1'}}]}]});
  • JS
  • //Get or set the highlightStroke API, after initialization:
       
       //Gets the highlightStroke value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].shapeSettings.highlightStroke;
      
       //Sets the highlightStroke value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayersIndex].shapeSettings.highlightStroke='#C1C1C1';

    layers.subLayers.shapeSettings.selectionColor string

    Specifies the shape selection color of the shape layer in map

    Default Value

    • “gray”

    Example

  • JS
  • //To set selectionColor API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{shapeSettings: {selectionColor:'gray'}}]}]});
  • JS
  • //Get or set the selectionColor API, after initialization:
       
       //Gets the selectionColor value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].shapeSettings.selectionColor;
       
       //Sets the selectionColor value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayersIndex].shapeSettings.selectionColor='gray';

    layers.subLayers.shapeSettings.selectionStroke string

    Specifies the shape selection stroke color of the shape layer in map

    Default Value

    • “#C1C1C1”

    Example

  • JS
  • //To set selectionStroke API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{shapeSettings: {selectionStroke:'#C1C1C1'}}]}]});
  • JS
  • //Get or set the selectionStroke API, after initialization:
       
       //Gets the selectionStroke value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].shapeSettings.selectionStroke;
      
       //Sets the selectionStroke value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayersIndex].shapeSettings.selectionStroke='#C1C1C1';

    layers.subLayers.shapeSettings.selectionStrokeWidth number

    Specifies the shape selection stroke width of the shape layer in map

    Default Value

    • 1

    Example

  • JS
  • //To set selectionStrokeWidth API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{shapeSettings: {selectionStrokeWidth:1}}]}]});
  • JS
  • //Get or set the selectionStrokeWidth API, after initialization:
       
       //Gets the selectionStrokeWidth value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].shapeSettings.selectionStrokeWidth;
         
       //Sets the selectionStrokeWidth value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayersIndex].shapeSettings.selectionStrokeWidth=1;

    layers.subLayers.shapeSettings.stroke string

    Specifies the shape stroke color of the shape layer in map

    Default Value

    • “#C1C1C1”

    Example

  • JS
  • //To set stroke API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{shapeSettings: {stroke:'#C1C1C1'}}]}]});
  • JS
  • //Get or set the stroke API, after initialization:
       
       //Gets the stroke value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].shapeSettings.stroke;
       
       //Sets the stroke value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayersIndex].shapeSettings.stroke='#C1C1C1';

    layers.subLayers.shapeSettings.strokeThickness number

    Specifies the shape stroke thickness value of the shape layer in map

    Default Value

    • “0.2”

    Example

  • JS
  • //To set strokeThickness API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{shapeSettings: {strokeThickness:'0.2'}}]}]});
  • JS
  • //Get or set the strokeThickness API, after initialization:
       
       //Gets the strokeThickness value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].shapeSettings.strokeThickness;
      
       //Sets the strokeThickness value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayersIndex].shapeSettings.strokeThickness='0.2';

    layers.subLayers.shapeSettings.valuePath string

    Specifies the shape valuePath of the shape layer in map

    Default Value

    • null

    Example

  • JS
  • //To set valuePath API value during initialization 
      $("#container").ejMap({layers:[{ subLayers: [{shapeSettings: {valuePath:'name'}}]}]});
  • JS
  • //Get or set the valuePath API, after initialization:
       
       //Gets the valuePath value 
       
       var shapeProperty =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].shapeSettings.valuePath;
            
       //Sets the valuePath value 
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayersIndex].shapeSettings.valuePath='name';

    layers.subLayers.showMapItems boolean

    Shows or hides the map items.

    Default Value

    • false

    Example

  • JS
  • // Set the showMapItems during initialization.                  
       $("#container").ejMap({layers: [{ subLayers: [{ showMapItems:false }]} ]});
  • JS
  • //Get or set the showMapItems after initialization:
    
      //Gets the showMapItems from map.
    
      var property =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].showMapItems;
    
      //Sets the showMapItems to map.
    
      $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].showMapItems  = false;

    layers.subLayers.showTooltip boolean

    Shows or hides the tooltip for shapes

    Default Value

    • false

    Example

  • JS
  • // Set the showTooltip during initialization.                   
       $("#container").ejMap({layers: [{ subLayers: [{ showTooltip:false }]} ]});
  • JS
  • //Get or set the showTooltip after initialization:
    
      //Gets the showTooltip from map.
    
      var property =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].showTooltip;
    
      //Sets the showTooltip to map.
    
      $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].showTooltip  = false;

    layers.subLayers.tooltipTemplate string

    Specifies the tooltip template for shapes.

    Example

  • JS
  • // Set the tooltipTemplate of layer during initialization.                   
            $("#container").ejMap({layers: [{ subLayers: [{ layerType: "geometry", tooltipTemplate: "Template",  shapeData: mapShapeData }]} ]});
  • JS
  • //Get or set the tooltipTemplate after initialization:
       
       //Gets the tooltipTemplate from map.
       
       var tooltipTemplate =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].tooltipTemplate;
       
       //Sets the tooltipTemplate to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].tooltipTemplate  ="Template";

    layers.subLayers.urlTemplate string

    Specifies the URL template for the OSM type map.

    Default Value

    • ‘http://a.tile.openstreetmap.org/level/tileX/tileY.png’

    Example

  • JS
  • // Set the urlTemplate during initialization.                   
       $("#container").ejMap({layers: [{ subLayers: [{ urlTemplate:'http://a.tile.openstreetmap.org/level/tileX/tileY.png' }]} ]});
  • JS
  • //Get or set the urlTemplate after initialization:
     
       //Gets the urlTemplate from map.
      
       var property =$("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].urlTemplate;
       
       //Sets the urlTemplate to map.
       
       $("#container").data("ejMap").model.layers[layerIndex].subLayers[subLayerIndex].urlTemplate  = 'http://a.tile.openstreetmap.org/level/tileX/tileY.png';

    Methods

    navigateTo(latitude, longitude, level)

    Method for navigating to specific shape based on latitude, longitude and zoom level.

    Name Type Description
  • HTML
  • latitude
    number Pass the latitude value for map
  • HTML
  • longitude
    number Pass the longitude value for map
  • HTML
  • level
    number Pass the zoom level for map

    Returns: void

    Example

  • JS
  • //navigateTo method for map
       $("#container").ejMap("navigateTo", latitude, longitude, level);

    pan(direction)

    Method to perform map panning

    Name Type Description
  • HTML
  • direction
    string Pass the direction in which map should be panned

    Returns: void

    Example

  • JS
  • //pan method for map
       $("#container").ejMap("pan", direction);

    refresh()

    Method to reload the map.

    Returns: void

    Example

  • JS
  • //refresh method for map
       $("#container").ejMap("refresh");

    refreshLayers()

    Method to reload the shapeLayers with updated values

    Returns: void

    Example

  • JS
  • //refresh layers method for map
       $("#container").ejMap("refreshLayers");

    refreshNavigationControl(navigation)

    Method to reload the navigation control with updated values.

    Name Type Description
  • HTML
  • navigation
    object Pass the navigation control instance

    Returns: void

    Example

  • JS
  • //Refresh navigation control method for map
       $("#container").ejMap("refreshNavigationControl",navigation);

    zoom(level, isAnimate)

    Method to perform map zooming.

    Name Type Description
  • HTML
  • level
    number Pass the zoom level for map to be zoomed
  • HTML
  • isAnimate
    boolean Pass the boolean value to enable or disable animation while zooming

    Returns: void

    Example

  • JS
  • //zoom method for map
       $("#container").ejMap("zoom",level,isAnimate);

    refreshLayer(layerIndex,sublayerIndex)

    Method to reload the specified layer based on layer and sublayer index value.

    Returns: void

    Example

  • JS
  • //refresh layers method for map
       $("#container").ejMap("refreshLayer", layerIndex, sublayerIndex);

    addMarkers(layerIndex, sublayerIndex, markers)

    Add markers dynamically based on layer and sublayer index value.

    Returns: void

    Example

  • JS
  • //addMarkers method for map
       $("#container").ejMap("addMarkers", layerIndex, sublayerIndex, markers);

    Events

    markerSelected

    Triggered on selecting the map markers.

    Name Type Description
  • HTML
  • originalEvent
    object Returns marker object.

    Example

  • JS
  • //markerSelected event for map
      
      $("#container").ejMap({
       markerSelected: function (event) {}
      });

    legendItemRendering

    Triggered while rendering the each legend in maps.

    Name Type Description
  • HTML
  • originalEvent
    object Returns the legend item.

    Example

  • JS
  • //legendItemRendering event for map
      
      $("#container").ejMap({
       legendItemRendering: function (event) {}
      });

    bubbleRendering

    Triggered while rendering the each bubbles in maps.

    Name Type Description
  • HTML
  • originalEvent
    object Returns the bubble values.

    Example

  • JS
  • //bubbleRendering event for map
      
      $("#container").ejMap({
       bubbleRendering: function (event) {}
      });

    shapeRendering

    Triggered while rendering the each shapes in maps.

    Name Type Description
  • HTML
  • originalEvent
    object Returns the shape values.

    Example

  • JS
  • //shapeRendering event for map
      
      $("#container").ejMap({
       shapeRendering: function (event) {}
      });

    mouseleave

    Triggers while leaving the hovered map shape

    Name Type Description
  • HTML
  • originalEvent
    object Returns hovered map shape object.

    Example

  • JS
  • //mouseleave  event for map
      $("#container").ejMap({
       mouseleave : function (event) {}
      });

    mouseover

    Triggers while hovering the map shape.

    Name Type Description
  • HTML
  • originalEvent
    object Returns hovered map shape object.

    Example

  • JS
  • //mouseover  event for map
      $("#container").ejMap({
       mouseover : function (event) {}
      });

    onRenderComplete

    Triggers once map render completed.

    Name Type Description
  • HTML
  • originalEvent
    Object Event parameters from map

    Example

  • JS
  • //onRenderComplete event for map
      $("#container").ejMap({
       onRenderComplete: function () {}
      });

    panned

    Triggers when map panning ends.

    Name Type Description
  • HTML
  • originalEvent
    Object Event parameters from map

    Example

  • JS
  • //panned event for map
      $("#container").ejMap({
       panned: function (event) {}
      });

    shapeSelected

    Triggered on selecting the map shapes.

    Name Type Description
  • HTML
  • originalEvent
    object Returns selected shape object.

    Example

  • JS
  • //shapeSelected event for map
      $("#container").ejMap({
       shapeSelected: function (event) {}
      });

    zoomedIn

    Triggered when map is zoomed-in.

    Name Type Description
  • HTML
  • originalEvent
    Object Event parameters from map
  • HTML
  • zoomLevel
    object Returns zoom level value for which the map is zoomed.

    Example

  • JS
  • //zoomedIn event for map
      $("#container").ejMap({
       zoomedIn: function (event) {}
      });

    zoomedOut

    Triggers when map is zoomed out.

    Name Type Description
  • HTML
  • originalEvent
    Object Event parameters from map
  • HTML
  • zoomLevel
    object Returns zoom level value for which the map is zoomed.

    Example

  • JS
  • //zoomedOut event for map
      $("#container").ejMap({
       zoomedOut: function () {}
      });

    Click

    Fires, on clicking the map.

    Name Type Description
  • HTML
  • originalEvent
    object Returns clicked shape object.

    Example

  • JS
  • //Click event for map
    
    $("#container").ejMap({
    
        click: function (args) {
                  //Do something
        }
       
    });

    legendItemClick

    Fires on clicking the legend item.

    Name Type Description
  • JS
  • cancel
    boolean Set this option to true to cancel the event
  • JS
  • model
    Object Instance of the map model object
  • JS
  • type
    string Name of the event
  • JS
  • data
    object
    • startX - X-coordinate of legend item in pixel
    • LegendItem - Instance of the legend item object that is about to be rendered
    • style - Options to customize the legend item styles such as border, color, size, etc…,
    • symbolShape - Name of the legend item shape. Use this option to customize legend item shape before rendering
    • map - Instance of the map object corresponding to the legend item

    Example

  • JS
  • //legendItem Click event for map.
    
    $("#container").ejMap({
    
        legendItemClick: function (args) {
                  //Do something
        }
       
    });

    doubleClick

    Fires, on double clicking the map.

    Name Type Description
  • HTML
  • originalEvent
    object Returns double clicked shape object.

    Example

  • JS
  • //DoubleClick event for map.
    
    $("#container").ejMap({
    
        doubleClick: function (args) {
                  //Do something
        }
       
    });

    rightClick

    Fires, on right clicking the map.

    Name Type Description
  • HTML
  • originalEvent
    object Returns right clicked shape object.

    Example

  • JS
  • //RightClick event for map
    
    $("#container").ejMap({
        rightClick: function (args) {
                  //Do something
        }
       
    });

    onLoad

    Fires before loading the map.

    Name Type Description
  • JS
  • cancel
    boolean Set this option to true to cancel the event
  • JS
  • model
    object Instance of the map model object
  • JS
  • type
    string Name of the event

    Example

  • JS
  • //mouseover  event for map
      $("#container").ejMap({
       onLoad : function (event) {}
      });

    markerEnter

    Triggers while entering the hovered marker shape.

    Name Type Description
  • JS
  • cancel
    boolean Set this option to true to cancel the event
  • JS
  • model
    object Instance of the map model object
  • JS
  • type
    string Name of the event

    Example

  • JS
  • //marker enter  event for map
      $("#container").ejMap({
       markerEnter : function (event) {}
      });

    markerLeave

    Triggers while leaving the hovered marker shape.

    Name Type Description
  • JS
  • cancel
    boolean Set this option to true to cancel the event
  • JS
  • model
    object Instance of the map model object
  • JS
  • type
    string Name of the event

    Example

  • JS
  • //marker leave  event for map
      $("#container").ejMap({
       markerLeave : function (event) {}
      });

    refreshed

    Triggers after refreshing the map items.

    Name Type Description
  • HTML
  • originalEvent
    object Refresh and load the map.

    Example

  • JS
  • //refreshed  event for map
      $("#container").ejMap({
       refreshed : function (event) {}
      });

    displayTextRendering

    Fires before rendering the data labels. This event is triggered for each data label in the layers. You can use this event to add custom text in data labels.

    Example

  • JS
  • //displayTextRendering event for maps
    
    $("#container").ejMap({
    
        displayTextRendering: function (args) {
                 //Do something
        }
    	
    });
    Name Type Description
  • JS
  • data
    object
    • text - Text displayed in data label. You can add custom text to the data label
    • locationX - X-coordinate of data label location
    • locationY - Y-coordinate of data label location
  • JS
  • cancel
    boolean Set this option to true to cancel the event.
  • JS
  • model
    object Instance of the map model object.
  • JS
  • type
    string Name of the event

    Copyright © 2001 - 2015 Syncfusion Inc. All Rights Reserved