Explore places on the map, planner route fixes, and instance-wide Mapbox (#1147)

* feat(maps): add an OSM POI search endpoint (category within a viewport) New /api/maps/pois queries OpenStreetMap via Overpass for places of a category (restaurants, cafes, hotels, sights, …) inside a bounding box. OSM-only by design — it never calls Google, even when a Google key is configured. * feat(map): explore nearby places on the trip map (OSM category pill) A floating, icon-only pill over the planner map lets you toggle a POI category and see those OpenStreetMap places in the current view; clicking a marker opens the add-place form pre-filled (name, address, website, phone). Single-select with a 'search this area' action after the map moves. Renders on both the Leaflet and Mapbox maps, and can be turned off in settings (discussion #841). * fix(planner): anchor timed places when optimising and route transports by location - The day optimiser no longer reshuffles places that have a set time — they stay anchored to their time, like locked places. - The route now uses a transport's departure/arrival location as a waypoint when it has one (e.g. a flight's airport), instead of breaking the route at every booking; transports without a location are ignored for routing but still show their leg's distance/duration under the booking. * feat(admin): instance-wide Mapbox defaults in default user settings Admins can set a shared Mapbox token (plus style, 3D and quality) as instance defaults, so the whole instance can use Mapbox without each user pasting their own key. Users without their own value inherit it via the existing admin-defaults merge; the shared token is stored encrypted (discussion #920).
2026-06-24 07:41:47 +00:00 · 2026-06-11 23:42:16 +02:00
parent bb477645a3
commit 1378c95078
79 changed files with 1118 additions and 20 deletions
@@ -0,0 +1,87 @@
+import { RotateCw } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import { Tooltip } from '../shared/Tooltip'
+import { POI_CATEGORIES } from './poiCategories'
+
+interface Props {
+  active: Set<string>
+  onToggle: (key: string) => void
+  loadingKeys?: Set<string>
+  /** true when the map moved since the last search → offer "search this area" */
+  moved?: boolean
+  onSearchArea?: () => void
+}
+
+// Frosted, icon-only segmented control that floats over the map. Active segments
+// fill with the category colour (matching their markers); the label shows in a
+// custom tooltip on hover so the pill stays compact and never needs to scroll.
+export default function PoiCategoryPill({ active, onToggle, loadingKeys, moved, onSearchArea }: Props) {
+  const { t } = useTranslation()
+
+  const frosted: React.CSSProperties = {
+    background: 'var(--sidebar-bg)',
+    backdropFilter: 'blur(20px) saturate(180%)',
+    WebkitBackdropFilter: 'blur(20px) saturate(180%)',
+    boxShadow: 'var(--sidebar-shadow, 0 4px 16px rgba(0,0,0,0.14))',
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
+      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 2, padding: 4, borderRadius: 999, pointerEvents: 'auto', ...frosted }}>
+        {POI_CATEGORIES.map(cat => {
+          const on = active.has(cat.key)
+          const loading = loadingKeys?.has(cat.key)
+          return (
+            <Tooltip key={cat.key} label={t(cat.labelKey)} placement="bottom">
+              <button
+                type="button"
+                onClick={() => onToggle(cat.key)}
+                aria-pressed={on}
+                aria-label={t(cat.labelKey)}
+                className={on ? '' : 'text-content-muted'}
+                style={{
+                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+                  width: 34, height: 34, borderRadius: 999, border: 'none', cursor: 'pointer',
+                  background: on ? cat.color : 'transparent',
+                  color: on ? '#fff' : undefined,
+                  transition: 'background 0.14s, color 0.14s',
+                }}
+                onMouseEnter={e => { if (!on) e.currentTarget.style.background = 'var(--bg-hover)' }}
+                onMouseLeave={e => { if (!on) e.currentTarget.style.background = 'transparent' }}
+              >
+                {loading ? (
+                  <span
+                    className="animate-spin"
+                    style={{
+                      width: 14, height: 14, borderRadius: 999, display: 'inline-block',
+                      border: '2px solid', borderColor: on ? 'rgba(255,255,255,0.45)' : 'var(--border-primary)',
+                      borderTopColor: on ? '#fff' : 'var(--text-muted)',
+                    }}
+                  />
+                ) : (
+                  <cat.Icon size={16} strokeWidth={2} />
+                )}
+              </button>
+            </Tooltip>
+          )
+        })}
+      </div>
+
+      {moved && active.size > 0 && (
+        <button
+          type="button"
+          onClick={onSearchArea}
+          className="text-content"
+          style={{
+            display: 'inline-flex', alignItems: 'center', gap: 6,
+            padding: '6px 13px', borderRadius: 999, border: 'none', cursor: 'pointer',
+            fontSize: 12, fontWeight: 600, fontFamily: 'inherit', pointerEvents: 'auto',
+            ...frosted,
+          }}
+        >
+          <RotateCw size={13} strokeWidth={2.4} /> {t('poi.searchThisArea')}
+        </button>
+      )}
+    </div>
+  )
+}