feat(GeocoderControl): Add types prop

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}&key=${this.key}`
+				`https://api.maptiler.com/geocoding/${config.query}.json?${params.toString()}`
 			);
 			const geojson = await response.json();
 			for (const feature of geojson.features) {

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

@@ -90,6 +90,23 @@
 	</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 Länder"
+					languages="de"
+					countries="de"
+					types={['region']}
+					service="maptiler"
+					key="V32kPHZjMa0Mkn6YvSzA"
+				/>
+			</Map>
+		</div>
+	</DesignTokens>
+</Story>
+
 <style>
 	.container {
 		width: 500px;

components/src/maplibre/GeocoderControl/GeocoderControl.svelte

@@ -3,7 +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';
+	import {
+		type GeocodingCountry,
+		type GeocodingLanguage,
+		type GeocodingPlaceType,
+		type GeocodingService
+	} from '../types';
 
 	interface GeocoderControlProps {
 		service: GeocodingService;
@@ -19,6 +24,10 @@
 		 * 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).
 		 */
@@ -34,12 +43,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 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);
@@ -48,6 +59,7 @@
 		maplibregl: maplibre,
 		language: languagesArr.join(','),
 		countries: countriesArr.join(','),
+		types: typesArr.join(','),
 		showResultsWhileTyping: true,
 		showResultMarkers: false,
 		debounceSearch: 25,

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];