JSFiddle - React, Tailwind, and code Playground

by msjade

HTML

<div id="map"></div>
<br />
<br />
<div class="sliderContainer">
    <div id="dotSlider"></div>
</div>

CSS

html, body, #map {
      height: calc(100% - 30px);
      width:100%;
      padding:0px;
      margin:0px;
      font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
      color: #333;
   }

JavaScript

var map = L.map('map').setView([9.061431, 7.514827], 7);

    
var defaultLayer = L.tileLayer('https://api.mapbox.com/styles/v1/msjade/cjlqok9is8wxa2sn1wh7sxz1i/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibXNqYWRlIiwiYSI6ImNpdW4xdjJ4ZDAwMHMyb29lamt4emJoOTkifQ.rISPCIE5NKs_Qmhhgd9-3g').addTo(map);
var baseLayers = {
  'Map View': defaultLayer,
  'Terrain View': L.tileLayer('https://tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=350f42773ffb4b8eb5d63e5251136c4f'),
  'Satellite View': L.tileLayer('https://api.mapbox.com/styles/v1/msjade/cjlryosd58nhw2spjuh82yzar/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibXNqYWRlIiwiYSI6ImNpdW4xdjJ4ZDAwMHMyb29lamt4emJoOTkifQ.rISPCIE5NKs_Qmhhgd9-3g'), 
};
var layerControl = L.control.layers(baseLayers, {
 }).addTo(map);