@maptiler/geocoding-control 1.4.2-dev.3 → 2.0.0-rc.2

package/svelte/maplibregl-controller.js

@@ -2,8 +2,7 @@ import { feature, featureCollection } from "@turf/helpers";
 import union from "@turf/union";
 import MarkerIcon from "./MarkerIcon.svelte";
 import { setMask } from "./mask";
-const emptyGeojson = featureCollection([]);
-export function createMapLibreGlMapController(map, maplibregl, marker = true, showResultMarkers = true, flyToOptions = {}, fitBoundsOptions = {}, fullGeometryStyle = {
+const defaultGeometryStyle = {
     fill: {
         paint: {
             "fill-color": "#000",
@@ -22,50 +21,70 @@ export function createMapLibreGlMapController(map, maplibregl, marker = true, sh
         },
         filter: ["!", ["has", "isMask"]],
     },
-}) {
+};
+const RESULT_SOURCE = "mtlr-gc-full-geom";
+const RESULT_LAYER_FILL = "mtlr-gc-full-geom-fill";
+const RESULT_LAYER_LINE = "mtlr-gc-full-geom-line";
+export function createMapLibreGlMapController(map, maplibregl, marker = true, showResultMarkers = true, flyToOptions = {}, fitBoundsOptions = {}, fullGeometryStyle = defaultGeometryStyle, showPolyMarker = false) {
     let eventHandler;
     const markers = [];
     let selectedMarker;
     let reverseMarker;
     let savedData; // used to restore features on style switch
-    function addFullGeometryLayer() {
-        if (!map.getSource("full-geom") &&
-            (fullGeometryStyle?.fill || fullGeometryStyle?.line)) {
-            map.addSource("full-geom", {
+    function syncFullGeometryLayer() {
+        if (!map.loaded) {
+            map.once("load", syncFullGeometryLayer);
+            return;
+        }
+        const effFullGeometryStyle = !fullGeometryStyle
+            ? undefined
+            : fullGeometryStyle === true
+                ? defaultGeometryStyle
+                : fullGeometryStyle;
+        if (!effFullGeometryStyle?.fill && !effFullGeometryStyle?.line) {
+            return;
+        }
+        const source = map.getSource(RESULT_SOURCE);
+        if (source) {
+            source.setData(savedData ?? featureCollection([]));
+        }
+        else if (savedData) {
+            map.addSource(RESULT_SOURCE, {
                 type: "geojson",
-                data: emptyGeojson,
+                data: savedData,
             });
         }
-        if (!map.getLayer("full-geom-fill") && fullGeometryStyle?.fill) {
+        else {
+            return;
+        }
+        if (!map.getLayer(RESULT_LAYER_FILL) && effFullGeometryStyle?.fill) {
             map.addLayer({
-                ...fullGeometryStyle?.fill,
-                id: "full-geom-fill",
+                ...effFullGeometryStyle?.fill,
+                id: RESULT_LAYER_FILL,
                 type: "fill",
-                source: "full-geom",
+                source: RESULT_SOURCE,
             });
         }
-        if (!map.getLayer("full-geom-line") && fullGeometryStyle?.line) {
+        if (!map.getLayer(RESULT_LAYER_LINE) && effFullGeometryStyle?.line) {
             map.addLayer({
-                ...fullGeometryStyle?.line,
-                id: "full-geom-line",
+                ...effFullGeometryStyle?.line,
+                id: RESULT_LAYER_LINE,
                 type: "line",
-                source: "full-geom",
+                source: RESULT_SOURCE,
             });
         }
-        if (savedData) {
-            setData(savedData);
-        }
-    }
-    if (map.loaded()) {
-        addFullGeometryLayer();
     }
-    else {
-        map.once("load", () => {
-            addFullGeometryLayer();
-        });
+    function setAndSaveData(data) {
+        savedData = data;
+        syncFullGeometryLayer();
     }
     map.on("styledata", () => {
-        addFullGeometryLayer();
+        // timeout prevents collision with svelte-maplibre library
+        setTimeout(() => {
+            if (savedData) {
+                syncFullGeometryLayer();
+            }
+        });
     });
     const handleMapClick = (e) => {
         eventHandler?.({
@@ -87,13 +106,6 @@ export function createMapLibreGlMapController(map, maplibregl, marker = true, sh
         });
         return new maplibregl.Marker({ element, offset: [1, -13] });
     }
-    function setData(data) {
-        savedData = data;
-        if (!data) {
-            return;
-        }
-        map.getSource("full-geom")?.setData(data);
-    }
     return {
         setEventHandler(handler) {
             if (handler) {
@@ -131,23 +143,25 @@ export function createMapLibreGlMapController(map, maplibregl, marker = true, sh
                 }
             }
             else if (coordinates) {
-                reverseMarker = (typeof marker === "object"
-                    ? new maplibregl.Marker(marker)
-                    : createMarker())
-                    .setLngLat(coordinates)
-                    .addTo(map);
-                reverseMarker.getElement().classList.add("marker-reverse");
+                if (marker instanceof Function) {
+                    reverseMarker = marker(map) ?? undefined;
+                }
+                else {
+                    reverseMarker = (typeof marker === "object"
+                        ? new maplibregl.Marker(marker)
+                        : createMarker())
+                        .setLngLat(coordinates)
+                        .addTo(map);
+                    reverseMarker.getElement().classList.add("marker-reverse");
+                }
             }
         },
         setMarkers(markedFeatures, picked) {
-            if (!marker) {
-                return;
-            }
             for (const marker of markers) {
                 marker.remove();
             }
             markers.length = 0;
-            setData(emptyGeojson);
+            setAndSaveData(undefined);
             if (!maplibregl) {
                 return;
             }
@@ -163,14 +177,14 @@ export function createMapLibreGlMapController(map, maplibregl, marker = true, sh
                         setMask({
                             ...picked,
                             geometry: unioned.geometry,
-                        }, setData);
+                        }, setAndSaveData);
                         handled = true;
                     }
                     else {
                         const geometries = picked.geometry.geometries.filter((geometry) => geometry.type === "LineString" ||
                             geometry.type === "MultiLineString");
                         if (geometries.length > 0) {
-                            setData({
+                            setAndSaveData({
                                 ...picked,
                                 geometry: { type: "GeometryCollection", geometries },
                             });
@@ -183,19 +197,26 @@ export function createMapLibreGlMapController(map, maplibregl, marker = true, sh
                 }
                 else if (picked.geometry.type === "Polygon" ||
                     picked.geometry.type === "MultiPolygon") {
-                    setMask(picked, setData);
+                    setMask(picked, setAndSaveData);
                 }
                 else if (picked.geometry.type === "LineString" ||
                     picked.geometry.type === "MultiLineString") {
-                    setData(picked);
+                    setAndSaveData(picked);
                     return; // no pin for (multi)linestrings
                 }
-                if (marker) {
-                    markers.push((typeof marker === "object"
+                if (!showPolyMarker && picked.geometry.type !== "Point") {
+                    return;
+                }
+                if (marker instanceof Function) {
+                    const m = marker(map, picked);
+                    if (m) {
+                        markers.push(m);
+                    }
+                }
+                else if (marker) {
+                    markers.push(typeof marker === "object"
                         ? new maplibregl.Marker(marker)
-                        : createMarker())
-                        .setLngLat(picked.center)
-                        .addTo(map));
+                        : createMarker().setLngLat(picked.center).addTo(map));
                 }
             }
             if (showResultMarkers) {
@@ -203,19 +224,28 @@ export function createMapLibreGlMapController(map, maplibregl, marker = true, sh
                     if (feature === picked) {
                         continue;
                     }
-                    const marker = (typeof showResultMarkers === "object"
-                        ? new maplibregl.Marker(showResultMarkers)
-                        : createMarker(true))
-                        .setLngLat(feature.center)
-                        .setPopup(new maplibregl.Popup({
-                        offset: [1, -27],
-                        closeButton: false,
-                        closeOnMove: true,
-                        className: "maptiler-gc-popup",
-                    }).setText(feature.place_type[0] === "reverse"
-                        ? feature.place_name
-                        : feature.place_name.replace(/,.*/, "")))
-                        .addTo(map);
+                    let marker;
+                    if (showResultMarkers instanceof Function) {
+                        marker = showResultMarkers(map, feature);
+                        if (!marker) {
+                            continue;
+                        }
+                    }
+                    else {
+                        marker = (typeof showResultMarkers === "object"
+                            ? new maplibregl.Marker(showResultMarkers)
+                            : createMarker(true))
+                            .setLngLat(feature.center)
+                            .setPopup(new maplibregl.Popup({
+                            offset: [1, -27],
+                            closeButton: false,
+                            closeOnMove: true,
+                            className: "maptiler-gc-popup",
+                        }).setText(feature.place_type[0] === "reverse"
+                            ? feature.place_name
+                            : feature.place_name.replace(/,.*/, "")))
+                            .addTo(map);
+                    }
                     const element = marker.getElement();
                     element.addEventListener("click", (e) => {
                         e.stopPropagation();