m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-22 09:13:35 +01:00
Code

map tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-10-15 01:47:42 +02:00
parent d7df446c8d
commit ddee5aab52
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 17 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/atoms/Exif.module.scss
View File

@ -2,7 +2,7 @@
@import 'mixins'; @import 'mixins';
.exif { .exif {
margin-top: -($spacer * 1.5); margin-top: -($spacer);
margin-bottom: $spacer * 2; margin-bottom: $spacer * 2;
} }
@ -15,7 +15,6 @@
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
margin-bottom: -3px;
span { span {
display: block; display: block;
@ -63,5 +62,5 @@
@include media-frame; @include media-frame;
overflow: hidden; overflow: hidden;
height: 200px; height: 220px;
} }

37
src/components/atoms/ExifMap.tsx
View File

@ -1,37 +1,24 @@
import React, { useState } from 'react' import React, { useState } from 'react'
import Map from 'pigeon-maps' import Map from 'pigeon-maps'
import Marker from 'pigeon-marker' import Marker from 'pigeon-marker'
import useDarkMode from 'use-dark-mode'
const MAPBOX_ACCESS_TOKEN = const MAPBOX_ACCESS_TOKEN =
'pk.eyJ1Ijoia3JlbWFsaWNpb3VzIiwiYSI6ImNqbTE2NHpkYjJmNm8zcHF4eDVqZzk3ejEifQ.1uwPzM6MSTgL2e1Hxcmuqw' 'pk.eyJ1Ijoia3JlbWFsaWNpb3VzIiwiYSI6ImNqbTE2NHpkYjJmNm8zcHF4eDVqZzk3ejEifQ.1uwPzM6MSTgL2e1Hxcmuqw'
const retina =
typeof window !== 'undefined' && window.devicePixelRatio >= 2 ? '@2x' : ''
const isDarkMode =
typeof window !== 'undefined' && document.body.classList.contains('dark')
const mapbox = (mapboxId: string, accessToken: string) => ( const mapbox = (mapboxId: string, accessToken: string) => (
x: string, x: string,
y: string, y: string,
z: string z: string,
dpr?: number
) => ) =>
`https://api.mapbox.com/styles/v1/mapbox/${mapboxId}/tiles/256/${z}/${x}/${y}${retina}?access_token=${accessToken}` `https://api.mapbox.com/styles/v1/mapbox/${mapboxId}/tiles/256/${z}/${x}/${y}${
dpr >= 2 ? '@2x' : ''
}?access_token=${accessToken}`
const providers = { const providers = {
// osm: (x, y, z) => { light: mapbox('light-v10', MAPBOX_ACCESS_TOKEN),
// const s = String.fromCharCode(97 + ((x + y + z) % 3)) dark: mapbox('dark-v10', MAPBOX_ACCESS_TOKEN)
// return `https://${s}.tile.openstreetmap.org/${z}/${x}/${y}.png`
// },
// wikimedia: (x, y, z) =>
// `https://maps.wikimedia.org/osm-intl/${z}/${x}/${y}${retina}.png`,
// stamen: (x: string, y: string, z: string) =>
// `https://stamen-tiles.a.ssl.fastly.net/terrain/${z}/${x}/${y}${retina}.jpg`,
// streets: mapbox('streets-v10', MAPBOX_ACCESS_TOKEN),
// satellite: mapbox('satellite-streets-v10', MAPBOX_ACCESS_TOKEN),
// outdoors: mapbox('outdoors-v10', MAPBOX_ACCESS_TOKEN),
light: mapbox('light-v9', MAPBOX_ACCESS_TOKEN),
dark: mapbox('dark-v9', MAPBOX_ACCESS_TOKEN)
} }
export default function ExifMap({ export default function ExifMap({
@ -39,6 +26,11 @@ export default function ExifMap({
}: { }: {
gps: { latitude: string; longitude: string } gps: { latitude: string; longitude: string }
}) { }) {
const { value } = useDarkMode(false, {
classNameDark: 'dark',
classNameLight: 'light'
})
const isDarkMode = value
const [zoom, setZoom] = useState(12) const [zoom, setZoom] = useState(12)
const zoomIn = () => { const zoomIn = () => {
@ -51,7 +43,8 @@ export default function ExifMap({
<Map <Map
center={[latitude, longitude]} center={[latitude, longitude]}
zoom={zoom} zoom={zoom}
height={200} height={220}
dprs={[1, 2]}
attribution={false} attribution={false}
provider={isDarkMode ? providers['dark'] : providers['light']} provider={isDarkMode ? providers['dark'] : providers['light']}
metaWheelZoom={true} metaWheelZoom={true}