From 2b6dc86e87b77db599ebbefb3fafdb27b87c075d Mon Sep 17 00:00:00 2001
From: TrisTOON <36267812+TrisTOON@users.noreply.github.com>
Date: Thu, 23 Jun 2022 12:07:59 +0200
Subject: [PATCH 1/3] fix: Vertically center the map on mobile when opening it

---
 src/components/Trip/TripMap.jsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Trip/TripMap.jsx b/src/components/Trip/TripMap.jsx
index 739c5f83..f3a83bf7 100644
--- a/src/components/Trip/TripMap.jsx
+++ b/src/components/Trip/TripMap.jsx
@@ -51,7 +51,7 @@ const TripMap = () => {
     [theme]
   )
   const mapPanRatio = useMemo(
-    () => (isMobile ? bottomSheetSettings.mediumHeightRatio / 2 : 0),
+    () => (isMobile ? bottomSheetSettings.mediumHeightRatio : 0),
     [isMobile]
   )
 
@@ -63,8 +63,9 @@ const TripMap = () => {
   useEffect(() => {
     if (geojsonRef.current) {
       const geojsonL = geojsonRef.current.leafletElement
-      mapL.fitBounds(geojsonL.getBounds())
-      mapL.panBy([0, mapL.getSize().y * mapPanRatio])
+      mapL.fitBounds(geojsonL.getBounds(), {
+        paddingBottomRight: [0, mapL.getSize().y * mapPanRatio]
+      })
     }
   }, [mapL, mapPanRatio])
 

From 7c3e70353e30c0b5c2a2af98f83be0d2bfd14635 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 2/3] 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..516dacb0 100644
--- a/src/components/Trip/TripMap.jsx
+++ b/src/components/Trip/TripMap.jsx
@@ -15,6 +15,7 @@ import { getGeoJSONData } from 'src/lib/timeseries'
 import './tripmap.styl'
 
 const mapCenter = [51.505, -0.09]
+const mapPadding = 16
 
 const makeGeoJsonOptions = theme => ({
   style: feature => {
@@ -63,8 +64,15 @@ 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 paddingTopLeft = [mapPadding, mapPadding]
+      const paddingBottomRight = [
+        mapPadding,
+        mapPadding + mapL.getSize().y * mapPanRatio
+      ]
+      mapL.fitBounds(bounds, {
+        paddingTopLeft,
+        paddingBottomRight
       })
     }
   }, [mapL, mapPanRatio])

From 92bb17161c67a03213a5c7c93015770655cbf9e9 Mon Sep 17 00:00:00 2001
From: PolariTOON <36267812+PolariTOON@users.noreply.github.com>
Date: Tue, 5 Jul 2022 10:01:00 +0200
Subject: [PATCH 3/3] docs: Update the changelog

---
 CHANGELOG.md | 2 ++
 README.md    | 1 +
 2 files changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 26c0de6a..660ffecf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,8 @@
 
 ## 🐛 Bug Fixes
 
+* Vertically center the trip map on mobile when opening it
+
 ## 🔧 Tech
 
 # 0.7.0
diff --git a/README.md b/README.md
index 2bd87f5e..8c5976b9 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,7 @@ $ yarn fixtures
 You can run a migration service to add aggregation data on your timeseries.
 
 ```sh
+$ yarn build
 $ yarn service:timeseriesWithoutAggregateMigration
 ```