From 4ef34c62cc14dcad01cfe7c4b0dc34ce9b36952a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20=C5=BDdila?= Date: Mon, 3 Oct 2022 11:18:07 +0200 Subject: [PATCH] added more options --- .prettierrc | 6 +- demo.html | 1 + index.html | 1 - src/App.svelte | 35 ++++---- src/assets/svelte.svg | 1 - src/lib/Geocoding.svelte | 161 +++++++++++++++++++++++++++------- src/lib/MarkerIcon.svelte | 6 +- src/lib/SuggestionIcon.svelte | 7 +- src/lib/index.ts | 90 +++++++++++++++++-- src/main.ts | 8 +- svelte.config.js | 4 +- 11 files changed, 242 insertions(+), 78 deletions(-) delete mode 100644 src/assets/svelte.svg diff --git a/.prettierrc b/.prettierrc index 40859f0..ca43d6f 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,5 @@ { - "plugins": ["prettier-plugin-svelte"], - "pluginSearchDirs": ["."], - "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] + "plugins": ["prettier-plugin-svelte"], + "pluginSearchDirs": ["."], + "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] } diff --git a/demo.html b/demo.html index 71a0685..b45fb07 100644 --- a/demo.html +++ b/demo.html @@ -34,6 +34,7 @@ const gc = new maptilerGeocoding.GeocodingControl({ apiKey: "0iOk4fgsz9fOXyDYCirE", + maplibregl, }); map.addControl(gc); diff --git a/index.html b/index.html index b5b1252..c6bbf66 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,6 @@ - Vite + Svelte + TS diff --git a/src/App.svelte b/src/App.svelte index be0e7ff..b9f1c83 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -1,29 +1,30 @@
diff --git a/src/assets/svelte.svg b/src/assets/svelte.svg deleted file mode 100644 index c5e0848..0000000 --- a/src/assets/svelte.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/lib/Geocoding.svelte b/src/lib/Geocoding.svelte index 62cc74a..670c29a 100644 --- a/src/lib/Geocoding.svelte +++ b/src/lib/Geocoding.svelte @@ -1,12 +1,52 @@
@@ -162,14 +256,15 @@ on:focus={() => (focused = true)} on:blur={() => (focused = false)} on:keydown={handleKeyDown} + on:input={handleInput} type="search" - placeholder="Search" - aria-label="Search" + {placeholder} + aria-label={placeholder} /> - {#if focusedDelayed && features.length > 0} + {#if focusedDelayed && listFeatures.length > 0}
    - {#each features as feature} + {#each listFeatures as feature}
  • diff --git a/src/lib/MarkerIcon.svelte b/src/lib/MarkerIcon.svelte index 5ef0c2b..1608b19 100644 --- a/src/lib/MarkerIcon.svelte +++ b/src/lib/MarkerIcon.svelte @@ -13,7 +13,7 @@ diff --git a/src/lib/SuggestionIcon.svelte b/src/lib/SuggestionIcon.svelte index 8da5941..8cd91a1 100644 --- a/src/lib/SuggestionIcon.svelte +++ b/src/lib/SuggestionIcon.svelte @@ -1,9 +1,4 @@ - + diff --git a/src/lib/index.ts b/src/lib/index.ts index dffea8c..d458dd7 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -1,26 +1,100 @@ // Reexport your entry components here -import type { Map, IControl } from 'maplibre-gl'; -import Geocoding from './Geocoding.svelte'; +import type { Map, IControl } from "maplibre-gl"; +import Geocoding from "./Geocoding.svelte"; +import type maplibregl1 from "maplibre-gl"; + +type Options = { + apiKey: string; + + /** + * A maplibre-gl instance to use when creating Markers. Required if options.marker is true. + */ + maplibregl?: typeof maplibregl1; + + /** + * Sets the amount of time, in milliseconds, to wait before querying the server when a user types into the Geocoder input box. + * This parameter may be useful for reducing the total number of API calls made for a single query. + * + * (optional, default `200`) + */ + debounceSearch?: number; + + /** + * A proximity argument: this is a geographical point given as an object with latitude and longitude properties. + * Search results closer to this point will be given higher priority. + */ + proximity?: [number, number]; + + /** + * Override the default placeholder attribute value. + * + * (optional, default Search) + */ + placeholder?: string; + + /** + * If true, the geocoder proximity will automatically update based on the map view. + * + * (optional, default true) + */ + trackProximity?: boolean; + + /** + * Minimum number of characters to enter before results are shown. + * + * (optional, default 2) + */ + minLength?: number; + + /** + * A bounding box argument: this is a bounding box given as an array in the format [minX, minY, maxX, maxY]. + * Search results will be limited to the bounding box. + */ + bbox?: number; + + /** + * Maximum number of results to show. + * + * (optional, default 5) + */ + limit?: number; + + /** + * Specify the language to use for response text and query result weighting. + * Options are IETF language tags comprised of a mandatory ISO 639-1 language code and optionally one or more IETF subtags for country or script. + * More than one value can also be specified, separated by commas. + * Defaults to the browser's language settings. + */ + language?: string; + + // TODO - missing and useful from maplibre-gl-geocoder + // zoom // 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. (optional, default 16) + // flyTo // (Boolean | Object) If false, animating the map to a selected result is disabled. If true, animating the map will use the default animation parameters. If an object, it will be passed as options to the map flyTo or fitBounds method providing control over the animation of the transition. (optional, default true) + // collapsed // If true, the geocoder control will collapse until hovered or in focus. (optional, default false) + // clearAndBlurOnEsc // If true, the geocoder control will clear it's contents and blur when user presses the escape key. (optional, default false) + // clearOnBlur // If true, the geocoder control will clear its value when the input blurs. (optional, default false) + // filter // A function which accepts a Feature in the Carmen GeoJSON format to filter out results from the Geocoding API response before they are included in the suggestions list. Return true to keep the item, false otherwise. +}; export class GeocodingControl implements IControl { #gc?: Geocoding; - #apiKey: string; + #options: Options; - constructor({ apiKey }: { apiKey: string }) { - this.#apiKey = apiKey; + constructor(options: Options) { + this.#options = options; } onAdd(map: Map) { - const div = document.createElement('div'); + const div = document.createElement("div"); div.className = - 'mapboxgl-ctrl-geocoder mapboxgl-ctrl maplibregl-ctrl-geocoder maplibregl-ctrl'; + "mapboxgl-ctrl-geocoder mapboxgl-ctrl maplibregl-ctrl-geocoder maplibregl-ctrl"; this.#gc = new Geocoding({ target: div, - props: { map, apiKey: this.#apiKey } + props: { map, ...this.#options }, }); return div; diff --git a/src/main.ts b/src/main.ts index d8200ac..5332616 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,7 +1,7 @@ -import App from './App.svelte' +import App from "./App.svelte"; const app = new App({ - target: document.getElementById('app') -}) + target: document.getElementById("app"), +}); -export default app +export default app; diff --git a/svelte.config.js b/svelte.config.js index aa911a7..7714a51 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -1,7 +1,7 @@ -import sveltePreprocess from 'svelte-preprocess' +import sveltePreprocess from "svelte-preprocess"; export default { // Consult https://github.com/sveltejs/svelte-preprocess // for more information about preprocessors preprocess: sveltePreprocess(), -} +};