@maptiler/geocoding-control 1.3.3 → 1.4.1

package/style.css

@@ -1 +1 @@
-svg.svelte-d2loi5{display:block;fill:#e15042}li.svelte-ltkwvy.svelte-ltkwvy{text-align:left;cursor:default;display:grid;grid-template-columns:40px 1fr;color:var(--color-text);padding:8px 0;font-size:14px;line-height:18px;min-width:fit-content}li.svelte-ltkwvy.svelte-ltkwvy:first-child{padding-top:10px}li.svelte-ltkwvy.svelte-ltkwvy:last-child{padding-bottom:10px}li.selected.svelte-ltkwvy.svelte-ltkwvy{background-color:#f3f6ff}li.selected.svelte-ltkwvy.svelte-ltkwvy{animation:svelte-ltkwvy-backAndForth 5s linear infinite}li.selected.svelte-ltkwvy .primary.svelte-ltkwvy{color:#2b8bfb}li.svelte-ltkwvy>img.svelte-ltkwvy{align-self:center;justify-self:center;opacity:.75}.texts.svelte-ltkwvy.svelte-ltkwvy{padding:0 17px 0 0}.texts.svelte-ltkwvy>.svelte-ltkwvy{white-space:nowrap;display:block;min-width:fit-content}.primary.svelte-ltkwvy.svelte-ltkwvy{font-weight:600}.secondary.svelte-ltkwvy.svelte-ltkwvy{color:#aeb6c7;padding-left:4px}.line2.svelte-ltkwvy.svelte-ltkwvy{color:#aeb6c7}@keyframes svelte-ltkwvy-backAndForth{0%{transform:translate(0)}10%{transform:translate(0)}45%{transform:translate(calc(-100% + 270px))}55%{transform:translate(calc(-100% + 270px))}90%{transform:translate(0)}to{transform:translate(0)}}div.svelte-7cmwmc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;display:flex;align-items:center}svg.svelte-7cmwmc{animation:svelte-7cmwmc-rotate .8s infinite cubic-bezier(.45,.05,.55,.95)}@keyframes svelte-7cmwmc-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}svg.svelte-gzo3ar.svelte-gzo3ar{display:block;fill:#6b7c93;stroke:#6b7c93}.list-icon.svelte-gzo3ar.svelte-gzo3ar{grid-row:1/3;align-self:center;margin:8px}.in-map.svelte-gzo3ar.svelte-gzo3ar{height:30px}.maplibregl-canvas-container .marker-selected{z-index:1}.maplibregl-canvas-container svg.svelte-gzo3ar path.svelte-gzo3ar,.leaflet-map-pane svg.svelte-gzo3ar path.svelte-gzo3ar{fill:#3170fe;stroke:#3170fe}.marker-selected svg.svelte-gzo3ar path.svelte-gzo3ar{fill:#98b7ff;stroke:#3170fe}.marker-reverse svg.svelte-gzo3ar path.svelte-gzo3ar{fill:silver;stroke:gray}.marker-interactive{cursor:pointer!important}.maptiler-gc-popup>.maplibregl-popup-content{padding:2px 8px}svg.svelte-en2qvf{display:block;fill:var(--color-icon-button)}circle.svelte-1aq105l{stroke-width:1.875;fill:none}path.svelte-1aq105l{stroke-width:1.875;stroke-linecap:round}svg.svelte-1aq105l{display:block;stroke:var(--color-icon-button)}form.svelte-zh3kmv.svelte-zh3kmv{font-family:Open Sans,Ubuntu,Helvetica Neue,Arial,Helvetica,sans-serif;position:relative;background-color:#fff;z-index:10;border-radius:4px;transition:max-width .25s;box-shadow:0 2px 5px #33335926;--color-text:#444952;--color-icon-button:#444952}form.svelte-zh3kmv.svelte-zh3kmv,form.svelte-zh3kmv .svelte-zh3kmv,form.svelte-zh3kmv .svelte-zh3kmv:after,form.svelte-zh3kmv .svelte-zh3kmv:before{box-sizing:border-box}form.can-collapse.svelte-zh3kmv.svelte-zh3kmv{max-width:29px}form.svelte-zh3kmv.svelte-zh3kmv,form.svelte-zh3kmv.svelte-zh3kmv:focus-within,form.svelte-zh3kmv.svelte-zh3kmv:hover{width:270px;max-width:270px}input.svelte-zh3kmv.svelte-zh3kmv{font:inherit;font-size:14px;flex-grow:1;min-height:29px;background-color:transparent;color:#444952;white-space:nowrap;overflow:hidden;border:0;margin:0;padding:0}input.svelte-zh3kmv.svelte-zh3kmv:focus{color:#444952;outline:0;outline:none;box-shadow:none}ul.svelte-zh3kmv.svelte-zh3kmv,div.error.svelte-zh3kmv.svelte-zh3kmv,div.no-results.svelte-zh3kmv.svelte-zh3kmv{background-color:#fff;border-radius:4px;left:0;list-style:none;margin:0;padding:0;position:absolute;width:100%;top:calc(100% + 6px);overflow:hidden}ul.svelte-zh3kmv.svelte-zh3kmv{font-size:14px;line-height:16px;box-shadow:0 5px 10px #33335926}div.error.svelte-zh3kmv.svelte-zh3kmv,div.no-results.svelte-zh3kmv.svelte-zh3kmv{font:inherit;line-height:18px;font-size:12px;display:flex;gap:16px}div.error.svelte-zh3kmv.svelte-zh3kmv{padding:16px;font-weight:600;color:#e25041;background-color:#fbeae8}div.error.svelte-zh3kmv div.svelte-zh3kmv{flex-grow:1}div.error.svelte-zh3kmv svg{flex-shrink:0;width:20px;height:20px}div.error.svelte-zh3kmv button.svelte-zh3kmv{flex-shrink:0}div.error.svelte-zh3kmv button.svelte-zh3kmv>svg{width:13px;fill:#e25041}div.error.svelte-zh3kmv button.svelte-zh3kmv:hover svg,div.error.svelte-zh3kmv button.svelte-zh3kmv:active svg{fill:#444952}div.no-results.svelte-zh3kmv.svelte-zh3kmv{padding:14px 24px 14px 16px;font-weight:400;color:#6b7c93;box-shadow:0 5px 10px #33335926}div.no-results.svelte-zh3kmv svg{margin-top:4px;flex-shrink:0;width:20px;height:20px;width:30px;height:30px}.maplibregl-ctrl-bottom-left ul.svelte-zh3kmv.svelte-zh3kmv,.maplibregl-ctrl-bottom-right ul.svelte-zh3kmv.svelte-zh3kmv{top:auto;bottom:100%}button.svelte-zh3kmv.svelte-zh3kmv{padding:0;margin:0;border:0;background-color:transparent;height:auto;width:auto}button.svelte-zh3kmv.svelte-zh3kmv:hover{background-color:transparent}button.svelte-zh3kmv:hover svg,button.svelte-zh3kmv:active svg{fill:#2b8bfb}.input-group.svelte-zh3kmv.svelte-zh3kmv{display:flex;align-items:stretch;gap:7px;padding-inline:8px;border-radius:4px;overflow:hidden}.input-group.svelte-zh3kmv.svelte-zh3kmv:focus-within{outline:#2b8bfb solid 2px}.search-button.svelte-zh3kmv.svelte-zh3kmv{flex-shrink:0}.maplibregl-ctrl-geocoder:not(.maptiler-ctrl) .search-button svg{width:12px!important;transform:translate(.5px)}.clear-button-container.svelte-zh3kmv.svelte-zh3kmv{display:flex;display:none;position:relative;align-items:stretch}.clear-button-container.displayable.svelte-zh3kmv.svelte-zh3kmv{display:flex;flex-shrink:0}.maplibregl-ctrl-geocoder{position:relative;z-index:3}.maptiler-ctrl:not(:empty){box-shadow:none}.maptiler-ctrl .input-group.svelte-zh3kmv.svelte-zh3kmv{padding-inline:8px;border:white solid 2px}.maptiler-ctrl .input-group.svelte-zh3kmv.svelte-zh3kmv:focus-within{border:#2b8bfb solid 2px;outline:0;outline:none}.maptiler-ctrl form.can-collapse.svelte-zh3kmv.svelte-zh3kmv{max-width:33px}.maptiler-ctrl form.svelte-zh3kmv.svelte-zh3kmv,.maptiler-ctrl form.svelte-zh3kmv.svelte-zh3kmv:focus-within,.maptiler-ctrl form.svelte-zh3kmv.svelte-zh3kmv:hover{width:270px;max-width:270px}
+svg.svelte-d2loi5{display:block;fill:#e15042}li.svelte-ltkwvy.svelte-ltkwvy{text-align:left;cursor:default;display:grid;grid-template-columns:40px 1fr;color:var(--color-text);padding:8px 0;font-size:14px;line-height:18px;min-width:fit-content}li.svelte-ltkwvy.svelte-ltkwvy:first-child{padding-top:10px}li.svelte-ltkwvy.svelte-ltkwvy:last-child{padding-bottom:10px}li.selected.svelte-ltkwvy.svelte-ltkwvy{background-color:#f3f6ff}li.selected.svelte-ltkwvy.svelte-ltkwvy{animation:svelte-ltkwvy-backAndForth 5s linear infinite}li.selected.svelte-ltkwvy .primary.svelte-ltkwvy{color:#2b8bfb}li.svelte-ltkwvy>img.svelte-ltkwvy{align-self:center;justify-self:center;opacity:.75}.texts.svelte-ltkwvy.svelte-ltkwvy{padding:0 17px 0 0}.texts.svelte-ltkwvy>.svelte-ltkwvy{white-space:nowrap;display:block;min-width:fit-content}.primary.svelte-ltkwvy.svelte-ltkwvy{font-weight:600}.secondary.svelte-ltkwvy.svelte-ltkwvy{color:#aeb6c7;padding-left:4px}.line2.svelte-ltkwvy.svelte-ltkwvy{color:#aeb6c7}@keyframes svelte-ltkwvy-backAndForth{0%{transform:translate(0)}10%{transform:translate(0)}45%{transform:translate(calc(-100% + 270px))}55%{transform:translate(calc(-100% + 270px))}90%{transform:translate(0)}to{transform:translate(0)}}div.svelte-7cmwmc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;display:flex;align-items:center}svg.svelte-7cmwmc{animation:svelte-7cmwmc-rotate .8s infinite cubic-bezier(.45,.05,.55,.95)}@keyframes svelte-7cmwmc-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}svg.svelte-gzo3ar.svelte-gzo3ar{display:block;fill:#6b7c93;stroke:#6b7c93}.list-icon.svelte-gzo3ar.svelte-gzo3ar{grid-row:1/3;align-self:center;margin:8px}.in-map.svelte-gzo3ar.svelte-gzo3ar{height:30px}.maplibregl-canvas-container .marker-selected{z-index:1}.maplibregl-canvas-container svg.svelte-gzo3ar path.svelte-gzo3ar,.leaflet-map-pane svg.svelte-gzo3ar path.svelte-gzo3ar{fill:#3170fe;stroke:#3170fe}.marker-selected svg.svelte-gzo3ar path.svelte-gzo3ar{fill:#98b7ff;stroke:#3170fe}.marker-reverse svg.svelte-gzo3ar path.svelte-gzo3ar{fill:silver;stroke:gray}.marker-interactive{cursor:pointer!important}.maptiler-gc-popup>.maplibregl-popup-content{padding:2px 8px}svg.svelte-en2qvf{display:block;fill:var(--color-icon-button)}circle.svelte-1aq105l{stroke-width:1.875;fill:none}path.svelte-1aq105l{stroke-width:1.875;stroke-linecap:round}svg.svelte-1aq105l{display:block;stroke:var(--color-icon-button)}form.svelte-qnu791.svelte-qnu791{font-family:Open Sans,Ubuntu,Helvetica Neue,Arial,Helvetica,sans-serif;position:relative;background-color:#fff;z-index:10;border-radius:4px;transition:max-width .25s;box-shadow:0 2px 5px #33335926;--color-text:#444952;--color-icon-button:#444952}form.svelte-qnu791.svelte-qnu791,form.svelte-qnu791 .svelte-qnu791,form.svelte-qnu791 .svelte-qnu791:after,form.svelte-qnu791 .svelte-qnu791:before{box-sizing:border-box}form.can-collapse.svelte-qnu791.svelte-qnu791{max-width:29px}form.can-collapse.svelte-qnu791 input.svelte-qnu791::placeholder{transition:opacity .25s;opacity:0}form.svelte-qnu791.svelte-qnu791,form.svelte-qnu791.svelte-qnu791:focus-within,form.svelte-qnu791.svelte-qnu791:hover{width:270px;max-width:270px}form.svelte-qnu791 input.svelte-qnu791::placeholder,form.svelte-qnu791:focus-within input.svelte-qnu791::placeholder,form.svelte-qnu791:hover input.svelte-qnu791::placeholder{opacity:1}input.svelte-qnu791.svelte-qnu791{font:inherit;font-size:14px;flex-grow:1;min-height:29px;background-color:transparent;color:#444952;white-space:nowrap;overflow:hidden;border:0;margin:0;padding:0}input.svelte-qnu791.svelte-qnu791:focus{color:#444952;outline:0;outline:none;box-shadow:none}ul.svelte-qnu791.svelte-qnu791,div.error.svelte-qnu791.svelte-qnu791,div.no-results.svelte-qnu791.svelte-qnu791{background-color:#fff;border-radius:4px;left:0;list-style:none;margin:0;padding:0;position:absolute;width:100%;top:calc(100% + 6px);overflow:hidden}ul.svelte-qnu791.svelte-qnu791{font-size:14px;line-height:16px;box-shadow:0 5px 10px #33335926}div.error.svelte-qnu791.svelte-qnu791,div.no-results.svelte-qnu791.svelte-qnu791{font:inherit;line-height:18px;font-size:12px;display:flex;gap:16px}div.error.svelte-qnu791.svelte-qnu791{padding:16px;font-weight:600;color:#e25041;background-color:#fbeae8}div.error.svelte-qnu791 div.svelte-qnu791{flex-grow:1}div.error.svelte-qnu791 svg{flex-shrink:0;width:20px;height:20px}div.error.svelte-qnu791 button.svelte-qnu791{flex-shrink:0}div.error.svelte-qnu791 button.svelte-qnu791>svg{width:13px;fill:#e25041}div.error.svelte-qnu791 button.svelte-qnu791:hover svg,div.error.svelte-qnu791 button.svelte-qnu791:active svg{fill:#444952}div.no-results.svelte-qnu791.svelte-qnu791{padding:14px 24px 14px 16px;font-weight:400;color:#6b7c93;box-shadow:0 5px 10px #33335926}div.no-results.svelte-qnu791 svg{margin-top:4px;flex-shrink:0;width:20px;height:20px;width:30px;height:30px}.maplibregl-ctrl-bottom-left ul.svelte-qnu791.svelte-qnu791,.maplibregl-ctrl-bottom-right ul.svelte-qnu791.svelte-qnu791{top:auto;bottom:100%}button.svelte-qnu791.svelte-qnu791{padding:0;margin:0;border:0;background-color:transparent;height:auto;width:auto}button.svelte-qnu791.svelte-qnu791:hover{background-color:transparent}button.svelte-qnu791:hover svg,button.svelte-qnu791:active svg{fill:#2b8bfb}.input-group.svelte-qnu791.svelte-qnu791{display:flex;align-items:stretch;gap:7px;padding-inline:8px;border-radius:4px;overflow:hidden}.input-group.svelte-qnu791.svelte-qnu791:focus-within{outline:#2b8bfb solid 2px}.search-button.svelte-qnu791.svelte-qnu791{flex-shrink:0}.maplibregl-ctrl-geocoder:not(.maptiler-ctrl) .search-button svg{width:12px!important;transform:translate(.5px)}.clear-button-container.svelte-qnu791.svelte-qnu791{display:flex;display:none;position:relative;align-items:stretch}.clear-button-container.displayable.svelte-qnu791.svelte-qnu791{display:flex;flex-shrink:0}.maplibregl-ctrl-geocoder{position:relative;z-index:3}.maptiler-ctrl:not(:empty){box-shadow:none}.maptiler-ctrl .input-group.svelte-qnu791.svelte-qnu791{padding-inline:8px;border:white solid 2px}.maptiler-ctrl .input-group.svelte-qnu791.svelte-qnu791:focus-within{border:#2b8bfb solid 2px;outline:0;outline:none}.maptiler-ctrl form.can-collapse.svelte-qnu791.svelte-qnu791{max-width:33px}.maptiler-ctrl form.svelte-qnu791.svelte-qnu791,.maptiler-ctrl form.svelte-qnu791.svelte-qnu791:focus-within,.maptiler-ctrl form.svelte-qnu791.svelte-qnu791:hover{width:270px;max-width:270px}

package/svelte/FeatureItem.svelte

@@ -20,9 +20,10 @@ $: {
             : undefined;
     } while (index > -1 && (!imageUrl || missingIconsCache.has(imageUrl)));
 }
-$: placeType = feature.id.startsWith("poi.")
-    ? feature.properties?.categories?.join(", ")
-    : (feature.properties?.place_type_name?.[0] ?? feature.place_type[0]);
+$: placeType =
+    feature.properties?.categories?.join(", ") ??
+        feature.properties?.place_type_name?.[0] ??
+        feature.place_type[0];
 function handleImgError() {
     if (imageUrl) {
         missingIconsCache.add(imageUrl);
@@ -37,7 +38,7 @@ function handleImgError() {
     <img src={imageUrl} alt={category} on:error={() => handleImgError()} />
   {:else if feature.address}
     <img src={iconsBaseUrl + "housenumber.svg"} alt={placeType} />
-  {:else if feature.properties?.kind === "road" || feature.properties?.kind === "road_relation"}
+  {:else if feature.id.startsWith("road.")}
     <img src={iconsBaseUrl + "road.svg"} alt={placeType} />
   {:else if feature.id.startsWith("address.")}
     <img src={iconsBaseUrl + "street.svg"} alt={placeType} />
@@ -57,7 +58,7 @@ function handleImgError() {
         {isReverse ? feature.place_name : feature.place_name.replace(/,.*/, "")}
       </span>
 
-      {#if showPlaceType === "always" || (showPlaceType && !feature.address && feature.properties?.kind !== "road" && feature.properties?.kind !== "road_relation" && !feature.id.startsWith("address.") && !feature.id.startsWith("postal_code.") && (!feature.id.startsWith("poi.") || !imageUrl) && !isReverse)}
+      {#if showPlaceType === "always" || (showPlaceType && !feature.address && !feature.id.startsWith("road.") && !feature.id.startsWith("address.") && !feature.id.startsWith("postal_code.") && (!feature.id.startsWith("poi.") || !imageUrl) && !isReverse)}
         <span class="secondary">
           {placeType}
         </span>

package/svelte/GeocodingControl.svelte

@@ -9,6 +9,31 @@ import { default as SearchIcon } from "./SearchIcon.svelte";
 import { unwrapBbox, wrapNum } from "./geoUtils";
 import { getProximity } from "./proximity";
 import { convert } from "geo-coordinates-parser";
+export const ZOOM_DEFAULTS = {
+    continental_marine: 4,
+    country: 4,
+    major_landform: 8,
+    region: 5,
+    subregion: 6,
+    county: 7,
+    joint_municipality: 8,
+    joint_submunicipality: 9,
+    municipality: 10,
+    municipal_district: 11,
+    locality: 12,
+    neighbourhood: 13,
+    place: 14,
+    postal_code: 14,
+    road: 16,
+    poi: 17,
+    address: 18,
+    "poi.peak": 15,
+    "poi.shop": 18,
+    "poi.cafe": 18,
+    "poi.restaurant": 18,
+    "poi.aerodrome": 13,
+    // TODO add many more
+};
 let className = undefined;
 export { className as class };
 export let apiKey;
@@ -43,12 +68,12 @@ export let flyToSelected = false;
 export let markerOnSelected = true;
 export let types = undefined;
 export let excludeTypes = false;
-export let zoom = 16;
-export let maxZoom = 18;
+export let zoom = ZOOM_DEFAULTS;
+export let maxZoom = undefined;
 export let apiUrl = "https://api.maptiler.com/geocoding";
 export let fetchParameters = {};
 export let iconsBaseUrl = "https://cdn.maptiler.com/maptiler-geocoding-control/v" +
-    "1.3.3" +
+    "1.4.1" +
     "/icons/";
 export let adjustUrlQuery = () => { };
 export function focus() {
@@ -109,12 +134,10 @@ $: {
     if (mapController && picked && picked.id !== prevIdToFly && flyTo) {
         if (!picked.bbox ||
             (picked.bbox[0] === picked.bbox[2] && picked.bbox[1] === picked.bbox[3])) {
-            mapController.flyTo(picked.center, picked.id.startsWith("poi.") || picked.id.startsWith("address.")
-                ? maxZoom
-                : zoom);
+            mapController.flyTo(picked.center, computeZoom(picked));
         }
         else {
-            mapController.fitBounds(unwrapBbox(picked.bbox), 50, maxZoom);
+            mapController.fitBounds(unwrapBbox(picked.bbox), 50, computeZoom(picked));
         }
         listFeatures = undefined;
         markedFeatures = undefined;
@@ -123,9 +146,7 @@ $: {
     prevIdToFly = picked?.id;
 }
 $: if (mapController && selected && flyTo && flyToSelected) {
-    mapController.flyTo(selected.center, selected.id.startsWith("poi.") || selected.id.startsWith("address.")
-        ? maxZoom
-        : zoom);
+    mapController.flyTo(selected.center, computeZoom(selected));
 }
 // if markerOnSelected was dynamically changed to false
 $: if (!markerOnSelected) {
@@ -384,7 +405,16 @@ function zoomToResults() {
     }
     const bbox = [180, 90, -180, -90];
     const fuzzyOnly = !markedFeatures.some((feature) => !feature.matching_text);
+    let allZoom;
     for (const feature of markedFeatures) {
+        const featZoom = computeZoom(feature);
+        allZoom =
+            maxZoom ??
+                (allZoom === undefined
+                    ? featZoom
+                    : featZoom === undefined
+                        ? allZoom
+                        : Math.max(allZoom, featZoom));
         if (fuzzyOnly || !feature.matching_text) {
             for (const i of [0, 1, 2, 3]) {
                 bbox[i] = Math[i < 2 ? "min" : "max"](bbox[i], feature.bbox?.[i] ?? feature.center[i % 2]);
@@ -393,13 +423,32 @@ function zoomToResults() {
     }
     if (mapController && markedFeatures.length > 0) {
         if (picked && bbox[0] === bbox[2] && bbox[1] === bbox[3]) {
-            mapController.flyTo(picked.center, zoom);
+            mapController.flyTo(picked.center, computeZoom(picked));
         }
         else {
-            mapController.fitBounds(unwrapBbox(bbox), 50, maxZoom);
+            mapController.fitBounds(unwrapBbox(bbox), 50, allZoom);
         }
     }
 }
+function computeZoom(feature) {
+    if (!feature.bbox ||
+        (feature.bbox[0] !== feature.bbox[2] &&
+            feature.bbox[1] !== feature.bbox[3])) {
+        return undefined;
+    }
+    if (typeof zoom === "number") {
+        return feature.id.startsWith("poi.") || feature.id.startsWith("address.")
+            ? maxZoom
+            : zoom;
+    }
+    const index = feature.id.replace(/\..*/, "");
+    return ((Array.isArray(feature.properties?.categories)
+        ? feature.properties.categories.reduce((a, category) => {
+            const b = zoom[index + "." + category];
+            return a === undefined ? b : b === undefined ? a : Math.max(a, b);
+        }, undefined)
+        : undefined) ?? zoom[index]);
+}
 function handleReverse(coordinates) {
     reverseActive = enableReverse === "always";
     listFeatures = undefined;
@@ -572,10 +621,17 @@ form, form *, form *:after, form *:before {
 form.can-collapse {
   max-width: 29px;
 }
+form.can-collapse input::placeholder {
+  transition: opacity 0.25s;
+  opacity: 0;
+}
 form, form:focus-within, form:hover {
   width: 270px;
   max-width: 270px;
 }
+form input::placeholder, form:focus-within input::placeholder, form:hover input::placeholder {
+  opacity: 1;
+}
 
 input {
   font: inherit;

package/svelte/GeocodingControl.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { BBox, Feature, FeatureCollection, MapController, ProximityRule } from "./types";
 declare const __propDef: {
     props: {
+        ZOOM_DEFAULTS?: Record<string, number>;
         class?: string | undefined;
         apiKey: string;
         bbox?: BBox | undefined;
@@ -33,8 +34,8 @@ declare const __propDef: {
         markerOnSelected?: boolean;
         types?: string[] | undefined;
         excludeTypes?: boolean;
-        zoom?: number;
-        maxZoom?: number;
+        zoom?: number | Record<string, number>;
+        maxZoom?: number | undefined;
         apiUrl?: string;
         fetchParameters?: RequestInit;
         iconsBaseUrl?: string;
@@ -70,6 +71,7 @@ export type GeocodingControlProps = typeof __propDef.props;
 export type GeocodingControlEvents = typeof __propDef.events;
 export type GeocodingControlSlots = typeof __propDef.slots;
 export default class GeocodingControl extends SvelteComponent<GeocodingControlProps, GeocodingControlEvents, GeocodingControlSlots> {
+    get ZOOM_DEFAULTS(): Record<string, number>;
     get focus(): () => void;
     get blur(): () => void;
     get setQuery(): (value: string, submit?: boolean, reverse?: boolean) => void;

package/svelte/geoUtils.js

@@ -6,7 +6,13 @@ export function wrapNum(x, range, includeMax) {
 export function unwrapBbox(bbox0) {
     const bbox = [...bbox0];
     if (bbox[2] < bbox[0]) {
-        bbox[2] += 360;
+        if (Math.abs((bbox[0] + bbox[2] + 360) / 2) >
+            Math.abs((bbox[0] - 360 + bbox[2]) / 2)) {
+            bbox[0] -= 360;
+        }
+        else {
+            bbox[2] += 360;
+        }
     }
     return bbox;
 }

package/svelte/leaflet-controller.d.ts

@@ -2,8 +2,8 @@ import * as L from "leaflet";
 import type { BBox, Feature, MapEvent, Position } from "./types";
 export declare function createLeafletMapController(map: L.Map, marker?: boolean | L.MarkerOptions, showResultMarkers?: boolean | L.MarkerOptions, flyToOptions?: L.ZoomPanOptions, flyToBounds?: L.FitBoundsOptions, fullGeometryStyle?: L.PathOptions | L.StyleFunction): {
     setEventHandler(handler: undefined | ((e: MapEvent) => void)): void;
-    flyTo(center: Position, zoom: number): void;
-    fitBounds(bbox: BBox, padding: number, maxZoom: number): void;
+    flyTo(center: Position, zoom?: number): void;
+    fitBounds(bbox: BBox, padding: number, maxZoom?: number): void;
     indicateReverse(reverse: boolean): void;
     setReverseMarker(coordinates?: Position): void;
     setMarkers(markedFeatures: Feature[] | undefined, picked: Feature | undefined): void;

package/svelte/leaflet-controller.js

@@ -1,6 +1,9 @@
+import bbox from "@turf/bbox";
+import clone from "@turf/clone";
 import { feature, featureCollection } from "@turf/helpers";
 import union from "@turf/union";
 import * as L from "leaflet";
+import { unwrapBbox } from "./geoUtils";
 import MarkerIcon from "./MarkerIcon.svelte";
 import { setMask } from "./mask";
 export function createLeafletMapController(map, marker = true, showResultMarkers = true, flyToOptions = {}, flyToBounds = {}, fullGeometryStyle = (feature) => {
@@ -65,7 +68,12 @@ export function createLeafletMapController(map, marker = true, showResultMarkers
             map.flyToBounds([
                 [bbox[1], bbox[0]],
                 [bbox[3], bbox[2]],
-            ], { padding: [padding, padding], duration: 2, maxZoom, ...flyToBounds });
+            ], {
+                padding: [padding, padding],
+                duration: 2,
+                ...(maxZoom ? { maxZoom } : {}),
+                ...flyToBounds,
+            });
         },
         indicateReverse(reverse) {
             map.getContainer().style.cursor = reverse ? "crosshair" : "";
@@ -138,7 +146,24 @@ export function createLeafletMapController(map, marker = true, showResultMarkers
                 }
                 else if (picked.geometry.type === "Polygon" ||
                     picked.geometry.type === "MultiPolygon") {
-                    setMask(picked, setData);
+                    setMask(picked, (fc) => {
+                        if (!fc) {
+                            return;
+                        }
+                        // leaflet doesn't repeat features every 360 degrees along longitude
+                        // so we clone it manually to the direction(s)
+                        // which could be displayed when auto-zoomed on the feature
+                        const features = [...fc.features];
+                        const bb = unwrapBbox(bbox(picked));
+                        const span = bb[2] - bb[0];
+                        if (bb[0] - span / 4 < -180) {
+                            features.push(...shiftPolyCollection(fc, -360).features);
+                        }
+                        if (bb[2] + span / 4 > 180) {
+                            features.push(...shiftPolyCollection(fc, 360).features);
+                        }
+                        setData(featureCollection(features));
+                    });
                 }
                 else if (picked.geometry.type === "LineString" ||
                     picked.geometry.type === "MultiLineString") {
@@ -200,3 +225,24 @@ export function createLeafletMapController(map, marker = true, showResultMarkers
         },
     };
 }
+function shiftPolyCollection(featureCollection, distance) {
+    const cloned = clone(featureCollection);
+    for (const feature of cloned.features) {
+        if (feature.geometry.type == "MultiPolygon") {
+            for (const poly of feature.geometry.coordinates) {
+                shiftPolyCoords(poly, distance);
+            }
+        }
+        else {
+            shiftPolyCoords(feature.geometry.coordinates, distance);
+        }
+    }
+    return cloned;
+}
+function shiftPolyCoords(coordinates, distance) {
+    for (const ring of coordinates) {
+        for (const position of ring) {
+            position[0] += distance;
+        }
+    }
+}

package/svelte/maplibregl-controller.d.ts

@@ -8,8 +8,8 @@ export declare function createMapLibreGlMapController(map: Map, maplibregl?: Map
     line?: Pick<LineLayerSpecification, "layout" | "paint" | "filter">;
 }): {
     setEventHandler(handler: undefined | ((e: MapEvent) => void)): void;
-    flyTo(center: Position, zoom: number): void;
-    fitBounds(bbox: BBox, padding: number, maxZoom: number): void;
+    flyTo(center: Position, zoom?: number): void;
+    fitBounds(bbox: BBox, padding: number, maxZoom?: number): void;
     indicateReverse(reverse: boolean): void;
     setReverseMarker(coordinates?: Position): void;
     setMarkers(markedFeatures: Feature[] | undefined, picked: Feature | undefined): void;

package/svelte/maplibregl-controller.js

@@ -89,6 +89,9 @@ export function createMapLibreGlMapController(map, maplibregl, marker = true, sh
     }
     function setData(data) {
         savedData = data;
+        if (!data) {
+            return;
+        }
         map.getSource("full-geom")?.setData(data);
     }
     return {
@@ -103,13 +106,13 @@ export function createMapLibreGlMapController(map, maplibregl, marker = true, sh
             }
         },
         flyTo(center, zoom) {
-            map.flyTo({ center, zoom, ...flyToOptions });
+            map.flyTo({ center, ...(zoom ? { zoom } : {}), ...flyToOptions });
         },
         fitBounds(bbox, padding, maxZoom) {
             map.fitBounds([
                 [bbox[0], bbox[1]],
                 [bbox[2], bbox[3]],
-            ], { padding, maxZoom, ...fitBoundsOptions });
+            ], { padding, ...(maxZoom ? { maxZoom } : {}), ...fitBoundsOptions });
         },
         indicateReverse(reverse) {
             map.getCanvasContainer().style.cursor = reverse ? "crosshair" : "";

package/svelte/mask.d.ts

@@ -1,2 +1,2 @@
 import type { Feature, FeatureCollection, MultiPolygon, Polygon } from "geojson";
-export declare function setMask(picked: Feature<Polygon | MultiPolygon>, setData: (data: FeatureCollection<Polygon | MultiPolygon>) => void): void;
+export declare function setMask(picked: Feature<Polygon | MultiPolygon>, setData: (data?: FeatureCollection<Polygon | MultiPolygon>) => void): void;

package/svelte/mask.js

@@ -1,19 +1,9 @@
-import buffer from "@turf/buffer";
+import bbox from "@turf/bbox";
 import difference from "@turf/difference";
+import flatten from "@turf/flatten";
 import { featureCollection, polygon } from "@turf/helpers";
-// see https://maplibre.org/maplibre-gl-js-docs/example/line-across-180th-meridian/
-function fixRing(ring) {
-    let prev = 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;
-    }
-}
+import union from "@turf/union";
+import { unwrapBbox } from "./geoUtils";
 export function setMask(picked, setData) {
     const diff = difference(featureCollection([
         polygon([
@@ -30,22 +20,35 @@ export function setMask(picked, setData) {
     if (!diff) {
         return;
     }
-    diff.properties = { isMask: "y" };
-    const fixed = buffer(picked, 0);
-    if (!fixed) {
-        return;
-    }
-    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);
+    diff.properties = { isMask: true };
+    const bb = unwrapBbox(bbox(picked));
+    // bigger features (continents, oceans) have bigger tolerance
+    // because of the used source data simplification
+    const tolerance = (bb[2] - bb[0]) / 360 / 1_000;
+    const leaksLeft = bb[0] < -180;
+    const leaksRight = bb[2] > 180;
+    const flattened = flatten(picked);
+    if (flattened.features.length > 1 && (leaksLeft || leaksRight)) {
+        for (const poly of flattened.features) {
+            const bb = unwrapBbox(bbox(poly));
+            if (leaksRight && bb[0] < -180 + tolerance) {
+                for (const ring of poly.geometry.coordinates) {
+                    for (const position of ring) {
+                        position[0] += 360 - tolerance;
+                    }
+                }
+            }
+            if (leaksLeft && bb[2] > 180 - tolerance) {
+                for (const ring of poly.geometry.coordinates) {
+                    for (const position of ring) {
+                        position[0] -= 360 - tolerance;
+                    }
+                }
             }
         }
     }
-    setData(featureCollection([fixed, diff]));
+    setData(featureCollection([
+        flattened.features.length < 2 ? picked : (union(flattened) ?? picked),
+        diff,
+    ]));
 }

package/svelte/openlayers-controller.js

@@ -1,5 +1,5 @@
-import { Feature } from "ol";
-import { GeometryCollection as OlGeometryCollection, LineString as OlLineString, MultiLineString as OlMultiLineString, MultiPolygon as OlMultiPolygon, Polygon as OlPolygon, Point, } from "ol/geom";
+import { Feature as OlFeature } from "ol";
+import { GeometryCollection as OlGeometryCollection, LineString as OlLineString, MultiLineString as OlMultiLineString, MultiPolygon as OlMultiPolygon, Point as OlPoint, Polygon as OlPolygon, } from "ol/geom";
 import VectorLayer from "ol/layer/Vector";
 import { fromLonLat, getUserProjection, toLonLat, transformExtent, } from "ol/proj";
 import VectorSource from "ol/source/Vector";
@@ -133,7 +133,7 @@ export function createOpenLayersMapController(map, flyToOptions = {}, flyToBound
         flyTo(center, zoom) {
             map.getView().animate({
                 center: fromLonLat(center, getProjection()),
-                zoom,
+                ...(zoom ? { zoom } : {}),
                 duration: 2000,
                 ...flyToOptions,
             });
@@ -141,7 +141,7 @@ export function createOpenLayersMapController(map, flyToOptions = {}, flyToBound
         fitBounds(bbox, padding, maxZoom) {
             map.getView().fit(transformExtent(bbox, EPSG_4326, getProjection()), {
                 padding: [padding, padding, padding, padding],
-                maxZoom,
+                ...(maxZoom ? { maxZoom } : {}),
                 duration: 2000,
                 ...flyToBounds,
             });
@@ -162,7 +162,7 @@ export function createOpenLayersMapController(map, flyToOptions = {}, flyToBound
                 }
             }
             else if (coordinates) {
-                reverseMarker = new Feature(new Point(fromLonLat(coordinates, getProjection())));
+                reverseMarker = new OlFeature(new OlPoint(fromLonLat(coordinates, getProjection())));
                 reverseMarker.setProperties({ isReverse: true });
                 source.addFeature(reverseMarker);
             }
@@ -181,7 +181,7 @@ export function createOpenLayersMapController(map, flyToOptions = {}, flyToBound
                     if (!geom) {
                         continue;
                     }
-                    source.addFeature(new Feature({
+                    source.addFeature(new OlFeature({
                         isMask: !!f.properties?.isMask,
                         geometry: fromWgs84(geom),
                     }));
@@ -191,7 +191,6 @@ export function createOpenLayersMapController(map, flyToOptions = {}, flyToBound
             if (reverseMarker) {
                 source.addFeature(reverseMarker);
             }
-            setData();
             if (picked) {
                 let handled = false;
                 if (picked.geometry.type === "GeometryCollection") {
@@ -203,17 +202,17 @@ export function createOpenLayersMapController(map, flyToOptions = {}, flyToBound
                             : null)
                         .filter((a) => !!a);
                     if (geoms.length > 0) {
-                        source.addFeature(new Feature(fromWgs84(new OlGeometryCollection(geoms))));
+                        source.addFeature(new OlFeature(fromWgs84(new OlGeometryCollection(geoms))));
                         handled = true;
                     }
                     else {
                         for (const geometry of picked.geometry.geometries) {
                             if (geometry.type === "LineString") {
-                                source.addFeature(new Feature(fromWgs84(new OlLineString(geometry.coordinates))));
+                                source.addFeature(new OlFeature(fromWgs84(new OlLineString(geometry.coordinates))));
                                 handled = true;
                             }
                             else if (geometry.type === "MultiLineString") {
-                                source.addFeature(new Feature(fromWgs84(new OlMultiLineString(geometry.coordinates))));
+                                source.addFeature(new OlFeature(fromWgs84(new OlMultiLineString(geometry.coordinates))));
                             }
                             handled = true;
                         }
@@ -229,20 +228,20 @@ export function createOpenLayersMapController(map, flyToOptions = {}, flyToBound
                     setMask(picked, setData);
                 }
                 else if (picked.geometry.type === "LineString") {
-                    source.addFeature(new Feature(fromWgs84(new OlLineString(picked.geometry.coordinates))));
+                    source.addFeature(new OlFeature(fromWgs84(new OlLineString(picked.geometry.coordinates))));
                     return; // no pin for (multi)linestrings
                 }
                 else if (picked.geometry.type === "MultiLineString") {
-                    source.addFeature(new Feature(fromWgs84(new OlMultiLineString(picked.geometry.coordinates))));
+                    source.addFeature(new OlFeature(fromWgs84(new OlMultiLineString(picked.geometry.coordinates))));
                     return; // no pin for (multi)linestrings
                 }
-                source.addFeature(new Feature(fromWgs84(new Point(picked.center))));
+                source.addFeature(new OlFeature(fromWgs84(new OlPoint(picked.center))));
             }
             for (const feature of markedFeatures ?? []) {
                 if (feature === picked) {
                     continue;
                 }
-                const marker = new Feature(new Point(fromLonLat(feature.center, getProjection())));
+                const marker = new OlFeature(new OlPoint(fromLonLat(feature.center, getProjection())));
                 marker.setId(feature.id);
                 marker.setProperties({
                     fuzzy: !!feature.matching_text,

package/svelte/types.d.ts

@@ -30,8 +30,8 @@ export type MapEvent = {
 };
 export type MapController = {
     setEventHandler(handler: undefined | ((e: MapEvent) => void)): void;
-    flyTo(center: Position, zoom: number): void;
-    fitBounds(bbox: BBox, padding: number, maxZoom: number): void;
+    flyTo(center: Position, zoom?: number): void;
+    fitBounds(bbox: BBox, padding: number, maxZoom?: number): void;
     indicateReverse(reverse: boolean): void;
     setMarkers(features: Feature[] | undefined, picked: Feature | undefined): void;
     setReverseMarker(coordinates?: Position): void;
@@ -129,15 +129,21 @@ export type ControlOptions = {
      */
     fuzzyMatch?: boolean;
     /**
-     * On geocoded result what zoom level should the map animate to when a bbox isn't found in the response.
-     * If a bbox is found the map will fit to the bbox.
-     * Default value is `16`
+     * On geocoded result what zoom level should the map animate to when a bbox in the response isn't present or is a point.
+     * If a bbox is present and not a point then the map will fit to the bbox.
+     *
+     * Value can be a number (deprecated) or key-value pairs, where key is a <type> or <type>.<categoy> and value is the zoom level.
+     *
+     * Default value is `GeocodingControl.ZOOM_DEFAULTS`.
      */
-    zoom?: number;
+    zoom?: number | Record<string, number>;
     /**
-     * On geocoded result what max zoom level should the map animate to when a bbox isn't found in the response. Used for small features.
-     * If a bbox is found the map will fit to the bbox.
-     * Default value is `18`.
+     * On geocoded result what max zoom level should the map animate to when a bbox in the response isn't present or is a point.
+     * Used for small features.
+     *
+     * If a bbox is present and not a point then the map will fit to the bbox.
+     *
+     * @deprecated use `zoom` option
      */
     maxZoom?: number;
     /**

package/types.d.ts

@@ -30,8 +30,8 @@ export type MapEvent = {
 };
 export type MapController = {
     setEventHandler(handler: undefined | ((e: MapEvent) => void)): void;
-    flyTo(center: Position, zoom: number): void;
-    fitBounds(bbox: BBox, padding: number, maxZoom: number): void;
+    flyTo(center: Position, zoom?: number): void;
+    fitBounds(bbox: BBox, padding: number, maxZoom?: number): void;
     indicateReverse(reverse: boolean): void;
     setMarkers(features: Feature[] | undefined, picked: Feature | undefined): void;
     setReverseMarker(coordinates?: Position): void;
@@ -129,15 +129,21 @@ export type ControlOptions = {
      */
     fuzzyMatch?: boolean;
     /**
-     * On geocoded result what zoom level should the map animate to when a bbox isn't found in the response.
-     * If a bbox is found the map will fit to the bbox.
-     * Default value is `16`
+     * On geocoded result what zoom level should the map animate to when a bbox in the response isn't present or is a point.
+     * If a bbox is present and not a point then the map will fit to the bbox.
+     *
+     * Value can be a number (deprecated) or key-value pairs, where key is a <type> or <type>.<categoy> and value is the zoom level.
+     *
+     * Default value is `GeocodingControl.ZOOM_DEFAULTS`.
      */
-    zoom?: number;
+    zoom?: number | Record<string, number>;
     /**
-     * On geocoded result what max zoom level should the map animate to when a bbox isn't found in the response. Used for small features.
-     * If a bbox is found the map will fit to the bbox.
-     * Default value is `18`.
+     * On geocoded result what max zoom level should the map animate to when a bbox in the response isn't present or is a point.
+     * Used for small features.
+     *
+     * If a bbox is present and not a point then the map will fit to the bbox.
+     *
+     * @deprecated use `zoom` option
      */
     maxZoom?: number;
     /**