From 7a158459d8b6ead200bc4937f4734d1aaa63166b Mon Sep 17 00:00:00 2001
From: TrisTOON <36267812+TrisTOON@users.noreply.github.com>
Date: Mon, 4 Jul 2022 09:20:14 +0200
Subject: [PATCH] fix: Add a small safety padding to the map on all the screens

This prevents the route to reach the edges of the map
when it is opened
---
 src/components/Trip/TripMap.jsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/Trip/TripMap.jsx b/src/components/Trip/TripMap.jsx
index f3a83bf7..9cfbac2e 100644
--- a/src/components/Trip/TripMap.jsx
+++ b/src/components/Trip/TripMap.jsx
@@ -63,8 +63,16 @@ const TripMap = () => {
   useEffect(() => {
     if (geojsonRef.current) {
       const geojsonL = geojsonRef.current.leafletElement
-      mapL.fitBounds(geojsonL.getBounds(), {
-        paddingBottomRight: [0, mapL.getSize().y * mapPanRatio]
+      const bounds = geojsonL.getBounds()
+      const padding = 16
+      const paddingTopLeft = [padding, padding]
+      const paddingBottomRight = [
+        padding,
+        padding + mapL.getSize().y * mapPanRatio
+      ]
+      mapL.fitBounds(bounds, {
+        paddingTopLeft,
+        paddingBottomRight
       })
     }
   }, [mapL, mapPanRatio])