@maptiler/geocoding-control 2.0.0 → 2.0.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-1uvos7g.svelte-1uvos7g{font-family:Open Sans,Ubuntu,Helvetica Neue,Arial,Helvetica,sans-serif;position:relative;background-color:#fff;z-index:10;border-radius:4px;margin:0;transition:max-width .25s;box-shadow:0 2px 5px #33335926;--color-text:#444952;--color-icon-button:#444952}form.svelte-1uvos7g.svelte-1uvos7g,form.svelte-1uvos7g .svelte-1uvos7g,form.svelte-1uvos7g .svelte-1uvos7g:after,form.svelte-1uvos7g .svelte-1uvos7g:before{box-sizing:border-box}form.can-collapse.svelte-1uvos7g.svelte-1uvos7g{max-width:29px}form.can-collapse.svelte-1uvos7g input.svelte-1uvos7g::placeholder{transition:opacity .25s;opacity:0}form.svelte-1uvos7g.svelte-1uvos7g,form.svelte-1uvos7g.svelte-1uvos7g:focus-within,form.svelte-1uvos7g.svelte-1uvos7g:hover{width:270px;max-width:270px}form.svelte-1uvos7g input.svelte-1uvos7g::placeholder,form.svelte-1uvos7g:focus-within input.svelte-1uvos7g::placeholder,form.svelte-1uvos7g:hover input.svelte-1uvos7g::placeholder{opacity:1}input.svelte-1uvos7g.svelte-1uvos7g{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-1uvos7g.svelte-1uvos7g:focus{color:#444952;outline:0;outline:none;box-shadow:none}ul.svelte-1uvos7g.svelte-1uvos7g,div.error.svelte-1uvos7g.svelte-1uvos7g,div.no-results.svelte-1uvos7g.svelte-1uvos7g{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-1uvos7g.svelte-1uvos7g{font-size:14px;line-height:16px;box-shadow:0 5px 10px #33335926}div.error.svelte-1uvos7g.svelte-1uvos7g,div.no-results.svelte-1uvos7g.svelte-1uvos7g{font:inherit;line-height:18px;font-size:12px;display:flex;gap:16px}div.error.svelte-1uvos7g.svelte-1uvos7g{padding:16px;font-weight:600;color:#e25041;background-color:#fbeae8}div.error.svelte-1uvos7g div.svelte-1uvos7g{flex-grow:1}div.error.svelte-1uvos7g svg{flex-shrink:0;width:20px;height:20px}div.error.svelte-1uvos7g button.svelte-1uvos7g{flex-shrink:0}div.error.svelte-1uvos7g button.svelte-1uvos7g>svg{width:13px;fill:#e25041}div.error.svelte-1uvos7g button.svelte-1uvos7g:hover svg,div.error.svelte-1uvos7g button.svelte-1uvos7g:active svg{fill:#444952}div.no-results.svelte-1uvos7g.svelte-1uvos7g{padding:14px 24px 14px 16px;font-weight:400;color:#6b7c93;box-shadow:0 5px 10px #33335926}div.no-results.svelte-1uvos7g svg{margin-top:4px;flex-shrink:0;width:20px;height:20px;width:30px;height:30px}.maplibregl-ctrl-bottom-left ul.svelte-1uvos7g.svelte-1uvos7g,.maplibregl-ctrl-bottom-right ul.svelte-1uvos7g.svelte-1uvos7g{top:auto;bottom:100%}button.svelte-1uvos7g.svelte-1uvos7g{padding:0;margin:0;border:0;background-color:transparent;height:auto;width:auto}button.svelte-1uvos7g.svelte-1uvos7g:hover{background-color:transparent}button.svelte-1uvos7g:hover svg,button.svelte-1uvos7g:active svg{fill:#2b8bfb}.input-group.svelte-1uvos7g.svelte-1uvos7g{display:flex;align-items:stretch;gap:7px;padding-inline:8px;border-radius:4px;overflow:hidden}.input-group.svelte-1uvos7g.svelte-1uvos7g:focus-within{outline:#2b8bfb solid 2px}.search-button.svelte-1uvos7g.svelte-1uvos7g{flex-shrink:0}.maplibregl-ctrl-geocoder:not(.maptiler-ctrl) .search-button svg{width:12px!important;transform:translate(.5px)}.clear-button-container.svelte-1uvos7g.svelte-1uvos7g{display:flex;display:none;position:relative;align-items:stretch}.clear-button-container.displayable.svelte-1uvos7g.svelte-1uvos7g{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-1uvos7g.svelte-1uvos7g{padding-inline:8px;border:white solid 2px}.maptiler-ctrl .input-group.svelte-1uvos7g.svelte-1uvos7g:focus-within{border:#2b8bfb solid 2px;outline:0;outline:none}.maptiler-ctrl form.can-collapse.svelte-1uvos7g.svelte-1uvos7g{max-width:33px}.maptiler-ctrl form.svelte-1uvos7g.svelte-1uvos7g,.maptiler-ctrl form.svelte-1uvos7g.svelte-1uvos7g:focus-within,.maptiler-ctrl form.svelte-1uvos7g.svelte-1uvos7g: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-bz0zu3.svelte-bz0zu3{font-family:Open Sans,Ubuntu,Helvetica Neue,Arial,Helvetica,sans-serif;position:relative;background-color:#fff;z-index:10;border-radius:4px;margin:0;transition:max-width .25s;box-shadow:0 2px 5px #33335926;--color-text:#444952;--color-icon-button:#444952}form.svelte-bz0zu3.svelte-bz0zu3,form.svelte-bz0zu3 .svelte-bz0zu3,form.svelte-bz0zu3 .svelte-bz0zu3:after,form.svelte-bz0zu3 .svelte-bz0zu3:before{box-sizing:border-box}form.can-collapse.svelte-bz0zu3.svelte-bz0zu3{max-width:29px}form.can-collapse.svelte-bz0zu3 input.svelte-bz0zu3::placeholder{transition:opacity .25s;opacity:0}form.svelte-bz0zu3.svelte-bz0zu3,form.svelte-bz0zu3.svelte-bz0zu3:focus-within,form.svelte-bz0zu3.svelte-bz0zu3:hover{width:270px;max-width:270px}form.svelte-bz0zu3 input.svelte-bz0zu3::placeholder,form.svelte-bz0zu3:focus-within input.svelte-bz0zu3::placeholder,form.svelte-bz0zu3:hover input.svelte-bz0zu3::placeholder{opacity:1}input.svelte-bz0zu3.svelte-bz0zu3{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-bz0zu3.svelte-bz0zu3:focus{color:#444952;outline:0;outline:none;box-shadow:none}ul.svelte-bz0zu3.svelte-bz0zu3,div.error.svelte-bz0zu3.svelte-bz0zu3,div.no-results.svelte-bz0zu3.svelte-bz0zu3{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-bz0zu3.svelte-bz0zu3{font-size:14px;line-height:16px;box-shadow:0 5px 10px #33335926}div.error.svelte-bz0zu3.svelte-bz0zu3,div.no-results.svelte-bz0zu3.svelte-bz0zu3{font:inherit;line-height:18px;font-size:12px;display:flex;gap:16px}div.error.svelte-bz0zu3.svelte-bz0zu3{padding:16px;font-weight:600;color:#e25041;background-color:#fbeae8}div.error.svelte-bz0zu3 div.svelte-bz0zu3{flex-grow:1}div.error.svelte-bz0zu3 svg{flex-shrink:0;width:20px;height:20px}div.error.svelte-bz0zu3 button.svelte-bz0zu3{flex-shrink:0}div.error.svelte-bz0zu3 button.svelte-bz0zu3>svg{width:13px;fill:#e25041}div.error.svelte-bz0zu3 button.svelte-bz0zu3:hover svg,div.error.svelte-bz0zu3 button.svelte-bz0zu3:active svg{fill:#444952}div.no-results.svelte-bz0zu3.svelte-bz0zu3{padding:14px 24px 14px 16px;font-weight:400;color:#6b7c93;box-shadow:0 5px 10px #33335926}div.no-results.svelte-bz0zu3 svg{margin-top:4px;flex-shrink:0;width:20px;height:20px;width:30px;height:30px}.leaflet-bottom ul.options.svelte-bz0zu3.svelte-bz0zu3,.maplibregl-ctrl-bottom-left ul.options.svelte-bz0zu3.svelte-bz0zu3,.maplibregl-ctrl-bottom-right ul.options.svelte-bz0zu3.svelte-bz0zu3{top:auto;bottom:calc(100% + 6px)}button.svelte-bz0zu3.svelte-bz0zu3{padding:0;margin:0;border:0;background-color:transparent;height:auto;width:auto}button.svelte-bz0zu3.svelte-bz0zu3:hover{background-color:transparent}button.svelte-bz0zu3:hover svg,button.svelte-bz0zu3:active svg{fill:#2b8bfb}.input-group.svelte-bz0zu3.svelte-bz0zu3{display:flex;align-items:stretch;gap:7px;padding-inline:8px;border-radius:4px;overflow:hidden}.input-group.svelte-bz0zu3.svelte-bz0zu3:focus-within{outline:#2b8bfb solid 2px}.search-button.svelte-bz0zu3.svelte-bz0zu3{flex-shrink:0}.maplibregl-ctrl-geocoder:not(.maptiler-ctrl) .search-button svg{width:12px!important;transform:translate(.5px)}.clear-button-container.svelte-bz0zu3.svelte-bz0zu3{display:flex;display:none;position:relative;align-items:stretch}.clear-button-container.displayable.svelte-bz0zu3.svelte-bz0zu3{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-bz0zu3.svelte-bz0zu3{padding-inline:8px;border:white solid 2px}.maptiler-ctrl .input-group.svelte-bz0zu3.svelte-bz0zu3:focus-within{border:#2b8bfb solid 2px;outline:0;outline:none}.maptiler-ctrl form.can-collapse.svelte-bz0zu3.svelte-bz0zu3{max-width:33px}.maptiler-ctrl form.svelte-bz0zu3.svelte-bz0zu3,.maptiler-ctrl form.svelte-bz0zu3.svelte-bz0zu3:focus-within,.maptiler-ctrl form.svelte-bz0zu3.svelte-bz0zu3:hover{width:270px;max-width:270px}

package/svelte/FeatureItem.svelte

@@ -58,7 +58,7 @@ function handleImgError() {
         {isReverse ? feature.place_name : feature.place_name.replace(/,.*/, "")}
       </span>
 
-      {#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)}
+      {#if showPlaceType === "always" || (showPlaceType !== "never" && !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/FeatureItem.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponent } from "svelte";
-import type { Feature } from "./types";
+import type { Feature, ShowPlaceType } from "./types";
 declare const __propDef: {
     props: {
         feature: Feature;
         selected?: boolean;
-        showPlaceType: false | "always" | "ifNeeded";
+        showPlaceType: ShowPlaceType;
         missingIconsCache: Set<string>;
         iconsBaseUrl: string;
     };

package/svelte/GeocodingControl.svelte

@@ -43,7 +43,7 @@ export let clearOnBlur = false;
 export let collapsed = false;
 export let country = undefined;
 export let debounceSearch = 200;
-export let enableReverse = false;
+export let enableReverse = "never";
 export let errorMessage = "Something went wrong…";
 export let filter = () => true;
 export let flyTo = true;
@@ -60,8 +60,8 @@ export let proximity = [
 export let reverseActive = enableReverse === "always";
 export let reverseButtonTitle = "toggle reverse geocoding";
 export let searchValue = "";
-export let showFullGeometry = true;
-export let showPlaceType = "ifNeeded";
+export let pickedResultStyle = "full-geometry";
+export let showPlaceType = "if-needed";
 export let showResultsWhileTyping = true;
 export let selectFirst = true;
 export let flyToSelected = false;
@@ -70,11 +70,10 @@ export let types = undefined;
 export let exhaustiveReverseGeocoding = false;
 export let excludeTypes = false;
 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" +
-    "2.0.0" +
+    "2.0.1" +
     "/icons/";
 export let adjustUrlQuery = () => { };
 export function focus() {
@@ -124,7 +123,7 @@ const dispatch = createEventDispatcher();
 $: {
     reverseActive = enableReverse === "always";
 }
-$: if (showFullGeometry &&
+$: if (pickedResultStyle !== "marker-only" &&
     picked &&
     !picked.address &&
     picked.geometry.type === "Point" &&
@@ -149,19 +148,21 @@ $: {
 $: if (mapController && selected && flyTo && flyToSelected) {
     mapController.flyTo(selected.center, computeZoom(selected));
 }
+$: showPolygonMarker =
+    pickedResultStyle === "full-geometry-including-polygon-center-marker";
 // if markerOnSelected was dynamically changed to false
 $: if (!markerOnSelected) {
-    mapController?.setMarkers(undefined, undefined);
+    mapController?.setFeatures(undefined, undefined, showPolygonMarker);
 }
 $: if (mapController && markerOnSelected && !markedFeatures) {
-    mapController.setMarkers(selected ? [selected] : undefined, undefined);
+    mapController.setFeatures(selected ? [selected] : undefined, undefined, showPolygonMarker);
     mapController.setSelectedMarker(selected ? 0 : -1);
 }
 $: if (markedFeatures !== listFeatures) {
     markedFeatures = undefined;
 }
 $: if (mapController) {
-    mapController.setMarkers(markedFeatures, picked);
+    mapController.setFeatures(markedFeatures, picked, showPolygonMarker);
 }
 $: if (searchValue.length < minLength) {
     picked = undefined;
@@ -194,13 +195,15 @@ $: if (mapController) {
     const coords = isQueryReverse(searchValue);
     mapController.setReverseMarker(coords ? [coords.decimalLongitude, coords.decimalLatitude] : undefined);
 }
-$: dispatch("select", selected);
-$: dispatch("pick", picked);
-$: dispatch("optionsVisibilityChange", focusedDelayed && !!listFeatures);
-$: dispatch("featuresListed", listFeatures);
-$: dispatch("featuresMarked", markedFeatures);
-$: dispatch("reverseToggle", reverseActive);
-$: dispatch("queryChange", searchValue);
+$: dispatch("select", { feature: selected });
+$: dispatch("pick", { feature: picked });
+$: dispatch("optionsvisibilitychange", {
+    optionsVisible: focusedDelayed && !!listFeatures,
+});
+$: dispatch("featureslisted", { features: listFeatures });
+$: dispatch("featuresmarked", { features: markedFeatures });
+$: dispatch("reversetoggle", { reverse: reverseActive });
+$: dispatch("querychange", { query: searchValue });
 $: if (mapController) {
     mapController.indicateReverse(reverseActive);
 }
@@ -241,7 +244,7 @@ onDestroy(() => {
         mapController.setEventHandler(undefined);
         mapController.indicateReverse(false);
         mapController.setSelectedMarker(-1);
-        mapController.setMarkers(undefined, undefined);
+        mapController.setFeatures(undefined, undefined, false);
     }
 });
 function handleOnSubmit(event) {
@@ -411,12 +414,11 @@ function zoomToResults() {
     for (const feature of markedFeatures) {
         const featZoom = computeZoom(feature);
         allZoom =
-            maxZoom ??
-                (allZoom === undefined
-                    ? featZoom
-                    : featZoom === undefined
-                        ? allZoom
-                        : Math.max(allZoom, featZoom));
+            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]);
@@ -438,11 +440,6 @@ function computeZoom(feature) {
             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) => {
@@ -550,7 +547,7 @@ function pick(feature) {
       {/if}
     </div>
 
-    {#if enableReverse === true}
+    {#if enableReverse === "button"}
       <button
         type="button"
         class:active={reverseActive}
@@ -584,6 +581,7 @@ function pick(feature) {
     </div>
   {:else if focusedDelayed && listFeatures?.length}
     <ul
+      class="options"
       on:mouseleave={() => {
         if (!selectFirst) {
           selectedItemIndex = -1;
@@ -726,10 +724,11 @@ div.no-results :global(svg) {
   height: 30px;
 }
 
-:global(.maplibregl-ctrl-bottom-left) ul,
-:global(.maplibregl-ctrl-bottom-right) ul {
+:global(.leaflet-bottom) ul.options,
+:global(.maplibregl-ctrl-bottom-left) ul.options,
+:global(.maplibregl-ctrl-bottom-right) ul.options {
   top: auto;
-  bottom: 100%;
+  bottom: calc(100% + 6px);
 }
 
 button {

package/svelte/GeocodingControl.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { BBox, Feature, FeatureCollection, MapController, ProximityRule } from "./types";
+import type { BBox, EnableReverse, Feature, FeatureCollection, MapController, PickedResultStyle, ProximityRule, ShowPlaceType } from "./types";
 declare const __propDef: {
     props: {
         ZOOM_DEFAULTS?: Record<string, number>;
@@ -11,7 +11,7 @@ declare const __propDef: {
         collapsed?: boolean;
         country?: string | string[] | undefined;
         debounceSearch?: number;
-        enableReverse?: boolean | "always";
+        enableReverse?: EnableReverse;
         errorMessage?: string;
         filter?: (feature: Feature) => boolean;
         flyTo?: boolean;
@@ -26,8 +26,8 @@ declare const __propDef: {
         reverseActive?: boolean;
         reverseButtonTitle?: string;
         searchValue?: string;
-        showFullGeometry?: boolean;
-        showPlaceType?: false | "always" | "ifNeeded";
+        pickedResultStyle?: PickedResultStyle;
+        showPlaceType?: ShowPlaceType;
         showResultsWhileTyping?: boolean;
         selectFirst?: boolean;
         flyToSelected?: boolean;
@@ -35,8 +35,7 @@ declare const __propDef: {
         types?: string[] | undefined;
         exhaustiveReverseGeocoding?: boolean;
         excludeTypes?: boolean;
-        zoom?: number | Record<string, number>;
-        maxZoom?: number | undefined;
+        zoom?: Record<string, number>;
         apiUrl?: string;
         fetchParameters?: RequestInit;
         iconsBaseUrl?: string;
@@ -48,17 +47,31 @@ declare const __propDef: {
         clearMap?: () => void;
     };
     events: {
-        featuresListed: CustomEvent<Feature<import("geojson").Geometry>[] | undefined>;
-        featuresMarked: CustomEvent<Feature<import("geojson").Geometry>[] | undefined>;
-        optionsVisibilityChange: CustomEvent<boolean>;
-        pick: CustomEvent<Feature<import("geojson").Geometry> | undefined>;
-        queryChange: CustomEvent<string>;
+        featureslisted: CustomEvent<{
+            features: Feature[] | undefined;
+        }>;
+        featuresmarked: CustomEvent<{
+            features: Feature[] | undefined;
+        }>;
+        optionsvisibilitychange: CustomEvent<{
+            optionsVisible: boolean;
+        }>;
+        pick: CustomEvent<{
+            feature: Feature | undefined;
+        }>;
+        querychange: CustomEvent<{
+            query: string;
+        }>;
         response: CustomEvent<{
             url: string;
             featureCollection: FeatureCollection;
         }>;
-        reverseToggle: CustomEvent<boolean>;
-        select: CustomEvent<Feature<import("geojson").Geometry> | undefined>;
+        reversetoggle: CustomEvent<{
+            reverse: boolean;
+        }>;
+        select: CustomEvent<{
+            feature: Feature | undefined;
+        }>;
     } & {
         [evt: string]: CustomEvent<any>;
     };