diff --git a/frontend/src/components/Map/index.js b/frontend/src/components/Map/index.js index f6b7ee8..fc786ed 100644 --- a/frontend/src/components/Map/index.js +++ b/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 ({source: new OSM(osm)})} {...props} /> } + return ({source: new OSM(osm)})} {...props} /> +} + +export function BaseLayer(props) { + return ( + + ) +} export function VectorLayer(props) { return @@ -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 diff --git a/frontend/src/config.dev.json b/frontend/src/config.dev.json index 3f101af..6ba6fe9 100644 --- a/frontend/src/config.dev.json +++ b/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 + } } diff --git a/frontend/src/config.json.example b/frontend/src/config.json.example index 8ea08fb..43f889c 100644 --- a/frontend/src/config.json.example +++ b/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 + } } diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx index 8c53fad..0cdbcba 100644 --- a/frontend/src/pages/HomePage.tsx +++ b/frontend/src/pages/HomePage.tsx @@ -16,14 +16,8 @@ function WelcomeMap() { return ( - - {/* */} - + + ) } diff --git a/frontend/src/pages/TrackPage/TrackMap.tsx b/frontend/src/pages/TrackPage/TrackMap.tsx index 1ef2504..0e68d6e 100644 --- a/frontend/src/pages/TrackPage/TrackMap.tsx +++ b/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 ( - + - + )