frontend: Make tileset and zoom levels configurable (fixes #83)

frontend/src/components/Map/index.js

@@ -12,6 +12,8 @@ import {register} from 'ol/proj/proj4'
 // Import styles for open layers + addons
 import 'ol/ol.css'
 
+import config from 'config.json'
+
 // Prepare projection
 proj4.defs(
   'projLayer1',
@@ -79,7 +81,20 @@ export function Layer({layerClass, getDefaultOptions, children, ...props}) {
 }
 
 export function TileLayer({osm, ...props}) {
-  return <Layer layerClass={OlTileLayer} getDefaultOptions={() => ({source: new OSM(osm)})} {...props} /> }
+  return <Layer layerClass={OlTileLayer} getDefaultOptions={() => ({source: new OSM(osm)})} {...props} />
+}
+
+export function BaseLayer(props) {
+  return (
+    <TileLayer
+      osm={{
+        url: config.mapTileset?.url ?? 'https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png',
+        crossOrigin: null,
+      }}
+      {...props}
+    />
+  )
+}
 
 export function VectorLayer(props) {
   return <Layer layerClass={OlVectorLayer} {...props} />
@@ -107,6 +122,8 @@ function View({...options}) {
   const view = React.useMemo(
     () =>
       new OlView({
+        minZoom: config.mapTileset?.minZoom ?? 0,
+        maxZoom: config.mapTileset?.maxZoom ?? 18,
         ...options,
       }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -127,5 +144,6 @@ Map.GroupLayer = GroupLayer
 Map.TileLayer = TileLayer
 Map.VectorLayer = VectorLayer
 Map.View = View
+Map.BaseLayer = BaseLayer
 
 export default Map

frontend/src/config.dev.json

@@ -7,5 +7,10 @@
     "redirectUri": "http://localhost:3001/redirect"
   },
   "imprintUrl": "https://example.com/imprint",
-  "privacyPolicyUrl": "https://example.com/privacy"
+  "privacyPolicyUrl": "https://example.com/privacy",
+  "mapTileset": {
+    "url": "https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png",
+    "minZoom": 0,
+    "maxZoom": 18
+  }
 }

frontend/src/config.json.example

@@ -7,5 +7,10 @@
     "redirectUri": "https://example.com/redirect"
   },
   "imprintUrl": "https://example.com/imprint",
-  "privacyPolicyUrl": "https://example.com/privacy"
+  "privacyPolicyUrl": "https://example.com/privacy",
+  "mapTileset": {
+    "url": "https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png",
+    "minZoom": 0,
+    "maxZoom": 18
+  }
 }

frontend/src/pages/HomePage.tsx

@@ -16,14 +16,8 @@ function WelcomeMap() {
   return (
     <Map className={styles.welcomeMap}>
       <RoadsLayer />
-      <Map.TileLayer
+      <Map.BaseLayer />
-        osm={{
+      <Map.View zoom={13} center={fromLonLat([9.1798, 48.7759])} />
-          url: 'https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png',
-          crossOrigin: null,
-        }}
-      />
-      {/* <Map.View maxZoom={22} zoom={6} center={fromLonLat([10, 51])} /> */}
-      <Map.View maxZoom={22} zoom={13} center={fromLonLat([9.1798, 48.7759])} />
     </Map>
   )
 }

frontend/src/pages/TrackPage/TrackMap.tsx

@@ -7,6 +7,7 @@ import {Fill, Stroke, Style, Text, Circle} from 'ol/style'
 
 import {Map} from 'components'
 import type {TrackData, TrackPoint} from 'types'
+import config from 'config.json'
 
 const isValidTrackPoint = (point: TrackPoint): boolean => {
   const longitude = point.geometry?.coordinates?.[0]
@@ -201,12 +202,7 @@ export default function TrackMap({trackData, show, ...props}: {trackData: TrackD
 
   return (
     <Map {...props}>
-      <Map.TileLayer
+      <Map.BaseLayer />
-        osm={{
-          url: 'https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png',
-          crossOrigin: null,
-        }}
-      />
       <Map.VectorLayer
         visible
         updateWhileAnimating={false}
@@ -225,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 maxZoom={22} zoom={15} center={fromLonLat([9.1797, 48.7784])} />
+      <Map.View zoom={15} center={fromLonLat([9.1797, 48.7784])} />
       <Map.FitView extent={viewExtent} />
     </Map>
   )