JSFiddle - React, Tailwind, and code Playground

by tr00st

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
 <div id="map"></div>
 <button id="remove">
 Remove
 </button>
 <button id="add">
 Add
 </button>

CSS

#map { height: 480px; }

JavaScript

var map = L.map('map').setView([39.74739, -105], 9);

	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
		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://mapbox.com">Mapbox</a>',
		id: 'mapbox.light'
	}).addTo(map);


var someFeatures = [];
for (var i = 0; i < 1000; i++) {
someFeatures.push({
    "type": "Feature",
    "properties": {
        "name": "Coors Field",
        "show_on_map": true
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-104.99404 + (Math.random()*0.5-0.25), 39.75621 + (Math.random()*0.5-0.25)]
    }
});
}
var options = {
    filter: function(feature, layer) {
        return Math.random() > 0.5; //feature.properties.show_on_map;
    }
};
var jsonLayer = L.geoJSON(someFeatures, options);

jsonLayer.addTo(map);

$("#remove").click(function () {
	map.removeLayer(jsonLayer);
  jsonLayer.initialize(someFeatures, options);
	jsonLayer.addTo(map);
	//jsonLayer.removeFrom(map);
});
$("#add").click(function () {
	//jsonLayer.removeFrom(map);
	jsonLayer.addTo(map);
});