feat: add settings modal for map display

2026-06-23 20:35:45 +02:00
parent 0a008a4d39
commit c53d109c41
4 changed files with 441 additions and 57 deletions
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,5 +1,10 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { MapView } from '../features/map/MapView';
+import {
+  getMapTileStyle,
+  mapTileStyles,
+  type MapStyleId,
+} from '../features/map/mapStyles';
 import { ResultsList } from '../features/results/ResultsList';
 import {
  buildOverpassQuery,
@@ -75,6 +80,12 @@ export function App() {
  const [namedArea, setNamedArea] = useState(namedAreas[0]);
  const [results, setResults] = useState<ParsedOsmResult[]>([]);
  const [selectedResultId, setSelectedResultId] = useState<string | null>(null);
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  const [mapStyleId, setMapStyleId] = useState<MapStyleId>('osm-standard');
+  const [showAdvanced, setShowAdvanced] = useState(true);
+  const [showResultLabels, setShowResultLabels] = useState(false);
+  const [fitMapToResults, setFitMapToResults] = useState(false);
+  const [dimMapWhileLoading, setDimMapWhileLoading] = useState(true);
  const [queryMode, setQueryMode] = useState<QueryMode>('generated');
  const [customQuery, setCustomQuery] = useState('');
  const [status, setStatus] = useState<RequestStatus>('idle');
@@ -93,6 +104,7 @@ export function App() {
  );

  const commonFilters = selectedPreset?.commonFilters ?? [];
+  const mapTileStyle = useMemo(() => getMapTileStyle(mapStyleId), [mapStyleId]);

  const nearbyOptionGroups = useMemo<SelectOptionGroup[]>(() => {
    const suggestedPresetIds = selectedPreset?.usefulNearbyPresetIds ?? [];
@@ -227,7 +239,7 @@ export function App() {
      const response = await fetchOverpass(activeQuery);
      const parsedResults = parseOverpassResponse(response);
      setResults(parsedResults);
-      setSelectedResultId(parsedResults[0]?.id ?? null);
+      setSelectedResultId(fitMapToResults ? null : parsedResults[0]?.id ?? null);
      setStatus('success');
      setMessage(
        parsedResults.length === 0
@@ -332,6 +344,14 @@ export function App() {
    }
  }

+  function handleShowAdvancedChange(isVisible: boolean) {
+    setShowAdvanced(isVisible);
+
+    if (!isVisible) {
+      setQueryMode('generated');
+    }
+  }
+
  return (
    <div className="app-shell">
      <aside className="control-panel" aria-label="Search controls">
@@ -340,6 +360,13 @@ export function App() {
            <h1>MapSift</h1>
            <p>Explore OpenStreetMap data without writing queries.</p>
          </div>
+          <button
+            type="button"
+            className="compact-button"
+            onClick={() => setIsSettingsOpen(true)}
+          >
+            Settings
+          </button>
        </header>

        <section className="search-section" aria-labelledby="target-heading">
@@ -600,6 +627,7 @@ export function App() {
          </button>
        </div>

+        {showAdvanced ? (
          <section className="query-panel query-panel-separated" aria-labelledby="query-heading">
            <div className="panel-heading">
              <div>
@@ -655,6 +683,7 @@ export function App() {
              </pre>
            )}
          </section>
+        ) : null}

        {shouldBlockLargeBBox && isBBoxTooLarge(bbox) ? (
          <p className="message error-message">
@@ -671,6 +700,10 @@ export function App() {
          <MapView
            results={results}
            selectedResultId={selectedResultId}
+            tileStyle={mapTileStyle}
+            showResultLabels={showResultLabels}
+            fitMapToResults={fitMapToResults}
+            dimMap={dimMapWhileLoading && status === 'loading'}
            onResultSelect={setSelectedResultId}
            onViewportChange={handleViewportChange}
          />
@@ -689,6 +722,92 @@ export function App() {
          />
        </section>
      </main>
+      {isSettingsOpen ? (
+        <div className="modal-backdrop" role="presentation">
+          <section
+            className="settings-modal"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="settings-heading"
+          >
+            <header className="settings-header">
+              <div>
+                <h2 id="settings-heading">Settings</h2>
+                <p>Adjust map display and advanced tools.</p>
+              </div>
+              <button
+                type="button"
+                className="compact-button"
+                onClick={() => setIsSettingsOpen(false)}
+              >
+                Close
+              </button>
+            </header>
+
+            <section className="settings-section" aria-labelledby="map-settings-heading">
+              <div className="section-heading">
+                <h3 id="map-settings-heading">Map settings</h3>
+              </div>
+              <SelectField
+                id="map-style"
+                label="Tile provider"
+                value={mapStyleId}
+                options={mapTileStyles.map((style) => ({
+                  value: style.id,
+                  label: style.label,
+                }))}
+                onChange={(value) => setMapStyleId(value as MapStyleId)}
+              />
+              <p className="field-note">{mapTileStyle.description}</p>
+              <div className="settings-toggle-grid">
+                <label>
+                  <input
+                    type="checkbox"
+                    checked={showResultLabels}
+                    onChange={(event) => setShowResultLabels(event.target.checked)}
+                  />
+                  Show result labels
+                </label>
+                <label>
+                  <input
+                    type="checkbox"
+                    checked={fitMapToResults}
+                    onChange={(event) => setFitMapToResults(event.target.checked)}
+                  />
+                  Fit map to results
+                </label>
+                <label>
+                  <input
+                    type="checkbox"
+                    checked={dimMapWhileLoading}
+                    onChange={(event) => setDimMapWhileLoading(event.target.checked)}
+                  />
+                  Dim map while loading
+                </label>
+              </div>
+            </section>
+
+            <section className="settings-section" aria-labelledby="advanced-settings-heading">
+              <div className="section-heading">
+                <h3 id="advanced-settings-heading">Advanced</h3>
+              </div>
+              <div className="settings-toggle-grid">
+                <label>
+                  <input
+                    type="checkbox"
+                    checked={showAdvanced}
+                    onChange={(event) => handleShowAdvancedChange(event.target.checked)}
+                  />
+                  Show Query Preview
+                </label>
+              </div>
+              <p className="field-note">
+                Hiding Query Preview also switches searches back to generated queries.
+              </p>
+            </section>
+          </section>
+        </div>
+      ) : null}
    </div>
  );
 }
--- a/src/features/map/MapView.tsx
+++ b/src/features/map/MapView.tsx
@@ -5,14 +5,20 @@ import {
  Marker,
  Popup,
  TileLayer,
+  Tooltip,
  useMap,
  useMapEvents,
 } from 'react-leaflet';
+import type { MapTileStyle } from './mapStyles';
 import type { BBox, ParsedOsmResult } from '../search/types';

 type MapViewProps = {
  results: ParsedOsmResult[];
  selectedResultId: string | null;
+  tileStyle: MapTileStyle;
+  showResultLabels: boolean;
+  fitMapToResults: boolean;
+  dimMap: boolean;
  onResultSelect: (id: string) => void;
  onViewportChange: (bbox: BBox) => void;
 };
@@ -23,6 +29,10 @@ const DEFAULT_ZOOM = 13;
 export function MapView({
  results,
  selectedResultId,
+  tileStyle,
+  showResultLabels,
+  fitMapToResults,
+  dimMap,
  onResultSelect,
  onViewportChange,
 }: MapViewProps) {
@@ -53,14 +63,17 @@ export function MapView({
      center={DEFAULT_CENTER}
      zoom={DEFAULT_ZOOM}
      minZoom={3}
-      className="map-view"
+      className={dimMap ? 'map-view map-view-dimmed' : 'map-view'}
      zoomControl
    >
      <TileLayer
-        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        key={tileStyle.id}
+        attribution={tileStyle.attribution}
+        url={tileStyle.url}
+        maxZoom={tileStyle.maxZoom}
      />
      <ViewportReporter onViewportChange={onViewportChange} />
+      <FitResults results={results} enabled={fitMapToResults} />
      <SelectedResultFocus result={results.find((item) => item.id === selectedResultId) ?? null} />
      {results.map((result) => (
        <Marker
@@ -76,6 +89,11 @@ export function MapView({
            <br />
            {result.type} {result.osmId}
          </Popup>
+          {showResultLabels ? (
+            <Tooltip permanent direction="top" offset={[0, -10]} opacity={0.94}>
+              {result.name ?? `${result.type} ${result.osmId}`}
+            </Tooltip>
+          ) : null}
        </Marker>
      ))}
    </MapContainer>
@@ -99,6 +117,33 @@ function ViewportReporter({
  return null;
 }

+function FitResults({
+  results,
+  enabled,
+}: {
+  results: ParsedOsmResult[];
+  enabled: boolean;
+}) {
+  const map = useMap();
+
+  useEffect(() => {
+    if (!enabled || results.length === 0) {
+      return;
+    }
+
+    const bounds = L.latLngBounds(results.map((result) => [result.lat, result.lon]));
+
+    if (bounds.isValid()) {
+      map.fitBounds(bounds.pad(0.2), {
+        animate: true,
+        maxZoom: 16,
+      });
+    }
+  }, [enabled, map, results]);
+
+  return null;
+}
+
 function SelectedResultFocus({ result }: { result: ParsedOsmResult | null }) {
  const map = useMap();

--- a/src/features/map/mapStyles.ts
+++ b/src/features/map/mapStyles.ts
@@ -0,0 +1,57 @@
+export type MapStyleId =
+  | 'osm-standard'
+  | 'osm-humanitarian'
+  | 'carto-light'
+  | 'carto-dark';
+
+export type MapTileStyle = {
+  id: MapStyleId;
+  label: string;
+  description: string;
+  url: string;
+  attribution: string;
+  maxZoom?: number;
+};
+
+export const mapTileStyles: MapTileStyle[] = [
+  {
+    id: 'osm-standard',
+    label: 'OpenStreetMap Standard',
+    description: 'Default OSM raster tiles with broad detail.',
+    url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+    attribution:
+      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    maxZoom: 19,
+  },
+  {
+    id: 'osm-humanitarian',
+    label: 'OpenStreetMap Humanitarian',
+    description: 'Higher-contrast OSM style focused on humanitarian mapping.',
+    url: 'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
+    attribution:
+      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Tiles style by HOT',
+    maxZoom: 20,
+  },
+  {
+    id: 'carto-light',
+    label: 'CARTO Positron',
+    description: 'Light basemap that keeps point results prominent.',
+    url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
+    attribution:
+      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+    maxZoom: 20,
+  },
+  {
+    id: 'carto-dark',
+    label: 'CARTO Dark Matter',
+    description: 'Dark basemap for high-contrast result exploration.',
+    url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
+    attribution:
+      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+    maxZoom: 20,
+  },
+];
+
+export function getMapTileStyle(id: MapStyleId): MapTileStyle {
+  return mapTileStyles.find((style) => style.id === id) ?? mapTileStyles[0];
+}
--- a/src/styles.css
+++ b/src/styles.css
@@ -150,6 +150,13 @@ a {
  line-height: 1.1;
 }

+.brand-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.9rem;
+}
+
 .brand-header p {
  margin: 0.25rem 0 0;
  color: #66726a;
@@ -313,6 +320,12 @@ a {
  line-height: 1.2;
 }

+.section-heading h3 {
+  margin: 0;
+  font-size: 0.98rem;
+  line-height: 1.2;
+}
+
 .section-heading span,
 .field-note {
  color: #66726a;
@@ -821,6 +834,12 @@ a {
  height: 100%;
 }

+.map-view-dimmed .leaflet-pane,
+.map-view-dimmed .leaflet-control-container {
+  opacity: 0.55;
+  transition: opacity 140ms ease;
+}
+
 .map-view .leaflet-control-zoom {
  overflow: hidden;
  border: 1px solid #a7b6ad;
@@ -867,6 +886,20 @@ a {
  cursor: not-allowed;
 }

+.map-view .leaflet-tooltip {
+  border: 1px solid #a7b6ad;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #17211c;
+  box-shadow: 0 4px 14px rgb(23 33 28 / 14%);
+  font-size: 0.76rem;
+  font-weight: 720;
+}
+
+.map-view .leaflet-tooltip::before {
+  border-top-color: #ffffff;
+}
+
 .result-marker {
  display: grid;
  place-items: center;
@@ -960,6 +993,131 @@ a {
  line-height: 1.45;
 }

+.modal-backdrop {
+  position: fixed;
+  z-index: 3000;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: rgb(23 33 28 / 38%);
+  padding: 1rem;
+}
+
+.settings-modal {
+  display: grid;
+  gap: 1rem;
+  width: min(560px, 100%);
+  max-height: min(760px, calc(100vh - 2rem));
+  overflow: auto;
+  border: 1px solid #a7b6ad;
+  border-radius: 10px;
+  background: #fafbf8;
+  padding: 1rem;
+  box-shadow:
+    0 24px 70px rgb(23 33 28 / 26%),
+    0 8px 24px rgb(23 33 28 / 16%);
+}
+
+.settings-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  border-bottom: 1px solid #dde5de;
+  padding-bottom: 0.8rem;
+}
+
+.settings-header h2 {
+  margin: 0;
+  font-size: 1.25rem;
+}
+
+.settings-header p {
+  margin: 0.25rem 0 0;
+  color: #66726a;
+  font-size: 0.88rem;
+  line-height: 1.4;
+}
+
+.settings-section {
+  display: grid;
+  gap: 0.75rem;
+  border-bottom: 1px solid #e1e6df;
+  padding-bottom: 1rem;
+}
+
+.settings-section:last-child {
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+
+.settings-toggle-grid {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.settings-toggle-grid label {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  min-height: 38px;
+  border: 1px solid #c8d2ca;
+  border-radius: 7px;
+  background: linear-gradient(#ffffff, #f7f9f6);
+  padding: 0.48rem 0.6rem;
+  font-weight: 620;
+  cursor: pointer;
+}
+
+.settings-toggle-grid label:hover {
+  border-color: #7f9588;
+  background: #f3f9f6;
+}
+
+.settings-toggle-grid input {
+  position: relative;
+  flex: 0 0 1rem;
+  width: 1rem !important;
+  min-width: 1rem;
+  max-width: 1rem;
+  height: 1rem;
+  min-height: 1rem;
+  margin: 0;
+  border: 1px solid #8ea098;
+  border-radius: 4px;
+  appearance: none;
+  background: #ffffff;
+  padding: 0;
+}
+
+.settings-toggle-grid input::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 46%;
+  width: 0.28rem;
+  height: 0.52rem;
+  border-right: 2px solid #ffffff;
+  border-bottom: 2px solid #ffffff;
+  transform: translate(-50%, -50%) rotate(45deg) scale(0);
+  transition: transform 120ms ease;
+}
+
+.settings-toggle-grid input:checked {
+  border-color: #226a5d;
+  background: #226a5d;
+}
+
+.settings-toggle-grid input:checked::before {
+  transform: translate(-50%, -50%) rotate(45deg) scale(1);
+}
+
+.settings-toggle-grid label:has(input:checked) {
+  border-color: #5f9488;
+  background: #e5f2ee;
+  box-shadow: inset 0 0 0 1px rgb(34 106 93 / 16%);
+}
+
@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
@@ -1001,4 +1159,9 @@ a {
  .query-actions button {
    width: 100%;
  }
+
+  .settings-header {
+    align-items: stretch;
+    flex-direction: column;
+  }
 }