@maptiler/geocoding-control 0.0.85 → 0.0.86

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -496,6 +496,7 @@ input {
496
496
  font: inherit;
497
497
  font-size: 14px;
498
498
  width: 100%;
499
+ min-height: 28px;
499
500
  border: 0;
500
501
  background-color: transparent;
501
502
  margin: 0;
@@ -0,0 +1,59 @@
1
+ import type * as maplibregl from "maplibre-gl";
2
+ import type { FillLayerSpecification, FitBoundsOptions, FlyToOptions, IControl, LineLayerSpecification, Map, MarkerOptions } from "maplibre-gl";
3
+ import type { SvelteComponentTyped } from "svelte";
4
+ import GeocodingControlComponent from "./GeocodingControl.svelte";
5
+ import type { ControlOptions } from "./types";
6
+ export { createMapLibreGlMapController } from "./maplibreglMapController";
7
+ type MapLibreControlOptions = Omit<ControlOptions, "apiKey"> & {
8
+ /**
9
+ * Maptiler API key. Optional if used with MapTiler SDK.
10
+ */
11
+ apiKey?: string;
12
+ /**
13
+ * 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.
14
+ * If the value is an object, the marker will be constructed using these options.
15
+ * If `false`, no marker will be added to the map.
16
+ * Requires that `options.maplibregl` also be set.
17
+ *
18
+ * @default true
19
+ */
20
+ marker?: boolean | MarkerOptions;
21
+ /**
22
+ * 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.
23
+ * If the value is an object, the marker will be constructed using these options.
24
+ * If `false`, no marker will be added to the map.
25
+ * Requires that `options.maplibregl` also be set.
26
+ *
27
+ * @default true
28
+ */
29
+ showResultMarkers?: boolean | MarkerOptions;
30
+ /**
31
+ * If `false`, animating the map to a selected result is disabled.
32
+ * If `true`, animating the map will use the default animation parameters.
33
+ * If an object, it will be passed as options to the map `flyTo` or `fitBounds` method providing control over the animation of the transition.
34
+ *
35
+ * @default true
36
+ */
37
+ flyTo?: boolean | (FlyToOptions & FitBoundsOptions);
38
+ /**
39
+ * Style for full feature geometry GeoJSON.
40
+ */
41
+ fullGeometryStyle?: {
42
+ fill: Pick<FillLayerSpecification, "layout" | "paint" | "filter">;
43
+ line: Pick<LineLayerSpecification, "layout" | "paint" | "filter">;
44
+ };
45
+ };
46
+ export type Props<T> = T extends SvelteComponentTyped<infer P, any, any> ? P : never;
47
+ export declare abstract class MapLibreBasedGeocodingControl extends EventTarget implements IControl {
48
+ #private;
49
+ constructor(options?: MapLibreControlOptions);
50
+ abstract getExtraProps(map: Map, div: HTMLElement): Partial<Props<GeocodingControlComponent>>;
51
+ onAdd(map: Map): HTMLDivElement;
52
+ abstract getMapLibre(): typeof maplibregl;
53
+ setOptions(options: MapLibreControlOptions): void;
54
+ setQuery(value: string, submit?: boolean): void;
55
+ setReverseMode(value: boolean): void;
56
+ focus(): void;
57
+ blur(): void;
58
+ onRemove(): void;
59
+ }
@@ -0,0 +1,8 @@
1
+ import type * as maplibregl from "maplibre-gl";
2
+ import type { Map } from "maplibre-gl";
3
+ import type GeocodingControlComponent from "./GeocodingControl.svelte";
4
+ import { MapLibreBasedGeocodingControl, type Props } from "./MapLibreBasedGeocodingControl";
5
+ export declare class GeocodingControl extends MapLibreBasedGeocodingControl {
6
+ getMapLibre(): typeof maplibregl;
7
+ getExtraProps(map: Map, div: HTMLElement): Partial<Props<GeocodingControlComponent>>;
8
+ }
package/README.md CHANGED
@@ -16,7 +16,7 @@ npm install --save @maptiler/geocoding-control @maptiler/sdk
16
16
 
17
17
  ```js
18
18
  import * as maptilersdk from "@maptiler/sdk";
19
- import { GeocodingControl } from "@maptiler/geocoding-control/maplibregl";
19
+ import { GeocodingControl } from "@maptiler/geocoding-control/maptilersdk";
20
20
  import "@maptiler/sdk/dist/maptiler-sdk.css";
21
21
  import "@maptiler/geocoding-control/style.css";
22
22
 
@@ -100,7 +100,7 @@ For examples without using bundler see `demo-maplibregl.html` or `demo-leaflet.h
100
100
  ### Options
101
101
 
102
102
  - `apiKey`<sup>\*</sup>: `string` - Maptiler API key. Not needed if used with MapTiler SDK.
103
- - `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.
103
+ - `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.
104
104
  - `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`.
105
105
  - `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.
106
106
  - `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
111
111
  - `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.
112
112
  - `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.
113
113
  - `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`.
114
- - `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`.
115
- - `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`.
114
+ - `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`.
115
+ - `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`.
116
116
  - `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`.
117
117
  - `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`.
118
118
  - `collapsed`: `boolean` - If `true`, the geocoder control will collapse until hovered or in focus. Default `false`.
@@ -160,7 +160,7 @@ geocodingControl.addEventListener("optionsVisibilityChange", (e) => {
160
160
 
161
161
  ## React component
162
162
 
163
- 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.
163
+ 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.
164
164
 
165
165
  Component API matches API described above where options and events are exposed as component properties and methods are callable on the component reference.
166
166
 
@@ -169,7 +169,7 @@ Component API matches API described above where options and events are exposed a
169
169
  ```typescript
170
170
  import { useEffect, useRef, useState } from "react";
171
171
  import { GeocodingControl } from "@maptiler/geocoding-control/react";
172
- import { createMaplibreglMapController } from "@maptiler/geocoding-control/maplibregl-controller";
172
+ import { createMapLibreGlMapController } from "@maptiler/geocoding-control/maplibregl-controller";
173
173
  import type { MapController } from "@maptiler/geocoding-control/types";
174
174
  import "@maptiler/geocoding-control/style.css";
175
175
  import maplibregl from "maplibre-gl";
@@ -192,7 +192,7 @@ export function App() {
192
192
  container: mapContainerRef.current,
193
193
  });
194
194
 
195
- setMapController(createMaplibreglMapController(map, maplibregl));
195
+ setMapController(createMapLibreGlMapController(map, maplibregl));
196
196
  }, []);
197
197
 
198
198
  return (
@@ -210,16 +210,16 @@ export function App() {
210
210
 
211
211
  ## Svelte component
212
212
 
213
- 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.
213
+ 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.
214
214
 
215
215
  Component API matches API described above where options and events are exposed as component properties and methods are callable on the component reference.
216
216
 
217
- ### Example for integration with MapLibre
217
+ ### Example for integration with MapLibre GL JS
218
218
 
219
219
  ```svelte
220
220
  <script lang="ts">
221
221
  import GeocodingControl from "@maptiler/geocoding-control/GeocodingControl.svelte";
222
- import { createMaplibreglMapController } from "@maptiler/geocoding-control/maplibregl";
222
+ import { createMapLibreGlMapController } from "@maptiler/geocoding-control/maplibregl";
223
223
  import type { MapController } from "@maptiler/geocoding-control/types";
224
224
  import maplibregl from "maplibre-gl";
225
225
  import "maplibre-gl/dist/maplibre-gl.css";
@@ -236,7 +236,7 @@ Component API matches API described above where options and events are exposed a
236
236
  container,
237
237
  });
238
238
 
239
- mapController = createMaplibreglMapController(map, maplibregl);
239
+ mapController = createMapLibreGlMapController(map, maplibregl);
240
240
  });
241
241
  </script>
242
242
 
package/leaflet.js CHANGED
@@ -420,7 +420,7 @@ function ua(r) {
420
420
  "title",
421
421
  /*reverseButtonTitle*/
422
422
  r[9]
423
- ), B(t, "class", "svelte-1qszo8o"), en(
423
+ ), B(t, "class", "svelte-15dr9yr"), en(
424
424
  t,
425
425
  "active",
426
426
  /*reverseActive*/
@@ -473,7 +473,7 @@ function Rl(r) {
473
473
  t = oe("ul");
474
474
  for (let s = 0; s < o.length; s += 1)
475
475
  o[s].c();
476
- B(t, "class", "svelte-1qszo8o");
476
+ B(t, "class", "svelte-15dr9yr");
477
477
  },
478
478
  m(s, a) {
479
479
  We(s, t, a);
@@ -521,7 +521,7 @@ function Ol(r) {
521
521
  t = oe("div"), e = Ur(
522
522
  /*noResultsMessage*/
523
523
  r[7]
524
- ), B(t, "class", "no-results svelte-1qszo8o");
524
+ ), B(t, "class", "no-results svelte-15dr9yr");
525
525
  },
526
526
  m(n, i) {
527
527
  We(n, t, i), ct(t, e);
@@ -561,7 +561,7 @@ function Tl(r) {
561
561
  t = oe("div"), e = Ur(
562
562
  /*errorMessage*/
563
563
  r[6]
564
- ), B(t, "class", "error svelte-1qszo8o");
564
+ ), B(t, "class", "error svelte-15dr9yr");
565
565
  },
566
566
  m(n, i) {
567
567
  We(n, t, i), ct(t, e);
@@ -588,7 +588,7 @@ function la(r) {
588
588
  ), n;
589
589
  return {
590
590
  c() {
591
- t = oe("span"), n = Ur(e), B(t, "class", "line2 svelte-1qszo8o");
591
+ t = oe("span"), n = Ur(e), B(t, "class", "line2 svelte-15dr9yr");
592
592
  },
593
593
  m(s, a) {
594
594
  We(s, t, a), ct(t, n);
@@ -636,9 +636,9 @@ function ca(r) {
636
636
  }
637
637
  return {
638
638
  c() {
639
- 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*/
639
+ 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-15dr9yr"), B(u, "class", "secondary svelte-15dr9yr"), B(n, "class", "line1 svelte-15dr9yr"), B(e, "class", "texts svelte-15dr9yr"), B(t, "tabindex", "0"), B(t, "data-selected", g = /*selectedItemIndex*/
640
640
  r[13] === /*i*/
641
- r[71]), B(t, "class", "svelte-1qszo8o"), en(
641
+ r[71]), B(t, "class", "svelte-15dr9yr"), en(
642
642
  t,
643
643
  "selected",
644
644
  /*selectedItemIndex*/
@@ -720,7 +720,7 @@ function Ml(r) {
720
720
  let F = A(r), D = F && F(r);
721
721
  return {
722
722
  c() {
723
- 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(
723
+ 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-15dr9yr"), B(
724
724
  s,
725
725
  "placeholder",
726
726
  /*placeholder*/
@@ -730,20 +730,20 @@ function Ml(r) {
730
730
  "aria-label",
731
731
  /*placeholder*/
732
732
  r[8]
733
- ), B(s, "class", "svelte-1qszo8o"), B(l, "type", "button"), B(
733
+ ), B(s, "class", "svelte-15dr9yr"), B(l, "type", "button"), B(
734
734
  l,
735
735
  "title",
736
736
  /*clearButtonTitle*/
737
737
  r[3]
738
- ), B(l, "class", "svelte-1qszo8o"), B(u, "class", "clear-button-container svelte-1qszo8o"), en(
738
+ ), B(l, "class", "svelte-15dr9yr"), B(u, "class", "clear-button-container svelte-15dr9yr"), en(
739
739
  u,
740
740
  "displayable",
741
741
  /*searchValue*/
742
742
  r[1] !== ""
743
- ), B(e, "class", "input-group svelte-1qszo8o"), B(t, "tabindex", "0"), B(t, "class", _ = ea(
743
+ ), B(e, "class", "input-group svelte-15dr9yr"), B(t, "tabindex", "0"), B(t, "class", _ = ea(
744
744
  /*className*/
745
745
  r[2]
746
- ) + " svelte-1qszo8o"), en(
746
+ ) + " svelte-15dr9yr"), en(
747
747
  t,
748
748
  "can-collapse",
749
749
  /*collapsed*/
@@ -866,7 +866,7 @@ function Ml(r) {
866
866
  4 && _ !== (_ = ea(
867
867
  /*className*/
868
868
  R[2]
869
- ) + " svelte-1qszo8o")) && B(t, "class", _), (!d || z[0] & /*className, collapsed, searchValue*/
869
+ ) + " svelte-15dr9yr")) && B(t, "class", _), (!d || z[0] & /*className, collapsed, searchValue*/
870
870
  22) && en(
871
871
  t,
872
872
  "can-collapse",