feat: add settings modal for map display

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,61 +627,63 @@ export function App() {
           </button>
         </div>
 
-        <section className="query-panel query-panel-separated" aria-labelledby="query-heading">
+        {showAdvanced ? (
-          <div className="panel-heading">
+          <section className="query-panel query-panel-separated" aria-labelledby="query-heading">
-            <div>
+            <div className="panel-heading">
-              <h2 id="query-heading">Query Preview</h2>
+              <div>
-              <p className="field-note">Advanced output generated from the current search.</p>
+                <h2 id="query-heading">Query Preview</h2>
+                <p className="field-note">Advanced output generated from the current search.</p>
+              </div>
             </div>
-          </div>
+            <div className="query-actions">
-          <div className="query-actions">
+              <button type="button" disabled={!activeQuery} onClick={handleCopyQuery}>
-            <button type="button" disabled={!activeQuery} onClick={handleCopyQuery}>
+                Copy query
-              Copy query
+              </button>
-            </button>
+              <button
-            <button
+                type="button"
-              type="button"
+                disabled={!activeQuery}
-              disabled={!activeQuery}
+                onClick={handleOpenOverpassTurbo}
-              onClick={handleOpenOverpassTurbo}
+              >
-            >
+                Open in Overpass Turbo
-              Open in Overpass Turbo
+              </button>
-            </button>
+            </div>
-          </div>
+            <div className="query-mode-control" aria-label="Query mode">
-          <div className="query-mode-control" aria-label="Query mode">
+              <label>
-            <label>
+                <input
-              <input
+                  type="radio"
-                type="radio"
+                  checked={queryMode === 'generated'}
-                checked={queryMode === 'generated'}
+                  onChange={() => setQueryMode('generated')}
-                onChange={() => setQueryMode('generated')}
+                />
+                Generated
+              </label>
+              <label>
+                <input
+                  type="radio"
+                  checked={queryMode === 'custom'}
+                  onChange={() => setQueryMode('custom')}
+                />
+                Custom query
+              </label>
+            </div>
+            {queryMode === 'custom' ? (
+              <textarea
+                className="custom-query-input"
+                aria-label="Custom Overpass QL query"
+                value={customQuery}
+                onChange={(event) => setCustomQuery(event.target.value)}
+                placeholder={
+                  '[out:json][timeout:25];\nnode["amenity"="bench"](52.191000,20.941000,52.268000,21.079000);\nout center 100;'
+                }
               />
-              Generated
+            ) : (
-            </label>
+              <pre className="query-preview">
-            <label>
+                {generatedQuery.query ||
-              <input
+                  generatedQuery.error ||
-                type="radio"
+                  'Choose a preset to generate a query.'}
-                checked={queryMode === 'custom'}
+              </pre>
-                onChange={() => setQueryMode('custom')}
+            )}
-              />
+          </section>
-              Custom query
+        ) : null}
-            </label>
-          </div>
-          {queryMode === 'custom' ? (
-            <textarea
-              className="custom-query-input"
-              aria-label="Custom Overpass QL query"
-              value={customQuery}
-              onChange={(event) => setCustomQuery(event.target.value)}
-              placeholder={
-                '[out:json][timeout:25];\nnode["amenity"="bench"](52.191000,20.941000,52.268000,21.079000);\nout center 100;'
-              }
-            />
-          ) : (
-            <pre className="query-preview">
-              {generatedQuery.query ||
-                generatedQuery.error ||
-                'Choose a preset to generate a query.'}
-            </pre>
-          )}
-        </section>
 
         {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>
   );
 }

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'
+        key={tileStyle.id}
-        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        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();
 

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];
+}

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;
+  }
 }