Data layer toolbar (#1135)

* unidfy crag & boundary components
* close hover card when drawer is active
* data layer toolbar

package.json

@@ -18,7 +18,7 @@
     "@lexical/react": "^0.7.5",
     "@math.gl/web-mercator": "3.6.2",
     "@openbeta/sandbag": "^0.0.51",
-    "@phosphor-icons/react": "^2.0.14",
+    "@phosphor-icons/react": "^2.1.5",
     "@radix-ui/react-alert-dialog": "^1.0.0",
     "@radix-ui/react-dialog": "^1.0.0",
     "@radix-ui/react-dropdown-menu": "^2.0.1",
@@ -48,7 +48,7 @@
     "immer": "^10.0.2",
     "lexical": "^0.7.5",
     "mapbox-gl": "^2.7.0",
-    "maplibre-gl": "^4.1.1",
+    "maplibre-gl": "^4.3.2",
     "nanoid": "^4.0.0",
     "nanoid-dictionary": "^4.3.0",
     "next": "^13.5.6",

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.standard.style}
+        mapStyle={MAP_STYLES.light.style}
         cooperativeGestures
         {...clickableLayer1 != null && clickableLayer2 != null &&
         { interactiveLayerIds: [clickableLayer2, clickableLayer1] }}

src/app/(maps)/components/ProfileMenu.tsx

@@ -8,7 +8,7 @@ import { OnboardingCheck } from '@/components/auth/OnboardingCheck'
 export const ProfileMenu: React.FC = () => {
   return (
     <SessionProvider>
-      <div className='absolute right-4 top-4 z-50'>
+      <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>
           <AuthenticatedProfileNavButton isMobile={false} />

src/components/core/Card.tsx

@@ -10,7 +10,7 @@ export const Card: React.FC<{ children: React.ReactNode, compact?: boolean, bord
     return (
       <div className={
         clx(
-          'card card-compact card-bordered border-base-300/50 overflow-hidden shadow-lg bg-base-100 w-80 max-h-[400px]',
+          'card card-compact card-bordered border-base-300/50 overflow-hidden shadow-lg bg-base-100 w-80 h-full',
           compact ? 'card-compact' : '',
           border ? 'card-bordered border-base-300/50 ' : '',
           className)

src/components/maps/AreaActiveMarker.tsx

@@ -1,16 +1,16 @@
-import { Marker, Source, Layer, LineLayer } from 'react-map-gl'
-import { Point, Polygon } from '@turf/helpers'
+import { Marker } from 'react-map-gl'
+import { Point } from '@turf/helpers'
 import { MapPin } from '@phosphor-icons/react/dist/ssr'
+import { ActiveFeature } from './TileTypes'
 
 /**
  * Highlight selected feature on the map
  */
-export const SelectedFeature: React.FC<{ geometry: Point | Polygon }> = ({ geometry }) => {
-  switch (geometry.type) {
-    case 'Point':
-      return <SelectedPoint geometry={geometry} />
-    case 'Polygon':
-      return <SelectedPolygon geometry={geometry} />
+export const SelectedFeature: React.FC<{ feature: ActiveFeature }> = ({ feature }) => {
+  switch (feature.type) {
+    case 'crag-markers':
+    case 'crag-name-labels':
+      return <SelectedPoint geometry={feature.geometry as Point} />
     default: return null
   }
 }
@@ -19,26 +19,9 @@ const SelectedPoint: React.FC<{ geometry: Point }> = ({ geometry }) => {
   const { coordinates } = geometry
   return (
     <Marker longitude={coordinates[0]} latitude={coordinates[1]}>
-      <MapPin size={36} weight='fill' className='text-accent' />
+      <div className='absolute bottom-0 -translate-x-1/2'>
+        <MapPin size={48} weight='fill' className='text-accent' />
+      </div>
     </Marker>
   )
 }
-
-export const SelectedPolygon: React.FC<{ geometry: Polygon }> = ({ geometry }) => {
-  return (
-    <Source id='selected-polygon' type='geojson' data={geometry}>
-      <Layer {...selectedBoundary} />
-    </Source>
-  )
-}
-
-const selectedBoundary: LineLayer = {
-  id: 'polygon2',
-  type: 'line',
-  paint: {
-    'line-opacity': ['step', ['zoom'], 0.85, 10, 0.5],
-    'line-width': ['step', ['zoom'], 2, 10, 10],
-    'line-color': '#004F6E', // See 'area-cue' in tailwind.config.js
-    'line-blur': 4
-  }
-}

src/components/maps/CardGallery.tsx

@@ -3,7 +3,7 @@ import Image from 'next/image'
 import clx from 'classnames'
 
 import { usePrevNextButtons, PrevButton, NextButton } from '../carousel/useNextPrevButtons'
-import { MediaWithTagsInMapTile } from './GlobalMap'
+import { MediaWithTagsInMapTile } from './TileTypes'
 
 export const CardGallery: React.FC<{ media: MediaWithTagsInMapTile[] }> = () => {
   return (
@@ -25,8 +25,8 @@ export const MiniCarousel: React.FC<{ mediaList: MediaWithTagsInMapTile[] }> = (
   const isSingle = mediaList.length === 1
   return (
     <section className='overflow-hidden relative' ref={emblaRef}>
-      <div className='flex h-28 gap-x-1'>
-        {mediaList.map((m) => (<Slide key={m._id} media={m} isSingle={isSingle} />))}
+      <div className='flex h-40 gap-x-1'>
+        {mediaList.map((m) => (<Slide key={m.mediaUrl} media={m} isSingle={isSingle} />))}
       </div>
       {!isSingle && (
         <div className='absolute top-0 left-0 w-full h-full flex justify-between'>
@@ -46,7 +46,7 @@ export const MiniCarousel: React.FC<{ mediaList: MediaWithTagsInMapTile[] }> = (
 const Slide: React.FC<{ media: MediaWithTagsInMapTile, isSingle: boolean }> = ({ media, isSingle }) => {
   const { mediaUrl, width, height } = media
   return (
-    <div className={clx('grow-0 shrink-0  min-w-0 h-28 bg-base-200',
+    <div className={clx('grow-0 shrink-0  min-w-0 h-40 bg-base-200',
       isSingle ? 'basis-full' : 'basis-5/6'
     )}
     >