feat: add search and select functionality for crags #1184

src/components/maps/GlobalMap.tsx

@@ -213,6 +213,26 @@ export const GlobalMap: React.FC<GlobalMapProps> = ({
     }
   }, [mapInstance, isSourceLoaded, initialAreaId, findAreaById])
 
+  const [allCrags, setAllCrags] = useState<ActiveFeature[]>([])
+  useEffect(() => {
+    if (!mapInstance) return
+  const features = mapInstance.querySourceFeatures('crags', { sourceLayer: 'crags' })
+  const cragsFeatures = features
+    .map(f => tileToFeature('crag-name-labels', {x:0,y:0}, f.geometry, f.properties as TileProps, mapInstance))
+    .filter((f): f is ActiveFeature => f !== null) // фильтруем null и сохраняем тип
+  setAllCrags(cragsFeatures)
+  }, [mapInstance])
+
+  const highlightCrag = (crag: ActiveFeature) => {
+    setClickInfo(prev => {
+      if (prev) setActiveFeatureVisual(prev, { selected: false, hover: false })
+      setActiveFeatureVisual(crag, { selected: true, hover: false })
+      return crag
+    })
+    const [lng, lat] = crag.geometry.coordinates as [number, number]
+    mapInstance?.flyTo({ center: [lng, lat], zoom: 15 })
+  }
+
   return (
     <div className='relative w-full h-full'>
       <Map
@@ -235,7 +255,12 @@ export const GlobalMap: React.FC<GlobalMapProps> = ({
         cooperativeGestures={showFullscreenControl}
         interactiveLayerIds={['crag-markers', 'crag-name-labels', 'area-boundaries', 'organizations']}
       >
-        <MapToolbar layerState={dataLayersDisplayState} onChange={setDataLayersDisplayState} />
+        <MapToolbar 
+          layerState={dataLayersDisplayState} 
+          onChange={setDataLayersDisplayState} 
+          cragsList={allCrags} 
+          onSelectCrag={highlightCrag}
+        />
         <MapLayersSelector emit={updateMapLayer} />
         <ScaleControl unit='imperial' style={{ marginBottom: 10 }} position='bottom-left' />
         <ScaleControl unit='metric' style={{ marginBottom: 0 }} position='bottom-left' />
@@ -262,3 +287,4 @@ export const LazyGlobalMap = dynamic<GlobalMapProps>(async () => await import('.
   module => module.GlobalMap), {
   ssr: false
 })
+

src/components/maps/MapToolbar.tsx

@@ -1,19 +1,42 @@
-import { ChangeEventHandler } from 'react'
+import { ChangeEventHandler, ChangeEvent, useState } from 'react'
 import { DataLayersDisplayState } from './GlobalMap'
+import { ActiveFeature } from './TileTypes'
 
-export interface MapToolbarProps {
+interface MapToolbarProps {
   layerState: DataLayersDisplayState
   onChange: (newLayerState: DataLayersDisplayState) => void
+  cragsList: ActiveFeature[]
+  onSelectCrag: (crag: ActiveFeature) => void
 }
 
-/**
- * Toolbar for filtering/toggling data layers
- */
-export const MapToolbar: React.FC<MapToolbarProps> = ({ onChange, layerState }) => {
+export const MapToolbar: React.FC<MapToolbarProps> = ({ layerState, onChange, cragsList, onSelectCrag }) => {
   const { areaBoundaries, crags } = layerState
+  const [search, setSearch] = useState('')
+  const [suggestions, setSuggestions] = useState<ActiveFeature[]>([])
+
+  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+    setSearch(value)
+    if (value.length === 0) {
+      setSuggestions([])
+      return
+    }
+
+    const filtered = cragsList.filter(c => 
+      c.data.areaName.toLowerCase().includes(value.toLowerCase())
+    )
+    setSuggestions(filtered)
+  }
+
+  const handleSelect = (crag: ActiveFeature) => {
+    onSelectCrag(crag)
+    setSearch('')
+    setSuggestions([])
+  }
+
   return (
-    <div className='absolute top-20 md:top-6 left-0 w-screen flex flex-col items-center justify-center'>
-      <ul className='p-2.5 flex items-center gap-4 bg-base-200 rounded-box shadow-md border'>
+    <div className='absolute top-6 left-1/2 transform -translate-x-1/2 flex flex-col items-center z-50'>
+      <ul className='p-2.5 flex items-center gap-4 bg-base-200 rounded-box shadow-md border mb-2'>
         <Checkbox
           value={crags}
           label='Crags/Boulders'
@@ -24,6 +47,28 @@ export const MapToolbar: React.FC<MapToolbarProps> = ({ onChange, layerState })
           label='Boundaries'
           onChange={() => onChange({ ...layerState, areaBoundaries: !areaBoundaries })}
         />
+              <div className='relative w-64'>
+        <input 
+          type="text"
+          value={search}
+          onChange={handleSearchChange}
+          placeholder="Search crags..."
+          className='input input-bordered w-full'
+        />
+        {suggestions.length > 0 && (
+          <ul className='absolute top-full left-0 w-full bg-white shadow-lg rounded-md max-h-48 overflow-y-auto z-50'>
+            {suggestions.map(c => (
+              <li 
+                key={c.data.id} 
+                onClick={() => handleSelect(c)}
+                className='cursor-pointer p-2 hover:bg-gray-200'
+              >
+                {c.data.areaName}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
       </ul>
     </div>
   )