From 263cf3671f99d7e32ab377672b34436cebd150e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20=C5=BDdila?= Date: Thu, 15 Jun 2023 11:56:11 +0200 Subject: [PATCH] made icons URL configurable --- README.md | 3 +++ package-lock.json | 32 ++++++++++++++++---------------- package.json | 8 ++++---- src/lib/FeatureItem.svelte | 16 +++++++++------- src/lib/GeocodingControl.svelte | 3 +++ src/lib/types.ts | 9 ++++++++- 6 files changed, 43 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 8a542b2..fb5e248 100644 --- a/README.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index c1639bb..b3c2099 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@maptiler/geocoding-control", - "version": "0.0.91", + "version": "0.0.92", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@maptiler/geocoding-control", - "version": "0.0.91", + "version": "0.0.92", "license": "BSD-3-Clause", "devDependencies": { "@maptiler/sdk": "^1.0.12", @@ -23,14 +23,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", @@ -1980,9 +1980,9 @@ } }, "node_modules/maplibre-gl": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-3.0.1.tgz", - "integrity": "sha512-OdFpejEkvaDwwVT9qAn6oA2h7093VlemaenF2/ssfD3TadNPz5oIVPzywn3cgso5i1D7IMKvEpba0A8A5qvXow==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-3.1.0.tgz", + "integrity": "sha512-KFarVUUszCEucPwnGsFJtPMQBg/F6lg+SPDmTztKUD/n0YShETjIOdNmm5jpxacEX3+dq50MzlqDr6VH+RtDDA==", "dev": true, "dependencies": { "@mapbox/geojson-rewind": "^0.5.2", @@ -2564,9 +2564,9 @@ } }, "node_modules/sass": { - "version": "1.63.3", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.63.3.tgz", - "integrity": "sha512-ySdXN+DVpfwq49jG1+hmtDslYqpS7SkOR5GpF6o2bmb1RL/xS+wvPmegMvMywyfsmAV6p7TgwXYGrCZIFFbAHg==", + "version": "1.63.4", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.63.4.tgz", + "integrity": "sha512-Sx/+weUmK+oiIlI+9sdD0wZHsqpbgQg8wSwSnGBjwb5GwqFhYNwwnI+UWZtLjKvKyFlKkatRK235qQ3mokyPoQ==", "dev": true, "dependencies": { "chokidar": ">=3.0.0 <4.0.0", @@ -4606,9 +4606,9 @@ } }, "maplibre-gl": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-3.0.1.tgz", - "integrity": "sha512-OdFpejEkvaDwwVT9qAn6oA2h7093VlemaenF2/ssfD3TadNPz5oIVPzywn3cgso5i1D7IMKvEpba0A8A5qvXow==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-3.1.0.tgz", + "integrity": "sha512-KFarVUUszCEucPwnGsFJtPMQBg/F6lg+SPDmTztKUD/n0YShETjIOdNmm5jpxacEX3+dq50MzlqDr6VH+RtDDA==", "dev": true, "requires": { "@mapbox/geojson-rewind": "^0.5.2", @@ -5017,9 +5017,9 @@ } }, "sass": { - "version": "1.63.3", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.63.3.tgz", - "integrity": "sha512-ySdXN+DVpfwq49jG1+hmtDslYqpS7SkOR5GpF6o2bmb1RL/xS+wvPmegMvMywyfsmAV6p7TgwXYGrCZIFFbAHg==", + "version": "1.63.4", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.63.4.tgz", + "integrity": "sha512-Sx/+weUmK+oiIlI+9sdD0wZHsqpbgQg8wSwSnGBjwb5GwqFhYNwwnI+UWZtLjKvKyFlKkatRK235qQ3mokyPoQ==", "dev": true, "requires": { "chokidar": ">=3.0.0 <4.0.0", diff --git a/package.json b/package.json index 9d0a85f..2083451 100644 --- a/package.json +++ b/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", diff --git a/src/lib/FeatureItem.svelte b/src/lib/FeatureItem.svelte index b1f64a3..7b2b2be 100644 --- a/src/lib/FeatureItem.svelte +++ b/src/lib/FeatureItem.svelte @@ -9,6 +9,8 @@ export let missingIconsCache: Set; + 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} - {placeType} + {placeType} {:else if feature.properties?.kind === "road" || feature.properties?.kind === "road_relation"} - {placeType} + {placeType} {:else if feature.id.startsWith("address.")} - {placeType} + {placeType} {:else if feature.id.startsWith("postal_code.")} - {placeType} + {placeType} {:else if feature.id.startsWith("poi.")} - {placeType} + {placeType} {:else} - {placeType} + {placeType} {/if} diff --git a/src/lib/GeocodingControl.svelte b/src/lib/GeocodingControl.svelte index 3ba0b7a..5d8945d 100644 --- a/src/lib/GeocodingControl.svelte +++ b/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} diff --git a/src/lib/types.ts b/src/lib/types.ts index 1e4e2ee..24b7b32 100644 --- a/src/lib/types.ts +++ b/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.