JSFiddle - React, Tailwind, and code Playground

by falkedesign

HTML

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>

<div id="mapid" style="width: 100%; height: 300px;"></div>


<button onclick="showGreyLayer()">
Grey Layer
</button>

<button onclick="showStreetsLayer()">Streets Layer</button>

JavaScript

var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
    '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

var grayscale   = L.tileLayer(mbUrl, {id: 'mapbox/light-v9', tileSize: 512, zoomOffset: -1, attribution: mbAttr}),
    streets  = L.tileLayer(mbUrl, {id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr});

var map = L.map('mapid', {
  center: [39.73, -104.99],
  zoom: 10,
  layers: [grayscale]
});

var baseLayers = {
  "Grayscale": grayscale,
  "Streets": streets
};


L.control.layers(baseLayers).addTo(map);


function showGreyLayer(){
  map.addLayer(grayscale)
  if(map.hasLayer(streets)){
    map.removeLayer(streets);
  }
}

function showStreetsLayer(){
  map.addLayer(streets)
  if(map.hasLayer(grayscale)){
    map.removeLayer(grayscale);
  }
}