From 1161dff66c351ec851fe3f800b8f5b251c6cb329 Mon Sep 17 00:00:00 2001
From: Danilo Bargen <mail@dbrgn.ch>
Date: Mon, 6 May 2024 00:55:02 +0200
Subject: [PATCH 1/2] Implement locations map

---
 frontend/src/lib/components/BaseMap.svelte    | 274 ++++++++++++++++++
 frontend/src/lib/components/Map.svelte        | 186 ------------
 frontend/src/lib/components/MultiMap.svelte   |   9 +
 frontend/src/lib/components/SingleMap.svelte  |  15 +
 frontend/src/lib/components/map.ts            |  58 ++++
 frontend/src/lib/index.ts                     |   4 +
 frontend/src/routes/+page.svelte              |   4 +
 frontend/src/routes/locations/+page.svelte    |  21 +-
 .../src/routes/locations/LocationForm.svelte  |  18 +-
 .../src/routes/locations/[id]/+page.svelte    |   4 +-
 10 files changed, 394 insertions(+), 199 deletions(-)
 create mode 100644 frontend/src/lib/components/BaseMap.svelte
 delete mode 100644 frontend/src/lib/components/Map.svelte
 create mode 100644 frontend/src/lib/components/MultiMap.svelte
 create mode 100644 frontend/src/lib/components/SingleMap.svelte
 create mode 100644 frontend/src/lib/components/map.ts

diff --git a/frontend/src/lib/components/BaseMap.svelte b/frontend/src/lib/components/BaseMap.svelte
new file mode 100644
index 00000000..8b11e87d
--- /dev/null
+++ b/frontend/src/lib/components/BaseMap.svelte
@@ -0,0 +1,274 @@
+<script lang="ts">
+  import {Map, NavigationControl, Marker, type LngLatLike} from 'maplibre-gl';
+  import {onMount} from 'svelte';
+
+  import {unreachable} from '$lib/assert';
+  import {reactive} from '$lib/svelte';
+
+  import {
+    DEFAULT_MAP_CENTER,
+    MAPBOX_ACCESS_TOKEN,
+    MAPBOX_STYLE_DEFAULT,
+    MAPBOX_STYLE_LIGHT,
+    MAPBOX_STYLE_SATELLITE,
+    MARKER_COLOR,
+    SWISSTOPO_WMS_BASE_URL,
+    isValidPos,
+    type NamedCoordinates,
+  } from './map';
+
+  export let mode: 'single' | 'multi';
+
+  // Props only used for mode 'single'
+  export let center: LngLatLike = DEFAULT_MAP_CENTER;
+  export let zoom: number = 6;
+  export let latitude: number | null = null;
+  export let longitude: number | null = null;
+  export let editable: boolean = false;
+
+  // Props only used for mode 'multi'
+  export let markers: NamedCoordinates[] = [];
+
+  // Map type
+  type MapType = 'mapbox-outdoors' | 'mapbox-satellite' | 'swisstopo' | 'swissimage';
+  let mapType: MapType = 'mapbox-outdoors';
+
+  // Map variable
+  let map: Map | null = null;
+
+  // Markers
+  let mapMarker: Marker | undefined;
+  let markersLoaded = false;
+
+  /**
+   * If the single map marker wasn't yet added to the map, do that now.
+   */
+  function ensureSingleMarkerVisible() {
+    if (map !== null && mapMarker !== undefined && !markersLoaded) {
+      mapMarker.addTo(map);
+      markersLoaded = true;
+    }
+  }
+
+  /**
+   * Function to add markers and labels to map.
+   *
+   * Note: Markers don't need to be re-loaded on style change, labels do need to be re-loaded.
+   */
+  function addMapMarkersAndLabels(initializedMap: Map) {
+    switch (mode) {
+      case 'single': {
+        if (mapMarker !== undefined) {
+          return;
+        }
+
+        // Add marker (draggable if editable)
+        const marker = new Marker({color: MARKER_COLOR, draggable: editable}).setLngLat(center);
+
+        if (editable) {
+          // Function to update coordinates from marker
+          const updateCoordinatesFromMarker = () => {
+            if (!editable) {
+              return;
+            }
+            const lngLat = marker.getLngLat();
+            latitude = Number(lngLat.lat.toFixed(5));
+            longitude = Number(lngLat.lng.toFixed(5));
+          };
+
+          // Update coordinates on marker drag
+          marker.on('dragend', updateCoordinatesFromMarker);
+
+          // Update marker and coordinates on double click
+          initializedMap.on('dblclick', (e) => {
+            marker.setLngLat(e.lngLat);
+            ensureSingleMarkerVisible();
+            updateCoordinatesFromMarker();
+          });
+        }
+
+        // Update reference
+        mapMarker = marker;
+
+        // Initialize marker (if coordinates are available)
+        if (!markersLoaded && (!editable || (latitude !== null && longitude !== null))) {
+          ensureSingleMarkerVisible();
+        }
+
+        break;
+      }
+      case 'multi': {
+        // Add markers
+        if (!markersLoaded) {
+          for (const coords of markers) {
+            new Marker({color: MARKER_COLOR, scale: 0.8}).setLngLat(coords).addTo(initializedMap);
+          }
+        }
+
+        // Add marker labels
+        initializedMap.addSource('locations', {
+          type: 'geojson',
+          data: {
+            type: 'FeatureCollection',
+            features: markers.map((coords) => ({
+              type: 'Feature',
+              geometry: {type: 'Point', coordinates: [coords.lon, coords.lat]},
+              properties: {
+                title: coords.name,
+              },
+            })),
+          },
+        });
+        initializedMap.addLayer({
+          id: 'locations',
+          type: 'symbol',
+          source: 'locations',
+          minzoom: 9,
+          layout: {
+            // Get the title name from the source's "title" property
+            'text-field': ['get', 'title'],
+            'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
+            'text-offset': [0, 0.25],
+            'text-anchor': 'top',
+            'text-size': 14,
+          },
+          paint: {
+            'text-halo-width': 2,
+            'text-halo-color': 'white',
+          },
+        });
+
+        // Apply bounding box
+        if (!markersLoaded) {
+          if (markers.length > 0) {
+            const longitudes = markers.map((coord) => coord.lon);
+            const latitudes = markers.map((coord) => coord.lat);
+
+            const minLon = Math.min(...longitudes);
+            const maxLon = Math.max(...longitudes);
+            const minLat = Math.min(...latitudes);
+            const maxLat = Math.max(...latitudes);
+
+            initializedMap.fitBounds(
+              [
+                [minLon, minLat], // SW
+                [maxLon, maxLat], // NE
+              ],
+              {padding: 40, maxZoom: 11},
+            );
+          }
+        }
+
+        markersLoaded = true;
+
+        break;
+      }
+      default:
+        unreachable(mode);
+    }
+  }
+
+  /**
+   * Update map style whenever {@link mapType} variable changes.
+   */
+  let prevMapType: MapType | undefined;
+  function updateMapType(initializedMap: Map, newMapType: MapType) {
+    // No-op if type did not change
+    if (newMapType === prevMapType) {
+      return;
+    }
+
+    // Prepare additional layers that will be added once the style is loaded
+    initializedMap.once('style.load', () => {
+      // Additional map layers on top of base style
+      switch (newMapType) {
+        case 'swisstopo':
+          initializedMap.addLayer({
+            id: 'swisstopo-layer',
+            type: 'raster',
+            source: {
+              type: 'raster',
+              tiles: [SWISSTOPO_WMS_BASE_URL + '&LAYERS=ch.swisstopo.pixelkarte-farbe'],
+              tileSize: 256,
+            },
+          });
+          break;
+        case 'swissimage':
+          initializedMap.addLayer({
+            id: 'swissimage-layer',
+            type: 'raster',
+            source: {
+              type: 'raster',
+              tiles: [SWISSTOPO_WMS_BASE_URL + '&LAYERS=ch.swisstopo.swissimage'],
+              tileSize: 256,
+            },
+          });
+          break;
+      }
+
+      // Map markers and labels
+      addMapMarkersAndLabels(initializedMap);
+    });
+
+    // Force-set style of the MapBox base layer.
+    // This will remove all existing styles and layers.
+    switch (newMapType) {
+      case 'mapbox-outdoors':
+        initializedMap.setStyle(`mapbox://styles/mapbox/${MAPBOX_STYLE_DEFAULT}`, {diff: false});
+        break;
+      case 'mapbox-satellite':
+        initializedMap.setStyle(`mapbox://styles/mapbox/${MAPBOX_STYLE_SATELLITE}`, {diff: false});
+        break;
+      case 'swisstopo':
+      case 'swissimage':
+        initializedMap.setStyle(`mapbox://styles/mapbox/${MAPBOX_STYLE_LIGHT}`, {diff: false});
+        break;
+    }
+
+    prevMapType = newMapType;
+  }
+
+  // Handle map type updates
+  $: if (map !== null) {
+    updateMapType(map, mapType);
+  }
+
+  // In 'single' mode, when the input value changes, update the marker
+  $: reactive(() => {
+    if (mode !== 'single' || !editable || mapMarker === undefined) {
+      return;
+    }
+    const pos = {lng: longitude, lat: latitude};
+    if (isValidPos(pos) === true) {
+      mapMarker.setLngLat(pos);
+      ensureSingleMarkerVisible();
+      map?.flyTo({center: pos});
+    }
+  }, [latitude, longitude]);
+
+  onMount(() => {
+    // Create map
+    map = new Map({
+      container: 'map',
+      style: `mapbox://styles/mapbox/${MAPBOX_STYLE_DEFAULT}`,
+      doubleClickZoom: !editable,
+      center: center,
+      zoom,
+      accessToken: MAPBOX_ACCESS_TOKEN,
+    });
+
+    // Add navigation controls
+    map.addControl(new NavigationControl());
+  });
+</script>
+
+<div id="map" class="map">
+  <div class="map-style-switcher" title="Map type">
+    <select bind:value={mapType}>
+      <option value="mapbox-outdoors">Mapbox Outdoors</option>
+      <option value="mapbox-satellite">Mapbox Satellite</option>
+      <option value="swisstopo">Swisstopo</option>
+      <option value="swissimage">Swissimage</option>
+    </select>
+  </div>
+</div>
diff --git a/frontend/src/lib/components/Map.svelte b/frontend/src/lib/components/Map.svelte
deleted file mode 100644
index bf841fba..00000000
--- a/frontend/src/lib/components/Map.svelte
+++ /dev/null
@@ -1,186 +0,0 @@
-<script lang="ts">
-  import {Map, NavigationControl, Marker, type LngLatLike} from 'maplibre-gl';
-  import {onMount} from 'svelte';
-
-  import {reactive} from '$lib/svelte';
-
-  export let latitude: number | null = null;
-  export let longitude: number | null = null;
-  export let editable: boolean = false;
-  export let position: LngLatLike = {lng: 10, lat: 47};
-  export let zoom: number = 6;
-
-  // Access token
-  //
-  // Please be fair and don't mis-use. I know that I can move this out of the source, but it's a
-  // free account anyways, so all you can do is annoy me if the account is banned.
-  const MAPBOX_ACCESS_TOKEN =
-    'pk.eyJ1IjoiZGFuaWxvIiwiYSI6ImNrMHk4bHcyaTA0OGMzcHA2aXloems2MnQifQ.YovfgNgeajD4aORTUE5aFw';
-
-  // Map type
-  //let mapType: 'mapbox-outdoors' | 'mapbox-satellite' | 'swisstopo' | 'swissimage' = 'mapbox-outdoors';
-  let mapType = 'mapbox-outdoors';
-
-  // Mapbox styles
-  const MAPBOX_STYLE_DEFAULT = 'outdoors-v11';
-  const MAPBOX_STYLE_SATELLITE = 'satellite-v9';
-  const MAPBOX_STYLE_LIGHT = 'light-v10';
-
-  // Swisstopo WMS base URL (without LAYERS)
-  const SWISSTOPO_WMS_BASE_URL =
-    'https://wms.geo.admin.ch/?SERVICE=WMS' +
-    '&REQUEST=GetMap' +
-    '&VERSION=1.3.0' +
-    '&STYLES=default' +
-    '&CRS=EPSG:3857' +
-    '&BBOX={bbox-epsg-3857}' +
-    '&WIDTH=256' +
-    '&HEIGHT=256' +
-    '&FORMAT=image/png';
-
-  // Map variable
-  let map: Map | null = null;
-  let mapMarker: Marker | undefined;
-
-  // Update map style whenever variable above changes
-  let prevMapType = mapType;
-  function updateMapType(initializedMap: Map, newMapType: typeof mapType) {
-    // No-op if type did not change
-    if (newMapType === prevMapType) {
-      return;
-    }
-
-    // Prepare additional layers that will be added once the style is loaded
-    initializedMap.once('style.load', () => {
-      switch (newMapType) {
-        case 'swisstopo':
-          initializedMap.addLayer({
-            id: 'swisstopo-layer',
-            type: 'raster',
-            source: {
-              type: 'raster',
-              tiles: [SWISSTOPO_WMS_BASE_URL + '&LAYERS=ch.swisstopo.pixelkarte-farbe'],
-              tileSize: 256,
-            },
-          });
-          break;
-        case 'swissimage':
-          initializedMap.addLayer({
-            id: 'swissimage-layer',
-            type: 'raster',
-            source: {
-              type: 'raster',
-              tiles: [SWISSTOPO_WMS_BASE_URL + '&LAYERS=ch.swisstopo.swissimage'],
-              tileSize: 256,
-            },
-          });
-          break;
-      }
-    });
-
-    // Force-set style of the MapBox base layer.
-    // This will remove all existing styles and layers.
-    switch (newMapType) {
-      case 'mapbox-outdoors':
-        initializedMap.setStyle(`mapbox://styles/mapbox/${MAPBOX_STYLE_DEFAULT}`, {diff: false});
-        break;
-      case 'mapbox-satellite':
-        initializedMap.setStyle(`mapbox://styles/mapbox/${MAPBOX_STYLE_SATELLITE}`, {diff: false});
-        break;
-      case 'swisstopo':
-      case 'swissimage':
-        initializedMap.setStyle(`mapbox://styles/mapbox/${MAPBOX_STYLE_LIGHT}`, {diff: false});
-        break;
-    }
-
-    prevMapType = newMapType;
-  }
-
-  // Handle map type updates
-  $: if (map !== null) {
-    updateMapType(map, mapType);
-  }
-
-  // Helper function to validate a coordinate pair
-  function validPos(pos: {
-    lng: number | null;
-    lat: number | null;
-  }): pos is {lng: number; lat: number} {
-    let {lng, lat} = pos;
-    if (lng === null || lat === null) {
-      return false;
-    }
-    if (isNaN(lng) || isNaN(lat)) {
-      return false;
-    }
-    if (lng < -180 || lng > 180) {
-      return false;
-    }
-    if (lat < -90 || lat > 90) {
-      return false;
-    }
-    return true;
-  }
-
-  // When the input value changes, update the marker
-  $: reactive(() => {
-    if (!editable || mapMarker === undefined) {
-      return;
-    }
-    const pos = {lng: longitude, lat: latitude};
-    if (validPos(pos) === true) {
-      mapMarker.setLngLat(pos);
-      map?.flyTo({center: pos});
-    }
-  }, [latitude, longitude]);
-
-  onMount(() => {
-    // Create map
-    map = new Map({
-      container: 'map',
-      style: `mapbox://styles/mapbox/${MAPBOX_STYLE_DEFAULT}`,
-      doubleClickZoom: false,
-      center: position,
-      zoom,
-      accessToken: MAPBOX_ACCESS_TOKEN,
-    });
-
-    // Add navigation controls
-    map.addControl(new NavigationControl());
-
-    // Add draggable marker
-    const marker = new Marker({draggable: editable}).setLngLat(position).addTo(map);
-
-    if (editable) {
-      // Function to update coordinates from marker
-      const updateCoordinatesFromMarker = () => {
-        if (!editable) {
-          return;
-        }
-        const lngLat = marker.getLngLat();
-        latitude = Number(lngLat.lat.toFixed(5));
-        longitude = Number(lngLat.lng.toFixed(5));
-      };
-
-      // Update coordinates on marker drag
-      marker.on('dragend', updateCoordinatesFromMarker);
-
-      // Update marker and coordinates on double click
-      map.on('dblclick', (e) => {
-        marker.setLngLat(e.lngLat);
-        updateCoordinatesFromMarker();
-      });
-    }
-  });
-</script>
-
-<div id="map" class="map">
-  <div class="map-style-switcher" title="Map type">
-    <select bind:value={mapType}>
-      <option value="mapbox-outdoors">Mapbox Outdoors</option>
-      <option value="mapbox-satellite">Mapbox Satellite</option>
-      <option value="swisstopo">Swisstopo</option>
-      <option value="swissimage">Swissimage</option>
-    </select>
-  </div>
-</div>
diff --git a/frontend/src/lib/components/MultiMap.svelte b/frontend/src/lib/components/MultiMap.svelte
new file mode 100644
index 00000000..d5a9eeae
--- /dev/null
+++ b/frontend/src/lib/components/MultiMap.svelte
@@ -0,0 +1,9 @@
+<!-- Map showing a single location. May be editable. -->
+<script lang="ts">
+  import BaseMap from './BaseMap.svelte';
+  import type {NamedCoordinates} from './map';
+
+  export let markers: NamedCoordinates[];
+</script>
+
+<BaseMap mode="multi" {markers} />
diff --git a/frontend/src/lib/components/SingleMap.svelte b/frontend/src/lib/components/SingleMap.svelte
new file mode 100644
index 00000000..cdd6efbc
--- /dev/null
+++ b/frontend/src/lib/components/SingleMap.svelte
@@ -0,0 +1,15 @@
+<!-- Map showing a single location. May be editable. -->
+<script lang="ts">
+  import type {LngLatLike} from 'maplibre-gl';
+
+  import BaseMap from './BaseMap.svelte';
+  import {DEFAULT_MAP_CENTER} from './map';
+
+  export let latitude: number | null = null;
+  export let longitude: number | null = null;
+  export let editable: boolean = false;
+  export let center: LngLatLike = DEFAULT_MAP_CENTER;
+  export let zoom: number = 6;
+</script>
+
+<BaseMap mode="single" bind:latitude bind:longitude {editable} {center} {zoom} />
diff --git a/frontend/src/lib/components/map.ts b/frontend/src/lib/components/map.ts
new file mode 100644
index 00000000..8f9bfa1b
--- /dev/null
+++ b/frontend/src/lib/components/map.ts
@@ -0,0 +1,58 @@
+// Mapbox access token
+//
+// Please be fair and don't mis-use. I know that I can move this out of the source, but it's a
+// free account anyways, so all you can do is annoy me if the account is banned.
+export const MAPBOX_ACCESS_TOKEN =
+    'pk.eyJ1IjoiZGFuaWxvIiwiYSI6ImNrMHk4bHcyaTA0OGMzcHA2aXloems2MnQifQ.YovfgNgeajD4aORTUE5aFw';
+
+// Mapbox styles
+export const MAPBOX_STYLE_DEFAULT = 'outdoors-v11';
+export const MAPBOX_STYLE_SATELLITE = 'satellite-v9';
+export const MAPBOX_STYLE_LIGHT = 'light-v10';
+
+// Swisstopo WMS base URL (without LAYERS)
+export const SWISSTOPO_WMS_BASE_URL =
+    'https://wms.geo.admin.ch/?SERVICE=WMS' +
+    '&REQUEST=GetMap' +
+    '&VERSION=1.3.0' +
+    '&STYLES=default' +
+    '&CRS=EPSG:3857' +
+    '&BBOX={bbox-epsg-3857}' +
+    '&WIDTH=256' +
+    '&HEIGHT=256' +
+    '&FORMAT=image/png';
+
+// The default centerpoint of the map
+export const DEFAULT_MAP_CENTER = {lng: 10, lat: 47};
+
+export const MARKER_COLOR = '#1496ED'; // Primary color blue
+
+export interface Coordinates {
+    readonly lon: number;
+    readonly lat: number;
+}
+
+export interface NamedCoordinates extends Coordinates {
+    readonly name: string;
+}
+
+// Helper function to validate a coordinate pair
+export function isValidPos(pos: {
+    lng: number | null;
+    lat: number | null;
+}): pos is {lng: number; lat: number} {
+    const {lng, lat} = pos;
+    if (lng === null || lat === null) {
+        return false;
+    }
+    if (isNaN(lng) || isNaN(lat)) {
+        return false;
+    }
+    if (lng < -180 || lng > 180) {
+        return false;
+    }
+    if (lat < -90 || lat > 90) {
+        return false;
+    }
+    return true;
+}
diff --git a/frontend/src/lib/index.ts b/frontend/src/lib/index.ts
index ed810d00..6ca1b837 100644
--- a/frontend/src/lib/index.ts
+++ b/frontend/src/lib/index.ts
@@ -1,3 +1,7 @@
 import type {RequestEvent} from '@sveltejs/kit';
 
 export type SvelteKitFetch = RequestEvent['fetch'];
+
+export function notUndefined<T>(value: T | undefined): value is T {
+    return value !== undefined;
+}
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 43bf226d..51e21303 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -109,6 +109,10 @@
 <h3 class="title is-size-3">News</h3>
 <h4 class="title is-size-5">2024</h4>
 <ul class="content">
+  <li>
+    <strong>14.5.</strong> The <a href="/locations">location list</a> now shows an overview map of all
+    locations you've been to (launch or landing locations).
+  </li>
   <li>
     <strong>1.4.</strong> Do you have a lot of old flights logged in a spreadsheet application (like
     Excel or Google Sheets), and don't want to type all this information into Flugbuech by hand? In
diff --git a/frontend/src/routes/locations/+page.svelte b/frontend/src/routes/locations/+page.svelte
index 471d9de8..2fd106c8 100644
--- a/frontend/src/routes/locations/+page.svelte
+++ b/frontend/src/routes/locations/+page.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
+  import {notUndefined} from '$lib';
   import {apiDelete, extractResponseError} from '$lib/api';
   import CountryFlag from '$lib/components/CountryFlag.svelte';
   import DialogModal from '$lib/components/DialogModal.svelte';
   import Flashes from '$lib/components/Flashes.svelte';
   import MessageModal from '$lib/components/MessageModal.svelte';
+  import MultiMap from '$lib/components/MultiMap.svelte';
   import {addFlash} from '$lib/stores';
 
   import {goto, invalidateAll} from '$app/navigation';
@@ -116,12 +118,25 @@
     </div>
   </article>
 
-  <p class="content">
+  <p class="mb-4">
     You've been at {data.locations.length} location{data.locations.length === 1 ? '' : 's'} so far!
   </p>
-  <p class="content">
+  <div class="mb-5">
     <a href="/locations/add/" class="button is-primary">Add location</a>
-  </p>
+  </div>
+  {#if data.locations.some((location) => location.coordinates !== undefined)}
+    <section class="map mb-5">
+      <MultiMap
+        markers={data.locations
+          .map((location) =>
+            location.coordinates === undefined
+              ? undefined
+              : {name: location.name, ...location.coordinates},
+          )
+          .filter(notUndefined)}
+      />
+    </section>
+  {/if}
   <table class="table is-fullwidth is-striped is-hoverable">
     <thead>
       <tr>
diff --git a/frontend/src/routes/locations/LocationForm.svelte b/frontend/src/routes/locations/LocationForm.svelte
index 04e1a967..0479eb09 100644
--- a/frontend/src/routes/locations/LocationForm.svelte
+++ b/frontend/src/routes/locations/LocationForm.svelte
@@ -2,8 +2,8 @@
   import {onMount} from 'svelte';
 
   import {apiPost, extractResponseError} from '$lib/api';
-  import MapComponent from '$lib/components/Map.svelte';
   import MessageModal from '$lib/components/MessageModal.svelte';
+  import SingleMap from '$lib/components/SingleMap.svelte';
   import {addFlash} from '$lib/stores';
   import {reactive} from '$lib/svelte';
 
@@ -308,13 +308,15 @@
       <div class="field-error">Error: {fieldErrors.longitude}</div>
     {/if}
 
-    <MapComponent
-      bind:latitude
-      bind:longitude
-      editable={true}
-      position={location?.coordinates}
-      zoom={location?.coordinates !== undefined ? 13 : undefined}
-    />
+    <div class="map mt-5">
+      <SingleMap
+        bind:latitude
+        bind:longitude
+        editable={true}
+        center={location?.coordinates}
+        zoom={location?.coordinates !== undefined ? 13 : undefined}
+      />
+    </div>
 
     <p><em>Note: Double-click on the map to update the location coordinates.</em></p>
 
diff --git a/frontend/src/routes/locations/[id]/+page.svelte b/frontend/src/routes/locations/[id]/+page.svelte
index 84959559..4b1516e0 100644
--- a/frontend/src/routes/locations/[id]/+page.svelte
+++ b/frontend/src/routes/locations/[id]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import CountryFlag from '$lib/components/CountryFlag.svelte';
   import Flashes from '$lib/components/Flashes.svelte';
-  import MapComponent from '$lib/components/Map.svelte';
+  import SingleMap from '$lib/components/SingleMap.svelte';
 
   import type {Data} from './+page';
 
@@ -99,7 +99,7 @@
 
 {#if location.coordinates}
   <section class="map">
-    <MapComponent editable={false} position={location.coordinates} zoom={13} />
+    <SingleMap editable={false} center={location.coordinates} zoom={13} />
   </section>
 {/if}
 

From 1d8345069f6698dafc73f48e1797facabe8ce6d0 Mon Sep 17 00:00:00 2001
From: Danilo Bargen <mail@dbrgn.ch>
Date: Tue, 14 May 2024 23:34:51 +0200
Subject: [PATCH 2/2] Allow toggling small/large map view

---
 frontend/src/lib/components/BaseMap.svelte | 63 ++++++++++++++++++++--
 frontend/static/css/flugbuech.css          | 17 ------
 2 files changed, 60 insertions(+), 20 deletions(-)

diff --git a/frontend/src/lib/components/BaseMap.svelte b/frontend/src/lib/components/BaseMap.svelte
index 8b11e87d..4e1b94d0 100644
--- a/frontend/src/lib/components/BaseMap.svelte
+++ b/frontend/src/lib/components/BaseMap.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import {Map, NavigationControl, Marker, type LngLatLike} from 'maplibre-gl';
-  import {onMount} from 'svelte';
+  import {onMount, tick} from 'svelte';
 
   import {unreachable} from '$lib/assert';
   import {reactive} from '$lib/svelte';
@@ -17,8 +17,15 @@
     type NamedCoordinates,
   } from './map';
 
+  // Map heights
+  const MAP_HEIGHT_SMALL = '400px';
+  const MAP_HEIGHT_LARGE = 'max(100vh, 800px)';
+
   export let mode: 'single' | 'multi';
 
+  // Common props
+  export let mapMode: 'small' | 'large' = 'small';
+
   // Props only used for mode 'single'
   export let center: LngLatLike = DEFAULT_MAP_CENTER;
   export let zoom: number = 6;
@@ -34,6 +41,7 @@
   let mapType: MapType = 'mapbox-outdoors';
 
   // Map variable
+  let container: HTMLElement;
   let map: Map | null = null;
 
   // Markers
@@ -50,6 +58,14 @@
     }
   }
 
+  /**
+   * Toggle map height.
+   */
+  function toggleMapSize() {
+    mapMode = mapMode === 'small' ? 'large' : 'small';
+    tick().then(() => map?.resize());
+  }
+
   /**
    * Function to add markers and labels to map.
    *
@@ -249,7 +265,7 @@
   onMount(() => {
     // Create map
     map = new Map({
-      container: 'map',
+      container,
       style: `mapbox://styles/mapbox/${MAPBOX_STYLE_DEFAULT}`,
       doubleClickZoom: !editable,
       center: center,
@@ -262,7 +278,20 @@
   });
 </script>
 
-<div id="map" class="map">
+<div
+  class="map"
+  bind:this={container}
+  style:height={mapMode === 'small' ? MAP_HEIGHT_SMALL : MAP_HEIGHT_LARGE}
+>
+  <button type="button" class="map-resize-button button" on:click={toggleMapSize}>
+    <span class="icon">
+      {#if mapMode === 'small'}
+        <i class="fa-solid fa-up-right-and-down-left-from-center"></i>
+      {:else}
+        <i class="fa-solid fa-down-left-and-up-right-to-center"></i>
+      {/if}
+    </span>
+  </button>
   <div class="map-style-switcher" title="Map type">
     <select bind:value={mapType}>
       <option value="mapbox-outdoors">Mapbox Outdoors</option>
@@ -272,3 +301,31 @@
     </select>
   </div>
 </div>
+
+<style>
+  .map {
+    position: relative;
+  }
+
+  .map-style-switcher {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 8px;
+    z-index: 9999;
+  }
+
+  .map-style-switcher select {
+    font-size: 14px;
+  }
+
+  .map-resize-button {
+    position: absolute;
+    top: 110px;
+    right: 10px;
+    width: 29px;
+    height: 29px;
+    z-index: 9999;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+  }
+</style>
diff --git a/frontend/static/css/flugbuech.css b/frontend/static/css/flugbuech.css
index df44cf10..cd4c9e48 100644
--- a/frontend/static/css/flugbuech.css
+++ b/frontend/static/css/flugbuech.css
@@ -31,23 +31,6 @@ p + .spaced-headers {
   margin-top: 48px;
 }
 
-.map {
-  height: 400px;
-  position: relative;
-}
-
-.map-style-switcher {
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 8px;
-  z-index: 9999;
-}
-
-.map-style-switcher select {
-  font-size: 14px;
-}
-
 footer {
   color: #777;
   font-size: 0.8em;