Skip to main content

Polygon

    new mappls.Polygon

Polygon Properties​

Required Parameters

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

Example Parameters

    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

  • 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

    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]}}
    });

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`);
    });

Remove Polygon​

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