frontend: Fix attributions and reuse map code

frontend/src/pages/HomePage.tsx

@@ -7,36 +7,12 @@ import {map, switchMap} from 'rxjs/operators'
 
 import api from 'api'
 import {Stats, Page} from 'components'
-import {useConfig, MapSource} from 'config'
 
 import {TrackListItem} from './TracksPage'
+import {RoadsMap} from './MapPage'
 import styles from './HomePage.module.scss'
 
 import 'ol/ol.css'
-import {obsRoads} from '../mapstyles'
-import ReactMapGl from 'react-map-gl'
-
-function WelcomeMap({mapSource}: {mapSource: MapSource}) {
-  const mapStyle = React.useMemo(() => obsRoads(mapSource), [mapSource])
-  const config = useConfig()
-  const [viewport, setViewport] = React.useState({
-    longitude: 0,
-    latitude: 0,
-    zoom: 0,
-  })
-
-  React.useEffect(() => {
-    if (config?.mapHome) {
-      setViewport(config.mapHome)
-    }
-  }, [config])
-
-  return (
-    <div className={styles.welcomeMap}>
-      <ReactMapGl mapStyle={mapStyle} width="100%" height="100%" onViewportChange={setViewport} {...viewport} />
-    </div>
-  )
-}
 
 function MostRecentTrack() {
   const track: Track | null = useObservable(
@@ -67,14 +43,14 @@ function MostRecentTrack() {
 }
 
 export default function HomePage() {
-  const {obsMapSource: mapSource} = useConfig() || {}
-
   return (
     <Page>
       <Grid stackable>
         <Grid.Row>
           <Grid.Column width={10}>
-            {mapSource ?  <WelcomeMap {...{mapSource}} /> : null}
+            <div className={styles.welcomeMap}>
+              <RoadsMap />
+            </div>
           </Grid.Column>
           <Grid.Column width={6}>
             <Stats />

frontend/src/pages/MapPage.tsx

@@ -9,9 +9,9 @@ import styles from './MapPage.module.scss'
 
 import 'ol/ol.css'
 import {obsRoads} from '../mapstyles'
-import ReactMapGl from 'react-map-gl'
+import ReactMapGl, {AttributionControl } from 'react-map-gl'
 
-function BigMap({mapSource, config}: {mapSource: string ,config: Config}) {
+function RoadsMapInner({mapSource, config}: {mapSource: string ,config: Config}) {
   const mapStyle = React.useMemo(() => mapSource && obsRoads(mapSource), [mapSource])
   const [viewport, setViewport] = React.useState({
     longitude: 0,
@@ -30,22 +30,34 @@ function BigMap({mapSource, config}: {mapSource: string ,config: Config}) {
   }
 
   return (
-    <div className={styles.mapContainer}>
+    <ReactMapGl mapStyle={mapStyle} width="100%" height="100%" onViewportChange={setViewport} {...viewport}>
-      <ReactMapGl mapStyle={mapStyle} width="100%" height="100%" onViewportChange={setViewport} {...viewport} />
+      <AttributionControl style={{right: 0, bottom: 0}} customAttribution={[
-    </div>
+        '<a href="https://openstreetmap.org/copyright" target="_blank" rel="nofollow noopener">© OpenStreetMap contributors</a>',
+        '<a href="https://openmaptiles.org/" target="_blank" rel="nofollow noopener">© OpenMapTiles</a>',
+        '<a href="https://openbikesensor.org/" target="_blank" rel="nofollow noopener">© OpenBikeSensor</a>',
+      ]} />
+    </ReactMapGl>
   )
 }
 
-export default function MapPage() {
+export function RoadsMap(props) {
   const config = useConfig() || {}
   if (!config) return null;
   const {obsMapSource: mapSource} = config
 
   if (!mapSource) return null;
 
+  return (
+    <RoadsMapInner {...{mapSource, config}} {...props} />
+  )
+}
+
+export default function MapPage() {
   return (
     <Page fullScreen>
-      <BigMap {...{mapSource, config}} />
+      <div className={styles.mapContainer}>
+        <RoadsMap />
+      </div>
     </Page>
   )
 }