mirror of https://github.com/kremalicious/blog.git
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import React, { ReactElement, useState } from 'react'
|
|
import { Map } from 'pigeon-maps'
|
|
import Marker from 'pigeon-marker'
|
|
import useDarkMode from '../../hooks/useDarkMode'
|
|
|
|
const mapbox =
|
|
(mapboxId: string) => (x: string, y: string, z: string, dpr: number) =>
|
|
`https://api.mapbox.com/styles/v1/mapbox/${mapboxId}/tiles/256/${z}/${x}/${y}${
|
|
dpr >= 2 ? '@2x' : ''
|
|
}?access_token=${process.env.GATSBY_MAPBOX_ACCESS_TOKEN}`
|
|
|
|
const providers = {
|
|
light: mapbox('light-v10'),
|
|
dark: mapbox('dark-v10')
|
|
}
|
|
|
|
export default function ExifMap({
|
|
gps
|
|
}: {
|
|
gps: { latitude: number; longitude: number }
|
|
}): ReactElement {
|
|
const { isDarkMode } = useDarkMode()
|
|
const [zoom, setZoom] = useState(12)
|
|
|
|
const zoomIn = () => {
|
|
setZoom(Math.min(zoom + 4, 20))
|
|
}
|
|
|
|
const { latitude, longitude } = gps
|
|
|
|
return (
|
|
<Map
|
|
center={[latitude, longitude]}
|
|
zoom={zoom}
|
|
height={220}
|
|
dprs={[1, 2]}
|
|
attribution={false}
|
|
provider={isDarkMode ? providers['dark'] : providers['light']}
|
|
metaWheelZoom={true}
|
|
metaWheelZoomWarning={'META+wheel to zoom'}
|
|
>
|
|
<Marker anchor={[latitude, longitude]} payload={1} onClick={zoomIn} />
|
|
</Map>
|
|
)
|
|
}
|