JSFiddle - React, Tailwind, and code Playground

by khrome

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.6.3/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.6.3/leaflet.css">
<body>
    <div id="panel">
        <input id="delPoly" type="button" value="Delete Polygon" />
        <input id="delMarker" type="button" value="Delete Marker" />        
    </div>
    <div id="map"></div>
</body>

CSS

body {
    padding: 0;
    margin: 0;
}
html, body, #map {
    height: 100%;
}
#panel {
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -180px;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
}

JavaScript

var map = L.map('map').setView([14.62374, 120.94316], 16);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
}).addTo(map);

//draw polygon
var mypoly = L.polygon([
    [14.6232, 120.94141],
    [14.62331, 120.94372],
    [14.62223, 120.94126]
]).addTo(map).bindPopup("I am a polygon that you will delete later.");

var marker = L.marker([14.62104, 120.94329]).addTo(map)
			.bindPopup("I am a marker to be deleted.").openPopup();

function deletePolygon(myid) {
    map.removeLayer(myid);
    return false;
}

$("#delPoly").on("click", function() { map.removeLayer(mypoly); });

$("#delMarker").on("click", function() { map.removeLayer(marker); });

setInterval(function(){
    map.removeLayer(mypoly);
}, 2000);

setTimeout(function(){
    setInterval(function(){
        mypoly = L.polygon([
            [14.6232, 120.94141],
            [14.62331, 120.94372],
            [14.62223, 120.94126]
        ]).addTo(map);
    }, 2000);
}, 1000);