Map Properties

Map Properties Quick Reference:

• Background Color: backgroundColor used for the background of the Map div. This color will be visible when tiles have not yet loaded as the user pans. This option can only be set when the map is initialized.

    {
        backgroundColor: '#fff'
    }

• Disable Double Click Zoom: Enables/disables zoom and center on double click. Enabled by default i.e. true.

    {
        disableDoubleClickZoom: true
    }

• Draggable: Prevents the map from being dragged. Dragging is enabled by default i.e. true.

    {
        draggable: true
    }

• Full Screen Control: It shows the icon of the full screen on the map. fullscreenControl is enabled by default i.e. true.

    {
        fullscreenControl: true
    }

• Heading: The heading for aerial imagery in degrees measured clockwise from cardinal direction North. Headings are snapped to the nearest available angle for which the imagery is available. By default it is 0.

    {
        heading: 100
    }

• maxZoom: The maximum zoom level which will be displayed on the map. If omitted, or set to null, the maximum zoom from the current map type is used instead. Valid values: Integers between 5 to 18 are supported in zoom level.

    {
        maxZoom: 15
    }

• minZoom: The minimum zoom level which will be displayed on the map. If omitted, or set to null, the minimum zoom from the current map type is used instead. Valid values: Integers between 5 to 18 are supported in zoom level.

    {
        minZoom: 8
    }

• rotateControl: The enabled/disabled state of the Rotate control. By default is it true.

    {
        rotateControl: true
    }

• rotateControlOptions: The display options for the Rotate control. By default it is true.

    {
        rotateControlOptions: true
    }

• scaleControl: The initial enabled/disabled state of the Scale control. By default it is true.

    {
        scaleControl: true
    }

• scaleControlOptions: The initial display options for the Scale control. by default it is true.

    {
        scaleControlOptions: true
    }

• scrollwheel: If false, disables zooming on the map using a mouse scroll wheel. The scrollwheel is enabled by default i.e true.
  Note: This property is not recommended. To disable zooming using scrollwheel, you can use the gestureHandling property, and set it to either "cooperative" or "none".

    {
        scrollWheel: true
    }

• tilt: Controls the automatic switching behavior for the angle of incidence of the map. The only allowed values are 0 to 60. The value 0 causes the map to always use a 0° overhead view regardless of the zoom level and viewport. The value 60 causes the tilt angle to automatically switch to 60 whenever 60° imagery is available for the current zoom level and viewport, and switch back to 0 whenever 60° imagery is not available (this is the default behavior).
  *Note: getTilt returns the current tilt angle, not the value specified by this option. Because getTilt and this option refer to different things, do not bind() the tilt property; doing so may yield unpredictable effects.*

    {
        tilt: 30
    }

• Zoom: The Initial Map zoom level.
  Valid values: Integers between 5 and 18 zoom level.

    {
        zoom: 5
    }

• zoomControl: The enabled/disabled state of the Zoom control. By default it is enabled i.e true.

    {
        zoomControl: true
    }

• zoomControlOptions: Any values from the following are possible:
  • TOP_CENTER
  • TOP_LEFT
  • TOP_RIGHT
  • LEFT_TOP
  • RIGHT_TOP
  • LEFT_CENTER
  • RIGHT_CENTER
  • LEFT_BOTTOM
  • RIGHT_BOTTOM
  • BOTTOM_CENTER
  • BOTTOM_LEFT
  • BOTTOM_RIGHT

    {
        zoomControlOptions: {
            position:mappls.ControlPosition.RIGHT_CENTER
            }
    }

• Interactive: By default value is true, if false no mouse, touch, or keyboard listeners will be attached.

    {
        interactive: true
    }

• scrollZoom: By default value is true, if false scroll to zoom interaction is disabled.

    {
        scrollZoom: true
    }

• traffic: By default value is true, To show traffic control on map.

    {
        traffic: true
    }

• Clickable Icons: A map icon represents a point of interest, also known as a POI. By default map icons are clickable i.e. true.

    {
        clickableIcons: true
    }

• Clickable Icons Callback: Callback method

    {
        clickableIconsCallback: callBackMethod
    }
    
    callBackMethod(e){
        console.log(e);
    }

• token_callback:(Optional) Callback method for any token related issues. return error like {error: "Token Expired", code: 401}

    {
        token_callback: callBackMethod
    }
    
    token_callback(e){ if(e.error='Token Expired') mapObj.setToken('newToken');
        console.log(e);
    }

• Indoor: To show indoor floor plans in Vector SDK. This property should set to True

    {
        indoor: true
    }

• Indoor_callback: Indoor Callback Method

    {
        indoor_callback: show_ind
    }

• Indoor_position: Any values from the following are possible:
  • TOP_CENTER
  • TOP_LEFT
  • TOP_RIGHT
  • LEFT_TOP
  • RIGHT_TOP
  • LEFT_CENTER
  • RIGHT_CENTER
  • LEFT_BOTTOM
  • RIGHT_BOTTOM
  • BOTTOM_CENTER
  • BOTTOM_LEFT
  • BOTTOM_RIGHT

    {
        indoor_position: 'bottom-left'
    }

Example:

    map = new mappls.Map(document.getElementById('map'), 
    {
        zoom: 5,
        center: [28.544,77.5454],
        backgroundColor: '#999',
        disableDoubleClickZoom: false,
        zoomControl: false,
        zoomControlOptions: {
                position:mappls.ControlPosition.RIGHT_CENTER
            }, 
        draggable: false,
        scrollwheel: false ,
        minZoom: 5, 
        maxZoom: 18, 
        clickableIcons: false,
        clickableIcons_callback: call_method_name,
        heading: 100,
        tilt: 45,
        indoor: true,
        indoor_callback: show_ind,
        indoor_position: 'bottom-left'
    });