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