Skip to content

< Back to Table of Contents

MapmyIndia Interactive Vector Maps JS SDK for Web !

Polygon

For access, you can get your api key from Mappls Console

Drawing Polygon

    new mappls.Polygon

Polygon

Polygon Properties

Required

  • Map
  • Path: This could be be the array of lat lng.

Code Snippets

    mappls_polygon = new mappls.Polygon({
        map: map,
        paths: [{"lng":"77.26872","lat": "28.55101"},
            {"lng":"77.26849","lat":"28.55099"},{"lng":"77.26831","lat":"28.55097"},
            {"lng":"77.26794","lat":"28.55093"},{"lng":"77.2676","lat":"28.55089"},
            {"lng":"77.26756","lat":"28.55123"},{"lng":"77.26758","lat":"28.55145"},
            {"lng":"77.26758","lat":"28.55168"},{"lng":"77.26759","lat":"28.55172"}]
    });

Optional Properties

  • fillcolor: Fills the color of the polygon and All CSS3 colors are supported except for extended named colors.
    {
        fillcolor: "red"
    }
  • fillOpacity: Fills the opacity of the polygon.
    {
        fillOpacity: 0.8
    }
  • strokeColor: Fills the Stroke color of the polygon.
    {
        strokeColor: "blue"
    }
  • strokeOpacity: Fills the Stroke opacity of the polygon.
    {
        strokeOpacity: "black"
    }
  • fitbounds: Fits in the map layer automatically to a bound on which geoJson has made.
    {
        fitbounds: true
    }
  • fitboundOptions: This shows the options aailable on the fitBound property.
    {
        fitboundOptions: {padding: 120,duration:1000}
    }
  • popupHtml: This shows the message you want to print while clicking on the polygon.
    {
        popupHtml: 'Route 1'
    }
  • popupOptions: Options available in printing the message through popupHtml.
    {
        popupOptions: {offset: {'bottom': [0, -20]}}
    }

Example - Code Snippets

    mappls_polygon = new mappls.Polygon({
        map: map,
        paths: [{"lng":"77.26872","lat": "28.55101"},
            {"lng":"77.26849","lat":"28.55099"},{"lng":"77.26831","lat":"28.55097"},
            {"lng":"77.26794","lat":"28.55093"},{"lng":"77.2676","lat":"28.55089"},
            {"lng":"77.26756","lat":"28.55123"},{"lng":"77.26758","lat":"28.55145"},
            {"lng":"77.26758","lat":"28.55168"},{"lng":"77.26759","lat":"28.55172"}],
        fillColor: "red",
        fillOpacity: 0.8,
        strokeColor: "red",
        strokeOpacity: 0.8,
        fitbounds: true
        fitboundOptions: {padding: 120,duration:1000},
        popupHtml: 'Route 1',
        popupOptions: {offset: {'bottom': [0, -20]}}
    });

Remove Polygon

    mappls.remove({map: map_object, layer: Polygon_object);

Polygon Events

click

    Polygon_object.addListener(('click')), function() {
            alert(`Click Event Works`);
    });

dblclick

    Polygon_object.addListener(('dblclick')), function() {
            alert(`Double Click Event Works`);
    });

drag

    Polygon_object.addListener(('drag')), function() {
            alert(`Drag Event Works`);
    });

dragstart

    Polygon_object.addListener(('dragstart')), function() {
            alert(`Drag Start Event Works`);
    });

dragend

    Polygon_object.addListener(('dragend')), function() {
            alert(`Dragend Event Works`);
    });

mousemove

    Polygon_object.addListener(('mousemove')), function() {
            alert(`Mouse Move Event Works`);
    });

mouseover

    Polygon_object.addListener(('mouseover')), function() {
            alert(`Mouse Over Event Works`);
    });

For any queries and support, please contact:

Email us at apisupport@mappls.com

Support Need support? contact us!



@ Copyright 2022 CE Info Systems Ltd. All Rights Reserved.