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 Polyline Example
  </span>
</div>
<div id="result">
  <div class="btn-div"><button id="map_create_polyline">Add Polylines</button></div>
  <div class="btn-div"><button id="map_get_bounds">Get Bounds of Red Polyline</button></div>
  <div class="btn-div"><button id="map_set_unvisible_polylines" id="visible">Hide Polylines</button></div>

  <div class="msg-cont">
    <ul class="msg-list">
      <li>Click on control to create polyline.</li>
      <li>Control click on the drawn polyline to remove from map.</li>
    </ul>
  </div>
  <div class="event-header">Event Logs</div>
  <div id="event-log"></div>
</div>
<div id="map"></div> -->







<div class="top-div">
        <span class="top-div-span1">MapmyIndia Maps API: </span>
        <span class="top-div-span2">Map Polyline Example</span>
    </div>
    <div id="result">
        <div class="btn-div"><button id="map_create_polyline">Add Polylines</button></div>
        <div class="btn-div"><button id="map_get_bounds">Get Bounds of Red Polyline</button></div>
        <div class="btn-div"><button class="map_set_unvisible_polylines" id="visible">Hide Polylines</button></div>

        <div class="msg-cont">
            <ul class="msg-list">
                <li>Click on control to create polyline.</li>
                <li>Control click on the drawn polyline 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 poly2 = null;
var poly = [];
var visbility = false;
var polyline1, polyline2;
var event_div = document.getElementById("event-log"); //log element
var visible = document.getElementById("visible"); //show hide polyline button

window.onload = function() {
  var center = new L.LatLng(28.549948, 77.268241);
  map = new MapmyIndia.Map('map', {
    center: center,
    editable: true,
    zoomControl: true,
    hybrid: true
  });
  **map initialization with tiles of MapmyIndia with MapmyIndia.Map**
  **
   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.
   **

  array of wgs points
  var pts1 = [
    new L.LatLng(center.lat - 150 / 10000, center.lng - 150 / 10000),
    new L.LatLng(center.lat + 0 / 10000, center.lng - 50 / 10000),
    new L.LatLng(center.lat + 50 / 10000, center.lng - 100 / 10000),
    new L.LatLng(center.lat + 70 / 10000, center.lng + 50 / 10000),
    new L.LatLng(center.lat - 70 / 10000, center.lng + 100 / 10000)
  ];

  array of wgs points
  var pts2 = [
    new L.LatLng(center.lat - 150 / 10000, center.lng - 450 / 10000),
    new L.LatLng(center.lat + 0 / 10000, center.lng - 350 / 10000),
    new L.LatLng(center.lat + 50 / 10000, center.lng - 500 / 10000),
    new L.LatLng(center.lat + 70 / 10000, center.lng - 250 / 10000),
    new L.LatLng(center.lat - 70 / 10000, center.lng - 200 / 10000),
    new L.LatLng(center.lat - 70 / 10000, center.lng + 100 / 10000)
  ];

  parameters of polyline
  var poly1param = {
    weight: 4,
    opacity: 0.5
  };
  var poly1 = new L.Polyline(pts1, poly1param); polyline with given points and default color is created
 ...