@maptiler/geocoding-control 2.1.7 → 3.0.0-rc.2

package/svelte/leaflet-controller.js

@@ -1,274 +0,0 @@
-import bbox from "@turf/bbox";
-import clone from "@turf/clone";
-import { feature, featureCollection } from "@turf/helpers";
-import union from "@turf/union";
-import * as L from "leaflet";
-import { unwrapBbox } from "./geoUtils";
-import MarkerIcon from "./MarkerIcon.svelte";
-import { setMask } from "./mask";
-const defaultFullGeometryStyle = (feature) => {
-    const type = feature?.geometry?.type;
-    const weight = feature?.properties?.isMask
-        ? 0
-        : type === "LineString" || type === "MultiLineString"
-            ? 3
-            : 2;
-    return {
-        color: "#3170fe",
-        fillColor: "#000",
-        fillOpacity: feature?.properties?.isMask ? 0.1 : 0,
-        weight,
-        dashArray: [weight, weight],
-        lineCap: "butt",
-    };
-};
-export function createLeafletMapController(map, marker = true, showResultMarkers = true, flyToOptions = {}, flyToBounds = {}, fullGeometryStyle = defaultFullGeometryStyle) {
-    let eventHandler;
-    const markers = [];
-    let selectedMarker;
-    let reverseMarker;
-    const resultLayer = L.geoJSON(undefined, {
-        style: fullGeometryStyle === true
-            ? defaultFullGeometryStyle
-            : fullGeometryStyle === false
-                ? undefined
-                : (fullGeometryStyle ?? undefined),
-        interactive: false,
-    }).addTo(map);
-    const handleMapClick = (e) => {
-        eventHandler?.({
-            type: "mapClick",
-            coordinates: [e.latlng.lng, e.latlng.lat],
-        });
-    };
-    function createMarker(pos, interactive = false) {
-        const element = document.createElement("div");
-        new MarkerIcon({ props: { displayIn: "leaflet" }, target: element });
-        return new L.Marker(pos, {
-            interactive,
-            icon: new L.DivIcon({
-                html: element,
-                className: "",
-                iconAnchor: [12, 26],
-                iconSize: [25, 30],
-                tooltipAnchor: [1, -24],
-            }),
-        });
-    }
-    return {
-        setEventHandler(handler) {
-            if (handler) {
-                eventHandler = handler;
-                map.on("click", handleMapClick);
-            }
-            else {
-                eventHandler = undefined;
-                map.off("click", handleMapClick);
-            }
-        },
-        flyTo(center, zoom) {
-            map.flyTo([center[1], center[0]], zoom, { duration: 2, ...flyToOptions });
-        },
-        fitBounds(bbox, padding, maxZoom) {
-            map.flyToBounds([
-                [bbox[1], bbox[0]],
-                [bbox[3], bbox[2]],
-            ], {
-                padding: [padding, padding],
-                duration: 2,
-                ...(maxZoom ? { maxZoom } : {}),
-                ...flyToBounds,
-            });
-        },
-        indicateReverse(reverse) {
-            map.getContainer().style.cursor = reverse ? "crosshair" : "";
-        },
-        setReverseMarker(coordinates) {
-            if (!marker) {
-                return;
-            }
-            const latLng = coordinates && [coordinates[1], coordinates[0]];
-            if (reverseMarker) {
-                if (!latLng) {
-                    reverseMarker.remove();
-                    reverseMarker = undefined;
-                }
-                else {
-                    reverseMarker.setLatLng(latLng);
-                }
-            }
-            else if (latLng) {
-                if (marker instanceof Function) {
-                    reverseMarker = marker(map) ?? undefined;
-                }
-                else {
-                    reverseMarker = (typeof marker === "object"
-                        ? new L.Marker(latLng, marker)
-                        : createMarker(latLng)).addTo(map);
-                    reverseMarker.getElement()?.classList.add("marker-reverse");
-                }
-            }
-        },
-        setFeatures(markedFeatures, picked, showPolygonMarker) {
-            function setData(data) {
-                resultLayer.clearLayers();
-                if (data) {
-                    resultLayer.addData(data);
-                }
-            }
-            for (const marker of markers) {
-                marker.remove();
-            }
-            markers.length = 0;
-            setData();
-            block: if (picked) {
-                let handled = false;
-                if (picked.geometry.type === "GeometryCollection") {
-                    const geoms = picked.geometry.geometries.filter((geometry) => geometry.type === "Polygon" || geometry.type === "MultiPolygon");
-                    ok: if (geoms.length > 0) {
-                        const unioned = union(featureCollection(geoms.map((geom) => feature(geom))));
-                        if (!unioned) {
-                            break ok;
-                        }
-                        setMask({
-                            ...picked,
-                            geometry: unioned.geometry,
-                        }, setData);
-                        handled = true;
-                    }
-                    else {
-                        const geometries = picked.geometry.geometries.filter((geometry) => geometry.type === "LineString" ||
-                            geometry.type === "MultiLineString");
-                        if (geometries.length > 0) {
-                            setData({
-                                ...picked,
-                                geometry: { type: "GeometryCollection", geometries },
-                            });
-                            handled = true;
-                        }
-                    }
-                }
-                if (handled) {
-                    // nothing
-                }
-                else if (picked.geometry.type === "Polygon" ||
-                    picked.geometry.type === "MultiPolygon") {
-                    setMask(picked, (fc) => {
-                        if (!fc) {
-                            return;
-                        }
-                        // leaflet doesn't repeat features every 360 degrees along longitude
-                        // so we clone it manually to the direction(s)
-                        // which could be displayed when auto-zoomed on the feature
-                        const features = [...fc.features];
-                        const bb = unwrapBbox(bbox(picked));
-                        const span = bb[2] - bb[0];
-                        if (bb[0] - span / 4 < -180) {
-                            features.push(...shiftPolyCollection(fc, -360).features);
-                        }
-                        if (bb[2] + span / 4 > 180) {
-                            features.push(...shiftPolyCollection(fc, 360).features);
-                        }
-                        setData(featureCollection(features));
-                    });
-                }
-                else if (picked.geometry.type === "LineString" ||
-                    picked.geometry.type === "MultiLineString") {
-                    setData(picked);
-                    break block; // no pin for (multi)linestrings
-                }
-                if (!showPolygonMarker && !picked.geometry.type.endsWith("Point")) {
-                    break block;
-                }
-                if (marker instanceof Function) {
-                    const m = marker(map, picked);
-                    if (m) {
-                        markers.push(m.addTo(map));
-                    }
-                }
-                else if (marker) {
-                    const pos = [picked.center[1], picked.center[0]];
-                    markers.push(typeof marker === "object"
-                        ? new L.Marker(pos, marker)
-                        : createMarker(pos).addTo(map));
-                }
-            }
-            if (showResultMarkers) {
-                for (const feature of markedFeatures ?? []) {
-                    if (feature === picked) {
-                        continue;
-                    }
-                    const pos = [
-                        feature.center[1],
-                        feature.center[0],
-                    ];
-                    let marker;
-                    if (showResultMarkers instanceof Function) {
-                        marker = showResultMarkers(map, feature);
-                        if (!marker) {
-                            continue;
-                        }
-                    }
-                    else {
-                        marker = (typeof showResultMarkers === "object"
-                            ? new L.Marker(pos, showResultMarkers)
-                            : createMarker(pos, true))
-                            .addTo(map)
-                            .bindTooltip(feature.place_type[0] === "reverse"
-                            ? feature.place_name
-                            : feature.place_name.replace(/,.*/, ""), {
-                            direction: "top",
-                        });
-                    }
-                    const element = marker.getElement();
-                    if (element) {
-                        element.addEventListener("click", (e) => {
-                            e.stopPropagation();
-                            eventHandler?.({ type: "markerClick", id: feature.id });
-                        });
-                        element.addEventListener("mouseenter", () => {
-                            eventHandler?.({ type: "markerMouseEnter", id: feature.id });
-                        });
-                        element.addEventListener("mouseleave", () => {
-                            eventHandler?.({ type: "markerMouseLeave", id: feature.id });
-                        });
-                        element.classList.toggle("marker-fuzzy", !!feature.matching_text);
-                    }
-                    markers.push(marker);
-                }
-            }
-        },
-        setSelectedMarker(index) {
-            if (selectedMarker) {
-                selectedMarker.getElement()?.classList.toggle("marker-selected", false);
-            }
-            selectedMarker = index > -1 ? markers[index] : undefined;
-            selectedMarker?.getElement()?.classList.toggle("marker-selected", true);
-        },
-        getCenterAndZoom() {
-            const c = map.getCenter();
-            return [map.getZoom(), c.lng, c.lat];
-        },
-    };
-}
-function shiftPolyCollection(featureCollection, distance) {
-    const cloned = clone(featureCollection);
-    for (const feature of cloned.features) {
-        if (feature.geometry.type == "MultiPolygon") {
-            for (const poly of feature.geometry.coordinates) {
-                shiftPolyCoords(poly, distance);
-            }
-        }
-        else {
-            shiftPolyCoords(feature.geometry.coordinates, distance);
-        }
-    }
-    return cloned;
-}
-function shiftPolyCoords(coordinates, distance) {
-    for (const ring of coordinates) {
-        for (const position of ring) {
-            position[0] += distance;
-        }
-    }
-}

package/svelte/leaflet.d.ts

@@ -1,131 +0,0 @@
-import * as L from "leaflet";
-import type { ControlOptions, DispatcherType, Feature } from "./types";
-export { createLeafletMapController } from "./leaflet-controller";
-type LeafletControlOptions = ControlOptions & L.ControlOptions & {
-    /**
-     * Marker to be added to the map at the location of the user-selected result using a default set of Marker options.
-     *
-     * - If `true` or `undefined` then a default marker will be used.\
-     * - If the value is [MarkerOptions](https://leafletjs.com/reference.html#marker-option) then the marker will be constructed using these options.
-     * - If the value is a function then it can create and configure custom [Marker](https://leafletjs.com/reference.html#marker),
-     *     add it to the [Map](https://leafletjs.com/reference.html#map) and return it.
-     *   Function accepts [Map](https://leafletjs.com/reference.html#map) and `Feature` as parameters.
-     *   Feature is `undefined` for the reverse location marker.
-     * - If `false` or `null` then no marker will be added to the map.
-     *
-     * Default value is `true`.
-     */
-    marker?: null | boolean | L.MarkerOptions | ((map: L.Map, feature?: Feature) => L.Marker | undefined | null);
-    /**
-     * Marker be added to the map at the location the geocoding results.
-     *
-     * - If `true` or `undefined` then a default marker will be used.
-     * - If the value is [MarkerOptions](https://leafletjs.com/reference.html#marker-option) then the marker will be constructed using these options.
-     * - If the value is a function then it can create and configure custom [Marker](https://leafletjs.com/reference.html#marker),
-     *     add it to the [Map](https://leafletjs.com/reference.html#map) and return it.
-     *   In this case the default pop-up won't be added to the marker.
-     *   Function accepts [Map](https://leafletjs.com/reference.html#map) and `Feature` as parameters.
-     * - If `false` or `null` then no marker will be added to the map.
-     *
-     * Default value is `true`.
-     */
-    showResultMarkers?: null | boolean | L.MarkerOptions | ((map: L.Map, feature: Feature) => L.Marker | undefined | null);
-    /**
-     * Animation to selected feature on the map.
-     *
-     * - If `false` or `null` then animating the map to a selected result is disabled.
-     * - If `true` or `undefined` then animating the map will use the default animation parameters.
-     * - If an [ZoomPanOptions](https://leafletjs.com/reference.html#zoom/pan-options)
-     *     ` & `[FitBoundsOptions](https://leafletjs.com/reference.html#fitbounds-options) then it will be passed as options
-     *     to the map [flyTo](https://leafletjs.com/reference.html#map-flyto)
-     *     or [fitBounds](https://leafletjs.com/reference.html#map-fitbounds) method providing control over the animation of the transition.
-     *
-     * Default value is `true`.
-     */
-    flyTo?: null | boolean | (L.ZoomPanOptions & L.FitBoundsOptions);
-    /**
-     * Style for the full feature geometry.
-     *
-     * - If `false` or `null` then no full geometry is drawn.
-     * - If `true` or `undefined` then default-styled full geometry is drawn.
-     * - If an [PathOptions](https://leafletjs.com/reference.html#path-option) then it will be used to style the full geometry.
-     * - If a function accepting a `Feature` and returning [PathOptions](https://leafletjs.com/reference.html#path-option)
-     *     then it must teturn the style and will be used to style the full geometry.
-     */
-    fullGeometryStyle?: null | boolean | L.PathOptions | L.StyleFunction;
-};
-type LeafletEvent<T> = {
-    type: T;
-    target: GeocodingControl;
-    sourceTarget: GeocodingControl;
-};
-type CustomEventMap = {
-    [T in keyof DispatcherType]: DispatcherType[T] & LeafletEvent<T>;
-};
-/**
- * Leaflet mixins https://leafletjs.com/reference.html#class
- * for TypeScript https://www.typescriptlang.org/docs/handbook/mixins.html
- * @internal
- */
-declare class EventedControl extends L.Control {
-}
-interface EventedControl extends L.Control {
-    on<T extends keyof CustomEventMap>(type: T, fn: (event: CustomEventMap[T]) => void, context?: unknown): this;
-    addEventListener<T extends keyof CustomEventMap>(type: T, fn: (event: CustomEventMap[T]) => void, context?: unknown): this;
-    once<T extends keyof CustomEventMap>(type: T, fn: (event: CustomEventMap[T]) => void, context?: unknown): this;
-    addOneTimeEventListener<T extends keyof CustomEventMap>(type: T, fn: (event: CustomEventMap[T]) => void, context?: unknown): this;
-    off<T extends keyof CustomEventMap>(type?: T, fn?: (event: CustomEventMap[T]) => void, context?: unknown): this;
-    off(eventMap?: {
-        [T in keyof CustomEventMap]?: (event: CustomEventMap[T]) => void;
-    }): this;
-    removeEventListener<T extends keyof CustomEventMap>(type?: T, fn?: (event: CustomEventMap[T]) => void, context?: unknown): this;
-    listens<T extends keyof CustomEventMap>(type: T, fn: (event: CustomEventMap[T]) => void, context?: unknown, propagate?: boolean): boolean;
-    fire(type: string, data?: unknown, propagate?: boolean): this;
-    addEventParent(obj: L.Evented): this;
-    removeEventParent(obj: L.Evented): this;
-    fireEvent(type: string, data?: unknown, propagate?: boolean): this;
-    hasEventListeners<T extends keyof CustomEventMap>(type: T): boolean;
-}
-export declare class GeocodingControl extends EventedControl {
-    #private;
-    constructor(options: LeafletControlOptions);
-    onAdd(map: L.Map): HTMLDivElement;
-    /**
-     * Update the control options.
-     *
-     * @param options options to update
-     */
-    setOptions(options: LeafletControlOptions): void;
-    /**
-     * Set the content of search input box.
-     *
-     * @param value text to set
-     * @param submit perform the search
-     */
-    setQuery(value: string, submit?: boolean): void;
-    /**
-     * Clear geocoding search results from the map.
-     */
-    clearMap(): void;
-    /**
-     * Clear search result list.
-     */
-    clearList(): void;
-    /**
-     * Set reverse geocoding mode.
-     *
-     * @param reverseActive reverse geocoding active
-     */
-    setReverseMode(reverseActive: boolean): void;
-    /**
-     * Focus the search input box.
-     *
-     * @param options [FocusOptions](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-     */
-    focus(options?: FocusOptions): void;
-    /**
-     * Blur the search input box.
-     */
-    blur(): void;
-    onRemove(): void;
-}

package/svelte/leaflet.js

@@ -1,116 +0,0 @@
-import * as L from "leaflet";
-import GeocodingControlComponent from "./GeocodingControl.svelte";
-import { createLeafletMapController } from "./leaflet-controller";
-export { createLeafletMapController } from "./leaflet-controller";
-/**
- * Leaflet mixins https://leafletjs.com/reference.html#class
- * for TypeScript https://www.typescriptlang.org/docs/handbook/mixins.html
- * @internal
- */
-// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
-class EventedControl extends L.Control {
-}
-L.Util.extend(EventedControl.prototype, L.Evented.prototype);
-export class GeocodingControl extends EventedControl {
-    #gc;
-    #options;
-    constructor(options) {
-        super(options);
-        this.#options = options;
-    }
-    onAdd(map) {
-        const div = document.createElement("div");
-        div.className = "leaflet-ctrl-geocoder";
-        L.DomEvent.disableClickPropagation(div);
-        L.DomEvent.disableScrollPropagation(div);
-        const { marker, showResultMarkers, flyTo, fullGeometryStyle, position, ...restOptions } = this.#options;
-        const flyToOptions = typeof flyTo === "boolean" ? {} : flyTo;
-        const mapController = createLeafletMapController(map, marker, showResultMarkers, flyToOptions, flyToOptions, fullGeometryStyle);
-        this.#gc = new GeocodingControlComponent({
-            target: div,
-            props: {
-                mapController,
-                flyTo: flyTo === undefined ? true : !!flyTo,
-                ...restOptions,
-            },
-        });
-        const eventNames = {
-            select: undefined,
-            pick: undefined,
-            featureslisted: undefined,
-            featuresmarked: undefined,
-            response: undefined,
-            optionsvisibilitychange: undefined,
-            reversetoggle: undefined,
-            querychange: undefined,
-        };
-        for (const eventName in eventNames) {
-            this.#gc.$on(eventName, (event) => this.fire(eventName, event.detail));
-        }
-        return div;
-    }
-    /**
-     * Update the control options.
-     *
-     * @param options options to update
-     */
-    setOptions(options) {
-        Object.assign(this.#options, options);
-        const { marker, showResultMarkers, flyTo, fullGeometryStyle, ...restOptions } = this.#options;
-        this.#gc?.$set(restOptions);
-    }
-    /**
-     * Set the content of search input box.
-     *
-     * @param value text to set
-     * @param submit perform the search
-     */
-    setQuery(value, submit = true) {
-        this.#gc?.setQuery(value, submit);
-    }
-    /**
-     * Clear geocoding search results from the map.
-     */
-    clearMap() {
-        this.#gc?.clearMap();
-    }
-    /**
-     * Clear search result list.
-     */
-    clearList() {
-        this.#gc?.clearList();
-    }
-    /**
-     * Set reverse geocoding mode.
-     *
-     * @param reverseActive reverse geocoding active
-     */
-    setReverseMode(reverseActive) {
-        this.#gc?.$set({ reverseActive });
-    }
-    /**
-     * Focus the search input box.
-     *
-     * @param options [FocusOptions](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-     */
-    focus(options) {
-        this.#gc?.focus(options);
-    }
-    /**
-     * Blur the search input box.
-     */
-    blur() {
-        this.#gc?.blur();
-    }
-    onRemove() {
-        this.#gc?.$destroy();
-    }
-}
-function createControl(...params) {
-    return new GeocodingControl(...params);
-}
-if (window.L &&
-    typeof window.L === "object" &&
-    typeof window.L.control === "function") {
-    window.L.control.maptilerGeocoding = createControl;
-}

package/svelte/maplibregl-controller.d.ts

@@ -1,19 +0,0 @@
-import type * as maplibregl from "maplibre-gl";
-import type { FillLayerSpecification, FitBoundsOptions, FlyToOptions, LineLayerSpecification, Map, Marker, MarkerOptions } from "maplibre-gl";
-import type { BBox, Position } from "./types";
-import type { Feature, MapEvent } from "./types.js";
-export type MapLibreGL = Pick<typeof maplibregl, "Marker" | "Popup">;
-export type FullGeometryStyle = {
-    fill: Pick<FillLayerSpecification, "layout" | "paint" | "filter">;
-    line: Pick<LineLayerSpecification, "layout" | "paint" | "filter">;
-};
-export declare function createMapLibreGlMapController(map: Map, maplibregl?: MapLibreGL | undefined, marker?: boolean | null | MarkerOptions | ((map: Map, feature?: Feature) => Marker | undefined | null), showResultMarkers?: boolean | null | MarkerOptions | ((map: Map, feature: Feature) => Marker | undefined | null), flyToOptions?: FlyToOptions | null, fitBoundsOptions?: FitBoundsOptions | null, fullGeometryStyle?: boolean | null | FullGeometryStyle): {
-    setEventHandler(handler: undefined | ((e: MapEvent) => void)): void;
-    flyTo(center: Position, zoom?: number): void;
-    fitBounds(bbox: BBox, padding: number, maxZoom?: number): void;
-    indicateReverse(reverse: boolean): void;
-    setReverseMarker(coordinates?: Position): void;
-    setFeatures(markedFeatures: Feature[] | undefined, picked: Feature | undefined, showPolygonMarker: boolean): void;
-    setSelectedMarker(index: number): void;
-    getCenterAndZoom(): [number, number, number];
-};