leaflet onload event

Change class name on click in jQuery

by Jason Land

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw-src.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
<body>

<div id="map">
</div>
<button onclick="OnRemove()">
OnRemove
</button>
<button onclick="Remove()">
Remove
</button>
</body>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#map {
  height: 400px;
  width: 400px;
}

JavaScript

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
         attribution: '&copy; '}).addTo(map);
     
 // FeatureGroup is to store editable layers
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
         edit: {
             featureGroup: drawnItems
         }
     });

map.addControl(drawControl);

function OnRemove(){
//try remove drawControl througt onRemove()
alert("OnRemove from a documantation");
drawControl.onRemove();
}
function Remove(){
//try remove drawControl througt Remove()
alert("Remove");
drawControl.remove();
}