Cambridge Pub Map

Example of adding an d3 generated SVG overlay to a Leaflet map

<!DOCTYPE html>
<html>
<title>Cambridge Pub Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
  crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
  crossorigin=""></script>

html,
  body,
  #map {
    height: 100%;
    width: 100%
  }

.leaflet-container {
    background-color: rgba(0, 0, 0, 0);
  }
</style>
<div id="map"></div>
<script>
  const width = 1600;
  const height = 1200;
  const initialZoomLevel = 1;
  const imageUrl = 'cambridge-pub-map.svg';
  const imageBounds = [[0, 0], [height, width]];
  const map = new L.map('map', {
    crs: L.CRS.Simple,
    center: [height * 9 / 11, width / 4],
    zoom: initialZoomLevel,
    attributionControl: false,
    maxBounds: [[0, 0], [height, width]],
  })

L.imageOverlay(imageUrl, imageBounds, { interactive: true }).addTo(map);
  map.on('click', (e) => console.log(e));
</script>

</html>