From 04eeea202ac4ada8e911278cf56c4af040c4ba59 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Mon, 11 May 2026 16:36:29 +0200
Subject: [PATCH 1/2] Build out feature

---
 .../maplibre/GeocoderControl/GeocoderAPIs.ts  |  2 +-
 .../GeocoderControl.stories.svelte            | 16 +++++++++++
 .../GeocoderControl/GeocoderControl.svelte    | 28 ++++++++++++++++++-
 3 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/components/src/maplibre/GeocoderControl/GeocoderAPIs.ts b/components/src/maplibre/GeocoderControl/GeocoderAPIs.ts
index ed30aba8..06aad68c 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderAPIs.ts
+++ b/components/src/maplibre/GeocoderControl/GeocoderAPIs.ts
@@ -19,7 +19,7 @@ export class MaptilerGeocoderAPI implements MaplibreGeocoderApi {
 		};
 		try {
 			const response = await fetch(
-				`https://api.maptiler.com/geocoding/${config.query}.json?country=${config.countries}&language=${config.language}&key=${this.key}`
+				`https://api.maptiler.com/geocoding/${config.query}.json?country=${config.countries}&language=${config.language}&types=${config.types}&key=${this.key}`
 			);
 			const geojson = await response.json();
 			for (const feature of geojson.features) {
diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
index 8cf86045..6d88ca8d 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
@@ -90,6 +90,22 @@
 	</DesignTokens>
 </Story>
 
+<Story asChild name="Limited result types">
+	<DesignTokens theme="light">
+		<div class="container">
+			<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
+				<GeocoderControl
+					placeholder="Search Gemeinden"
+					languages="de"
+					types={['county']}
+					service="maptiler"
+					key="V32kPHZjMa0Mkn6YvSzA"
+				/>
+			</Map>
+		</div>
+	</DesignTokens>
+</Story>
+
 <style>
 	.container {
 		width: 500px;
diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
index 55fe9437..a6675cc3 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
@@ -5,6 +5,25 @@
 	import MapControl from '../MapControl/MapControl.svelte';
 	import { type GeocodingCountry, type GeocodingLanguage, type GeocodingService } from '../types';
 
+	type PlaceType =
+		| 'continental_marine'
+		| 'country'
+		| 'major_landform'
+		| 'region'
+		| 'subregion'
+		| 'county'
+		| 'joint_municipality'
+		| 'joint_submunicipality'
+		| 'municipality'
+		| 'municipal_district'
+		| 'locality'
+		| 'neighbourhood'
+		| 'place'
+		| 'postal_code'
+		| 'address'
+		| 'road'
+		| 'poi';
+
 	interface GeocoderControlProps {
 		service: GeocodingService;
 		/**
@@ -16,9 +35,13 @@
 		 */
 		limit?: number;
 		/**
-		 * Limit search to one or more countries
+		 * Limit search to one or more result type
 		 */
 		countries?: GeocodingCountry | GeocodingCountry[];
+		/**
+		 * Limit search to one or more countries
+		 */
+		types?: PlaceType | PlaceType[];
 		/**
 		 * 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).
 		 */
@@ -34,12 +57,14 @@
 		service = 'maptiler',
 		countries = 'de',
 		languages = 'en',
+		types = [],
 		placeholder,
 		limit = 3
 	}: GeocoderControlProps = $props();
 
 	const countriesArr = Array.isArray(countries) ? countries : [countries];
 	const languagesArr = Array.isArray(languages) ? languages : [languages];
+	const typesArr = Array.isArray(types) ? types : [types];
 
 	// Future: initialise a different GeocoderAPI depending on "service"
 	let geocoderAPI: MaplibreGeocoderApi = new MaptilerGeocoderAPI(key);
@@ -48,6 +73,7 @@
 		maplibregl: maplibre,
 		language: languagesArr.join(','),
 		countries: countriesArr.join(','),
+		types: typesArr.join(','),
 		showResultsWhileTyping: true,
 		showResultMarkers: false,
 		debounceSearch: 25,

From f2cc2029d9b9af95b8e43ebaaffc5a915decf0f1 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Mon, 11 May 2026 19:21:27 +0200
Subject: [PATCH 2/2] Handle null parameters correctly

---
 .../maplibre/GeocoderControl/GeocoderAPIs.ts  | 15 +++++++-
 .../GeocoderControl.stories.svelte            |  5 ++-
 .../GeocoderControl/GeocoderControl.svelte    | 38 ++++++-------------
 components/src/maplibre/types.ts              | 23 ++++++++++-
 4 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/components/src/maplibre/GeocoderControl/GeocoderAPIs.ts b/components/src/maplibre/GeocoderControl/GeocoderAPIs.ts
index 06aad68c..5cd82931 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderAPIs.ts
+++ b/components/src/maplibre/GeocoderControl/GeocoderAPIs.ts
@@ -18,8 +18,21 @@ export class MaptilerGeocoderAPI implements MaplibreGeocoderApi {
 			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?country=${config.countries}&language=${config.language}&types=${config.types}&key=${this.key}`
+				`https://api.maptiler.com/geocoding/${config.query}.json?${params.toString()}`
 			);
 			const geojson = await response.json();
 			for (const feature of geojson.features) {
diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
index 6d88ca8d..31d3fdd3 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
@@ -95,9 +95,10 @@
 		<div class="container">
 			<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
 				<GeocoderControl
-					placeholder="Search Gemeinden"
+					placeholder="Search Länder"
 					languages="de"
-					types={['county']}
+					countries="de"
+					types={['region']}
 					service="maptiler"
 					key="V32kPHZjMa0Mkn6YvSzA"
 				/>
diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
index a6675cc3..68543264 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
@@ -3,26 +3,12 @@
 	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 GeocodingService } from '../types';
-
-	type PlaceType =
-		| 'continental_marine'
-		| 'country'
-		| 'major_landform'
-		| 'region'
-		| 'subregion'
-		| 'county'
-		| 'joint_municipality'
-		| 'joint_submunicipality'
-		| 'municipality'
-		| 'municipal_district'
-		| 'locality'
-		| 'neighbourhood'
-		| 'place'
-		| 'postal_code'
-		| 'address'
-		| 'road'
-		| 'poi';
+	import {
+		type GeocodingCountry,
+		type GeocodingLanguage,
+		type GeocodingPlaceType,
+		type GeocodingService
+	} from '../types';
 
 	interface GeocoderControlProps {
 		service: GeocodingService;
@@ -35,13 +21,13 @@
 		 */
 		limit?: number;
 		/**
-		 * Limit search to one or more result type
+		 * Limit search to one or more countries
 		 */
 		countries?: GeocodingCountry | GeocodingCountry[];
 		/**
-		 * Limit search to one or more countries
+		 * Limit search to one or more result type
 		 */
-		types?: PlaceType | PlaceType[];
+		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).
 		 */
@@ -62,9 +48,9 @@
 		limit = 3
 	}: GeocoderControlProps = $props();
 
-	const countriesArr = Array.isArray(countries) ? countries : [countries];
-	const languagesArr = Array.isArray(languages) ? languages : [languages];
-	const typesArr = Array.isArray(types) ? types : [types];
+	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 = new MaptilerGeocoderAPI(key);
diff --git a/components/src/maplibre/types.ts b/components/src/maplibre/types.ts
index b9968047..56873f80 100644
--- a/components/src/maplibre/types.ts
+++ b/components/src/maplibre/types.ts
@@ -10,8 +10,27 @@ export type Layer =
 	| FillExtrusionLayerSpecification;
 
 export type GeocodingService = 'maptiler';
-export type GeocodingCountry = 'de' | 'at';
-export type GeocodingLanguage = 'de' | 'en';
+export type GeocodingCountry = 'de' | 'at' | 'ch';
+export type GeocodingLanguage = 'de' | 'en' | 'it' | 'nl' | 'fr';
+
+export type GeocodingPlaceType =
+	| 'continental_marine'
+	| 'country'
+	| 'major_landform'
+	| 'region'
+	| 'subregion'
+	| 'county'
+	| 'joint_municipality'
+	| 'joint_submunicipality'
+	| 'municipality'
+	| 'municipal_district'
+	| 'locality'
+	| 'neighbourhood'
+	| 'place'
+	| 'postal_code'
+	| 'address'
+	| 'road'
+	| 'poi';
 
 export type V2 = [number, number];