@maptiler/geocoding-control 0.0.38 → 0.0.43

package/package.json

@@ -1,7 +1,18 @@
 {
   "name": "@maptiler/geocoding-control",
-  "version": "0.0.38",
+  "version": "0.0.43",
   "type": "module",
+  "author": {
+    "name": "Martin Ždila",
+    "email": "martin.zdila@maptiler.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/maptiler/maptiler-geocoding-control"
+  },
+  "bugs": {
+    "url": "https://github.com/maptiler/maptiler-geocoding-control/issues"
+  },
   "scripts": {
     "dev": "vite",
     "build": "vite build && mv dist/maplibregl.umd.cjs dist/maplibregl.umd.js && FLAVOUR=leaflet vite build && mv dist/leaflet.umd.cjs dist/leaflet.umd.js && tsc --outDir dist --declaration --emitDeclarationOnly",
@@ -32,19 +43,20 @@
   },
   "types": "./dist/lib/index.d.ts",
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^1.1.0",
+    "@sveltejs/vite-plugin-svelte": "^1.2.0",
     "@tsconfig/svelte": "^3.0.0",
-    "@turf/mask": "^6.5.0",
+    "@turf/buffer": "^6.5.0",
+    "@turf/difference": "^6.5.0",
     "@turf/union": "^6.5.0",
     "@types/leaflet": "^1.9.0",
     "prettier": "^2.7.1",
-    "prettier-plugin-svelte": "^2.8.0",
-    "svelte": "^3.52.0",
+    "prettier-plugin-svelte": "^2.8.1",
+    "svelte": "^3.53.1",
     "svelte-check": "^2.9.2",
     "svelte-preprocess": "^4.10.7",
     "tslib": "^2.4.1",
-    "typescript": "^4.8.4",
-    "vite": "^3.2.3"
+    "typescript": "^4.9.3",
+    "vite": "^3.2.4"
   },
   "peerDependencies": {
     "leaflet": "^1.9.2",

package/src/lib/GeocodingControl.svelte

@@ -272,19 +272,17 @@
 
     const sp = new URLSearchParams();
 
-    sp.set("key", apiKey);
-
     if (language) {
       sp.set("language", String(language));
     }
 
     if (!isReverse) {
       if (bbox) {
-        sp.set("bbox", bbox.join(","));
+        sp.set("bbox", bbox.map((c) => c.toFixed(6)).join(","));
       }
 
       if (proximity) {
-        sp.set("proximity", proximity.join(","));
+        sp.set("proximity", proximity.map((c) => c.toFixed(6)).join(","));
       }
 
       // sp.set("autocomplete", String(autocomplete));
@@ -294,6 +292,8 @@
 
     // sp.set("limit", String(limit));
 
+    sp.set("key", apiKey);
+
     const url =
       import.meta.env.VITE_API_URL +
       "/" +
@@ -381,10 +381,27 @@
     }
   }
 
+  // taken from Leaflet
+  export function wrapNum(
+    x: number,
+    range: [number, number],
+    includeMax: boolean
+  ) {
+    const max = range[1],
+      min = range[0],
+      d = max - min;
+
+    return x === max && includeMax ? x : ((((x - min) % d) + d) % d) + min;
+  }
+
   function handleReverse(coordinates: [lng: number, lat: number]) {
     reverseActive = enableReverse === "always";
 
-    setQuery(coordinates[0].toFixed(6) + "," + coordinates[1].toFixed(6));
+    setQuery(
+      wrapNum(coordinates[0], [-180, 180], true).toFixed(6) +
+        "," +
+        coordinates[1].toFixed(6)
+    );
   }
 
   function handleKeyDown(e: KeyboardEvent) {

package/src/lib/MaplibreglGeocodingControl.ts

@@ -1,12 +1,11 @@
-import {
-  type Map,
-  type IControl,
-  type MarkerOptions,
-  type FlyToOptions,
-  type FitBoundsOptions,
-  Evented,
-  type FillLayerSpecification,
-  type LineLayerSpecification,
+import type {
+  Map,
+  IControl,
+  MarkerOptions,
+  FlyToOptions,
+  FitBoundsOptions,
+  FillLayerSpecification,
+  LineLayerSpecification,
 } from "maplibre-gl";
 import type maplibregl from "maplibre-gl";
 import GeocodingControlComponent from "./GeocodingControl.svelte";
@@ -61,7 +60,7 @@ type MapLibreControlOptions = ControlOptions & {
   };
 };
 
-export class GeocodingControl extends Evented implements IControl {
+export class GeocodingControl extends EventTarget implements IControl {
   #gc?: GeocodingControlComponent;
 
   #options: MapLibreControlOptions;
@@ -118,9 +117,7 @@ export class GeocodingControl extends Evented implements IControl {
       "reverseToggle",
       "queryChange",
     ]) {
-      this.#gc.$on(eventName, (event) =>
-        this.fire(eventName.toLowerCase(), event.detail)
-      );
+      this.#gc.$on(eventName, (event) => this.dispatchEvent(event));
     }
 
     return div;

package/src/lib/leafletMapController.ts

@@ -7,8 +7,8 @@ import type {
   LineString,
   MultiLineString,
 } from "@turf/helpers";
-import mask from "@turf/mask";
 import union from "@turf/union";
+import { setMask } from "./mask";
 
 export function createLeafletMapController(
   map: L.Map,
@@ -19,12 +19,16 @@ export function createLeafletMapController(
   fullGeometryStyle: L.PathOptions | L.StyleFunction = (feature) => {
     const type = feature?.geometry?.type;
 
-    const weight = type === "LineString" || type === "MultiLineString" ? 3 : 2;
+    const weight = feature?.properties?.isMask
+      ? 0
+      : type === "LineString" || type === "MultiLineString"
+      ? 3
+      : 2;
 
     return {
       color: "#3170fe",
       fillColor: "#000",
-      fillOpacity: 0.1,
+      fillOpacity: feature?.properties?.isMask ? 0.1 : 0,
       weight,
       dashArray: [weight, weight],
       lineCap: "butt",
@@ -167,7 +171,7 @@ export function createLeafletMapController(
                 | MultiPolygon; // union actually returns geometry
             }
 
-            setData(mask({ ...picked, geometry }));
+            setMask({ ...picked, geometry }, setData);
 
             handled = true;
           } else {
@@ -194,7 +198,7 @@ export function createLeafletMapController(
           picked.geometry.type === "Polygon" ||
           picked.geometry.type === "MultiPolygon"
         ) {
-          setData(mask(picked as any));
+          setMask(picked as any, setData);
         } else if (
           picked.geometry.type === "LineString" ||
           picked.geometry.type === "MultiLineString"

package/src/lib/maplibreglMapController.ts

@@ -12,7 +12,6 @@ import type {
 } 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,
@@ -20,6 +19,7 @@ import type {
   LineString,
   MultiLineString,
 } from "@turf/helpers";
+import { setMask } from "./mask";
 
 let emptyGeojson: GeoJSON.FeatureCollection = {
   type: "FeatureCollection",
@@ -38,11 +38,11 @@ export function createMaplibreglMapController(
     line: Pick<LineLayerSpecification, "layout" | "paint" | "filter">;
   } = {
     fill: {
-      layout: {},
       paint: {
         "fill-color": "#000",
         "fill-opacity": 0.1,
       },
+      filter: ["all", ["==", ["geometry-type"], "Polygon"], ["has", "isMask"]],
     },
     line: {
       layout: {
@@ -53,6 +53,7 @@ export function createMaplibreglMapController(
         "line-dasharray": [1, 1],
         "line-color": "#3170fe",
       },
+      filter: ["!", ["has", "isMask"]],
     },
   }
 ) {
@@ -77,7 +78,6 @@ export function createMaplibreglMapController(
       id: "full-geom-fill",
       type: "fill",
       source: "full-geom",
-      filter: ["==", ["geometry-type"], "Polygon"],
     });
 
     map.addLayer({
@@ -213,7 +213,7 @@ export function createMaplibreglMapController(
                 | MultiPolygon; // union actually returns geometry
             }
 
-            setData(mask({ ...picked, geometry }));
+            setMask({ ...picked, geometry }, setData);
 
             handled = true;
           } else {
@@ -240,7 +240,7 @@ export function createMaplibreglMapController(
           picked.geometry.type === "Polygon" ||
           picked.geometry.type === "MultiPolygon"
         ) {
-          setData(mask(picked as any));
+          setMask(picked as any, setData);
         } else if (
           picked.geometry.type === "LineString" ||
           picked.geometry.type === "MultiLineString"

package/src/lib/mask.ts

@@ -0,0 +1,69 @@
+import type {
+  Polygon,
+  MultiPolygon,
+  Feature as TurfFeature,
+  Position,
+} from "@turf/helpers";
+import difference from "@turf/difference";
+import buffer from "@turf/buffer";
+
+// see https://maplibre.org/maplibre-gl-js-docs/example/line-across-180th-meridian/
+function fixRing(ring: Position[]) {
+  let prev: Position | undefined = undefined;
+
+  for (const c of ring) {
+    if (prev && c[0] - prev[0] >= 180) {
+      c[0] -= 360;
+    } else if (prev && c[0] - prev[0] < -180) {
+      c[0] += 360;
+    }
+
+    prev = c;
+  }
+}
+
+export function setMask(
+  picked: TurfFeature<Polygon | MultiPolygon>,
+  setData: (data: GeoJSON.GeoJSON) => void
+) {
+  const diff = difference(
+    {
+      type: "Polygon",
+      coordinates: [
+        [
+          [180, 90],
+          [-180, 90],
+          [-180, -90],
+          [180, -90],
+          [180, 90],
+        ],
+      ],
+    },
+    picked
+  );
+
+  if (!diff) {
+    return;
+  }
+
+  diff.properties = { isMask: "y" };
+
+  const fixed = buffer(picked, 0);
+
+  if (fixed.geometry.type === "Polygon") {
+    for (const ring of fixed.geometry.coordinates) {
+      fixRing(ring);
+    }
+  } else {
+    for (const poly of fixed.geometry.coordinates) {
+      for (const ring of poly) {
+        fixRing(ring);
+      }
+    }
+  }
+
+  setData({
+    type: "FeatureCollection",
+    features: [fixed, diff],
+  });
+}