@openremote/or-map 1.8.0-snapshot.20250725120002 → 1.8.0-snapshot.20250728102340

package/lib/mapwidget.js

@@ -1,885 +1 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import manager, { DefaultColor4 } from "@openremote/core";
-import maplibregl, { GeolocateControl, Marker as MarkerGL, NavigationControl, } from "maplibre-gl";
-import MaplibreGeocoder from "@maplibre/maplibre-gl-geocoder";
-import "@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css";
-import { debounce } from "lodash";
-import { OrMapClickedEvent, OrMapGeocoderChangeEvent, OrMapLoadedEvent, OrMapLongPressEvent, } from "./index";
-import { getLatLngBounds, getLngLat } from "./util";
-import { isMapboxURL, transformMapboxUrl } from "./mapbox-url-utils";
-const mapboxJsStyles = require("mapbox.js/dist/mapbox.css");
-const maplibreGlStyles = require("maplibre-gl/dist/maplibre-gl.css");
-const maplibreGeoCoderStyles = require("@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css");
-// TODO: fix any type
-const metersToPixelsAtMaxZoom = (meters, latitude) => meters / 0.075 / Math.cos(latitude * Math.PI / 180);
-let pkey;
-export class MapWidget {
-    constructor(type, styleParent, mapContainer, showGeoCodingControl = false, showBoundaryBox = false, useZoomControls = true, showGeoJson = true) {
-        this._loaded = false;
-        this._markersJs = new Map();
-        this._markersGl = new Map();
-        this._geoJsonSources = [];
-        this._geoJsonLayers = new Map();
-        this._showGeoCodingControl = false;
-        this._showBoundaryBox = false;
-        this._useZoomControls = true;
-        this._showGeoJson = true;
-        this._clickHandlers = new Map();
-        this._type = type;
-        this._styleParent = styleParent;
-        this._mapContainer = mapContainer;
-        this._showGeoCodingControl = showGeoCodingControl;
-        this._showBoundaryBox = showBoundaryBox;
-        this._useZoomControls = useZoomControls;
-        this._showGeoJson = showGeoJson;
-    }
-    setCenter(center) {
-        this._center = getLngLat(center);
-        switch (this._type) {
-            case "RASTER" /* MapType.RASTER */:
-                if (this._mapJs) {
-                    const latLng = getLngLat(this._center) || (this._viewSettings ? getLngLat(this._viewSettings.center) : undefined);
-                    if (latLng) {
-                        this._mapJs.setView(latLng, undefined, { pan: { animate: false }, zoom: { animate: false } });
-                    }
-                }
-                break;
-            case "VECTOR" /* MapType.VECTOR */:
-                if (this._mapGl && this._center) {
-                    this._mapGl.setCenter(this._center);
-                }
-                break;
-        }
-        return this;
-    }
-    flyTo(coordinates, zoom) {
-        switch (this._type) {
-            case "RASTER" /* MapType.RASTER */:
-                if (this._mapJs) {
-                    // TODO implement fylTo
-                }
-                break;
-            case "VECTOR" /* MapType.VECTOR */:
-                if (!coordinates) {
-                    coordinates = this._center ? this._center : this._viewSettings ? this._viewSettings.center : undefined;
-                }
-                if (!zoom) {
-                    zoom = this._zoom ? this._zoom : this._viewSettings && this._viewSettings.zoom ? this._viewSettings.zoom : undefined;
-                }
-                if (this._mapGl) {
-                    // Only do flyTo if it has valid LngLat value
-                    if (coordinates) {
-                        this._mapGl.flyTo({
-                            center: coordinates,
-                            zoom: zoom
-                        });
-                    }
-                }
-                else {
-                    this._center = coordinates;
-                    this._zoom = zoom;
-                }
-                break;
-        }
-        return this;
-    }
-    resize() {
-        switch (this._type) {
-            case "RASTER" /* MapType.RASTER */:
-                if (this._mapJs) {
-                }
-                break;
-            case "VECTOR" /* MapType.VECTOR */:
-                if (this._mapGl) {
-                    this._mapGl.resize();
-                }
-                break;
-        }
-        return this;
-    }
-    setZoom(zoom) {
-        this._zoom = zoom;
-        switch (this._type) {
-            case "RASTER" /* MapType.RASTER */:
-                if (this._mapJs && this._zoom) {
-                    this._mapJs.setZoom(this._zoom, { animate: false });
-                }
-                break;
-            case "VECTOR" /* MapType.VECTOR */:
-                if (this._mapGl && this._zoom) {
-                    this._mapGl.setZoom(this._zoom);
-                }
-                break;
-        }
-        return this;
-    }
-    setControls(controls) {
-        this._controls = controls;
-        if (this._mapGl) {
-            if (this._controls) {
-                this._controls.forEach((control) => {
-                    if (Array.isArray(control)) {
-                        const controlAndPosition = control;
-                        this._mapGl.addControl(controlAndPosition[0], controlAndPosition[1]);
-                    }
-                    else {
-                        this._mapGl.addControl(control);
-                    }
-                });
-            }
-            else {
-                // Add zoom and rotation controls to the map
-                this._mapGl.addControl(new NavigationControl());
-            }
-        }
-        return this;
-    }
-    setGeoJson(geoJsonConfig) {
-        var _a;
-        this._geoJsonConfig = geoJsonConfig;
-        if (this._mapGl) {
-            if (this._geoJsonConfig) {
-                this.loadGeoJSON(this._geoJsonConfig);
-            }
-            else {
-                this.loadGeoJSON((_a = this._viewSettings) === null || _a === void 0 ? void 0 : _a.geoJson);
-            }
-        }
-        return this;
-    }
-    loadViewSettings() {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            let settingsResponse;
-            if (this._type === "RASTER" /* MapType.RASTER */) {
-                settingsResponse = yield manager.rest.api.MapResource.getSettingsJs();
-            }
-            else {
-                settingsResponse = yield manager.rest.api.MapResource.getSettings();
-            }
-            const settings = settingsResponse.data;
-            if (settings.override) {
-                return settings.override;
-            }
-            // Load options for current realm or fallback to default if exist
-            const realmName = manager.displayRealm || "default";
-            this._viewSettings = settings.options ? settings.options[realmName] ? settings.options[realmName] : settings.options.default : null;
-            if (this._viewSettings) {
-                // If Map was already present, so only ran during updates such as realm switches
-                if (this._mapGl) {
-                    this._mapGl.setMinZoom(this._viewSettings.minZoom);
-                    this._mapGl.setMaxZoom(this._viewSettings.maxZoom);
-                    if (this._viewSettings.bounds) {
-                        this._mapGl.setMaxBounds(this._viewSettings.bounds);
-                    }
-                    // Unload all GeoJSON that is present, and load new layers if present
-                    if (this._geoJsonConfig) {
-                        yield this.loadGeoJSON(this._geoJsonConfig);
-                    }
-                    else {
-                        yield this.loadGeoJSON((_a = this._viewSettings) === null || _a === void 0 ? void 0 : _a.geoJson);
-                    }
-                }
-                if (!this._center) {
-                    this.setCenter(this._viewSettings.center);
-                }
-                else {
-                    this.setCenter(this._center);
-                }
-            }
-            return settings;
-        });
-    }
-    load() {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            if (this._loaded) {
-                return;
-            }
-            if (this._type === "RASTER" /* MapType.RASTER */) {
-                // Add style to shadow root
-                const style = document.createElement("style");
-                style.id = "mapboxJsStyle";
-                style.textContent = mapboxJsStyles;
-                this._styleParent.appendChild(style);
-                const settings = yield this.loadViewSettings();
-                let options;
-                if (this._viewSettings) {
-                    options = {};
-                    // JS zoom is out compared to GL
-                    options.zoom = this._viewSettings.zoom ? this._viewSettings.zoom + 1 : undefined;
-                    if (this._useZoomControls) {
-                        options.maxZoom = this._viewSettings.maxZoom ? this._viewSettings.maxZoom - 1 : undefined;
-                        options.minZoom = this._viewSettings.minZoom ? this._viewSettings.minZoom + 1 : undefined;
-                    }
-                    options.boxZoom = this._viewSettings.boxZoom;
-                    // JS uses lat then lng unlike GL
-                    if (this._viewSettings.bounds) {
-                        options.maxBounds = getLatLngBounds(this._viewSettings.bounds);
-                    }
-                    if (this._viewSettings.center) {
-                        const lngLat = getLngLat(this._viewSettings.center);
-                        options.center = lngLat ? L.latLng(lngLat.lat, lngLat.lng) : undefined;
-                    }
-                    if (this._center) {
-                        const lngLat = getLngLat(this._center);
-                        options.center = lngLat ? L.latLng(lngLat.lat, lngLat.lng) : undefined;
-                    }
-                    if (this._zoom) {
-                        options.zoom = this._zoom + 1;
-                    }
-                }
-                this._mapJs = L.mapbox.map(this._mapContainer, settings, options);
-                this._mapJs.on("click", (e) => {
-                    this._onMapClick(e.latlng);
-                });
-                if (options && options.maxBounds) {
-                    const minZoom = this._mapJs.getBoundsZoom(options.maxBounds, true);
-                    if (!options.minZoom || options.minZoom < minZoom) {
-                        this._mapJs.setMinZoom(minZoom);
-                    }
-                }
-            }
-            else {
-                // Add style to shadow root
-                let style = document.createElement("style");
-                style.id = "maplibreGlStyle";
-                style.textContent = maplibreGlStyles;
-                this._styleParent.appendChild(style);
-                style = document.createElement("style");
-                style.id = "maplibreGeoCoderStyles";
-                style.textContent = maplibreGeoCoderStyles;
-                this._styleParent.appendChild(style);
-                const map = yield import(/* webpackChunkName: "maplibre-gl" */ "maplibre-gl");
-                const settings = yield this.loadViewSettings();
-                const options = {
-                    attributionControl: { compact: true },
-                    container: this._mapContainer,
-                    style: settings,
-                    transformRequest: (url, resourceType) => {
-                        if (!pkey) {
-                            pkey = new URL(url).searchParams.get("access_token") || '';
-                        }
-                        if (isMapboxURL(url)) {
-                            return transformMapboxUrl(url, pkey, resourceType);
-                        }
-                        // Cross-domain tile servers usually have the following headers specified "access-control-allow-methods	GET", "access-control-allow-origin *", "allow GET,HEAD". The "Access-Control-Request-Headers: Authorization" may not be set e.g. with Mapbox tile servers. The CORS preflight request (OPTION) will in this case fail if the "authorization" header is being requested cross-domain. The only headers allowed are so called "simple request" headers, see https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests.
-                        const headers = new URL(window.origin).hostname === new URL(url).hostname
-                            ? { Authorization: manager.getAuthorizationHeader() } : {};
-                        return {
-                            headers,
-                            url
-                        };
-                    }
-                };
-                if (this._viewSettings) {
-                    if (this._useZoomControls) {
-                        options.maxZoom = this._viewSettings.maxZoom;
-                        options.minZoom = this._viewSettings.minZoom;
-                    }
-                    if (this._viewSettings.bounds && !this._showBoundaryBox) {
-                        options.maxBounds = this._viewSettings.bounds;
-                    }
-                    options.boxZoom = this._viewSettings.boxZoom;
-                    options.zoom = this._viewSettings.zoom;
-                    options.center = this._viewSettings.center;
-                }
-                this._center = this._center || (this._viewSettings ? this._viewSettings.center : undefined);
-                options.center = this._center;
-                if (this._zoom) {
-                    options.zoom = this._zoom;
-                }
-                this._mapGl = new map.Map(options);
-                yield this.styleLoaded();
-                this._mapGl.on("click", (e) => {
-                    this._onMapClick(e.lngLat);
-                });
-                this._mapGl.on("dblclick", (e) => {
-                    this._onMapClick(e.lngLat, true);
-                });
-                if (this._showGeoCodingControl && this._viewSettings && this._viewSettings.geocodeUrl) {
-                    this._geocoder = new MaplibreGeocoder({ forwardGeocode: this._forwardGeocode.bind(this), reverseGeocode: this._reverseGeocode }, { maplibregl: maplibregl, showResultsWhileTyping: true });
-                    // Override the _onKeyDown function from MaplibreGeocoder which has a bug getting the value from the input element
-                    this._geocoder._onKeyDown = debounce((e) => {
-                        var ESC_KEY_CODE = 27, TAB_KEY_CODE = 9;
-                        if (e.keyCode === ESC_KEY_CODE && this._geocoder.options.clearAndBlurOnEsc) {
-                            this._geocoder._clear(e);
-                            return this._geocoder._inputEl.blur();
-                        }
-                        // if target has shadowRoot, then get the actual active element inside the shadowRoot
-                        var value = this._geocoder._inputEl.value || e.key;
-                        if (!value) {
-                            this._geocoder.fresh = true;
-                            // the user has removed all the text
-                            if (e.keyCode !== TAB_KEY_CODE)
-                                this._geocoder.clear(e);
-                            return (this._geocoder._clearEl.style.display = "none");
-                        }
-                        // TAB, ESC, LEFT, RIGHT, UP, DOWN
-                        if (e.metaKey ||
-                            [TAB_KEY_CODE, ESC_KEY_CODE, 37, 39, 38, 40].indexOf(e.keyCode) !== -1)
-                            return;
-                        // ENTER
-                        if (e.keyCode === 13) {
-                            if (!this._geocoder.options.showResultsWhileTyping) {
-                                if (!this._geocoder._typeahead.list.selectingListItem)
-                                    this._geocoder._geocode(value);
-                            }
-                            else {
-                                if (this._geocoder.options.showResultMarkers) {
-                                    this._geocoder._fitBoundsForMarkers();
-                                }
-                                this._geocoder._inputEl.value = this._geocoder._typeahead.query;
-                                this._geocoder.lastSelected = null;
-                                this._geocoder._typeahead.selected = null;
-                                return;
-                            }
-                        }
-                        if (value.length >= this._geocoder.options.minLength &&
-                            this._geocoder.options.showResultsWhileTyping) {
-                            this._geocoder._geocode(value);
-                        }
-                    }, 300);
-                    this._mapGl.addControl(this._geocoder, 'top-left');
-                    // There's no callback parameter in the options of the MaplibreGeocoder,
-                    // so this is how we get the selected result.
-                    this._geocoder._inputEl.addEventListener("change", () => {
-                        var selected = this._geocoder._typeahead.selected;
-                        this._onGeocodeChange(selected);
-                    });
-                }
-                // Add custom controls
-                if (this._controls) {
-                    this._controls.forEach((control) => {
-                        if (Array.isArray(control)) {
-                            const controlAndPosition = control;
-                            this._mapGl.addControl(controlAndPosition[0], controlAndPosition[1]);
-                        }
-                        else {
-                            this._mapGl.addControl(control);
-                        }
-                    });
-                }
-                else {
-                    // Add zoom and rotation controls to the map
-                    this._mapGl.addControl(new NavigationControl());
-                    // Add current location controls to the map
-                    this._mapGl.addControl(new GeolocateControl({
-                        positionOptions: {
-                            enableHighAccuracy: true
-                        },
-                        showAccuracyCircle: true,
-                        showUserLocation: true
-                    }));
-                }
-                // Unload all GeoJSON that is present, and load new layers if present
-                if (this._geoJsonConfig) {
-                    yield this.loadGeoJSON(this._geoJsonConfig);
-                }
-                else {
-                    yield this.loadGeoJSON((_a = this._viewSettings) === null || _a === void 0 ? void 0 : _a.geoJson);
-                }
-                this._initLongPressEvent();
-            }
-            this._mapContainer.dispatchEvent(new OrMapLoadedEvent());
-            this._loaded = true;
-            this.createBoundaryBox();
-        });
-    }
-    styleLoaded() {
-        return new Promise(resolve => {
-            if (this._mapGl) {
-                this._mapGl.once('style.load', () => {
-                    resolve();
-                });
-            }
-        });
-    }
-    // Clean up of internal resources associated with the map.
-    // Normally used during disconnectedCallback
-    unload() {
-        if (this._mapGl) {
-            this._mapGl.remove();
-            this._mapGl = undefined;
-        }
-        if (this._mapJs) {
-            this._mapJs.remove();
-            this._mapJs = undefined;
-        }
-    }
-    _onMapClick(lngLat, doubleClicked = false) {
-        this._mapContainer.dispatchEvent(new OrMapClickedEvent(lngLat, doubleClicked));
-    }
-    loadGeoJSON(geoJsonConfig) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // Remove old layers
-            if (this._geoJsonLayers.size > 0) {
-                this._geoJsonLayers.forEach((layer, layerId) => this._mapGl.removeLayer(layerId));
-                this._geoJsonLayers = new Map();
-            }
-            // Remove old sources
-            if (this._geoJsonSources.length > 0) {
-                this._geoJsonSources.forEach((sourceId) => this._mapGl.removeSource(sourceId));
-                this._geoJsonSources = [];
-            }
-            // Add new ones if present
-            if (this._showGeoJson && geoJsonConfig) {
-                // If array of features (most of the GeoJSONs use this)
-                if (geoJsonConfig.source.type == "FeatureCollection") {
-                    const groupedSources = this.groupSourcesByGeometryType(geoJsonConfig.source);
-                    groupedSources === null || groupedSources === void 0 ? void 0 : groupedSources.forEach((features, type) => {
-                        const newSource = {
-                            type: "geojson",
-                            data: {
-                                type: "FeatureCollection",
-                                features: features
-                            }
-                        };
-                        const sourceInfo = this.addGeoJSONSource(newSource);
-                        if (sourceInfo) {
-                            this.addGeoJSONLayer(type, sourceInfo.sourceId);
-                        }
-                    });
-                    // Or only 1 feature is added
-                }
-                else if (geoJsonConfig.source.type == "Feature") {
-                    const sourceInfo = this.addGeoJSONSource(geoJsonConfig.source);
-                    if (sourceInfo) {
-                        this.addGeoJSONLayer(sourceInfo.source.type, sourceInfo.sourceId);
-                    }
-                }
-                else {
-                    console.error("Could not create layer since source type is neither 'FeatureCollection' nor 'Feature'.");
-                }
-            }
-        });
-    }
-    groupSourcesByGeometryType(sources) {
-        const groupedSources = new Map();
-        sources.features.forEach((feature) => {
-            let sources = groupedSources.get(feature.geometry.type);
-            if (sources == undefined) {
-                sources = [];
-            }
-            sources.push(feature);
-            groupedSources.set(feature.geometry.type, sources);
-        });
-        return groupedSources;
-    }
-    addGeoJSONSource(source) {
-        if (!this._mapGl) {
-            console.error("mapGl instance not found!");
-            return;
-        }
-        const id = Date.now() + "-" + (this._geoJsonSources.length + 1);
-        this._mapGl.addSource(id, source);
-        this._geoJsonSources.push(id);
-        return {
-            source: source,
-            sourceId: id
-        };
-    }
-    addGeoJSONLayer(typeString, sourceId) {
-        if (!this._mapGl) {
-            console.error("mapGl instance not found!");
-            return;
-        }
-        const type = typeString;
-        const layerId = sourceId + "-" + type;
-        // If layer is not added yet
-        if (this._geoJsonLayers.get(layerId) == undefined) {
-            // Get realm color by getting value from CSS
-            let realmColor = getComputedStyle(this._mapContainer).getPropertyValue('--or-app-color4');
-            if (realmColor == undefined || realmColor.length == 0) {
-                realmColor = DefaultColor4;
-            }
-            let layer = {
-                id: layerId,
-                source: sourceId
-            };
-            // Set styling based on type
-            switch (type) {
-                case "Point":
-                case "MultiPoint": {
-                    layer.type = "circle";
-                    layer.paint = {
-                        'circle-radius': 12,
-                        'circle-color': realmColor
-                    };
-                    this._geoJsonLayers.set(layerId, layer);
-                    this._mapGl.addLayer(layer);
-                    break;
-                }
-                case "LineString":
-                case "MultiLineString": {
-                    layer.type = "line";
-                    layer.paint = {
-                        'line-color': realmColor,
-                        'line-width': 4
-                    };
-                    this._geoJsonLayers.set(layerId, layer);
-                    this._mapGl.addLayer(layer);
-                    break;
-                }
-                case "Polygon":
-                case "MultiPolygon": {
-                    layer.type = "fill";
-                    layer.paint = {
-                        'fill-color': realmColor,
-                        'fill-opacity': 0.3
-                    };
-                    this._geoJsonLayers.set(layerId, layer);
-                    this._mapGl.addLayer(layer);
-                    // Add extra layer with outline
-                    const outlineId = layerId + "-outline";
-                    const outlineLayer = {
-                        id: outlineId,
-                        source: sourceId,
-                        type: "line",
-                        paint: {
-                            'line-color': realmColor,
-                            'line-width': 2
-                        },
-                    };
-                    this._geoJsonLayers.set(outlineId, outlineLayer);
-                    this._mapGl.addLayer(outlineLayer);
-                    break;
-                }
-                case "GeometryCollection": {
-                    console.error("GeometryCollection GeoJSON is not implemented yet!");
-                    return;
-                }
-            }
-        }
-    }
-    addMarker(marker) {
-        if (marker.hasPosition()) {
-            this._updateMarkerElement(marker, true);
-        }
-    }
-    removeMarker(marker) {
-        this._removeMarkerRadius(marker);
-        this._updateMarkerElement(marker, false);
-    }
-    onMarkerChanged(marker, prop) {
-        if (!this._loaded) {
-            return;
-        }
-        switch (prop) {
-            case "lat":
-            case "lng":
-            case "radius":
-                if (marker.hasPosition()) {
-                    if (marker._actualMarkerElement) {
-                        this._updateMarkerPosition(marker);
-                    }
-                    else {
-                        this._updateMarkerElement(marker, true);
-                    }
-                }
-                else if (marker._actualMarkerElement) {
-                    this._updateMarkerElement(marker, false);
-                }
-                break;
-        }
-    }
-    _updateMarkerPosition(marker) {
-        switch (this._type) {
-            case "RASTER" /* MapType.RASTER */:
-                const m = this._markersJs.get(marker);
-                if (m) {
-                    m.setLatLng([marker.lat, marker.lng]);
-                }
-                break;
-            case "VECTOR" /* MapType.VECTOR */:
-                const mGl = this._markersGl.get(marker);
-                if (mGl) {
-                    mGl.setLngLat([marker.lng, marker.lat]);
-                }
-                break;
-        }
-        this._createMarkerRadius(marker);
-    }
-    _updateMarkerElement(marker, doAdd) {
-        switch (this._type) {
-            case "RASTER" /* MapType.RASTER */:
-                let m = this._markersJs.get(marker);
-                if (m) {
-                    this._removeMarkerClickHandler(marker, marker.markerContainer);
-                    marker._actualMarkerElement = undefined;
-                    m.removeFrom(this._mapJs);
-                    this._markersJs.delete(marker);
-                }
-                if (doAdd) {
-                    const elem = marker._createMarkerElement();
-                    if (elem) {
-                        const icon = L.divIcon({ html: elem.outerHTML, className: "or-marker-raster" });
-                        m = L.marker([marker.lat, marker.lng], { icon: icon, clickable: marker.interactive });
-                        m.addTo(this._mapJs);
-                        marker._actualMarkerElement = m.getElement() ? m.getElement().firstElementChild : undefined;
-                        if (marker.interactive) {
-                            this._addMarkerClickHandler(marker, marker.markerContainer);
-                        }
-                        this._markersJs.set(marker, m);
-                    }
-                    if (marker.radius) {
-                        this._createMarkerRadius(marker);
-                    }
-                }
-                break;
-            case "VECTOR" /* MapType.VECTOR */:
-                let mGl = this._markersGl.get(marker);
-                if (mGl) {
-                    marker._actualMarkerElement = undefined;
-                    this._removeMarkerClickHandler(marker, mGl.getElement());
-                    mGl.remove();
-                    this._markersGl.delete(marker);
-                }
-                if (doAdd) {
-                    const elem = marker._createMarkerElement();
-                    if (elem) {
-                        mGl = new MarkerGL({
-                            element: elem,
-                            anchor: "top-left"
-                        })
-                            .setLngLat([marker.lng, marker.lat])
-                            .addTo(this._mapGl);
-                        this._markersGl.set(marker, mGl);
-                        marker._actualMarkerElement = mGl.getElement();
-                        if (marker.interactive) {
-                            this._addMarkerClickHandler(marker, mGl.getElement());
-                        }
-                    }
-                    if (marker.radius) {
-                        this._createMarkerRadius(marker);
-                    }
-                }
-                break;
-        }
-    }
-    _removeMarkerRadius(marker) {
-        if (this._mapGl && this._loaded && marker.radius && marker.lat && marker.lng) {
-            if (this._mapGl.getSource('circleData')) {
-                this._mapGl.removeLayer('marker-radius-circle');
-                this._mapGl.removeSource('circleData');
-            }
-        }
-    }
-    _createMarkerRadius(marker) {
-        if (this._mapGl && this._loaded && marker.radius && marker.lat && marker.lng) {
-            this._removeMarkerRadius(marker);
-            this._mapGl.addSource('circleData', {
-                type: 'geojson',
-                data: {
-                    type: 'FeatureCollection',
-                    features: [{
-                            type: "Feature",
-                            geometry: {
-                                "type": "Point",
-                                "coordinates": [marker.lng, marker.lat]
-                            },
-                            properties: {
-                                "title": "You Found Me",
-                            }
-                        }]
-                }
-            });
-            this._mapGl.addLayer({
-                "id": "marker-radius-circle",
-                "type": "circle",
-                "source": "circleData",
-                "paint": {
-                    "circle-radius": [
-                        "interpolate",
-                        ["linear"],
-                        ["zoom"],
-                        0, 0,
-                        20, metersToPixelsAtMaxZoom(marker.radius, marker.lat)
-                    ],
-                    "circle-color": "red",
-                    "circle-opacity": 0.3
-                }
-            });
-        }
-    }
-    createBoundaryBox(boundsArray = []) {
-        var _a, _b;
-        if (this._mapGl && this._loaded && this._showBoundaryBox && ((_a = this._viewSettings) === null || _a === void 0 ? void 0 : _a.bounds)) {
-            if (this._mapGl.getSource('bounds')) {
-                this._mapGl.removeLayer('bounds');
-                this._mapGl.removeSource('bounds');
-            }
-            if (boundsArray.length !== 4) {
-                boundsArray = (_b = this._viewSettings) === null || _b === void 0 ? void 0 : _b.bounds.toString().split(",");
-            }
-            var req = [
-                [
-                    [boundsArray[0], boundsArray[3]],
-                    [boundsArray[2], boundsArray[3]],
-                    [boundsArray[2], boundsArray[1]],
-                    [boundsArray[0], boundsArray[1]],
-                    [boundsArray[0], boundsArray[3]]
-                ]
-            ];
-            this._mapGl.fitBounds([
-                parseFloat(boundsArray[0]) + .01,
-                parseFloat(boundsArray[1]) - .01,
-                parseFloat(boundsArray[2]) - .01,
-                parseFloat(boundsArray[3]) + .01,
-            ]);
-            this._mapGl.addSource('bounds', {
-                'type': 'geojson',
-                'data': {
-                    'type': 'Feature',
-                    'properties': {},
-                    'geometry': {
-                        'type': 'Polygon',
-                        // @ts-ignore
-                        'coordinates': req
-                    }
-                }
-            });
-            this._mapGl.addLayer({
-                'id': 'bounds',
-                'type': 'fill',
-                'source': 'bounds',
-                'paint': {
-                    'fill-color': '#FF0000',
-                    'fill-opacity': .4
-                }
-            });
-        }
-    }
-    _addMarkerClickHandler(marker, elem) {
-        if (elem) {
-            const handler = (ev) => {
-                ev.stopPropagation();
-                marker._onClick(ev);
-            };
-            this._clickHandlers.set(marker, handler);
-            elem.addEventListener("click", handler);
-        }
-    }
-    _removeMarkerClickHandler(marker, elem) {
-        const handler = this._clickHandlers.get(marker);
-        if (handler && elem) {
-            elem.removeEventListener("click", handler);
-            this._clickHandlers.delete(marker);
-        }
-    }
-    _forwardGeocode(config) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const features = [];
-            try {
-                let request = this._viewSettings.geocodeUrl + '/search?q=' + config.query + '&format=geojson&polygon_geojson=1&addressdetails=1';
-                const response = yield fetch(request);
-                const geojson = yield response.json();
-                for (let feature of geojson.features) {
-                    let center = [feature.bbox[0] + (feature.bbox[2] - feature.bbox[0]) / 2, feature.bbox[1] + (feature.bbox[3] - feature.bbox[1]) / 2];
-                    let point = {
-                        type: 'Feature',
-                        geometry: {
-                            type: 'Point',
-                            coordinates: center
-                        },
-                        place_name: feature.properties.display_name,
-                        properties: feature.properties,
-                        text: feature.properties.display_name,
-                        place_type: ['place'],
-                        center: center
-                    };
-                    features.push(point);
-                }
-            }
-            catch (e) {
-                console.error(`Failed to forwardGeocode with error: ${e}`);
-            }
-            return {
-                features: features
-            };
-        });
-    }
-    _reverseGeocode(config) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const features = [];
-            try {
-                let request = this._viewSettings.geocodeUrl + '/reverse?lat=' + config.lat + '&lon=' + config.lon + '&format=geojson&polygon_geojson=1&addressdetails=1';
-                const response = yield fetch(request);
-                const geojson = yield response.json();
-                for (let feature of geojson.features) {
-                    let center = [feature.bbox[0] + (feature.bbox[2] - feature.bbox[0]) / 2, feature.bbox[1] + (feature.bbox[3] - feature.bbox[1]) / 2];
-                    let point = {
-                        type: 'Feature',
-                        geometry: {
-                            type: 'Point',
-                            coordinates: center
-                        },
-                        place_name: feature.properties.display_name,
-                        properties: feature.properties,
-                        text: feature.properties.display_name,
-                        place_type: ['place'],
-                        center: center
-                    };
-                    features.push(point);
-                }
-            }
-            catch (e) {
-                console.error(`Failed to reverseGeocode with error: ${e}`);
-            }
-            return {
-                features: features
-            };
-        });
-    }
-    _initLongPressEvent() {
-        if (this._mapGl) {
-            let pressTimeout;
-            let pos;
-            let clearTimeoutFunc = () => { if (pressTimeout)
-                clearTimeout(pressTimeout); pressTimeout = null; };
-            this._mapGl.on('touchstart', (e) => {
-                if (e.originalEvent.touches.length > 1) {
-                    return;
-                }
-                pos = e.lngLat;
-                pressTimeout = setTimeout(() => {
-                    this._onLongPress(pos);
-                }, 500);
-            });
-            this._mapGl.on('mousedown', (e) => {
-                if (!pressTimeout) {
-                    pos = e.lngLat;
-                    pressTimeout = setTimeout(() => {
-                        this._onLongPress(pos);
-                        pressTimeout = null;
-                    }, 500);
-                }
-            });
-            this._mapGl.on('dragstart', clearTimeoutFunc);
-            this._mapGl.on('mouseup', clearTimeoutFunc);
-            this._mapGl.on('touchend', clearTimeoutFunc);
-            this._mapGl.on('touchcancel', clearTimeoutFunc);
-            this._mapGl.on('touchmove', clearTimeoutFunc);
-            this._mapGl.on('moveend', clearTimeoutFunc);
-            this._mapGl.on('gesturestart', clearTimeoutFunc);
-            this._mapGl.on('gesturechange', clearTimeoutFunc);
-            this._mapGl.on('gestureend', clearTimeoutFunc);
-        }
-    }
-    ;
-    _onLongPress(lngLat) {
-        this._mapContainer.dispatchEvent(new OrMapLongPressEvent(lngLat));
-    }
-    _onGeocodeChange(geocode) {
-        this._mapContainer.dispatchEvent(new OrMapGeocoderChangeEvent(geocode));
-    }
-}
-//# sourceMappingURL=mapwidget.js.map
+let pkey;var __awaiter=this&&this.__awaiter||function(e,t,o,i){return new(o||(o=Promise))(function(s,r){function a(e){try{l(i.next(e))}catch(e){r(e)}}function n(e){try{l(i.throw(e))}catch(e){r(e)}}function l(e){var t;e.done?s(e.value):((t=e.value)instanceof o?t:new o(function(e){e(t)})).then(a,n)}l((i=i.apply(e,t||[])).next())})};import e,{DefaultColor4 as t}from"@openremote/core";import o,{GeolocateControl as i,Marker as s,NavigationControl as r}from"maplibre-gl";import a from"@maplibre/maplibre-gl-geocoder";import"@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css";import{debounce as n}from"lodash";import{OrMapClickedEvent as l,OrMapGeocoderChangeEvent as h,OrMapLoadedEvent as d,OrMapLongPressEvent as _}from"./index";import{getLatLngBounds as c,getLngLat as m}from"./util";import{isMapboxURL as p,transformMapboxUrl as u}from"./mapbox-url-utils";let mapboxJsStyles=require("mapbox.js/dist/mapbox.css"),maplibreGlStyles=require("maplibre-gl/dist/maplibre-gl.css"),maplibreGeoCoderStyles=require("@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css"),metersToPixelsAtMaxZoom=(e,t)=>e/.075/Math.cos(t*Math.PI/180);export class MapWidget{constructor(e,t,o,i=!1,s=!1,r=!0,a=!0){this._loaded=!1,this._markersJs=new Map,this._markersGl=new Map,this._geoJsonSources=[],this._geoJsonLayers=new Map,this._showGeoCodingControl=!1,this._showBoundaryBox=!1,this._useZoomControls=!0,this._showGeoJson=!0,this._clickHandlers=new Map,this._type=e,this._styleParent=t,this._mapContainer=o,this._showGeoCodingControl=i,this._showBoundaryBox=s,this._useZoomControls=r,this._showGeoJson=a}setCenter(e){switch(this._center=m(e),this._type){case"RASTER":if(this._mapJs){let e=m(this._center)||(this._viewSettings?m(this._viewSettings.center):void 0);e&&this._mapJs.setView(e,void 0,{pan:{animate:!1},zoom:{animate:!1}})}break;case"VECTOR":this._mapGl&&this._center&&this._mapGl.setCenter(this._center)}return this}flyTo(e,t){switch(this._type){case"RASTER":this._mapJs;break;case"VECTOR":e||(e=this._center?this._center:this._viewSettings?this._viewSettings.center:void 0),t||(t=this._zoom?this._zoom:this._viewSettings&&this._viewSettings.zoom?this._viewSettings.zoom:void 0),this._mapGl?e&&this._mapGl.flyTo({center:e,zoom:t}):(this._center=e,this._zoom=t)}return this}resize(){switch(this._type){case"RASTER":this._mapJs;break;case"VECTOR":this._mapGl&&this._mapGl.resize()}return this}setZoom(e){switch(this._zoom=e,this._type){case"RASTER":this._mapJs&&this._zoom&&this._mapJs.setZoom(this._zoom,{animate:!1});break;case"VECTOR":this._mapGl&&this._zoom&&this._mapGl.setZoom(this._zoom)}return this}setControls(e){return this._controls=e,this._mapGl&&(this._controls?this._controls.forEach(e=>{Array.isArray(e)?this._mapGl.addControl(e[0],e[1]):this._mapGl.addControl(e)}):this._mapGl.addControl(new r)),this}setGeoJson(e){var t;return this._geoJsonConfig=e,this._mapGl&&(this._geoJsonConfig?this.loadGeoJSON(this._geoJsonConfig):this.loadGeoJSON(null==(t=this._viewSettings)?void 0:t.geoJson)),this}loadViewSettings(){return __awaiter(this,void 0,void 0,function*(){var t;let o=("RASTER"===this._type?yield e.rest.api.MapResource.getSettingsJs():yield e.rest.api.MapResource.getSettings()).data;if(o.override)return o.override;let i=e.displayRealm||"default";return this._viewSettings=o.options?o.options[i]?o.options[i]:o.options.default:null,this._viewSettings&&(this._mapGl&&(this._mapGl.setMinZoom(this._viewSettings.minZoom),this._mapGl.setMaxZoom(this._viewSettings.maxZoom),this._viewSettings.bounds&&this._mapGl.setMaxBounds(this._viewSettings.bounds),this._geoJsonConfig?yield this.loadGeoJSON(this._geoJsonConfig):yield this.loadGeoJSON(null==(t=this._viewSettings)?void 0:t.geoJson)),this._center?this.setCenter(this._center):this.setCenter(this._viewSettings.center)),o})}load(){return __awaiter(this,void 0,void 0,function*(){var t;if(!this._loaded){if("RASTER"===this._type){let e,t=document.createElement("style");t.id="mapboxJsStyle",t.textContent=mapboxJsStyles,this._styleParent.appendChild(t);let o=yield this.loadViewSettings();if(this._viewSettings){if((e={}).zoom=this._viewSettings.zoom?this._viewSettings.zoom+1:void 0,this._useZoomControls&&(e.maxZoom=this._viewSettings.maxZoom?this._viewSettings.maxZoom-1:void 0,e.minZoom=this._viewSettings.minZoom?this._viewSettings.minZoom+1:void 0),e.boxZoom=this._viewSettings.boxZoom,this._viewSettings.bounds&&(e.maxBounds=c(this._viewSettings.bounds)),this._viewSettings.center){let t=m(this._viewSettings.center);e.center=t?L.latLng(t.lat,t.lng):void 0}if(this._center){let t=m(this._center);e.center=t?L.latLng(t.lat,t.lng):void 0}this._zoom&&(e.zoom=this._zoom+1)}if(this._mapJs=L.mapbox.map(this._mapContainer,o,e),this._mapJs.on("click",e=>{this._onMapClick(e.latlng)}),e&&e.maxBounds){let t=this._mapJs.getBoundsZoom(e.maxBounds,!0);(!e.minZoom||e.minZoom<t)&&this._mapJs.setMinZoom(t)}}else{let s=document.createElement("style");s.id="maplibreGlStyle",s.textContent=maplibreGlStyles,this._styleParent.appendChild(s),(s=document.createElement("style")).id="maplibreGeoCoderStyles",s.textContent=maplibreGeoCoderStyles,this._styleParent.appendChild(s);let l=yield import("maplibre-gl"),h=yield this.loadViewSettings(),d={attributionControl:{compact:!0},container:this._mapContainer,style:h,transformRequest:(t,o)=>(pkey||(pkey=new URL(t).searchParams.get("access_token")||""),p(t))?u(t,pkey,o):{headers:new URL(window.origin).hostname===new URL(t).hostname?{Authorization:e.getAuthorizationHeader()}:{},url:t}};this._viewSettings&&(this._useZoomControls&&(d.maxZoom=this._viewSettings.maxZoom,d.minZoom=this._viewSettings.minZoom),this._viewSettings.bounds&&!this._showBoundaryBox&&(d.maxBounds=this._viewSettings.bounds),d.boxZoom=this._viewSettings.boxZoom,d.zoom=this._viewSettings.zoom,d.center=this._viewSettings.center),this._center=this._center||(this._viewSettings?this._viewSettings.center:void 0),d.center=this._center,this._zoom&&(d.zoom=this._zoom),this._mapGl=new l.Map(d),yield this.styleLoaded(),this._mapGl.on("click",e=>{this._onMapClick(e.lngLat)}),this._mapGl.on("dblclick",e=>{this._onMapClick(e.lngLat,!0)}),this._showGeoCodingControl&&this._viewSettings&&this._viewSettings.geocodeUrl&&(this._geocoder=new a({forwardGeocode:this._forwardGeocode.bind(this),reverseGeocode:this._reverseGeocode},{maplibregl:o,showResultsWhileTyping:!0}),this._geocoder._onKeyDown=n(e=>{if(27===e.keyCode&&this._geocoder.options.clearAndBlurOnEsc)return this._geocoder._clear(e),this._geocoder._inputEl.blur();var t=this._geocoder._inputEl.value||e.key;if(!t)return this._geocoder.fresh=!0,9!==e.keyCode&&this._geocoder.clear(e),this._geocoder._clearEl.style.display="none";if(!e.metaKey&&-1===[9,27,37,39,38,40].indexOf(e.keyCode)){if(13===e.keyCode)if(this._geocoder.options.showResultsWhileTyping){this._geocoder.options.showResultMarkers&&this._geocoder._fitBoundsForMarkers(),this._geocoder._inputEl.value=this._geocoder._typeahead.query,this._geocoder.lastSelected=null,this._geocoder._typeahead.selected=null;return}else this._geocoder._typeahead.list.selectingListItem||this._geocoder._geocode(t);t.length>=this._geocoder.options.minLength&&this._geocoder.options.showResultsWhileTyping&&this._geocoder._geocode(t)}},300),this._mapGl.addControl(this._geocoder,"top-left"),this._geocoder._inputEl.addEventListener("change",()=>{var e=this._geocoder._typeahead.selected;this._onGeocodeChange(e)})),this._controls?this._controls.forEach(e=>{Array.isArray(e)?this._mapGl.addControl(e[0],e[1]):this._mapGl.addControl(e)}):(this._mapGl.addControl(new r),this._mapGl.addControl(new i({positionOptions:{enableHighAccuracy:!0},showAccuracyCircle:!0,showUserLocation:!0}))),this._geoJsonConfig?yield this.loadGeoJSON(this._geoJsonConfig):yield this.loadGeoJSON(null==(t=this._viewSettings)?void 0:t.geoJson),this._initLongPressEvent()}this._mapContainer.dispatchEvent(new d),this._loaded=!0,this.createBoundaryBox()}})}styleLoaded(){return new Promise(e=>{this._mapGl&&this._mapGl.once("style.load",()=>{e()})})}unload(){this._mapGl&&(this._mapGl.remove(),this._mapGl=void 0),this._mapJs&&(this._mapJs.remove(),this._mapJs=void 0)}_onMapClick(e,t=!1){this._mapContainer.dispatchEvent(new l(e,t))}loadGeoJSON(e){return __awaiter(this,void 0,void 0,function*(){if(this._geoJsonLayers.size>0&&(this._geoJsonLayers.forEach((e,t)=>this._mapGl.removeLayer(t)),this._geoJsonLayers=new Map),this._geoJsonSources.length>0&&(this._geoJsonSources.forEach(e=>this._mapGl.removeSource(e)),this._geoJsonSources=[]),this._showGeoJson&&e)if("FeatureCollection"==e.source.type){let t=this.groupSourcesByGeometryType(e.source);null==t||t.forEach((e,t)=>{let o=this.addGeoJSONSource({type:"geojson",data:{type:"FeatureCollection",features:e}});o&&this.addGeoJSONLayer(t,o.sourceId)})}else if("Feature"==e.source.type){let t=this.addGeoJSONSource(e.source);t&&this.addGeoJSONLayer(t.source.type,t.sourceId)}else console.error("Could not create layer since source type is neither 'FeatureCollection' nor 'Feature'.")})}groupSourcesByGeometryType(e){let t=new Map;return e.features.forEach(e=>{let o=t.get(e.geometry.type);void 0==o&&(o=[]),o.push(e),t.set(e.geometry.type,o)}),t}addGeoJSONSource(e){if(!this._mapGl)return void console.error("mapGl instance not found!");let t=Date.now()+"-"+(this._geoJsonSources.length+1);return this._mapGl.addSource(t,e),this._geoJsonSources.push(t),{source:e,sourceId:t}}addGeoJSONLayer(e,o){if(!this._mapGl)return void console.error("mapGl instance not found!");let i=o+"-"+e;if(void 0==this._geoJsonLayers.get(i)){let s=getComputedStyle(this._mapContainer).getPropertyValue("--or-app-color4");(void 0==s||0==s.length)&&(s=t);let r={id:i,source:o};switch(e){case"Point":case"MultiPoint":r.type="circle",r.paint={"circle-radius":12,"circle-color":s},this._geoJsonLayers.set(i,r),this._mapGl.addLayer(r);break;case"LineString":case"MultiLineString":r.type="line",r.paint={"line-color":s,"line-width":4},this._geoJsonLayers.set(i,r),this._mapGl.addLayer(r);break;case"Polygon":case"MultiPolygon":{r.type="fill",r.paint={"fill-color":s,"fill-opacity":.3},this._geoJsonLayers.set(i,r),this._mapGl.addLayer(r);let e=i+"-outline",t={id:e,source:o,type:"line",paint:{"line-color":s,"line-width":2}};this._geoJsonLayers.set(e,t),this._mapGl.addLayer(t);break}case"GeometryCollection":return void console.error("GeometryCollection GeoJSON is not implemented yet!")}}}addMarker(e){e.hasPosition()&&this._updateMarkerElement(e,!0)}removeMarker(e){this._removeMarkerRadius(e),this._updateMarkerElement(e,!1)}onMarkerChanged(e,t){if(this._loaded)switch(t){case"lat":case"lng":case"radius":e.hasPosition()?e._actualMarkerElement?this._updateMarkerPosition(e):this._updateMarkerElement(e,!0):e._actualMarkerElement&&this._updateMarkerElement(e,!1)}}_updateMarkerPosition(e){switch(this._type){case"RASTER":let t=this._markersJs.get(e);t&&t.setLatLng([e.lat,e.lng]);break;case"VECTOR":let o=this._markersGl.get(e);o&&o.setLngLat([e.lng,e.lat])}this._createMarkerRadius(e)}_updateMarkerElement(e,t){switch(this._type){case"RASTER":let o=this._markersJs.get(e);if(o&&(this._removeMarkerClickHandler(e,e.markerContainer),e._actualMarkerElement=void 0,o.removeFrom(this._mapJs),this._markersJs.delete(e)),t){let t=e._createMarkerElement();if(t){let i=L.divIcon({html:t.outerHTML,className:"or-marker-raster"});(o=L.marker([e.lat,e.lng],{icon:i,clickable:e.interactive})).addTo(this._mapJs),e._actualMarkerElement=o.getElement()?o.getElement().firstElementChild:void 0,e.interactive&&this._addMarkerClickHandler(e,e.markerContainer),this._markersJs.set(e,o)}e.radius&&this._createMarkerRadius(e)}break;case"VECTOR":let i=this._markersGl.get(e);if(i&&(e._actualMarkerElement=void 0,this._removeMarkerClickHandler(e,i.getElement()),i.remove(),this._markersGl.delete(e)),t){let t=e._createMarkerElement();t&&(i=new s({element:t,anchor:"top-left"}).setLngLat([e.lng,e.lat]).addTo(this._mapGl),this._markersGl.set(e,i),e._actualMarkerElement=i.getElement(),e.interactive&&this._addMarkerClickHandler(e,i.getElement())),e.radius&&this._createMarkerRadius(e)}}}_removeMarkerRadius(e){this._mapGl&&this._loaded&&e.radius&&e.lat&&e.lng&&this._mapGl.getSource("circleData")&&(this._mapGl.removeLayer("marker-radius-circle"),this._mapGl.removeSource("circleData"))}_createMarkerRadius(e){this._mapGl&&this._loaded&&e.radius&&e.lat&&e.lng&&(this._removeMarkerRadius(e),this._mapGl.addSource("circleData",{type:"geojson",data:{type:"FeatureCollection",features:[{type:"Feature",geometry:{type:"Point",coordinates:[e.lng,e.lat]},properties:{title:"You Found Me"}}]}}),this._mapGl.addLayer({id:"marker-radius-circle",type:"circle",source:"circleData",paint:{"circle-radius":["interpolate",["linear"],["zoom"],0,0,20,metersToPixelsAtMaxZoom(e.radius,e.lat)],"circle-color":"red","circle-opacity":.3}}))}createBoundaryBox(e=[]){var t,o;if(this._mapGl&&this._loaded&&this._showBoundaryBox&&(null==(t=this._viewSettings)?void 0:t.bounds)){this._mapGl.getSource("bounds")&&(this._mapGl.removeLayer("bounds"),this._mapGl.removeSource("bounds")),4!==e.length&&(e=null==(o=this._viewSettings)?void 0:o.bounds.toString().split(","));var i=[[[e[0],e[3]],[e[2],e[3]],[e[2],e[1]],[e[0],e[1]],[e[0],e[3]]]];this._mapGl.fitBounds([parseFloat(e[0])+.01,parseFloat(e[1])-.01,parseFloat(e[2])-.01,parseFloat(e[3])+.01]),this._mapGl.addSource("bounds",{type:"geojson",data:{type:"Feature",properties:{},geometry:{type:"Polygon",coordinates:i}}}),this._mapGl.addLayer({id:"bounds",type:"fill",source:"bounds",paint:{"fill-color":"#FF0000","fill-opacity":.4}})}}_addMarkerClickHandler(e,t){if(t){let o=t=>{t.stopPropagation(),e._onClick(t)};this._clickHandlers.set(e,o),t.addEventListener("click",o)}}_removeMarkerClickHandler(e,t){let o=this._clickHandlers.get(e);o&&t&&(t.removeEventListener("click",o),this._clickHandlers.delete(e))}_forwardGeocode(e){return __awaiter(this,void 0,void 0,function*(){let t=[];try{let o=this._viewSettings.geocodeUrl+"/search?q="+e.query+"&format=geojson&polygon_geojson=1&addressdetails=1",i=yield fetch(o);for(let e of(yield i.json()).features){let o=[e.bbox[0]+(e.bbox[2]-e.bbox[0])/2,e.bbox[1]+(e.bbox[3]-e.bbox[1])/2],i={type:"Feature",geometry:{type:"Point",coordinates:o},place_name:e.properties.display_name,properties:e.properties,text:e.properties.display_name,place_type:["place"],center:o};t.push(i)}}catch(e){console.error(`Failed to forwardGeocode with error: ${e}`)}return{features:t}})}_reverseGeocode(e){return __awaiter(this,void 0,void 0,function*(){let t=[];try{let o=this._viewSettings.geocodeUrl+"/reverse?lat="+e.lat+"&lon="+e.lon+"&format=geojson&polygon_geojson=1&addressdetails=1",i=yield fetch(o);for(let e of(yield i.json()).features){let o=[e.bbox[0]+(e.bbox[2]-e.bbox[0])/2,e.bbox[1]+(e.bbox[3]-e.bbox[1])/2],i={type:"Feature",geometry:{type:"Point",coordinates:o},place_name:e.properties.display_name,properties:e.properties,text:e.properties.display_name,place_type:["place"],center:o};t.push(i)}}catch(e){console.error(`Failed to reverseGeocode with error: ${e}`)}return{features:t}})}_initLongPressEvent(){if(this._mapGl){let e,t,o=()=>{e&&clearTimeout(e),e=null};this._mapGl.on("touchstart",o=>{o.originalEvent.touches.length>1||(t=o.lngLat,e=setTimeout(()=>{this._onLongPress(t)},500))}),this._mapGl.on("mousedown",o=>{e||(t=o.lngLat,e=setTimeout(()=>{this._onLongPress(t),e=null},500))}),this._mapGl.on("dragstart",o),this._mapGl.on("mouseup",o),this._mapGl.on("touchend",o),this._mapGl.on("touchcancel",o),this._mapGl.on("touchmove",o),this._mapGl.on("moveend",o),this._mapGl.on("gesturestart",o),this._mapGl.on("gesturechange",o),this._mapGl.on("gestureend",o)}}_onLongPress(e){this._mapContainer.dispatchEvent(new _(e))}_onGeocodeChange(e){this._mapContainer.dispatchEvent(new h(e))}}