@maptiler/geocoding-control 2.0.0 → 2.1.0-rc1

package/svelte/maptilersdk.js

@@ -1,7 +1,7 @@
 import * as maptilersdk from "@maptiler/sdk";
-import { crateBaseClass, } from "./MapLibreBasedGeocodingControl";
+import { crateClasses, } from "./MapLibreBasedGeocodingControl";
 export { createMapLibreGlMapController } from "./maplibregl-controller";
-const Base = crateBaseClass(maptilersdk.Evented, maptilersdk, (map, div) => {
+const { MapLibreBasedGeocodingControl, events } = crateClasses(maptilersdk.Evented, maptilersdk, (map, div) => {
     const sdkConfig = {};
     if (!("getSdkConfig" in map && typeof map.getSdkConfig === "function")) {
         throw new Error("MapTiler SDK not detected");
@@ -15,8 +15,16 @@ const Base = crateBaseClass(maptilersdk.Evented, maptilersdk, (map, div) => {
     div.className += " maptiler-ctrl";
     return sdkConfig;
 });
-export class GeocodingControl extends Base {
+export class GeocodingControl extends MapLibreBasedGeocodingControl {
     onAdd(map) {
         return super.onAddInt(map);
     }
 }
+export const SelectEvent = events.SelectEvent;
+export const FeaturesListedEvent = events.FeaturesListedEvent;
+export const FeaturesMarkedEvent = events.FeaturesMarkedEvent;
+export const OptionsVisibilityChangeEvent = events.OptionsVisibilityChangeEvent;
+export const PickEvent = events.PickEvent;
+export const QueryChangeEvent = events.QueryChangeEvent;
+export const ResponseEvent = events.ResponseEvent;
+export const ReverseToggleEvent = events.ReverseToggleEvent;

package/svelte/openlayers-controller.d.ts

@@ -9,7 +9,7 @@ export declare function createOpenLayersMapController(map: Map, flyToOptions?: A
     fitBounds(bbox: BBox, padding: number, maxZoom: number): void;
     indicateReverse(reverse: boolean): void;
     setReverseMarker(coordinates?: Position): void;
-    setMarkers(markedFeatures: FeatureType[] | undefined, picked: FeatureType | undefined): void;
+    setFeatures(markedFeatures: FeatureType[] | undefined, picked: FeatureType | undefined, showPolygonMarker: boolean): void;
     setSelectedMarker(index: number): void;
     getCenterAndZoom(): [number, x: number, y: number] | undefined;
 };

package/svelte/openlayers-controller.js

@@ -167,7 +167,7 @@ export function createOpenLayersMapController(map, flyToOptions = {}, flyToBound
                 source.addFeature(reverseMarker);
             }
         },
-        setMarkers(markedFeatures, picked) {
+        setFeatures(markedFeatures, picked, showPolygonMarker) {
             function setData(data) {
                 if (!data) {
                     return;
@@ -191,7 +191,7 @@ export function createOpenLayersMapController(map, flyToOptions = {}, flyToBound
             if (reverseMarker) {
                 source.addFeature(reverseMarker);
             }
-            if (picked) {
+            block: if (picked) {
                 let handled = false;
                 if (picked.geometry.type === "GeometryCollection") {
                     const geoms = picked.geometry.geometries
@@ -229,11 +229,14 @@ export function createOpenLayersMapController(map, flyToOptions = {}, flyToBound
                 }
                 else if (picked.geometry.type === "LineString") {
                     source.addFeature(new OlFeature(fromWgs84(new OlLineString(picked.geometry.coordinates))));
-                    return; // no pin for (multi)linestrings
+                    break block; // no pin for (multi)linestrings
                 }
                 else if (picked.geometry.type === "MultiLineString") {
                     source.addFeature(new OlFeature(fromWgs84(new OlMultiLineString(picked.geometry.coordinates))));
-                    return; // no pin for (multi)linestrings
+                    break block; // no pin for (multi)linestrings
+                }
+                if (!showPolygonMarker && picked.geometry.type !== "Point") {
+                    break block;
                 }
                 source.addFeature(new OlFeature(fromWgs84(new OlPoint(picked.center))));
             }

package/svelte/openlayers.d.ts

@@ -1,7 +1,10 @@
 import type { Map } from "ol";
+import type { ObjectEvent } from "ol/Object";
+import type { CombinedOnSignature, EventTypes } from "ol/Observable";
 import type { AnimationOptions, FitOptions } from "ol/View";
 import { Control } from "ol/control";
 import type { Options } from "ol/control/Control";
+import type { EventsKey } from "ol/events";
 import BaseEvent from "ol/events/Event";
 import type { StyleLike } from "ol/style/Style";
 import type { FlatStyleLike } from "ol/style/flat";
@@ -11,15 +14,64 @@ type OpenLayersControlOptions = ControlOptions & Options & {
     flyTo?: boolean | (AnimationOptions & FitOptions);
     fullGeometryStyle?: StyleLike | FlatStyleLike;
 };
+type CustomEventMap = {
+    select: SelectEvent;
+    featureslisted: FeaturesListedEvent;
+    featuresmarked: FeaturesMarkedEvent;
+    optionsvisibilitychange: OptionsVisibilityChangeEvent;
+    pick: PickEvent;
+    querychange: QueryChangeEvent;
+    response: ResponseEvent;
+    reversetoggle: ReverseToggleEvent;
+};
+type CustomObjectOnSignature<ReturnType> = {
+    <K extends keyof CustomEventMap>(type: K, listener: (evt: CustomEventMap[K]) => void): ReturnType;
+} & {
+    (type: "propertychange", listener: (evt: ObjectEvent) => void): ReturnType;
+} & CombinedOnSignature<EventTypes | "propertychange" | keyof CustomEventMap, ReturnType>;
 export declare class GeocodingControl extends Control {
     #private;
+    on: CustomObjectOnSignature<EventsKey>;
+    once: CustomObjectOnSignature<EventsKey>;
+    un: CustomObjectOnSignature<EventsKey>;
     constructor(options: OpenLayersControlOptions);
     setMap(map: Map | null): void;
+    /**
+     * Update the control options.
+     *
+     * @param options options to update
+     */
     setOptions(options: OpenLayersControlOptions): 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;
 }
 export declare class SelectEvent extends BaseEvent {

package/svelte/openlayers.js

@@ -21,45 +21,30 @@ export class GeocodingControl extends Control {
                 ...restOptions,
             },
         });
-        for (const eventName of [
-            "select",
-            "pick",
-            "featuresListed",
-            "featuresMarked",
-            "response",
-            "optionsVisibilityChange",
-            "reverseToggle",
-            "queryChange",
-        ]) {
-            this.#gc.$on(eventName, (event) => {
-                switch (eventName) {
-                    case "select":
-                        this.dispatchEvent(new SelectEvent(event.detail));
-                        break;
-                    case "featuresListed":
-                        this.dispatchEvent(new FeaturesListedEvent(event.detail));
-                        break;
-                    case "featuresMarked":
-                        this.dispatchEvent(new FeaturesMarkedEvent(event.detail));
-                        break;
-                    case "optionsVisibilityChange":
-                        this.dispatchEvent(new OptionsVisibilityChangeEvent(event.detail));
-                        break;
-                    case "pick":
-                        this.dispatchEvent(new PickEvent(event.detail));
-                        break;
-                    case "queryChange":
-                        this.dispatchEvent(new QueryChangeEvent(event.detail));
-                        break;
-                    case "response":
-                        this.dispatchEvent(new ResponseEvent(event.detail.url, event.detail.featureCollection));
-                        break;
-                    case "reverseToggle":
-                        this.dispatchEvent(new ReverseToggleEvent(event.detail));
-                        break;
-                }
-            });
-        }
+        this.#gc.$on("select", (event) => {
+            this.dispatchEvent(new SelectEvent(event.detail.feature));
+        });
+        this.#gc.$on("pick", (event) => {
+            this.dispatchEvent(new PickEvent(event.detail.feature));
+        });
+        this.#gc.$on("featureslisted", (event) => {
+            this.dispatchEvent(new FeaturesListedEvent(event.detail.features));
+        });
+        this.#gc.$on("featuresmarked", (event) => {
+            this.dispatchEvent(new FeaturesMarkedEvent(event.detail.features));
+        });
+        this.#gc.$on("response", (event) => {
+            this.dispatchEvent(new ResponseEvent(event.detail.url, event.detail.featureCollection));
+        });
+        this.#gc.$on("optionsvisibilitychange", (event) => {
+            this.dispatchEvent(new OptionsVisibilityChangeEvent(event.detail.optionsVisible));
+        });
+        this.#gc.$on("reversetoggle", (event) => {
+            this.dispatchEvent(new ReverseToggleEvent(event.detail.reverse));
+        });
+        this.#gc.$on("querychange", (event) => {
+            this.dispatchEvent(new QueryChangeEvent(event.detail.query));
+        });
         this.#options = options;
     }
     setMap(map) {
@@ -76,26 +61,59 @@ export class GeocodingControl extends Control {
             this.#gc?.$set({ mapController });
         }
     }
+    /**
+     * Update the control options.
+     *
+     * @param options options to update
+     */
     setOptions(options) {
-        this.#options = options;
+        Object.assign(this.#options, options);
         const { flyTo, fullGeometryStyle, ...restOptions } = this.#options;
         this.#gc?.$set({
             ...restOptions,
             flyTo: flyTo === undefined ? true : !!flyTo,
         });
     }
+    /**
+     * 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();
     }
@@ -110,21 +128,21 @@ export class SelectEvent extends BaseEvent {
 export class FeaturesListedEvent extends BaseEvent {
     features;
     constructor(features) {
-        super("featuresListed");
+        super("featureslisted");
         this.features = features;
     }
 }
 export class FeaturesMarkedEvent extends BaseEvent {
     features;
     constructor(features) {
-        super("featuresMarked");
+        super("featuresmarked");
         this.features = features;
     }
 }
 export class OptionsVisibilityChangeEvent extends BaseEvent {
     optionsVisible;
     constructor(optionsVisible) {
-        super("optionsVisibilityChange");
+        super("optionsvisibilitychange");
         this.optionsVisible = optionsVisible;
     }
 }
@@ -138,7 +156,7 @@ export class PickEvent extends BaseEvent {
 export class QueryChangeEvent extends BaseEvent {
     query;
     constructor(query) {
-        super("queryChange");
+        super("querychange");
         this.query = query;
     }
 }
@@ -154,7 +172,7 @@ export class ResponseEvent extends BaseEvent {
 export class ReverseToggleEvent extends BaseEvent {
     reverse;
     constructor(reverse) {
-        super("reverseToggle");
+        super("reversetoggle");
         this.reverse = reverse;
     }
 }

package/svelte/react.d.ts

@@ -1,5 +1,5 @@
-import type { ControlOptions, DispatcherType, MapController } from "./types";
-type EventNames = keyof DispatcherType;
+import type { ControlOptions, DispatcherTypeCC, MapController } from "./types";
+type EventNames = keyof DispatcherTypeCC;
 type EventHandlerFnName<T extends EventNames> = `on${Capitalize<T>}`;
 type CallbackProperties<T> = {
     [K in keyof T as EventHandlerFnName<Extract<K, EventNames>>]?: (event: T[K]) => void;
@@ -7,13 +7,39 @@ type CallbackProperties<T> = {
 type MapControllerProp = {
     mapController?: MapController;
 };
-export type Props = ControlOptions & CallbackProperties<DispatcherType> & MapControllerProp;
+export type Props = ControlOptions & CallbackProperties<DispatcherTypeCC> & MapControllerProp;
 export type Methods = {
+    /**
+     * Blur the search input box.
+     */
     blur(): void;
-    focus(): 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;
+    /**
+     * 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;
+    /**
+     * Set reverse geocoding mode.
+     *
+     * @param reverseActive reverse geocoding active
+     */
+    setReverseMode(reverseActive: boolean): void;
 };
-declare const ReactGeocodingControl: import("react").ForwardRefExoticComponent<ControlOptions & CallbackProperties<DispatcherType> & MapControllerProp & import("react").RefAttributes<Methods>>;
+declare const ReactGeocodingControl: import("react").ForwardRefExoticComponent<ControlOptions & CallbackProperties<DispatcherTypeCC> & MapControllerProp & import("react").RefAttributes<Methods>>;
 export { ReactGeocodingControl as GeocodingControl };

package/svelte/react.js

@@ -11,33 +11,44 @@ const eventNames = [
     "select",
 ];
 const propertyNames = [
+    "adjustUrlQuery",
+    "adjustUrl",
     "apiKey",
+    "apiUrl",
     "bbox",
+    "class",
     "clearButtonTitle",
+    "clearListOnPick",
     "clearOnBlur",
     "collapsed",
     "country",
     "debounceSearch",
     "enableReverse",
-    "reverseActive",
     "errorMessage",
+    "excludeTypes",
+    "exhaustiveReverseGeocoding",
+    "fetchParameters",
     "filter",
+    "flyToSelected",
     "fuzzyMatch",
+    "iconsBaseUrl",
+    "keepListOpen",
     "language",
     "limit",
+    "mapController",
+    "markerOnSelected",
     "minLength",
     "noResultsMessage",
+    "pickedResultStyle",
     "placeholder",
     "proximity",
+    "reverseActive",
     "reverseButtonTitle",
-    "showFullGeometry",
+    "selectFirst",
     "showPlaceType",
     "showResultsWhileTyping",
-    "adjustUrlQuery",
     "types",
-    "excludeTypes",
     "zoom",
-    "mapController",
 ];
 function getEventFnName(name) {
     return ("on" +
@@ -45,8 +56,8 @@ function getEventFnName(name) {
         name.slice(1));
 }
 const ReactGeocodingControl = forwardRef(function ReactGeocodingControl(props, ref) {
-    const divRef = useRef();
-    const controlRef = useRef();
+    const divRef = useRef(undefined);
+    const controlRef = useRef(undefined);
     const options = { ...props };
     for (const eventName of eventNames) {
         // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
@@ -75,7 +86,7 @@ const ReactGeocodingControl = forwardRef(function ReactGeocodingControl(props, r
     for (const eventName of eventNames) {
         const eventHandlerFn = props[getEventFnName(eventName)];
         useEffect(() => eventHandlerFn &&
-            controlRef.current?.$on(eventName, (e) => {
+            controlRef.current?.$on(eventName.toLowerCase(), (e) => {
                 eventHandlerFn(e.detail);
             }), [eventHandlerFn]);
     }
@@ -83,8 +94,9 @@ const ReactGeocodingControl = forwardRef(function ReactGeocodingControl(props, r
         setQuery: (value, submit = true) => controlRef.current?.setQuery(value, submit),
         clearMap: () => controlRef.current?.clearMap(),
         clearList: () => controlRef.current?.clearList(),
-        focus: () => controlRef.current?.focus(),
+        focus: (options) => controlRef.current?.focus(options),
         blur: () => controlRef.current?.blur(),
+        setReverseMode: (reverseActive) => controlRef.current?.$set({ reverseActive }),
     }));
     return createElement("div", { ref: divRef });
 });