<div id="sidebar" class="leaflet-sidebar collapsed">
  <!-- Nav tabs -->
  <div class="leaflet-sidebar-tabs">
    <ul role="tablist">
      <li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
      <li class="disabled"><a href="#profile" id="toggledraw" role="tab"><i class="fa fa-pen"></i></a></li>
    </ul>
  </div>

  <!-- Tab panes -->
  <div class="leaflet-sidebar-content">
    <div class="leaflet-sidebar-pane" id="home">
      <h1 class="leaflet-sidebar-header">
        Layers
        <span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span>
      </h1>
      <span id="layercontrol"></span>
      <div id="latlng"></div>

    </div>

    <div class="leaflet-sidebar-pane" id="profile">
      <h1 class="leaflet-sidebar-header">Profile<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
    </div>
  </div>
</div>

<div id="map"></div>
body {
  padding: 0;
  margin: 0;
}

html,
body,
#map {
  height: 100%;
  font-family: "Roboto", sans-serif;
}

/* Customise Zoom Controls */

.leaflet-control-zoom a {
  color: white !important;
  background: rgba(0, 0, 0, 0.5) !important;
  transition: all 0.5s ease;
}

.leaflet-control-zoom a:hover {
  color: white !important;
  background: rgba(0, 0, 0, 0.9) !important;
}

/* Leaflet Layers Control */

.leaflet-control-layers {
  border-radius: none;
  box-shadow: none;
}

.leaflet-control-layers-list {
  font-size: 16px;
  line-height: 12px;
  background: none !important;
  color: white;
}

.leaflet-control-layers-base {
  line-height: 12px;
  margin-top: 5px;
}

.leaflet-control-layers-overlays {
  margin-top: 5px;
}

.leaflet-control-layers-expanded {
  width: 100% !important;
  padding: 0px;
  background-color: transparent;
  border: none !important;
}

#layercontrol {
  display: inline-block;
  width: 100%;
  padding: 10px;
  background-color: transparent;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

#layercontrol .title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

/* Leaflet Draw */

.leaflet-draw {
  display: none;
}

.leaflet-draw-toolbar {
  display: none;
}

.leaflet-draw-toolbar a {
  background-image: url("data:image/png;base64,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") !important;
  background-image: linear-gradient(transparent, transparent),
    url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiCiAgIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIKICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiCiAgIHZpZXdCb3g9IjAgMCA2MDAgNjAiCiAgIGhlaWdodD0iNjAiCiAgIHdpZHRoPSI2MDAiCiAgIGlkPSJzdmc0MjI1IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlua3NjYXBlOnZlcnNpb249IjAuOTEgcjEzNzI1IgogICBzb2RpcG9kaTpkb2NuYW1lPSJzcHJpdGVzaGVldC5zdmciCiAgIGlua3NjYXBlOmV4cG9ydC1maWxlbmFtZT0iL2hvbWUvZnB1Z2EvZGV2ZWxvcG1lbnQvdXBzdHJlYW0vaWNhcnRvLkxlYWZsZXQuZHJhdy9zcmMvaW1hZ2VzL3Nwcml0ZXNoZWV0LTJ4LnBuZyIKICAgaW5rc2NhcGU6ZXhwb3J0LXhkcGk9IjkwIgogICBpbmtzY2FwZTpleHBvcnQteWRwaT0iOTAiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTQyNTgiPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlIC8+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM0MjU2IiAvPgogIDxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgICAgYm9yZGVyb3BhY2l0eT0iMSIKICAgICBvYmplY3R0b2xlcmFuY2U9IjEwIgogICAgIGdyaWR0b2xlcmFuY2U9IjEwIgogICAgIGd1aWRldG9sZXJhbmNlPSIxMCIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMCIKICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTkyMCIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxMDU2IgogICAgIGlkPSJuYW1lZHZpZXc0MjU0IgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBpbmtzY2FwZTp6b29tPSIxLjMxMDE4NTIiCiAgICAgaW5rc2NhcGU6Y3g9IjIzNy41NjkyOCIKICAgICBpbmtzY2FwZTpjeT0iNy4yNDE5NjIxIgogICAgIGlua3NjYXBlOndpbmRvdy14PSIxOTIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyNCIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InN2ZzQyMjUiIC8+CiAgPGcKICAgICBpZD0iZW5hYmxlZCIKICAgICBzdHlsZT0iZmlsbDojRkZGRkZGO2ZpbGwtb3BhY2l0eToxIj4KICAgIDxnCiAgICAgICBpZD0icG9seWxpbmUiCiAgICAgICBzdHlsZT0iZmlsbDojRkZGRkZGO2ZpbGwtb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgZD0ibSAxOCwzNiAwLDYgNiwwIDAsLTYgLTYsMCB6IG0gNCw0IC0yLDAgMCwtMiAyLDAgMCwyIHoiCiAgICAgICAgIGlkPSJwYXRoNDIyOSIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgc3R5bGU9ImZpbGw6I0ZGRkZGRjtmaWxsLW9wYWNpdHk6MSIgLz4KICAgICAgPHBhdGgKICAgICAgICAgZD0ibSAzNiwxOCAwLDYgNiwwIDAsLTYgLTYsMCB6IG0gNCw0IC0yLDAgMCwtMiAyLDAgMCwyIHoiCiAgICAgICAgIGlkPSJwYXRoNDIzMSIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgc3R5bGU9ImZpbGw6I0ZGRkZGRjtmaWxsLW9wYWNpdHk6MSIgLz4KICAgICAgPHBhdGgKICAgICAgICAgZD0ibSAyMy4xNDIsMzkuMTQ1IC0yLjI4NSwtMi4yOSAxNiwtMTUuOTk4IDIuMjg1LDIuMjg1IHoiCiAgICAgICAgIGlkPSJwYXRoNDIzMyIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgc3R5bGU9ImZpbGw6I0ZGRkZGRjtmaWxsLW9wYWNpdHk6MSIgLz4KICAgIDwvZz4KICAgIDxwYXRoCiAgICAgICBpZD0icG9seWdvbiIKICAgICAgIGQ9Ik0gMTAwLDI0LjU2NSA5Ny45MDQsMzkuMzk1IDgzLjA3LDQyIDc2LDI4Ljc3MyA4Ni40NjMsMTggWiIKICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgICBzdHlsZT0iZmlsbDojRkZGRkZGO2ZpbGwtb3BhY2l0eToxIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJyZWN0YW5nbGUiCiAgICAgICBkPSJtIDE0MCwyMCAyMCwwIDAsMjAgLTIwLDAgeiIKICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgICBzdHlsZT0iZmlsbDojRkZGRkZGO2ZpbGwtb3BhY2l0eToxIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJjaXJjbGUiCiAgICAgICBkPSJtIDIyMSwzMCBjIDAsNi4wNzggLTQuOTI2LDExIC0xMSwxMSAtNi4wNzQsMCAtMTEsLTQuOTIyIC0xMSwtMTEgMCwtNi4wNzQgNC45MjYsLTExIDExLC0xMSA2LjA3NCwwIDExLDQuOTI2IDExLDExIHoiCiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIgogICAgICAgc3R5bGU9ImZpbGw6I0ZGRkZGRjtmaWxsLW9wYWNpdHk6MSIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0ibWFya2VyIgogICAgICAgZD0ibSAyNzAsMTkgYyAtNC45NzEsMCAtOSw0LjAyOSAtOSw5IDAsNC45NzEgNS4wMDEsMTIgOSwxNCA0LjAwMSwtMiA5LC05LjAyOSA5LC0xNCAwLC00Ljk3MSAtNC4wMjksLTkgLTksLTkgeiBtIDAsMTIuNSBjIC0yLjQ4NCwwIC00LjUsLTIuMDE0IC00LjUsLTQuNSAwLC0yLjQ4NCAyLjAxNiwtNC41IDQuNSwtNC41IDIuNDg1LDAgNC41LDIuMDE2IDQuNSw0LjUgMCwyLjQ4NiAtMi4wMTUsNC41IC00LjUsNC41IHoiCiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIgogICAgICAgc3R5bGU9ImZpbGw6I0ZGRkZGRjtmaWxsLW9wYWNpdHk6MSIgLz4KICAgIDxnCiAgICAgICBpZD0iZWRpdCIKICAgICAgIHN0eWxlPSJmaWxsOiNGRkZGRkY7ZmlsbC1vcGFjaXR5OjEiPgogICAgICA8cGF0aAogICAgICAgICBkPSJtIDMzNywzMC4xNTYgMCwwLjQwNyAwLDUuNjA0IGMgMCwxLjY1OCAtMS4zNDQsMyAtMywzIGwgLTEwLDAgYyAtMS42NTUsMCAtMywtMS4zNDIgLTMsLTMgbCAwLC0xMCBjIDAsLTEuNjU3IDEuMzQ1LC0zIDMsLTMgbCA2LjM0NSwwIDMuMTksLTMuMTcgLTkuNTM1LDAgYyAtMy4zMTMsMCAtNiwyLjY4NyAtNiw2IGwgMCwxMCBjIDAsMy4zMTMgMi42ODcsNiA2LDYgbCAxMCwwIGMgMy4zMTQsMCA2LC0yLjY4NyA2LC02IGwgMCwtOC44MDkgLTMsMi45NjgiCiAgICAgICAgIGlkPSJwYXRoNDI0MCIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgc3R5bGU9ImZpbGw6I0ZGRkZGRjtmaWxsLW9wYWNpdHk6MSIgLz4KICAgICAgPHBhdGgKICAgICAgICAgZD0ibSAzMzguNzIsMjQuNjM3IC04Ljg5Miw4Ljg5MiAtMi44MjgsMCAwLC0yLjgyOSA4Ljg5LC04Ljg5IHoiCiAgICAgICAgIGlkPSJwYXRoNDI0MiIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgc3R5bGU9ImZpbGw6I0ZGRkZGRjtmaWxsLW9wYWNpdHk6MSIgLz4KICAgICAgPHBhdGgKICAgICAgICAgZD0ibSAzMzguNjk3LDE3LjgyNiA0LDAgMCw0IC00LDAgeiIKICAgICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoLTAuNzA2OTgzMzYsLTAuNzA3MjMwMTgsMC43MDcyMzAxOCwtMC43MDY5ODMzNiw1NjcuNTU5MTcsMjc0Ljc4MjczKSIKICAgICAgICAgaWQ9InBhdGg0MjQ0IgogICAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIgogICAgICAgICBzdHlsZT0iZmlsbDojRkZGRkZGO2ZpbGwtb3BhY2l0eToxIiAvPgogICAgPC9nPgogICAgPGcKICAgICAgIGlkPSJyZW1vdmUiCiAgICAgICBzdHlsZT0iZmlsbDojRkZGRkZGO2ZpbGwtb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgZD0ibSAzODEsNDIgMTgsMCAwLC0xOCAtMTgsMCAwLDE4IHogbSAxNCwtMTYgMiwwIDAsMTQgLTIsMCAwLC0xNCB6IG0gLTQsMCAyLDAgMCwxNCAtMiwwIDAsLTE0IHogbSAtNCwwIDIsMCAwLDE0IC0yLDAgMCwtMTQgeiBtIC00LDAgMiwwIDAsMTQgLTIsMCAwLC0xNCB6IgogICAgICAgICBpZD0icGF0aDQyNDciCiAgICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNGRkZGRkY7ZmlsbC1vcGFjaXR5OjEiIC8+CiAgICAgIDxwYXRoCiAgICAgICAgIGQ9Im0gMzk1LDIwIDAsLTQgLTEwLDAgMCw0IC02LDAgMCwyIDIyLDAgMCwtMiAtNiwwIHogbSAtMiwwIC02LDAgMCwtMiA2LDAgMCwyIHoiCiAgICAgICAgIGlkPSJwYXRoNDI0OSIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgc3R5bGU9ImZpbGw6I0ZGRkZGRjtmaWxsLW9wYWNpdHk6MSIgLz4KICAgIDwvZz4KICA8L2c+CiAgPGcKICAgICBpZD0iZGlzYWJsZWQiCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIwLDApIgogICAgIHN0eWxlPSJmaWxsOiNiYmJiYmIiPgogICAgPHVzZQogICAgICAgeGxpbms6aHJlZj0iI2VkaXQiCiAgICAgICBpZD0iZWRpdC1kaXNhYmxlZCIKICAgICAgIHg9IjAiCiAgICAgICB5PSIwIgogICAgICAgd2lkdGg9IjEwMCUiCiAgICAgICBoZWlnaHQ9IjEwMCUiIC8+CiAgICA8dXNlCiAgICAgICB4bGluazpocmVmPSIjcmVtb3ZlIgogICAgICAgaWQ9InJlbW92ZS1kaXNhYmxlZCIKICAgICAgIHg9IjAiCiAgICAgICB5PSIwIgogICAgICAgd2lkdGg9IjEwMCUiCiAgICAgICBoZWlnaHQ9IjEwMCUiIC8+CiAgPC9nPgogIDxwYXRoCiAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIgogICAgIGlkPSJjaXJjbGUtMyIKICAgICBkPSJtIDU4MS42NTcyNSwzMCBjIDAsNi4wNzggLTQuOTI2LDExIC0xMSwxMSAtNi4wNzQsMCAtMTEsLTQuOTIyIC0xMSwtMTEgMCwtNi4wNzQgNC45MjYsLTExIDExLC0xMSA2LjA3NCwwIDExLDQuOTI2IDExLDExIHoiCiAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz4KPC9zdmc+Cg==") !important;
  background-repeat: no-repeat;
  background-size: 300px 30px;
  background-clip: padding-box;
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.leaflet-draw-toolbar a:hover {
  background-color: rgba(0, 0, 0, 0.9) !important;
}

/* SIDEBAR OVERRIDES*/
.leaflet-sidebar-tabs {
  background-color: rgba(0, 0, 0, 0.85) !important;
}

.leaflet-sidebar-header {
  background-color: rgba(0, 116, 217, 0.95) !important;
}

.leaflet-sidebar-content {
  background-color: rgba(0, 0, 0, 0.85) !important;
}

#sidebar > div.leaflet-sidebar-tabs > ul > li > a {
  color: white !important;
}

#sidebar > div.leaflet-sidebar-tabs > ul > li:not(.disabled):not(.active) > a:hover {
  color: black !important;
}

#latlng {
  position: absolute;
  right: 0px;
  bottom: 0px;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 7px 1px 3px;
  margin-left: auto;
  margin-right: auto;
  color: black;
  background-color: white;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.75);
  z-index: 1000;
  display: none;
}
//Init Overlays
var overlays = {};

//Init BaseMaps
var basemaps = {
  "OpenStreetMaps": L.tileLayer(
    "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
    {
      minZoom: 2,
      maxZoom: 19,
      id: "osm.streets"
    }
  ),
  "Google-Map": L.tileLayer(
    "https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}",
    {
      minZoom: 2,
      maxZoom: 19,
      id: "google.street"
    }
  ),
  "Google-Satellite": L.tileLayer(
    "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
    {
      minZoom: 2,
      maxZoom: 19,
      id: "google.satellite"
    }
  ),
  "Google-Hybrid": L.tileLayer(
    "https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}",
    {
      minZoom: 2,
      maxZoom: 19,
      id: "google.hybrid"
    }
  )
};

//Map Options
var mapOptions = {
  zoomControl: false,
  attributionControl: false,
  center: [-29.0529434318608, 152.01910972595218],
  zoom: 10,
  layers: [basemaps.OpenStreetMaps]
};

//Render Main Map
var map = L.map("map", mapOptions);

//Render Zoom Control
L.control
  .zoom({
    position: "topleft"
  })
  .addTo(map);

var sidebar = L.control
  .sidebar({
    autopan: false,
    container: "sidebar",
    position: "right"
  })
  .addTo(map);

//Render Layer Control & Move to Sidebar
var layerControl = L.control
  .layers(basemaps, overlays, {
    position: "topright",
    collapsed: false
  })
  .addTo(map);
var oldLayerControl = layerControl.getContainer();
var newLayerControl = $("#layercontrol");
newLayerControl.append(oldLayerControl);
$(".leaflet-control-layers-list").prepend("<strong class='title'>Base Maps</strong><br>");
$(".leaflet-control-layers-separator").after("<br><strong class='title'>Layers</strong>");

//######## Leaflet Draw
var editableLayers = new L.FeatureGroup();
layerControl.addOverlay(editableLayers, "Cosmetic Layer");
map.addLayer(editableLayers);

var drawOptions = {
  position: "topleft",
  draw: {
    polyline: true,
    polygon: {
      allowIntersection: false, // Restricts shapes to simple polygons
      drawError: {
        color: "#e1e100", // Color the shape will turn when intersects
        message: "<strong>Oh snap!<strong> you can't draw that!" // Message that will show when intersect
      }
    },
    circle: true, // Turns off this drawing tool
    rectangle: true,
    marker: true
  },
  edit: {
    featureGroup: editableLayers, //REQUIRED!!
    remove: true
  }
};

var drawControl = new L.Control.Draw(drawOptions);
map.addControl(drawControl);

map.on(L.Draw.Event.CREATED, function(e) {
  var type = e.layerType,
    layer = e.layer;

  if (type === "marker") {
    layer
      .bindPopup(
        "LatLng: " + layer.getLatLng().lat + "," + layer.getLatLng().lng
      )
      .openPopup();
  }

  editableLayers.addLayer(layer);
  $(".drawercontainer .drawercontent").html(
    JSON.stringify(editableLayers.toGeoJSON())
  );
});

map.on(L.Draw.Event.EDITSTOP, function(e) {
  $(".drawercontainer .drawercontent").html(
    JSON.stringify(editableLayers.toGeoJSON())
  );
});

map.on(L.Draw.Event.DELETED, function(e) {
  $(".drawercontainer .drawercontent").html("");
});

//Edit Button Clicked
$('#toggledraw').click(function(e) {
  $(".leaflet-draw").fadeToggle("fast", "linear");
  $(".leaflet-draw-toolbar").fadeToggle("fast", "linear");
  this.blur();
  return false;
});

//Handle Map click to Display Lat/Lng
map.on('click', function(e) {
  $("#latlng").html(e.latlng.lat + ", " + e.latlng.lng);
	$("#latlng").show();
});

//Handle Copy Lat/Lng to clipboard
$('#latlng').click(function(e) {
  var $tempElement = $("<input>");
	$("body").append($tempElement);
	$tempElement.val($("#latlng").text()).select();
	document.execCommand("Copy");
	$tempElement.remove();
	alert("Copied: "+$("#latlng").text());
	$("#latlng").hide();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js
  5. https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js
  6. https://cdn.jsdelivr.net/npm/leaflet-sidebar-v2@3.1.1/js/leaflet-sidebar.min.js