diff --git a/src/components/maps/WorldMap.astro b/src/components/maps/WorldMap.astro index 561cc4db..d25e3c17 100644 --- a/src/components/maps/WorldMap.astro +++ b/src/components/maps/WorldMap.astro @@ -34,6 +34,11 @@ 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 +} + // Initializes the map const map = L.map('world', { crs: L.CRS.Simple, @@ -41,9 +46,28 @@ const map = L.map('world', { minZoom, zoom: minZoom, zoomSnap: 0, - zoomControl: false + zoomControl: false, }) +/** + * 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',