chore: migrate to openfreemap and sentinel2 basemaps, fix fonts and dark mode (#1402)

clintonlunn · web-flow · commit 9f46eed35e7d · 2025-11-10T11:24:23.000-07:00
diff --git a/.env b/.env
@@ -34,9 +34,6 @@ NEXT_PUBLIC_TYPESENSE_API_KEY=bCGIB4sHsJRy06NFjZLtxKIMgr4aO0tX
 # Mapbox Geocoder token
 NEXT_PUBLIC_MAPBOX_API_KEY=pk.eyJ1Ijoib3BlbmJldGFwcm9qZWN0IiwiYSI6ImNsdThtb2kzMDAwbmcya3Fubmk4cXI1MXEifQ.b1UScIUV2CFR1oX0MD2goQ
 
-# Maptiler API Key
-NEXT_PUBLIC_MAPTILER_API_KEY=hIKQu6hZZpmnp1fhU386
-
 # Discord invite
 NEXT_PUBLIC_DISCORD_INVITE=https://discord.gg/a6vuuTQxS8
 
diff --git a/public/images/map-thumbnails/dark.webp b/public/images/map-thumbnails/dark.webp
diff --git a/public/images/map-thumbnails/light.webp b/public/images/map-thumbnails/light.webp
diff --git a/public/images/map-thumbnails/outdoor.webp b/public/images/map-thumbnails/outdoor.webp
diff --git a/public/images/map-thumbnails/satellite.webp b/public/images/map-thumbnails/satellite.webp
diff --git a/src/app/(maps)/components/ProfileMenu.tsx b/src/app/(maps)/components/ProfileMenu.tsx
@@ -9,7 +9,7 @@ export const ProfileMenu: React.FC = () => {
     <SessionProvider>
       <div className='absolute right-4 top-4 z-40'>
         <nav className='flex items-center gap-2'>
-          <Link className='btn glass' href='/'><House size={18} />Home</Link>
+          <Link className='btn bg-base-200 hover:bg-base-300' href='/'><House size={18} />Home</Link>
           <AuthenticatedProfileNavButton isMobile={false} />
         </nav>
       </div>
diff --git a/src/components/maps/AreaMap.tsx b/src/components/maps/AreaMap.tsx
@@ -4,7 +4,7 @@ import dynamic from 'next/dynamic'
 import { lineString } from '@turf/helpers'
 import lineToPolygon from '@turf/line-to-polygon'
 
-import { AreaMetadataType, AreaType } from '../../js/types'
+import { AreaMetadataType, AreaType } from '@/js/types'
 import { GlobalMap } from './GlobalMap'
 
 type ChildArea = Pick<AreaType, 'uuid' | 'areaName'> & { metadata: Pick<AreaMetadataType, 'lat' | 'lng' | 'leaf' | 'bbox' | 'polygon'> }
diff --git a/src/components/maps/CardGallery.tsx b/src/components/maps/CardGallery.tsx
@@ -2,8 +2,8 @@ import useEmblaCarousel from 'embla-carousel-react'
 import Image from 'next/image'
 import clx from 'classnames'
 
-import { usePrevNextButtons, PrevButton, NextButton } from '../carousel/useNextPrevButtons'
-import { MediaWithTagsInMapTile } from './TileTypes'
+import { usePrevNextButtons, PrevButton, NextButton } from '@/components/carousel/useNextPrevButtons'
+import { MediaWithTagsInMapTile } from '@/components/maps/TileTypes'
 
 export const CardGallery: React.FC<{ media: MediaWithTagsInMapTile[] }> = () => {
   return (
diff --git a/src/components/maps/CoordinatePickerMap.tsx b/src/components/maps/CoordinatePickerMap.tsx
@@ -1,6 +1,7 @@
 'use client'
 import React, { useCallback, useState, useRef, useEffect } from 'react'
 import { Map, ScaleControl, NavigationControl, Marker, GeolocateControl, GeolocateResultEvent, MapLayerMouseEvent, MapEvent } from 'react-map-gl/maplibre'
+import type { StyleSpecification } from 'maplibre-gl'
 import dynamic from 'next/dynamic'
 import { useDebouncedCallback } from 'use-debounce'
 import { MAP_STYLES, type MapStyles } from '@/components/maps/MapSelector'
@@ -34,7 +35,7 @@ export const CoordinatePickerMap: React.FC<CoordinatePickerMapProps> = ({ onCoor
   })
   const { initialCoordinate, newSelectedCoordinate } = coord
   const { isMobile } = useResponsive()
-  const [mapStyle, setMapStyle] = useState<string>(MAP_STYLES.light.style)
+  const [mapStyle, setMapStyle] = useState<string | StyleSpecification>(MAP_STYLES.light.style)
   const triggerButtonRef = useRef<HTMLButtonElement>(null)
   const { watch, setValue } = useFormContext()
 
diff --git a/src/components/maps/GlobalMap.tsx b/src/components/maps/GlobalMap.tsx
@@ -2,17 +2,18 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Map, FullscreenControl, ScaleControl, NavigationControl, MapLayerMouseEvent, ViewStateChangeEvent, GeolocateControl } from 'react-map-gl/maplibre'
 import * as maplibregl from 'maplibre-gl'
+import type { StyleSpecification } from 'maplibre-gl'
 import { MapLibreEvent } from 'maplibre-gl'
 import dynamic from 'next/dynamic'
-import { MAP_STYLES, type MapStyles } from './MapSelector'
-import { Drawer } from './TileHandlers/Drawer'
-import { HoverCard } from './TileHandlers/HoverCard'
-import { OBCustomLayers } from './OBCustomLayers'
-import { tileToFeature } from './utils'
-import { ActiveFeature, TileProps } from './TileTypes'
-import MapLayersSelector from './MapLayersSelector'
-import { MapToolbar } from './MapToolbar'
-import { SelectedFeature } from './AreaActiveMarker'
+import { MAP_STYLES, type MapStyles } from '@/components/maps/MapSelector'
+import { Drawer } from '@/components/maps/TileHandlers/Drawer'
+import { HoverCard } from '@/components/maps/TileHandlers/HoverCard'
+import { OBCustomLayers } from '@/components/maps/OBCustomLayers'
+import { tileToFeature } from '@/components/maps/utils'
+import { ActiveFeature, TileProps } from '@/components/maps/TileTypes'
+import MapLayersSelector from '@/components/maps/MapLayersSelector'
+import { MapToolbar } from '@/components/maps/MapToolbar'
+import { SelectedFeature } from '@/components/maps/AreaActiveMarker'
 import { useRouter } from 'next/navigation'
 import { useUrlParams } from '@/js/hooks/useUrlParams'
 
@@ -60,7 +61,8 @@ export const GlobalMap: React.FC<GlobalMapProps> = ({
   const [hoverInfo, setHoverInfo] = useState<ActiveFeature | null>(null)
   const [mapInstance, setMapInstance] = useState<maplibregl.Map | null>(null)
   const [cursor, setCursor] = useState<string>('default')
-  const [mapStyle, setMapStyle] = useState<string>(MAP_STYLES.light.style)
+  const [mapStyle, setMapStyle] = useState<string | StyleSpecification>(MAP_STYLES.light.style)
+  const [currentMapType, setCurrentMapType] = useState<keyof MapStyles>('light')
   const [isSourceLoaded, setIsSourceLoaded] = useState(false)
   const [dataLayersDisplayState, setDataLayersDisplayState] = useState<DataLayersDisplayState>({
     areaBoundaries: false,
@@ -178,6 +180,7 @@ export const GlobalMap: React.FC<GlobalMapProps> = ({
   const updateMapLayer = (key: keyof MapStyles): void => {
     const style = MAP_STYLES[key]
     setMapStyle(style.style)
+    setCurrentMapType(key)
   }
 
   const findAreaById = useCallback((map: maplibregl.Map, areaId: string) => {
@@ -239,7 +242,7 @@ export const GlobalMap: React.FC<GlobalMapProps> = ({
         <MapLayersSelector emit={updateMapLayer} />
         <ScaleControl unit='imperial' style={{ marginBottom: 10 }} position='bottom-left' />
         <ScaleControl unit='metric' style={{ marginBottom: 0 }} position='bottom-left' />
-        <OBCustomLayers layersState={dataLayersDisplayState} />
+        <OBCustomLayers layersState={dataLayersDisplayState} mapType={currentMapType} />
         {showFullscreenControl && <FullscreenControl />}
         <NavigationControl showCompass={false} position='bottom-right' />
         <GeolocateControl
diff --git a/src/components/maps/MapLayersSelector.tsx b/src/components/maps/MapLayersSelector.tsx
@@ -23,14 +23,11 @@ const MapLayersSelector: React.FC<Props> = ({ emit }) => {
       <Popover.Root>
         <Popover.Trigger asChild>
           <button className='absolute bottom-20 left-3 bg-base-100 rounded p-1.5 shadow'>
-            <span>
-              <img
-                className='w-12 h-12 md:w-16 md:h-16 rounded border-[1px] border-base-300'
-                src={mapImgUrl}
-                alt='Currently selected maptiler layer'
-              />
-              <span className={`break-word text-[0.65rem] absolute bottom-2 left-1/2 -translate-x-1/2 ${mapName === 'satellite' ? 'text-base-100' : ''}`}>{mapName}</span>
-            </span>
+            <img
+              className='w-12 h-12 md:w-16 md:h-16 rounded border-[1px] border-base-300'
+              src={mapImgUrl}
+              alt='Currently selected map style'
+            />
           </button>
         </Popover.Trigger>
         <Popover.Portal>
@@ -45,7 +42,7 @@ const MapLayersSelector: React.FC<Props> = ({ emit }) => {
                       <img
                         className={`w-12 h-12 md:w-16 md:h-16 rounded col-span-1 shadow border-base-300 ${mapKey === mapName ? 'border-2' : ''}`}
                         src={imgUrl}
-                        alt='Currently selected maptiler layer'
+                        alt={`${key} map style`}
                       />
                       <span className='col-span-1 text-[0.65rem] '>{key}</span>
                     </span>
diff --git a/src/components/maps/MapSelector.tsx b/src/components/maps/MapSelector.tsx
@@ -1,37 +1,43 @@
-const MAPTILER_KEY = process.env.NEXT_PUBLIC_MAPTILER_API_KEY !== undefined ? process.env.NEXT_PUBLIC_MAPTILER_API_KEY : 'key'
-export const MAP_STYLES: MapStyles = {
+import type { StyleSpecification } from 'maplibre-gl'
+import darkMatterStyle from '@/components/maps/styles/dark-matter.json'
+
+const satelliteStyle: StyleSpecification = {
+  version: 8,
+  glyphs: 'https://tiles.openfreemap.org/fonts/{fontstack}/{range}.pbf',
+  sources: {
+    satellite: {
+      type: 'raster',
+      tiles: [
+        'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2020_3857/default/GoogleMapsCompatible/{z}/{y}/{x}.jpg'
+      ],
+      tileSize: 256,
+      attribution: '<a target="_blank" href="https://s2maps.eu">Sentinel-2 cloudless - https://s2maps.eu</a> by <a href="https://eox.at/">EOX IT Services GmbH</a>'
+    }
+  },
+  layers: [{
+    id: 'satellite',
+    type: 'raster',
+    source: 'satellite'
+  }]
+}
+
+export const MAP_STYLES = {
   outdoor: {
-    style: `https://api.maptiler.com/maps/outdoor-v2/style.json?key=${MAPTILER_KEY}`,
-    imgUrl: 'https://docs.maptiler.com/sdk-js/api/map-styles/img/style-outdoor-v2.jpeg'
+    style: 'https://tiles.openfreemap.org/styles/liberty',
+    imgUrl: '/images/map-thumbnails/outdoor.webp'
   },
   light: {
-    style: `https://api.maptiler.com/maps/dataviz/style.json?key=${MAPTILER_KEY}`,
-    imgUrl: 'https://docs.maptiler.com/sdk-js/api/map-styles/img/style-bright-v2-pastel.jpeg'
+    style: 'https://tiles.openfreemap.org/styles/positron',
+    imgUrl: '/images/map-thumbnails/light.webp'
   },
   dark: {
-    style: `https://api.maptiler.com/maps/dataviz-dark/style.json?key=${MAPTILER_KEY}`,
-    imgUrl: 'https://docs.maptiler.com/sdk-js/api/map-styles/img/style-dataviz-dark.jpeg'
+    style: darkMatterStyle as StyleSpecification,
+    imgUrl: '/images/map-thumbnails/dark.webp'
   },
   satellite: {
-    style: `https://api.maptiler.com/maps/satellite/style.json?key=${MAPTILER_KEY}`,
-    imgUrl: 'https://docs.maptiler.com/sdk-js/api/map-styles/img/style-satellite.jpeg'
-  }
-}
-export interface MapStyles {
-  outdoor: {
-    style: string
-    imgUrl: string
-  }
-  light: {
-    style: string
-    imgUrl: string
-  }
-  dark: {
-    style: string
-    imgUrl: string
-  }
-  satellite: {
-    style: string
-    imgUrl: string
+    style: satelliteStyle,
+    imgUrl: '/images/map-thumbnails/satellite.webp'
   }
 }
+
+export type MapStyles = typeof MAP_STYLES
diff --git a/src/components/maps/OBCustomLayers.tsx b/src/components/maps/OBCustomLayers.tsx
@@ -1,16 +1,22 @@
 import { Source, Layer } from 'react-map-gl'
-import { DataLayersDisplayState } from './GlobalMap'
+import { DataLayersDisplayState } from '@/components/maps/GlobalMap'
+import { type MapStyles } from '@/components/maps/MapSelector'
 
 interface OBCustomLayersProps {
   layersState: DataLayersDisplayState
+  mapType: keyof MapStyles
 }
 /**
  * OpenBeta custom map tiles.
  * - Crags: crag markers and labels
  * - Areas: polygon boundaries for areas
  */
-export const OBCustomLayers: React.FC<OBCustomLayersProps> = ({ layersState }) => {
+export const OBCustomLayers: React.FC<OBCustomLayersProps> = ({ layersState, mapType }) => {
   const { areaBoundaries, crags } = layersState
+
+  // Use high-contrast white text on dark/satellite maps
+  const isDarkMap = mapType === 'dark' || mapType === 'satellite'
+
   return (
     <>
       <Source
@@ -71,30 +77,72 @@ export const OBCustomLayers: React.FC<OBCustomLayersProps> = ({ layersState }) =
         maxzoom={11}
         attribution='© OpenBeta contributors'
       >
+        <Layer
+          id='crag-markers' // can be any unique id. Must match the id in ReactMapGL.interactiveLayerIds
+          type='circle'
+          source-layer='crags' // layer name in the vector tileset
+          paint={{
+            'circle-radius': ['interpolate', ['linear'], ['zoom'], 6, 3, 18, 8],
+            'circle-color': ['match', ['string', ['get', 'media']], ['[]'], '#0c4a6e', '#881337'],
+            'circle-stroke-width': 1,
+            'circle-stroke-color': '#ffffff'
+          }}
+          layout={{
+            visibility: crags ? 'visible' : 'none'
+          }}
+        />
         <Layer
           id='crag-name-labels' // can be any unique id. Must match the id in ReactMapGL.interactiveLayerIds
           type='symbol'
           source-layer='crags' // layer name in the vector tileset
           layout={{
-            'icon-anchor': 'center',
-            'text-field': ['get', 'name'],
-            'text-size': { stops: [[8, 10], [12, 12]] },
-            'text-font': ['Segoe UI', 'Roboto', 'Ubuntu', 'Helvetica Neue', 'Oxygen', 'Cantarell', 'sans-serif'],
+            'text-field': ['coalesce', ['get', 'name'], ['get', 'areaName']],
+            'text-size': [
+              'interpolate',
+              ['linear'],
+              ['zoom'],
+              8,
+              ['case',
+                ['<', ['length', ['get', 'ancestors']], 120], 19,
+                ['<', ['length', ['get', 'ancestors']], 200], 16,
+                ['<', ['length', ['get', 'ancestors']], 300], 14,
+                11
+              ],
+              12,
+              ['case',
+                ['<', ['length', ['get', 'ancestors']], 120], 21,
+                ['<', ['length', ['get', 'ancestors']], 200], 20,
+                ['<', ['length', ['get', 'ancestors']], 300], 16,
+                14
+              ]
+            ],
+            'text-font': ['Noto Sans Regular'],
             'text-variable-anchor': ['bottom', 'top', 'left', 'right'],
             'text-radial-offset': ['interpolate', ['linear'], ['zoom'], 16, 0.5],
             'text-optional': true,
-            'symbol-sort-key': ['match', ['string', ['get', 'media']], ['[]'], 1, 0],
-            'icon-image': 'circle-dot',
-            'icon-size': ['interpolate', ['linear'], ['zoom'], 6, 0.5, 18, 1],
+            'symbol-sort-key': ['length', ['get', 'ancestors']],
             visibility: crags ? 'visible' : 'none'
           }}
-          paint={{
-            'icon-color': ['match', ['string', ['get', 'media']], ['[]'], '#0c4a6e', '#881337'],
-            'text-halo-blur': 1,
-            'text-halo-width': 2,
-            'text-color': ['match', ['string', ['get', 'media']], ['[]'], '#0c4a6e', '#881337'],
-            'text-halo-color': '#f3f4f6'
-          }}
+          paint={isDarkMap
+            ? {
+                'text-halo-blur': 0.5,
+                'text-halo-width': 2,
+                'text-color': '#ffffff',
+                'text-halo-color': '#1a1a1a'
+              }
+            : mapType === 'light'
+              ? {
+                  'text-halo-blur': 0.5,
+                  'text-halo-width': 2.5,
+                  'text-color': ['match', ['string', ['get', 'media']], ['[]'], '#1e40af', '#be123c'],
+                  'text-halo-color': '#ffffff'
+                }
+              : {
+                  'text-halo-blur': 0.5,
+                  'text-halo-width': 2,
+                  'text-color': ['match', ['string', ['get', 'media']], ['[]'], '#0c4a6e', '#881337'],
+                  'text-halo-color': '#ffffff'
+                }}
         />
       </Source>
     </>
diff --git a/src/components/maps/TileHandlers/AreaContent.tsx b/src/components/maps/TileHandlers/AreaContent.tsx
@@ -1,9 +1,9 @@
 import Link from 'next/link'
-import { CragGroupFeatureProps, SubArea } from '../TileTypes'
+import { CragGroupFeatureProps, SubArea } from '@/components/maps/TileTypes'
 import { getAreaPageFriendlyUrl } from '@/js/utils'
 import { EntityIcon } from '@/app/(default)/editArea/[slug]/general/components/AreaItem'
 import { BaseDrawerContent } from './Drawer'
-import { MiniCarousel } from '../CardGallery'
+import { MiniCarousel } from '@/components/maps/CardGallery'
 
 export const CUSTOM_CLASS = 'max-h-screen lg:w-[420px] rounded-none'
 
diff --git a/src/components/maps/TileHandlers/CragContent.tsx b/src/components/maps/TileHandlers/CragContent.tsx
@@ -1,9 +1,9 @@
 import Link from 'next/link'
-import { CragFeatureProperties, SimpleClimbType } from '../TileTypes'
+import { CragFeatureProperties, SimpleClimbType } from '@/components/maps/TileTypes'
 import { getAreaPageFriendlyUrl } from '@/js/utils'
 import { EntityIcon } from '@/app/(default)/editArea/[slug]/general/components/AreaItem'
 import { BaseDrawerContent } from './Drawer'
-import { MiniCarousel } from '../CardGallery'
+import { MiniCarousel } from '@/components/maps/CardGallery'
 import { SharePageURLButton } from '@/app/(default)/components/SharePageURLButton'
 import { usePathname } from 'next/navigation'
 
diff --git a/src/components/maps/TileHandlers/Drawer.tsx b/src/components/maps/TileHandlers/Drawer.tsx
@@ -2,9 +2,9 @@ import { ReactNode } from 'react'
 import * as Popover from '@radix-ui/react-popover'
 
 import { Card } from '@/components/core/Card'
-import { ActiveFeature, CragFeatureProperties, CragGroupFeatureProps } from '../TileTypes'
-import { CragDrawerContent } from './CragContent'
-import { AreaDrawerContent } from './AreaContent'
+import { ActiveFeature, CragFeatureProperties, CragGroupFeatureProps } from '@/components/maps/TileTypes'
+import { CragDrawerContent } from '@/components/maps/TileHandlers/CragContent'
+import { AreaDrawerContent } from '@/components/maps/TileHandlers/AreaContent'
 
 /**
  * Side drawer panel
diff --git a/src/components/maps/TileHandlers/HoverCard.tsx b/src/components/maps/TileHandlers/HoverCard.tsx
@@ -1,7 +1,7 @@
 import * as Popover from '@radix-ui/react-popover'
-import { Card } from '../../core/Card'
-import { ActiveFeature, CragFeatureProperties, CragGroupFeatureProps } from '../TileTypes'
-import { MiniCarousel } from '../CardGallery'
+import { Card } from '@/components/core/Card'
+import { ActiveFeature, CragFeatureProperties, CragGroupFeatureProps } from '@/components/maps/TileTypes'
+import { MiniCarousel } from '@/components/maps/CardGallery'
 import { AreaHoverCardContent } from './AreaContent'
 import { CragHoverCardContent } from './CragContent'
 
diff --git a/src/components/maps/styles/dark-matter.json b/src/components/maps/styles/dark-matter.json
diff --git a/src/components/maps/ui/PieIcon.tsx b/src/components/maps/ui/PieIcon.tsx
