@openremote/or-map 1.8.0-snapshot.20250725074716 → 1.8.0-snapshot.20250725120001

package/lib/index.js

@@ -1,41 +1,521 @@
-var __decorate=this&&this.__decorate||function(e,t,o,r){var a,n=arguments.length,s=n<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var i=e.length-1;i>=0;i--)(a=e[i])&&(s=(n<3?a(s):n>3?a(t,o,s):a(t,o))||s);return n>3&&s&&Object.defineProperty(t,o,s),s};import e from"@openremote/core";import{FlattenedNodesObserver as t}from"@polymer/polymer/lib/utils/flattened-nodes-observer.js";import{html as o,LitElement as r}from"lit";import{customElement as a,property as n,query as s}from"lit/decorators.js";import{LngLat as i,GeolocateControl as l}from"maplibre-gl";import{MapWidget as p}from"./mapwidget";import{style as d}from"./style";import"./markers/or-map-marker";import"./markers/or-map-marker-asset";import{OrMapMarker as m,OrMapMarkerChangedEvent as c}from"./markers/or-map-marker";import*as h from"./util";import{InputType as u,OrMwcInput as v}from"@openremote/or-mwc-components/or-mwc-input";import{OrMwcDialog as g,showDialog as y}from"@openremote/or-mwc-components/or-mwc-dialog";import{getMarkerIconAndColorFromAssetType as f}from"./util";import{i18next as C}from"@openremote/or-translate";import{debounce as _}from"lodash";export*from"./markers/or-map-marker";export*from"./markers/or-map-marker-asset";export*from"./or-map-asset-card";export class OrMapLoadedEvent extends CustomEvent{constructor(){super(OrMapLoadedEvent.NAME,{bubbles:!0,composed:!0})}}OrMapLoadedEvent.NAME="or-map-loaded";export class OrMapClickedEvent extends CustomEvent{constructor(e,t=!1){super(OrMapClickedEvent.NAME,{detail:{doubleClick:t,lngLat:e},bubbles:!0,composed:!0})}}OrMapClickedEvent.NAME="or-map-clicked";export class OrMapLongPressEvent extends CustomEvent{constructor(e){super(OrMapLongPressEvent.NAME,{detail:{doubleClick:!1,lngLat:e},bubbles:!0,composed:!0})}}OrMapLongPressEvent.NAME="or-map-long-press";export class OrMapGeocoderChangeEvent extends CustomEvent{constructor(e){super(OrMapGeocoderChangeEvent.NAME,{detail:{geocode:e},bubbles:!0,composed:!0})}}OrMapGeocoderChangeEvent.NAME="or-map-geocoder-change";export class CenterControl{onAdd(e){this.map=e;let t=document.createElement("div");t.classList.add("maplibregl-ctrl"),t.classList.add("maplibregl-ctrl-group");let o=document.createElement("button");o.className="maplibregl-ctrl-compass",o.addEventListener("click",t=>e.flyTo({center:this.pos,zoom:e.getZoom()}));let r=document.createElement("span");return r.className="maplibregl-ctrl-icon",o.appendChild(r),t.appendChild(o),this.elem=t,t}onRemove(e){this.map=void 0,this.elem=void 0}}let CoordinatesRegexPattern="^[ ]*(?:Lat: )?(-?\\d+\\.?\\d*)[, ]+(?:Lng: )?(-?\\d+\\.?\\d*)[ ]*$";function getCoordinatesInputKeyHandler(e){return t=>{if("Enter"===t.code||"NumpadEnter"===t.code){let o=t.target.value,r=o?{}:void 0;if(o){let e=o.split(/[ ,]/).filter(e=>!!e);2===e.length&&(r=new i(Number.parseFloat(e[0]),Number.parseFloat(e[1])))}e(r)}}}export class CoordinatesControl{constructor(e=!1,t){this._readonly=!1,this._readonly=e,this._valueChangedHandler=t}onAdd(e){this.map=e;let t=document.createElement("div");t.classList.add("maplibregl-ctrl"),t.classList.add("maplibregl-ctrl-group");let o=new v;return o.type=u.TEXT,o.outlined=!0,o.compact=!0,o.readonly=this._readonly,o.icon="crosshairs-gps",o.value=this._value,o.pattern=CoordinatesRegexPattern,o.onkeyup=getCoordinatesInputKeyHandler(this._valueChangedHandler),t.appendChild(o),this.elem=t,this.input=o,t}onRemove(e){this.map=void 0,this.elem=void 0}set readonly(e){this._readonly=e,this.input&&(this.input.readonly=e)}set value(e){this._value=e,this.input&&(this.input.value=e)}}export const geoJsonPointInputTemplateProvider=(e,t,r,a,n,s)=>{let p,d=!!(s&&s.disabled),m=!!(s&&s.readonly),c=!!(s&&s.compact),v=!!(s&&s.comfortable),_=new CenterControl,b=e=>{n&&(void 0!==e?n({value:e?h.getGeoJSONPoint(e):null}):n(void 0))},A=new CoordinatesControl(d,b);return{templateFunction:(t,r,a,n,s,M)=>{let k,w;t&&(k=(p=h.getLngLat(t))?Object.values(p):void 0);let E=k?k.join(", "):void 0;_.pos=p||void 0,A.readonly=d||m||n||a,A.value=E;let O=f(e),x=e=>{if(!m&&!d)if(p=e?h.getLngLat(e):null,w){let e=w.shadowRoot.getElementById("geo-json-point-marker");e.lng=p?p.lng:void 0,e.lat=p?p.lat:void 0,A.value=(k=p?Object.values(p):void 0)?k.join(", "):void 0}else b(p)},z=[[_,"bottom-left"],[A,"top-right"]];if(!m){let e=new l({positionOptions:{enableHighAccuracy:!0},showAccuracyCircle:!1,showUserLocation:!1});e.on("geolocate",e=>{x(new i(e.coords.longitude,e.coords.latitude))}),e.on("outofmaxbounds",e=>{x(new i(e.coords.longitude,e.coords.latitude))}),z.push([e,"bottom-left"])}let N=o`
-            <or-map id="geo-json-point-map" class="or-map" @or-map-long-press="${e=>{x(e.detail.lngLat)}}" .center="${k}" .controls="${z}" .showGeoCodingControl=${!m}>
-                <or-map-marker id="geo-json-point-marker" active .lng="${p?p.lng:void 0}" .lat="${p?p.lat:void 0}" .icon="${O?O.icon:void 0}" .activeColor="${O?"#"+O.color:void 0}" .colour="${O?"#"+O.color:void 0}"></or-map-marker>
-            </or-map>
-            <span class="long-press-msg">${C.t("longPressSetLoc")}</span>
-        `;if(c){let e=N;N=o`
-                <style>
-                    #geo-json-point-input-compact-wrapper {
-                        display: table-cell;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import manager from "@openremote/core";
+import { FlattenedNodesObserver } from "@polymer/polymer/lib/utils/flattened-nodes-observer.js";
+import { html, LitElement } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { LngLat, GeolocateControl } from "maplibre-gl";
+import { MapWidget } from "./mapwidget";
+import { style } from "./style";
+import "./markers/or-map-marker";
+import "./markers/or-map-marker-asset";
+import { OrMapMarker, OrMapMarkerChangedEvent } from "./markers/or-map-marker";
+import * as Util from "./util";
+import { InputType, OrMwcInput } from "@openremote/or-mwc-components/or-mwc-input";
+import { OrMwcDialog, showDialog } from "@openremote/or-mwc-components/or-mwc-dialog";
+import { getMarkerIconAndColorFromAssetType } from "./util";
+import { i18next } from "@openremote/or-translate";
+import { debounce } from "lodash";
+// Re-exports
+export { Util };
+export * from "./markers/or-map-marker";
+export * from "./markers/or-map-marker-asset";
+export * from "./or-map-asset-card";
+export class OrMapLoadedEvent extends CustomEvent {
+    constructor() {
+        super(OrMapLoadedEvent.NAME, {
+            bubbles: true,
+            composed: true
+        });
+    }
+}
+OrMapLoadedEvent.NAME = "or-map-loaded";
+export class OrMapClickedEvent extends CustomEvent {
+    constructor(lngLat, doubleClick = false) {
+        super(OrMapClickedEvent.NAME, {
+            detail: {
+                doubleClick: doubleClick,
+                lngLat: lngLat
+            },
+            bubbles: true,
+            composed: true
+        });
+    }
+}
+OrMapClickedEvent.NAME = "or-map-clicked";
+export class OrMapLongPressEvent extends CustomEvent {
+    constructor(lngLat) {
+        super(OrMapLongPressEvent.NAME, {
+            detail: {
+                doubleClick: false,
+                lngLat: lngLat
+            },
+            bubbles: true,
+            composed: true
+        });
+    }
+}
+OrMapLongPressEvent.NAME = "or-map-long-press";
+export class OrMapGeocoderChangeEvent extends CustomEvent {
+    constructor(geocode) {
+        super(OrMapGeocoderChangeEvent.NAME, {
+            detail: {
+                geocode
+            },
+            bubbles: true,
+            composed: true
+        });
+    }
+}
+OrMapGeocoderChangeEvent.NAME = "or-map-geocoder-change";
+export class CenterControl {
+    onAdd(map) {
+        this.map = map;
+        const control = document.createElement("div");
+        control.classList.add("maplibregl-ctrl");
+        control.classList.add("maplibregl-ctrl-group");
+        const button = document.createElement("button");
+        button.className = "maplibregl-ctrl-compass";
+        button.addEventListener("click", (ev) => map.flyTo({
+            center: this.pos,
+            zoom: map.getZoom()
+        }));
+        const buttonIcon = document.createElement("span");
+        buttonIcon.className = "maplibregl-ctrl-icon";
+        button.appendChild(buttonIcon);
+        control.appendChild(button);
+        this.elem = control;
+        return control;
+    }
+    onRemove(map) {
+        this.map = undefined;
+        this.elem = undefined;
+    }
+}
+const CoordinatesRegexPattern = "^[ ]*(?:Lat: )?(-?\\d+\\.?\\d*)[, ]+(?:Lng: )?(-?\\d+\\.?\\d*)[ ]*$";
+function getCoordinatesInputKeyHandler(valueChangedHandler) {
+    return (e) => {
+        if (e.code === "Enter" || e.code === "NumpadEnter") {
+            const valStr = e.target.value;
+            let value = !valStr ? undefined : {};
+            if (valStr) {
+                const lngLatArr = valStr.split(/[ ,]/).filter(v => !!v);
+                if (lngLatArr.length === 2) {
+                    value = new LngLat(Number.parseFloat(lngLatArr[0]), Number.parseFloat(lngLatArr[1]));
+                }
+            }
+            valueChangedHandler(value);
+        }
+    };
+}
+export class CoordinatesControl {
+    constructor(disabled = false, valueChangedHandler) {
+        this._readonly = false;
+        this._readonly = disabled;
+        this._valueChangedHandler = valueChangedHandler;
+    }
+    onAdd(map) {
+        this.map = map;
+        const control = document.createElement("div");
+        control.classList.add("maplibregl-ctrl");
+        control.classList.add("maplibregl-ctrl-group");
+        const input = new OrMwcInput();
+        input.type = InputType.TEXT;
+        input.outlined = true;
+        input.compact = true;
+        input.readonly = this._readonly;
+        input.icon = "crosshairs-gps";
+        input.value = this._value;
+        input.pattern = CoordinatesRegexPattern;
+        input.onkeyup = getCoordinatesInputKeyHandler(this._valueChangedHandler);
+        control.appendChild(input);
+        this.elem = control;
+        this.input = input;
+        return control;
+    }
+    onRemove(map) {
+        this.map = undefined;
+        this.elem = undefined;
+    }
+    set readonly(readonly) {
+        this._readonly = readonly;
+        if (this.input) {
+            this.input.readonly = readonly;
+        }
+    }
+    set value(value) {
+        this._value = value;
+        if (this.input) {
+            this.input.value = value;
+        }
+    }
+}
+export const geoJsonPointInputTemplateProvider = (assetDescriptor, valueHolder, valueHolderDescriptor, valueDescriptor, valueChangeNotifier, options) => {
+    const disabled = !!(options && options.disabled);
+    const readonly = !!(options && options.readonly);
+    const compact = !!(options && options.compact);
+    const comfortable = !!(options && options.comfortable);
+    const centerControl = new CenterControl();
+    const valueChangeHandler = (value) => {
+        if (!valueChangeNotifier) {
+            return;
+        }
+        if (value !== undefined) {
+            valueChangeNotifier({
+                value: value ? Util.getGeoJSONPoint(value) : null
+            });
+        }
+        else {
+            valueChangeNotifier(undefined);
+        }
+    };
+    const coordinatesControl = new CoordinatesControl(disabled, valueChangeHandler);
+    let pos;
+    const templateFunction = (value, focused, loading, sending, error, helperText) => {
+        let center;
+        if (value) {
+            pos = Util.getLngLat(value);
+            center = pos ? Object.values(pos) : undefined;
+        }
+        const centerStr = center ? center.join(", ") : undefined;
+        centerControl.pos = pos || undefined;
+        coordinatesControl.readonly = disabled || readonly || sending || loading;
+        coordinatesControl.value = centerStr;
+        const iconAndColor = getMarkerIconAndColorFromAssetType(assetDescriptor);
+        let dialog;
+        const setPos = (lngLat) => {
+            if (readonly || disabled) {
+                return;
+            }
+            pos = lngLat ? Util.getLngLat(lngLat) : null;
+            if (dialog) {
+                // We're in compact mode modal
+                const marker = dialog.shadowRoot.getElementById("geo-json-point-marker");
+                marker.lng = pos ? pos.lng : undefined;
+                marker.lat = pos ? pos.lat : undefined;
+                center = pos ? Object.values(pos) : undefined;
+                const centerStr = center ? center.join(", ") : undefined;
+                coordinatesControl.value = centerStr;
+            }
+            else {
+                valueChangeHandler(pos);
+            }
+        };
+        const controls = [[centerControl, "bottom-left"], [coordinatesControl, "top-right"]];
+        if (!readonly) {
+            const userLocationControl = new GeolocateControl({
+                positionOptions: {
+                    enableHighAccuracy: true
+                },
+                showAccuracyCircle: false,
+                showUserLocation: false
+            });
+            userLocationControl.on('geolocate', (currentLocation) => {
+                setPos(new LngLat(currentLocation.coords.longitude, currentLocation.coords.latitude));
+            });
+            userLocationControl.on('outofmaxbounds', (currentLocation) => {
+                setPos(new LngLat(currentLocation.coords.longitude, currentLocation.coords.latitude));
+            });
+            controls.push([userLocationControl, "bottom-left"]);
+        }
+        let content = html `
+            <or-map id="geo-json-point-map" class="or-map" @or-map-long-press="${(ev) => { setPos(ev.detail.lngLat); }}" .center="${center}" .controls="${controls}" .showGeoCodingControl=${!readonly}>
+                <or-map-marker id="geo-json-point-marker" active .lng="${pos ? pos.lng : undefined}" .lat="${pos ? pos.lat : undefined}" .icon="${iconAndColor ? iconAndColor.icon : undefined}" .activeColor="${iconAndColor ? "#" + iconAndColor.color : undefined}" .colour="${iconAndColor ? "#" + iconAndColor.color : undefined}"></or-map-marker>
+            </or-map>
+            <span class="long-press-msg">${i18next.t('longPressSetLoc')}</span>
+        `;
+        if (compact) {
+            const mapContent = content;
+            const onClick = () => {
+                dialog = showDialog(new OrMwcDialog()
+                    .setContent(mapContent)
+                    .setStyles(html `
+                            <style>
+                                .dialog-container {
+                                    flex-direction: column !important;
+                                }
+                                .dialog-container .long-press-msg {
+                                    display: block;
+                                    text-align: center;
+                                }
+                                or-map {
+                                    width: 600px !important;
+                                    min-height: 600px !important;
+                                }
+                            </style>
+                        `)
+                    .setActions([
+                    {
+                        actionName: "none",
+                        content: "none",
+                        action: () => {
+                            setPos(null);
+                            valueChangeHandler(pos);
+                        }
+                    },
+                    {
+                        actionName: "ok",
+                        content: "ok",
+                        action: () => {
+                            valueChangeHandler(pos);
+                        }
+                    },
+                    {
+                        default: true,
+                        actionName: "cancel",
+                        content: "cancel"
                     }
-                    #geo-json-point-input-compact-wrapper > * {
-                        vertical-align: middle;
+                ]));
+            };
+            content = html `
+                <style>
+                    #geo-json-point-input-compact-wrapper {
+                        display: table-cell;
+                    }
+                    #geo-json-point-input-compact-wrapper > * {
+                        vertical-align: middle;
+                    }
+                </style>
+                <div id="geo-json-point-input-compact-wrapper">
+                    <or-mwc-input style="width: auto;" .comfortable="${comfortable}" .type="${InputType.TEXT}" .value="${centerStr}" .pattern="${CoordinatesRegexPattern}" @keyup="${(e) => getCoordinatesInputKeyHandler(valueChangeHandler)(e)}"></or-mwc-input>
+                    <or-mwc-input style="width: auto;" .type="${InputType.BUTTON}" compact icon="crosshairs-gps" @or-mwc-input-changed="${onClick}"></or-mwc-input>
+                </div>
+            `;
+        }
+        return content;
+    };
+    return {
+        templateFunction: templateFunction,
+        supportsHelperText: false,
+        supportsLabel: false,
+        supportsSendButton: false,
+        validator: () => !pos || (pos.lat !== undefined && pos.lat !== null && pos.lng !== undefined && pos.lng !== null)
+    };
+};
+let OrMap = class OrMap extends LitElement {
+    constructor() {
+        super();
+        this.type = manager.mapType;
+        this._markerStyles = [];
+        this.showGeoCodingControl = false;
+        this.showBoundaryBoxControl = false;
+        this.useZoomControl = true;
+        this.showGeoJson = true;
+        this.boundary = [];
+        this._loaded = false;
+        this._markers = [];
+        this.addEventListener(OrMapMarkerChangedEvent.NAME, this._onMarkerChangedEvent);
+    }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        if (manager.ready) {
+            this.loadMap();
+        }
+    }
+    get markers() {
+        return this._markers;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        if (this._observer) {
+            this._observer.disconnect();
+        }
+        if (this._resizeObserver) {
+            this._resizeObserver.disconnect();
+        }
+        // Clean up of internal resources associated with the map
+        (_a = this._map) === null || _a === void 0 ? void 0 : _a.unload();
+    }
+    render() {
+        return html `
+            <div id="container">
+                <div id="map"></div>
+                <slot></slot>
+                <a id="openremote" href="https://openremote.io/" target="_blank">
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAAYagMeiWXwAAAAJiS0dEAP+Hj8y/AAAESUlEQVRIx5XVbWzdZRnH8c//f07POe36sK7SrYXZjYGzbBokOqd4QtKATdnMDFFSkoFzmWGRQOAFSoYnsBSzxBdmGsN4Y7LEFwZkUdHpDoja/AnJjBvp1sm2upW5PtAV+zBS+7Tz//tiLe0emPF+d9/39fvmunJf9+8K3HBF1drFzurVn5+5XkTwPwBNOt1s0pCjDnnT+Xzy/wOa5jaXnLLfLwzlF0WENwaYckyvUTHS1tnjl+6JFqk+JoMOqqy2JqjPVpXP1k7U1+Ty8paBPk97NX/pYwEdgZUetNkdlirDrHGnyv6y5r3lm4M2WVzwpJfz8XUBHTntnrJO6qqLWE9u/125zBNq0WebN/PXAjqq/cBOVWDasCEsd5MsmEzt/3xP+S6fwNsezPdfBejI6fCEDMa95oAT/t31pVxDQ6p6oy2WYSb18w0D2V3Klez2w3y8CNAR2G6vShxXUCxMkXLvS7Y6E/5+3emaJ92JqezzG+8M2nHW/flTi59xladU4phtfluYgnsDWUt8Nv7+8UfO73UUuenvDLxuCKu0RQt90BFo14wxzzpamD8uExtHSsu5HSP7XMCtZ5uTPyO0SdVCBlXahHjNG4WFrGY9Y4tXzODL7zb7NYJS64eHzWK92xYAa9yBKa8Wphf0xaQ4XOz0qF9JhMnXh//mIm4dnDSMOusWALepwQUnrm2t4pi9hrGyP+ccloxV6kOZFemoWi2mOpclaQycqGlt9R8XHS/GixinnVWvbDpjDEEpNpdnWrtd+HvZWzMQT9xjj1iXzUau6MPS9X9NKOeTmqzPpZWwfMkEKnza2ivimqxCKZjQa9BMmFI2D+gxibql4z7EiobYOSy1o7V6Xt1aYacGvD/7lse1+GZ9t0Zc8kHaGcOa1K6o+FePL1iy7K7wYHy70FZa9+qVWOm7tgslfpecKcy46GS0xXKM6g6d14VU+RfTnRJ8Y223w8j4tkMOOeR1j6nAMT8tzkCUcvlbn3ImbJn0RyWC+1af1Iv6ukcbf+aIRKDR3b5ipVCiy+PenaupWRsSfzCWim0ftUmdiqrJwWLpbmk3196UfXG0X6NKIWKDXva0I0UQZT2nRaDfc/mhgCj0PS9ImZzefbg5fliIvuTA++/0ZaYDTDqqpzhn6lHoW36iSuLHnslfCiBqdMBGDI6/0LUhfkgGiWFbC29c+epRaJMX3YJuD+R75l15wG4DaKh5dsPJsj0GXLaawavkWY/MyUcU/JOPHCkK7fAjNZiIf/PeX/vWx1814muF0Y/EKWs95mFVuKhgX352EYAoY5vnNSDRF/9p/MgHfQ2dldNIqbPeJm2aBBix20vzg26RpUUpLfb43FxZU4YMmEJGoxXKQeIfCg4uzMkrTDVitZ0ecst1B05i0Cv26Vk8H68JjFKabXa/Zkul5w5Lxp120EHdlyu/AQCiQI1P+YxaGcwY1+20kasnM/wXCa5/Ik1hKTEAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDgtMjBUMTU6MTc6NTUrMDA6MDCwJSdSAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTA4LTIwVDE1OjE3OjU1KzAwOjAwwXif7gAAAABJRU5ErkJggg==" />
+                </a>
+            </div>
+        `;
+    }
+    updated(changedProperties) {
+        var _a;
+        super.updated(changedProperties);
+        if (changedProperties.has("center") || changedProperties.has("zoom")) {
+            this.flyTo(this.center, this.zoom);
+        }
+        if (changedProperties.has("boundary") && this.showBoundaryBoxControl) {
+            (_a = this._map) === null || _a === void 0 ? void 0 : _a.createBoundaryBox(this.boundary);
+        }
+    }
+    refresh() {
+        if (this._map) {
+            this._map.loadViewSettings().then(() => {
+                if (!this._map)
+                    return;
+                this._map.setCenter();
+                this._map.flyTo();
+            });
+        }
+    }
+    loadMap() {
+        if (this._loaded) {
+            return;
+        }
+        if (this._mapContainer && this._slotElement) {
+            this._map = new MapWidget(this.type, this.shadowRoot, this._mapContainer, this.showGeoCodingControl, this.showBoundaryBoxControl, this.useZoomControl, this.showGeoJson)
+                .setCenter(this.center)
+                .setZoom(this.zoom)
+                .setControls(this.controls)
+                .setGeoJson(this.geoJson);
+            this._map.load().then(() => {
+                var _a, _b;
+                // Get markers from slot
+                this._observer = new FlattenedNodesObserver(this._slotElement, (info) => {
+                    this._processNewMarkers(info.addedNodes);
+                    this._processRemovedMarkers(info.removedNodes);
+                });
+                (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+                this._resizeObserver = new ResizeObserver(debounce(() => {
+                    this.resize();
+                }, 200));
+                var container = (_b = this._mapContainer) === null || _b === void 0 ? void 0 : _b.parentElement;
+                if (container) {
+                    this._resizeObserver.observe(container);
+                }
+            });
+        }
+        this._loaded = true;
+    }
+    resize() {
+        if (this._map) {
+            this._map.resize();
+        }
+    }
+    flyTo(coordinates, zoom) {
+        if (this._map) {
+            this._map.flyTo(coordinates, zoom);
+        }
+    }
+    _onMarkerChangedEvent(evt) {
+        if (this._map) {
+            this._map.onMarkerChanged(evt.detail.marker, evt.detail.property);
+        }
+    }
+    _processNewMarkers(nodes) {
+        nodes.forEach((node) => {
+            if (!this._map) {
+                return;
+            }
+            if (node instanceof OrMapMarker) {
+                this._markers.push(node);
+                // Add styles of marker class to the shadow root if not already added
+                const className = node.constructor.name;
+                if (this._markerStyles.indexOf(className) < 0) {
+                    const styles = node.constructor.styles;
+                    let stylesArr = [];
+                    if (styles) {
+                        if (!Array.isArray(styles)) {
+                            stylesArr.push(styles);
+                        }
+                        else {
+                            stylesArr = styles;
+                        }
+                        stylesArr.forEach((styleItem) => {
+                            const styleElem = document.createElement("style");
+                            styleElem.textContent = String(styleItem.toString());
+                            if (this._mapContainer.children.length > 0) {
+                                this._mapContainer.insertBefore(styleElem, this._mapContainer.children[0]);
+                            }
+                            else {
+                                this._mapContainer.appendChild(styleElem);
+                            }
+                        });
                     }
-                </style>
-                <div id="geo-json-point-input-compact-wrapper">
-                    <or-mwc-input style="width: auto;" .comfortable="${v}" .type="${u.TEXT}" .value="${E}" .pattern="${CoordinatesRegexPattern}" @keyup="${e=>getCoordinatesInputKeyHandler(b)(e)}"></or-mwc-input>
-                    <or-mwc-input style="width: auto;" .type="${u.BUTTON}" compact icon="crosshairs-gps" @or-mwc-input-changed="${()=>{w=y(new g().setContent(e).setStyles(o`
-                            <style>
-                                .dialog-container {
-                                    flex-direction: column !important;
-                                }
-                                .dialog-container .long-press-msg {
-                                    display: block;
-                                    text-align: center;
-                                }
-                                or-map {
-                                    width: 600px !important;
-                                    min-height: 600px !important;
-                                }
-                            </style>
-                        `).setActions([{actionName:"none",content:"none",action:()=>{x(null),b(p)}},{actionName:"ok",content:"ok",action:()=>{b(p)}},{default:!0,actionName:"cancel",content:"cancel"}]))}}"></or-mwc-input>
-                </div>
-            `}return N},supportsHelperText:!1,supportsLabel:!1,supportsSendButton:!1,validator:()=>!p||void 0!==p.lat&&null!==p.lat&&void 0!==p.lng&&null!==p.lng}};let OrMap=class extends r{constructor(){super(),this.type=e.mapType,this._markerStyles=[],this.showGeoCodingControl=!1,this.showBoundaryBoxControl=!1,this.useZoomControl=!0,this.showGeoJson=!0,this.boundary=[],this._loaded=!1,this._markers=[],this.addEventListener(c.NAME,this._onMarkerChangedEvent)}firstUpdated(t){super.firstUpdated(t),e.ready&&this.loadMap()}get markers(){return this._markers}connectedCallback(){super.connectedCallback()}disconnectedCallback(){var e;super.disconnectedCallback(),this._observer&&this._observer.disconnect(),this._resizeObserver&&this._resizeObserver.disconnect(),null==(e=this._map)||e.unload()}render(){return o`
-            <div id="container">
-                <div id="map"></div>
-                <slot></slot>
-                <a id="openremote" href="https://openremote.io/" target="_blank">
-                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAAYagMeiWXwAAAAJiS0dEAP+Hj8y/AAAESUlEQVRIx5XVbWzdZRnH8c//f07POe36sK7SrYXZjYGzbBokOqd4QtKATdnMDFFSkoFzmWGRQOAFSoYnsBSzxBdmGsN4Y7LEFwZkUdHpDoja/AnJjBvp1sm2upW5PtAV+zBS+7Tz//tiLe0emPF+d9/39fvmunJf9+8K3HBF1drFzurVn5+5XkTwPwBNOt1s0pCjDnnT+Xzy/wOa5jaXnLLfLwzlF0WENwaYckyvUTHS1tnjl+6JFqk+JoMOqqy2JqjPVpXP1k7U1+Ty8paBPk97NX/pYwEdgZUetNkdlirDrHGnyv6y5r3lm4M2WVzwpJfz8XUBHTntnrJO6qqLWE9u/125zBNq0WebN/PXAjqq/cBOVWDasCEsd5MsmEzt/3xP+S6fwNsezPdfBejI6fCEDMa95oAT/t31pVxDQ6p6oy2WYSb18w0D2V3Klez2w3y8CNAR2G6vShxXUCxMkXLvS7Y6E/5+3emaJ92JqezzG+8M2nHW/flTi59xladU4phtfluYgnsDWUt8Nv7+8UfO73UUuenvDLxuCKu0RQt90BFo14wxzzpamD8uExtHSsu5HSP7XMCtZ5uTPyO0SdVCBlXahHjNG4WFrGY9Y4tXzODL7zb7NYJS64eHzWK92xYAa9yBKa8Wphf0xaQ4XOz0qF9JhMnXh//mIm4dnDSMOusWALepwQUnrm2t4pi9hrGyP+ccloxV6kOZFemoWi2mOpclaQycqGlt9R8XHS/GixinnVWvbDpjDEEpNpdnWrtd+HvZWzMQT9xjj1iXzUau6MPS9X9NKOeTmqzPpZWwfMkEKnza2ivimqxCKZjQa9BMmFI2D+gxibql4z7EiobYOSy1o7V6Xt1aYacGvD/7lse1+GZ9t0Zc8kHaGcOa1K6o+FePL1iy7K7wYHy70FZa9+qVWOm7tgslfpecKcy46GS0xXKM6g6d14VU+RfTnRJ8Y223w8j4tkMOOeR1j6nAMT8tzkCUcvlbn3ImbJn0RyWC+1af1Iv6ukcbf+aIRKDR3b5ipVCiy+PenaupWRsSfzCWim0ftUmdiqrJwWLpbmk3196UfXG0X6NKIWKDXva0I0UQZT2nRaDfc/mhgCj0PS9ImZzefbg5fliIvuTA++/0ZaYDTDqqpzhn6lHoW36iSuLHnslfCiBqdMBGDI6/0LUhfkgGiWFbC29c+epRaJMX3YJuD+R75l15wG4DaKh5dsPJsj0GXLaawavkWY/MyUcU/JOPHCkK7fAjNZiIf/PeX/vWx1814muF0Y/EKWs95mFVuKhgX352EYAoY5vnNSDRF/9p/MgHfQ2dldNIqbPeJm2aBBix20vzg26RpUUpLfb43FxZU4YMmEJGoxXKQeIfCg4uzMkrTDVitZ0ecst1B05i0Cv26Vk8H68JjFKabXa/Zkul5w5Lxp120EHdlyu/AQCiQI1P+YxaGcwY1+20kasnM/wXCa5/Ik1hKTEAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDgtMjBUMTU6MTc6NTUrMDA6MDCwJSdSAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTA4LTIwVDE1OjE3OjU1KzAwOjAwwXif7gAAAABJRU5ErkJggg==" />
-                </a>
-            </div>
-        `}updated(e){var t;super.updated(e),(e.has("center")||e.has("zoom"))&&this.flyTo(this.center,this.zoom),e.has("boundary")&&this.showBoundaryBoxControl&&(null==(t=this._map)||t.createBoundaryBox(this.boundary))}refresh(){this._map&&this._map.loadViewSettings().then(()=>{this._map&&(this._map.setCenter(),this._map.flyTo())})}loadMap(){this._loaded||(this._mapContainer&&this._slotElement&&(this._map=new p(this.type,this.shadowRoot,this._mapContainer,this.showGeoCodingControl,this.showBoundaryBoxControl,this.useZoomControl,this.showGeoJson).setCenter(this.center).setZoom(this.zoom).setControls(this.controls).setGeoJson(this.geoJson),this._map.load().then(()=>{this._observer=new t(this._slotElement,e=>{this._processNewMarkers(e.addedNodes),this._processRemovedMarkers(e.removedNodes)}),null==(e=this._resizeObserver)||e.disconnect(),this._resizeObserver=new ResizeObserver(_(()=>{this.resize()},200));var e,o,r=null==(o=this._mapContainer)?void 0:o.parentElement;r&&this._resizeObserver.observe(r)})),this._loaded=!0)}resize(){this._map&&this._map.resize()}flyTo(e,t){this._map&&this._map.flyTo(e,t)}_onMarkerChangedEvent(e){this._map&&this._map.onMarkerChanged(e.detail.marker,e.detail.property)}_processNewMarkers(e){e.forEach(e=>{if(this._map&&e instanceof m){this._markers.push(e);let t=e.constructor.name;if(0>this._markerStyles.indexOf(t)){let o=e.constructor.styles,r=[];o&&(Array.isArray(o)?r=o:r.push(o),r.forEach(e=>{let t=document.createElement("style");t.textContent=String(e.toString()),this._mapContainer.children.length>0?this._mapContainer.insertBefore(t,this._mapContainer.children[0]):this._mapContainer.appendChild(t)})),this._markerStyles.push(t)}this._map.addMarker(e)}})}_processRemovedMarkers(e){e.forEach(e=>{if(this._map&&e instanceof m){let t=this._markers.indexOf(e);t>=0&&this._markers.splice(t,1),this._map.removeMarker(e)}})}};OrMap.styles=d,__decorate([n({type:String})],OrMap.prototype,"type",void 0),__decorate([n({type:String,converter:{fromAttribute(e,t){if(!e)return;let o=e.split(",");if(2===o.length)return new i(Number(o[0]),Number(o[1]))},toAttribute(e,t){let o=h.getLngLat(e);return o?""+o.lng+","+o.lat:""}}})],OrMap.prototype,"center",void 0),__decorate([n({type:Number})],OrMap.prototype,"zoom",void 0),__decorate([n({type:Boolean})],OrMap.prototype,"showGeoCodingControl",void 0),__decorate([n({type:Boolean})],OrMap.prototype,"showBoundaryBoxControl",void 0),__decorate([n({type:Boolean})],OrMap.prototype,"useZoomControl",void 0),__decorate([n({type:Object})],OrMap.prototype,"geoJson",void 0),__decorate([n({type:Boolean})],OrMap.prototype,"showGeoJson",void 0),__decorate([n({type:Array})],OrMap.prototype,"boundary",void 0),__decorate([s("#map")],OrMap.prototype,"_mapContainer",void 0),__decorate([s("slot")],OrMap.prototype,"_slotElement",void 0),OrMap=__decorate([a("or-map")],OrMap);export{h as Util,OrMap};
+                    this._markerStyles.push(className);
+                }
+                this._map.addMarker(node);
+            }
+        });
+    }
+    _processRemovedMarkers(nodes) {
+        nodes.forEach((node) => {
+            if (!this._map) {
+                return;
+            }
+            if (node instanceof OrMapMarker) {
+                const i = this._markers.indexOf(node);
+                if (i >= 0) {
+                    this._markers.splice(i, 1);
+                }
+                this._map.removeMarker(node);
+            }
+        });
+    }
+};
+OrMap.styles = style;
+__decorate([
+    property({ type: String })
+], OrMap.prototype, "type", void 0);
+__decorate([
+    property({ type: String, converter: {
+            fromAttribute(value, type) {
+                if (!value) {
+                    return;
+                }
+                const coords = value.split(",");
+                if (coords.length !== 2) {
+                    return;
+                }
+                const lng = Number(coords[0]);
+                const lat = Number(coords[1]);
+                return new LngLat(lng, lat);
+            },
+            toAttribute(value, type) {
+                const lngLat = Util.getLngLat(value);
+                if (!lngLat) {
+                    return "";
+                }
+                return "" + lngLat.lng + "," + lngLat.lat;
+            }
+        } })
+], OrMap.prototype, "center", void 0);
+__decorate([
+    property({ type: Number })
+], OrMap.prototype, "zoom", void 0);
+__decorate([
+    property({ type: Boolean })
+], OrMap.prototype, "showGeoCodingControl", void 0);
+__decorate([
+    property({ type: Boolean })
+], OrMap.prototype, "showBoundaryBoxControl", void 0);
+__decorate([
+    property({ type: Boolean })
+], OrMap.prototype, "useZoomControl", void 0);
+__decorate([
+    property({ type: Object })
+], OrMap.prototype, "geoJson", void 0);
+__decorate([
+    property({ type: Boolean })
+], OrMap.prototype, "showGeoJson", void 0);
+__decorate([
+    property({ type: Array })
+], OrMap.prototype, "boundary", void 0);
+__decorate([
+    query("#map")
+], OrMap.prototype, "_mapContainer", void 0);
+__decorate([
+    query("slot")
+], OrMap.prototype, "_slotElement", void 0);
+OrMap = __decorate([
+    customElement("or-map")
+], OrMap);
+export { OrMap };
+//# sourceMappingURL=index.js.map

package/lib/mapbox-url-utils.js

@@ -1 +1,66 @@
-export function isMapboxURL(r){return 0===r.indexOf("mapbox:")}export function transformMapboxUrl(r,t,e){return r.indexOf("/styles/")>-1&&-1===r.indexOf("/sprite")?{url:normalizeStyleURL(r,t)}:r.indexOf("/sprites/")>-1?{url:normalizeSpriteURL(r,t)}:r.indexOf("/fonts/")>-1?{url:normalizeGlyphsURL(r,t)}:r.indexOf("/v4/")>-1||"Source"===e?{url:normalizeSourceURL(r,t)}:void 0}function parseUrl(r){let t=r.match(/^(\w+):\/\/([^/?]*)(\/[^?]+)?\??(.+)?/);if(!t)throw Error("Unable to parse URL object");return{protocol:t[1],authority:t[2],path:t[3]||"/",params:t[4]?t[4].split("&"):[]}}function formatUrl(r,t){let e=parseUrl("https://api.mapbox.com");r.protocol=e.protocol,r.authority=e.authority,r.params.push(`access_token=${t}`);let o=r.params.length?`?${r.params.join("&")}`:"";return`${r.protocol}://${r.authority}${r.path}${o}`}function normalizeStyleURL(r,t){let e=parseUrl(r);return e.path=`/styles/v1${e.path}`,formatUrl(e,t)}function normalizeGlyphsURL(r,t){let e=parseUrl(r);return e.path=`/fonts/v1${e.path}`,formatUrl(e,t)}function normalizeSourceURL(r,t){let e=parseUrl(r);return e.path=`/v4/${e.authority}.json`,e.params.push("secure"),formatUrl(e,t)}function normalizeSpriteURL(r,t){let e=parseUrl(r),o=e.path.split("."),a=o[0],l=o[1],n="";return a.indexOf("@2x")&&(a=a.split("@2x")[0],n="@2x"),e.path=`/styles/v1${a}/sprite${n}.${l}`,formatUrl(e,t)}
+export function isMapboxURL(url) {
+    return url.indexOf("mapbox:") === 0;
+}
+export function transformMapboxUrl(url, accessToken, resourceType) {
+    if (url.indexOf("/styles/") > -1 && url.indexOf("/sprite") === -1)
+        return { url: normalizeStyleURL(url, accessToken) };
+    if (url.indexOf("/sprites/") > -1)
+        return { url: normalizeSpriteURL(url, accessToken) };
+    if (url.indexOf("/fonts/") > -1)
+        return { url: normalizeGlyphsURL(url, accessToken) };
+    if (url.indexOf("/v4/") > -1)
+        return { url: normalizeSourceURL(url, accessToken) };
+    if (resourceType === "Source" /* ResourceType.Source */)
+        return { url: normalizeSourceURL(url, accessToken) };
+}
+function parseUrl(url) {
+    const urlRe = /^(\w+):\/\/([^/?]*)(\/[^?]+)?\??(.+)?/;
+    const parts = url.match(urlRe);
+    if (!parts) {
+        throw new Error("Unable to parse URL object");
+    }
+    return {
+        protocol: parts[1],
+        authority: parts[2],
+        path: parts[3] || "/",
+        params: parts[4] ? parts[4].split("&") : [],
+    };
+}
+function formatUrl(urlObject, accessToken) {
+    const apiUrlObject = parseUrl("https://api.mapbox.com");
+    urlObject.protocol = apiUrlObject.protocol;
+    urlObject.authority = apiUrlObject.authority;
+    urlObject.params.push(`access_token=${accessToken}`);
+    const params = urlObject.params.length ? `?${urlObject.params.join("&")}` : "";
+    return `${urlObject.protocol}://${urlObject.authority}${urlObject.path}${params}`;
+}
+function normalizeStyleURL(url, accessToken) {
+    const urlObject = parseUrl(url);
+    urlObject.path = `/styles/v1${urlObject.path}`;
+    return formatUrl(urlObject, accessToken);
+}
+function normalizeGlyphsURL(url, accessToken) {
+    const urlObject = parseUrl(url);
+    urlObject.path = `/fonts/v1${urlObject.path}`;
+    return formatUrl(urlObject, accessToken);
+}
+function normalizeSourceURL(url, accessToken) {
+    const urlObject = parseUrl(url);
+    urlObject.path = `/v4/${urlObject.authority}.json`;
+    urlObject.params.push("secure");
+    return formatUrl(urlObject, accessToken);
+}
+function normalizeSpriteURL(url, accessToken) {
+    const urlObject = parseUrl(url);
+    const path = urlObject.path.split(".");
+    let properPath = path[0];
+    const extension = path[1];
+    let format = "";
+    if (properPath.indexOf("@2x")) {
+        properPath = properPath.split("@2x")[0];
+        format = "@2x";
+    }
+    urlObject.path = `/styles/v1${properPath}/sprite${format}.${extension}`;
+    return formatUrl(urlObject, accessToken);
+}
+//# sourceMappingURL=mapbox-url-utils.js.map