map tweaks

src/components/atoms/Exif.module.scss

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

src/components/atoms/ExifMap.tsx

@@ -1,37 +1,24 @@
 import React, { useState } from 'react'
 import Map from 'pigeon-maps'
 import Marker from 'pigeon-marker'
+import useDarkMode from 'use-dark-mode'
 
 const MAPBOX_ACCESS_TOKEN =
   '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) => (
   x: 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 = {
-  // osm: (x, y, z) => {
-  //   const s = String.fromCharCode(97 + ((x + y + z) % 3))
-  //   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)
+  light: mapbox('light-v10', MAPBOX_ACCESS_TOKEN),
+  dark: mapbox('dark-v10', MAPBOX_ACCESS_TOKEN)
 }
 
 export default function ExifMap({
@@ -39,6 +26,11 @@ export default function ExifMap({
 }: {
   gps: { latitude: string; longitude: string }
 }) {
+  const { value } = useDarkMode(false, {
+    classNameDark: 'dark',
+    classNameLight: 'light'
+  })
+  const isDarkMode = value
   const [zoom, setZoom] = useState(12)
 
   const zoomIn = () => {
@@ -51,7 +43,8 @@ export default function ExifMap({
     <Map
       center={[latitude, longitude]}
       zoom={zoom}
-      height={200}
+      height={220}
+      dprs={[1, 2]}
       attribution={false}
       provider={isDarkMode ? providers['dark'] : providers['light']}
       metaWheelZoom={true}