From 667d54124fbb79d30eb8517819fa5ad86acccb95 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 11 Dec 2023 21:38:55 +0100
Subject: [PATCH 1/3] Different zoom levels on mobile

---
 src/components/maps/WorldMap.astro | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

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',

From 1b4d54679a256536e359654603400b55c36cce6c Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 11 Dec 2023 22:39:39 +0100
Subject: [PATCH 2/3] Map padding

---
 src/components/maps/WorldMap.astro | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/components/maps/WorldMap.astro b/src/components/maps/WorldMap.astro
index d25e3c17..892cc8c4 100644
--- a/src/components/maps/WorldMap.astro
+++ b/src/components/maps/WorldMap.astro
@@ -39,6 +39,10 @@ const mobileZoomLevels = {
     maxZoom: 6.7
 }
 
+const inertiaDeceleration = 1500
+const maxBoundsPadding = 10
+const maxBoundsViscosity = .75
+
 // Initializes the map
 const map = L.map('world', {
     crs: L.CRS.Simple,
@@ -47,6 +51,8 @@ const map = L.map('world', {
     zoom: minZoom,
     zoomSnap: 0,
     zoomControl: false,
+    inertiaDeceleration,
+    maxBoundsViscosity
 })
 
 /**
@@ -268,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
  */

From 1c663ea8cbccdfd317433a3b0fd0fdb597a72d9a Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 11 Dec 2023 22:42:48 +0100
Subject: [PATCH 3/3] Changed inertia

---
 src/components/maps/WorldMap.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/maps/WorldMap.astro b/src/components/maps/WorldMap.astro
index 892cc8c4..c5260c23 100644
--- a/src/components/maps/WorldMap.astro
+++ b/src/components/maps/WorldMap.astro
@@ -39,7 +39,7 @@ const mobileZoomLevels = {
     maxZoom: 6.7
 }
 
-const inertiaDeceleration = 1500
+const inertiaDeceleration = 2000
 const maxBoundsPadding = 10
 const maxBoundsViscosity = .75