@maptiler/geocoding-control 0.0.91-git.9f388b → 0.0.92

package/FeatureItem.svelte

@@ -1,22 +1,29 @@
 <script>export let feature;
 export let selected = false;
 export let showPlaceType;
+export let missingIconsCache;
+export let iconsBaseUrl;
 const categories = feature.properties?.categories;
-$: index = (categories?.length ?? 0) - 1;
-$: category = categories?.[index];
-$: imageUrl = category
-    ? `/icons/${category.replace(/ /g, "_")}.svg`
-    : undefined;
+let category;
+let imageUrl;
+$: index = categories?.length ?? 0;
+$: {
+    do {
+        index--;
+        category = categories?.[index];
+        imageUrl = category
+            ? iconsBaseUrl + category.replace(/ /g, "_") + ".svg"
+            : 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];
 function handleImgError(e) {
-    if (index > -1) {
-        index--;
-    }
-    else {
-        e.style.visibility = "hidden";
+    if (imageUrl) {
+        missingIconsCache.add(imageUrl);
     }
+    index--;
 }
 </script>
 
@@ -29,17 +36,17 @@ function handleImgError(e) {
       on:error={(e) => handleImgError(e.currentTarget)}
     />
   {:else if feature.address}
-    <img src="/icons/housenumber.svg" alt={placeType} />
+    <img src={iconsBaseUrl + "housenumber.svg"} alt={placeType} />
   {:else if feature.properties?.kind === "road" || feature.properties?.kind === "road_relation"}
-    <img src="/icons/road.svg" alt={placeType} />
+    <img src={iconsBaseUrl + "road.svg"} alt={placeType} />
   {:else if feature.id.startsWith("address.")}
-    <img src="/icons/street.svg" alt={placeType} />
+    <img src={iconsBaseUrl + "street.svg"} alt={placeType} />
   {:else if feature.id.startsWith("postal_code.")}
-    <img src="/icons/postal_code.svg" alt={placeType} />
+    <img src={iconsBaseUrl + "postal_code.svg"} alt={placeType} />
   {:else if feature.id.startsWith("poi.")}
-    <img src="/icons/poi.svg" alt={placeType} />
+    <img src={iconsBaseUrl + "poi.svg"} alt={placeType} />
   {:else}
-    <img src="/icons/area.svg" alt={placeType} />
+    <img src={iconsBaseUrl + "area.svg"} alt={placeType} />
   {/if}
 
   <span class="texts">

package/FeatureItem.svelte.d.ts

@@ -5,6 +5,8 @@ declare const __propDef: {
         feature: Feature;
         selected?: boolean | undefined;
         showPlaceType: false | "always" | "ifNeeded";
+        missingIconsCache: Set<string>;
+        iconsBaseUrl: string;
     };
     events: {
         mouseenter: MouseEvent;

package/GeocodingControl.svelte

@@ -39,6 +39,7 @@ export let zoom = 16;
 export let maxZoom = 18;
 export let apiUrl = import.meta.env.VITE_API_URL;
 export let fetchParameters = {};
+export let iconsBaseUrl = "icons/";
 export function focus() {
     input.focus();
 }
@@ -72,6 +73,7 @@ let abortController;
 let searchTimeoutRef;
 let focusedDelayed;
 let prevIdToFly;
+const missingIconsCache = new Set();
 const dispatch = createEventDispatcher();
 $: if (!trackProximity) {
     proximity = undefined;
@@ -460,6 +462,8 @@ function unwrapBbox(bbox0) {
           selected={selectedItemIndex === i}
           on:mouseenter={() => (selectedItemIndex = i)}
           on:focus={() => pick(feature)}
+          {missingIconsCache}
+          {iconsBaseUrl}
         />
       {/each}
     </ul>

package/GeocodingControl.svelte.d.ts

@@ -34,6 +34,7 @@ declare const __propDef: {
         maxZoom?: number | undefined;
         apiUrl?: string | undefined;
         fetchParameters?: RequestInit | undefined;
+        iconsBaseUrl?: string | undefined;
         focus?: (() => void) | undefined;
         blur?: (() => void) | undefined;
         setQuery?: ((value: string, submit?: boolean) => void) | undefined;

package/README.md

@@ -128,6 +128,9 @@ For examples without using bundler see `demo-maplibregl.html` or `demo-leaflet.h
 - `limit`: `number` - Maximum number of results to show. Default `5`.
 - `country`: `string | string[]` - Limit search to specified country(ies). Default `undefined` (use all countries). Specify as [alpha-2 ISO 3166](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) lowercase code.
 - `types`: `string[]` - Filter of feature types to return. Default `undefined` (all available feature types are returned).
+- `apiUrl`: `string` - Geocoding API URL. Default MapTiler Geocoding API URL.
+- `fetchParameters`: `RequestInit` - Extra fetch parameters. Default `undefined`.
+- `iconsBaseUrl`: `string` - Base URL for POI icons. Default `"icons/"`.
 
 ### Methods