@maptiler/geocoding-control 0.0.85 → 0.0.87

package/GeocodingControl.svelte

@@ -496,6 +496,7 @@ input {
   font: inherit;
   font-size: 14px;
   width: 100%;
+  min-height: 28px;
   border: 0;
   background-color: transparent;
   margin: 0;
@@ -596,7 +597,7 @@ button:hover {
 
 button:hover :global(svg),
 button.active :global(svg) {
-  fill: #3588d4;
+  fill: #2b8bfb;
 }
 
 .input-group {

package/MapLibreBasedGeocodingControl.d.ts

@@ -0,0 +1,55 @@
+import type * as maplibregl from "maplibre-gl";
+import type { FillLayerSpecification, FitBoundsOptions, FlyToOptions, IControl, LineLayerSpecification, Map, MarkerOptions } from "maplibre-gl";
+import type { SvelteComponentTyped } from "svelte";
+import GeocodingControlComponent from "./GeocodingControl.svelte";
+import type { ControlOptions } from "./types";
+export { createMapLibreGlMapController } from "./maplibreglMapController";
+export type MapLibreBaseControlOptions = Omit<ControlOptions, "apiKey"> & {
+    /**
+     * If `true`, a [Marker](https://maplibre.org/maplibre-gl-js-docs/api/markers/#marker) will be added to the map at the location of the user-selected result using a default set of Marker options.
+     * If the value is an object, the marker will be constructed using these options.
+     * If `false`, no marker will be added to the map.
+     * Requires that `options.maplibregl` also be set.
+     *
+     * @default true
+     */
+    marker?: boolean | MarkerOptions;
+    /**
+     * If `true`, [Markers](https://maplibre.org/maplibre-gl-js-docs/api/markers/#marker) will be added to the map at the location the top results for the query.
+     * If the value is an object, the marker will be constructed using these options.
+     * If `false`, no marker will be added to the map.
+     * Requires that `options.maplibregl` also be set.
+     *
+     * @default true
+     */
+    showResultMarkers?: boolean | MarkerOptions;
+    /**
+     * 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.
+     *
+     * @default true
+     */
+    flyTo?: boolean | (FlyToOptions & FitBoundsOptions);
+    /**
+     * Style for full feature geometry GeoJSON.
+     */
+    fullGeometryStyle?: {
+        fill: Pick<FillLayerSpecification, "layout" | "paint" | "filter">;
+        line: Pick<LineLayerSpecification, "layout" | "paint" | "filter">;
+    };
+};
+export type Props<T> = T extends SvelteComponentTyped<infer P, any, any> ? P : never;
+export declare abstract class MapLibreBasedGeocodingControl<T extends MapLibreBaseControlOptions> extends EventTarget implements IControl {
+    #private;
+    constructor(options: T);
+    abstract getExtraProps(map: Map, div: HTMLElement): Partial<Props<GeocodingControlComponent>>;
+    onAdd(map: Map): HTMLDivElement;
+    abstract getMapLibreGl(): typeof maplibregl;
+    setOptions(options: T): void;
+    setQuery(value: string, submit?: boolean): void;
+    setReverseMode(value: boolean): void;
+    focus(): void;
+    blur(): void;
+    onRemove(): void;
+}

package/MapTilerSdkGeocodingControl.d.ts

@@ -0,0 +1,8 @@
+import type * as maplibregl from "maplibre-gl";
+import type { Map } from "maplibre-gl";
+import type GeocodingControlComponent from "./GeocodingControl.svelte";
+import { MapLibreBasedGeocodingControl, type MapLibreBaseControlOptions, type Props } from "./MapLibreBasedGeocodingControl";
+export declare class GeocodingControl extends MapLibreBasedGeocodingControl<MapLibreBaseControlOptions> {
+    getMapLibreGl(): typeof maplibregl;
+    getExtraProps(map: Map, div: HTMLElement): Partial<Props<GeocodingControlComponent>>;
+}

package/README.md

@@ -16,7 +16,7 @@ npm install --save @maptiler/geocoding-control @maptiler/sdk
 
 ```js
 import * as maptilersdk from "@maptiler/sdk";
-import { GeocodingControl } from "@maptiler/geocoding-control/maplibregl";
+import { GeocodingControl } from "@maptiler/geocoding-control/maptilersdk";
 import "@maptiler/sdk/dist/maptiler-sdk.css";
 import "@maptiler/geocoding-control/style.css";
 
@@ -100,7 +100,7 @@ For examples without using bundler see `demo-maplibregl.html` or `demo-leaflet.h
 ### Options
 
 - `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.
+- `maplibregl`: `MapLibreGL` - A MapLibre GL JS 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 JS 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"`.
@@ -111,8 +111,8 @@ For examples without using bundler see `demo-maplibregl.html` or `demo-leaflet.h
 - `bbox`: `[number, number, number, 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.
 - `language`: `string | string[]` - Specify the language(s) 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. Set to empty string or empty array for forcing no language preference. If this parameter is not provided at all the browser's language settings will be used.
 - `showResultsWhileTyping`: `boolean` - If `false`, indicates that search will only occur on enter key press. If `true`, indicates that the Geocoder will search on the input box being updated above the minLength option. Default `false`.
-- `marker`: `boolean | MarkerOptions` - If `true`, a [MapLibre GL Marker](https://maplibre.org/maplibre-gl-js-docs/api/markers/#marker) / [Leaflet Marker](https://leafletjs.com/reference.html#marker) will be added to the map at the location of the user-selected result using a default set of Marker options. If the value is an object, the marker will be constructed using these options. If `false`, no marker will be added to the map. Requires that `options.maplibregl` also be set. Default `true`.
-- `showResultMarkers`: `boolean | MarkerOptions` - If `true`, [MapLibre GL Marker](https://maplibre.org/maplibre-gl-js-docs/api/markers/#marker) / [Leaflet Marker](https://leafletjs.com/reference.html#marker) will be added to the map at the location the top results for the query. If the value is an object, the marker will be constructed using these options. If `false`, no marker will be added to the map. Requires that `options.maplibregl` also be set. Default `true`.
+- `marker`: `boolean | MarkerOptions` - If `true`, a [MapLibre GL JS Marker](https://maplibre.org/maplibre-gl-js-docs/api/markers/#marker) / [Leaflet Marker](https://leafletjs.com/reference.html#marker) will be added to the map at the location of the user-selected result using a default set of Marker options. If the value is an object, the marker will be constructed using these options. If `false`, no marker will be added to the map. Requires that `options.maplibregl` also be set. Default `true`.
+- `showResultMarkers`: `boolean | MarkerOptions` - If `true`, [MapLibre GL JS Marker](https://maplibre.org/maplibre-gl-js-docs/api/markers/#marker) / [Leaflet Marker](https://leafletjs.com/reference.html#marker) will be added to the map at the location the top results for the query. If the value is an object, the marker will be constructed using these options. If `false`, no marker will be added to the map. Requires that `options.maplibregl` also be set. Default `true`.
 - `zoom`: `number` - 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. Default `16`.
 - `flyTo`: `boolean | (FlyToOptions & FitBoundsOptions)` - 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. Default `true`.
 - `collapsed`: `boolean` - If `true`, the geocoder control will collapse until hovered or in focus. Default `false`.
@@ -160,7 +160,7 @@ geocodingControl.addEventListener("optionsVisibilityChange", (e) => {
 
 ## 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.
+In addition to using the component as MapLibre GL JS or Leaflet Control it is also possible to use it stand-alone in React projects with or without MapLibre GL JS or Leaflet integration.
 
 Component API matches API described above where options and events are exposed as component properties and methods are callable on the component reference.
 
@@ -169,7 +169,7 @@ Component API matches API described above where options and events are exposed a
 ```typescript
 import { useEffect, useRef, useState } from "react";
 import { GeocodingControl } from "@maptiler/geocoding-control/react";
-import { createMaplibreglMapController } from "@maptiler/geocoding-control/maplibregl-controller";
+import { createMapLibreGlMapController } from "@maptiler/geocoding-control/maplibregl-controller";
 import type { MapController } from "@maptiler/geocoding-control/types";
 import "@maptiler/geocoding-control/style.css";
 import maplibregl from "maplibre-gl";
@@ -192,7 +192,7 @@ export function App() {
       container: mapContainerRef.current,
     });
 
-    setMapController(createMaplibreglMapController(map, maplibregl));
+    setMapController(createMapLibreGlMapController(map, maplibregl));
   }, []);
 
   return (
@@ -210,16 +210,16 @@ export function App() {
 
 ## 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.
+In addition to using the component as MapLibre GL JS or Leaflet Control it is also possible to use it stand-alone in Svelte projects with or without MapLibre GL JS or Leaflet integration.
 
 Component API matches API described above where options and events are exposed as component properties and methods are callable on the component reference.
 
-### Example for integration with MapLibre
+### Example for integration with MapLibre GL JS
 
 ```svelte
 <script lang="ts">
   import GeocodingControl from "@maptiler/geocoding-control/GeocodingControl.svelte";
-  import { createMaplibreglMapController } from "@maptiler/geocoding-control/maplibregl";
+  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";
@@ -236,7 +236,7 @@ Component API matches API described above where options and events are exposed a
       container,
     });
 
-    mapController = createMaplibreglMapController(map, maplibregl);
+    mapController = createMapLibreGlMapController(map, maplibregl);
   });
 </script>
 

package/leaflet.js

@@ -420,7 +420,7 @@ function ua(r) {
         "title",
         /*reverseButtonTitle*/
         r[9]
-      ), B(t, "class", "svelte-1qszo8o"), en(
+      ), B(t, "class", "svelte-p509gh"), en(
         t,
         "active",
         /*reverseActive*/
@@ -473,7 +473,7 @@ function Rl(r) {
       t = oe("ul");
       for (let s = 0; s < o.length; s += 1)
         o[s].c();
-      B(t, "class", "svelte-1qszo8o");
+      B(t, "class", "svelte-p509gh");
     },
     m(s, a) {
       We(s, t, a);
@@ -521,7 +521,7 @@ function Ol(r) {
       t = oe("div"), e = Ur(
         /*noResultsMessage*/
         r[7]
-      ), B(t, "class", "no-results svelte-1qszo8o");
+      ), B(t, "class", "no-results svelte-p509gh");
     },
     m(n, i) {
       We(n, t, i), ct(t, e);
@@ -561,7 +561,7 @@ function Tl(r) {
       t = oe("div"), e = Ur(
         /*errorMessage*/
         r[6]
-      ), B(t, "class", "error svelte-1qszo8o");
+      ), B(t, "class", "error svelte-p509gh");
     },
     m(n, i) {
       We(n, t, i), ct(t, e);
@@ -588,7 +588,7 @@ function la(r) {
   ), n;
   return {
     c() {
-      t = oe("span"), n = Ur(e), B(t, "class", "line2 svelte-1qszo8o");
+      t = oe("span"), n = Ur(e), B(t, "class", "line2 svelte-p509gh");
     },
     m(s, a) {
       We(s, t, a), ct(t, n);
@@ -636,9 +636,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-1qszo8o"), B(u, "class", "secondary svelte-1qszo8o"), B(n, "class", "line1 svelte-1qszo8o"), B(e, "class", "texts svelte-1qszo8o"), 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-p509gh"), B(u, "class", "secondary svelte-p509gh"), B(n, "class", "line1 svelte-p509gh"), B(e, "class", "texts svelte-p509gh"), B(t, "tabindex", "0"), B(t, "data-selected", g = /*selectedItemIndex*/
       r[13] === /*i*/
-      r[71]), B(t, "class", "svelte-1qszo8o"), en(
+      r[71]), B(t, "class", "svelte-p509gh"), en(
         t,
         "selected",
         /*selectedItemIndex*/
@@ -720,7 +720,7 @@ function Ml(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-1qszo8o"), 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-p509gh"), B(
         s,
         "placeholder",
         /*placeholder*/
@@ -730,20 +730,20 @@ function Ml(r) {
         "aria-label",
         /*placeholder*/
         r[8]
-      ), B(s, "class", "svelte-1qszo8o"), B(l, "type", "button"), B(
+      ), B(s, "class", "svelte-p509gh"), B(l, "type", "button"), B(
         l,
         "title",
         /*clearButtonTitle*/
         r[3]
-      ), B(l, "class", "svelte-1qszo8o"), B(u, "class", "clear-button-container svelte-1qszo8o"), en(
+      ), B(l, "class", "svelte-p509gh"), B(u, "class", "clear-button-container svelte-p509gh"), en(
         u,
         "displayable",
         /*searchValue*/
         r[1] !== ""
-      ), B(e, "class", "input-group svelte-1qszo8o"), B(t, "tabindex", "0"), B(t, "class", _ = ea(
+      ), B(e, "class", "input-group svelte-p509gh"), B(t, "tabindex", "0"), B(t, "class", _ = ea(
         /*className*/
         r[2]
-      ) + " svelte-1qszo8o"), en(
+      ) + " svelte-p509gh"), en(
         t,
         "can-collapse",
         /*collapsed*/
@@ -866,7 +866,7 @@ function Ml(r) {
       4 && _ !== (_ = ea(
         /*className*/
         R[2]
-      ) + " svelte-1qszo8o")) && B(t, "class", _), (!d || z[0] & /*className, collapsed, searchValue*/
+      ) + " svelte-p509gh")) && B(t, "class", _), (!d || z[0] & /*className, collapsed, searchValue*/
       22) && en(
         t,
         "can-collapse",