@maptiler/geocoding-control 0.0.82 → 0.0.84

package/DispatcherType.d.ts

@@ -0,0 +1,14 @@
+import type { Feature, FeatureCollection } from "./types";
+export type DispatcherType = {
+    featuresListed: Feature[];
+    featuresMarked: Feature[];
+    optionsVisibilityChange: boolean;
+    pick: Feature;
+    queryChange: string;
+    response: {
+        url: string;
+        featureCollection: FeatureCollection;
+    };
+    reverseToggle: boolean;
+    select: Feature;
+};

package/GeocodingControl.svelte

@@ -1,9 +1,8 @@
 <script>import { createEventDispatcher } from "svelte";
 import { onDestroy } from "svelte/internal";
-import ReverseGeocodingIcon from "./ReverseGeocodingIcon.svelte";
 import ClearIcon from "./ClearIcon.svelte";
 import LoadingIcon from "./LoadingIcon.svelte";
-import MarkerIcon from "./MarkerIcon.svelte";
+import ReverseGeocodingIcon from "./ReverseGeocodingIcon.svelte";
 import SearchIcon from "./SearchIcon.svelte";
 let className = undefined;
 export { className as class };
@@ -259,7 +258,10 @@ async function search(searchValue, { byId = false, exact = false, } = {}) {
         });
     }
     catch (e) {
-        if (e && typeof e === "object" && e.name === "AbortError") {
+        if (e &&
+            typeof e === "object" &&
+            "name" in e &&
+            e.name === "AbortError") {
             return;
         }
         throw new Error();
@@ -682,4 +684,9 @@ function unwrapBbox(bbox0) {
   form.can-collapse:hover :not(:nth-of-type(1)) {
     opacity: 1;
   }
+
+  :global(.maplibregl-ctrl-geocoder) {
+    position: relative;
+    z-index: 3;
+  }
 </style>

package/GeocodingControl.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Feature, FeatureCollection, MapController, Proximity } from "./types";
+import type { Feature, MapController, Proximity } from "./types";
 declare const __propDef: {
     props: {
         class?: string | undefined;
@@ -37,17 +37,14 @@ declare const __propDef: {
         setQuery?: ((value: string, submit?: boolean) => void) | undefined;
     };
     events: {
-        select: CustomEvent<Feature>;
-        pick: CustomEvent<Feature>;
-        optionsVisibilityChange: CustomEvent<boolean>;
-        featuresListed: CustomEvent<Feature[]>;
-        featuresMarked: CustomEvent<Feature[]>;
-        response: CustomEvent<{
-            url: string;
-            featureCollection: FeatureCollection;
-        }>;
-        reverseToggle: CustomEvent<boolean>;
-        queryChange: CustomEvent<string>;
+        select: CustomEvent<any>;
+        pick: CustomEvent<any>;
+        optionsVisibilityChange: CustomEvent<any>;
+        featuresListed: CustomEvent<any>;
+        featuresMarked: CustomEvent<any>;
+        reverseToggle: CustomEvent<any>;
+        queryChange: CustomEvent<any>;
+        response: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/README.md

@@ -1,6 +1,6 @@
-# MapTiler Geocoding control for MapLibre GL JS and Leaflet
+# MapTiler Geocoding control for MapTiler SDK, MapLibre GL JS and Leaflet
 
-A geocoding control for [Maplibre GL JS](https://github.com/maplibre/maplibre-gl-js) and [Leaflet](https://github.com/maplibre/maplibre-gl-js) utilizes [MapTiler Cloud Geocoding API](https://www.maptiler.com/cloud/geocoding/). With this control, users of your application can find any place on Earth (States, Cities, Streets, ...) down to the address level, restrict the search area to a specific country, highlight searched results on the map, autocomplete words while typing, and much more.
+A geocoding control for [MapTiler SDK](https://github.com/maptiler/maptiler-sdk-js), [MapLibre GL JS](https://github.com/maplibre/maplibre-gl-js) and [Leaflet](https://leafletjs.com) utilizes [MapTiler Cloud Geocoding API](https://www.maptiler.com/cloud/geocoding/). With this control, users of your application can find any place on Earth (States, Cities, Streets, ...) down to the address level, restrict the search area to a specific country, highlight searched results on the map, autocomplete words while typing, and much more.
 
 The component can be used as an ES module or UMD module.
 
@@ -8,7 +8,30 @@ Geocoding control is also provided as [React component](#react-component) and a
 
 ## Usage
 
-### Example for Maplibre GL JS using module bundler
+### Example for MapTiler SDK using module bundler
+
+```
+npm install --save @maptiler/geocoding-control @maptiler/sdk
+```
+
+```js
+import * as maptilersdk from "@maptiler/sdk";
+import { GeocodingControl } from "@maptiler/geocoding-control/maplibregl";
+import "@maptiler/sdk/dist/maptiler-sdk.css";
+import "@maptiler/geocoding-control/style.css";
+
+maptilersdk.config.apiKey = "YOUR_MAPTILER_API_KEY_HERE";
+
+const map = new maptilersdk.Map({
+  container: "map", // id of HTML container element
+});
+
+const gc = new GeocodingControl();
+
+map.addControl(gc);
+```
+
+### Example for MapLibre GL JS using module bundler
 
 ```bash
 npm install --save @maptiler/geocoding-control maplibre-gl
@@ -34,7 +57,7 @@ const gc = new GeocodingControl({ apiKey, maplibregl });
 map.addControl(gc);
 ```
 
-### Example for Leaflet  using module bundler
+### Example for Leaflet using module bundler
 
 ```bash
 npm install --save @maptiler/geocoding-control leaflet
@@ -69,15 +92,15 @@ L.control.maptilerGeocoding({ apiKey }).addTo(map);
 
 For examples without using bundler see `demo-maplibregl.html` or `demo-leaflet.html`. After building this library (`npm install && npm run build`) you can open it in the browser:
 
-- Maplibre GL JS: `sensible-browser file://$(pwd)/demo-maplibregl.html#key=YOUR_MAPTILER_API_KEY_HERE`
+- MapLibre GL JS: `sensible-browser file://$(pwd)/demo-maplibregl.html#key=YOUR_MAPTILER_API_KEY_HERE`
 - Leaflet: `sensible-browser file://$(pwd)/demo-leaflet.html#key=YOUR_MAPTILER_API_KEY_HERE`
 
 ## API Documentation
 
 ### Options
 
-- `apiKey`<sup>\*</sup>: `string` - Maptiler API key
-- `maplibregl`: `MapLibreGL` - A Maplibre GL instance to use when creating [Markers](https://maplibre.org/maplibre-gl-js-docs/api/markers/#marker). Required if `options.marker` is `true`. Used only with Maplibre GL library.
+- `apiKey`<sup>\*</sup>: `string` - Maptiler API key. Not needed if used with MapTiler SDK.
+- `maplibregl`: `MapLibreGL` - A MapLibre GL instance to use when creating [Markers](https://maplibre.org/maplibre-gl-js-docs/api/markers/#marker). Used if `options.marker` is `true` with MapLibre GL library. If not provided it will be autodetected. Not needed if used with MapTiler SDK.
 - `debounceSearch`: `number` - 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. Default `200`.
 - `proximity`: `[number, 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.
 - `placeholder`: `string` - Override the default placeholder attribute value. Default `"Search"`.
@@ -112,6 +135,7 @@ For examples without using bundler see `demo-maplibregl.html` or `demo-leaflet.h
 - `focus(): void` - focus the query input box
 - `blur(): void` - blur the query input box
 - `setReverseMode(value: boolean | "always"): void` - set reverse mode
+- `setOptions(options: Partial<Options>): void` - change one or more options of existing control
 
 ### Events
 
@@ -123,8 +147,8 @@ Events are implemented using [EventTarget](https://developer.mozilla.org/en-US/d
 - `featuresListed` - Fired after features are retrieved from the server. Event value contains list of features or `undefined`.
 - `featuresMarked` - Fired after features are marked on the map. Event value contains list of features or `undefined`.
 - `response` - Fired after HTTP response of the geocoding server. Event value contains object with requested `url` and responded `featureCollection`.
-- `reversetoggle` - Fired if reverse geocoding button is toggled. Event value is `true` if reverse geocoding mode is active, otherwise `false`.
-- `querychange` - Fired if query was changed. Event value is the query string.
+- `reverseToggle` - Fired if reverse geocoding button is toggled. Event value is `true` if reverse geocoding mode is active, otherwise `false`.
+- `queryChange` - Fired if query was changed. Event value is the query string.
 
 Example:
 
@@ -175,7 +199,10 @@ export function App() {
     <div>
       <GeocodingControl apiKey={apiKey} mapController={mapController} />
 
-      <div ref={mapContainerRef} style={{ width: "800px", height: "600px", marginTop: "8px" }} />
+      <div
+        ref={mapContainerRef}
+        style={{ width: "800px", height: "600px", marginTop: "8px" }}
+      />
     </div>
   );
 }
@@ -204,14 +231,13 @@ Component API matches API described above where options and events are exposed a
   let container: HTMLElement;
 
   onMount(() => {
-
     const map = new maplibregl.Map({
       style: "https://api.maptiler.com/maps/streets/style.json?key=" + apiKey,
       container,
     });
 
     mapController = createMaplibreglMapController(map, maplibregl);
-  }
+  });
 </script>
 
 <div class="map" bind:this={container} />