feat(Geocoder, GeocoderControl): Add proximity prop

components/src/maplibre/Geocoder/Geocoder.svelte

@@ -16,6 +16,7 @@
 		languages = 'en',
 		types = [],
 		bbox,
+		proximity,
 		placeholder,
 		limit = 3,
 		size = 'default',
@@ -35,7 +36,9 @@
 			language: languagesArr.join(','),
 			countries: countriesArr.join(','),
 			types: typesArr.join(','),
-			bbox: bbox,
+			bbox,
+			trackProximity: !proximity,
+			proximity,
 			showResultsWhileTyping: true,
 			showResultMarkers: false,
 			debounceSearch: 25,

components/src/maplibre/Geocoder/GeocoderAPIs.ts

@@ -17,13 +17,15 @@ export class MaptilerGeocoderAPI implements MaplibreGeocoderApi {
 			type: 'FeatureCollection',
 			features: []
 		};
+
 		try {
 			const params = new URLSearchParams(
 				Object.fromEntries(
 					Object.entries({
 						country: config.countries || '',
 						language: config.language || '',
 						types: config.types || '',
+						proximity: config.proximity?.join(',') || '',
 						bbox: config.bbox?.join(',') || '',
 						key: this.key || ''
 					}).filter(([_, value]) => {

components/src/maplibre/Geocoder/GeocoderProps.ts

@@ -29,6 +29,10 @@ export default interface GeocoderProps {
 	 * Limit search to a [w, s, e, n] bounding box
 	 */
 	bbox?: number[];
+	/**
+	 * A coordinate pair to bias search results
+	 */
+	proximity?: { longitude: number; latitude: number };
 	/**
 	 * 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).
 	 */

components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte

@@ -131,6 +131,22 @@
 		</div>
 	</DesignTokens>
 </Story>
+<Story asChild name="proximity">
+	<DesignTokens theme="light">
+		<div class="container">
+			<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
+				<GeocoderControl
+					position="top-right"
+					languages="de"
+					service="maptiler"
+					placeholder="Try 'Konstanz'"
+					proximity={{ longitude: 9.136, latitude: 48.617 }}
+					key="V32kPHZjMa0Mkn6YvSzA"
+				/>
+			</Map>
+		</div>
+	</DesignTokens>
+</Story>
 
 <style>
 	.container {

components/src/maplibre/GeocoderControl/GeocoderControl.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import maplibre, { type ControlPosition } from 'maplibre-gl';
 	import MaplibreGeocoder, { type MaplibreGeocoderApi } from '@maplibre/maplibre-gl-geocoder';
-	import { MaptilerGeocoderAPI } from './GeocoderAPIs';
+	import { MaptilerGeocoderAPI } from '../Geocoder/GeocoderAPIs';
 	import MapControl from '../MapControl/MapControl.svelte';
 	import type GeocoderProps from '../Geocoder/GeocoderProps';
 
@@ -16,6 +16,7 @@
 		languages = 'en',
 		types = [],
 		placeholder,
+		proximity,
 		bbox,
 		position = 'top-left',
 		limit = 3
@@ -34,7 +35,9 @@
 			language: languagesArr.join(','),
 			countries: countriesArr.join(','),
 			types: typesArr.join(','),
+			trackProximity: !proximity,
 			bbox,
+			proximity,
 			showResultsWhileTyping: true,
 			showResultMarkers: false,
 			debounceSearch: 25,

components/src/maplibre/WithLinkLocation/WithLinkLocation.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount, setContext, type Snippet } from 'svelte';
-	import { MaptilerGeocoderAPI } from '../GeocoderControl/GeocoderAPIs';
+	import { MaptilerGeocoderAPI } from '../Geocoder/GeocoderAPIs';
 	import {
 		type GeocodingCountry,
 		type GeocodingLanguage,