@maptiler/geocoding-control 0.0.81 → 0.0.83

package/GeocodingControl.svelte

@@ -682,4 +682,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/README.md

@@ -1,14 +1,14 @@
-# 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.
 
-Geocoding control is also provided as [React component](#react) and a [Svelte component](#svelte).
+Geocoding control is also provided as [React component](#react-component) and a [Svelte component](#svelte-component).
 
 ## Usage
 
-### Example for Maplibre GL JS using module bundler
+### Example for MapLibre GL JS using module bundler
 
 ```bash
 npm install --save @maptiler/geocoding-control maplibre-gl
@@ -69,15 +69,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"`.
@@ -134,7 +134,7 @@ geocodingControl.addEventListener("optionsVisibilityChange", (e) => {
 });
 ```
 
-## <a name="react"></a>React component
+## React component
 
 In addition to using the component as MapLibre GL or Leaflet Control it is also possible to use it stand-alone in React projects with or without MapLibre GL or Leaflet integration.
 
@@ -146,7 +146,7 @@ Component API matches API described above where options and events are exposed a
 import { useEffect, useRef, useState } from "react";
 import { GeocodingControl } from "@maptiler/geocoding-control/react";
 import { createMaplibreglMapController } from "@maptiler/geocoding-control/maplibregl-controller";
-import type { MapController } from "@maptiler/geocoding-control/src/lib/types";
+import type { MapController } from "@maptiler/geocoding-control/types";
 import "@maptiler/geocoding-control/style.css";
 import maplibregl from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
@@ -181,7 +181,7 @@ export function App() {
 }
 ```
 
-## <a name="svelte"></a>Svelte component
+## Svelte component
 
 In addition to using the component as MapLibre GL or Leaflet Control it is also possible to use it stand-alone in Svelte projects with or without MapLibre GL or Leaflet integration.
 
@@ -191,9 +191,9 @@ Component API matches API described above where options and events are exposed a
 
 ```svelte
 <script lang="ts">
-  import GeocodingControl from "@maptiler/geocoding-control/src/lib/GeocodingControl.svelte";
-  import { createMaplibreglMapController } from "@maptiler/geocoding-control/src/lib/maplibreglMapController";
-  import type { MapController } from "@maptiler/geocoding-control/src/lib/types";
+  import GeocodingControl from "@maptiler/geocoding-control/GeocodingControl.svelte";
+  import { createMaplibreglMapController } from "@maptiler/geocoding-control/maplibregl";
+  import type { MapController } from "@maptiler/geocoding-control/types";
   import maplibregl from "maplibre-gl";
   import "maplibre-gl/dist/maplibre-gl.css";
 
@@ -204,7 +204,6 @@ 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,

package/leaflet.js

@@ -475,7 +475,7 @@ function ua(r) {
         "title",
         /*reverseButtonTitle*/
         r[9]
-      ), B(t, "class", "svelte-1xi1e9d"), en(
+      ), B(t, "class", "svelte-gpexd2"), en(
         t,
         "active",
         /*reverseActive*/
@@ -528,7 +528,7 @@ function Tl(r) {
       t = oe("ul");
       for (let s = 0; s < o.length; s += 1)
         o[s].c();
-      B(t, "class", "svelte-1xi1e9d");
+      B(t, "class", "svelte-gpexd2");
     },
     m(s, a) {
       We(s, t, a);
@@ -576,7 +576,7 @@ function Ml(r) {
       t = oe("div"), e = Ur(
         /*noResultsMessage*/
         r[7]
-      ), B(t, "class", "no-results svelte-1xi1e9d");
+      ), B(t, "class", "no-results svelte-gpexd2");
     },
     m(n, i) {
       We(n, t, i), ct(t, e);
@@ -616,7 +616,7 @@ function Fl(r) {
       t = oe("div"), e = Ur(
         /*errorMessage*/
         r[6]
-      ), B(t, "class", "error svelte-1xi1e9d");
+      ), B(t, "class", "error svelte-gpexd2");
     },
     m(n, i) {
       We(n, t, i), ct(t, e);
@@ -643,7 +643,7 @@ function la(r) {
   ), n;
   return {
     c() {
-      t = oe("span"), n = Ur(e), B(t, "class", "line2 svelte-1xi1e9d");
+      t = oe("span"), n = Ur(e), B(t, "class", "line2 svelte-gpexd2");
     },
     m(s, a) {
       We(s, t, a), ct(t, n);
@@ -691,9 +691,9 @@ function ca(r) {
   }
   return {
     c() {
-      t = oe("li"), e = oe("span"), n = oe("span"), i = oe("span"), s = Ur(o), a = er(), u = oe("span"), c = Ur(l), f = er(), d && d.c(), h = er(), B(i, "class", "primary svelte-1xi1e9d"), B(u, "class", "secondary svelte-1xi1e9d"), B(n, "class", "line1 svelte-1xi1e9d"), B(e, "class", "texts svelte-1xi1e9d"), B(t, "tabindex", "0"), B(t, "data-selected", g = /*selectedItemIndex*/
+      t = oe("li"), e = oe("span"), n = oe("span"), i = oe("span"), s = Ur(o), a = er(), u = oe("span"), c = Ur(l), f = er(), d && d.c(), h = er(), B(i, "class", "primary svelte-gpexd2"), B(u, "class", "secondary svelte-gpexd2"), B(n, "class", "line1 svelte-gpexd2"), B(e, "class", "texts svelte-gpexd2"), B(t, "tabindex", "0"), B(t, "data-selected", g = /*selectedItemIndex*/
       r[13] === /*i*/
-      r[71]), B(t, "class", "svelte-1xi1e9d"), en(
+      r[71]), B(t, "class", "svelte-gpexd2"), en(
         t,
         "selected",
         /*selectedItemIndex*/
@@ -775,7 +775,7 @@ function Bl(r) {
   let F = A(r), D = F && F(r);
   return {
     c() {
-      t = oe("form"), e = oe("div"), n = oe("button"), Do(i.$$.fragment), o = er(), s = oe("input"), a = er(), u = oe("div"), l = oe("button"), Do(c.$$.fragment), f = er(), E && E.c(), h = er(), N && N.c(), g = er(), b && b.c(), p = er(), D && D.c(), B(n, "type", "button"), B(n, "class", "svelte-1xi1e9d"), B(
+      t = oe("form"), e = oe("div"), n = oe("button"), Do(i.$$.fragment), o = er(), s = oe("input"), a = er(), u = oe("div"), l = oe("button"), Do(c.$$.fragment), f = er(), E && E.c(), h = er(), N && N.c(), g = er(), b && b.c(), p = er(), D && D.c(), B(n, "type", "button"), B(n, "class", "svelte-gpexd2"), B(
         s,
         "placeholder",
         /*placeholder*/
@@ -785,20 +785,20 @@ function Bl(r) {
         "aria-label",
         /*placeholder*/
         r[8]
-      ), B(s, "class", "svelte-1xi1e9d"), B(l, "type", "button"), B(
+      ), B(s, "class", "svelte-gpexd2"), B(l, "type", "button"), B(
         l,
         "title",
         /*clearButtonTitle*/
         r[3]
-      ), B(l, "class", "svelte-1xi1e9d"), en(
+      ), B(l, "class", "svelte-gpexd2"), en(
         l,
         "displayable",
         /*searchValue*/
         r[1] !== ""
-      ), B(u, "class", "clear-button-container svelte-1xi1e9d"), B(e, "class", "input-group svelte-1xi1e9d"), B(t, "tabindex", "0"), B(t, "class", _ = ea(
+      ), B(u, "class", "clear-button-container svelte-gpexd2"), B(e, "class", "input-group svelte-gpexd2"), B(t, "tabindex", "0"), B(t, "class", _ = ea(
         /*className*/
         r[2]
-      ) + " svelte-1xi1e9d"), en(
+      ) + " svelte-gpexd2"), en(
         t,
         "can-collapse",
         /*collapsed*/
@@ -921,7 +921,7 @@ function Bl(r) {
       4 && _ !== (_ = ea(
         /*className*/
         R[2]
-      ) + " svelte-1xi1e9d")) && B(t, "class", _), (!d || z[0] & /*className, collapsed, searchValue*/
+      ) + " svelte-gpexd2")) && B(t, "class", _), (!d || z[0] & /*className, collapsed, searchValue*/
       22) && en(
         t,
         "can-collapse",