From 1261a357adede2727cd837589434f4f4eb60cb39 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Mon, 11 May 2026 19:38:23 +0200
Subject: [PATCH] Build out feature

---
 .../GeocoderControl/GeocoderControl.stories.svelte | 14 ++++++++++++++
 .../GeocoderControl/GeocoderControl.svelte         |  6 ++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
index 31d3fdd..832bcff 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
@@ -106,6 +106,20 @@
 		</div>
 	</DesignTokens>
 </Story>
+<Story asChild name="position=top-right">
+	<DesignTokens theme="light">
+		<div class="container">
+			<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
+				<GeocoderControl
+					position="top-right"
+					languages="de"
+					service="maptiler"
+					key="V32kPHZjMa0Mkn6YvSzA"
+				/>
+			</Map>
+		</div>
+	</DesignTokens>
+</Story>
 
 <style>
 	.container {
diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
index 6854326..dcdfec6 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import maplibre from 'maplibre-gl';
+	import maplibre, { type ControlPosition } from 'maplibre-gl';
 	import MaplibreGeocoder, { type MaplibreGeocoderApi } from '@maplibre/maplibre-gl-geocoder';
 	import { MaptilerGeocoderAPI } from './GeocoderAPIs';
 	import MapControl from '../MapControl/MapControl.svelte';
@@ -36,6 +36,7 @@
 		 * Overwrite the default input placeholder
 		 */
 		placeholder?: string;
+		position?: ControlPosition;
 	}
 
 	const {
@@ -45,6 +46,7 @@
 		languages = 'en',
 		types = [],
 		placeholder,
+		position = 'top-left',
 		limit = 3
 	}: GeocoderControlProps = $props();
 
@@ -68,7 +70,7 @@
 	});
 </script>
 
-<MapControl control={geocoder} position="top-left" />
+<MapControl control={geocoder} {position} />
 
 <style lang="scss">
 	:global {