From f024e210cde6fb576317099e5d158ccb9f4c4c59 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 16 Jun 2026 17:45:23 +0200
Subject: [PATCH 1/6] Block out feature

---
 components/src/index.js                       |   1 +
 components/src/maplibre/Geocoder/Geocoder.mdx |  10 +
 .../maplibre/Geocoder/Geocoder.stories.svelte |  43 ++++
 .../src/maplibre/Geocoder/Geocoder.svelte     | 223 ++++++++++++++++++
 .../src/maplibre/Geocoder/GeocoderAPIs.ts     |  62 +++++
 .../src/maplibre/Geocoder/GeocoderProps.ts    |  37 +++
 components/src/maplibre/Geocoder/index.js     |   2 +
 .../GeocoderControl/GeocoderControl.mdx       |   4 +-
 .../GeocoderControl.stories.svelte            |   1 -
 .../src/maplibre/Map/Map.stories.svelte       |   3 +-
 .../src/maplibre/MapControl/MapControl.svelte |   4 +-
 11 files changed, 385 insertions(+), 5 deletions(-)
 create mode 100644 components/src/maplibre/Geocoder/Geocoder.mdx
 create mode 100644 components/src/maplibre/Geocoder/Geocoder.stories.svelte
 create mode 100644 components/src/maplibre/Geocoder/Geocoder.svelte
 create mode 100644 components/src/maplibre/Geocoder/GeocoderAPIs.ts
 create mode 100644 components/src/maplibre/Geocoder/GeocoderProps.ts
 create mode 100644 components/src/maplibre/Geocoder/index.js

diff --git a/components/src/index.js b/components/src/index.js
index 06dd7691..a3e4ba1d 100644
--- a/components/src/index.js
+++ b/components/src/index.js
@@ -29,6 +29,7 @@ export { default as Map } from './maplibre/Map/Map.svelte';
 export { SWRDataLabLight, SWRDataLabDark } from './maplibre/MapStyle';
 export { default as MapControl } from './maplibre/MapControl/MapControl.svelte';
 export { default as AttributionControl } from './maplibre/AttributionControl/AttributionControl.svelte';
+export { default as Geocoder } from './maplibre/Geocoder/Geocoder.svelte';
 export { default as GeocoderControl } from './maplibre/GeocoderControl/GeocoderControl.svelte';
 export { default as NavigationControl } from './maplibre/NavigationControl/NavigationControl.svelte';
 export { default as ScaleControl } from './maplibre/ScaleControl/ScaleControl.svelte';
diff --git a/components/src/maplibre/Geocoder/Geocoder.mdx b/components/src/maplibre/Geocoder/Geocoder.mdx
new file mode 100644
index 00000000..29f5e713
--- /dev/null
+++ b/components/src/maplibre/Geocoder/Geocoder.mdx
@@ -0,0 +1,10 @@
+import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
+
+import * as GeocoderStories from './Geocoder.stories.svelte';
+
+<Meta of={GeocoderStories} />
+
+# Geocoder
+
+<Primary/>
+<Controls/>
diff --git a/components/src/maplibre/Geocoder/Geocoder.stories.svelte b/components/src/maplibre/Geocoder/Geocoder.stories.svelte
new file mode 100644
index 00000000..994de852
--- /dev/null
+++ b/components/src/maplibre/Geocoder/Geocoder.stories.svelte
@@ -0,0 +1,43 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { within, expect } from 'storybook/test';
+
+	import Geocoder from './Geocoder.svelte';
+	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
+	import { SWRDataLabLight } from '../MapStyle';
+	import Map from '../Map/Map.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Maplibre/Extras/Geocoder',
+		component: Geocoder
+	});
+
+	let mapContext = $state()
+</script>
+
+<Story
+	asChild
+	name="Default"
+	play={async ({ canvasElement, step }) => {
+	}}
+>
+	<DesignTokens theme="light">
+			<Geocoder
+					languages="de"
+					service="maptiler"
+					key="V32kPHZjMa0Mkn6YvSzA"
+					map={mapContext.map}
+			/>
+		<div class="container">
+			<Map bind:mapContext style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
+			</Map>
+		</div>
+	</DesignTokens>
+</Story>
+
+<style>
+	.container {
+		width: 800px;
+		height: 300px;
+	}
+</style>
diff --git a/components/src/maplibre/Geocoder/Geocoder.svelte b/components/src/maplibre/Geocoder/Geocoder.svelte
new file mode 100644
index 00000000..7644c1c0
--- /dev/null
+++ b/components/src/maplibre/Geocoder/Geocoder.svelte
@@ -0,0 +1,223 @@
+<script lang="ts">
+	import maplibre, { Map, type ControlPosition } from 'maplibre-gl';
+	import MaplibreGeocoder, { type CarmenGeojsonFeature, type MaplibreGeocoderApi } from '@maplibre/maplibre-gl-geocoder';
+	import { MaptilerGeocoderAPI } from './GeocoderAPIs';
+	import {
+		type GeocodingCountry,
+		type GeocodingLanguage,
+		type GeocodingPlaceType,
+		type GeocodingService
+	} from '../types';
+
+	import type { Attachment } from 'svelte/attachments';
+	import type GeocoderProps from './GeocoderProps';
+
+	const {
+		key,
+		service = 'maptiler',
+		countries = 'de',
+		languages = 'en',
+		types = [],
+		placeholder,
+		limit = 3,
+		map,
+	}: GeocoderProps = $props();
+
+	const countriesArr = $derived(Array.isArray(countries) ? countries : [countries]);
+	const languagesArr = $derived(Array.isArray(languages) ? languages : [languages]);
+	const typesArr = $derived(Array.isArray(types) ? types : [types]);
+
+	// Future: initialise a different GeocoderAPI depending on "service"
+	let geocoderAPI: MaplibreGeocoderApi = $derived(new MaptilerGeocoderAPI(key));
+
+	const geocoder = $derived(new MaplibreGeocoder(geocoderAPI, {
+		maplibregl: maplibre,
+		language: languagesArr.join(','),
+		countries: countriesArr.join(','),
+		types: typesArr.join(','),
+		showResultsWhileTyping: true,
+		showResultMarkers: false,
+		debounceSearch: 25,
+		placeholder,
+		limit
+	}));
+
+	const handleResult = $derived((r: {result: CarmenGeojsonFeature})=>{
+	    const res = r.result
+	    if(res.bbox){
+					map.fitBounds([
+              [res.bbox[0], res.bbox[1]],
+              [res.bbox[2], res.bbox[3]],
+            ])
+				}
+
+	})
+
+	const attachGeocoder: Attachment = (el) => {
+			geocoder.addTo(el as HTMLElement);
+			geocoder.on("result", handleResult)
+	}
+</script>
+
+<div class="container" {@attach attachGeocoder}></div>
+
+<style lang="scss">
+	:global {
+		.maplibregl-ctrl-geocoder {
+			background-color: var(--color-pageFill);
+			position: relative;
+			width: 100%;
+			z-index: 1;
+			font-family: var(--swr-sans);
+			font-size: var(--fs-base);
+			border: 1px solid var(--color-textSecondary);
+
+			button {
+				cursor: pointer;
+			}
+			* {
+				box-sizing: border-box;
+			}
+		}
+
+		.maplibre-gl-geocoder--error {
+			font-size: var(--fs-small-2);
+			color: var(--color-textSecondary);
+			padding: 0.4em 0.65em;
+		}
+
+		.maplibregl-ctrl-geocoder--input {
+			height: 100%;
+			font-family: inherit;
+			font-size: inherit;
+			background-color: transparent;
+			color: var(--color-textPrimary);
+			border: 0;
+			height: 2em;
+			padding: 0 1.85em;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			overflow: hidden;
+			&::-webkit-search-cancel-button,
+			&::-webkit-search-decoration {
+				appearance: none;
+			}
+		}
+
+		.maplibregl-ctrl-geocoder--input::placeholder {
+			opacity: 1;
+			color: var(--color-textSecondary);
+		}
+		.maplibregl-ctrl-geocoder--input:focus {
+			color: var(--color-textPrimary);
+			outline: 0;
+		}
+
+		.maplibregl-ctrl-geocoder .maplibregl-ctrl-geocoder--pin-right > * {
+			display: none;
+			position: absolute;
+			z-index: 2;
+			right: 0.5em;
+			top: 50%;
+			transform: translateY(-50%);
+			border: 0;
+		}
+
+		/* Suggestions */
+		.maplibregl-ctrl-geocoder .suggestions {
+			background: var(--color-pageFill);
+			border: 1px solid var(--color-textSecondary);
+			left: -1px;
+			list-style: none;
+			position: absolute;
+			width: calc(100% + 2px);
+			top: 100%;
+			z-index: 1000;
+			overflow: hidden;
+		}
+
+		.maplibregl-ctrl-bottom-left .suggestions,
+		.maplibregl-ctrl-bottom-right .suggestions {
+			top: auto;
+			bottom: 100%;
+		}
+
+		.maplibregl-ctrl-geocoder .suggestions > li > a {
+			cursor: default;
+			display: block;
+			font-size: var(--fs-small-1);
+			padding: 0.7em 0.75em;
+			padding-bottom: 0.65em;
+			border-bottom: 1px solid var(--color-surfaceBorder);
+		}
+		.maplibregl-ctrl-geocoder .suggestions > li:last-child > a {
+			border-bottom: 0;
+		}
+
+		.maplibregl-ctrl-geocoder .suggestions > .active > a,
+		.maplibregl-ctrl-geocoder .suggestions > li > a:hover {
+			background: var(--color-surfaceHover);
+			text-decoration: none;
+			cursor: pointer;
+		}
+		.maplibregl-ctrl-geocoder .suggestions > .active .maplibregl-ctrl-geocoder--result-title,
+		.maplibregl-ctrl-geocoder .suggestions > li > a:hover .maplibregl-ctrl-geocoder--result-title {
+			text-decoration: underline;
+		}
+
+		.maplibregl-ctrl-geocoder--suggestion {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+		}
+
+		.maplibregl-ctrl-geocoder--suggestion-info {
+			display: flex;
+			flex-direction: column;
+		}
+
+		.maplibregl-ctrl-geocoder--suggestion-title,
+		.maplibregl-ctrl-geocoder--suggestion-address,
+		.maplibregl-ctrl-geocoder--result-address {
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
+		}
+
+		.maplibregl-ctrl-geocoder--result-icon {
+			display: none;
+		}
+		.maplibregl-ctrl-geocoder--result-title {
+			color: var(--color-textPrimary);
+			font-weight: 600;
+			letter-spacing: 0;
+		}
+		.maplibregl-ctrl-geocoder--result-address {
+			font-size: var(--fs-small-2);
+			color: var(--color-textSecondary);
+			line-height: 1.3;
+		}
+
+		.maplibregl-ctrl-geocoder--icon {
+			display: inline-block;
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			path {
+				fill: var(--color-textPrimary);
+			}
+		}
+
+		.maplibregl-ctrl-geocoder--icon-close {
+			right: 0;
+			height: 1.15em;
+			opacity: 0.5;
+		}
+		.maplibregl-ctrl-geocoder--icon-search {
+			left: 0.4em;
+			height: 1.25em;
+			top: 51%; // optical correction
+			width: auto;
+		}
+	}
+</style>
diff --git a/components/src/maplibre/Geocoder/GeocoderAPIs.ts b/components/src/maplibre/Geocoder/GeocoderAPIs.ts
new file mode 100644
index 00000000..5cd82931
--- /dev/null
+++ b/components/src/maplibre/Geocoder/GeocoderAPIs.ts
@@ -0,0 +1,62 @@
+import {
+	type CarmenGeojsonFeature,
+	type MaplibreGeocoderApi,
+	type MaplibreGeocoderApiConfig,
+	type MaplibreGeocoderFeatureResults
+} from '@maplibre/maplibre-gl-geocoder';
+
+export class MaptilerGeocoderAPI implements MaplibreGeocoderApi {
+	key: string;
+
+	constructor(key: string) {
+		this.key = key;
+	}
+
+	async forwardGeocode(config: MaplibreGeocoderApiConfig): Promise<MaplibreGeocoderFeatureResults> {
+		const result: MaplibreGeocoderFeatureResults = {
+			type: 'FeatureCollection',
+			features: []
+		};
+		try {
+			const params = new URLSearchParams(
+				Object.fromEntries(
+					Object.entries({
+						country: config.countries || '',
+						language: config.language || '',
+						types: config.types || '',
+						key: this.key || ''
+					}).filter(([_, value]) => {
+						return value !== '';
+					})
+				)
+			);
+
+			const response = await fetch(
+				`https://api.maptiler.com/geocoding/${config.query}.json?${params.toString()}`
+			);
+			const geojson = await response.json();
+			for (const feature of geojson.features) {
+				const res: CarmenGeojsonFeature = {
+					type: 'Feature',
+					id: feature.id,
+					place_type: ['place'],
+					place_name: feature.place_name,
+					language: feature.properties.display_name,
+					text: feature.text,
+					bbox: feature.bbox,
+					geometry: {
+						type: 'Point',
+						coordinates: feature.center
+					},
+					properties: {
+						text: feature.text
+					}
+				};
+				result.features.push(res);
+			}
+		} catch (e) {
+			console.error(`Failed to forwardGeocode with error: ${e}`);
+		}
+		return result;
+	}
+}
diff --git a/components/src/maplibre/Geocoder/GeocoderProps.ts b/components/src/maplibre/Geocoder/GeocoderProps.ts
new file mode 100644
index 00000000..86dbe744
--- /dev/null
+++ b/components/src/maplibre/Geocoder/GeocoderProps.ts
@@ -0,0 +1,37 @@
+import { Map } from "maplibre-gl";
+import {
+		type GeocodingCountry,
+		type GeocodingLanguage,
+		type GeocodingPlaceType,
+		type GeocodingService
+	} from '../types';
+
+
+export default interface GeocoderProps {
+	  map: Map
+		service: GeocodingService;
+		/**
+		 * API key for selected geocoding `service`
+		 */
+		key: string;
+		/**
+		 * Limit the number of returned suggestions
+		 */
+		limit?: number;
+		/**
+		 * Limit search to one or more countries
+		 */
+		countries?: GeocodingCountry | GeocodingCountry[];
+		/**
+		 * Limit search to one or more result type.
+		 */
+		types?: GeocodingPlaceType | GeocodingPlaceType[];
+		/**
+		 * Limit search to one or more languages. The UI is localised to the first language specified if [available](https://github.com/maplibre/maplibre-gl-geocoder/blob/main/lib/localization.ts).
+		 */
+		languages?: GeocodingLanguage | GeocodingLanguage[];
+		/**
+		 * Overwrite the default input placeholder
+		 */
+		placeholder?: string;
+	}
diff --git a/components/src/maplibre/Geocoder/index.js b/components/src/maplibre/Geocoder/index.js
new file mode 100644
index 00000000..ef694f5f
--- /dev/null
+++ b/components/src/maplibre/Geocoder/index.js
@@ -0,0 +1,2 @@
+import Geocoder from './Geocoder.svelte';
+export default Geocoder;
diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.mdx b/components/src/maplibre/GeocoderControl/GeocoderControl.mdx
index b4d13201..d0a141a3 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.mdx
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.mdx
@@ -14,10 +14,10 @@ import * as GeocoderControlStories from './GeocoderControl.stories.svelte';
 Maptiler doesn't allow filtering by German admin boundaries, but its `types` seem to map as follows:
 
 <table>
-<thead>
+<tr>
 <th>type</th>
 <th>boundary</th>
-</thead>
+</tr>
 <tr><td>county</td><td>Kreis</td></tr>
 <tr><td>municipality</td><td>Gemeinde</td></tr>
 <tr><td>region</td><td>Bundesland</td></tr>
diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
index 31c2f53f..36862a7c 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
@@ -35,7 +35,6 @@
 		<div class="container">
 			<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
 				<GeocoderControl
-					size="large"
 					languages="de"
 					service="maptiler"
 					key="V32kPHZjMa0Mkn6YvSzA"
diff --git a/components/src/maplibre/Map/Map.stories.svelte b/components/src/maplibre/Map/Map.stories.svelte
index a4b1a42b..cf565b1a 100644
--- a/components/src/maplibre/Map/Map.stories.svelte
+++ b/components/src/maplibre/Map/Map.stories.svelte
@@ -26,7 +26,8 @@
 		component: Map
 	});
 
-	let mapContext: MapContext;
+	let mapContext: MapContext | undefined = $state();
+
 	const onMoveStart = fn();
 
 	let mapOptions = $state({
diff --git a/components/src/maplibre/MapControl/MapControl.svelte b/components/src/maplibre/MapControl/MapControl.svelte
index 6ea96462..332e8e88 100644
--- a/components/src/maplibre/MapControl/MapControl.svelte
+++ b/components/src/maplibre/MapControl/MapControl.svelte
@@ -29,7 +29,9 @@
 			map.addControl(ctrl, position);
 		}
 		return () => {
-			map?.removeControl(control);
+		  if (control){
+			  map?.removeControl(control);
+		  }
 		};
 	});
 </script>

From aef13eece3bd4171c328b58f70a2366cb648181e Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 16 Jun 2026 17:57:19 +0200
Subject: [PATCH 2/6] refactor

---
 .../maplibre/Geocoder/Geocoder.stories.svelte |  28 ++-
 .../src/maplibre/Geocoder/Geocoder.svelte     | 169 +--------------
 .../src/maplibre/Geocoder/GeocoderProps.ts    |   2 +-
 .../src/maplibre/Geocoder/geocoder.scss       | 158 ++++++++++++++
 .../GeocoderControl/GeocoderControl.mdx       |   2 +
 .../GeocoderControl/GeocoderControl.svelte    | 193 +-----------------
 6 files changed, 185 insertions(+), 367 deletions(-)
 create mode 100644 components/src/maplibre/Geocoder/geocoder.scss

diff --git a/components/src/maplibre/Geocoder/Geocoder.stories.svelte b/components/src/maplibre/Geocoder/Geocoder.stories.svelte
index 994de852..54d9b6d9 100644
--- a/components/src/maplibre/Geocoder/Geocoder.stories.svelte
+++ b/components/src/maplibre/Geocoder/Geocoder.stories.svelte
@@ -6,13 +6,14 @@
 	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
 	import { SWRDataLabLight } from '../MapStyle';
 	import Map from '../Map/Map.svelte';
+	import type { MapContext } from '../context.svelte';
 
 	const { Story } = defineMeta({
 		title: 'Maplibre/Extras/Geocoder',
 		component: Geocoder
 	});
 
-	let mapContext = $state()
+	let mapContext: MapContext | undefined = $state(undefined)
 </script>
 
 <Story
@@ -22,22 +23,29 @@
 	}}
 >
 	<DesignTokens theme="light">
+	<div class="container">
 			<Geocoder
-					languages="de"
-					service="maptiler"
-					key="V32kPHZjMa0Mkn6YvSzA"
-					map={mapContext.map}
-			/>
-		<div class="container">
-			<Map bind:mapContext style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
-			</Map>
+				languages="de"
+				service="maptiler"
+				key="V32kPHZjMa0Mkn6YvSzA"
+				map={mapContext?.map}
+		/>
+		<div class="map-container">
+		  <Map bind:mapContext style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}/>
 		</div>
+	</div>
 	</DesignTokens>
 </Story>
 
 <style>
-	.container {
+  .container {
+    display: flex;
+    flex-flow: column;
+    gap: 1rem;
 		width: 800px;
+  }
+	.map-container {
 		height: 300px;
+		border: 1px solid darkgrey;
 	}
 </style>
diff --git a/components/src/maplibre/Geocoder/Geocoder.svelte b/components/src/maplibre/Geocoder/Geocoder.svelte
index 7644c1c0..7e3aac5a 100644
--- a/components/src/maplibre/Geocoder/Geocoder.svelte
+++ b/components/src/maplibre/Geocoder/Geocoder.svelte
@@ -1,13 +1,7 @@
 <script lang="ts">
-	import maplibre, { Map, type ControlPosition } from 'maplibre-gl';
+	import maplibre from 'maplibre-gl';
 	import MaplibreGeocoder, { type CarmenGeojsonFeature, type MaplibreGeocoderApi } from '@maplibre/maplibre-gl-geocoder';
 	import { MaptilerGeocoderAPI } from './GeocoderAPIs';
-	import {
-		type GeocodingCountry,
-		type GeocodingLanguage,
-		type GeocodingPlaceType,
-		type GeocodingService
-	} from '../types';
 
 	import type { Attachment } from 'svelte/attachments';
 	import type GeocoderProps from './GeocoderProps';
@@ -44,7 +38,7 @@
 
 	const handleResult = $derived((r: {result: CarmenGeojsonFeature})=>{
 	    const res = r.result
-	    if(res.bbox){
+	    if(res.bbox && map){
 					map.fitBounds([
               [res.bbox[0], res.bbox[1]],
               [res.bbox[2], res.bbox[3]],
@@ -62,162 +56,5 @@
 <div class="container" {@attach attachGeocoder}></div>
 
 <style lang="scss">
-	:global {
-		.maplibregl-ctrl-geocoder {
-			background-color: var(--color-pageFill);
-			position: relative;
-			width: 100%;
-			z-index: 1;
-			font-family: var(--swr-sans);
-			font-size: var(--fs-base);
-			border: 1px solid var(--color-textSecondary);
-
-			button {
-				cursor: pointer;
-			}
-			* {
-				box-sizing: border-box;
-			}
-		}
-
-		.maplibre-gl-geocoder--error {
-			font-size: var(--fs-small-2);
-			color: var(--color-textSecondary);
-			padding: 0.4em 0.65em;
-		}
-
-		.maplibregl-ctrl-geocoder--input {
-			height: 100%;
-			font-family: inherit;
-			font-size: inherit;
-			background-color: transparent;
-			color: var(--color-textPrimary);
-			border: 0;
-			height: 2em;
-			padding: 0 1.85em;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			overflow: hidden;
-			&::-webkit-search-cancel-button,
-			&::-webkit-search-decoration {
-				appearance: none;
-			}
-		}
-
-		.maplibregl-ctrl-geocoder--input::placeholder {
-			opacity: 1;
-			color: var(--color-textSecondary);
-		}
-		.maplibregl-ctrl-geocoder--input:focus {
-			color: var(--color-textPrimary);
-			outline: 0;
-		}
-
-		.maplibregl-ctrl-geocoder .maplibregl-ctrl-geocoder--pin-right > * {
-			display: none;
-			position: absolute;
-			z-index: 2;
-			right: 0.5em;
-			top: 50%;
-			transform: translateY(-50%);
-			border: 0;
-		}
-
-		/* Suggestions */
-		.maplibregl-ctrl-geocoder .suggestions {
-			background: var(--color-pageFill);
-			border: 1px solid var(--color-textSecondary);
-			left: -1px;
-			list-style: none;
-			position: absolute;
-			width: calc(100% + 2px);
-			top: 100%;
-			z-index: 1000;
-			overflow: hidden;
-		}
-
-		.maplibregl-ctrl-bottom-left .suggestions,
-		.maplibregl-ctrl-bottom-right .suggestions {
-			top: auto;
-			bottom: 100%;
-		}
-
-		.maplibregl-ctrl-geocoder .suggestions > li > a {
-			cursor: default;
-			display: block;
-			font-size: var(--fs-small-1);
-			padding: 0.7em 0.75em;
-			padding-bottom: 0.65em;
-			border-bottom: 1px solid var(--color-surfaceBorder);
-		}
-		.maplibregl-ctrl-geocoder .suggestions > li:last-child > a {
-			border-bottom: 0;
-		}
-
-		.maplibregl-ctrl-geocoder .suggestions > .active > a,
-		.maplibregl-ctrl-geocoder .suggestions > li > a:hover {
-			background: var(--color-surfaceHover);
-			text-decoration: none;
-			cursor: pointer;
-		}
-		.maplibregl-ctrl-geocoder .suggestions > .active .maplibregl-ctrl-geocoder--result-title,
-		.maplibregl-ctrl-geocoder .suggestions > li > a:hover .maplibregl-ctrl-geocoder--result-title {
-			text-decoration: underline;
-		}
-
-		.maplibregl-ctrl-geocoder--suggestion {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-		}
-
-		.maplibregl-ctrl-geocoder--suggestion-info {
-			display: flex;
-			flex-direction: column;
-		}
-
-		.maplibregl-ctrl-geocoder--suggestion-title,
-		.maplibregl-ctrl-geocoder--suggestion-address,
-		.maplibregl-ctrl-geocoder--result-address {
-			text-overflow: ellipsis;
-			overflow: hidden;
-			white-space: nowrap;
-		}
-
-		.maplibregl-ctrl-geocoder--result-icon {
-			display: none;
-		}
-		.maplibregl-ctrl-geocoder--result-title {
-			color: var(--color-textPrimary);
-			font-weight: 600;
-			letter-spacing: 0;
-		}
-		.maplibregl-ctrl-geocoder--result-address {
-			font-size: var(--fs-small-2);
-			color: var(--color-textSecondary);
-			line-height: 1.3;
-		}
-
-		.maplibregl-ctrl-geocoder--icon {
-			display: inline-block;
-			position: absolute;
-			top: 50%;
-			transform: translateY(-50%);
-			path {
-				fill: var(--color-textPrimary);
-			}
-		}
-
-		.maplibregl-ctrl-geocoder--icon-close {
-			right: 0;
-			height: 1.15em;
-			opacity: 0.5;
-		}
-		.maplibregl-ctrl-geocoder--icon-search {
-			left: 0.4em;
-			height: 1.25em;
-			top: 51%; // optical correction
-			width: auto;
-		}
-	}
+  @use "geocoder.scss"
 </style>
diff --git a/components/src/maplibre/Geocoder/GeocoderProps.ts b/components/src/maplibre/Geocoder/GeocoderProps.ts
index 86dbe744..c19633f4 100644
--- a/components/src/maplibre/Geocoder/GeocoderProps.ts
+++ b/components/src/maplibre/Geocoder/GeocoderProps.ts
@@ -8,7 +8,7 @@ import {
 
 
 export default interface GeocoderProps {
-	  map: Map
+	  map?: Map | null
 		service: GeocodingService;
 		/**
 		 * API key for selected geocoding `service`
diff --git a/components/src/maplibre/Geocoder/geocoder.scss b/components/src/maplibre/Geocoder/geocoder.scss
new file mode 100644
index 00000000..4e875833
--- /dev/null
+++ b/components/src/maplibre/Geocoder/geocoder.scss
@@ -0,0 +1,158 @@
+	:global {
+		.maplibregl-ctrl-geocoder {
+			background-color: var(--color-pageFill);
+			position: relative;
+			width: 100%;
+			z-index: 1;
+			font-family: var(--swr-sans);
+			font-size: var(--fs-base);
+			border: 1px solid var(--color-textSecondary);
+
+			button {
+				cursor: pointer;
+			}
+			* {
+				box-sizing: border-box;
+			}
+		}
+
+		.maplibre-gl-geocoder--error {
+			font-size: var(--fs-small-2);
+			color: var(--color-textSecondary);
+			padding: 0.4em 0.65em;
+		}
+
+		.maplibregl-ctrl-geocoder--input {
+			height: 100%;
+			font-family: inherit;
+			font-size: inherit;
+			background-color: transparent;
+			color: var(--color-textPrimary);
+			border: 0;
+			height: 2em;
+			padding: 0 1.85em;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			overflow: hidden;
+			&::-webkit-search-cancel-button,
+			&::-webkit-search-decoration {
+				appearance: none;
+			}
+		}
+
+		.maplibregl-ctrl-geocoder--input::placeholder {
+			opacity: 1;
+			color: var(--color-textSecondary);
+		}
+		.maplibregl-ctrl-geocoder--input:focus {
+			color: var(--color-textPrimary);
+			outline: 0;
+		}
+
+		.maplibregl-ctrl-geocoder .maplibregl-ctrl-geocoder--pin-right > * {
+			display: none;
+			position: absolute;
+			z-index: 2;
+			right: 0.5em;
+			top: 50%;
+			transform: translateY(-50%);
+			border: 0;
+		}
+
+		/* Suggestions */
+		.maplibregl-ctrl-geocoder .suggestions {
+			background: var(--color-pageFill);
+			border: 1px solid var(--color-textSecondary);
+			left: -1px;
+			list-style: none;
+			position: absolute;
+			width: calc(100% + 2px);
+			top: 100%;
+			z-index: 1000;
+			overflow: hidden;
+		}
+
+		.maplibregl-ctrl-bottom-left .suggestions,
+		.maplibregl-ctrl-bottom-right .suggestions {
+			top: auto;
+			bottom: 100%;
+		}
+
+		.maplibregl-ctrl-geocoder .suggestions > li > a {
+			cursor: default;
+			display: block;
+			font-size: var(--fs-small-1);
+			padding: 0.7em 0.75em;
+			padding-bottom: 0.65em;
+			border-bottom: 1px solid var(--color-surfaceBorder);
+		}
+		.maplibregl-ctrl-geocoder .suggestions > li:last-child > a {
+			border-bottom: 0;
+		}
+
+		.maplibregl-ctrl-geocoder .suggestions > .active > a,
+		.maplibregl-ctrl-geocoder .suggestions > li > a:hover {
+			background: var(--color-surfaceHover);
+			text-decoration: none;
+			cursor: pointer;
+		}
+		.maplibregl-ctrl-geocoder .suggestions > .active .maplibregl-ctrl-geocoder--result-title,
+		.maplibregl-ctrl-geocoder .suggestions > li > a:hover .maplibregl-ctrl-geocoder--result-title {
+			text-decoration: underline;
+		}
+
+		.maplibregl-ctrl-geocoder--suggestion {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+		}
+
+		.maplibregl-ctrl-geocoder--suggestion-info {
+			display: flex;
+			flex-direction: column;
+		}
+
+		.maplibregl-ctrl-geocoder--suggestion-title,
+		.maplibregl-ctrl-geocoder--suggestion-address,
+		.maplibregl-ctrl-geocoder--result-address {
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
+		}
+
+		.maplibregl-ctrl-geocoder--result-icon {
+			display: none;
+		}
+		.maplibregl-ctrl-geocoder--result-title {
+			color: var(--color-textPrimary);
+			font-weight: 600;
+			letter-spacing: 0;
+		}
+		.maplibregl-ctrl-geocoder--result-address {
+			font-size: var(--fs-small-2);
+			color: var(--color-textSecondary);
+			line-height: 1.3;
+		}
+
+		.maplibregl-ctrl-geocoder--icon {
+			display: inline-block;
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			path {
+				fill: var(--color-textPrimary);
+			}
+		}
+
+		.maplibregl-ctrl-geocoder--icon-close {
+			right: 0;
+			height: 1.15em;
+			opacity: 0.5;
+		}
+		.maplibregl-ctrl-geocoder--icon-search {
+			left: 0.4em;
+			height: 1.25em;
+			top: 51%; // optical correction
+			width: auto;
+		}
+	}
diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.mdx b/components/src/maplibre/GeocoderControl/GeocoderControl.mdx
index d0a141a3..4527fefb 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.mdx
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.mdx
@@ -14,6 +14,7 @@ import * as GeocoderControlStories from './GeocoderControl.stories.svelte';
 Maptiler doesn't allow filtering by German admin boundaries, but its `types` seem to map as follows:
 
 <table>
+  <tbody>
 <tr>
 <th>type</th>
 <th>boundary</th>
@@ -21,4 +22,5 @@ Maptiler doesn't allow filtering by German admin boundaries, but its `types` see
 <tr><td>county</td><td>Kreis</td></tr>
 <tr><td>municipality</td><td>Gemeinde</td></tr>
 <tr><td>region</td><td>Bundesland</td></tr>
+  </tbody>
 </table>
diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
index 9864406c..403e174b 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
@@ -3,39 +3,9 @@
 	import MaplibreGeocoder, { type MaplibreGeocoderApi } from '@maplibre/maplibre-gl-geocoder';
 	import { MaptilerGeocoderAPI } from './GeocoderAPIs';
 	import MapControl from '../MapControl/MapControl.svelte';
-	import {
-		type GeocodingCountry,
-		type GeocodingLanguage,
-		type GeocodingPlaceType,
-		type GeocodingService
-	} from '../types';
+	import type GeocoderProps from '../Geocoder/GeocoderProps';
 
-	interface GeocoderControlProps {
-		service: GeocodingService;
-		/**
-		 * API key for selected geocoding `service`
-		 */
-		key: string;
-		/**
-		 * Limit the number of returned suggestions
-		 */
-		limit?: number;
-		/**
-		 * Limit search to one or more countries
-		 */
-		countries?: GeocodingCountry | GeocodingCountry[];
-		/**
-		 * Limit search to one or more result type.
-		 */
-		types?: GeocodingPlaceType | GeocodingPlaceType[];
-		/**
-		 * Limit search to one or more languages. The UI is localised to the first language specified if [available](https://github.com/maplibre/maplibre-gl-geocoder/blob/main/lib/localization.ts).
-		 */
-		languages?: GeocodingLanguage | GeocodingLanguage[];
-		/**
-		 * Overwrite the default input placeholder
-		 */
-		placeholder?: string;
+	interface GeocoderControlProps extends Omit<GeocoderProps, "map">{
 		position?: ControlPosition;
 	}
 
@@ -73,162 +43,5 @@
 <MapControl control={geocoder} {position} />
 
 <style lang="scss">
-	:global {
-		.maplibregl-ctrl-geocoder {
-			background-color: var(--color-pageFill);
-			position: relative;
-			width: 100%;
-			z-index: 1;
-			font-family: var(--swr-sans);
-			font-size: var(--fs-base);
-			border: 1px solid var(--color-textSecondary);
-
-			button {
-				cursor: pointer;
-			}
-			* {
-				box-sizing: border-box;
-			}
-		}
-
-		.maplibre-gl-geocoder--error {
-			font-size: var(--fs-small-2);
-			color: var(--color-textSecondary);
-			padding: 0.4em 0.65em;
-		}
-
-		.maplibregl-ctrl-geocoder--input {
-			height: 100%;
-			font-family: inherit;
-			font-size: inherit;
-			background-color: transparent;
-			color: var(--color-textPrimary);
-			border: 0;
-			height: 2em;
-			padding: 0 1.85em;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			overflow: hidden;
-			&::-webkit-search-cancel-button,
-			&::-webkit-search-decoration {
-				appearance: none;
-			}
-		}
-
-		.maplibregl-ctrl-geocoder--input::placeholder {
-			opacity: 1;
-			color: var(--color-textSecondary);
-		}
-		.maplibregl-ctrl-geocoder--input:focus {
-			color: var(--color-textPrimary);
-			outline: 0;
-		}
-
-		.maplibregl-ctrl-geocoder .maplibregl-ctrl-geocoder--pin-right > * {
-			display: none;
-			position: absolute;
-			z-index: 2;
-			right: 0.5em;
-			top: 50%;
-			transform: translateY(-50%);
-			border: 0;
-		}
-
-		/* Suggestions */
-		.maplibregl-ctrl-geocoder .suggestions {
-			background: var(--color-pageFill);
-			border: 1px solid var(--color-textSecondary);
-			left: -1px;
-			list-style: none;
-			position: absolute;
-			width: calc(100% + 2px);
-			top: 100%;
-			z-index: 1000;
-			overflow: hidden;
-		}
-
-		.maplibregl-ctrl-bottom-left .suggestions,
-		.maplibregl-ctrl-bottom-right .suggestions {
-			top: auto;
-			bottom: 100%;
-		}
-
-		.maplibregl-ctrl-geocoder .suggestions > li > a {
-			cursor: default;
-			display: block;
-			font-size: var(--fs-small-1);
-			padding: 0.7em 0.75em;
-			padding-bottom: 0.65em;
-			border-bottom: 1px solid var(--color-surfaceBorder);
-		}
-		.maplibregl-ctrl-geocoder .suggestions > li:last-child > a {
-			border-bottom: 0;
-		}
-
-		.maplibregl-ctrl-geocoder .suggestions > .active > a,
-		.maplibregl-ctrl-geocoder .suggestions > li > a:hover {
-			background: var(--color-surfaceHover);
-			text-decoration: none;
-			cursor: pointer;
-		}
-		.maplibregl-ctrl-geocoder .suggestions > .active .maplibregl-ctrl-geocoder--result-title,
-		.maplibregl-ctrl-geocoder .suggestions > li > a:hover .maplibregl-ctrl-geocoder--result-title {
-			text-decoration: underline;
-		}
-
-		.maplibregl-ctrl-geocoder--suggestion {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-		}
-
-		.maplibregl-ctrl-geocoder--suggestion-info {
-			display: flex;
-			flex-direction: column;
-		}
-
-		.maplibregl-ctrl-geocoder--suggestion-title,
-		.maplibregl-ctrl-geocoder--suggestion-address,
-		.maplibregl-ctrl-geocoder--result-address {
-			text-overflow: ellipsis;
-			overflow: hidden;
-			white-space: nowrap;
-		}
-
-		.maplibregl-ctrl-geocoder--result-icon {
-			display: none;
-		}
-		.maplibregl-ctrl-geocoder--result-title {
-			color: var(--color-textPrimary);
-			font-weight: 600;
-			letter-spacing: 0;
-		}
-		.maplibregl-ctrl-geocoder--result-address {
-			font-size: var(--fs-small-2);
-			color: var(--color-textSecondary);
-			line-height: 1.3;
-		}
-
-		.maplibregl-ctrl-geocoder--icon {
-			display: inline-block;
-			position: absolute;
-			top: 50%;
-			transform: translateY(-50%);
-			path {
-				fill: var(--color-textPrimary);
-			}
-		}
-
-		.maplibregl-ctrl-geocoder--icon-close {
-			right: 0;
-			height: 1.15em;
-			opacity: 0.5;
-		}
-		.maplibregl-ctrl-geocoder--icon-search {
-			left: 0.4em;
-			height: 1.25em;
-			top: 51%; // optical correction
-			width: auto;
-		}
-	}
+  @use "../Geocoder/geocoder.scss"
 </style>

From a8c965f9fe41dffa62f6a48af70c9c0228238123 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 16 Jun 2026 18:06:00 +0200
Subject: [PATCH 3/6] fix ts warnings

---
 components/src/maplibre/Map/Map.stories.svelte | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/src/maplibre/Map/Map.stories.svelte b/components/src/maplibre/Map/Map.stories.svelte
index cf565b1a..f92648b4 100644
--- a/components/src/maplibre/Map/Map.stories.svelte
+++ b/components/src/maplibre/Map/Map.stories.svelte
@@ -116,13 +116,13 @@
 			<button
 				data-testid="flyto-berlin"
 				onclick={() => {
-					mapContext.map?.flyTo({ center: [13.3849, 52.5026], zoom: 9.8 });
+					mapContext?.map?.flyTo({ center: [13.3849, 52.5026], zoom: 9.8 });
 				}}>Fly to Berlin</button
 			>
 			<button
 				data-testid="flyto-origin"
 				onclick={() => {
-					mapContext.map?.flyTo({ center: [10.43, 50.88], zoom: 5 });
+					mapContext?.map?.flyTo({ center: [10.43, 50.88], zoom: 5 });
 				}}>Reset</button
 			>
 			<Map
@@ -148,22 +148,22 @@
 
 		await step('toggle zoom off', async () => {
 			await userEvent.click(toggleZoomButton);
-			expect(mapContext.map?.scrollZoom.isEnabled()).toBe(false);
+			expect(mapContext?.map?.scrollZoom.isEnabled()).toBe(false);
 		});
 
 		await step('toggle zoom on', async () => {
 			await userEvent.click(toggleZoomButton);
-			expect(mapContext.map?.scrollZoom.isEnabled()).toBe(true);
+			expect(mapContext?.map?.scrollZoom.isEnabled()).toBe(true);
 		});
 
 		await step('toggle pan off', async () => {
 			await userEvent.click(togglePanButton);
-			expect(mapContext.map?.dragPan.isEnabled()).toBe(false);
+			expect(mapContext?.map?.dragPan.isEnabled()).toBe(false);
 		});
 
 		await step('toggle pan on', async () => {
 			await userEvent.click(togglePanButton);
-			expect(mapContext.map?.dragPan.isEnabled()).toBe(true);
+			expect(mapContext?.map?.dragPan.isEnabled()).toBe(true);
 		});
 	}}
 >

From f9d51f6bcfcae12ff9e3a7eb4902c18a57da117c Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 16 Jun 2026 18:09:27 +0200
Subject: [PATCH 4/6] Fix compiler warnings

---
 components/src/maplibre/Map/Map.svelte                 |  3 ++-
 .../maplibre/WithLinkLocation/WithLinkLocation.svelte  | 10 +++-------
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/components/src/maplibre/Map/Map.svelte b/components/src/maplibre/Map/Map.svelte
index 530b1397..6693e7b0 100644
--- a/components/src/maplibre/Map/Map.svelte
+++ b/components/src/maplibre/Map/Map.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import maplibre, {
 		type LngLatBoundsLike,
+		type LngLatBounds,
 		type LngLatLike,
 		type MapLibreEvent,
 		type ProjectionSpecification,
@@ -202,7 +203,7 @@
 	const handleDebugCopyBoundsClick = (e: MouseEvent) => {
 		if (e.target) {
 			const s = JSON.stringify(
-				bounds.toArray().map((ll: [number, number]) => ll.map((c: number) => c.toFixed(3)))
+				bounds?.toArray().map((ll: [number, number]) => ll.map((c: number) => c.toFixed(3)))
 			);
 			navigator.clipboard.writeText(s);
 		}
diff --git a/components/src/maplibre/WithLinkLocation/WithLinkLocation.svelte b/components/src/maplibre/WithLinkLocation/WithLinkLocation.svelte
index 30df757f..f6afc615 100644
--- a/components/src/maplibre/WithLinkLocation/WithLinkLocation.svelte
+++ b/components/src/maplibre/WithLinkLocation/WithLinkLocation.svelte
@@ -43,14 +43,10 @@
 		children
 	}: WithLinkLocationProps = $props();
 
-	const countriesArr = Array.isArray(countries) ? countries : [countries];
-	const languagesArr = Array.isArray(languages) ? languages : [languages];
+	const countriesArr = $derived(Array.isArray(countries) ? countries : [countries]);
+	const languagesArr = $derived(Array.isArray(languages) ? languages : [languages]);
 
-	let geocoder: MaplibreGeocoderApi;
-
-	if (service === 'maptiler') {
-		geocoder = new MaptilerGeocoderAPI(key);
-	}
+	const geocoder: MaplibreGeocoderApi = $derived(new MaptilerGeocoderAPI(key));
 
 	let location: any = $state({});
 

From b047734e0d51a345187820bc4d8a0b0dc08f473d Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 16 Jun 2026 18:13:10 +0200
Subject: [PATCH 5/6] rebiuld lockfile

---
 package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 0acb1002..a1fd68da 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,7 +42,7 @@
 				"@sveltejs/vite-plugin-svelte": "7.1.2",
 				"@types/geojson": "7946.0.16",
 				"@versatiles/style": "5.7.0",
-				"@vitest/browser": "^4.1.9",
+				"@vitest/browser": "4.1.9",
 				"@vitest/browser-playwright": "4.1.7",
 				"@vitest/coverage-v8": "4.1.7",
 				"@vueless/storybook-dark-mode": "9.0.8",

From 527ba4c4e3a38b021a532a4587a1b1ee4032bf62 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 16 Jun 2026 18:36:15 +0200
Subject: [PATCH 6/6] Tweak layout

---
 components/src/maplibre/Geocoder/geocoder.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/src/maplibre/Geocoder/geocoder.scss b/components/src/maplibre/Geocoder/geocoder.scss
index 4e875833..91b7cd69 100644
--- a/components/src/maplibre/Geocoder/geocoder.scss
+++ b/components/src/maplibre/Geocoder/geocoder.scss
@@ -31,6 +31,7 @@
 			border: 0;
 			height: 2em;
 			padding: 0 1.85em;
+			width: 100%;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 			overflow: hidden;
@@ -145,9 +146,12 @@
 		}
 
 		.maplibregl-ctrl-geocoder--icon-close {
-			right: 0;
+			right: .25em;
 			height: 1.15em;
-			opacity: 0.5;
+			opacity: 0.65;
+			&:hover, &:focus-visible {
+			  opacity: 1;
+			}
 		}
 		.maplibregl-ctrl-geocoder--icon-search {
 			left: 0.4em;