@maptiler/geocoding-control 2.0.0 → 2.1.0-rc1

package/svelte/MapLibreBasedGeocodingControl.js

@@ -1,8 +1,75 @@
 import GeocodingControlComponent from "./GeocodingControl.svelte";
 import { createMapLibreGlMapController, } from "./maplibregl-controller";
 export { createMapLibreGlMapController, } from "./maplibregl-controller";
-export function crateBaseClass(Evented, maplibreGl, getExtraProps) {
-    return class MapLibreBasedGeocodingControl extends Evented {
+export function crateClasses(Evented, maplibreGl, getExtraProps) {
+    // NOTE We can't use Maplibre `Event` - see https://github.com/maplibre/maplibre-gl-js/issues/5015
+    class Event {
+        type;
+        target;
+        constructor(target, type) {
+            this.type = type;
+            this.target = target;
+        }
+    }
+    class SelectEvent extends Event {
+        feature;
+        constructor(target, details) {
+            super(target, "select");
+            Object.assign(this, details);
+        }
+    }
+    class FeaturesListedEvent extends Event {
+        features;
+        constructor(target, features) {
+            super(target, "featureslisted");
+            this.features = features;
+        }
+    }
+    class FeaturesMarkedEvent extends Event {
+        features;
+        constructor(target, features) {
+            super(target, "featuresmarked");
+            this.features = features;
+        }
+    }
+    class OptionsVisibilityChangeEvent extends Event {
+        optionsVisible;
+        constructor(target, optionsVisible) {
+            super(target, "optionsvisibilitychange");
+            this.optionsVisible = optionsVisible;
+        }
+    }
+    class PickEvent extends Event {
+        feature;
+        constructor(target, feature) {
+            super(target, "pick");
+            this.feature = feature;
+        }
+    }
+    class QueryChangeEvent extends Event {
+        query;
+        constructor(target, query) {
+            super(target, "querychange");
+            this.query = query;
+        }
+    }
+    class ResponseEvent extends Event {
+        url;
+        featureCollection;
+        constructor(target, url, featureCollection) {
+            super(target, "response");
+            this.url = url;
+            this.featureCollection = featureCollection;
+        }
+    }
+    class ReverseToggleEvent extends Event {
+        reverse;
+        constructor(target, reverse) {
+            super(target, "reversetoggle");
+            this.reverse = reverse;
+        }
+    }
+    class MapLibreBasedGeocodingControl extends Evented {
         #gc;
         #options;
         constructor(options = {}) {
@@ -27,47 +94,113 @@ export function crateBaseClass(Evented, maplibreGl, getExtraProps) {
                 throw new Error("no apiKey provided");
             }
             this.#gc = new GeocodingControlComponent({ target: div, props });
-            for (const eventName of [
-                "select",
-                "pick",
-                "featuresListed",
-                "featuresMarked",
-                "response",
-                "optionsVisibilityChange",
-                "reverseToggle",
-                "queryChange",
-            ]) {
-                this.#gc.$on(eventName, (event) => {
-                    this.fire(eventName, event.detail);
-                });
-            }
+            this.#gc.$on("select", (event) => {
+                this.fire(new SelectEvent(this, event.detail));
+            });
+            this.#gc.$on("pick", (event) => {
+                this.fire(new PickEvent(this, event.detail.feature));
+            });
+            this.#gc.$on("featureslisted", (event) => {
+                this.fire(new FeaturesListedEvent(this, event.detail.features));
+            });
+            this.#gc.$on("featuresmarked", (event) => {
+                this.fire(new FeaturesMarkedEvent(this, event.detail.features));
+            });
+            this.#gc.$on("response", (event) => {
+                this.fire(new ResponseEvent(this, event.detail.url, event.detail.featureCollection));
+            });
+            this.#gc.$on("optionsvisibilitychange", (event) => {
+                this.fire(new OptionsVisibilityChangeEvent(this, event.detail.optionsVisible));
+            });
+            this.#gc.$on("reversetoggle", (event) => {
+                this.fire(new ReverseToggleEvent(this, event.detail.reverse));
+            });
+            this.#gc.$on("querychange", (event) => {
+                this.fire(new QueryChangeEvent(this, event.detail.query));
+            });
             return div;
         }
+        on(type, listener) {
+            return super.on(type, listener);
+        }
+        once(type, listener) {
+            return super.once(type, listener);
+        }
+        off(type, listener) {
+            return super.off(type, listener);
+        }
+        listens(type) {
+            return super.listens(type);
+        }
+        /**
+         * Update the control options.
+         *
+         * @param options options to update
+         */
         setOptions(options) {
-            this.#options = options;
+            Object.assign(this.#options, options);
             const { marker, showResultMarkers, flyTo, fullGeometryStyle, ...restOptions } = this.#options;
             this.#gc?.$set(restOptions);
         }
+        /**
+         * Set the content of search input box.
+         *
+         * @param value text to set
+         * @param submit perform the search
+         */
         setQuery(value, submit = true) {
             this.#gc?.setQuery(value, submit);
         }
+        /**
+         * Clear geocoding search results from the map.
+         */
         clearMap() {
             this.#gc?.clearMap();
         }
+        /**
+         * Clear search result list.
+         */
         clearList() {
             this.#gc?.clearList();
         }
-        setReverseMode(value) {
-            this.#gc?.$set({ reverseActive: value });
+        /**
+         * Set reverse geocoding mode.
+         *
+         * @param reverseActive reverse geocoding active
+         */
+        setReverseMode(reverseActive) {
+            this.#gc?.$set({ reverseActive });
         }
-        focus() {
-            this.#gc?.focus();
+        /**
+         * Focus the search input box.
+         *
+         * @param options [FocusOptions](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+         */
+        focus(options) {
+            this.#gc?.focus(options);
         }
+        /**
+         * Blur the search input box.
+         */
         blur() {
             this.#gc?.blur();
         }
         onRemove() {
             this.#gc?.$destroy();
         }
+    }
+    const events = {
+        SelectEvent,
+        FeaturesListedEvent,
+        FeaturesMarkedEvent,
+        OptionsVisibilityChangeEvent,
+        PickEvent,
+        QueryChangeEvent,
+        ResponseEvent,
+        ReverseToggleEvent,
+    };
+    return {
+        MapLibreBasedGeocodingControl,
+        events,
     };
 }

package/svelte/leaflet-controller.d.ts

@@ -6,7 +6,7 @@ export declare function createLeafletMapController(map: L.Map, marker?: boolean
     fitBounds(bbox: BBox, padding: number, maxZoom?: number): void;
     indicateReverse(reverse: boolean): void;
     setReverseMarker(coordinates?: Position): void;
-    setMarkers(markedFeatures: Feature[] | undefined, picked: Feature | undefined): void;
+    setFeatures(markedFeatures: Feature[] | undefined, picked: Feature | undefined, showPolygonMarker: boolean): void;
     setSelectedMarker(index: number): void;
     getCenterAndZoom(): [number, number, number];
 };

package/svelte/leaflet-controller.js

@@ -109,7 +109,7 @@ export function createLeafletMapController(map, marker = true, showResultMarkers
                 }
             }
         },
-        setMarkers(markedFeatures, picked) {
+        setFeatures(markedFeatures, picked, showPolygonMarker) {
             function setData(data) {
                 resultLayer.clearLayers();
                 if (data) {
@@ -121,7 +121,7 @@ export function createLeafletMapController(map, marker = true, showResultMarkers
             }
             markers.length = 0;
             setData();
-            if (picked) {
+            block: if (picked) {
                 let handled = false;
                 if (picked.geometry.type === "GeometryCollection") {
                     const geoms = picked.geometry.geometries.filter((geometry) => geometry.type === "Polygon" || geometry.type === "MultiPolygon");
@@ -175,7 +175,10 @@ export function createLeafletMapController(map, marker = true, showResultMarkers
                 else if (picked.geometry.type === "LineString" ||
                     picked.geometry.type === "MultiLineString") {
                     setData(picked);
-                    return; // no pin for (multi)linestrings
+                    break block; // no pin for (multi)linestrings
+                }
+                if (!showPolygonMarker && picked.geometry.type !== "Point") {
+                    break block;
                 }
                 if (marker instanceof Function) {
                     const m = marker(map, picked);

package/svelte/leaflet.d.ts

@@ -1,5 +1,5 @@
 import * as L from "leaflet";
-import type { ControlOptions, Feature } from "./types";
+import type { ControlOptions, DispatcherType, Feature } from "./types";
 export { createLeafletMapController } from "./leaflet-controller";
 type LeafletControlOptions = ControlOptions & L.ControlOptions & {
     /**
@@ -54,25 +54,78 @@ type LeafletControlOptions = ControlOptions & L.ControlOptions & {
      */
     fullGeometryStyle?: null | boolean | L.PathOptions | L.StyleFunction;
 };
+type LeafletEvent<T> = {
+    type: T;
+    target: GeocodingControl;
+    sourceTarget: GeocodingControl;
+};
+type CustomEventMap = {
+    [T in keyof DispatcherType]: DispatcherType[T] & LeafletEvent<T>;
+};
 /**
  * Leaflet mixins https://leafletjs.com/reference.html#class
  * for TypeScript https://www.typescriptlang.org/docs/handbook/mixins.html
  * @internal
  */
-declare class EventedControl {
-    constructor(...args: unknown[]);
+declare class EventedControl extends L.Control {
 }
-interface EventedControl extends L.Control, L.Evented {
+interface EventedControl extends L.Control {
+    on<T extends keyof CustomEventMap>(type: T, fn: (event: CustomEventMap[T]) => void, context?: unknown): this;
+    addEventListener<T extends keyof CustomEventMap>(type: T, fn: (event: CustomEventMap[T]) => void, context?: unknown): this;
+    once<T extends keyof CustomEventMap>(type: T, fn: (event: CustomEventMap[T]) => void, context?: unknown): this;
+    addOneTimeEventListener<T extends keyof CustomEventMap>(type: T, fn: (event: CustomEventMap[T]) => void, context?: unknown): this;
+    off<T extends keyof CustomEventMap>(type?: T, fn?: (event: CustomEventMap[T]) => void, context?: unknown): this;
+    off(eventMap?: {
+        [T in keyof CustomEventMap]?: (event: CustomEventMap[T]) => void;
+    }): this;
+    removeEventListener<T extends keyof CustomEventMap>(type?: T, fn?: (event: CustomEventMap[T]) => void, context?: unknown): this;
+    listens<T extends keyof CustomEventMap>(type: T, fn: (event: CustomEventMap[T]) => void, context?: unknown, propagate?: boolean): boolean;
+    fire(type: string, data?: unknown, propagate?: boolean): this;
+    addEventParent(obj: L.Evented): this;
+    removeEventParent(obj: L.Evented): this;
+    fireEvent(type: string, data?: unknown, propagate?: boolean): this;
+    hasEventListeners<T extends keyof CustomEventMap>(type: T): boolean;
 }
 export declare class GeocodingControl extends EventedControl {
     #private;
     constructor(options: LeafletControlOptions);
     onAdd(map: L.Map): HTMLDivElement;
+    /**
+     * Update the control options.
+     *
+     * @param options options to update
+     */
     setOptions(options: LeafletControlOptions): void;
+    /**
+     * Set the content of search input box.
+     *
+     * @param value text to set
+     * @param submit perform the search
+     */
     setQuery(value: string, submit?: boolean): void;
+    /**
+     * Clear geocoding search results from the map.
+     */
     clearMap(): void;
+    /**
+     * Clear search result list.
+     */
     clearList(): void;
-    focus(): void;
+    /**
+     * Set reverse geocoding mode.
+     *
+     * @param reverseActive reverse geocoding active
+     */
+    setReverseMode(reverseActive: boolean): void;
+    /**
+     * Focus the search input box.
+     *
+     * @param options [FocusOptions](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * Blur the search input box.
+     */
     blur(): void;
     onRemove(): void;
 }

package/svelte/leaflet.js

@@ -7,18 +7,15 @@ export { createLeafletMapController } from "./leaflet-controller";
  * for TypeScript https://www.typescriptlang.org/docs/handbook/mixins.html
  * @internal
  */
-// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging, @typescript-eslint/no-extraneous-class
-class EventedControl {
-    // eslint-disable-next-line @typescript-eslint/no-useless-constructor, @typescript-eslint/no-unused-vars
-    constructor(...args) { }
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
+class EventedControl extends L.Control {
 }
-L.Util.extend(EventedControl.prototype, L.Control.prototype);
 L.Util.extend(EventedControl.prototype, L.Evented.prototype);
 export class GeocodingControl extends EventedControl {
     #gc;
     #options;
     constructor(options) {
-        super();
+        super(options);
         this.#options = options;
     }
     onAdd(map) {
@@ -26,7 +23,7 @@ export class GeocodingControl extends EventedControl {
         div.className = "leaflet-ctrl-geocoder";
         L.DomEvent.disableClickPropagation(div);
         L.DomEvent.disableScrollPropagation(div);
-        const { marker, showResultMarkers, flyTo, fullGeometryStyle, ...restOptions } = this.#options;
+        const { marker, showResultMarkers, flyTo, fullGeometryStyle, position, ...restOptions } = this.#options;
         const flyToOptions = typeof flyTo === "boolean" ? {} : flyTo;
         const mapController = createLeafletMapController(map, marker, showResultMarkers, flyToOptions, flyToOptions, fullGeometryStyle);
         this.#gc = new GeocodingControlComponent({
@@ -37,37 +34,71 @@ export class GeocodingControl extends EventedControl {
                 ...restOptions,
             },
         });
-        for (const eventName of [
-            "select",
-            "pick",
-            "featuresListed",
-            "featuresMarked",
-            "response",
-            "optionsVisibilityChange",
-            "reverseToggle",
-            "queryChange",
-        ]) {
-            this.#gc.$on(eventName, (event) => this.fire(eventName.toLowerCase(), event.detail));
+        const eventNames = {
+            select: undefined,
+            pick: undefined,
+            featureslisted: undefined,
+            featuresmarked: undefined,
+            response: undefined,
+            optionsvisibilitychange: undefined,
+            reversetoggle: undefined,
+            querychange: undefined,
+        };
+        for (const eventName in eventNames) {
+            this.#gc.$on(eventName, (event) => this.fire(eventName, event.detail));
         }
         return div;
     }
+    /**
+     * Update the control options.
+     *
+     * @param options options to update
+     */
     setOptions(options) {
-        this.#options = options;
+        Object.assign(this.#options, options);
         const { marker, showResultMarkers, flyTo, fullGeometryStyle, ...restOptions } = this.#options;
         this.#gc?.$set(restOptions);
     }
+    /**
+     * Set the content of search input box.
+     *
+     * @param value text to set
+     * @param submit perform the search
+     */
     setQuery(value, submit = true) {
         this.#gc?.setQuery(value, submit);
     }
+    /**
+     * Clear geocoding search results from the map.
+     */
     clearMap() {
         this.#gc?.clearMap();
     }
+    /**
+     * Clear search result list.
+     */
     clearList() {
         this.#gc?.clearList();
     }
-    focus() {
-        this.#gc?.focus();
+    /**
+     * Set reverse geocoding mode.
+     *
+     * @param reverseActive reverse geocoding active
+     */
+    setReverseMode(reverseActive) {
+        this.#gc?.$set({ reverseActive });
+    }
+    /**
+     * Focus the search input box.
+     *
+     * @param options [FocusOptions](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+     */
+    focus(options) {
+        this.#gc?.focus(options);
     }
+    /**
+     * Blur the search input box.
+     */
     blur() {
         this.#gc?.blur();
     }

package/svelte/maplibregl-controller.d.ts

@@ -13,7 +13,7 @@ export declare function createMapLibreGlMapController(map: Map, maplibregl?: Map
     fitBounds(bbox: BBox, padding: number, maxZoom?: number): void;
     indicateReverse(reverse: boolean): void;
     setReverseMarker(coordinates?: Position): void;
-    setMarkers(markedFeatures: Feature[] | undefined, picked: Feature | undefined): void;
+    setFeatures(markedFeatures: Feature[] | undefined, picked: Feature | undefined, showPolygonMarker: boolean): void;
     setSelectedMarker(index: number): void;
     getCenterAndZoom(): [number, number, number];
 };

package/svelte/maplibregl-controller.js

@@ -2,7 +2,6 @@ import { feature, featureCollection } from "@turf/helpers";
 import union from "@turf/union";
 import MarkerIcon from "./MarkerIcon.svelte";
 import { setMask } from "./mask";
-const emptyGeojson = featureCollection([]);
 const defaultGeometryStyle = {
     fill: {
         paint: {
@@ -23,55 +22,69 @@ const defaultGeometryStyle = {
         filter: ["!", ["has", "isMask"]],
     },
 };
+const RESULT_SOURCE = "mtlr-gc-full-geom";
+const RESULT_LAYER_FILL = "mtlr-gc-full-geom-fill";
+const RESULT_LAYER_LINE = "mtlr-gc-full-geom-line";
 export function createMapLibreGlMapController(map, maplibregl, marker = true, showResultMarkers = true, flyToOptions = {}, fitBoundsOptions = {}, fullGeometryStyle = defaultGeometryStyle) {
     let eventHandler;
     const markers = [];
     let selectedMarker;
     let reverseMarker;
     let savedData; // used to restore features on style switch
-    function addFullGeometryLayer() {
+    function syncFullGeometryLayer() {
+        if (!map.loaded) {
+            map.once("load", syncFullGeometryLayer);
+            return;
+        }
         const effFullGeometryStyle = !fullGeometryStyle
             ? undefined
             : fullGeometryStyle === true
                 ? defaultGeometryStyle
                 : fullGeometryStyle;
-        if (!map.getSource("full-geom") &&
-            (effFullGeometryStyle?.fill || effFullGeometryStyle?.line)) {
-            map.addSource("full-geom", {
+        if (!effFullGeometryStyle?.fill && !effFullGeometryStyle?.line) {
+            return;
+        }
+        const source = map.getSource(RESULT_SOURCE);
+        if (source) {
+            source.setData(savedData ?? featureCollection([]));
+        }
+        else if (savedData) {
+            map.addSource(RESULT_SOURCE, {
                 type: "geojson",
-                data: emptyGeojson,
+                data: savedData,
             });
         }
-        if (!map.getLayer("full-geom-fill") && effFullGeometryStyle?.fill) {
+        else {
+            return;
+        }
+        if (!map.getLayer(RESULT_LAYER_FILL) && effFullGeometryStyle?.fill) {
             map.addLayer({
                 ...effFullGeometryStyle?.fill,
-                id: "full-geom-fill",
+                id: RESULT_LAYER_FILL,
                 type: "fill",
-                source: "full-geom",
+                source: RESULT_SOURCE,
             });
         }
-        if (!map.getLayer("full-geom-line") && effFullGeometryStyle?.line) {
+        if (!map.getLayer(RESULT_LAYER_LINE) && effFullGeometryStyle?.line) {
             map.addLayer({
                 ...effFullGeometryStyle?.line,
-                id: "full-geom-line",
+                id: RESULT_LAYER_LINE,
                 type: "line",
-                source: "full-geom",
+                source: RESULT_SOURCE,
             });
         }
-        if (savedData) {
-            setData(savedData);
-        }
-    }
-    if (map.loaded()) {
-        addFullGeometryLayer();
     }
-    else {
-        map.once("load", () => {
-            addFullGeometryLayer();
-        });
+    function setAndSaveData(data) {
+        savedData = data;
+        syncFullGeometryLayer();
     }
     map.on("styledata", () => {
-        addFullGeometryLayer();
+        // timeout prevents collision with svelte-maplibre library
+        setTimeout(() => {
+            if (savedData) {
+                syncFullGeometryLayer();
+            }
+        });
     });
     const handleMapClick = (e) => {
         eventHandler?.({
@@ -93,13 +106,6 @@ export function createMapLibreGlMapController(map, maplibregl, marker = true, sh
         });
         return new maplibregl.Marker({ element, offset: [1, -13] });
     }
-    function setData(data) {
-        savedData = data;
-        if (!data) {
-            return;
-        }
-        map.getSource("full-geom")?.setData(data);
-    }
     return {
         setEventHandler(handler) {
             if (handler) {
@@ -150,16 +156,16 @@ export function createMapLibreGlMapController(map, maplibregl, marker = true, sh
                 }
             }
         },
-        setMarkers(markedFeatures, picked) {
+        setFeatures(markedFeatures, picked, showPolygonMarker) {
             for (const marker of markers) {
                 marker.remove();
             }
             markers.length = 0;
-            setData(emptyGeojson);
+            setAndSaveData(undefined);
             if (!maplibregl) {
                 return;
             }
-            if (picked) {
+            block: if (picked) {
                 let handled = false;
                 if (picked.geometry.type === "GeometryCollection") {
                     const geoms = picked.geometry.geometries.filter((geometry) => geometry.type === "Polygon" || geometry.type === "MultiPolygon");
@@ -171,14 +177,14 @@ export function createMapLibreGlMapController(map, maplibregl, marker = true, sh
                         setMask({
                             ...picked,
                             geometry: unioned.geometry,
-                        }, setData);
+                        }, setAndSaveData);
                         handled = true;
                     }
                     else {
                         const geometries = picked.geometry.geometries.filter((geometry) => geometry.type === "LineString" ||
                             geometry.type === "MultiLineString");
                         if (geometries.length > 0) {
-                            setData({
+                            setAndSaveData({
                                 ...picked,
                                 geometry: { type: "GeometryCollection", geometries },
                             });
@@ -191,12 +197,15 @@ export function createMapLibreGlMapController(map, maplibregl, marker = true, sh
                 }
                 else if (picked.geometry.type === "Polygon" ||
                     picked.geometry.type === "MultiPolygon") {
-                    setMask(picked, setData);
+                    setMask(picked, setAndSaveData);
                 }
                 else if (picked.geometry.type === "LineString" ||
                     picked.geometry.type === "MultiLineString") {
-                    setData(picked);
-                    return; // no pin for (multi)linestrings
+                    setAndSaveData(picked);
+                    break block; // no pin for (multi)linestrings
+                }
+                if (!showPolygonMarker && picked.geometry.type !== "Point") {
+                    break block;
                 }
                 if (marker instanceof Function) {
                     const m = marker(map, picked);