Map layers selector #1108 (#1118)

* add functionality for switching layer styles
* apply satellite and make color switch to white if satellite is picked
* implement key outsourcing, renaming map style names
* change from HoverCard to PopOver component
* change layout to vertical and add some breakpoints

.env

@@ -32,6 +32,9 @@ NEXT_PUBLIC_TYPESENSE_API_KEY=nBvjNVojLn792SX9sOLhLlpQ7BQJo5ok
 # Mapbox Geocoder token
 NEXT_PUBLIC_MAPBOX_API_KEY=pk.eyJ1IjoibWFwcGFuZGFzIiwiYSI6ImNsZG1wcnBhZTA5eXozb3FnZTY1bHg4bHcifQ.7LJGRLFeLUbntAt5twiDiw
 
+# Maptiler API Key
+NEXT_PUBLIC_MAPTILER_API_KEY=ejjLkz58mUNz9TgNs0Ed
+
 # Discord invite
 NEXT_PUBLIC_DISCORD_INVITE=https://discord.gg/a6vuuTQxS8
 

src/app/(default)/components/recent/RecentContributionsMap.tsx

@@ -87,7 +87,7 @@ export const RecentContributionsMap: React.FC<{ history: ChangesetType[] }> = ({
     <div className='relative w-full h-full'>
       <Map
         reuseMaps
-        mapStyle={MAP_STYLES.dataviz}
+        mapStyle={MAP_STYLES.standard.style}
         cooperativeGestures
         {...clickableLayer1 != null && clickableLayer2 != null &&
         { interactiveLayerIds: [clickableLayer2, clickableLayer1] }}

src/components/maps/GlobalMap.tsx

@@ -5,13 +5,14 @@ import maplibregl, { MapLibreEvent } from 'maplibre-gl'
 import { Point, Polygon } from '@turf/helpers'
 import dynamic from 'next/dynamic'
 
-import { MAP_STYLES } from './MapSelector'
+import { MAP_STYLES, type MapStyles } from './MapSelector'
 import { AreaInfoDrawer } from './AreaInfoDrawer'
 import { AreaInfoHover } from './AreaInfoHover'
 import { SelectedFeature } from './AreaActiveMarker'
 import { OBCustomLayers } from './OBCustomLayers'
 import { AreaType, ClimbType, MediaWithTags } from '@/js/types'
 import { TileProps, transformTileProps } from './utils'
+import MapLayersSelector from './MapLayersSelector'
 
 export type SimpleClimbType = Pick<ClimbType, 'id' | 'name' | 'type'>
 
@@ -48,6 +49,7 @@ export const GlobalMap: React.FC<GlobalMapProps> = ({
   const [selected, setSelected] = useState<Point | Polygon | null>(null)
   const [mapInstance, setMapInstance] = useState<MapInstance | null>(null)
   const [cursor, setCursor] = useState<string>('default')
+  const [mapStyle, setMapStyle] = useState<string>(MAP_STYLES.standard.style)
 
   const onLoad = useCallback((e: MapLibreEvent) => {
     if (e.target == null) return
@@ -106,6 +108,11 @@ export const GlobalMap: React.FC<GlobalMapProps> = ({
     }
   }, [mapInstance])
 
+  const updateMapLayer = (key: keyof MapStyles): void => {
+    const style = MAP_STYLES[key]
+    setMapStyle(style.style)
+  }
+
   return (
     <div className='relative w-full h-full'>
       <Map
@@ -123,11 +130,12 @@ export const GlobalMap: React.FC<GlobalMapProps> = ({
           setCursor('default')
         }}
         onClick={onClick}
-        mapStyle={MAP_STYLES.dataviz}
+        mapStyle={mapStyle}
         cursor={cursor}
         cooperativeGestures={showFullscreenControl}
         interactiveLayerIds={['crags', 'crag-group-boundaries']}
       >
+        <MapLayersSelector emit={updateMapLayer} />
         <ScaleControl unit='imperial' style={{ marginBottom: 10 }} position='bottom-left' />
         <ScaleControl unit='metric' style={{ marginBottom: 0 }} position='bottom-left' />
 

src/components/maps/MapLayersSelector.tsx

@@ -0,0 +1,63 @@
+import * as Popover from '@radix-ui/react-popover'
+import { MAP_STYLES, type MapStyles } from './MapSelector'
+import { useState } from 'react'
+
+interface Props {
+  emit: (key: keyof MapStyles) => void
+}
+
+const MapLayersSelector: React.FC<Props> = ({ emit }) => {
+  const [mapImgUrl, setMapImgUrl] = useState<string>(MAP_STYLES.standard.imgUrl)
+  const [mapName, setMapName] = useState<string>('standard')
+
+  const emitMap = (key: string): void => {
+    const styleKey = key as keyof MapStyles
+    const imgUrl = MAP_STYLES[styleKey].imgUrl
+
+    setMapName(key)
+    setMapImgUrl(imgUrl)
+    emit(styleKey)
+  }
+  return (
+    <>
+      <Popover.Root>
+        <Popover.Trigger asChild>
+          <button className='absolute bottom-20 left-3 bg-white rounded p-1.5 shadow'>
+            <span>
+              <img
+                className='w-12 h-12 md:w-16 md:h-16 rounded border-[1px] border-slate-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-white' : ''}`}>{mapName}</span>
+            </span>
+          </button>
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content className=' pt-1.5 bg-white rounded grid grid-cols-1' side='top' sideOffset={20}>
+            <button className='cursor-pointer col-span-1'>
+              {Object.keys(MAP_STYLES).map((key) => {
+                const mapKey = key as keyof typeof MAP_STYLES
+                const { imgUrl } = MAP_STYLES[mapKey]
+                return (
+                  <div className='px-1.5' key={key} onClick={() => emitMap(key)}>
+                    <span className='grid grid-cols-1 justify-items-center'>
+                      <img
+                        className='w-12 h-12 md:w-16 md:h-16 rounded col-span-1 shadow border-[1px] border-slate-300'
+                        src={imgUrl}
+                        alt='Currently selected maptiler layer'
+                      />
+                      <span className='col-span-1 text-[0.65rem] '>{key}</span>
+                    </span>
+                  </div>
+                )
+              })}
+            </button>
+            <Popover.Arrow className='fill-[white]' />
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+    </>
+  )
+}
+export default MapLayersSelector

src/components/maps/MapSelector.tsx

@@ -1,4 +1,37 @@
-export const MAP_STYLES = {
-  outdoor: 'https://api.maptiler.com/maps/outdoor-v2/style.json?key=ejjLkz58mUNz9TgNs0Ed',
-  dataviz: 'https://api.maptiler.com/maps/dataviz/style.json?key=ejjLkz58mUNz9TgNs0Ed'
+const MAPTILER_KEY = process.env.NEXT_PUBLIC_MAPTILER_API_KEY !== undefined ? process.env.NEXT_PUBLIC_MAPTILER_API_KEY : 'key'
+export const MAP_STYLES: MapStyles = {
+  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'
+  },
+  minimal: {
+    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'
+  },
+  standard: {
+    style: `https://api.maptiler.com/maps/basic/style.json?key=${MAPTILER_KEY}`,
+    imgUrl: 'https://docs.maptiler.com/sdk-js/api/map-styles/img/style-basic-v2.jpeg'
+  },
+  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
+  }
+  minimal: {
+    style: string
+    imgUrl: string
+  }
+  standard: {
+    style: string
+    imgUrl: string
+  }
+  satellite: {
+    style: string
+    imgUrl: string
+  }
 }