@maptiler/geocoding-control 0.0.32 → 0.0.37

package/src/lib/MaplibreglGeocodingControl.ts

@@ -5,11 +5,14 @@ import {
   type FlyToOptions,
   type FitBoundsOptions,
   Evented,
+  type FillLayerSpecification,
+  type LineLayerSpecification,
 } from "maplibre-gl";
 import type maplibregl from "maplibre-gl";
 import GeocodingControlComponent from "./GeocodingControl.svelte";
 import type { ControlOptions } from "./types";
-import { createMaplibreMapController } from "./maplibreMapController";
+import { createMaplibreglMapController } from "./maplibreglMapController";
+export { createMaplibreglMapController } from "./maplibreglMapController";
 
 type MapLibreGL = typeof maplibregl;
 
@@ -48,6 +51,14 @@ type MapLibreControlOptions = ControlOptions & {
    * @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 Evented implements IControl {
@@ -67,18 +78,25 @@ export class GeocodingControl extends Evented implements IControl {
     div.className =
       "mapboxgl-ctrl-geocoder mapboxgl-ctrl maplibregl-ctrl-geocoder maplibregl-ctrl";
 
-    const { maplibregl, marker, showResultMarkers, flyTo, ...restOptions } =
-      this.#options;
+    const {
+      maplibregl,
+      marker,
+      showResultMarkers,
+      flyTo,
+      fullGeometryStyle,
+      ...restOptions
+    } = this.#options;
 
     const flyToOptions = typeof flyTo === "boolean" ? {} : flyTo;
 
-    const mapController = createMaplibreMapController(
+    const mapController = createMaplibreglMapController(
       map,
       maplibregl,
       marker,
       showResultMarkers,
       flyToOptions,
-      flyToOptions
+      flyToOptions,
+      fullGeometryStyle
     );
 
     this.#gc = new GeocodingControlComponent({
@@ -111,13 +129,19 @@ export class GeocodingControl extends Evented implements IControl {
   setOptions(options: MapLibreControlOptions) {
     this.#options = options;
 
-    const { maplibregl, marker, showResultMarkers, flyTo, ...restOptions } =
-      this.#options;
+    const {
+      maplibregl,
+      marker,
+      showResultMarkers,
+      flyTo,
+      fullGeometryStyle,
+      ...restOptions
+    } = this.#options;
 
     this.#gc?.$set(restOptions);
   }
 
-  setQuery(value: string, submit = true) {
+  setQuery(value: string, submit: boolean | "always" = true) {
     (this.#gc as any)?.setQuery(value, submit);
   }
 

package/src/lib/ReverseGeocodingIcon.svelte

@@ -0,0 +1,12 @@
+<svg viewBox="0 0 60.006 21.412" width="14" height="20">
+  <path
+    d="M30.003-26.765C13.46-26.765 0-14.158 0 1.337c0 23.286 24.535 42.952 28.39 46.04.24.192.402.316.471.376.323.282.732.424 1.142.424.41 0 .82-.142 1.142-.424.068-.06.231-.183.471-.376 3.856-3.09 28.39-22.754 28.39-46.04 0-15.495-13.46-28.102-30.003-28.102Zm1.757 12.469c4.38 0 7.858 1.052 10.431 3.158 2.595 2.105 3.89 4.913 3.89 8.422 0 2.34-.53 4.362-1.593 6.063-1.063 1.702-3.086 3.616-6.063 5.742-2.042 1.51-3.337 2.659-3.89 3.446-.532.787-.8 1.82-.8 3.096v1.914h-8.449V15.18c0-2.041.434-3.815 1.306-5.325.872-1.51 2.467-3.118 4.785-4.82 2.233-1.594 3.7-2.89 4.402-3.889a5.582 5.582 0 0 0 1.087-3.35c0-1.382-.51-2.435-1.531-3.158-1.02-.723-2.45-1.087-4.28-1.087-3.19 0-6.826 1.047-10.91 3.131l-3.472-6.986c4.742-2.659 9.77-3.992 15.087-3.992Zm-1.88 37.324c1.765 0 3.124.472 4.08 1.408.98.936 1.47 2.276 1.47 4.02 0 1.68-.49 3.007-1.47 3.985-.977.957-2.336 1.435-4.08 1.435-1.787 0-3.171-.465-4.15-1.4-.978-.958-1.47-2.298-1.47-4.02 0-1.787.48-3.14 1.436-4.054.957-.915 2.355-1.374 4.184-1.374Z"
+  />
+</svg>
+
+<style>
+  svg {
+    display: block;
+    fill: var(--color-icon-button);
+  }
+</style>

package/src/lib/leafletMapController.ts

@@ -1,13 +1,35 @@
 import * as L from "leaflet";
 import MarkerIcon from "./MarkerIcon.svelte";
 import type { Feature, MapController, Proximity } from "./types";
+import type {
+  Polygon,
+  MultiPolygon,
+  LineString,
+  MultiLineString,
+} from "@turf/helpers";
+import mask from "@turf/mask";
+import union from "@turf/union";
 
 export function createLeafletMapController(
   map: L.Map,
   marker: boolean | L.MarkerOptions = true,
   showResultMarkers: boolean | L.MarkerOptions = true,
   flyToOptions: L.ZoomPanOptions = {},
-  flyToBounds: L.FitBoundsOptions = {}
+  flyToBounds: L.FitBoundsOptions = {},
+  fullGeometryStyle: L.PathOptions | L.StyleFunction = (feature) => {
+    const type = feature?.geometry?.type;
+
+    const weight = type === "LineString" || type === "MultiLineString" ? 3 : 2;
+
+    return {
+      color: "#3170fe",
+      fillColor: "#000",
+      fillOpacity: 0.1,
+      weight,
+      dashArray: [weight, weight],
+      lineCap: "butt",
+    };
+  }
 ) {
   let proximityChangeHandler: ((proximity: Proximity) => void) | undefined;
 
@@ -19,6 +41,10 @@ export function createLeafletMapController(
 
   let selectedMarker: L.Marker | undefined;
 
+  let resultLayer = L.geoJSON(undefined, {
+    style: fullGeometryStyle,
+  }).addTo(map);
+
   const handleMoveEnd = () => {
     if (!proximityChangeHandler) {
       prevProximity = undefined;
@@ -76,7 +102,7 @@ export function createLeafletMapController(
     },
 
     flyTo(center: [number, number], zoom: number) {
-      map.flyTo(center, zoom, flyToOptions);
+      map.flyTo(center, zoom, { duration: 2, ...flyToOptions });
     },
 
     fitBounds(bbox: [number, number, number, number], padding: number): void {
@@ -85,7 +111,7 @@ export function createLeafletMapController(
           [bbox[1], bbox[0]],
           [bbox[3], bbox[2]],
         ],
-        { ...flyToBounds, padding: [padding, padding] }
+        { padding: [padding, padding], duration: 2, ...flyToBounds }
       );
     },
 
@@ -97,37 +123,110 @@ export function createLeafletMapController(
       markedFeatures: Feature[] | undefined,
       picked: Feature | undefined
     ): void {
+      function setData(data?: GeoJSON.GeoJSON) {
+        resultLayer.clearLayers();
+
+        if (data) {
+          resultLayer.addData(data);
+        }
+      }
+
       for (const marker of markers) {
         marker.remove();
       }
 
       markers.length = 0;
 
-      for (const feature of picked
-        ? [...(markedFeatures ?? []), picked]
-        : markedFeatures ?? []) {
-        let m: L.Marker;
+      setData();
 
-        const pos: L.LatLngExpression = [feature.center[1], feature.center[0]];
+      const createMarker = (pos: L.LatLngExpression) => {
+        const element = document.createElement("div");
+
+        new MarkerIcon({ props: { displayIn: "leaflet" }, target: element });
+
+        return new L.Marker(pos, {
+          icon: new L.DivIcon({ html: element, className: "" }),
+        });
+      };
+
+      if (picked) {
+        let handled = false;
+
+        if (picked.geometry.type === "GeometryCollection") {
+          const geoms = picked.geometry.geometries.filter(
+            (geometry) =>
+              geometry.type === "Polygon" || geometry.type === "MultiPolygon"
+          ) as (Polygon | MultiPolygon)[];
+
+          if (geoms.length > 0) {
+            let geometry = geoms.pop()!;
+
+            for (const geom of geoms) {
+              geometry = union(geometry, geom) as unknown as
+                | Polygon
+                | MultiPolygon; // union actually returns geometry
+            }
+
+            setData(mask({ ...picked, geometry }));
 
-        if (feature === picked && typeof marker === "object") {
-          m = new L.Marker(pos, marker);
+            handled = true;
+          } else {
+            const geometries = picked.geometry.geometries.filter(
+              (geometry) =>
+                geometry.type === "LineString" ||
+                geometry.type === "MultiLineString"
+            ) as (LineString | MultiLineString)[];
+
+            if (geometries.length > 0) {
+              setData({
+                ...picked,
+                geometry: { type: "GeometryCollection", geometries },
+              });
+
+              handled = true;
+            }
+          }
+        }
+
+        if (handled) {
+          // nothing
+        } else if (
+          picked.geometry.type === "Polygon" ||
+          picked.geometry.type === "MultiPolygon"
+        ) {
+          setData(mask(picked as any));
         } else if (
-          feature !== picked &&
-          typeof showResultMarkers === "object"
+          picked.geometry.type === "LineString" ||
+          picked.geometry.type === "MultiLineString"
         ) {
-          m = new L.Marker(pos, showResultMarkers);
-        } else {
-          const element = document.createElement("div");
+          setData(picked as any);
 
-          new MarkerIcon({ props: { displayIn: "leaflet" }, target: element });
+          return; // no pin for (multi)linestrings
+        }
+
+        const pos: L.LatLngExpression = [picked.center[1], picked.center[0]];
+
+        markers.push(
+          (typeof marker === "object"
+            ? new L.Marker(pos, marker)
+            : createMarker(pos)
+          ).addTo(map)
+        );
+      }
 
-          m = new L.Marker(pos, {
-            icon: new L.DivIcon({ html: element, className: "" }),
-          });
+      for (const feature of markedFeatures ?? []) {
+        if (feature === picked) {
+          continue;
         }
 
-        markers.push(m.addTo(map));
+        const pos: L.LatLngExpression = [feature.center[1], feature.center[0]];
+
+        markers.push(
+          (typeof showResultMarkers === "object"
+            ? new L.Marker(pos, showResultMarkers)
+            : createMarker(pos)
+          ).addTo(map)
+        );
       }
     },
 

package/src/lib/maplibreglMapController.ts

@@ -0,0 +1,291 @@
+import type MapLibreGL from "maplibre-gl";
+import type {
+  FitBoundsOptions,
+  MapMouseEvent,
+  LngLat,
+  Map,
+  Marker,
+  FlyToOptions,
+  GeoJSONSource,
+  FillLayerSpecification,
+  LineLayerSpecification,
+} from "maplibre-gl";
+import MarkerIcon from "./MarkerIcon.svelte";
+import type { Feature, MapController, Proximity } from "./types";
+import mask from "@turf/mask";
+import union from "@turf/union";
+import type {
+  Polygon,
+  MultiPolygon,
+  LineString,
+  MultiLineString,
+} from "@turf/helpers";
+
+let emptyGeojson: GeoJSON.FeatureCollection = {
+  type: "FeatureCollection",
+  features: [],
+};
+
+export function createMaplibreglMapController(
+  map: Map,
+  maplibregl?: typeof MapLibreGL | undefined,
+  marker: boolean | maplibregl.MarkerOptions = true,
+  showResultMarkers: boolean | maplibregl.MarkerOptions = true,
+  flyToOptions: FlyToOptions = {},
+  fitBoundsOptions: FitBoundsOptions = {},
+  fullGeometryStyle: {
+    fill: Pick<FillLayerSpecification, "layout" | "paint" | "filter">;
+    line: Pick<LineLayerSpecification, "layout" | "paint" | "filter">;
+  } = {
+    fill: {
+      layout: {},
+      paint: {
+        "fill-color": "#000",
+        "fill-opacity": 0.1,
+      },
+    },
+    line: {
+      layout: {
+        "line-cap": "square",
+      },
+      paint: {
+        "line-width": ["case", ["==", ["geometry-type"], "Polygon"], 2, 3],
+        "line-dasharray": [1, 1],
+        "line-color": "#3170fe",
+      },
+    },
+  }
+) {
+  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;
+
+  function addFullGeometryLayer() {
+    map.addSource("full-geom", {
+      type: "geojson",
+      data: emptyGeojson,
+    });
+
+    map.addLayer({
+      ...fullGeometryStyle.fill,
+      id: "full-geom-fill",
+      type: "fill",
+      source: "full-geom",
+      filter: ["==", ["geometry-type"], "Polygon"],
+    });
+
+    map.addLayer({
+      ...fullGeometryStyle.line,
+      id: "full-geom-line",
+      type: "line",
+      source: "full-geom",
+    });
+  }
+
+  if (map.loaded()) {
+    addFullGeometryLayer();
+  } else {
+    map.once("load", () => {
+      addFullGeometryLayer();
+    });
+  }
+
+  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]],
+        ],
+        { padding, ...fitBoundsOptions }
+      );
+    },
+
+    indicateReverse(reverse: boolean): void {
+      map.getCanvas().style.cursor = reverse ? "crosshair" : "";
+    },
+
+    setMarkers(
+      markedFeatures: Feature[] | undefined,
+      picked: Feature | undefined
+    ): void {
+      function setData(data: GeoJSON.GeoJSON) {
+        (map.getSource("full-geom") as GeoJSONSource)?.setData(data);
+      }
+
+      for (const marker of markers) {
+        marker.remove();
+      }
+
+      markers.length = 0;
+
+      setData(emptyGeojson);
+
+      if (!maplibregl) {
+        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;
+
+        if (picked.geometry.type === "GeometryCollection") {
+          const geoms = picked.geometry.geometries.filter(
+            (geometry) =>
+              geometry.type === "Polygon" || geometry.type === "MultiPolygon"
+          ) as (Polygon | MultiPolygon)[];
+
+          if (geoms.length > 0) {
+            let geometry = geoms.pop()!;
+
+            for (const geom of geoms) {
+              geometry = union(geometry, geom) as unknown as
+                | Polygon
+                | MultiPolygon; // union actually returns geometry
+            }
+
+            setData(mask({ ...picked, geometry }));
+
+            handled = true;
+          } else {
+            const geometries = picked.geometry.geometries.filter(
+              (geometry) =>
+                geometry.type === "LineString" ||
+                geometry.type === "MultiLineString"
+            ) as (LineString | MultiLineString)[];
+
+            if (geometries.length > 0) {
+              setData({
+                ...picked,
+                geometry: { type: "GeometryCollection", geometries },
+              });
+
+              handled = true;
+            }
+          }
+        }
+
+        if (handled) {
+          // nothing
+        } else if (
+          picked.geometry.type === "Polygon" ||
+          picked.geometry.type === "MultiPolygon"
+        ) {
+          setData(mask(picked as any));
+        } else if (
+          picked.geometry.type === "LineString" ||
+          picked.geometry.type === "MultiLineString"
+        ) {
+          setData(picked as any);
+
+          return; // no pin for (multi)linestrings
+        }
+
+        markers.push(
+          (typeof marker === "object"
+            ? new maplibregl.Marker(marker)
+            : createMarker()
+          )
+            .setLngLat(picked.center)
+            .addTo(map)
+        );
+      }
+
+      for (const feature of markedFeatures ?? []) {
+        if (feature === picked) {
+          continue;
+        }
+
+        markers.push(
+          (typeof showResultMarkers === "object"
+            ? new maplibregl.Marker(showResultMarkers)
+            : createMarker()
+          )
+            .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;
+}

package/src/lib/types.ts

@@ -1,13 +1,15 @@
-export type Feature = {
+export type Feature = GeoJSON.Feature & {
   id: string;
   text: string;
   place_name: string;
   place_type: string;
   center: [number, number];
   bbox: [number, number, number, number];
+  address?: string;
 };
 
 export type FeatureCollection = {
+  type: "FeatureCollection";
   features: Feature[];
 };
 
@@ -177,11 +179,25 @@ export type ControlOptions = {
   class?: string;
 
   /**
-   * Set to `true` to enable reverse geocoding button with title _toggle reverse geocoding_ or set the button title directly.
+   * Set to `true` to enable reverse geocoding button with title. Set to `"always"` to reverse geocoding be always active.
    *
    * @default false
    */
-  enableReverse?: boolean | string;
+  enableReverse?: boolean | "always";
+
+  /**
+   * Reverse toggle button title.
+   *
+   * @default "toggle reverse geocoding"
+   */
+  reverseButtonTitle?: string;
+
+  /**
+   * Clear button title.
+   *
+   * @default "clear"
+   */
+  clearButtonTitle?: string;
 
   /**
    * Set to `true` to show place type.
@@ -190,6 +206,13 @@ export type ControlOptions = {
    */
   showPlaceType?: boolean;
 
+  /**
+   * Set to `true` to show full feature geometry of the chosen result. Otherwise only marker will be shown.
+   *
+   * @default true
+   */
+  showFullGeometry?: boolean;
+
   // 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.

package/dist/lib/maplibreMapController.d.ts

@@ -1,4 +0,0 @@
-import type MapLibreGL from "maplibre-gl";
-import type { FitBoundsOptions, Map, FlyToOptions } from "maplibre-gl";
-import type { MapController } from "./types";
-export declare function createMaplibreMapController(map: Map, maplibregl?: typeof MapLibreGL | undefined, marker?: boolean | maplibregl.MarkerOptions, showResultMarkers?: boolean | maplibregl.MarkerOptions, flyToOptions?: FlyToOptions, fitBoundsOptions?: FitBoundsOptions): MapController;

package/src/lib/BullseyeIcon.svelte

@@ -1,12 +0,0 @@
-<svg viewBox="0 0 1000 1000" width="18px" height="18px">
-  <path
-    d="M500 115.1c212.2 0 384.9 172.6 384.9 384.9 0 212.2-172.7 384.9-384.9 384.9S115.1 712.2 115.1 500c0-212.4 172.5-384.9 384.9-384.9M500 10C229.4 10 10 229.4 10 500s219.4 490 490 490 490-219.4 490-490c-.2-270.6-219.5-490-490-490zm0 315c96.5 0 175 78.4 175 175 0 96.5-78.4 175-175 175-96.5 0-175-78.4-175-175 0-96.5 78.4-175 175-175m0-105c-154.7 0-279.9 125.4-279.9 279.9 0 154.7 125.4 279.9 279.9 279.9 154.5 0 279.9-125.4 279.9-279.9C779.9 345.3 654.5 220 500 220zm70 280c0 38.7-31.3 70-70 70s-70-31.3-70-70 31.3-70 70-70 70 31.3 70 70z"
-  />
-</svg>
-
-<style>
-  svg {
-    display: block;
-    fill: var(--color-icon-button);
-  }
-</style>