@maptiler/geocoding-control 0.0.31

package/src/lib/LeafletGeocodingControl.ts

@@ -0,0 +1,123 @@
+import * as L from "leaflet";
+import GeocodingControlComponent from "./GeocodingControl.svelte";
+import { createLeafletMapController } from "./leafletMapController";
+import type { ControlOptions, Feature } from "./types";
+
+export type { Feature } 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);
+  };
+
+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, ...restOptions } = this.#options;
+
+    const flyToOptions = typeof flyTo === "boolean" ? {} : flyTo;
+
+    const mapController = createLeafletMapController(
+      map,
+      marker,
+      showResultMarkers,
+      flyToOptions,
+      flyToOptions
+    );
+
+    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, ...restOptions } = this.#options;
+
+    this.#gc?.$set(restOptions);
+  }
+
+  setQuery(value: string, submit = 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/LoadingIcon.svelte

@@ -0,0 +1,40 @@
+<div>
+  <svg viewBox="0 0 18 18" width="24" height="24">
+    <path
+      fill="#333"
+      d="M4.4 4.4l.8.8c2.1-2.1 5.5-2.1 7.6 0l.8-.8c-2.5-2.5-6.7-2.5-9.2 0z"
+    />
+    <path
+      opacity=".1"
+      d="M12.8 12.9c-2.1 2.1-5.5 2.1-7.6 0-2.1-2.1-2.1-5.5 0-7.7l-.8-.8c-2.5 2.5-2.5 6.7 0 9.2s6.6 2.5 9.2 0 2.5-6.6 0-9.2l-.8.8c2.2 2.1 2.2 5.6 0 7.7z"
+    />
+  </svg>
+</div>
+
+<style>
+  div {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+
+    display: flex;
+    align-items: center;
+  }
+
+  svg {
+    animation: rotate 0.8s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
+  }
+
+  @keyframes rotate {
+    from {
+      -webkit-transform: rotate(0);
+      transform: rotate(0);
+    }
+    to {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+</style>

package/src/lib/MaplibreglGeocodingControl.ts

@@ -0,0 +1,141 @@
+import {
+  type Map,
+  type IControl,
+  type MarkerOptions,
+  type FlyToOptions,
+  type FitBoundsOptions,
+  Evented,
+} from "maplibre-gl";
+import type maplibregl from "maplibre-gl";
+import GeocodingControlComponent from "./GeocodingControl.svelte";
+import type { ControlOptions, Feature } from "./types";
+import { createMaplibreMapController } from "./maplibreMapController";
+
+export type { Feature } from "./types";
+
+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);
+};
+
+export class GeocodingControl extends Evented 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, ...restOptions } =
+      this.#options;
+
+    const flyToOptions = typeof flyTo === "boolean" ? {} : flyTo;
+
+    const mapController = createMaplibreMapController(
+      map,
+      maplibregl,
+      marker,
+      showResultMarkers,
+      flyToOptions,
+      flyToOptions
+    );
+
+    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.fire(eventName.toLowerCase(), event.detail)
+      );
+    }
+
+    return div;
+  }
+
+  setOptions(options: MapLibreControlOptions) {
+    this.#options = options;
+
+    const { maplibregl, marker, showResultMarkers, flyTo, ...restOptions } =
+      this.#options;
+
+    this.#gc?.$set(restOptions);
+  }
+
+  setQuery(value: string, submit = 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/MarkerIcon.svelte

@@ -0,0 +1,63 @@
+<script type="ts">
+  export let displayIn: "list" | "leaflet" | "maplibre";
+</script>
+
+<svg
+  width={displayIn !== "list" ? undefined : "20"}
+  viewBox="0 0 70 85"
+  fill="none"
+  class:in-map={displayIn !== "list"}
+  class:for-maplibre={displayIn === "maplibre"}
+  class:for-leaflet={displayIn === "leaflet"}
+  class:list-icon={displayIn === "list"}
+>
+  <path
+    stroke-width="4"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M 5,33.103579 C 5,17.607779 18.457,5 35,5 C 51.543,5 65,17.607779 65,33.103579 C 65,56.388679 40.4668,76.048179 36.6112,79.137779 C 36.3714,79.329879 36.2116,79.457979 36.1427,79.518879 C 35.8203,79.800879 35.4102,79.942779 35,79.942779 C 34.5899,79.942779 34.1797,79.800879 33.8575,79.518879 C 33.7886,79.457979 33.6289,79.330079 33.3893,79.138079 C 29.5346,76.049279 5,56.389379 5,33.103579 Z M 35.0001,49.386379 C 43.1917,49.386379 49.8323,42.646079 49.8323,34.331379 C 49.8323,26.016779 43.1917,19.276479 35.0001,19.276479 C 26.8085,19.276479 20.1679,26.016779 20.1679,34.331379 C 20.1679,42.646079 26.8085,49.386379 35.0001,49.386379 Z"
+  />
+</svg>
+
+<style>
+  svg {
+    fill: #6b7c93;
+    stroke: #6b7c93;
+  }
+
+  .list-icon {
+    grid-row: 1/3;
+    align-self: center;
+    margin: 8px;
+  }
+
+  .in-map {
+    height: 30px;
+  }
+
+  .for-maplibre {
+    position: relative;
+    top: -10px;
+  }
+
+  .for-leaflet {
+    position: relative;
+    top: -23px;
+    left: -50%;
+  }
+
+  :global(.maplibregl-canvas-container .marker-selected) {
+    z-index: 1;
+  }
+
+  :global(.maplibregl-canvas-container) svg path,
+  :global(.leaflet-map-pane) svg path {
+    fill: #3170fe;
+    stroke: #3170fe;
+  }
+
+  :global(.marker-selected) svg path {
+    fill: #98b7ff;
+    stroke: #3170fe;
+  }
+</style>

package/src/lib/SearchIcon.svelte

@@ -0,0 +1,12 @@
+<svg viewBox="0 0 18 18" xml:space="preserve" width="20">
+  <path
+    d="M7.4 2.5c-2.7 0-4.9 2.2-4.9 4.9s2.2 4.9 4.9 4.9c1 0 1.8-.2 2.5-.8l3.7 3.7c.2.2.4.3.8.3.7 0 1.1-.4 1.1-1.1 0-.3-.1-.5-.3-.8L11.4 10c.4-.8.8-1.6.8-2.5.1-2.8-2.1-5-4.8-5zm0 1.6c1.8 0 3.2 1.4 3.2 3.2s-1.4 3.2-3.2 3.2-3.3-1.3-3.3-3.1 1.4-3.3 3.3-3.3z"
+  />
+</svg>
+
+<style>
+  svg {
+    display: block;
+    fill: var(--color-icon-button);
+  }
+</style>

package/src/lib/leafletMapController.ts

@@ -0,0 +1,146 @@
+import * as L from "leaflet";
+import MarkerIcon from "./MarkerIcon.svelte";
+import type { Feature, MapController, Proximity } from "./types";
+
+export function createLeafletMapController(
+  map: L.Map,
+  marker: boolean | L.MarkerOptions = true,
+  showResultMarkers: boolean | L.MarkerOptions = true,
+  flyToOptions: L.ZoomPanOptions = {},
+  flyToBounds: L.FitBoundsOptions = {}
+) {
+  let proximityChangeHandler: ((proximity: Proximity) => void) | undefined;
+
+  let mapClickHandler: ((coordinates: [number, number]) => void) | undefined;
+
+  let prevProximity: Proximity = undefined;
+
+  let markers: L.Marker[] = [];
+
+  let selectedMarker: L.Marker | undefined;
+
+  const handleMoveEnd = () => {
+    if (!proximityChangeHandler) {
+      prevProximity = undefined;
+
+      return;
+    }
+
+    let c: L.LatLng;
+
+    const proximity =
+      map.getZoom() > 10
+        ? ([(c = map.getCenter().wrap()).lng, c.lat] as [number, number])
+        : undefined;
+
+    if (prevProximity !== proximity) {
+      prevProximity = proximity;
+
+      proximityChangeHandler(proximity);
+    }
+  };
+
+  const handleMapClick = (e: L.LeafletMouseEvent) => {
+    mapClickHandler?.([e.latlng.lng, e.latlng.lat]);
+  };
+
+  const ctrl: MapController = {
+    setProximityChangeHandler(
+      _proximityChangeHandler: ((proximity: Proximity) => void) | undefined
+    ): void {
+      if (_proximityChangeHandler) {
+        proximityChangeHandler = _proximityChangeHandler;
+
+        map.on("moveend", handleMoveEnd);
+
+        handleMoveEnd();
+      } else {
+        map.off("moveend", handleMoveEnd);
+
+        proximityChangeHandler?.(undefined);
+
+        proximityChangeHandler = undefined;
+      }
+    },
+
+    setMapClickHandler(
+      _mapClickHandler: ((coordinates: [number, number]) => void) | undefined
+    ): void {
+      mapClickHandler = _mapClickHandler;
+
+      if (mapClickHandler) {
+        map.on("click", handleMapClick);
+      } else {
+        map.off("click", handleMapClick);
+      }
+    },
+
+    flyTo(center: [number, number], zoom: number) {
+      map.flyTo(center, zoom, flyToOptions);
+    },
+
+    fitBounds(bbox: [number, number, number, number], padding: number): void {
+      map.flyToBounds(
+        [
+          [bbox[1], bbox[0]],
+          [bbox[3], bbox[2]],
+        ],
+        { ...flyToBounds, padding: [padding, padding] }
+      );
+    },
+
+    indicateReverse(reverse: boolean): void {
+      map.getContainer().style.cursor = reverse ? "crosshair" : "";
+    },
+
+    setMarkers(
+      markedFeatures: Feature[] | undefined,
+      picked: Feature | undefined
+    ): void {
+      for (const marker of markers) {
+        marker.remove();
+      }
+
+      markers.length = 0;
+
+      for (const feature of picked
+        ? [...(markedFeatures ?? []), picked]
+        : markedFeatures ?? []) {
+        let m: L.Marker;
+
+        const pos: L.LatLngExpression = [feature.center[1], feature.center[0]];
+
+        if (feature === picked && typeof marker === "object") {
+          m = new L.Marker(pos, marker);
+        } else if (
+          feature !== picked &&
+          typeof showResultMarkers === "object"
+        ) {
+          m = new L.Marker(pos, showResultMarkers);
+        } else {
+          const element = document.createElement("div");
+
+          new MarkerIcon({ props: { displayIn: "leaflet" }, target: element });
+
+          m = new L.Marker(pos, {
+            icon: new L.DivIcon({ html: element, className: "" }),
+          });
+        }
+
+        markers.push(m.addTo(map));
+      }
+    },
+
+    setSelectedMarker(index: number): void {
+      if (selectedMarker) {
+        selectedMarker.getElement()?.classList.toggle("marker-selected", false);
+      }
+
+      selectedMarker = index > -1 ? markers[index] : undefined;
+
+      selectedMarker?.getElement()?.classList.toggle("marker-selected", true);
+    },
+  };
+
+  return ctrl;
+}

package/src/lib/maplibreMapController.ts

@@ -0,0 +1,149 @@
+import type MapLibreGL from "maplibre-gl";
+import type {
+  FitBoundsOptions,
+  MapMouseEvent,
+  LngLat,
+  Map,
+  Marker,
+  FlyToOptions,
+} from "maplibre-gl";
+import MarkerIcon from "./MarkerIcon.svelte";
+import type { Feature, MapController, Proximity } from "./types";
+
+export function createMaplibreMapController(
+  map: Map,
+  maplibregl?: typeof MapLibreGL | undefined,
+  marker: boolean | maplibregl.MarkerOptions = true,
+  showResultMarkers: boolean | maplibregl.MarkerOptions = true,
+  flyToOptions: FlyToOptions = {},
+  fitBoundsOptions: FitBoundsOptions = {}
+) {
+  let proximityChangeHandler: ((proximity: Proximity) => void) | undefined;
+
+  let mapClickHandler: ((coordinates: [number, number]) => void) | undefined;
+
+  let prevProximity: Proximity = undefined;
+
+  let markers: Marker[] = [];
+
+  let selectedMarker: maplibregl.Marker | undefined;
+
+  const handleMapClick = (e: MapMouseEvent) => {
+    mapClickHandler?.([e.lngLat.lng, e.lngLat.lat]);
+  };
+
+  const handleMoveEnd = () => {
+    let c: LngLat;
+
+    const proximity =
+      map.getZoom() > 9
+        ? ([(c = map.getCenter().wrap()).lng, c.lat] as [number, number])
+        : undefined;
+
+    if (prevProximity !== proximity) {
+      prevProximity = proximity;
+
+      proximityChangeHandler?.(proximity);
+    }
+  };
+
+  const ctrl: MapController = {
+    setProximityChangeHandler(
+      _proximityChangeHandler: ((proximity: Proximity) => void) | undefined
+    ): void {
+      if (_proximityChangeHandler) {
+        proximityChangeHandler = _proximityChangeHandler;
+
+        map.on("moveend", handleMoveEnd);
+
+        handleMoveEnd();
+      } else {
+        map.off("moveend", handleMoveEnd);
+
+        proximityChangeHandler?.(undefined);
+
+        proximityChangeHandler = undefined;
+      }
+    },
+
+    setMapClickHandler(
+      _mapClickHandler: ((coordinates: [number, number]) => void) | undefined
+    ): void {
+      mapClickHandler = _mapClickHandler;
+
+      if (mapClickHandler) {
+        map.on("click", handleMapClick);
+      } else {
+        map.off("click", handleMapClick);
+      }
+    },
+
+    flyTo(center: [number, number], zoom: number): void {
+      map.flyTo({ center, zoom, ...flyToOptions });
+    },
+
+    fitBounds(bbox: [number, number, number, number], padding: number): void {
+      map.fitBounds(
+        [
+          [bbox[0], bbox[1]],
+          [bbox[2], bbox[3]],
+        ],
+        { ...fitBoundsOptions, padding }
+      );
+    },
+
+    indicateReverse(reverse: boolean): void {
+      map.getCanvas().style.cursor = reverse ? "crosshair" : "";
+    },
+
+    setMarkers(
+      markedFeatures: Feature[] | undefined,
+      picked: Feature | undefined
+    ): void {
+      for (const marker of markers) {
+        marker.remove();
+      }
+
+      markers.length = 0;
+
+      if (!maplibregl) {
+        return;
+      }
+
+      for (const feature of picked
+        ? [...(markedFeatures ?? []), picked]
+        : markedFeatures ?? []) {
+        let m: Marker;
+
+        if (feature === picked && typeof marker === "object") {
+          m = new maplibregl.Marker(marker);
+        } else if (
+          feature !== picked &&
+          typeof showResultMarkers === "object"
+        ) {
+          m = new maplibregl.Marker(showResultMarkers);
+        } else {
+          const element = document.createElement("div");
+
+          new MarkerIcon({ props: { displayIn: "maplibre" }, target: element });
+
+          m = new maplibregl.Marker({ element });
+        }
+
+        markers.push(m.setLngLat(feature.center).addTo(map));
+      }
+    },
+
+    setSelectedMarker(index: number): void {
+      if (selectedMarker) {
+        selectedMarker.getElement().classList.toggle("marker-selected", false);
+      }
+
+      selectedMarker = index > -1 ? markers[index] : undefined;
+
+      selectedMarker?.getElement().classList.toggle("marker-selected", true);
+    },
+  };
+
+  return ctrl;
+}