@maptiler/geocoding-control 0.0.96-alpha.1 → 0.0.96

package/GeocodingControl.svelte

@@ -39,7 +39,7 @@ export let maxZoom = 18;
 export let apiUrl = "https://api.maptiler.com/geocoding";
 export let fetchParameters = {};
 export let iconsBaseUrl = "https://cdn.maptiler.com/maptiler-geocoding-control/v" +
-    "0.0.96-alpha.1" +
+    "0.0.96" +
     "/icons/";
 export function focus() {
     input.focus();

package/README.md

@@ -95,6 +95,55 @@ For examples without using bundler see `demo-maplibregl.html` or `demo-leaflet.h
 - 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`
 
+### Example for vanilla JS using UMD
+
+```html
+<script src="https://cdn.maptiler.com/maptiler-geocoding-control/v${version}/vanilla.js"></script>
+
+<link
+  href="https://cdn.maptiler.com/maptiler-geocoding-control/v${version}/style.css"
+  rel="stylesheet"
+/>
+
+<div id="container"></div>
+
+<script>
+  const control = new maptilerGeocoder.GeocodingControl({
+    apiKey: "YOUR_MAPTILER_API_KEY_HERE",
+    target: document.getElementById("container"),
+  });
+
+  control.addEventListener("pick", (evt) => {
+    console.log("Picked:", evt.detail);
+  });
+</script>
+```
+
+This example doesn't use the map. To use it, you can include and use particular map controller (see `createLeafletMapController` or `createMapLibreGlMapController`).
+
+Note: replace `${version}` with the desired library version.
+
+## UMD global variables
+
+If you import script from CDN using `<script src="https://cdn.maptiler.com/maptiler-geocoding-control/v${version}/${Script filename}"></script>` then it creates a global variable according to the following table:
+
+| Script filename                | UMD global variable name                | Exports                                                            |
+| ------------------------------ | --------------------------------------- | ------------------------------------------------------------------ |
+| `leaflet.umd.js`               | `leafletMaptilerGeocoder`               | `class GeocodingControl`,`function createLeafletMapController`     |
+| `maplibregl.umd.js`            | `maplibreglMaptilerGeocoder`            | `class GeocodingControl`, `function createMapLibreGlMapController` |
+| `maptilersdk.umd.js`           | `maptilersdkMaptilerGeocoder`           | `class GeocodingControl`                                           |
+| `react.umd.js`                 | `reactMaptilerGeocoder`                 | `class GeocodingControl`                                           |
+| `vanilla.umd.js`               | `maptilerGeocoder`                      | `class GeocodingControl`                                           |
+| `leaflet-controller.umd.js`    | `leafletMaptilerGeocodingController`    | `function createLeafletMapController`                              |
+| `maplibregl-controller.umd.js` | `maplibreglMaptilerGeocodingController` | `function createMapLibreGlMapController`                           |
+
+The variable is an object with properties representing library-exported variables, for example `maplibreglMaptilerGeocoder.GeocodingControl`.
+
+Notes:
+
+- alternatively you can use different CDN, for example `https://www.unpkg.com/@maptiler/geocoding-control@${version}/maplibregl.umd.js`
+- replace `${version}` with the desired library version and `${Script filename}` with the script filename from the table above.
+
 ## API Documentation
 
 ### Options
@@ -164,7 +213,7 @@ geocodingControl.addEventListener("optionsVisibilityChange", (e) => {
 ## POI icons and bundlers
 
 POI icons are served from CDN per default.
-If there is an requirement to serve them from a different location and the control is used in the application which is build with Web Application bundler (like Webpack, Vite) then it is necessary to do some extra cponfiguration.
+If there is an requirement to serve them from a different location and the control is used in the application which is build with Web Application bundler (like Webpack or Vite) then it is necessary to do some extra configuration.
 Icons are bundled in the library and you can find them in `node_modules/@maptiler/geocoding-control/icons`.
 Configure your bundler and/or provide `iconsBaseUrl` option for the icons to be properly resolved.
 You can also copy icons from that directory to your _`public`_ directory.

package/leaflet.js

@@ -1420,7 +1420,7 @@ function Ea(r) {
   return t[2] < t[0] && (t[2] += 360), t;
 }
 function hc(r, t, e) {
-  let n, { $$slots: i = {}, $$scope: o } = t, { class: s = void 0 } = t, { apiKey: a } = t, { bbox: u = void 0 } = t, { clearButtonTitle: l = "clear" } = t, { clearOnBlur: c = !1 } = t, { collapsed: f = !1 } = t, { country: h = void 0 } = t, { debounceSearch: g = 200 } = t, { enableReverse: p = !1 } = t, { errorMessage: y = "Something went wrong…" } = t, { filter: d = () => !0 } = t, { flyTo: m = !0 } = t, { fuzzyMatch: _ = !0 } = t, { language: C = void 0 } = t, { limit: L = void 0 } = t, { mapController: N = void 0 } = t, { minLength: x = 2 } = t, { noResultsMessage: D = "Oops! Looks like you're trying to predict something that's not quite right. We can't seem to find what you're looking for. Maybe try double-checking your spelling or try a different search term. Keep on typing - we'll do our best to get you where you need to go!" } = t, { placeholder: A = "Search" } = t, { proximity: w = void 0 } = t, { reverseActive: F = p === "always" } = t, { reverseButtonTitle: X = "toggle reverse geocoding" } = t, { searchValue: R = "" } = t, { showFullGeometry: Y = !0 } = t, { showPlaceType: T = "ifNeeded" } = t, { showResultsWhileTyping: W = !0 } = t, { trackProximity: ut = !0 } = t, { types: dt = void 0 } = t, { zoom: Ht = 16 } = t, { maxZoom: Jt = 18 } = t, { apiUrl: rr = "https://api.maptiler.com/geocoding" } = t, { fetchParameters: ze = {} } = t, { iconsBaseUrl: Fn = "https://cdn.maptiler.com/maptiler-geocoding-control/v0.0.96-alpha.1/icons/" } = t;
+  let n, { $$slots: i = {}, $$scope: o } = t, { class: s = void 0 } = t, { apiKey: a } = t, { bbox: u = void 0 } = t, { clearButtonTitle: l = "clear" } = t, { clearOnBlur: c = !1 } = t, { collapsed: f = !1 } = t, { country: h = void 0 } = t, { debounceSearch: g = 200 } = t, { enableReverse: p = !1 } = t, { errorMessage: y = "Something went wrong…" } = t, { filter: d = () => !0 } = t, { flyTo: m = !0 } = t, { fuzzyMatch: _ = !0 } = t, { language: C = void 0 } = t, { limit: L = void 0 } = t, { mapController: N = void 0 } = t, { minLength: x = 2 } = t, { noResultsMessage: D = "Oops! Looks like you're trying to predict something that's not quite right. We can't seem to find what you're looking for. Maybe try double-checking your spelling or try a different search term. Keep on typing - we'll do our best to get you where you need to go!" } = t, { placeholder: A = "Search" } = t, { proximity: w = void 0 } = t, { reverseActive: F = p === "always" } = t, { reverseButtonTitle: X = "toggle reverse geocoding" } = t, { searchValue: R = "" } = t, { showFullGeometry: Y = !0 } = t, { showPlaceType: T = "ifNeeded" } = t, { showResultsWhileTyping: W = !0 } = t, { trackProximity: ut = !0 } = t, { types: dt = void 0 } = t, { zoom: Ht = 16 } = t, { maxZoom: Jt = 18 } = t, { apiUrl: rr = "https://api.maptiler.com/geocoding" } = t, { fetchParameters: ze = {} } = t, { iconsBaseUrl: Fn = "https://cdn.maptiler.com/maptiler-geocoding-control/v0.0.96/icons/" } = t;
   function In() {
     Bn.focus();
   }