From 62e39e2254d2bab9443ae312f0a7e6be4d0039c6 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Wed, 24 Jun 2026 10:58:46 +0200 Subject: [PATCH 1/6] build out feature --- .../src/maplibre/Geocoder/Geocoder.svelte | 4 +- .../src/maplibre/Geocoder/GeocoderAPIs.ts | 8 +++ .../src/maplibre/Geocoder/GeocoderProps.ts | 4 ++ .../maplibre/GeocoderControl/GeocoderAPIs.ts | 63 ------------------- .../GeocoderControl.stories.svelte | 16 +++++ .../GeocoderControl/GeocoderControl.svelte | 5 +- 6 files changed, 35 insertions(+), 65 deletions(-) delete mode 100644 components/src/maplibre/GeocoderControl/GeocoderAPIs.ts diff --git a/components/src/maplibre/Geocoder/Geocoder.svelte b/components/src/maplibre/Geocoder/Geocoder.svelte index 3c2d0694..7b01e50f 100644 --- a/components/src/maplibre/Geocoder/Geocoder.svelte +++ b/components/src/maplibre/Geocoder/Geocoder.svelte @@ -16,6 +16,7 @@ languages = 'en', types = [], bbox, + proximity, placeholder, limit = 3, size = 'default', @@ -35,7 +36,8 @@ language: languagesArr.join(','), countries: countriesArr.join(','), types: typesArr.join(','), - bbox: bbox, + bbox, + proximity, showResultsWhileTyping: true, showResultMarkers: false, debounceSearch: 25, diff --git a/components/src/maplibre/Geocoder/GeocoderAPIs.ts b/components/src/maplibre/Geocoder/GeocoderAPIs.ts index de565fc0..322481bb 100644 --- a/components/src/maplibre/Geocoder/GeocoderAPIs.ts +++ b/components/src/maplibre/Geocoder/GeocoderAPIs.ts @@ -17,6 +17,13 @@ export class MaptilerGeocoderAPI implements MaplibreGeocoderApi { type: 'FeatureCollection', features: [] }; + + const proximity = Array.isArray(config.proximity) + ? config.proximity.join(',') + : config.proximity; + + console.log(config); + try { const params = new URLSearchParams( Object.fromEntries( @@ -24,6 +31,7 @@ export class MaptilerGeocoderAPI implements MaplibreGeocoderApi { country: config.countries || '', language: config.language || '', types: config.types || '', + proximity: proximity || '', bbox: config.bbox?.join(',') || '', key: this.key || '' }).filter(([_, value]) => { diff --git a/components/src/maplibre/Geocoder/GeocoderProps.ts b/components/src/maplibre/Geocoder/GeocoderProps.ts index 1592cc19..186a4c8d 100644 --- a/components/src/maplibre/Geocoder/GeocoderProps.ts +++ b/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 `[lon, lat]` array to use for biasing search results or the string `ip` to do server-side IP based geolocation. + */ + 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). */ diff --git a/components/src/maplibre/GeocoderControl/GeocoderAPIs.ts b/components/src/maplibre/GeocoderControl/GeocoderAPIs.ts deleted file mode 100644 index de565fc0..00000000 --- a/components/src/maplibre/GeocoderControl/GeocoderAPIs.ts +++ /dev/null @@ -1,63 +0,0 @@ -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 { - const result: MaplibreGeocoderFeatureResults = { - type: 'FeatureCollection', - features: [] - }; - try { - const params = new URLSearchParams( - Object.fromEntries( - Object.entries({ - country: config.countries || '', - language: config.language || '', - types: config.types || '', - bbox: config.bbox?.join(',') || '', - 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/GeocoderControl/GeocoderControl.stories.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte index b127cc63..1b63d462 100644 --- a/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte +++ b/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte @@ -131,6 +131,22 @@ + + +
+ + + +
+ +