Leaflet map

by Alexandru Gatea

HTML

<html>

  <head>
    <meta charset="UTF-8">
    <title>Leaflet Map</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>


  </head>

  <body>
    <div id="map" class="grow"></div>

    <style>
      .leaflet-control-layers-toggle {
        display: none;
      }
.leaflet-control-layers {padding: 0!important; background: transparent;border: none;box-shadow: none;}
      .leaflet-control-layers-list {
        display: block !important;
      }
      
      .leaflet-control-layers-base label {
        display: block;
        position: relative;background: transparent;
      }
      
      .leaflet-control-layers-base label div {
        width:
      }

    </style>
  </body>

</html>

CSS

* {
    margin: 0;
    box-sizing: border-box;
}
body {
    position: relative;
    height: 100vh;
}
#map {
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
let getParams = new URLSearchParams(window.location.search);
  let osmDefault = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    noWrap: true,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  });
  let jDark = L.tileLayer('https://{s}.tile.jawg.io/jawg-dark/{z}/{x}/{y}@2x.png?access-token=0kpZMkHOkyArRzKWglHXvakWmYghOlHak7yNbNpjLcQ7gpX38p4c2d99bnW7xHZt&lang=en', {
    maxZoom: 19,
    noWrap: true,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  });
  let jLight = L.tileLayer('https://{s}.tile.jawg.io/jawg-light/{z}/{x}/{y}@2x.png?access-token=0kpZMkHOkyArRzKWglHXvakWmYghOlHak7yNbNpjLcQ7gpX38p4c2d99bnW7xHZt&lang=en', {
    maxZoom: 19,
    noWrap: true,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  });
  let baseLayers = {
    "Default": osmDefault,
    "JAWG Dark": jDark,
    "JAWG Light": jLight
  };
  let map = L.map('map', {
    minZoom: 3,
    layers: [jDark]
  }).setView([getParams.get('clat') || 0, getParams.get('clng') || 0], Math.min(19, Math.max(getParams.get('zoom'), 2)));
  L.control.layers(baseLayers).addTo(map);
  L.control.scale().addTo(map); // add a scale to the map
  map.setMaxBounds([
    [-90, -180],
    [90, 180]
  ]); //set bounds of drag action

});