@maptiler/geocoding-control 0.0.95 → 0.0.96-alpha.2

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.95" +
+    "0.0.96-alpha.2" +
     "/icons/";
 export function focus() {
     input.focus();

package/MapLibreBasedGeocodingControl.d.ts

@@ -42,7 +42,7 @@ export type MapLibreBaseControlOptions = Omit<ControlOptions, "apiKey"> & {
 export type Props<T> = T extends SvelteComponent<infer P, any, any> ? P : never;
 export declare abstract class MapLibreBasedGeocodingControl<T extends MapLibreBaseControlOptions> extends EventTarget implements IControl {
     #private;
-    constructor(options: T);
+    constructor(options?: T);
     abstract getExtraProps(map: Map, div: HTMLElement): Partial<Props<GeocodingControlComponent>>;
     onAdd(map: Map): HTMLDivElement;
     abstract getMapLibreGl(): typeof maplibregl;

package/README.md

@@ -95,12 +95,64 @@ 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
 
 - `apiKey`<sup>\*</sup>: `string` - Maptiler API key. 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.
+- `apiUrl`: `string` - Geocoding API URL. Default MapTiler Geocoding API URL.
+- `fetchParameters`: `RequestInit` - Extra fetch parameters. Default `undefined`.
+- `iconsBaseUrl`: `string` - Base URL for POI icons. Default `"icons/"` for Svelte apps, otherwise <code>`https://cdn.maptiler.com/maptiler-geocoding-control/v${version}/icons/`</code>.
 - `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"`.
@@ -110,7 +162,7 @@ For examples without using bundler see `demo-maplibregl.html` or `demo-leaflet.h
 - `minLength`: `number` - Minimum number of characters to enter for results to show. Default `2`.
 - `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`.
+- `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 `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`.
@@ -121,6 +173,7 @@ For examples without using bundler see `demo-maplibregl.html` or `demo-leaflet.h
 - `class`: `string` - Class of the root element.
 - `enableReverse`: `boolean | "always""` - Set to `true` to enable reverse geocoding button with title. Set to `"always"` to reverse geocoding be always active. Default `false`.
 - `reverseButtonTitle`: `string` - Reverse toggle button title. Default `"toggle reverse geocoding"`.
+- `reverseActive`: `boolean` - Set to `true` to programatically toggle reverse mode. Useful only if `enableReverse` is `true`.
 - `clearButtonTitle`: `string` - Clear button title. Default `"clear"`.
 - `showFullGeometry`: `boolean` - Set to `true` to show full feature geometry of the chosen result. Otherwise only marker will be shown. Default `true`.
 - `fullGeometryStyle`: `{ fill: Pick<FillLayerSpecification, "layout" | "paint" | "filter">; line: Pick<LineLayerSpecification, "layout" | "paint" | "filter">; } | (L.PathOptions | L.StyleFunction)` - style of the full feature geometry. See Mapplibre GL JS or Leaflet documentation.
@@ -128,16 +181,12 @@ For examples without using bundler see `demo-maplibregl.html` or `demo-leaflet.h
 - `limit`: `number` - Maximum number of results to show. Default `5`.
 - `country`: `string | string[]` - Limit search to specified country(ies). Default `undefined` (use all countries). Specify as [alpha-2 ISO 3166](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) lowercase code.
 - `types`: `string[]` - Filter of feature types to return. Default `undefined` (all available feature types are returned).
-- `apiUrl`: `string` - Geocoding API URL. Default MapTiler Geocoding API URL.
-- `fetchParameters`: `RequestInit` - Extra fetch parameters. Default `undefined`.
-- `iconsBaseUrl`: `string` - Base URL for POI icons. Default `"icons/"` for Svelte apps, otherwise <code>`https://cdn.maptiler.com/maptiler-geocoding-control/v${version}/icons/`</code>.
 
 ### Methods
 
 - `setQuery(value: string, submit = true): void` - set the query and optionally submit it
 - `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

package/leaflet.d.ts

@@ -37,7 +37,6 @@ export declare class GeocodingControl extends L.Control {
     onAdd(map: L.Map): HTMLDivElement;
     setOptions(options: LeafletControlOptions): void;
     setQuery(value: string, submit?: boolean): void;
-    setReverseMode(value: boolean): void;
     focus(): void;
     blur(): void;
     onRemove(): void;