diff --git a/src/components/maps/WorldMap.astro b/src/components/maps/WorldMap.astro index 561cc4db..c5260c23 100644 --- a/src/components/maps/WorldMap.astro +++ b/src/components/maps/WorldMap.astro @@ -34,6 +34,15 @@ const maxZoom = 6.7 // Looks best with zoomify image const flyToDuration = 1.2 // In seconds const flyToZoomLevel = 6.5 +const mobileZoomLevels = { + minZoom: 2.5, + maxZoom: 6.7 +} + +const inertiaDeceleration = 2000 +const maxBoundsPadding = 10 +const maxBoundsViscosity = .75 + // Initializes the map const map = L.map('world', { crs: L.CRS.Simple, @@ -41,9 +50,30 @@ const map = L.map('world', { minZoom, zoom: minZoom, zoomSnap: 0, - zoomControl: false + zoomControl: false, + inertiaDeceleration, + maxBoundsViscosity }) +/** + * MOBILE JS + */ +// Breakpoints +const desktopMQ = window.matchMedia('(min-width: 900px)') + +function handleMapResize(e) { + if (e.matches) { + map.setMaxZoom(maxZoom) + map.setMinZoom(minZoom) + } else { + map.setMaxZoom(mobileZoomLevels.maxZoom) + map.setMinZoom(mobileZoomLevels.minZoom) + } +} +desktopMQ.addEventListener('change', handleMapResize) + +handleMapResize(desktopMQ) + // Immediately set center of map L.control.zoom({ position: 'bottomright', @@ -244,6 +274,19 @@ const rulerOptions = { const measureControl = L.control.measure(rulerOptions) measureControl.addTo(map) +map.setMaxBounds( + [ + [ + baseTileLayer.getBounds().getSouth() - maxBoundsPadding, + baseTileLayer.getBounds().getWest() - maxBoundsPadding + ], + [ + baseTileLayer.getBounds().getNorth() + maxBoundsPadding, + baseTileLayer.getBounds().getEast() + maxBoundsPadding + ] + ] +) + /** * SVG LAYERS */