@maptiler/geocoding-control 0.0.83 → 0.0.85

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();
@@ -387,14 +389,13 @@ function unwrapBbox(bbox0) {
       aria-label={placeholder}
     />
 
-    <div class="clear-button-container">
+    <div class="clear-button-container" class:displayable={searchValue !== ""}>
       <button
         type="button"
         on:click={() => {
           searchValue = "";
           input.focus();
         }}
-        class:displayable={searchValue !== ""}
         title={clearButtonTitle}
       >
         <ClearIcon />
@@ -462,229 +463,214 @@ function unwrapBbox(bbox0) {
   {/if}
 </form>
 
-<style>
-  form,
-  form *,
-  form *:after,
-  form *:before {
-    box-sizing: border-box;
-  }
-
-  form {
-    font-family: "Open Sans", "Ubuntu", "Helvetica Neue", Arial, Helvetica,
-      sans-serif;
-    position: relative;
-    background-color: #fff;
-    width: 100%;
-    z-index: 10;
-    border-radius: 4px;
-    transition: max-width 0.25s;
-    box-shadow: 0px 5px 10px rgba(51, 51, 89, 0.15);
-    --color-text: #444952;
-    --color-icon-button: #444952;
-  }
-
-  form.can-collapse {
-    max-width: 35px;
-  }
-
-  form,
-  form:focus-within,
-  form:hover {
-    max-width: 240px;
-  }
-
-  input {
-    font: inherit;
-    font-size: 14px;
-    width: 100%;
-    border: 0;
-    background-color: transparent;
-    margin: 0;
-    height: 36px;
-    color: #444952;
-    white-space: nowrap;
-    overflow: hidden;
-    padding: 0;
-  }
-
-  input:focus {
-    color: #444952;
-    outline: 0;
-    outline: none;
-    box-shadow: none;
-  }
-
-  ul,
-  div.error,
-  div.no-results {
-    background-color: #fff;
-    border-radius: 4px;
-    left: 0;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    width: 100%;
-    top: calc(100% + 6px);
-    font-size: 14px;
-    box-shadow: 0px 2px 8px rgba(51, 51, 89, 0.15);
-    line-height: 16px;
-    overflow: hidden;
-  }
-
-  :global(.maplibregl-ctrl-bottom-left) ul,
-  :global(.maplibregl-ctrl-bottom-right) ul {
-    top: auto;
-    bottom: 100%;
-  }
-
-  li {
-    text-align: left;
-    cursor: default;
-    display: grid;
-    grid-template-columns: 1fr;
-    color: var(--color-text);
-    padding: 8px 0px;
-    font-size: 14px;
-    line-height: 18px;
-  }
-
-  li:first-child {
-    padding-top: 10px;
-  }
-
-  li:last-child {
-    padding-bottom: 10px;
-  }
+<style>form {
+  font-family: "Open Sans", "Ubuntu", "Helvetica Neue", Arial, Helvetica, sans-serif;
+  position: relative;
+  background-color: #fff;
+  z-index: 10;
+  border-radius: 4px;
+  transition: max-width 0.25s;
+  /* box-shadow: 0px 5px 10px rgba(51, 51, 89, 0.15); */
+  --color-text: #444952;
+  --color-icon-button: #444952;
+}
+form, form *, form *:after, form *:before {
+  box-sizing: border-box;
+}
+form.can-collapse {
+  max-width: 30px;
+}
+form.can-collapse .input-group {
+  padding-inline: 5px;
+  transition: padding-inline 0.25s;
+}
+form.can-collapse:focus-within .input-group, form.can-collapse:hover .input-group {
+  padding-inline: 8px;
+}
+form, form:focus-within, form:hover {
+  width: 240px;
+  max-width: 240px;
+}
 
-  .texts {
-    padding: 0 17px;
-  }
+input {
+  font: inherit;
+  font-size: 14px;
+  width: 100%;
+  border: 0;
+  background-color: transparent;
+  margin: 0;
+  color: #444952;
+  white-space: nowrap;
+  overflow: hidden;
+  padding: 0;
+}
+input:focus {
+  color: #444952;
+  outline: 0;
+  outline: none;
+  box-shadow: none;
+}
 
-  .texts > * {
-    white-space: nowrap;
-    display: block;
-    min-width: fit-content;
-  }
+ul,
+div.error,
+div.no-results {
+  background-color: #fff;
+  border-radius: 4px;
+  left: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  width: 100%;
+  top: calc(100% + 6px);
+  font-size: 14px;
+  box-shadow: 0px 2px 8px rgba(51, 51, 89, 0.15);
+  line-height: 16px;
+  overflow: hidden;
+}
 
-  li.selected .texts > * {
-    animation: backAndForth 5s linear infinite;
-  }
+:global(.maplibregl-ctrl-bottom-left) ul,
+:global(.maplibregl-ctrl-bottom-right) ul {
+  top: auto;
+  bottom: 100%;
+}
 
-  .primary {
-    font-weight: 600;
-  }
+li {
+  text-align: left;
+  cursor: default;
+  display: grid;
+  grid-template-columns: 1fr;
+  color: var(--color-text);
+  padding: 8px 0px;
+  font-size: 14px;
+  line-height: 18px;
+}
+li:first-child {
+  padding-top: 10px;
+}
+li:last-child {
+  padding-bottom: 10px;
+}
+li.selected {
+  background-color: #f3f6ff;
+}
+li.selected .texts > * {
+  animation: backAndForth 5s linear infinite;
+}
+li.selected .primary {
+  color: #2b8bfb;
+}
 
-  li.selected .primary {
-    color: #2b8bfb;
-  }
+.texts {
+  padding: 0 17px;
+}
+.texts > * {
+  white-space: nowrap;
+  display: block;
+  min-width: fit-content;
+}
 
-  .secondary {
-    color: #aeb6c7;
-    padding-left: 4px;
-  }
+.primary {
+  font-weight: 600;
+}
 
-  .line2 {
-    color: #aeb6c7;
-  }
+.secondary {
+  color: #aeb6c7;
+  padding-left: 4px;
+}
 
-  li.selected {
-    background-color: #f3f6ff;
-  }
+.line2 {
+  color: #aeb6c7;
+}
 
-  button:hover {
-    background-color: transparent;
-  }
+button {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background-color: transparent;
+  width: auto;
+}
+button:hover {
+  background-color: transparent;
+}
 
-  button:hover :global(svg),
-  button.active :global(svg) {
-    fill: #6b7c92;
-  }
+button:hover :global(svg),
+button.active :global(svg) {
+  fill: #3588d4;
+}
 
-  button {
-    padding: 0;
-    margin: 0;
-    border: 0;
-    background-color: transparent;
-  }
+.input-group {
+  display: flex;
+  align-items: stretch;
+  gap: 7px;
+  padding-inline: 8px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.input-group:focus-within {
+  outline: #2b8bfb solid 2px;
+}
 
-  .input-group {
-    display: flex;
-    align-items: stretch;
-    gap: 7px;
-    padding-inline: 8px;
-    outline: #c1cfe4 solid 1.5px;
-    border-radius: 4px;
-    overflow: hidden;
-  }
+.clear-button-container.displayable {
+  display: flex;
+}
 
-  .input-group:hover .displayable {
-    visibility: visible;
-  }
+div.error,
+div.no-results {
+  font: inherit;
+  font-size: 14px;
+  padding: 6px 10px;
+}
 
-  .input-group:focus-within {
-    outline: #2b8bfb solid 1.5px;
-  }
+div.error {
+  color: #e25041;
+}
 
-  div.error,
-  div.no-results {
-    font: inherit;
-    font-size: 14px;
-    padding: 6px 10px;
-  }
+div.no-results {
+  color: var(--color-text);
+}
 
-  div.error {
-    color: #e25041;
-  }
+.clear-button-container {
+  display: none;
+  position: relative;
+  align-items: stretch;
+}
 
-  div.no-results {
-    color: var(--color-text);
+@keyframes backAndForth {
+  0% {
+    transform: translateX(0);
   }
-
-  .clear-button-container {
-    position: relative;
-    display: flex;
-    align-items: stretch;
+  10% {
+    transform: translateX(0);
   }
-
-  .clear-button-container button {
-    visibility: hidden;
+  45% {
+    transform: translateX(calc(-100% + 206px));
   }
-
-  @keyframes backAndForth {
-    0% {
-      transform: translateX(0);
-    }
-    10% {
-      transform: translateX(0);
-    }
-    45% {
-      transform: translateX(calc(-100% + 206px));
-    }
-    55% {
-      transform: translateX(calc(-100% + 206px));
-    }
-    90% {
-      transform: translateX(0);
-    }
-    100% {
-      transform: translateX(0);
-    }
+  55% {
+    transform: translateX(calc(-100% + 206px));
   }
-
-  form.can-collapse button:not(:nth-of-type(1)) {
-    opacity: 0;
-    transition: opacity 0.25s;
+  90% {
+    transform: translateX(0);
   }
-
-  form.can-collapse:focus-within :not(:nth-of-type(1)),
-  form.can-collapse:hover :not(:nth-of-type(1)) {
-    opacity: 1;
+  100% {
+    transform: translateX(0);
   }
+}
+:global(.maplibregl-ctrl-geocoder) {
+  position: relative;
+  z-index: 3;
+}
 
-  :global(.maplibregl-ctrl-geocoder) {
-    position: relative;
-    z-index: 3;
-  }
-</style>
+:global(.maptiler-ctrl) .input-group:focus-within {
+  outline: #2b8bfb solid 1.5px;
+}
+:global(.maptiler-ctrl) form.can-collapse {
+  max-width: 34px;
+}
+:global(.maptiler-ctrl) form.can-collapse .input-group {
+  padding-inline: 7px;
+}
+:global(.maptiler-ctrl) form, :global(.maptiler-ctrl) form:focus-within, :global(.maptiler-ctrl) form:hover {
+  width: 240px;
+  max-width: 240px;
+}</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

@@ -8,6 +8,29 @@ Geocoding control is also provided as [React component](#react-component) and a
 
 ## Usage
 
+### 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
@@ -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
@@ -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>
   );
 }
@@ -210,7 +237,7 @@ Component API matches API described above where options and events are exposed a
     });
 
     mapController = createMaplibreglMapController(map, maplibregl);
-  }
+  });
 </script>
 
 <div class="map" bind:this={container} />