@maptiler/geocoding-control 0.0.78 → 0.0.81

package/src/lib/LeafletGeocodingControl.ts

@@ -1,154 +0,0 @@
-import * as L from "leaflet";
-import GeocodingControlComponent from "./GeocodingControl.svelte";
-import { createLeafletMapController } from "./leafletMapController";
-export { createLeafletMapController } from "./leafletMapController";
-import type { ControlOptions } from "./types";
-
-type LeafletControlOptions = ControlOptions &
-  L.ControlOptions & {
-    /**
-     * If `true`, a [Marker](https://leafletjs.com/reference.html#marker) will be added to the map at the location of the user-selected result using a default set of Marker options.
-     * If the value is an object, the marker will be constructed using these options.
-     * If `false`, no marker will be added to the map.
-     *
-     * @default true
-     */
-    marker?: boolean | L.MarkerOptions;
-
-    /**
-     * If `true`, [Markers](https://leafletjs.com/reference.html#marker) will be added to the map at the location the top results for the query.
-     * If the value is an object, the marker will be constructed using these options.
-     * If `false`, no marker will be added to the map.
-     *
-     * @default true
-     */
-    showResultMarkers?: boolean | L.MarkerOptions;
-
-    /**
-     * If `false`, animating the map to a selected result is disabled.
-     * If `true`, animating the map will use the default animation parameters.
-     * If an object, it will be passed as options to the map `flyTo` or `fitBounds` method providing control over the animation of the transition.
-     *
-     * @default true
-     */
-    flyTo?: boolean | (L.ZoomPanOptions & L.FitBoundsOptions);
-
-    /**
-     * Style for full feature geometry GeoJSON.
-     */
-    fullGeometryStyle?: L.PathOptions | L.StyleFunction;
-  };
-
-export class GeocodingControl extends L.Control {
-  #gc?: GeocodingControlComponent;
-
-  #options: LeafletControlOptions;
-
-  constructor(options: LeafletControlOptions) {
-    super();
-
-    this.#options = options;
-  }
-
-  onAdd(map: L.Map) {
-    const div = document.createElement("div");
-
-    div.className = "leaflet-ctrl-geocoder";
-
-    L.DomEvent.disableClickPropagation(div);
-    L.DomEvent.disableScrollPropagation(div);
-
-    const {
-      marker,
-      showResultMarkers,
-      flyTo,
-      fullGeometryStyle,
-      ...restOptions
-    } = this.#options;
-
-    const flyToOptions = typeof flyTo === "boolean" ? {} : flyTo;
-
-    const mapController = createLeafletMapController(
-      map,
-      marker,
-      showResultMarkers,
-      flyToOptions,
-      flyToOptions,
-      fullGeometryStyle
-    );
-
-    this.#gc = new GeocodingControlComponent({
-      target: div,
-      props: {
-        mapController,
-        flyTo: flyTo === undefined ? true : !!flyTo,
-        ...restOptions,
-      },
-    });
-
-    for (const eventName of [
-      "select",
-      "pick",
-      "featuresListed",
-      "featuresMarked",
-      "response",
-      "optionsVisibilityChange",
-      "reverseToggle",
-      "queryChange",
-    ]) {
-      this.#gc.$on(eventName, (event) =>
-        map.fire(eventName.toLowerCase(), event.detail)
-      );
-    }
-
-    return div;
-  }
-
-  setOptions(options: LeafletControlOptions) {
-    this.#options = options;
-
-    const {
-      marker,
-      showResultMarkers,
-      flyTo,
-      fullGeometryStyle,
-      ...restOptions
-    } = this.#options;
-
-    this.#gc?.$set(restOptions);
-  }
-
-  setQuery(value: string, submit: boolean | "always" = true) {
-    (this.#gc as any)?.setQuery(value, submit);
-  }
-
-  setReverseMode(value: boolean) {
-    this.#gc?.$set({ reverseActive: value });
-  }
-
-  focus() {
-    (this.#gc as any)?.focus();
-  }
-
-  blur() {
-    (this.#gc as any)?.blur();
-  }
-
-  onRemove() {
-    (this.#gc as any)?.$destroy();
-  }
-}
-
-function createControl(
-  ...params: ConstructorParameters<typeof GeocodingControl>
-) {
-  return new GeocodingControl(...params);
-}
-
-if (
-  window.L &&
-  typeof window.L === "object" &&
-  typeof window.L.control === "function"
-) {
-  (window.L.control as any).maptilerGeocoding = createControl;
-}

package/src/lib/MaplibreglGeocodingControl.ts

@@ -1,160 +0,0 @@
-import type {
-  Map,
-  IControl,
-  MarkerOptions,
-  FlyToOptions,
-  FitBoundsOptions,
-  FillLayerSpecification,
-  LineLayerSpecification,
-} from "maplibre-gl";
-import type maplibregl from "maplibre-gl";
-import GeocodingControlComponent from "./GeocodingControl.svelte";
-import type { ControlOptions } from "./types";
-import { createMaplibreglMapController } from "./maplibreglMapController";
-export { createMaplibreglMapController } from "./maplibreglMapController";
-
-type MapLibreGL = typeof maplibregl;
-
-type MapLibreControlOptions = ControlOptions & {
-  /**
-   * A Maplibre GL instance to use when creating [Markers](https://maplibre.org/maplibre-gl-js-docs/api/markers/#marker).
-   * Required if `options.marker` is `true`.
-   */
-  maplibregl?: MapLibreGL;
-
-  /**
-   * If `true`, a [Marker](https://maplibre.org/maplibre-gl-js-docs/api/markers/#marker) will be added to the map at the location of the user-selected result using a default set of Marker options.
-   * If the value is an object, the marker will be constructed using these options.
-   * If `false`, no marker will be added to the map.
-   * Requires that `options.maplibregl` also be set.
-   *
-   * @default true
-   */
-  marker?: boolean | MarkerOptions;
-
-  /**
-   * If `true`, [Markers](https://maplibre.org/maplibre-gl-js-docs/api/markers/#marker) will be added to the map at the location the top results for the query.
-   * If the value is an object, the marker will be constructed using these options.
-   * If `false`, no marker will be added to the map.
-   * Requires that `options.maplibregl` also be set.
-   *
-   * @default true
-   */
-  showResultMarkers?: boolean | MarkerOptions;
-
-  /**
-   * If `false`, animating the map to a selected result is disabled.
-   * If `true`, animating the map will use the default animation parameters.
-   * If an object, it will be passed as options to the map `flyTo` or `fitBounds` method providing control over the animation of the transition.
-   *
-   * @default true
-   */
-  flyTo?: boolean | (FlyToOptions & FitBoundsOptions);
-
-  /**
-   * Style for full feature geometry GeoJSON.
-   */
-  fullGeometryStyle?: {
-    fill: Pick<FillLayerSpecification, "layout" | "paint" | "filter">;
-    line: Pick<LineLayerSpecification, "layout" | "paint" | "filter">;
-  };
-};
-
-export class GeocodingControl extends EventTarget implements IControl {
-  #gc?: GeocodingControlComponent;
-
-  #options: MapLibreControlOptions;
-
-  constructor(options: MapLibreControlOptions) {
-    super();
-
-    this.#options = options;
-  }
-
-  onAdd(map: Map) {
-    const div = document.createElement("div");
-
-    div.className =
-      "mapboxgl-ctrl-geocoder mapboxgl-ctrl maplibregl-ctrl-geocoder maplibregl-ctrl";
-
-    const {
-      maplibregl,
-      marker,
-      showResultMarkers,
-      flyTo,
-      fullGeometryStyle,
-      ...restOptions
-    } = this.#options;
-
-    const flyToOptions = typeof flyTo === "boolean" ? {} : flyTo;
-
-    const mapController = createMaplibreglMapController(
-      map,
-      maplibregl,
-      marker,
-      showResultMarkers,
-      flyToOptions,
-      flyToOptions,
-      fullGeometryStyle
-    );
-
-    this.#gc = new GeocodingControlComponent({
-      target: div,
-      props: {
-        mapController,
-        flyTo: flyTo === undefined ? true : !!flyTo,
-        ...restOptions,
-      },
-    });
-
-    for (const eventName of [
-      "select",
-      "pick",
-      "featuresListed",
-      "featuresMarked",
-      "response",
-      "optionsVisibilityChange",
-      "reverseToggle",
-      "queryChange",
-    ]) {
-      this.#gc.$on(eventName, (event) => this.dispatchEvent(event));
-    }
-
-    return div;
-  }
-
-  setOptions(options: MapLibreControlOptions) {
-    this.#options = options;
-
-    const {
-      maplibregl,
-      marker,
-      showResultMarkers,
-      flyTo,
-      fullGeometryStyle,
-      ...restOptions
-    } = this.#options;
-
-    this.#gc?.$set(restOptions);
-  }
-
-  setQuery(value: string, submit: boolean | "always" = true) {
-    (this.#gc as any)?.setQuery(value, submit);
-  }
-
-  setReverseMode(value: boolean) {
-    this.#gc?.$set({ reverseActive: value });
-  }
-
-  focus() {
-    (this.#gc as any)?.focus();
-  }
-
-  blur() {
-    (this.#gc as any)?.blur();
-  }
-
-  onRemove() {
-    (this.#gc as any)?.$destroy();
-  }
-}

package/src/lib/ReactGeocodingControl.ts

@@ -1,158 +0,0 @@
-import GeocodingControl from "./GeocodingControl.svelte";
-import {
-  createElement,
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  type Ref,
-} from "react";
-import type { ControlOptions, Feature, MapController } from "./types";
-
-// TODO this would be nice to be derived from `Parameters<GeocodingControl["$on"]>[0]` but it just doesn't work
-type CallbackProperties = {
-  onSelect?: (feature: Feature | undefined) => void;
-  onPick?: (feature: Feature | undefined) => void;
-  onOptionsVisibilityChange?: (visible: boolean) => void;
-  onFeaturesListed?: (visible: Feature[] | undefined) => void;
-  onFeaturesMarked?: (visible: Feature[] | undefined) => void;
-  onResponse?: (onResponse: { url: string; response: Response }) => void;
-  onReversetoggle?: (reverse: boolean) => void;
-  onQuerychange?: (query: string) => void;
-};
-
-type EventName<T extends keyof CallbackProperties> = T extends `on${infer U}`
-  ? Uncapitalize<U>
-  : never;
-
-type EventNames = EventName<keyof CallbackProperties>;
-
-const eventNames = [
-  "featuresListed",
-  "featuresMarked",
-  "optionsVisibilityChange",
-  "pick",
-  "querychange",
-  "response",
-  "reversetoggle",
-  "select",
-] as const satisfies readonly EventNames[];
-
-type MapControllerProp = {
-  mapController?: MapController;
-};
-
-const propertyNames = [
-  "apiKey",
-  "bbox",
-  "clearButtonTitle",
-  "clearOnBlur",
-  "collapsed",
-  "country",
-  "debounceSearch",
-  "enableReverse",
-  "errorMessage",
-  "filter",
-  "fuzzyMatch",
-  "language",
-  "limit",
-  "minLength",
-  "noResultsMessage",
-  "placeholder",
-  "proximity",
-  "reverseButtonTitle",
-  "showFullGeometry",
-  "showPlaceType",
-  "showResultsWhileTyping",
-  "trackProximity",
-  "types",
-  "zoom",
-  "mapController",
-] as const satisfies readonly (keyof (ControlOptions & MapControllerProp))[];
-
-type EventHandlerFnName<T extends EventNames> = `on${Capitalize<T>}`;
-
-function getEventFnName<T extends EventNames>(name: T): EventHandlerFnName<T> {
-  return ("on" +
-    name[0].toUpperCase() +
-    name.slice(1)) as EventHandlerFnName<T>;
-}
-
-export type Props = ControlOptions & CallbackProperties & MapControllerProp;
-
-// // not used because it does not integrate well with Svelte
-// type MethodNames = "blur" | "focus" | "setQuery";
-//
-// export type Methods = { [T in MethodNames]: GeocodingControl[T] };
-
-export type Methods = {
-  blur: () => void;
-  focus: () => void;
-  setQuery: (value: string, submit?: boolean) => void;
-};
-
-const ReactGeocodingControl = forwardRef(function ReactGeocodingControl(
-  props: Props,
-  ref: Ref<Methods>
-) {
-  const divRef = useRef<HTMLDivElement>();
-
-  const controlRef = useRef<GeocodingControl>();
-
-  const options = { ...props };
-
-  for (const eventName of eventNames) {
-    delete options[getEventFnName(eventName)];
-  }
-
-  useEffect(() => {
-    if (!divRef.current) {
-      throw new Error();
-    }
-
-    const control = new GeocodingControl({
-      target: divRef.current,
-      props: options,
-    });
-
-    controlRef.current = control;
-
-    return () => control.$destroy();
-  }, []);
-
-  // watch change on every option
-  for (const propName of propertyNames) {
-    useEffect(() => {
-      if (controlRef.current && props[propName] !== undefined) {
-        controlRef.current.$set({ [propName]: props[propName] });
-      }
-    }, [props[propName]]);
-  }
-
-  // attach event handlers
-  for (const eventName of eventNames) {
-    const eventHandlerFn = props[getEventFnName(eventName)];
-
-    useEffect(() => {
-      controlRef.current?.$on(
-        eventName,
-        !eventHandlerFn
-          ? undefined
-          : (e) => {
-              (eventHandlerFn as any)(e.detail);
-            }
-      );
-    }, [eventHandlerFn]);
-  }
-
-  useImperativeHandle(ref, () => ({
-    setQuery: (value: string, submit = true) =>
-      controlRef.current?.setQuery(value, submit),
-    focus: () => controlRef.current?.focus(),
-    blur: () => controlRef.current?.blur(),
-  }));
-
-  return createElement("div", { ref: divRef });
-});
-
-export { ReactGeocodingControl as GeocodingControl };