SCUM Map

by Sebastian Kay

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet-measure.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet-measure.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="map"></div>

CSS

html,
body,
#map {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: #172f3d;
  overflow: hidden;
}

svg.leaflet-zoom-animated {
  
}

.leaflet-pane > svg path.leaflet-interactive {
        border-width: 0px !important;
        stroke: rgb(0, 0, 0) !important;
        stroke-width: 0 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
				fill-opacity: 0 !important;
    }

.leaflet-container a {
  color: white!important;
}

.leaflet-control-layers {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  background-color: #424e5a;
  border-color: #424e5a;
  border-radius: 5px;
  color: #fff;
  text-transform: uppercase;
  text-size: 1.2rem;
  width: 43px;
  height: 43px;
  opacity: 1;
  /*transition: opacity 2s linear;*/
  transition: width 0.4s, height 0.3s;

}

.leaflet-control-layers>.lcheckbox {
  display: none;
}

.leaflet-control-layers.leaflet-control-layers-expanded>.lcheckbox {
  display: inline-block !important;
}

.leaflet-control-layers-expanded {
  padding: 6px 10px 6px 6px;
  height: 280px;
  width: 160px;
  opacity: 1;
}

.leaflet-control-layers-list {
  opacity: 0.2;
  transition: opacity 1s;
}

.leaflet-control-layers-expanded>.leaflet-control-layers-list {
  opacity: 1 !important;
}

.leaflet-control-layers-toggle {
  font-family: "Font Awesome 5 Free";
  background-image: url(map_icons/layers.svg);
  width: 36px;
  height: 36px;

  border-radius: 5px;
}

.leaflet-control-layers-toggle:before {
  content: "\f546";
}

.leaflet-control-measure {
  border-radius: 5px !important;
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: #6c757d;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  border: 1 px solid transparent;
  padding: 0.45 rem 0.9 rem;
  font-size: .84rem;
  border-radius: 0.15 rem;
  transition: color .15s ease-in-out,
    background-color .15s ease-in-out,
    border-color .15s...

JavaScript

let imageUrl = 'https://i.imgur.com/N8NVKox.jpg';
let latLngBounds = L.latLngBounds([
  [40.5663, -73.8372],
  [40.4959, -73.7515]
]);

var map = L.map('map', {
  fullscreenControl: false,
  //zoomDelta: 0.25,
  //zoomSnap: 0.15,
  minZoom: 13,
  maxZoom: 17,
  //wheelPxPerZoomLevel: 256,
  zoomControl: false,
  layers: [],
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).setView([37.8, -96], 4);


let imageOverlay = L.imageOverlay(imageUrl, latLngBounds, {
  opacity: 1,
  interactive: false
}).addTo(map);

let	plugin = L.control.measure({
			position: 'topleft',
			keyboard: true,
			activeKeyCode: 'M'.charCodeAt(0),
			cancelKeyCode: 27,
			lineColor: 'red',
			lineWeight: 2,
			lineDashArray: '6, 6',
			lineOpacity: 1,
		  }).addTo(map);

L.rectangle(latLngBounds).addTo(map);
map.fitBounds(latLngBounds);