JSFiddle - React, Tailwind, and code Playground

by Mladen Petrovic

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css">
<div id="map" style="height: 300px;"></div>

JavaScript

var map = L.map('map').setView([45.397803, -123.262653], 6);

L.tileLayer('http://imageservices.quantumspatial.com/tiles/panther_creek_2012_intensity/{z}/{y}/{x}.png', {
	bounds: 
  attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var markers = []

function createMarker(coords) {
  var id
  if (markers.length < 1) id = 0
  else id = markers[markers.length - 1]._id + 1
  var popupContent =
    '<p>Some Infomation</p></br>' +
    '<p>test</p></br>' +
    '<button onclick="clearMarker(' + id + ')">Clear Marker</button>';
  myMarker = L.marker(coords, {
    draggable: false
  });
  myMarker._id = id
  var myPopup = myMarker.bindPopup(popupContent, {
    closeButton: false
  });
  map.addLayer(myMarker)
  markers.push(myMarker)
}

function clearMarker(id) {
	console.log(markers)
  var new_markers = []
  markers.forEach(function(marker) {
    if (marker._id == id) map.removeLayer(marker)
    else new_markers.push(marker)
  })
  markers = new_markers
}
createMarker([51.5, -0.09])
createMarker([51.5, -0.093])
createMarker([51.5, -0.096])