JSFiddle - React, Tailwind, and code Playground

by mapmyindia_map

HTML

<script src="https://apis.mapmyindia.com/advancedmaps/v1/your_map_key_here/map_load?v=1.3&plugin=editable,path.drag"></script>


<div class="top-div">
  <span class="top-div-span1">MapmyIndia Maps API: </span>
  <span class="top-div-span2">Map Polygon Example</span>
</div>
<div id="result">
  <div class="btn-div"><button id="mapmyindia_geometry_of_green_polygon">Green Polygon Geometry</button></div>
  <div class="btn-div"><button id="mapmyindia_create_polygon_noneditable">Non-editable Polygon</button></div>
  <div class="btn-div"><button id="mapmyindia_create_polygons_editable"> Editable Polygon</button></div>
  <div class="btn-div"><button id="mapmyindia_remove_polygons">Remove Polygon</button></div>

  <div class="msg-cont">
    <ul class="msg-list">
      <li>Click anywhere on a polygon to show info window.</li>
      <li>Drag the polygon to shift to a new position.</li>
      <li>Click on controls to create a polygon,rectangle.</li>
      <li>Drag the marker to see if it is under the green polygon or outside.</li>
      <li>Control click on the drawn items to remove from map.</li>
    </ul>
  </div>
  <div class="event-header">Event Logs</div>
  <div id="event-log"></div>
</div>
<div id="map"></div>

CSS

html {
   height: 100%;
 }

 body {
   height: 100%;
   font-family: Verdana, sans-serif, Arial;
   color: #000;
   margin: 0;
   font-size: 14px;
   padding: 0;
 }

 #map {
   position: absolute;
   left: 312px;
   top: 46px;
   right: 2px;
   bottom: 2px;
   border: 1px solid #cccccc;
 }

 #result {
   position: absolute;
   left: 2px;
   top: 46px;
   width: 306px;
   bottom: 2px;
   border: 1px solid #cccccc;
   background-color: #FAFAFA;
   overflow: auto;
 }

 button {
   width: 220px;
   font-family: Verdana, sans-serif, Arial;
   font-size: 12px;
   padding: 2px 0;
   color: #333
 }

 .top-div {
   border-bottom: 1px solid #e9e9e9;
   padding: 10px 12px;
   background: #fff;
 }

 .top-div-span1 {
   font-size: 20px;
 }

 .top-div-span2 {
   font-size: 16px;
   color: #777
 }

 .btn-div {
   padding: 16px 12px 6px 38px;
 }

 .msg-cont {
   padding: 6px 12px 1px;
   border-bottom: 1px solid #e9e9e9;
 }

 .msg-list {
   line-height: 20px;
   font-size: 12px;
   color: #555;
 }

 .event-header {
   padding: 14px 12px 6px 38px;
   color: #666;
 }

 #event-log {
   padding: 6px 12px 6px 38px;
   color: #777;
   font-size: 12px;
   line-height: 22px;
 }

JavaScript

var map = null;
var polygons = [];
var visbility = false;
var p1 = null;
var poly;
var pts;
window.onload = function() {
  var centre = new L.LatLng(28.549948, 77.268241);
  map = new MapmyIndia.Map('map', {
    center: centre,
    editable: true,
    zoomControl: true,
    hybrid: true
  });
  /***
   1. Create a MapmyIndia Map by simply calling new MapmyIndia.Map() and passing it a html div id, all other parameters are optional...
   2. All leaflet mapping functions can be called simply by using "L" object.
   3. In future, MapmyIndia may extend the customised/forked Leaflet object to enhance mapping functionality for developers, 
   which will be clearly documented in the MapmyIndia API documentation section.
   ***/

  //extend the L.Control  to Edit control to draw editable polygons/polyline
  L.EditControl = L.Control.extend({
    options: {
      position: 'topleft',
      callback: null,
      kind: '',
      html: ''
    },
    onAdd: function(map) {
      var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'),
        link = L.DomUtil.create('a', '', container);

      link.href = '#';
      link.title = 'Create a new ' + this.options.kind;
      link.innerHTML = this.options.html;
      L.DomEvent.on(link, 'click', L.DomEvent.stop)
        .on(link, 'click', function() {
          window.LAYER = this.options.callback.call(map.editTools);
        }, this);

      return container;
    }
  });
  // add polygon creation/editing control
  L.NewPolygonControl = L.EditControl.extend({
    options: {
      position: 'topleft',
      callback: map.editTools.startPolygon,
      kind: 'polygon',
      html: 'Poly'
    }
  });
  // add rectangle creation/editing control
  L.NewRectangleControl = L.EditControl.extend({
    options: {
      position: 'topleft',
      callback: map.editTools.startRectangle,
      kind: 'rectangle',
      html: 'Rec'
    }
  });

  // add controls to map
  map.addControl(new L.NewPolygonControl());
 ...