@maptiler/geocoding-control 0.0.44 → 0.0.52

package/src/lib/maplibreglMapController.ts

@@ -11,7 +11,7 @@ import type {
   LineLayerSpecification,
 } from "maplibre-gl";
 import MarkerIcon from "./MarkerIcon.svelte";
-import type { Feature, MapController, Proximity } from "./types";
+import type { Feature, MapController, MapEvent, Proximity } from "./types";
 import union from "@turf/union";
 import type {
   Polygon,
@@ -59,9 +59,7 @@ export function createMaplibreglMapController(
     },
   }
 ) {
-  let proximityChangeHandler: ((proximity: Proximity) => void) | undefined;
-
-  let mapClickHandler: ((coordinates: [number, number]) => void) | undefined;
+  let eventHandler: ((e: MapEvent) => void) | undefined;
 
   let prevProximity: Proximity = undefined;
 
@@ -69,6 +67,8 @@ export function createMaplibreglMapController(
 
   let selectedMarker: maplibregl.Marker | undefined;
 
+  let reverseMarker: maplibregl.Marker | undefined;
+
   function addFullGeometryLayer() {
     if (fullGeometryStyle?.fill || fullGeometryStyle?.line) {
       map.addSource("full-geom", {
@@ -105,7 +105,10 @@ export function createMaplibreglMapController(
   }
 
   const handleMapClick = (e: MapMouseEvent) => {
-    mapClickHandler?.([e.lngLat.lng, e.lngLat.lat]);
+    eventHandler?.({
+      type: "mapClick",
+      coordinates: [e.lngLat.lng, e.lngLat.lat],
+    });
   };
 
   const handleMoveEnd = () => {
@@ -119,37 +122,46 @@ export function createMaplibreglMapController(
     if (prevProximity !== proximity) {
       prevProximity = proximity;
 
-      proximityChangeHandler?.(proximity);
+      eventHandler?.({ type: "proximityChange", proximity });
     }
   };
 
+  function createMarker(interactive = false) {
+    if (!maplibregl) {
+      throw new Error();
+    }
+
+    const element = document.createElement("div");
+
+    if (interactive) {
+      element.classList.add("marker-interactive");
+    }
+
+    new MarkerIcon({
+      props: { displayIn: "maplibre" },
+      target: element,
+    });
+
+    return new maplibregl.Marker({ element, offset: [1, -13] });
+  }
+
   const ctrl: MapController = {
-    setProximityChangeHandler(
-      _proximityChangeHandler: ((proximity: Proximity) => void) | undefined
-    ): void {
-      if (_proximityChangeHandler) {
-        proximityChangeHandler = _proximityChangeHandler;
+    setEventHandler(handler: undefined | ((e: MapEvent) => void)): void {
+      if (handler) {
+        eventHandler = handler;
 
         map.on("moveend", handleMoveEnd);
 
         handleMoveEnd();
+
+        map.on("click", handleMapClick);
       } else {
         map.off("moveend", handleMoveEnd);
 
-        proximityChangeHandler?.(undefined);
-
-        proximityChangeHandler = undefined;
-      }
-    },
+        eventHandler?.({ type: "proximityChange", proximity: undefined });
 
-    setMapClickHandler(
-      _mapClickHandler: ((coordinates: [number, number]) => void) | undefined
-    ): void {
-      mapClickHandler = _mapClickHandler;
+        eventHandler = undefined;
 
-      if (mapClickHandler) {
-        map.on("click", handleMapClick);
-      } else {
         map.off("click", handleMapClick);
       }
     },
@@ -169,13 +181,43 @@ export function createMaplibreglMapController(
     },
 
     indicateReverse(reverse: boolean): void {
-      map.getCanvas().style.cursor = reverse ? "crosshair" : "";
+      map.getCanvasContainer().style.cursor = reverse ? "crosshair" : "";
+    },
+
+    setReverseMarker(coordinates: [number, number]) {
+      if (!maplibregl || !marker) {
+        return;
+      }
+
+      if (reverseMarker) {
+        if (!coordinates) {
+          reverseMarker.remove();
+
+          reverseMarker = undefined;
+        } else {
+          reverseMarker.setLngLat(coordinates);
+        }
+      } else if (coordinates) {
+        reverseMarker = (
+          typeof marker === "object"
+            ? new maplibregl.Marker(marker)
+            : createMarker()
+        )
+          .setLngLat(coordinates)
+          .addTo(map);
+
+        reverseMarker.getElement().classList.add("marker-reverse");
+      }
     },
 
     setMarkers(
       markedFeatures: Feature[] | undefined,
       picked: Feature | undefined
     ): void {
+      if (!marker) {
+        return;
+      }
+
       function setData(data: GeoJSON.GeoJSON) {
         (map.getSource("full-geom") as GeoJSONSource)?.setData(data);
       }
@@ -192,17 +234,6 @@ export function createMaplibreglMapController(
         return;
       }
 
-      const createMarker = () => {
-        const element = document.createElement("div");
-
-        new MarkerIcon({
-          props: { displayIn: "maplibre" },
-          target: element,
-        });
-
-        return new maplibregl.Marker({ element });
-      };
-
       if (picked) {
         let handled = false;
 
@@ -258,7 +289,7 @@ export function createMaplibreglMapController(
           return; // no pin for (multi)linestrings
         }
 
-        if (showResultMarkers) {
+        if (marker) {
           markers.push(
             (typeof marker === "object"
               ? new maplibregl.Marker(marker)
@@ -276,14 +307,45 @@ export function createMaplibreglMapController(
             continue;
           }
 
-          markers.push(
-            (typeof showResultMarkers === "object"
+          const marker = (
+            typeof showResultMarkers === "object"
               ? new maplibregl.Marker(showResultMarkers)
-              : createMarker()
+              : createMarker(true)
+          )
+            .setLngLat(feature.center)
+            .setPopup(
+              new maplibregl.Popup({
+                offset: [1, -27],
+                closeButton: false,
+                closeOnMove: true,
+                className: "maptiler-gc-popup",
+              }).setText(feature.place_name.replace(/,.*/, ""))
             )
-              .setLngLat(feature.center)
-              .addTo(map)
-          );
+            .addTo(map);
+
+          const element = marker.getElement();
+
+          element.addEventListener("click", (e) => {
+            e.stopPropagation();
+
+            eventHandler?.({ type: "markerClick", id: feature.id });
+          });
+
+          element.addEventListener("mouseenter", () => {
+            eventHandler?.({ type: "markerMouseEnter", id: feature.id });
+
+            marker.togglePopup();
+          });
+
+          element.addEventListener("mouseleave", () => {
+            eventHandler?.({ type: "markerMouseLeave", id: feature.id });
+
+            marker.togglePopup();
+          });
+
+          element.classList.toggle("marker-fuzzy", !!feature.matching_text);
+
+          markers.push(marker);
         }
       }
     },

package/src/lib/types.ts

@@ -6,6 +6,7 @@ export type Feature = GeoJSON.Feature & {
   center: [number, number];
   bbox: [number, number, number, number];
   address?: string;
+  matching_text?: string;
 };
 
 export type FeatureCollection = {
@@ -13,16 +14,18 @@ export type FeatureCollection = {
   features: Feature[];
 };
 
-export type MapController = {
-  setProximityChangeHandler(
-    proximityChangeHandler:
-      | undefined
-      | ((proximity: [number, number] | undefined) => void)
-  ): void;
+export type MapEvent =
+  | {
+      type: "proximityChange";
+      proximity: [number, number] | undefined;
+    }
+  | { type: "mapClick"; coordinates: [number, number] }
+  | { type: "markerClick"; id: string }
+  | { type: "markerMouseEnter"; id: string }
+  | { type: "markerMouseLeave"; id: string };
 
-  setMapClickHandler(
-    mapClickHandler: undefined | ((coordinates: [number, number]) => void)
-  ): void;
+export type MapController = {
+  setEventHandler(handler: undefined | ((e: MapEvent) => void)): void;
 
   flyTo(center: [number, number], zoom: number): void;
 
@@ -35,6 +38,8 @@ export type MapController = {
     picked: Feature | undefined
   ): void;
 
+  setReverseMarker(coordinates?: [number, number]): void;
+
   setSelectedMarker(index: number): void;
 };
 
@@ -101,12 +106,12 @@ export type ControlOptions = {
    */
   bbox?: [number, number, number, number];
 
-  // /**
-  //  * Maximum number of results to show.
-  //  *
-  //  * @default 5
-  //  */
-  // limit?: number;
+  /**
+   * Maximum number of results to show.
+   *
+   * @default 5
+   */
+  limit?: number;
 
   /**
    * Specify the language to use for response text and query result weighting.
@@ -114,7 +119,7 @@ export type ControlOptions = {
    * More than one value can also be specified, separated by commas.
    * Defaults to the browser's language settings.
    */
-  language?: string;
+  language?: string | string[];
 
   /**
    * If `false`, indicates that search will only occur on enter key press.
@@ -124,19 +129,12 @@ export type ControlOptions = {
    */
   showResultsWhileTyping?: boolean;
 
-  // /**
-  //  * Set to `false` to disable autocomplete.
-  //  *
-  //  * @default true
-  //  */
-  // autocomplete?: boolean;
-
-  // /**
-  //  * Set to `false` to disable fuzzy search.
-  //  *
-  //  * @default true
-  //  */
-  // fuzzy?: boolean;
+  /**
+   * Set to `false` to disable fuzzy search.
+   *
+   * @default true
+   */
+  fuzzyMatch?: boolean;
 
   /**
    * On geocoded result what zoom level should the map animate to when a bbox isn't found in the response.
@@ -213,6 +211,20 @@ export type ControlOptions = {
    */
   showFullGeometry?: boolean;
 
+  /**
+   * Limit search to specified country(ies).
+   *
+   * @default undefined use all countries
+   */
+  country?: string | string[];
+
+  /**
+   * Filter of feature types to return.
+   *
+   * @default undefined all available feature types are returned
+   */
+  types?: string[];
+
   // TODO - missing but useful from maplibre-gl-geocoder
   // popup // If true, a Popup will be added to the map when clicking on a marker using a default set of popup options. If the value is an object, the popup will be constructed using these options. If false, no popup will be added to the map. Requires that options.maplibregl also be set. (optional, default true)
   // render // A function that specifies how the results should be rendered in the dropdown menu. This function should accepts a single Carmen GeoJSON object as input and return a string. Any HTML in the returned string will be rendered.