frontend: Make home zone configurable

frontend/src/components/Map/index.js

@@ -8,6 +8,7 @@ import OlGroupLayer from 'ol/layer/Group'
 import OSM from 'ol/source/OSM'
 import proj4 from 'proj4'
 import {register} from 'ol/proj/proj4'
+import {fromLonLat} from 'ol/proj'
 
 // Import styles for open layers + addons
 import 'ol/ol.css'
@@ -116,14 +117,22 @@ function FitView({extent}) {
   return null
 }
 
+const minZoom = config.mapTileset?.minZoom ?? 0
+const maxZoom = config.mapTileset?.maxZoom ?? 18
+const mapHomeZoom = config.mapHome?.zoom ?? 15
+const mapHomeLongitude = config.mapHome?.longitude ?? 9.1797
+const mapHomeLatitude = config.mapHome?.latitude ?? 48.7784
+
 function View({...options}) {
   const map = React.useContext(MapContext)
 
   const view = React.useMemo(
     () =>
       new OlView({
-        minZoom: config.mapTileset?.minZoom ?? 0,
+        minZoom,
-        maxZoom: config.mapTileset?.maxZoom ?? 18,
+        maxZoom,
+        zoom: Math.max(Math.min(mapHomeZoom, maxZoom), minZoom),
+        center: fromLonLat([mapHomeLongitude, mapHomeLatitude]),
         ...options,
       }),
     // eslint-disable-next-line react-hooks/exhaustive-deps

frontend/src/config.dev.json

@@ -12,5 +12,10 @@
     "url": "https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png",
     "minZoom": 0,
     "maxZoom": 18
+  },
+  "mapHome": {
+    "zoom": 15,
+    "longitude": 9.1797,
+    "latitude": 48.7784
   }
 }

frontend/src/config.json.example

@@ -12,5 +12,10 @@
     "url": "https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png",
     "minZoom": 0,
     "maxZoom": 18
+  },
+  "mapHome": {
+    "zoom": 15,
+    "longitude": 9.1797,
+    "latitude": 48.7784
   }
 }

frontend/src/pages/HomePage.tsx

@@ -17,7 +17,7 @@ function WelcomeMap() {
     <Map className={styles.welcomeMap}>
       <RoadsLayer />
       <Map.BaseLayer />
-      <Map.View zoom={13} center={fromLonLat([9.1798, 48.7759])} />
+      <Map.View />
     </Map>
   )
 }

frontend/src/pages/TrackPage/TrackMap.tsx

@@ -221,7 +221,7 @@ export default function TrackMap({trackData, show, ...props}: {trackData: TrackD
         <PointLayer features={trackPointsUntaggedD2} title="Right Untagged" visible={show.rightUnconfirmed} />
       </Map.GroupLayer>
 
-      <Map.View zoom={15} center={fromLonLat([9.1797, 48.7784])} />
+      <Map.View />
       <Map.FitView extent={viewExtent} />
     </Map>
   )