made icons URL configurable

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
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maptiler/geocoding-control",
-  "version": "0.0.91",
+  "version": "0.0.92",
   "type": "module",
   "author": {
     "name": "Martin Ždila",
@@ -35,7 +35,7 @@
     "build-svelte": "svelte-package -o dist.svelte",
     "build-maptilersdk": "FLAVOUR=maptilersdk vite build",
     "build-maplibre": "FLAVOUR=maplibre vite build",
-    "build-maplibre-controller": "FLAVOUR=maplibregl-controller vite build ",
+    "build-maplibre-controller": "FLAVOUR=maplibregl-controller vite build",
     "build-leaflet": "FLAVOUR=leaflet vite build",
     "build-leaflet-controller": "FLAVOUR=leaflet-controller vite build",
     "build-react": "FLAVOUR=react vite build",
@@ -98,14 +98,14 @@
     "concurrently": "^8.2.0",
     "esm-env": "^1.0.0",
     "leaflet": "^1.9.4",
-    "maplibre-gl": "^3.0.1",
+    "maplibre-gl": "^3.1.0",
     "prettier": "^2.8.8",
     "prettier-plugin-organize-imports": "^3.2.2",
     "prettier-plugin-svelte": "^2.10.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "renamer": "^4.0.0",
-    "sass": "^1.63.3",
+    "sass": "^1.63.4",
     "svelte": "^3.59.1",
     "svelte-check": "^3.4.3",
     "svelte-preprocess": "^5.0.4",

src/lib/FeatureItem.svelte

@@ -9,6 +9,8 @@
 
   export let missingIconsCache: Set<string>;
 
+  export let iconsBaseUrl: string;
+
   const categories = feature.properties?.categories;
 
   let category: string | undefined;
@@ -24,7 +26,7 @@
       category = categories?.[index];
 
       imageUrl = category
-        ? `/icons/${category.replace(/ /g, "_")}.svg`
+        ? iconsBaseUrl + category.replace(/ /g, "_") + ".svg"
         : undefined;
     } while (index > -1 && (!imageUrl || missingIconsCache.has(imageUrl)));
   }
@@ -51,17 +53,17 @@
       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">

src/lib/GeocodingControl.svelte

@@ -84,6 +84,8 @@
 
   export let fetchParameters: RequestInit = {};
 
+  export let iconsBaseUrl = "icons/";
+
   export function focus() {
     input.focus();
   }
@@ -642,6 +644,7 @@
           on:mouseenter={() => (selectedItemIndex = i)}
           on:focus={() => pick(feature)}
           {missingIconsCache}
+          {iconsBaseUrl}
         />
       {/each}
     </ul>

src/lib/types.ts

@@ -245,7 +245,7 @@ export type ControlOptions = {
   /**
    * Geocoding API URL.
    *
-   * @default MapTiler Geocoding API URL
+   * @default MapTiler Geocoding API URL.
    */
   apiUrl?: string;
 
@@ -256,6 +256,13 @@ export type ControlOptions = {
    */
   fetchParameters?: RequestInit;
 
+  /**
+   * Base URL for POI icons.
+   *
+   * @default "icons/"
+   */
+  iconsBaseUrl?: string;
+
   // TODO - missing but useful from maplibre-gl-geocoder
   // popup // If true, a Popup will be added to the map when clicking on a marker using a default set of popup options. If the value is an object, the popup will be constructed using these options. If false, no popup will be added to the map. Requires that options.maplibregl also be set. (optional, default true)
   // render // A function that specifies how the results should be rendered in the dropdown menu. This function should accepts a single Carmen GeoJSON object as input and return a string. Any HTML in the returned string will be rendered.