@maptiler/geocoding-control 0.0.36 → 0.0.37

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

@@ -7,6 +7,8 @@ import type {
   Marker,
   FlyToOptions,
   GeoJSONSource,
+  FillLayerSpecification,
+  LineLayerSpecification,
 } from "maplibre-gl";
 import MarkerIcon from "./MarkerIcon.svelte";
 import type { Feature, MapController, Proximity } from "./types";
@@ -30,7 +32,29 @@ export function createMaplibreglMapController(
   marker: boolean | maplibregl.MarkerOptions = true,
   showResultMarkers: boolean | maplibregl.MarkerOptions = true,
   flyToOptions: FlyToOptions = {},
-  fitBoundsOptions: FitBoundsOptions = {}
+  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;
 
@@ -42,44 +66,33 @@ export function createMaplibreglMapController(
 
   let selectedMarker: maplibregl.Marker | undefined;
 
-  function addPreviewLayer() {
-    map.addSource("preview", {
+  function addFullGeometryLayer() {
+    map.addSource("full-geom", {
       type: "geojson",
       data: emptyGeojson,
     });
 
     map.addLayer({
-      id: "preview-fill",
+      ...fullGeometryStyle.fill,
+      id: "full-geom-fill",
       type: "fill",
-      source: "preview",
-      layout: {},
-      paint: {
-        "fill-color": "#000",
-        "fill-opacity": 0.1,
-      },
+      source: "full-geom",
       filter: ["==", ["geometry-type"], "Polygon"],
     });
 
     map.addLayer({
-      id: "preview-line",
+      ...fullGeometryStyle.line,
+      id: "full-geom-line",
       type: "line",
-      source: "preview",
-      layout: {
-        "line-cap": "square",
-      },
-      paint: {
-        "line-width": ["case", ["==", ["geometry-type"], "Polygon"], 2, 3],
-        "line-dasharray": [1, 1],
-        "line-color": "#3170fe",
-      },
+      source: "full-geom",
     });
   }
 
   if (map.loaded()) {
-    addPreviewLayer();
+    addFullGeometryLayer();
   } else {
     map.once("load", () => {
-      addPreviewLayer();
+      addFullGeometryLayer();
     });
   }
 
@@ -156,21 +169,32 @@ export function createMaplibreglMapController(
       picked: Feature | undefined
     ): void {
       function setData(data: GeoJSON.GeoJSON) {
-        (map.getSource("preview") as GeoJSONSource)?.setData(data);
+        (map.getSource("full-geom") as GeoJSONSource)?.setData(data);
       }
 
       for (const marker of markers) {
         marker.remove();
       }
 
-      setData(emptyGeojson);
-
       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;
 
@@ -210,8 +234,6 @@ export function createMaplibreglMapController(
           }
         }
 
-        let m: Marker | undefined = undefined;
-
         if (handled) {
           // nothing
         } else if (
@@ -225,25 +247,17 @@ export function createMaplibreglMapController(
         ) {
           setData(picked as any);
 
-          return;
-        }
-
-        if (typeof marker === "object") {
-          m = new maplibregl.Marker(marker);
-        } else {
-          const element = document.createElement("div");
-
-          new MarkerIcon({
-            props: { displayIn: "maplibre" },
-            target: element,
-          });
-
-          m = new maplibregl.Marker({ element });
+          return; // no pin for (multi)linestrings
         }
 
-        if (m) {
-          markers.push(m.setLngLat(picked.center).addTo(map));
-        }
+        markers.push(
+          (typeof marker === "object"
+            ? new maplibregl.Marker(marker)
+            : createMarker()
+          )
+            .setLngLat(picked.center)
+            .addTo(map)
+        );
       }
 
       for (const feature of markedFeatures ?? []) {
@@ -251,19 +265,14 @@ export function createMaplibreglMapController(
           continue;
         }
 
-        let m: Marker;
-
-        if (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));
+        markers.push(
+          (typeof showResultMarkers === "object"
+            ? new maplibregl.Marker(showResultMarkers)
+            : createMarker()
+          )
+            .setLngLat(feature.center)
+            .addTo(map)
+        );
       }
     },
 

package/src/lib/types.ts

@@ -179,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.
@@ -192,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>