pub-solar/obs-portal
5
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

frontend: Fix attributions and reuse map code

Browse source
This commit is contained in:
Paul Bienkowski 2021-11-21 17:22:39 +01:00
parent 7add8caaa1
commit f54fe701e7
2 changed files with 23 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
frontend/src/pages/HomePage.tsx
View file

@ -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 />

26
frontend/src/pages/MapPage.tsx
View file

@ -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} />
</div>
<ReactMapGl mapStyle={mapStyle} width="100%" height="100%" onViewportChange={setViewport} {...viewport}>
<AttributionControl style={{right: 0, bottom: 0}} customAttribution={[
'<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>
)
}