Offline Leaflet Maps (should carry over to Mapbox too)

Image setup

1. Take a screenshot of the map in the position you need it in (ideally this shot would contain all sections of map that are relevant to the visualization)
   • Open the page in fullscreen and remove all elements that obstruct the map view, then screenshot
2. Get the coordinates of the current view's bounding box
   1. Open devtools in a separate window. Make sure the map is still fullscreened.
      • This is important because otherwise the window size will be different than the screenshot size
   2. In the console, run map.getBounds()
   3. Save the ouput somewhere, this will be used later to position the image on the map

Leaflet setup

1. Remove all calls to functions that add tiles to the map
2. Set up the image:

var imgW = 1920, // the width of the image
	imgH = 1080, // the height of the image
	imgPath = '../img/map-img.png';

var imgBounds = new L.LatLngBounds([/*SW Lat from before*/, /*SW Lng from before*/], [/*NE Lat from before*/, /*NE Lng from before*/]);

3. Add the image to the map:

L.imageOverlay(imgPath, imgBounds);

4. Make sure Leaflet can't scroll past the edge of the image:

map.setMaxBounds(imgBounds);