@pacem/pacem 1.0.0-abel

package/dist/browser/pacem-maps.js

@@ -0,0 +1,3642 @@
+/**
+ * @pacem/pacem v1.0.0-abel (https://js.pacem.it)
+ * Copyright 2026 Pacem (https://pacem.it)
+ * Licensed under Apache-2.0
+ */
+(function (pacemFoundation, pacemCore) {
+    'use strict';
+
+    var __decorate$5 = (undefined && undefined.__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;
+    };
+    const EMPTY_LATLNG = { lat: Number.NaN, lng: Number.NaN };
+    class LatLng {
+        static get Empty() {
+            return EMPTY_LATLNG;
+        }
+        static isEmpty(l) {
+            return l === EMPTY_LATLNG || (isNaN(l.lat) && isNaN(l.lng));
+        }
+        static isLatLng(obj) {
+            return 'lat' in obj && typeof obj.lat === 'number'
+                && 'lng' in obj && typeof obj.lng == 'number';
+        }
+        static translate(start, delta) {
+            // TODO: handle 'EDGE' cases!
+            return { lat: start.lat + delta.lat, lng: start.lng + delta.lng };
+        }
+        static equals(a, b) {
+            return a === b || (a.lat === b.lat && a.lng === b.lng);
+        }
+    }
+    const EMPTY_LATLNG_BOUNDS = { ne: LatLng.Empty, sw: LatLng.Empty };
+    class LatLngBounds {
+        static get Empty() {
+            return EMPTY_LATLNG_BOUNDS;
+        }
+        static isEmpty(bnds) {
+            return bnds === EMPTY_LATLNG_BOUNDS || (LatLng.isEmpty(bnds.ne) && LatLng.isEmpty(bnds.sw));
+        }
+        static isPoint(bnds) {
+            return !this.isEmpty(bnds) && (bnds.ne === bnds.sw || (bnds.ne.lat === bnds.sw.lat && bnds.ne.lng === bnds.sw.lng));
+        }
+        static isLatLngBounds(obj) {
+            return typeof obj === 'object'
+                && 'ne' in obj && LatLng.isLatLng(obj.ne)
+                && 'sw' in obj && LatLng.isLatLng(obj.sw);
+        }
+        static union(a, b) {
+            if (LatLngBounds.isEmpty(a)) {
+                if (LatLngBounds.isLatLngBounds(b)) {
+                    return b;
+                }
+                return { ne: b, sw: b };
+            }
+            if (LatLngBounds.isLatLngBounds(b)) {
+                if (LatLngBounds.isEmpty(b)) {
+                    return a;
+                }
+                // TODO: handle 'EDGE' cases!
+                const north = Math.max(a.ne.lat, b.ne.lat), east = Math.max(a.ne.lng, b.ne.lng), south = Math.min(a.sw.lat, b.sw.lat), west = Math.min(a.sw.lng, b.sw.lng);
+                return { ne: { lat: north, lng: east }, sw: { lat: south, lng: west } };
+            }
+            if (LatLng.isLatLng(b)) {
+                if (LatLng.isEmpty(b)) {
+                    return a;
+                }
+                const north = Math.max(a.ne.lat, b.lat), east = Math.max(a.ne.lng, b.lng), south = Math.min(a.sw.lat, b.lat), west = Math.min(a.sw.lng, b.lng);
+                return { ne: { lat: north, lng: east }, sw: { lat: south, lng: west } };
+            }
+            return a;
+        }
+        static equals(a, b) {
+            return a === b || (LatLng.equals(a.ne, b.ne) && LatLng.equals(a.sw, b.sw));
+        }
+    }
+    const MapProjectionConsts = {
+        SIZE: 256, // fast for computation
+        RAD: Math.PI / 180,
+        DEG: 180 / Math.PI,
+        SIN_LIMIT: 1 - 1E-15,
+        EARTH_RADIUS: 6_378_137,
+    };
+    const _MapConsts = {
+        TRANSFORMERS_NS: 'maps',
+        //DEFAULT_COORDS: { lat: 44.714188025077984, lng: 10.296516444873811 }
+    };
+    class MapProjection {
+        constructor(_pixelSize, _bounds, _normalizedSize = MapProjectionConsts.SIZE) {
+            this._pixelSize = _pixelSize;
+            this._bounds = _bounds;
+            this._normalizedSize = _normalizedSize;
+            const hSize = _normalizedSize / 2;
+            this.#center = { x: hSize, y: hSize };
+            this.#sizerad = _normalizedSize / 360.0;
+            this.#sizedeg = hSize / Math.PI;
+            this.#bottomLeft = this._latLngToWorldNormalizedPoint(_bounds.sw);
+            this.#topRight = this._latLngToWorldNormalizedPoint(_bounds.ne);
+        }
+        #center;
+        #bottomLeft;
+        #topRight;
+        #sizerad;
+        #sizedeg;
+        _latLngToWorldNormalizedPoint(latLng) {
+            const x = this.#center.x + latLng.lng * this.#sizedeg;
+            const latRad = latLng.lat * MapProjectionConsts.RAD;
+            const limit = MapProjectionConsts.SIN_LIMIT;
+            const sin = Math.sin(latRad).clamp(-limit, limit);
+            const y = this.#center.y + .5 * Math.log((1 + sin) / (1 - sin)) * (-this.#sizerad);
+            return { x, y };
+        }
+        _worldNormalizedPointToLatLng(point) {
+            const lat = MapProjectionConsts.DEG * (2 * Math.atan(Math.exp((point.y - this.#center.y) / -this.#sizerad)) - Math.PI / 2);
+            const lng = (point.x - this.#center.x) / this.#sizedeg;
+            return { lat, lng };
+        }
+        _latLngToPoint(latLng) {
+            const topRight = this.#topRight, bottomLeft = this.#bottomLeft, deltaLat = -topRight.y + bottomLeft.y, deltaLng = topRight.x - bottomLeft.x, target = this._latLngToWorldNormalizedPoint(latLng);
+            const { width, height } = this._pixelSize;
+            const x = (target.x - bottomLeft.x) * (width / deltaLng);
+            const y = (target.y - topRight.y) * (height / deltaLat);
+            return { x, y };
+        }
+        _pointToLatLng(point) {
+            const topRight = this.#topRight, bottomLeft = this.#bottomLeft, deltaLat = -topRight.y + bottomLeft.y, deltaLng = topRight.x - bottomLeft.x;
+            const { width, height } = this._pixelSize;
+            // to normalized x
+            const x = point.x / (width / deltaLng) + this.#bottomLeft.x;
+            // to normalized y
+            const y = point.y / (height / deltaLat) + this.#topRight.y;
+            return this._worldNormalizedPointToLatLng({ x, y });
+        }
+        static _haversine(from, to) {
+            const degToRad = MapProjectionConsts.RAD, lambda1 = from.lng * degToRad, lambda2 = to.lng * degToRad, phi1 = from.lat * degToRad, phi2 = to.lat * degToRad;
+            return 2 * Math.asin(Math.sqrt(Math.pow(Math.sin((phi1 - phi2) / 2), 2) + Math.cos(phi1) * Math.cos(phi2) * Math.pow(Math.sin((lambda1 - lambda2) / 2), 2)));
+        }
+        /**
+         * Computes a new LatLng by moving from a start position by a distance vector
+         * expressed in meters along north (dNorth) and east (dEast), on a spherical Earth.
+         * @param dEast Distance 'right' in meters.
+         * @param dNorth Distance 'up' in meters.
+         * @param start Start position.
+         * @param radius Planet radius in meters.
+         */
+        static _offsetByMeters(start, dNorth, dEast, radius) {
+            const { RAD: deg2Rad, DEG: rad2Deg } = MapProjectionConsts;
+            // convert start lat/lng to radians
+            const lat1 = start.lat * deg2Rad;
+            const lng1 = start.lng * deg2Rad;
+            // angular distance in radians
+            const dLat = dNorth / radius;
+            const dLng = dEast / (radius * Math.cos(lat1));
+            const lat2 = lat1 + dLat;
+            const lng2 = lng1 + dLng;
+            return {
+                lat: lat2 * rad2Deg,
+                lng: lng2 * rad2Deg
+            };
+        }
+        /**
+         * Returns the position obtained by moving a geographic point by the specified amount (in meters) north and east.
+         * @param start Starting position.
+         * @param north Distance 'north' in meters.
+         * @param east Distance 'east' in meters.
+         * @param r Planet radius in meters (default is Earth's radius).
+         * @returns New position after moving north and east by the specified distances.
+         */
+        static offsetBy(start, north, east, r = MapProjectionConsts.EARTH_RADIUS) {
+            return MapProjection._offsetByMeters(start, north, east, r);
+        }
+        /**
+         * Distance in meters between two locations.
+         * @param from First location.
+         * @param to Second location.
+         */
+        static distanceBetween(from, to, r = MapProjectionConsts.EARTH_RADIUS) {
+            return MapProjection._haversine(from, to) * r;
+        }
+        static latLngToPoint(latLng, bounds, size) {
+            return new MapProjection(size, bounds)._latLngToPoint(latLng);
+        }
+        static pointToLatLng(point, size, bounds) {
+            return new MapProjection(size, bounds)._pointToLatLng(point);
+        }
+    }
+    __decorate$5([
+        pacemCore.Transformer(_MapConsts.TRANSFORMERS_NS + ".")
+    ], MapProjection, "offsetBy", null);
+    __decorate$5([
+        pacemCore.Transformer(_MapConsts.TRANSFORMERS_NS + ".")
+    ], MapProjection, "distanceBetween", null);
+    __decorate$5([
+        pacemCore.Transformer(_MapConsts.TRANSFORMERS_NS + ".")
+    ], MapProjection, "latLngToPoint", null);
+    __decorate$5([
+        pacemCore.Transformer(_MapConsts.TRANSFORMERS_NS + ".")
+    ], MapProjection, "pointToLatLng", null);
+    // }
+
+    var types = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        LatLng: LatLng,
+        LatLngBounds: LatLngBounds,
+        MapProjection: MapProjection
+    });
+
+    var __decorate$4 = (undefined && undefined.__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;
+    };
+    // namespace Pacem.Components.Maps {
+    var MapType;
+    (function (MapType) {
+        MapType["ROAD"] = "road";
+        MapType["SATELLITE"] = "satellite";
+        MapType["HYBRID"] = "hybrid";
+        MapType["TERRAIN"] = "terrain";
+        MapType["HIGH_CONTRAST"] = "high_contrast";
+    })(MapType || (MapType = {}));
+    var MapColorScheme;
+    (function (MapColorScheme) {
+        MapColorScheme["LIGHT"] = "light";
+        MapColorScheme["DARK"] = "dark";
+        MapColorScheme["SYSTEM"] = "system";
+    })(MapColorScheme || (MapColorScheme = {}));
+    const MapConstsInternal = {
+        MAP_SELECTOR: pacemCore.P + '-map',
+        MARKER_SELECTOR: pacemCore.P + '-map-marker',
+        POLYLINE_SELECTOR: pacemCore.P + '-map-polyline',
+        CIRCLE_SELECTOR: pacemCore.P + '-map-circle',
+        POLYGON_SELECTOR: pacemCore.P + '-map-polygon',
+        LAYER_SELECTOR: pacemCore.P + '-map-layer',
+        OVERLAY_IMAGE_SELECTOR: pacemCore.P + '-map-overlay-image',
+        GEOCODER_SELECTOR: pacemCore.P + '-map-geocode',
+        DEFAULT_COORDS: { lat: 44.714188025077984, lng: 10.296516444873811 }
+    };
+    const MapConsts = {
+        DEFAULT_COORDS: MapConstsInternal.DEFAULT_COORDS
+    };
+    /** @deprecated */
+    function isLatLng(obj) {
+        return LatLng.isLatLng(obj);
+    }
+    /** @deprecated */
+    function isLatLngBounds(obj) {
+        return LatLngBounds.isLatLngBounds(obj);
+    }
+    const DEFAULT_MAPTARGET_KEY = 'defaultMapTarget';
+    const LatLngConverter = {
+        convert: attr => {
+            const arr = /^\s*([+\-\d\.]+)\s*,?\s*([+\-\d\.]+)\s*$/.exec(attr);
+            if (arr && arr.length > 2) {
+                return { lat: parseFloat(arr[1]), lng: parseFloat(arr[2]) };
+            }
+            return JSON.parse(attr);
+        },
+        convertBack: prop => JSON.stringify(prop)
+    };
+    const LatLngBoundsConverter = {
+        convert: attr => {
+            const arr = /^\s*([+\-\d\.]+)\s*,?\s*([+\-\d\.]+)\s*,?\s*([+\-\d\.]+)\s*,?\s*([+\-\d\.]+)\s*$/.exec(attr);
+            if (arr && arr.length > 4) {
+                return {
+                    sw: { lat: parseFloat(arr[3]), lng: parseFloat(arr[4]) },
+                    ne: { lat: parseFloat(arr[1]), lng: parseFloat(arr[2]) }
+                };
+            }
+            return JSON.parse(attr);
+        },
+        convertBack: prop => JSON.stringify(prop)
+    };
+    class MapUtils {
+        static parseCoords(input) {
+            if (input && !isNaN(input['lat']) && !isNaN(input['lng']))
+                return [input['lat'], input['lng']];
+            else if (pacemCore.Utils.isArray(input) && input.length > 1)
+                return [input[0], input[1]];
+            else if (/^\s*(\+|-)?[\d]+(.[\d]+)?\s*,\s*(\+|-)?[\d]+(.[\d]+)?\s*$/.test(input)) {
+                var splitted = input.split(',');
+                return [parseFloat(splitted[0]), parseFloat(splitted[1])];
+            }
+            return [MapConstsInternal.DEFAULT_COORDS.lat, MapConstsInternal.DEFAULT_COORDS.lng];
+        }
+        static expandBounds(bnds, latLng) {
+            if (latLng) {
+                if (!Array.isArray(latLng)) {
+                    latLng = [latLng.lat, latLng.lng];
+                }
+                bnds.push(latLng);
+            }
+        }
+        static isContentEmpty(element) {
+            return element.children.length == 0;
+        }
+    }
+    class MapRelevantElement extends pacemCore.PacemEventTarget {
+        get map() {
+            return this['_map'] = this['_map'] || pacemCore.CustomElementUtils.findAncestorOfType(this, PacemMapElement);
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first && name === 'hide') {
+                const map = this.map;
+                map?.adapter?.fitBounds(map, true);
+            }
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            this.map && this.map.register(this);
+        }
+        disconnectedCallback() {
+            this.map && this.map.unregister(this);
+            super.disconnectedCallback();
+        }
+    }
+    __decorate$4([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Boolean })
+    ], MapRelevantElement.prototype, "hide", void 0);
+    __decorate$4([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Boolean })
+    ], MapRelevantElement.prototype, "inactive", void 0);
+    class MapEvent extends pacemCore.CustomTypedEvent {
+        constructor(type, args) {
+            super(type, args);
+        }
+    }
+    let PacemMapGeocodeElement = class PacemMapGeocodeElement extends pacemCore.PacemEventTarget {
+        constructor() {
+            super(...arguments);
+            this.debounce = 1000;
+            this.#fetching = false;
+        }
+        #fetching;
+        #handle;
+        #promise;
+        get fetching() {
+            return this.#fetching;
+        }
+        _guards() {
+            // if nothing changed return the current results
+            const results = this.results;
+            if (!pacemCore.Utils.isNullOrEmpty(results)) {
+                const result = results[0];
+                if (!pacemCore.Utils.isNull(this.position) && LatLng.equals(this.position, result.position) && this.search === result.fullAddress) {
+                    return Promise.resolve(results);
+                }
+            }
+            // if adapter is not available then return an empty array
+            const adapter = this.adapter;
+            if (pacemCore.Utils.isNull(adapter) || adapter.disabled || !adapter.active) {
+                return Promise.resolve([]);
+            }
+            // ok to fetch for new results
+            return null;
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            switch (name) {
+                case 'search':
+                    this.geocode(val);
+                    break;
+                case 'position':
+                    this.reverseGeocode(val);
+                    break;
+                case 'results':
+                    if (pacemCore.Utils.isNullOrEmpty(val)) {
+                        this.search = '';
+                        this.position = null;
+                    }
+                    else {
+                        const r = val[0];
+                        this.search = r.fullAddress;
+                        this.position = r.position;
+                    }
+                    break;
+            }
+        }
+        _broadcastFetchingUpdate(f) {
+            if (f !== this.#fetching) {
+                this.#fetching = f;
+                this.dispatchEvent(new pacemCore.PropertyChangeEvent({ propertyName: 'fetching', oldValue: !f, currentValue: f }));
+            }
+        }
+        _fetch(wrapper) {
+            const { promise, search, position, key } = wrapper;
+            const current = this.#promise;
+            // check for equivalence
+            if (!pacemCore.Utils.isNull(current)
+                && LatLng.equals(current.position, position)
+                && (current.search || '') === (search || '')) {
+                return;
+            }
+            // update scope vars
+            this.#promise = { key, promise, position, search };
+            // green light
+            this._broadcastFetchingUpdate(true);
+            promise.then(r => {
+                if (key === this.#promise.key) {
+                    this._broadcastFetchingUpdate(false);
+                    this._successCallback(r);
+                }
+            }, e => this._errorCallback(e));
+        }
+        _debounce(callback, debounce = this.debounce) {
+            if (this.#handle) {
+                clearTimeout(this.#handle);
+            }
+            this.#handle = window.setTimeout(() => {
+                callback();
+            }, debounce || 0);
+        }
+        reverseGeocode(position = this.position, maxResults = this.maxResults) {
+            if (this.disabled) {
+                return;
+            }
+            this._debounce(() => {
+                const promise = this._guards() ?? this.adapter.reverseGeocode(position, maxResults || 1);
+                this._fetch({ promise, position, key: pacemCore.Utils.uniqueCode() });
+            });
+        }
+        geocode(search = this.search, maxResults = this.maxResults) {
+            if (this.disabled) {
+                return;
+            }
+            this._debounce(() => {
+                const promise = this._guards() ?? this.adapter.geocode(search, maxResults || 10);
+                this._fetch({ promise, search, position: LatLng.Empty, key: pacemCore.Utils.uniqueCode() });
+            });
+        }
+        _successCallback(r) {
+            const any = !pacemCore.Utils.isNullOrEmpty(r);
+            if (any || !pacemCore.Utils.isNullOrEmpty(this.results)) {
+                // change observable property if any result found
+                // OR if an empty set should replace a non-empty one.
+                if (r !== this.results) {
+                    this.results = r;
+                    if (any) {
+                        // fire 'success' event only in case of non-empty set.
+                        this.dispatchEvent(new CustomEvent('success', { detail: r, bubbles: false, cancelable: false }));
+                    }
+                }
+            }
+        }
+        _errorCallback(e) {
+            if (!pacemCore.Utils.isNullOrEmpty(this.results)) {
+                this.results = [];
+            }
+            this.dispatchEvent(new CustomEvent('error', { detail: e, bubbles: false, cancelable: false }));
+        }
+    };
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Element })
+    ], PacemMapGeocodeElement.prototype, "adapter", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemMapGeocodeElement.prototype, "maxResults", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemMapGeocodeElement.prototype, "debounce", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: true, converter: pacemCore.PropertyConverters.Json })
+    ], PacemMapGeocodeElement.prototype, "results", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: true, converter: pacemCore.PropertyConverters.String })
+    ], PacemMapGeocodeElement.prototype, "search", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: true, converter: LatLngConverter })
+    ], PacemMapGeocodeElement.prototype, "position", void 0);
+    PacemMapGeocodeElement = __decorate$4([
+        pacemCore.CustomElement({ tagName: MapConstsInternal.GEOCODER_SELECTOR })
+    ], PacemMapGeocodeElement);
+    //#endregion
+    class PacemMapAdapterElement extends pacemCore.PacemEventTarget {
+        constructor() {
+            super(...arguments);
+            this.active = true;
+            this.#maps = new Map();
+            this.#markers = new WeakMap();
+            this.#shapes = new WeakMap();
+            this.#layers = new WeakMap();
+            this.#overlays = new WeakMap();
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first) {
+                this.active = !this.disabled && this.isActive();
+            }
+        }
+        #maps;
+        #markers;
+        #shapes;
+        #layers;
+        #overlays;
+        get layerAdapters() {
+            return this.#layers;
+        }
+        get overlayAdapters() {
+            return this.#overlays;
+        }
+        get markerAdapters() {
+            return this.#markers;
+        }
+        get shapeAdapters() {
+            return this.#shapes;
+        }
+        hasMap(map) {
+            return this.#maps.has(map);
+        }
+        enrolledMaps() {
+            return this.#maps.keys();
+        }
+        tryGetMap(map) {
+            const maps = this.#maps;
+            if (maps.has(map)) {
+                return maps.get(map);
+            }
+            return null;
+        }
+        getMap(map) {
+            const retval = this.tryGetMap(map);
+            return retval?.map;
+        }
+        /**
+         * Initializes the map and returns its corresponding DOM element.
+         * @param map {PacemMapElement} Container for the map
+         */
+        async initialize(map) {
+            const maps = this.#maps;
+            if (!maps.has(map)) {
+                const retval = await this.init(map);
+                maps.set(map, retval);
+                // initialize layer adapter
+                const layers = this.#layers;
+                if (!layers.has(map)) {
+                    layers.set(map, this.buildLayerAdapterFor(map));
+                }
+                // initialize overlay adapter
+                const overlays = this.#overlays;
+                if (!overlays.has(map)) {
+                    overlays.set(map, this.buildOverlayAdapterFor(map));
+                }
+                // initialize marker adapter
+                const markers = this.#markers;
+                if (!markers.has(map)) {
+                    markers.set(map, this.buildMarkerAdapterFor(map));
+                }
+                // initialize shape adapter
+                const shapes = this.#shapes;
+                if (!shapes.has(map)) {
+                    shapes.set(map, this.buildShapeAdapterFor(map));
+                }
+                return retval.container;
+            }
+            return maps.get(map).container;
+        }
+        /**
+         * Disposes the resources attached to the map.
+         * @param map {PacemMapElement} The map
+         */
+        destroy(map) {
+            const layers = this.#layers;
+            if (layers.has(map)) {
+                layers.delete(map);
+            }
+            const overlays = this.#overlays;
+            if (overlays.has(map)) {
+                overlays.delete(map);
+            }
+            const markers = this.#markers;
+            if (markers.has(map)) {
+                markers.delete(map);
+            }
+            const shapes = this.#shapes;
+            if (shapes.has(map)) {
+                shapes.delete(map);
+            }
+            const maps = this.#maps;
+            if (maps.has(map)) {
+                this.dispose(map);
+                maps.delete(map);
+            }
+        }
+        /**
+         * Removes a map element.
+         * @param item {MapRelevantElement} item to be removed
+         */
+        removeItem(item) {
+            const ctrl = item.map;
+            // case layer
+            if (item instanceof PacemMapLayerElement) {
+                const layers = this.layerAdapters;
+                if (layers.has(ctrl)) {
+                    const adapter = layers.get(ctrl);
+                    adapter.removeLayer(item);
+                }
+            }
+            // case marker
+            else if (item instanceof PacemMapMarkerElement) {
+                const markers = this.markerAdapters;
+                if (markers.has(ctrl)) {
+                    const adapter = markers.get(ctrl);
+                    adapter.removeMarker(item);
+                }
+            }
+            // case shape
+            else if (item instanceof PacemMapShapeElement) {
+                const shape = this.shapeAdapters;
+                if (shape.has(ctrl)) {
+                    const adapter = shape.get(ctrl);
+                    adapter.removeShape(item);
+                }
+            }
+            // case overlay
+            else if (item instanceof PacemMapOverlayElement) {
+                const overlays = this.overlayAdapters;
+                if (overlays.has(ctrl)) {
+                    const adapter = overlays.get(ctrl);
+                    adapter.removeOverlay(item);
+                }
+            }
+            // TODO: other cases
+            //...
+            // fitBounds just in case
+            if (!item.inactive) {
+                this.fitBounds(ctrl, true);
+            }
+        }
+        /**
+         * Draws a map element.
+         * @param item {MapRelevantElement} item to be drawn
+         */
+        drawItem(item) {
+            const ctrl = item.map;
+            // case layer
+            if (item instanceof PacemMapLayerElement) {
+                const layers = this.layerAdapters;
+                if (layers.has(ctrl)) {
+                    const adapter = layers.get(ctrl);
+                    adapter.drawLayer(item);
+                }
+            }
+            // case marker
+            else if (item instanceof PacemMapMarkerElement) {
+                const markers = this.markerAdapters;
+                if (markers.has(ctrl)) {
+                    const adapter = markers.get(ctrl);
+                    adapter.drawMarker(item);
+                }
+            }
+            // case shape
+            else if (item instanceof PacemMapShapeElement) {
+                const shapes = this.shapeAdapters;
+                if (shapes.has(ctrl)) {
+                    const adapter = shapes.get(ctrl);
+                    adapter.drawShape(item);
+                }
+            }
+            // case overlay
+            else if (item instanceof PacemMapOverlayElement) {
+                const overlays = this.overlayAdapters;
+                if (overlays.has(ctrl)) {
+                    const adapter = overlays.get(ctrl);
+                    adapter.drawOverlay(item);
+                }
+            }
+            // TODO: other cases
+            //...
+            // fitBounds just in case
+            if (!item.inactive) {
+                this.fitBounds(ctrl, true);
+            }
+        }
+        /**
+         * Shows the infowindow relevant to a map element (if any).
+         * @param item {MapRelevantElement} item whose infowindow must be displayed
+         */
+        popupInfoWindow(item) {
+            const ctrl = item.map;
+            if (item instanceof PacemMapMarkerElement) {
+                const markers = this.markerAdapters;
+                if (markers.has(ctrl)) {
+                    markers.get(ctrl).openInfoWindow(item);
+                }
+            }
+        }
+        /**
+         * Hides the infowindow relevant to a map element (if any).
+         * @param item {MapRelevantElement} item whose infowindow must be hidden
+         */
+        popoutInfoWindow(item) {
+            const ctrl = item.map;
+            if (item instanceof PacemMapMarkerElement) {
+                const markers = this.markerAdapters;
+                if (markers.has(ctrl)) {
+                    markers.get(ctrl).closeInfoWindow(item);
+                }
+            }
+        }
+        setView(ctrl, center, zoom) {
+            if (!this.hasMap(ctrl)) {
+                return;
+            }
+            let options = {};
+            if (typeof center === 'number') {
+                options = pacemCore.Utils.extend({}, { zoom: center });
+            }
+            else if (LatLng.isLatLng(center)) {
+                options = pacemCore.Utils.extend({}, { center, zoom });
+            }
+            else {
+                options = center;
+            }
+            this.setViewNative(ctrl, options);
+        }
+        fitBounds(map, onlyIfAutofitOrBounds) {
+            if (!pacemCore.Utils.isNull(map)) {
+                this._fitBounds(map, onlyIfAutofitOrBounds);
+            }
+            else {
+                for (let m of this.enrolledMaps() || []) {
+                    this._fitBounds(m, onlyIfAutofitOrBounds);
+                }
+            }
+        }
+        _fitBounds(ctrl, onlyIfAutofitOrBounds) {
+            if (!this.hasMap(ctrl))
+                return;
+            // check against autofit
+            if (!ctrl.autofit && onlyIfAutofitOrBounds === true)
+                return;
+            if (LatLngBounds.isLatLngBounds(onlyIfAutofitOrBounds) && !LatLngBounds.isEmpty(onlyIfAutofitOrBounds)) {
+                this.fitBoundsNative(ctrl, onlyIfAutofitOrBounds);
+                return;
+            }
+            const markersBounds = this.markerAdapters.get(ctrl)?.getBounds(), shapesBounds = this.shapeAdapters.get(ctrl)?.getBounds();
+            // no markers nor shapes
+            const emptyMarkerBounds = pacemCore.Utils.isNull(markersBounds) || LatLngBounds.isEmpty(markersBounds), emptyShapeBounds = pacemCore.Utils.isNull(shapesBounds) || LatLngBounds.isEmpty(shapesBounds);
+            if (emptyMarkerBounds && emptyShapeBounds) {
+                this.setView(ctrl, { center: ctrl.center, zoom: ctrl.zoom });
+                return;
+            }
+            let bnds = LatLngBounds.Empty;
+            if (!emptyMarkerBounds) {
+                bnds = LatLngBounds.union(bnds, markersBounds);
+            }
+            if (!emptyShapeBounds) {
+                bnds = LatLngBounds.union(bnds, shapesBounds);
+            }
+            if (!LatLngBounds.isPoint(bnds)) {
+                this.fitBoundsNative(ctrl, bnds);
+            }
+            else {
+                this.setView(ctrl, { zoom: ctrl.zoom, center: bnds.ne });
+            }
+        }
+        ;
+        updateMapElement(ctrl, arg1, arg2) {
+            ['type', 'tilt', 'heading'].forEach(prop => {
+                if (prop in arg1) {
+                    ctrl[prop] = arg1[prop];
+                }
+            });
+            const zoom = ('zoom' in arg1) ? arg1.zoom : arg2;
+            if (!pacemCore.Utils.isNullOrEmpty(zoom) && zoom !== ctrl.zoom) {
+                ctrl.zoom = zoom;
+            }
+            const center = LatLng.isLatLng(arg1) ? arg1 : arg1.center;
+            if (!pacemCore.Utils.isNullOrEmpty(center) && (center.lat != ctrl.center?.lat || center.lng != ctrl.center?.lng)) {
+                ctrl.center = center;
+            }
+            // update bounds
+            ctrl.updateBounds(this.getBounds(ctrl));
+        }
+    }
+    __decorate$4([
+        pacemCore.Watch({ emit: true, converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemMapAdapterElement.prototype, "active", void 0);
+    __decorate$4([
+        pacemCore.Debounce(1000, (key, ctrl) => `pacem:debounce:${key}:${ctrl.id}`)
+    ], PacemMapAdapterElement.prototype, "_fitBounds", null);
+    class MapItemAdapter {
+        constructor(_map, _adapter = _map.adapter) {
+            this._map = _map;
+            this._adapter = _adapter;
+        }
+        get adapter() { return this._adapter; }
+        get map() { return this._map; }
+        getMap(item) {
+            return this._adapter.getMap(item.map);
+        }
+    }
+    class PacemOverlayAdapter extends MapItemAdapter {
+        constructor(map, adapter = map.adapter) {
+            super(map, adapter);
+        }
+        #overlays = new Map();
+        get layers() { return this.#overlays; }
+        onOverlayLoad(item, evt) {
+            item.dispatchEvent(new Event('overlayload'));
+        }
+        ensureOverlay(item, map) {
+            const ctrl = this, overlays = ctrl.#overlays;
+            let overlay;
+            if (!overlays.has(item)) {
+                overlay = this.buildOverlay(item, map);
+                if (!pacemCore.Utils.isNull(overlay)) {
+                    overlays.set(item, overlay);
+                }
+            }
+            else {
+                overlay = overlays.get(item);
+            }
+            return overlay;
+        }
+        removeOverlay(item) {
+            const ctrl = this, map = ctrl.getMap(item), overlays = this.#overlays;
+            if (overlays.has(item)) {
+                const layer = overlays.get(item);
+                ctrl.deleteOverlay(layer, map);
+                overlays.delete(item);
+            }
+        }
+        drawOverlay(item) {
+            const ctrl = this, map = ctrl.getMap(item);
+            if (pacemCore.Utils.isNull(map)) {
+                return;
+            }
+            else if (pacemCore.Utils.isNullOrEmpty(item) || item.hide) {
+                ctrl.removeOverlay(item);
+                return;
+            }
+            //
+            const overlay = this.ensureOverlay(item, map);
+            this.setBounds(overlay, map, item.bounds);
+            this.updateOverlay(overlay, map, item);
+        }
+    }
+    class PacemMapOverlayElement extends MapRelevantElement {
+    }
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: LatLngBoundsConverter })
+    ], PacemMapOverlayElement.prototype, "bounds", void 0);
+    let PacemMapOverlayImageElement = class PacemMapOverlayImageElement extends PacemMapOverlayElement {
+    };
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemMapOverlayImageElement.prototype, "src", void 0);
+    PacemMapOverlayImageElement = __decorate$4([
+        pacemCore.CustomElement({ tagName: MapConstsInternal.OVERLAY_IMAGE_SELECTOR })
+    ], PacemMapOverlayImageElement);
+    class PacemLayerAdapter extends MapItemAdapter {
+        constructor(map, adapter = map.adapter) {
+            super(map, adapter);
+        }
+        #layers = new Map();
+        #loadHandlers = new Map();
+        get layers() { return this.#layers; }
+        onTileLoad(item, evt) {
+            item.dispatchEvent(new Event('tileload'));
+        }
+        ensureLayer(item, map) {
+            const ctrl = this, layers = ctrl.#layers;
+            let layer;
+            if (!layers.has(item)) {
+                layer = this.buildLayer(item, map);
+                if (layer != null) {
+                    const handler = (e) => { ctrl.onTileLoad(item, e); };
+                    this.#loadHandlers.set(item, handler);
+                    this.addLoadEventListener(layer, map, handler);
+                    layers.set(item, layer);
+                }
+            }
+            else {
+                layer = layers.get(item);
+            }
+            return layer;
+        }
+        removeLayer(item) {
+            const ctrl = this, map = ctrl.getMap(item), layers = this.#layers;
+            if (layers.has(item)) {
+                const layer = layers.get(item);
+                const handlers = this.#loadHandlers;
+                if (handlers.has(item)) {
+                    const handler = handlers.get(item);
+                    this.removeLoadEventListener(layer, map, handler);
+                    handlers.delete(item);
+                }
+                ctrl.deleteLayer(layer, map);
+                layers.delete(item);
+            }
+        }
+        drawLayer(item) {
+            const ctrl = this, map = ctrl.getMap(item);
+            if (pacemCore.Utils.isNull(map)) {
+                return;
+            }
+            else if (pacemCore.Utils.isNullOrEmpty(item) || item.hide) {
+                ctrl.removeLayer(item);
+                return;
+            }
+            //
+            this.ensureLayer(item, map);
+        }
+    }
+    let PacemMapLayerElement = class PacemMapLayerElement extends MapRelevantElement {
+    };
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemMapLayerElement.prototype, "url", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Json })
+    ], PacemMapLayerElement.prototype, "include", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemMapLayerElement.prototype, "mode", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemMapLayerElement.prototype, "minZoom", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemMapLayerElement.prototype, "maxZoom", void 0);
+    PacemMapLayerElement = __decorate$4([
+        pacemCore.CustomElement({ tagName: MapConstsInternal.LAYER_SELECTOR })
+    ], PacemMapLayerElement);
+    class PacemMarkerAdapter extends MapItemAdapter {
+        constructor(map, adapter = map.adapter) {
+            super(map, adapter);
+        }
+        get mapAutomaticallyScrollsOnDrag() {
+            return false;
+        }
+        #markers = new Map();
+        #infoWindows = new Map();
+        getBounds(filter = _ => true) {
+            const markers = this.markers;
+            let bnds = LatLngBounds.Empty;
+            for (var m of markers.keys()) {
+                if (!filter(m) || m.inactive) {
+                    continue;
+                }
+                let marker = markers.get(m);
+                if (pacemCore.Utils.isNull(marker)) {
+                    continue;
+                }
+                bnds = LatLngBounds.union(bnds, this.getMarkerPosition(marker));
+            }
+            return bnds;
+        }
+        get markers() { return this.#markers; }
+        get infoWindows() { return this.#infoWindows; }
+        onDragEnd(item, evt) {
+            const marker = this.markers.get(item), dpos = this.getMarkerPosition(marker);
+            item.onDragEnd(dpos);
+        }
+        onClick(item, evt) {
+            const marker = this.markers.get(item), dpos = this.getMarkerPosition(marker);
+            item.onClick(dpos);
+        }
+        onInfoOpen(item) {
+            item.onInfoOpen();
+        }
+        onInfoClose(item) {
+            item.onInfoClose();
+        }
+        ensureMarker(item, map) {
+            const ctrl = this;
+            let marker;
+            if (!ctrl.markers.has(item)) {
+                marker = this.buildMarker(item, map);
+                if (marker != null) {
+                    this.addClickEventListener(marker, map, (e) => { ctrl.onClick(item, e); ctrl.openInfoWindow(item, e); });
+                    this.addDragEventListener(marker, map, (e) => { if (!this.mapAutomaticallyScrollsOnDrag)
+                        ctrl.adapter.fitBounds(item.map, true); });
+                    this.addDragEndEventListener(marker, map, (e) => ctrl.onDragEnd(item, e));
+                    ctrl.markers.set(item, marker);
+                }
+            }
+            else {
+                marker = ctrl.markers.get(item);
+            }
+            return marker;
+        }
+        removeMarker(item) {
+            const ctrl = this, map = ctrl.getMap(item), infoWindows = this.#infoWindows, markers = this.#markers;
+            if (infoWindows.has(item)) {
+                // const info = infoWindows.get(item);
+                infoWindows.delete(item);
+            }
+            if (markers.has(item)) {
+                const marker = markers.get(item);
+                ctrl.deleteMarker(marker, map);
+                markers.delete(item);
+                // ctrl._adapter.removeItem(item);
+            }
+        }
+        drawMarker(item) {
+            const ctrl = this, map = ctrl.getMap(item);
+            if (pacemCore.Utils.isNull(map)) {
+                return;
+            }
+            else if (pacemCore.Utils.isNullOrEmpty(item && item.position) || item.hide) {
+                ctrl.removeMarker(item);
+                return;
+            }
+            //
+            const marker = this.ensureMarker(item, map);
+            // set position
+            this.setPosition(marker, item.position);
+            this.setIcon(marker, item.icon);
+            this.setLabel(marker, item.caption);
+            this.setDraggable(marker, item.draggable);
+        }
+        closeInfoWindow(item, evt) {
+            const ctrl = this;
+            if (ctrl.infoWindows.has(item)) {
+                const info = ctrl.infoWindows.get(item);
+                this.closeInfo(info);
+            }
+        }
+        ensureInfoWindow(item, map) {
+            var ctrl = this;
+            let info;
+            if (!ctrl.infoWindows.has(item)) {
+                info = this.buildInfoWindow(item);
+                this.addCloseClickEventListener(info, map, (_) => {
+                    ctrl.deleteInfoWindow(info, map);
+                    ctrl.onInfoClose(item);
+                });
+                ctrl.infoWindows.set(item, info);
+            }
+            else {
+                info = ctrl.infoWindows.get(item);
+            }
+            return info;
+        }
+        openInfoWindow(item, evt) {
+            var ctrl = this, marker = ctrl.markers.get(item), content = item.caption, map = ctrl.getMap(item);
+            if (!MapUtils.isContentEmpty(item)) {
+                content = item.innerHTML;
+            }
+            if (!pacemCore.Utils.isNullOrEmpty(content)) {
+                const info = this.ensureInfoWindow(item, map);
+                this.setContent(info, content);
+                this.openInfo(info, content, map, marker);
+                ctrl.onInfoOpen(item);
+            }
+        }
+    }
+    let PacemMapMarkerElement = class PacemMapMarkerElement extends MapRelevantElement {
+        onDragEnd(position) {
+            this.position = position;
+            this.dispatchEvent(new MapEvent('dragend', { position: position }));
+        }
+        onClick(position) {
+            this.position = position;
+            this.dispatchEvent(new MapEvent('click', { position: position }));
+        }
+        onInfoOpen() {
+            this.dispatchEvent(new MapEvent('openinfo'));
+        }
+        onInfoClose() {
+            this.dispatchEvent(new MapEvent('closeinfo'));
+        }
+    };
+    __decorate$4([
+        pacemCore.Watch({ converter: LatLngConverter })
+    ], PacemMapMarkerElement.prototype, "position", void 0);
+    __decorate$4([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Json })
+    ], PacemMapMarkerElement.prototype, "icon", void 0);
+    __decorate$4([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.String })
+    ], PacemMapMarkerElement.prototype, "caption", void 0);
+    __decorate$4([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemMapMarkerElement.prototype, "draggable", void 0);
+    PacemMapMarkerElement = __decorate$4([
+        pacemCore.CustomElement({ tagName: MapConstsInternal.MARKER_SELECTOR })
+    ], PacemMapMarkerElement);
+    class PacemShapeAdapter extends MapItemAdapter {
+        constructor(map, adapter = map.adapter) {
+            super(map, adapter);
+        }
+        #shapes = new Map();
+        get shapes() { return this.#shapes; }
+        getBounds(filter = _ => true) {
+            const shapes = this.shapes;
+            let bnds = LatLngBounds.Empty;
+            for (var s of shapes.keys()) {
+                if (!filter(s) || s.inactive) {
+                    continue;
+                }
+                let shape = shapes.get(s);
+                if (pacemCore.Utils.isNull(shape)) {
+                    continue;
+                }
+                bnds = LatLngBounds.union(bnds, this.getShapeBounds(shape));
+            }
+            return bnds;
+        }
+        removeShape(item) {
+            const ctrl = this, map = ctrl.getMap(item), shapes = this.#shapes;
+            if (shapes.has(item)) {
+                const shape = shapes.get(item);
+                ctrl.deleteShape(shape, map);
+                shapes.delete(item);
+            }
+        }
+        _dispatchEvent(item, type, evt) {
+            const shape = this.shapes.get(item), position = this.getShapePosition(evt ?? shape);
+            item.dispatchEvent(new MapEvent(type, { position }));
+        }
+        #dragDelta = new Map();
+        onDragStart(item, evt) {
+            const shape = this.shapes.get(item);
+            const bounds = this.getShapeBounds(shape);
+            this.#dragDelta.set(item, bounds.ne);
+            this._dispatchEvent(item, 'dragstart', evt);
+        }
+        onDragEnd(item, evt) {
+            const shape = this.shapes.get(item);
+            const bounds = this.getShapeBounds(shape);
+            const neStart = this.#dragDelta.get(item), neEnd = bounds.ne;
+            const delta = { lat: neEnd.lat - neStart.lat, lng: neEnd.lng - neStart.lng };
+            this._translateShape(item, delta);
+            this._dispatchEvent(item, 'dragend', evt);
+        }
+        _translateShape(item, latLng) {
+            if (item instanceof PacemMapCircleElement) {
+                item.center = LatLng.translate(item.center, latLng);
+                return;
+            }
+            if (item instanceof PacemMapPolylineElement) {
+                const path = item.vertices.map(p => LatLng.translate(p, latLng));
+                item.vertices = path;
+                return;
+            }
+            if (item instanceof PacemMapPolygonElement) {
+                const path = item.vertices.map(p => LatLng.translate(p, latLng));
+                item.vertices = path;
+                return;
+            }
+        }
+        onDrag(item, evt) {
+            this._dispatchEvent(item, 'drag', evt);
+        }
+        onClick(item, evt) {
+            this._dispatchEvent(item, 'click', evt);
+        }
+        ensureShape(item, map) {
+            const ctrl = this;
+            let shape;
+            if (!ctrl.shapes.has(item)) {
+                shape = this.buildShape(item, map);
+                if (shape != null) {
+                    this.addClickEventListener(shape, (e) => ctrl.onClick(item, e));
+                    this.addDragEventListener(shape, (e) => { ctrl.onDrag(item, e); ctrl.adapter.fitBounds(item.map, true); });
+                    this.addDragEndEventListener(shape, (e) => ctrl.onDragEnd(item, e));
+                    this.addDragStartEventListener(shape, (e) => ctrl.onDragStart(item, e));
+                    ctrl.shapes.set(item, shape);
+                }
+            }
+            else {
+                shape = ctrl.shapes.get(item);
+            }
+            return shape;
+        }
+        drawShape(item) {
+            const ctrl = this, map = ctrl.getMap(item);
+            if (pacemCore.Utils.isNull(map)) {
+                return;
+            }
+            else if (pacemCore.Utils.isNullOrEmpty(item) || item.hide) {
+                ctrl.removeShape(item);
+                return;
+            }
+            //
+            const shape = this.ensureShape(item, map);
+            this.setShape(shape, item);
+            this.setEditable(shape, item.editable);
+            this.setDraggable(shape, item.draggable);
+        }
+    }
+    class PacemMapShapeElement extends MapRelevantElement {
+    }
+    __decorate$4([
+        pacemCore.Watch({ emit: true, converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemMapShapeElement.prototype, "draggable", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: true, converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemMapShapeElement.prototype, "editable", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: true, converter: pacemCore.PropertyConverters.Json })
+    ], PacemMapShapeElement.prototype, "stroke", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: true, converter: pacemCore.PropertyConverters.Json })
+    ], PacemMapShapeElement.prototype, "fill", void 0);
+    let PacemMapPolylineElement = class PacemMapPolylineElement extends PacemMapShapeElement {
+    };
+    __decorate$4([
+        pacemCore.Watch({ emit: true, converter: pacemCore.PropertyConverters.Json })
+    ], PacemMapPolylineElement.prototype, "vertices", void 0);
+    PacemMapPolylineElement = __decorate$4([
+        pacemCore.CustomElement({ tagName: MapConstsInternal.POLYLINE_SELECTOR })
+    ], PacemMapPolylineElement);
+    let PacemMapPolygonElement = class PacemMapPolygonElement extends PacemMapShapeElement {
+    };
+    __decorate$4([
+        pacemCore.Watch({ emit: true, converter: pacemCore.PropertyConverters.Json })
+    ], PacemMapPolygonElement.prototype, "vertices", void 0);
+    PacemMapPolygonElement = __decorate$4([
+        pacemCore.CustomElement({ tagName: MapConstsInternal.POLYGON_SELECTOR })
+    ], PacemMapPolygonElement);
+    let PacemMapCircleElement = class PacemMapCircleElement extends PacemMapShapeElement {
+    };
+    __decorate$4([
+        pacemCore.Watch({ emit: true, converter: LatLngConverter })
+    ], PacemMapCircleElement.prototype, "center", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: true, converter: pacemCore.PropertyConverters.Json })
+    ], PacemMapCircleElement.prototype, "radius", void 0);
+    PacemMapCircleElement = __decorate$4([
+        pacemCore.CustomElement({ tagName: MapConstsInternal.CIRCLE_SELECTOR })
+    ], PacemMapCircleElement);
+    //#endregion
+    let PacemMapElement = class PacemMapElement extends pacemCore.PacemEventTarget {
+        constructor() {
+            super(...arguments);
+            this.zoom = 12;
+            this.center = MapConstsInternal.DEFAULT_COORDS;
+            this.#bounds = LatLngBounds.Empty;
+            this.scale = true;
+            this.mousewheel = true;
+            this.draggable = true;
+            this.doubleClickZoom = true;
+            this.keyboardShortcuts = true;
+            /** Gets or sets whether to autofit the bounds whenever the map gets refreshed. */
+            this.autofit = true;
+            this.paddingTop = 0;
+            this.paddingLeft = 0;
+            this.paddingRight = 0;
+            this.paddingBottom = 0;
+            // GMaps features
+            this.tilt = 0;
+            this.heading = 0;
+            this._drawHandler = (evt) => {
+                this._draw(evt.target);
+            };
+            //#endregion
+            //#region lifecycle
+            this._listenToActiveAdapter = (e) => {
+                const adapter = e.target;
+                if (e.detail.propertyName === 'active' && e.detail.currentValue) {
+                    adapter.removeEventListener(pacemCore.PropertyChangeEventName, this._listenToActiveAdapter, false);
+                    this._switchAdapter(adapter);
+                }
+            };
+            this._initialized = false;
+            this._afterInit = (_, old) => {
+                this._initialized = true;
+                // loop through child element map-relevant-items
+                for (var child of pacemCore.CustomElementUtils.findDescendants(this, n => n instanceof MapRelevantElement)) {
+                    this._erase(child, old);
+                    this._draw(child);
+                }
+                // dispose old, if any.
+                if (old) {
+                    old?.destroy(this);
+                }
+            };
+            this._resizeHandler = (e) => {
+                this.onResize(e);
+            };
+            //#endregion
+        }
+        updateBounds(bounds) {
+            if (!LatLngBounds.equals(bounds, this.#bounds)) {
+                const oldValue = this.#bounds;
+                const currentValue = this.#bounds = bounds;
+                this.dispatchEvent(new pacemCore.PropertyChangeEvent({ propertyName: 'bounds', oldValue, currentValue }));
+            }
+        }
+        #bounds;
+        get bounds() {
+            return this.#bounds;
+        }
+        get container() {
+            return this._container;
+        }
+        register(item) {
+            item.addEventListener(pacemCore.PropertyChangeEventName, this._drawHandler, false);
+            this._draw(item);
+        }
+        unregister(item) {
+            this._erase(item);
+            item.removeEventListener(pacemCore.PropertyChangeEventName, this._drawHandler, false);
+        }
+        _draw(item, adapter = this.adapter) {
+            this._initialized &&
+                adapter &&
+                adapter.drawItem(item);
+        }
+        _erase(item, adapter = this.adapter) {
+            this._initialized &&
+                adapter &&
+                adapter.removeItem(item);
+        }
+        _switchAdapter(val, old) {
+            if (!val.active) {
+                if (old) {
+                    this._afterInit(null, old);
+                }
+                val.addEventListener(pacemCore.PropertyChangeEventName, this._listenToActiveAdapter, false);
+            }
+            else {
+                val.initialize(this).then(_ => this._afterInit(_, old));
+            }
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            this._setupContainer();
+            //
+            this.adapter && this._switchAdapter(this.adapter);
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (name === 'bounds') {
+                return;
+            }
+            if (name === 'adapter') {
+                if (!pacemCore.Utils.isNull(this._container)) {
+                    this._initialized = false;
+                    if (val) {
+                        this._switchAdapter(val, old);
+                    }
+                    else if (old) {
+                        this._afterInit(null, old);
+                    }
+                }
+            }
+            else {
+                switch (name) {
+                    case 'zoom':
+                    case 'center':
+                    case 'type':
+                    case 'theme':
+                    case 'tilt':
+                    case 'heading':
+                        this.adapter?.setView(this, { type: this.type, tilt: this.tilt, heading: this.heading, zoom: this.zoom, center: this.center, theme: this.theme });
+                        break;
+                    case 'autofit':
+                        if (val) {
+                            this.adapter?.fitBounds(this);
+                        }
+                        break;
+                    case 'target':
+                        if (old) {
+                            this._dismissContainer(old);
+                        }
+                        if (val) {
+                            this._setupContainer(val);
+                            this._setupResizer();
+                        }
+                        else {
+                            this._dismissResizer();
+                        }
+                        break;
+                }
+                this.adapter && this.adapter.invalidateSize(this);
+            }
+        }
+        _dismissContainer(container = this._container) {
+            if (container.dataset[DEFAULT_MAPTARGET_KEY] === 'true') {
+                container.remove();
+            }
+            else {
+                pacemCore.Utils.removeClass(container, pacemCore.PCSS + '-map');
+            }
+            if (container === this._container) {
+                this._container = null;
+            }
+        }
+        _dismissResizer() {
+            const resizer = this._resizer;
+            resizer.removeEventListener('resize', this._resizeHandler, false);
+            resizer.remove();
+            this._resizer = null;
+        }
+        _setupContainer(val = this.target) {
+            if (pacemCore.Utils.isNull(val)) {
+                val = document.createElement('div');
+                val.dataset[DEFAULT_MAPTARGET_KEY] = 'true';
+                this.insertAdjacentElement('afterend', val);
+            }
+            const container = this._container = val;
+            pacemCore.Utils.addClass(container, pacemCore.PCSS + '-map');
+            return container;
+        }
+        _setupResizer() {
+            const container = this._container;
+            if (pacemCore.Utils.isNull(container)) {
+                throw new Error('You must set up the map container before its resizing listener.');
+            }
+            if (pacemCore.Utils.isNull(this._resizer)) {
+                const resizer = this._resizer = document.createElement(pacemCore.P + '-resize');
+                resizer.addEventListener('resize', this._resizeHandler, false);
+                container.insertAdjacentElement('afterend', resizer);
+            }
+            this._resizer.target = container;
+            return this._resizer;
+        }
+        _detach() {
+            if (!pacemCore.Utils.isNull(this._container)) {
+                this._dismissContainer();
+            }
+            if (!pacemCore.Utils.isNull(this._resizer)) {
+                this._dismissResizer();
+            }
+        }
+        disconnectedCallback() {
+            this._detach();
+            super.disconnectedCallback();
+        }
+        onResize(e) {
+            this.adapter && this.adapter.invalidateSize(this);
+        }
+    };
+    __decorate$4([
+        pacemCore.Watch({ emit: true, converter: pacemCore.PropertyConverters.Number })
+    ], PacemMapElement.prototype, "zoom", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: true, converter: LatLngConverter })
+    ], PacemMapElement.prototype, "center", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemMapElement.prototype, "type", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemMapElement.prototype, "theme", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemMapElement.prototype, "scale", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemMapElement.prototype, "mousewheel", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemMapElement.prototype, "zoomControl", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemMapElement.prototype, "draggable", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemMapElement.prototype, "doubleClickZoom", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemMapElement.prototype, "keyboardShortcuts", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemMapElement.prototype, "autofit", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemMapElement.prototype, "paddingTop", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemMapElement.prototype, "paddingLeft", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemMapElement.prototype, "paddingRight", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemMapElement.prototype, "paddingBottom", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Element })
+    ], PacemMapElement.prototype, "adapter", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Element })
+    ], PacemMapElement.prototype, "target", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemMapElement.prototype, "tilt", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemMapElement.prototype, "heading", void 0);
+    PacemMapElement = __decorate$4([
+        pacemCore.CustomElement({ tagName: MapConstsInternal.MAP_SELECTOR })
+    ], PacemMapElement);
+    //}
+
+    var __decorate$3 = (undefined && undefined.__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;
+    };
+    const consts$3 = {
+        GEOLOCATION_UNAVAILABLE: 'geolocation_unavailable',
+        POSITION_UNAVAILABLE: 'position_unavailable',
+        PERMISSION_DENIED: 'permission_denied',
+        TIMEOUT: 'timeout',
+        UNKNOWN_ERROR: 'unknown_error',
+    };
+    let PacemMapGeolocateElement = class PacemMapGeolocateElement extends pacemCore.PacemEventTarget {
+        constructor() {
+            super(...arguments);
+            this.permission = 'prompt';
+            this.maximumAge = 15000;
+            this.timeout = 30000;
+            this.#fetching = false;
+            this._successCallback = (position) => {
+                this.permission = 'granted';
+                this._setFetching(false);
+                const detail = {
+                    lat: position.coords.latitude, lng: position.coords.longitude,
+                    timestamp: position.timestamp, altitude: position.coords.altitude,
+                    heading: position.coords.heading, speed: position.coords.speed
+                };
+                this.position = detail;
+                this.dispatchEvent(new CustomEvent('success', { detail }));
+            };
+            this._errorCallback = (err) => {
+                this._setFetching(false);
+                const detail = typeof err === 'string' ? err : this._errToString(err);
+                this.dispatchEvent(new CustomEvent('error', { detail }));
+            };
+        }
+        _checkPermission() {
+            return new Promise(resolve => {
+                const permissionApi = navigator.permissions;
+                if (pacemCore.Utils.isNull(permissionApi)) {
+                    resolve('prompt');
+                }
+                else {
+                    permissionApi.query({ name: 'geolocation' }).then(p => {
+                        resolve(this.permission = p.state);
+                    });
+                }
+            });
+        }
+        #fetching;
+        get fetching() {
+            return this.#fetching;
+        }
+        _setFetching(val) {
+            if (val !== this.fetching) {
+                this.#fetching = val;
+                this.dispatchEvent(new pacemCore.PropertyChangeEvent({ propertyName: 'fetching', currentValue: val, oldValue: !val }));
+            }
+        }
+        fetch() {
+            if (this.disabled) {
+                return;
+            }
+            if (!navigator.geolocation) {
+                this._errorCallback(consts$3.GEOLOCATION_UNAVAILABLE);
+                return;
+            }
+            this._checkPermission().then(_ => {
+                this._setFetching(true);
+                navigator.geolocation.getCurrentPosition(this._successCallback, this._errorCallback, { enableHighAccuracy: true, maximumAge: this.maximumAge });
+            });
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            this._checkPermission();
+        }
+        _errToString(err) {
+            switch (err.code) {
+                case GeolocationPositionError.PERMISSION_DENIED:
+                    return consts$3.PERMISSION_DENIED;
+                case GeolocationPositionError.POSITION_UNAVAILABLE:
+                    return consts$3.POSITION_UNAVAILABLE;
+                case GeolocationPositionError.TIMEOUT:
+                    return consts$3.TIMEOUT;
+                default:
+                    return consts$3.UNKNOWN_ERROR;
+            }
+        }
+    };
+    __decorate$3([
+        pacemCore.Watch({ emit: true, converter: LatLngConverter })
+    ], PacemMapGeolocateElement.prototype, "position", void 0);
+    __decorate$3([
+        pacemCore.Watch({ emit: true, converter: pacemCore.PropertyConverters.String })
+    ], PacemMapGeolocateElement.prototype, "permission", void 0);
+    __decorate$3([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemMapGeolocateElement.prototype, "maximumAge", void 0);
+    __decorate$3([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemMapGeolocateElement.prototype, "timeout", void 0);
+    PacemMapGeolocateElement = __decorate$3([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-map-geolocate' })
+    ], PacemMapGeolocateElement);
+
+    var __decorate$2 = (undefined && undefined.__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;
+    };
+    var PacemAzureMapAdapterElement_1;
+    // namespace Pacem.Components.Maps {
+    const consts$2 = {
+        API_JS: 'https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js',
+        API_CSS: 'https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css'
+    };
+    function convertAddress$1(address) {
+        return {
+            city: address.municipality,
+            state: address.countrySubdivision,
+            province: address.countrySecondarySubdivision,
+            village: address.municipalitySubdivision ?? address.localName,
+            zipCode: address.postalCode,
+            streetName: address.street ?? address.streetName,
+            houseNumber: address.buildingNumber ?? address.streetNumber,
+            countryCode: address.countryCode,
+            country: address.country,
+        };
+    }
+    class AtlasMapUtils {
+        static getPosition(latLng) {
+            if (Array.isArray(latLng)) {
+                latLng = { lat: latLng[0], lng: latLng[1] };
+            }
+            return atlas.data.Position.fromLatLng(latLng);
+        }
+        static getBounds(bounds) {
+            if (pacemCore.Utils.isArray(bounds)) {
+                return atlas.data.BoundingBox.fromPositions(bounds.map(p => /* reverse */ [p[1], p[0]]));
+            }
+            const ne = AtlasMapUtils.getPosition(bounds.ne), sw = AtlasMapUtils.getPosition(bounds.sw);
+            return atlas.data.BoundingBox.fromPositions([ne, sw]);
+        }
+        static getLatLng(position) {
+            return { lat: position[1], lng: position[0] };
+        }
+        static getLatLngBounds(bounds) {
+            const ne = atlas.data.BoundingBox.getNorthEast(bounds), sw = atlas.data.BoundingBox.getSouthWest(bounds);
+            return { ne: AtlasMapUtils.getLatLng(ne), sw: AtlasMapUtils.getLatLng(sw) };
+        }
+        static parseGeocoding(response) {
+            if (pacemCore.Utils.isNullOrEmpty(response.results)) {
+                return [];
+            }
+            return response.results.map(r => {
+                return {
+                    fullAddress: r.address.freeformAddress,
+                    address: convertAddress$1(r.address),
+                    position: { lat: r.position.lat, lng: r.position.lon, altitude: null }
+                };
+            });
+        }
+        static parseReverseGeocoding(response, location) {
+            if (response.summary.numResults < 1) {
+                return { fullAddress: '', address: {}, position: null };
+            }
+            const addr = response.addresses[0], position = (location ?? addr.position).split(',').map(i => parseFloat(i)), address = addr.address, fullAddress = address.freeformAddress;
+            return {
+                fullAddress, address: convertAddress$1(address), position: { lat: position[0], lng: position[1], altitude: position.length > 2 ? position[2] : null }
+            };
+        }
+    }
+    class PacemAzureOverlayAdapter extends PacemOverlayAdapter {
+        deleteOverlay(overlay, map) {
+            throw new Error("Method not implemented.");
+        }
+        buildOverlay(item, map) {
+            throw new Error("Method not implemented.");
+        }
+        setBounds(item, map, bounds) {
+            throw new Error("Method not implemented.");
+        }
+        updateOverlay(overlay, map, item) {
+            throw new Error("Method not implemented.");
+        }
+    }
+    class PacemAzureLayerAdapter extends PacemLayerAdapter {
+        addLoadEventListener(layer, map, callback) {
+            throw new Error("Method not implemented.");
+        }
+        removeLoadEventListener(layer, map, callback) {
+            throw new Error("Method not implemented.");
+        }
+        deleteLayer(layer, map) {
+            throw new Error("Method not implemented.");
+        }
+        buildLayer(item, map) {
+            throw new Error("Method not implemented.");
+        }
+    }
+    class PacemAzureMarkerAdapter extends PacemMarkerAdapter {
+        getMarkerPosition(marker) {
+            const position = marker.getOptions().position;
+            return AtlasMapUtils.getLatLng(position);
+        }
+        buildMarker(item, map) {
+            const marker = new atlas.HtmlMarker();
+            map.markers.add(marker);
+            marker.setOptions({ popup: new atlas.Popup() });
+            return marker;
+        }
+        addClickEventListener(marker, map, callback) {
+            map.events.add('click', marker, callback);
+        }
+        addDragEventListener(marker, map, callback) {
+            map.events.add('drag', marker, callback);
+        }
+        addDragEndEventListener(marker, map, callback) {
+            map.events.add('dragend', marker, callback);
+        }
+        _setPopupPosition(info, position) {
+            const popup = this._getPopup(info);
+            if (!pacemCore.Utils.isNull(popup)) {
+                popup.setOptions({ position });
+            }
+        }
+        setPosition(marker, position) {
+            const p = AtlasMapUtils.getPosition(position);
+            marker.setOptions({ position: p });
+            this._setPopupPosition(marker, p);
+        }
+        setIcon(marker, icon) {
+            let popupOptions = { pixelOffset: [0, -36 /* default marker size */] };
+            let options = { popup: new atlas.Popup() };
+            let fnIcon = (icon, w, h) => `<img width="${(w || 'auto')}" height="${(h || 'auto')}" style="pointer-events: none" src="${icon}" />`; //item.icon.url;
+            if (typeof icon === 'string') {
+                // icon url only
+                options.htmlContent = fnIcon(icon);
+            }
+            else if (!pacemCore.Utils.isNull(icon)) {
+                // structured icon
+                const size = icon.size, anchor = icon.anchor;
+                options.htmlContent = fnIcon(icon.url, size && size.width, size && size.height);
+                if (anchor) {
+                    options.anchor = "top-left";
+                    options.pixelOffset = [-anchor.x, -anchor.y];
+                    popupOptions.pixelOffset = [0, -anchor.y];
+                }
+                else if (size && size.height) {
+                    popupOptions.pixelOffset = [0, -size.height / 2];
+                }
+            }
+            options.popup.setOptions(popupOptions);
+            marker.setOptions(options);
+        }
+        setLabel(marker, label) {
+            let options = { text: label };
+            marker.setOptions(options);
+        }
+        setDraggable(marker, draggable) {
+            let options = { draggable };
+            marker.setOptions(options);
+        }
+        deleteMarker(marker, map) {
+            map.markers.remove(marker);
+        }
+        deleteInfoWindow(info, map) {
+            const popup = this._getPopup(info);
+            popup.remove();
+        }
+        closeInfo(info) {
+            const popup = this._getPopup(info);
+            if (popup?.isOpen() !== true) {
+                return;
+            }
+            popup.close();
+        }
+        openInfo(info, content, map, marker) {
+            const { popup, position } = info.getOptions();
+            this._setContent(popup, content, position);
+            marker.togglePopup();
+            map.events.addOnce('close', popup, (e) => {
+                popup.setOptions({ content: '' });
+            });
+        }
+        buildInfoWindow(item) {
+            return this.markers.get(item);
+        }
+        addCloseClickEventListener(info, map, callback) {
+            const popup = this._getPopup(info);
+            map.events.add('close', popup, callback);
+        }
+        setContent(info, content) {
+            /* unnecessary */
+            const { popup, position } = info.getOptions();
+            this._setContent(popup, content, position);
+        }
+        _getPopup(info) {
+            return info.getOptions().popup;
+        }
+        _setContent(popup, content, position) {
+            popup.setOptions({ content: `<div style="padding: 8px 24px 8px 8px;">${content}</div>`, position });
+        }
+    }
+    class PacemAzureShapeAdapter extends PacemShapeAdapter {
+        addDragStartEventListener(shape, callback) {
+            throw new Error("Method not implemented.");
+        }
+        deleteShape(shape, map) {
+            throw new Error("Method not implemented.");
+        }
+        getShapeBounds(shape) {
+            throw new Error("Method not implemented.");
+        }
+        getShapePosition(obj) {
+            throw new Error("Method not implemented.");
+        }
+        buildShape(item, map) {
+            throw new Error("Method not implemented.");
+        }
+        addClickEventListener(shape, callback) {
+            throw new Error("Method not implemented.");
+        }
+        addDragEventListener(shape, callback) {
+            throw new Error("Method not implemented.");
+        }
+        addDragEndEventListener(shape, callback) {
+            throw new Error("Method not implemented.");
+        }
+        setShape(shape, item) {
+            throw new Error("Method not implemented.");
+        }
+        setEditable(shape, editable) {
+            throw new Error("Method not implemented.");
+        }
+        setDraggable(shape, draggable) {
+            throw new Error("Method not implemented.");
+        }
+    }
+    //#region geocoders
+    class PacemAzureMapGeocoder {
+        _buildGeocodeRequest(key, search, maxResults = 10, language = '') {
+            // TODO: upgrade to newest version (see: https://www.npmjs.com/package/azure-maps-rest)
+            const url = 'https://atlas.microsoft.com/search/address/json?api-version=1.0';
+            const query = { 'subscription-key': key, query: search, limit: '' + maxResults, language };
+            return {
+                uri: pacemCore.Utils.URIs.appendQuery(url, query),
+                options: {
+                    mode: 'cors' //, headers: {}
+                }
+            };
+        }
+        parseGeocodeResponse(response) {
+            return new Promise((resolve, reject) => {
+                response.json().then((r) => {
+                    const retval = AtlasMapUtils.parseGeocoding(r);
+                    resolve(retval);
+                }, e => reject(e));
+            });
+        }
+        geocode(key, address, maxResults = 10, language = '') {
+            return new Promise((resolve, reject) => {
+                const request = this._buildGeocodeRequest(key, address, maxResults, language);
+                return fetch(request.uri, request.options).then(response => {
+                    if (response.ok) {
+                        this.parseGeocodeResponse(response).then(resolve, reject);
+                    }
+                    else {
+                        reject(response);
+                    }
+                }, e => reject(e));
+            });
+        }
+        reverseGeocode(key, latLng, language = '') {
+            return new Promise((resolve, reject) => {
+                const request = this._buildReverseRequest(key, latLng, language);
+                return fetch(request.uri, request.options).then(response => {
+                    if (response.ok) {
+                        this._parseReverseResponse(response).then(resolve, reject);
+                    }
+                    else {
+                        reject(response);
+                    }
+                }, e => reject(e));
+            });
+        }
+        _buildReverseRequest(key, position, language = '') {
+            // TODO: upgrade to newest version (see: https://atlas.microsoft.com/reverseGeocode?api-version=2023-06-01)
+            const url = 'https://atlas.microsoft.com/search/address/reverse/json?api-version=1.0';
+            const latLng = MapUtils.parseCoords(position);
+            const query = {
+                'subscription-key': key,
+                query: latLng[0] + ',' + latLng[1],
+                language
+            };
+            return {
+                uri: pacemCore.Utils.URIs.appendQuery(url, query),
+                options: {
+                    mode: 'cors' //, headers: {}
+                }
+            };
+        }
+        _parseReverseResponse(response) {
+            return new Promise((resolve, reject) => {
+                response.json().then((r) => {
+                    const retval = AtlasMapUtils.parseReverseGeocoding(r);
+                    resolve([retval]);
+                }, e => reject(e));
+            });
+        }
+    }
+    //#endregion
+    const MAP_EVENTS$1 = ['moveend', 'dragend', 'zoomend', 'rotateend'];
+    function getNativeMapStyle$1(options) {
+        const darkTheme = options.theme == MapColorScheme.DARK || (options.theme !== MapColorScheme.LIGHT && window.matchMedia('(prefers-color-scheme: dark)').matches);
+        switch (options.type) {
+            case 'satellite':
+            case 'satellite_road_labels':
+            case 'grayscale_dark':
+            case 'grayscale_light':
+            case 'night':
+            case 'road_shaded_relief':
+            case 'road':
+            case 'high_constrast_dark':
+            case 'high_constrast_light':
+                return options.type;
+            case MapType.HYBRID:
+                return 'satellite_road_labels';
+            case MapType.SATELLITE:
+                return 'satellite';
+            case MapType.TERRAIN:
+                return 'road_shaded_relief';
+            case MapType.HIGH_CONTRAST:
+                return darkTheme ? 'high_constrast_dark' : 'high_constrast_light';
+            default:
+                return darkTheme ? 'night' : 'road';
+        }
+    }
+    let PacemAzureMapAdapterElement = PacemAzureMapAdapterElement_1 = class PacemAzureMapAdapterElement extends PacemMapAdapterElement {
+        geocode(address, maxResults) {
+            return new PacemAzureMapGeocoder().geocode(this.subscriptionKey, address, maxResults, pacemCore.Utils.lang(this));
+        }
+        reverseGeocode(latLng, maxResults) {
+            return new PacemAzureMapGeocoder().reverseGeocode(this.subscriptionKey, latLng, pacemCore.Utils.lang(this));
+        }
+        getBounds(ctrl) {
+            const map = this.getMap(ctrl);
+            const { bounds } = map.getCamera();
+            return AtlasMapUtils.getLatLngBounds(bounds);
+        }
+        isActive() {
+            return !pacemCore.Utils.isNullOrEmpty(this.subscriptionKey);
+        }
+        buildOverlayAdapterFor(map) {
+            return new PacemAzureOverlayAdapter(map, this);
+        }
+        buildMarkerAdapterFor(map) {
+            return new PacemAzureMarkerAdapter(map, this);
+        }
+        buildShapeAdapterFor(map) {
+            return new PacemAzureShapeAdapter(map, this);
+        }
+        buildLayerAdapterFor(map) {
+            return new PacemAzureLayerAdapter(map, this);
+        }
+        setViewNative(ctrl, options) {
+            const map = this.getMap(ctrl);
+            // style
+            options = pacemCore.Utils.extend({ type: ctrl.type, theme: ctrl.theme }, options);
+            const style = getNativeMapStyle$1(options);
+            map.setStyle({ style });
+            const center = options.center && AtlasMapUtils.getPosition(options.center) || map.getCamera().center;
+            const zoom = options.zoom || map.getCamera().zoom;
+            map.setCamera({ center, zoom });
+        }
+        #listeners = new WeakMap();
+        snapshot(ctrl, type = 'image/png', quality) {
+            if (!this.hasMap(ctrl)) {
+                return Promise.reject();
+            }
+            const { map } = this.tryGetMap(ctrl);
+            return new Promise((resolve, _) => {
+                pacemCore.Utils.blobToDataURL(this.#blobs.get(ctrl)).then(dataUrl => {
+                    const container = map.getCanvasContainer();
+                    container.style.backgroundImage = `url(${dataUrl})`;
+                    container.style.backgroundSize = 'contain';
+                    pacemCore.Utils.snapshotElement(container, null, type, quality).then(resolve);
+                });
+            });
+        }
+        #blobs = new WeakMap();
+        // #region ABSTRACT IMPLEMENTATION
+        dispose(ctrl) {
+            if (!this.hasMap(ctrl)) {
+                return;
+            }
+            const { map } = this.tryGetMap(ctrl);
+            // detach listeners
+            const listeners = this.#listeners.get(ctrl);
+            listeners.forEach(listener => {
+                map.events.remove(listener.eventName, listener.handler);
+            });
+            // cleanup
+            this.#listeners.delete(ctrl);
+            // destroy map
+            map.dispose();
+        }
+        async init(container) {
+            await Promise.all([
+                pacemCore.CustomElementUtils.importjs(consts$2.API_JS),
+                pacemCore.CustomElementUtils.importcss(consts$2.API_CSS, undefined, true)
+            ]);
+            const ctrl = container;
+            const scale = ctrl.scale;
+            const draggable = ctrl.draggable;
+            const dblClickZoom = ctrl.doubleClickZoom;
+            const kbShortcuts = ctrl.keyboardShortcuts;
+            //
+            const center = AtlasMapUtils.getPosition(ctrl.center);
+            const mapOptions = {
+                center: center,
+                zoom: ctrl.zoom,
+                subscriptionKey: this.subscriptionKey,
+                dragPanInteraction: draggable,
+                scrollZoomInteraction: ctrl.mousewheel,
+                dblClickZoomInteraction: !dblClickZoom,
+                keyboardInteraction: kbShortcuts,
+                language: this.language || pacemCore.Utils.lang(container),
+            };
+            const canvas = ctrl.container;
+            const mapElement = document.createElement('div');
+            mapElement.id = `azure-maps-${pacemCore.Utils.uniqueCode()}`;
+            mapElement.style.width = '100%';
+            mapElement.style.height = '100%';
+            canvas.innerHTML = '';
+            canvas.appendChild(mapElement);
+            const map = new atlas.Map(mapElement.id, mapOptions);
+            const listeners = [];
+            this.#listeners.set(ctrl, listeners);
+            MAP_EVENTS$1.forEach((evt) => {
+                const handler = this._spinMapUpdateHandler(ctrl, map);
+                map.events.add(evt, handler);
+                listeners.push({ eventName: evt, handler });
+            });
+            if (scale && ctrl.zoomControl) {
+                map.events.addOnce('ready', (e) => {
+                    let pos = atlas.ControlPosition.NonFixed;
+                    switch (ctrl.zoomControl) {
+                        case 'topleft':
+                            pos = atlas.ControlPosition.TopLeft;
+                            break;
+                        case 'topright':
+                            pos = atlas.ControlPosition.TopRight;
+                            break;
+                        case 'bottomright':
+                            pos = atlas.ControlPosition.BottomRight;
+                            break;
+                        case 'bottomleft':
+                            pos = atlas.ControlPosition.BottomLeft;
+                            break;
+                    }
+                    map.controls.add(new atlas.control.ZoomControl(), { position: pos });
+                });
+            }
+            map.events.add('idle', (e) => {
+                map.getCanvas().toBlob(blob => {
+                    this.#blobs.set(container, blob);
+                });
+            });
+            map.events.addOnce('ready', () => {
+                container.dispatchEvent(new MapEvent("maploaded"));
+            });
+            return { map, container: mapElement };
+        }
+        invalidateSize(ctrl) {
+            if (!this.hasMap(ctrl)) {
+                return;
+            }
+            const { map } = this.tryGetMap(ctrl);
+            if (map) {
+                map.resize();
+            }
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first && name === 'language') {
+                for (let ctrl of this.enrolledMaps()) {
+                    const { map } = this.tryGetMap(ctrl);
+                    map.setStyle({ language: val || pacemCore.Utils.lang(ctrl) });
+                }
+            }
+        }
+        //#endregion
+        _spinMapUpdateHandler(ctrl, map) {
+            return () => {
+                this._updateMap(ctrl, map);
+            };
+        }
+        _updateMap(ctrl, map) {
+            if (!pacemCore.Utils.isNull(map) && !pacemCore.Utils.isNull(ctrl)) {
+                const camera = map.getCamera(), center = camera.center, zoom = camera.zoom;
+                if (camera.zoom === 1) {
+                    console.warn('Azure Maps control lacks in reflecting the actual map zoom onto the camera property. Cannot reflect info back to PacemMapElement.');
+                }
+                else
+                    this.updateMapElement(ctrl, AtlasMapUtils.getLatLng(center), zoom);
+            }
+        }
+        static _getBounds(ctrl) {
+            const paddingTop = ctrl.paddingTop || 0, paddingLeft = ctrl.paddingLeft || 0, paddingRight = ctrl.paddingRight || 0, paddingBottom = ctrl.paddingBottom || 0;
+            return { 'top': paddingTop, 'bottom': paddingBottom, 'left': paddingLeft, 'right': paddingRight };
+        }
+        fitBoundsNative(ctrl, bnds, padding = PacemAzureMapAdapterElement_1._getBounds(ctrl)) {
+            const map = this.getMap(ctrl);
+            // TODO: avoid double loop (specially for large sets), just set coords in 'correct' place for Azure maps right away...
+            map.setCamera({ bounds: AtlasMapUtils.getBounds(bnds), padding });
+            //} else {
+            //    if (bnds.length === 1) {
+            //        map.setCamera({ center: AtlasMapUtils.getPosition(bnds[0]), zoom: ctrl.zoom });
+            //    }
+            //}
+        }
+        ;
+    };
+    __decorate$2([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemAzureMapAdapterElement.prototype, "subscriptionKey", void 0);
+    __decorate$2([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemAzureMapAdapterElement.prototype, "language", void 0);
+    __decorate$2([
+        pacemCore.Debounce(500)
+    ], PacemAzureMapAdapterElement.prototype, "_updateMap", null);
+    PacemAzureMapAdapterElement = PacemAzureMapAdapterElement_1 = __decorate$2([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-map-adapter-azure' })
+    ], PacemAzureMapAdapterElement);
+    //}
+
+    var __decorate$1 = (undefined && undefined.__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;
+    };
+    // namespace Pacem.Components.Maps {
+    const consts$1 = {
+        API_JS: 'https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js', //'https://unpkg.com/leaflet@1.5.1/dist/leaflet.js',
+        API_JS_INTEGRITY: null, //'sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==',
+        API_CSS: 'https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css', //'https://unpkg.com/leaflet@1.5.1/dist/leaflet.css',
+        API_CSS_INTEGRITY: null // 'sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=='
+    };
+    function convertAddress(address) {
+        return {
+            city: address.city,
+            state: address.state,
+            provinceCode: address["ISO3166-2-lvl6"]?.split('-')[1],
+            province: address.county,
+            village: address.village,
+            zipCode: address.postcode,
+            streetName: address.road,
+            houseNumber: address.house_number,
+            countryCode: address.country_code?.toUpperCase(),
+            country: address.country
+        };
+    }
+    function convertResponse(r) {
+        return { fullAddress: r.display_name, address: convertAddress(r.address), position: { lat: parseFloat(r.lat), lng: parseFloat(r.lon), altitude: null } };
+    }
+    class LeafletUtils {
+        static toLiteral(bounds) {
+            const ne = bounds.getNorthEast(), sw = bounds.getSouthWest();
+            return { ne, sw };
+        }
+        static parseGeocoding(response) {
+            if (pacemCore.Utils.isNullOrEmpty(response)) {
+                return [];
+            }
+            return response.map(convertResponse);
+        }
+        static parseReverseGeocoding(response) {
+            if (pacemCore.Utils.isNullOrEmpty(response)) {
+                return [];
+            }
+            return [convertResponse(response)];
+        }
+    }
+    const LayerLoadEventName = "layerload";
+    class LayerLoadEvent extends pacemCore.CustomTypedEvent {
+        constructor(layer) {
+            super(LayerLoadEventName, layer, { bubbles: true });
+        }
+    }
+    class PacemLeafletMarkerAdapter extends PacemMarkerAdapter {
+        deleteInfoWindow(info, map) {
+            info.unbindPopup();
+        }
+        deleteMarker(marker, map) {
+            marker.removeFrom(map);
+        }
+        getMarkerPosition(marker) {
+            return marker.getLatLng();
+        }
+        buildMarker(item, map) {
+            return L.marker(item.position).addTo(map);
+        }
+        addClickEventListener(marker, map, callback) {
+            marker.on('click', callback);
+        }
+        addDragEventListener(marker, map, callback) {
+            marker.on('drag', callback);
+        }
+        addDragEndEventListener(marker, map, callback) {
+            marker.on('dragend', callback);
+        }
+        setPosition(marker, position) {
+            marker.setLatLng(position);
+        }
+        setIcon(marker, icon) {
+            const ctrl = this;
+            if (typeof icon === 'string') {
+                // icon url only
+                ctrl._setIcon(marker, icon);
+            }
+            else if (!pacemCore.Utils.isNull(icon)) {
+                // structured icon
+                let options = { iconUrl: icon.url };
+                if (!pacemCore.Utils.isNullOrEmpty(icon.size)) {
+                    pacemCore.Utils.extend(options, {
+                        iconSize: [icon.size.width, icon.size.height],
+                        iconAnchor: [icon.size.width / 2, icon.size.height],
+                        popupAnchor: [0, -icon.size.height]
+                    });
+                }
+                if (!pacemCore.Utils.isNullOrEmpty(icon.anchor)) {
+                    pacemCore.Utils.extend(options, {
+                        iconAnchor: [icon.anchor.x, icon.anchor.y]
+                    });
+                }
+                ctrl._setIcon(marker, new L.Icon(options));
+            }
+        }
+        setLabel(marker, label) {
+            // not available
+        }
+        setDraggable(marker, draggable) {
+            if (draggable === true) {
+                marker.dragging.enable();
+            }
+            else {
+                marker.dragging.disable();
+            }
+        }
+        closeInfo(marker) {
+            marker.closePopup();
+        }
+        openInfo(info, content, map, marker) {
+            info
+                .bindPopup(content /*, { offset: new L.Point( 0,  0) }*/)
+                .openPopup();
+        }
+        buildInfoWindow(item) {
+            return this.markers.get(item);
+        }
+        addCloseClickEventListener(marker, map, callback) {
+            marker.on('popupclose', callback);
+        }
+        setContent(marker, content) {
+            const popup = marker.getPopup();
+            if (popup && popup.getContent() != content) {
+                marker.setPopupContent(content);
+            }
+        }
+        _setIcon(marker, v) {
+            // legacy (deprecated)
+            if (typeof v === 'string') {
+                var icon = { 'iconUrl': v }, size, anchor, popup;
+                if ((size = this['size']) && /[\d]+,[\d]+/.test(size)) {
+                    var ndx = -1;
+                    var size0 = [parseInt(size.substring(0, (ndx = size.indexOf(',')))), parseInt(size.substring(ndx + 1))];
+                    Object.assign(icon, { 'iconSize': size0 });
+                }
+                if ((anchor = this['anchor']) && /[\d]+,[\d]+/.test(anchor)) {
+                    var ndx = -1;
+                    var anchor0 = [parseInt(anchor.substring(0, (ndx = anchor.indexOf(',')))), parseInt(anchor.substring(ndx + 1))];
+                    Object.assign(icon, { 'iconAnchor': anchor0, 'popupAnchor': [0, -anchor0[1]] });
+                }
+                if ((popup = this['popupAnchor']) && /[\d]+,[\d]+/.test(popup)) {
+                    var ndx = -1;
+                    var anchor0 = [parseInt(anchor.substring(0, (ndx = anchor.indexOf(',')))), parseInt(anchor.substring(ndx + 1))];
+                    Object.assign(icon, { 'popupAnchor': anchor0 });
+                }
+                marker.setIcon(L.icon(icon));
+            }
+            // good
+            else if (v)
+                marker.setIcon(v);
+        }
+    }
+    class PacemLeafletShapeAdapter extends PacemShapeAdapter {
+        addDragStartEventListener(shape, callback) {
+            throw new Error("Method not implemented.");
+        }
+        deleteShape(shape, map) {
+            throw new Error("Method not implemented.");
+        }
+        getShapeBounds(shape) {
+            throw new Error("Method not implemented.");
+        }
+        getShapePosition(obj) {
+            throw new Error("Method not implemented.");
+        }
+        buildShape(item, map) {
+            throw new Error("Method not implemented.");
+        }
+        addClickEventListener(shape, callback) {
+            throw new Error("Method not implemented.");
+        }
+        addDragEventListener(shape, callback) {
+            throw new Error("Method not implemented.");
+        }
+        addDragEndEventListener(shape, callback) {
+            throw new Error("Method not implemented.");
+        }
+        setShape(shape, item) {
+            throw new Error("Method not implemented.");
+        }
+        setEditable(shape, editable) {
+            throw new Error("Method not implemented.");
+        }
+        setDraggable(shape, draggable) {
+            throw new Error("Method not implemented.");
+        }
+    }
+    class PacemLeafletLayerAdapter extends PacemLayerAdapter {
+        addLoadEventListener(layer, map, callback) {
+            layer.on('load', callback);
+        }
+        removeLoadEventListener(layer, map, callback) {
+            layer.off('load', callback);
+        }
+        deleteLayer(layer, map) {
+            layer.remove();
+        }
+        buildLayer(item, map) {
+            const mode = (item.mode || '').toLowerCase();
+            switch (mode) {
+                case 'wms':
+                    return L.tileLayer.wms(item.url, { layers: (item.include || []).join(','), minZoom: item.minZoom, maxZoom: item.maxZoom, transparent: true, format: 'image/png' }).addTo(map);
+                default:
+                    return L.tileLayer(item.url, { tms: mode === 'tms', minZoom: item.minZoom, maxZoom: item.maxZoom }).addTo(map);
+            }
+        }
+    }
+    class PacemLeafletOverlayAdapter extends PacemOverlayAdapter {
+        deleteOverlay(overlay, map) {
+            throw new Error("Method not implemented.");
+        }
+        buildOverlay(item, map) {
+            throw new Error("Method not implemented.");
+        }
+        setBounds(item, map, bounds) {
+            throw new Error("Method not implemented.");
+        }
+        updateOverlay(overlay, map, item) {
+            throw new Error("Method not implemented.");
+        }
+    }
+    let PacemLeafletMapAdapterElement = class PacemLeafletMapAdapterElement extends PacemMapAdapterElement {
+        constructor() {
+            super(...arguments);
+            this.#tileLayers = new WeakMap();
+            this.tiles = '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+            this.attribution = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
+            this._tileLayerLoadHandler = (evt) => {
+                this.dispatchLayerLoadEvent(evt.sourceTarget);
+            };
+            //#endregion
+            this._mapUpdateHandler = (ctrl) => {
+                const map = this.getMap(ctrl);
+                if (!pacemCore.Utils.isNull(map) && !pacemCore.Utils.isNull(ctrl)) {
+                    this.updateMapElement(ctrl, map.getCenter(), map.getZoom());
+                }
+            };
+        }
+        buildOverlayAdapterFor(map) {
+            return new PacemLeafletOverlayAdapter(map, this);
+        }
+        geocode(address, maxResults) {
+            return new PacemNominatimMapGeocoder().geocode(address, maxResults, pacemCore.Utils.lang(this));
+        }
+        reverseGeocode(latLng, _) {
+            return new PacemNominatimMapGeocoder().reverseGeocode(latLng, pacemCore.Utils.lang(this));
+        }
+        getBounds(ctrl) {
+            const nativeMap = this.getMap(ctrl);
+            const bounds = nativeMap.getBounds();
+            return LeafletUtils.toLiteral(bounds);
+        }
+        isActive() {
+            return true;
+        }
+        setViewNative(ctrl, options) {
+            const map = this.getMap(ctrl);
+            if (options.center) {
+                map.setView(options.center, options.zoom ?? map.getZoom(), { animate: true });
+            }
+            else if (typeof options.zoom === 'number') {
+                map.setZoom(options.zoom, { animate: true });
+            }
+        }
+        buildMarkerAdapterFor(map) {
+            return new PacemLeafletMarkerAdapter(map, this);
+        }
+        buildShapeAdapterFor(map) {
+            return new PacemLeafletShapeAdapter(map, this);
+        }
+        buildLayerAdapterFor(map) {
+            return new PacemLeafletLayerAdapter(map, this);
+        }
+        #tileLayers;
+        snapshot(map, type = 'image/png', quality) {
+            return pacemCore.Utils.snapshotElement(map.container.firstElementChild, null, type, quality);
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            switch (name) {
+                case 'tiles':
+                    for (let map of this.enrolledMaps()) {
+                        this._redrawMap(map);
+                    }
+                default:
+                    for (let map of this.enrolledMaps()) {
+                        this.invalidateSize(map);
+                    }
+                    break;
+            }
+        }
+        // #region ABSTRACT IMPLEMENTATION
+        dispose(ctrl) {
+            const { map } = this.tryGetMap(ctrl);
+            const tiles = this.#tileLayers.get(ctrl);
+            if (tiles) {
+                tiles.off('load', this._tileLayerLoadHandler);
+            }
+            map.clearAllEventListeners();
+            this.#tileLayers.delete(ctrl);
+        }
+        async init(container) {
+            await Promise.all([pacemCore.CustomElementUtils.importjs(consts$1.API_JS, consts$1.API_JS_INTEGRITY, true),
+                pacemCore.CustomElementUtils.importcss(consts$1.API_CSS, consts$1.API_CSS_INTEGRITY, true)]);
+            const ctrl = container;
+            var scale = ctrl.scale;
+            var draggable = ctrl.draggable;
+            var dblClickZoom = ctrl.doubleClickZoom;
+            var kbShortcuts = ctrl.keyboardShortcuts;
+            //
+            var center = L.latLng(MapUtils.parseCoords(ctrl.center));
+            var mapOptions = {
+                zoomControl: scale && !pacemCore.Utils.isNullOrEmpty(ctrl.zoomControl),
+                scrollWheelZoom: ctrl.mousewheel,
+                dragging: draggable,
+                doubleClickZoom: !dblClickZoom,
+                keyboard: kbShortcuts
+            };
+            const canvas = ctrl.container;
+            const mapElement = document.createElement('div');
+            mapElement.style.width = '100%';
+            mapElement.style.height = '100%';
+            canvas.innerHTML = '';
+            canvas.appendChild(mapElement);
+            const map = L.map(mapElement, mapOptions);
+            ['zoomend', 'moveend'].forEach(evt => {
+                map.on(evt, _ => {
+                    this._idleFiller(ctrl);
+                    this._mapUpdateHandler(ctrl);
+                });
+            });
+            map.on('load', () => {
+                if (scale && ctrl.zoomControl) {
+                    map.zoomControl.setPosition(ctrl['zoomControl']);
+                }
+                this._idleFiller(ctrl);
+            });
+            const tiles = L.tileLayer(this.tiles, { attribution: this.attribution }).addTo(map);
+            tiles.on('load', this._tileLayerLoadHandler);
+            this.#tileLayers.set(ctrl, tiles);
+            // setting now the center and zoom, triggers the "load" event and activates the child-components, if any.
+            /*
+            LeafletJS docs: Map's "load" Event
+            "Fired when the map is initialized (when its center and zoom are set for the first time)."
+            (http://leafletjs.com/reference.html#map-events)
+            */
+            map.setView(center, ctrl.zoom);
+            // first-load
+            map.once('idle', function () {
+                map.fire('resize');
+                container.dispatchEvent(new MapEvent("maploaded"));
+            });
+            // call setView NOW to trigger the load event :(
+            const cnt = MapUtils.parseCoords(ctrl.center), xpr = [cnt[0], cnt[1]];
+            map.setView(xpr, ctrl.zoom);
+            return { map, container: mapElement };
+        }
+        dispatchLayerLoadEvent(layer) {
+            this.dispatchEvent(new LayerLoadEvent(layer));
+        }
+        invalidateSize(ctrl) {
+            if (this.hasMap(ctrl)) {
+                const map = this.getMap(ctrl);
+                map.invalidateSize();
+            }
+        }
+        _idleFiller(ctrl) {
+            if (this.hasMap(ctrl)) {
+                const map = this.getMap(ctrl);
+                map.fire('idle');
+            }
+        }
+        fitBoundsNative(ctrl, bounds, padding = { top: ctrl.paddingTop || 0, left: ctrl.paddingLeft || 0, right: ctrl.paddingRight || 0, bottom: ctrl.paddingBottom || 0 }) {
+            const map = this.getMap(ctrl);
+            const pads = { 'paddingTopLeft': new L.Point(padding.left, padding.top), 'paddingBottomRight': new L.Point(padding.right, padding.bottom) };
+            const ne = bounds.ne, sw = bounds.sw;
+            try {
+                map.fitBounds([[ne.lat, ne.lng], [sw.lat, sw.lng]], pads);
+            }
+            catch (e) {
+                throw e;
+            }
+        }
+        ;
+        _redrawMap(map) {
+            var ctrl = this, tileLayer = ctrl.#tileLayers.get(map);
+            if (!pacemCore.Utils.isNull(ctrl.tiles && tileLayer)) {
+                tileLayer.setUrl(ctrl.tiles);
+            }
+        }
+    };
+    __decorate$1([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemLeafletMapAdapterElement.prototype, "tiles", void 0);
+    __decorate$1([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemLeafletMapAdapterElement.prototype, "attribution", void 0);
+    __decorate$1([
+        pacemCore.Debounce(500)
+    ], PacemLeafletMapAdapterElement.prototype, "_idleFiller", null);
+    PacemLeafletMapAdapterElement = __decorate$1([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-map-adapter-leaflet' })
+    ], PacemLeafletMapAdapterElement);
+    //#region geocoders
+    class PacemNominatimMapGeocoder {
+        _buildGeocodeRequest(search, maxResults = 10, language = '') {
+            // https://nominatim.openstreetmap.org/search?addressdetails=1&format=json&limit={limit}&accept-language={culture}&q={q}
+            const url = 'https://nominatim.openstreetmap.org/search?addressdetails=1&format=json';
+            const query = { q: search, limit: '' + maxResults, 'accept-language': language };
+            return {
+                uri: pacemCore.Utils.URIs.appendQuery(url, query),
+                options: {
+                    mode: 'cors' //, headers: {}
+                }
+            };
+        }
+        parseGeocodeResponse(response) {
+            return new Promise((resolve, reject) => {
+                response.json().then((r) => {
+                    const retval = LeafletUtils.parseGeocoding(r);
+                    resolve(retval);
+                }, e => reject(e));
+            });
+        }
+        geocode(address, maxResults = 10, language = '') {
+            return new Promise((resolve, reject) => {
+                const request = this._buildGeocodeRequest(address, maxResults, language);
+                return fetch(request.uri, request.options).then(response => {
+                    if (response.ok) {
+                        this.parseGeocodeResponse(response).then(resolve, reject);
+                    }
+                    else {
+                        reject(response);
+                    }
+                }, e => reject(e));
+            });
+        }
+        reverseGeocode(latLng, language = '') {
+            return new Promise((resolve, reject) => {
+                const request = this._buildReverseRequest(latLng, language);
+                return fetch(request.uri, request.options).then(response => {
+                    if (response.ok) {
+                        this._parseReverseResponse(response).then(resolve, reject);
+                    }
+                    else {
+                        reject(response);
+                    }
+                }, e => reject(e));
+            });
+        }
+        _buildReverseRequest(position, language = '') {
+            // https://nominatim.openstreetmap.org/reverse?addressdetails=1&format=json&accept-language={culture}&lat={lat}&lon={lng}
+            const url = 'https://nominatim.openstreetmap.org/reverse?addressdetails=1&format=json';
+            const latLng = MapUtils.parseCoords(position);
+            const query = {
+                lat: '' + latLng[0],
+                lon: '' + latLng[1],
+                'accept-language': language
+            };
+            return {
+                uri: pacemCore.Utils.URIs.appendQuery(url, query),
+                options: {
+                    mode: 'cors' //, headers: {}
+                }
+            };
+        }
+        _parseReverseResponse(response) {
+            return new Promise((resolve, reject) => {
+                response.json().then((r) => {
+                    const retval = LeafletUtils.parseReverseGeocoding(r);
+                    resolve(retval);
+                }, e => reject(e));
+            });
+        }
+    }
+    //#endregion
+    //}
+
+    var __decorate = (undefined && undefined.__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;
+    };
+    // namespace Pacem.Components.Maps {
+    const consts = {
+        DETACH_TIMEOUT: 200,
+        /**@deprecated */
+        API_URI: 'https://maps.googleapis.com/maps/api/js',
+        MAX_ROADMAP_ZOOM: 22,
+        //MAX_SATELLITE_ZOOM: 22,
+        BOOTSTRAP_SNIPPET: (key, lang, region, v) => {
+            return `(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=\`https://maps.$\{c\}apis.com/maps/api/js?\`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
+            key: "${key}", v: "${v}", language: "${lang}", region: "${region}",
+    // Add other bootstrap parameters as needed, using camel case.
+  });`;
+        },
+        MAPS_NOT_FOUND: 'google.maps not found.',
+        GEOCODER_UNAVAILABLE: 'google.maps geocoder unavailable.',
+        INVALID_KEY: 'invalid google.maps api key.',
+        TILE_EXTENT: [-Math.PI * 6378137, Math.PI * 6378137],
+    };
+    class Bootstrapper {
+        #promise;
+        #params;
+        _equivalent(key, language, region, version) {
+            const guard = this.#params;
+            return !pacemCore.Utils.isNull(guard)
+                && guard.key === key
+                // fallback on curreny values when not explicitated
+                && guard.language === (language || guard.language)
+                && guard.region === (region || guard.region)
+                && guard.version === (version || guard.version);
+        }
+        _spinFuture(key, language, region, version) {
+            return new Promise((resolve, reject) => {
+                // check if already bootstrapped with the same variables
+                if (!this._equivalent(key, language, region, version)) {
+                    Bootstrapper._ensureBootstrapScript(key, language, region, version);
+                }
+                this.#params = { language, region, version, key };
+                google.maps.importLibrary("maps").then(_ => {
+                    resolve();
+                    this.#promise = null;
+                }, e => {
+                    reject(e);
+                    this.#promise = null;
+                });
+            });
+        }
+        boostrap(key, language, region, version = 'weekly') {
+            if (pacemCore.Utils.isNullOrEmpty(key)) {
+                return Promise.reject(consts.INVALID_KEY);
+            }
+            if (pacemCore.Utils.isNull(this.#promise) || !this._equivalent(key, language, region, version)) {
+                this.#promise = this._spinFuture(key, language, region, version);
+            }
+            return this.#promise;
+        }
+        static _ensureBootstrapScript(key, language, region, v) {
+            const uniqueAttrName = 'pacem-googlemaps';
+            const uniqueAttrValue = `v=${v},l=${language},r=${region}`;
+            let script = document.querySelector(`script[${uniqueAttrName}]`);
+            if (!pacemCore.Utils.isNull(script)) {
+                if (script.getAttribute(uniqueAttrName) === uniqueAttrValue) {
+                    return;
+                }
+                else {
+                    script.remove();
+                    document.querySelectorAll('script[src^=\'https://maps.googleapis.com/maps\']').forEach(i => i.remove());
+                    delete window['google'];
+                }
+            }
+            if (pacemCore.Utils.isNullOrEmpty(key)) {
+                return;
+            }
+            script = document.createElement('script');
+            script.setAttribute(uniqueAttrName, uniqueAttrValue);
+            script.textContent = consts.BOOTSTRAP_SNIPPET(key, language, region, v);
+            document.head.appendChild(script);
+        }
+    }
+    /** Bootstrapper singleton. */
+    const bootstrapper = new Bootstrapper();
+    class GMapsUtils {
+        static getPosition(latLng) {
+            if (Array.isArray(latLng)) {
+                return { lat: latLng[0], lng: latLng[1] };
+            }
+            return latLng;
+        }
+        static getBounds(bnds) {
+            if (pacemCore.Utils.isNullOrEmpty(bnds)) {
+                return null;
+            }
+            return { north: bnds.ne.lat, east: bnds.ne.lng, south: bnds.sw.lat, west: bnds.sw.lng };
+        }
+        static mapGeocodeResults(a, b = []) {
+            const retval = [];
+            a ??= [];
+            for (let j = 0; j < a.length; j++) {
+                const elevation = b.length > j ? b[j] : null;
+                const address = GMapsUtils.mapGeocodeResult(a[j], elevation);
+                retval.push(address);
+            }
+            return retval;
+        }
+        static mapGeocodeResult(a, b) {
+            const address = a?.address_components || [];
+            const buildingNumber = address.find(a => a.types.indexOf('street_number') >= 0)?.long_name;
+            const streetName = address.find(a => a.types.indexOf('route') >= 0)?.long_name;
+            const city = address.find(a => a.types.indexOf('locality') >= 0)?.long_name;
+            const comune = address.find(a => a.types.indexOf("administrative_area_level_3") >= 0)?.long_name;
+            const provinceObj = address.find(a => a.types.indexOf("administrative_area_level_2") >= 0);
+            const region = address.find(a => a.types.indexOf("administrative_area_level_1") >= 0)?.short_name;
+            const countryObj = address.find(a => a.types.indexOf("country") >= 0);
+            const zipCode = address.find(a => a.types.indexOf("postal_code") >= 0)?.short_name;
+            const structuredAddress = {
+                houseNumber: buildingNumber,
+                city: comune || city,
+                provinceCode: provinceObj?.short_name,
+                province: provinceObj?.long_name,
+                countryCode: countryObj?.short_name,
+                country: countryObj?.long_name,
+                zipCode,
+                streetName,
+                state: region,
+                village: city,
+                type: a.geometry.location_type
+            };
+            const retval = {
+                fullAddress: a.formatted_address,
+                position: GMapsUtils.toLiteral(a.geometry.location, b?.elevation),
+                address: structuredAddress
+            };
+            return retval;
+        }
+        static toLiteral(l, e) {
+            if (pacemCore.Utils.isNull(l)) {
+                return null;
+            }
+            if ('lat' in l && typeof l.lat === 'function' && 'lng' in l && typeof l.lng === 'function') {
+                return { lat: l.lat(), lng: l.lng(), altitude: e };
+            }
+            if ('getNorthEast' in l && typeof l.getNorthEast === 'function' && 'getSouthWest' in l && typeof l.getSouthWest === 'function') {
+                const ne = l.getNorthEast(), sw = l.getSouthWest();
+                return { ne: GMapsUtils.toLiteral(ne), sw: GMapsUtils.toLiteral(sw) };
+            }
+            if ('north' in l && typeof l.north === 'number'
+                && 'south' in l && typeof l.south === 'number'
+                && 'west' in l && typeof l.west === 'number'
+                && 'east' in l && typeof l.east === 'number') {
+                return {
+                    ne: { lat: l.north, lng: l.east }, sw: { lat: l.south, lng: l.west }
+                };
+            }
+            return pacemCore.Utils.extend({ altitude: e }, l);
+        }
+        static areEqual(l1, l2) {
+            if (pacemCore.Utils.isNull(l1) || pacemCore.Utils.isNull(l2)) {
+                return false;
+            }
+            const latLng1 = GMapsUtils.toLiteral(l1), latLng2 = GMapsUtils.toLiteral(l2);
+            return latLng1.lat === latLng2.lat && latLng1.lng === latLng2.lng;
+        }
+        static fitBounds(map, bnds, padding) {
+            //map.panToBounds(bnds, padding);
+            map?.fitBounds(bnds, padding);
+        }
+        static setCenter(map, center) {
+            if (!pacemCore.Utils.isNull(map) && !GMapsUtils.areEqual(map.getCenter(), center)) {
+                map.panTo(center);
+                //map.setCenter(center);
+            }
+        }
+    }
+    class PacemGoogleShapeAdapter extends PacemShapeAdapter {
+        getShapeBounds(shape) {
+            const bnds = new google.maps.LatLngBounds();
+            if (shape instanceof google.maps.Circle) {
+                const b = shape.getBounds();
+                if (b) {
+                    bnds.extend(b.getNorthEast());
+                    bnds.extend(b.getSouthWest());
+                }
+            }
+            else if (shape instanceof google.maps.Polygon) {
+                shape.getPath().forEach(l => bnds.extend(l));
+            }
+            else if (shape instanceof google.maps.Polyline) {
+                shape.getPath().forEach(l => bnds.extend(l));
+            }
+            if (bnds.isEmpty() !== false) {
+                return LatLngBounds.Empty;
+            }
+            return GMapsUtils.toLiteral(bnds);
+        }
+        deleteShape(shape, map) {
+            shape.setMap(null);
+        }
+        getShapePosition(obj) {
+            if ('latLng' in obj) {
+                return obj.latLng;
+            }
+            return null;
+        }
+        buildShape(item, map) {
+            const clickable = true;
+            if (item instanceof PacemMapPolylineElement) {
+                return new google.maps.Polyline({
+                    path: item.vertices,
+                    clickable,
+                    map
+                });
+            }
+            if (item instanceof PacemMapPolygonElement) {
+                return new google.maps.Polygon({
+                    paths: [item.vertices],
+                    clickable,
+                    map
+                });
+            }
+            if (item instanceof PacemMapCircleElement) {
+                return new google.maps.Circle({
+                    center: item.center,
+                    radius: item.radius,
+                    clickable,
+                    map
+                });
+            }
+            return null;
+        }
+        addClickEventListener(shape, callback) {
+            shape.addListener('click', callback);
+        }
+        addDragEventListener(shape, callback) {
+            shape.addListener('drag', callback);
+        }
+        addDragStartEventListener(shape, callback) {
+            shape.addListener('dragstart', callback);
+        }
+        addDragEndEventListener(shape, callback) {
+            shape.addListener('dragend', callback);
+        }
+        setShape(shape, item) {
+            if (item instanceof PacemMapPolylineElement) {
+                const polyline = shape;
+                polyline.setOptions({
+                    strokeColor: item.stroke?.color,
+                    strokeOpacity: item.stroke?.alpha ?? 1,
+                    strokeWeight: item.stroke?.thickness,
+                    path: item.vertices,
+                });
+            }
+            if (item instanceof PacemMapPolygonElement) {
+                const polygon = shape;
+                polygon.setOptions({
+                    strokeColor: item.stroke?.color,
+                    strokeOpacity: item.stroke?.alpha ?? 1,
+                    strokeWeight: item.stroke?.thickness,
+                    strokePosition: google.maps.StrokePosition.CENTER,
+                    fillColor: item.fill?.color,
+                    fillOpacity: item.fill?.alpha,
+                    paths: [item.vertices]
+                });
+            }
+            if (item instanceof PacemMapCircleElement) {
+                const circle = shape;
+                circle.setOptions({
+                    strokeColor: item.stroke?.color,
+                    strokeOpacity: item.stroke?.alpha ?? 1,
+                    strokeWeight: item.stroke?.thickness,
+                    strokePosition: google.maps.StrokePosition.CENTER,
+                    fillColor: item.fill?.color,
+                    fillOpacity: item.fill?.alpha,
+                    center: item.center,
+                    radius: item.radius
+                });
+            }
+        }
+        setEditable(shape, editable) {
+            shape.setOptions({
+                editable
+            });
+        }
+        setDraggable(shape, draggable) {
+            shape.setOptions({
+                draggable
+            });
+        }
+    }
+    class PacemGoogleMarkerAdapter extends PacemMarkerAdapter {
+        deleteInfoWindow(info, map) {
+            info.unbindAll();
+        }
+        deleteMarker(marker, map) {
+            marker.setMap(null);
+        }
+        get mapAutomaticallyScrollsOnDrag() {
+            return true;
+        }
+        getMarkerPosition(marker) {
+            const latLng = marker.getPosition();
+            return { lat: latLng.lat(), lng: latLng.lng() };
+        }
+        buildMarker(item, map) {
+            return new google.maps.Marker({
+                position: item.position,
+                map
+            });
+        }
+        addClickEventListener(marker, map, callback) {
+            marker.addListener('click', callback);
+        }
+        addDragEventListener(marker, map, callback) {
+            marker.addListener('drag', callback);
+        }
+        addDragEndEventListener(marker, map, callback) {
+            marker.addListener('dragend', callback);
+        }
+        setPosition(marker, position) {
+            marker.setPosition(position);
+        }
+        setIcon(marker, icon) {
+            if (typeof icon === 'string') {
+                // icon url only
+                marker.setIcon(icon);
+            }
+            else if (!pacemCore.Utils.isNull(icon)) {
+                // structured icon
+                let options = { url: icon.url };
+                if (!pacemCore.Utils.isNullOrEmpty(icon.size)) {
+                    options.size = new google.maps.Size(icon.size.width, icon.size.height);
+                    options.anchor = new google.maps.Point(icon.size.width / 2, icon.size.height);
+                }
+                if (!pacemCore.Utils.isNullOrEmpty(icon.anchor)) {
+                    options.anchor = new google.maps.Point(icon.anchor.x, icon.anchor.y);
+                }
+                marker.setIcon(options);
+            }
+        }
+        setLabel(marker, label) {
+            marker.setLabel(label);
+        }
+        setDraggable(marker, draggable) {
+            marker.setDraggable(draggable);
+        }
+        closeInfo(info) {
+            info.close();
+        }
+        openInfo(info, _, map, marker) {
+            info.open(map, marker);
+        }
+        buildInfoWindow(item) {
+            let offsX = 0;
+            if (typeof item.icon !== 'string' && !pacemCore.Utils.isNull(item.icon)) {
+                offsX = ((item.icon.size?.width ?? 0) / 2) -
+                    (item.icon.anchor?.x ?? 0);
+            }
+            return new google.maps.InfoWindow({
+                pixelOffset: new google.maps.Size(-offsX, 0)
+            });
+        }
+        addCloseClickEventListener(info, map, callback) {
+            info.addListener('closeclick', callback);
+        }
+        setContent(info, content) {
+            info.setContent(content);
+        }
+    }
+    class PacemGoogleLayerAdapter extends PacemLayerAdapter {
+        addLoadEventListener(layer, map, callback) {
+            layer.addListener('tilesloaded', callback);
+        }
+        removeLoadEventListener(layer, map, callback) {
+            // not necessary
+        }
+        deleteLayer(layer, map) {
+            const layers = map.overlayMapTypes.getArray();
+            const index = layers.findIndex(v => v === layer);
+            if (index >= 0) {
+                map.overlayMapTypes.removeAt(index);
+            }
+        }
+        _getBounds(x, y, zoom) {
+            const ext = consts.TILE_EXTENT;
+            var tileSize = (ext[1] * 2) / Math.pow(2, zoom);
+            var minx = ext[0] + x * tileSize;
+            var maxx = ext[0] + (x + 1) * tileSize;
+            // remember y origin starts at top
+            var miny = ext[1] - (y + 1) * tileSize;
+            var maxy = ext[1] - y * tileSize;
+            return [minx, miny, maxx, maxy];
+        }
+        _getWmsTileUrl(url, layers) {
+            return (coords, zoom) => {
+                const tileUrl = pacemCore.Utils.URIs.appendQuery(url, {
+                    service: 'WMS', styles: '', transparent: 'true',
+                    request: 'GetMap', srs: 'EPSG:3857', format: 'image/png', version: '1.1.1',
+                    layers: layers?.join(',') || '', width: '256', height: '256',
+                    bbox: this._getBounds(coords.x, coords.y, zoom).join(',')
+                });
+                return tileUrl;
+            };
+        }
+        _getWmsLayer(item, map) {
+            const wmsLayer = new google.maps.ImageMapType({
+                getTileUrl: this._getWmsTileUrl(item.url, item.include),
+                //name: item.id,
+                //alt: "TODO",
+                minZoom: item.minZoom,
+                maxZoom: item.maxZoom,
+                opacity: 1 /* TODO */,
+            });
+            map.overlayMapTypes.push(wmsLayer);
+            return wmsLayer;
+        }
+        _getTmsTileUrl(template) {
+            const subdomains = 'abc';
+            function getSubDomain(tilePoint) {
+                const index = Math.abs(tilePoint.x + tilePoint.y) % subdomains.length;
+                return subdomains[index];
+            }
+            //{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
+            return (coords, zoom) => {
+                const data = {
+                    r: /*retina ? '@2x' :*/ '',
+                    s: getSubDomain(coords),
+                    x: '' + coords.x,
+                    y: '' + coords.y,
+                    z: '' + zoom
+                };
+                let tileUrl = template;
+                for (let prop in data) {
+                    tileUrl = tileUrl.replaceAll('{' + prop + '}', data[prop]);
+                }
+                return tileUrl;
+            };
+        }
+        _getTmsLayer(item, map) {
+            const wmsLayer = new google.maps.ImageMapType({
+                getTileUrl: this._getTmsTileUrl(item.url),
+                //name: item.id,
+                //alt: "TODO",
+                minZoom: item.minZoom,
+                maxZoom: item.maxZoom,
+                opacity: 1 /* TODO */,
+            });
+            map.overlayMapTypes.push(wmsLayer);
+            return wmsLayer;
+        }
+        buildLayer(item, map) {
+            const mode = (item.mode || '').toLowerCase();
+            switch (mode) {
+                case 'wms':
+                    return this._getWmsLayer(item, map);
+                case 'tms':
+                    return this._getTmsLayer(item, map);
+                default:
+                    throw new Error(`"${item.mode}" overlays not supported for the Google Maps integration.`);
+            }
+        }
+    }
+    function createOverlay(item) {
+        //#region closure classes
+        class PacemGoogleOverlay extends google.maps.OverlayView {
+            constructor(_item) {
+                super();
+                this._item = _item;
+            }
+            get element() {
+                return this._item;
+            }
+            get bounds() {
+                const bounds = this._item.bounds;
+                if (pacemCore.Utils.isNull(bounds)) {
+                    return null;
+                }
+                return GMapsUtils.getBounds(bounds);
+            }
+            getBoundingBox() {
+                const proj = this.getProjection(), bounds = this.bounds;
+                if (pacemCore.Utils.isNullOrEmpty(bounds)) {
+                    return null;
+                }
+                const sw = proj.fromLatLngToDivPixel({ lat: bounds.south, lng: bounds.west });
+                const ne = proj.fromLatLngToDivPixel({ lat: bounds.north, lng: bounds.east });
+                return { x: sw.x, y: ne.y, width: ne.x - sw.x, height: sw.y - ne.y };
+            }
+        }
+        class PacemGoogleImageOverlay extends PacemGoogleOverlay {
+            get src() {
+                return this.element.src;
+            }
+            #div;
+            onAdd() {
+                // TODO: switch to canvas
+                const div = this.#div = this.#div || document.createElement('div');
+                div.style.position = 'absolute';
+                const panes = this.getPanes();
+                panes.overlayLayer.appendChild(div);
+            }
+            onRemove() {
+                const div = this.#div;
+                if (!pacemCore.Utils.isNull(div)) {
+                    div.remove();
+                    this.#div = null;
+                }
+            }
+            draw() {
+                const div = this.#div;
+                if (pacemCore.Utils.isNull(div)) {
+                    return;
+                }
+                const bbox = this.getBoundingBox();
+                if (pacemCore.Utils.isNull(bbox)) {
+                    return;
+                }
+                div.style.top = bbox.y + 'px';
+                div.style.left = bbox.x + 'px';
+                div.style.width = bbox.width + 'px';
+                div.style.height = bbox.height + 'px';
+                div.style.backgroundSize = `${bbox.width}px ${bbox.height}px`;
+                div.style.backgroundImage = `url(${this.src})`;
+            }
+        }
+        //#endregion
+        if (item instanceof PacemMapOverlayImageElement) {
+            return new PacemGoogleImageOverlay(item);
+        }
+        return null;
+    }
+    class PacemGoogleOverlayAdapter extends PacemOverlayAdapter {
+        updateOverlay(overlay, map, item) {
+            overlay.set;
+            overlay.draw();
+        }
+        deleteOverlay(overlay, map) {
+            overlay.setMap(null);
+        }
+        buildOverlay(item, map) {
+            let overlay = createOverlay(item);
+            overlay.setMap(map);
+            return overlay;
+        }
+        setBounds(item, map, bounds) {
+            item.draw();
+        }
+    }
+    const MAP_EVENTS = ['dragend', 'zoom_changed', 'center_changed', 'maptypeid_changed', 'tilt_changed', 'heading_changed', 'bounds_changed'];
+    function getNativeMapStyle(options) {
+        const theme = options.theme == MapColorScheme.DARK ? google.maps.ColorScheme.DARK : (options.theme != MapColorScheme.LIGHT ? google.maps.ColorScheme.FOLLOW_SYSTEM : google.maps.ColorScheme.LIGHT);
+        switch (options.type) {
+            case google.maps.MapTypeId.HYBRID:
+            case google.maps.MapTypeId.ROADMAP:
+            case google.maps.MapTypeId.TERRAIN:
+            case google.maps.MapTypeId.SATELLITE:
+                return { type: options.type, theme };
+            case MapType.HYBRID:
+                return { type: google.maps.MapTypeId.HYBRID, theme };
+            case MapType.SATELLITE:
+                return { type: google.maps.MapTypeId.SATELLITE, theme };
+            case MapType.TERRAIN:
+                return { type: google.maps.MapTypeId.TERRAIN, theme };
+            default:
+                return { type: google.maps.MapTypeId.ROADMAP, theme };
+        }
+    }
+    let PacemGoogleMapAdapterElement = class PacemGoogleMapAdapterElement extends PacemMapAdapterElement {
+        geocode(address, maxResults) {
+            const language = this.language || '', region = this.region || '', version = this.version || 'weekly';
+            const geocoder = new PacemGoogleMapGeocoder(this.apiKey, language, region, version);
+            return geocoder.geocode(address, maxResults);
+        }
+        reverseGeocode(latLng, maxResults) {
+            const language = this.language || '', region = this.region || '', version = this.version || 'weekly';
+            const geocoder = new PacemGoogleMapGeocoder(this.apiKey, language, region, version);
+            return geocoder.reverseGeocode(latLng, maxResults);
+        }
+        getBounds(map) {
+            if (!this.hasMap(map)) {
+                return LatLngBounds.Empty;
+            }
+            const nativeMap = this.getMap(map);
+            const retval = nativeMap.getBounds();
+            return GMapsUtils.toLiteral(retval);
+        }
+        isActive() {
+            return !pacemCore.Utils.isNullOrEmpty(this.apiKey);
+        }
+        buildMarkerAdapterFor(map) {
+            return new PacemGoogleMarkerAdapter(map, this);
+        }
+        buildOverlayAdapterFor(map) {
+            return new PacemGoogleOverlayAdapter(map, this);
+        }
+        buildShapeAdapterFor(map) {
+            return new PacemGoogleShapeAdapter(map, this);
+        }
+        buildLayerAdapterFor(map) {
+            return new PacemGoogleLayerAdapter(map, this);
+        }
+        getMaxAvailableZoom(latLng) {
+            return new Promise((resolve, reject) => {
+                const svc = new google.maps.MaxZoomService();
+                svc.getMaxZoomAtLatLng(latLng, result => {
+                    if (result.status === google.maps.MaxZoomStatus.OK) {
+                        resolve(result.zoom);
+                    }
+                    else {
+                        reject();
+                    }
+                });
+            });
+        }
+        #listeners = new WeakMap();
+        snapshot(ctrl, type = 'image/png', quality) {
+            const { container } = this.tryGetMap(ctrl);
+            return pacemCore.Utils.snapshotElement(container, null, type, quality);
+        }
+        setViewNative(ctrl, options) {
+            const map = this.getMap(ctrl);
+            options = pacemCore.Utils.extend({ type: ctrl.type, theme: ctrl.theme }, options);
+            const { type, theme } = getNativeMapStyle(options);
+            if (this.#bootstrapped && theme !== map.get('colorScheme')) {
+                this._bootstrapDebounced();
+                return;
+            }
+            map.setOptions({ colorScheme: theme, mapTypeId: type });
+            if (typeof options.tilt === 'number') {
+                map.setTilt(options.tilt);
+            }
+            if (typeof options.heading === 'number') {
+                map.setHeading(options.heading);
+            }
+            // `setZoom` BEFORE
+            // calling `panTo` method, otherwise
+            // no smooth transition will be applied.
+            const fnSetCenter = () => {
+                if (options.center) {
+                    GMapsUtils.setCenter(map, options.center);
+                }
+            };
+            if (typeof options.zoom === 'number' && options.zoom !== map.getZoom()) {
+                const mapType = map.getMapTypeId();
+                switch (mapType) {
+                    case google.maps.MapTypeId.SATELLITE:
+                    case google.maps.MapTypeId.HYBRID:
+                        // async retrieve
+                        const currentCenter = GMapsUtils.toLiteral(map.getCenter());
+                        this.getMaxAvailableZoom(currentCenter).then(z => {
+                            const zoom = Math.min(z, options.zoom);
+                            map.setZoom(zoom);
+                            fnSetCenter();
+                        });
+                        break;
+                    default:
+                        const zoom = Math.min(consts.MAX_ROADMAP_ZOOM, options.zoom);
+                        map.setZoom(zoom);
+                        fnSetCenter();
+                        break;
+                }
+            }
+            else {
+                fnSetCenter();
+            }
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first) {
+                switch (name) {
+                    case 'libraries':
+                    case 'apiKey':
+                    case 'language':
+                    case 'region':
+                        if (this.#bootstrapped) {
+                            this._bootstrapDebounced();
+                        }
+                        break;
+                    case 'defaultOptions':
+                        for (let map of this.enrolledMaps()) {
+                            this._updateMapOptions(map);
+                        }
+                        break;
+                    default:
+                        for (let map of this.enrolledMaps()) {
+                            this.invalidateSize(map);
+                        }
+                        break;
+                }
+            }
+        }
+        // #region ABSTRACT IMPLEMENTATION
+        dispose(map) {
+            const listeners = this.#listeners.get(map);
+            while (listeners.length) {
+                google.maps.event.removeListener(listeners.pop());
+            }
+            this.#listeners.delete(map);
+        }
+        _updateMapOptions(ctrl) {
+            if (!this.hasMap(ctrl)) {
+                return;
+            }
+            const { map } = this.tryGetMap(ctrl);
+            map.setOptions(this._buildMapOptions(ctrl));
+        }
+        _buildMapOptions(ctrl) {
+            const scale = ctrl.scale;
+            const draggable = ctrl.draggable;
+            const dblClickZoom = ctrl.doubleClickZoom;
+            const kbShortcuts = ctrl.keyboardShortcuts;
+            const { type: mapTypeId, theme: colorScheme } = getNativeMapStyle({ type: ctrl.type, theme: ctrl.theme });
+            return pacemCore.Utils.extend({}, this.defaultOptions || { streetViewControl: false, zoomControl: false, mapTypeControl: false, fullscreenControl: false, cameraControl: false }, {
+                zoomControl: scale && !pacemCore.Utils.isNullOrEmpty(ctrl.zoomControl),
+                zoomControlOptions: {
+                    position: (function (zpos) {
+                        switch (zpos) {
+                            case 'topright':
+                                return google.maps.ControlPosition.RIGHT_TOP;
+                            case 'bottomleft':
+                                return google.maps.ControlPosition.LEFT_BOTTOM;
+                            case 'bottomright':
+                                return google.maps.ControlPosition.RIGHT_BOTTOM;
+                            default:
+                                return google.maps.ControlPosition.LEFT_TOP;
+                        }
+                    })(ctrl.zoomControl)
+                },
+                scrollwheel: ctrl.mousewheel,
+                disableDoubleClickZoom: dblClickZoom,
+                keyboardShortcuts: kbShortcuts,
+                draggable: draggable,
+                mapTypeId,
+                colorScheme,
+                tilt: ctrl.tilt,
+                heading: ctrl.heading,
+            });
+        }
+        #bootstrapped = false;
+        _bootstrapDebounced() {
+            this._bootstrap().then(_ => {
+                for (let map of this.enrolledMaps()) {
+                    // HACK: (toggle adapter off/on)
+                    map.adapter = null;
+                    map.adapter = this;
+                }
+            });
+        }
+        _bootstrap() {
+            return new Promise((resolve, reject) => {
+                const apiKey = this.apiKey, language = this.language || '', region = this.region || '', version = this.version || 'weekly';
+                bootstrapper.boostrap(apiKey, language, region, version).then(_ => {
+                    const promises = [];
+                    for (let lib of this.libraries || []) {
+                        promises.push(google.maps.importLibrary(lib));
+                    }
+                    Promise.all(promises).then(_ => {
+                        resolve();
+                        this.#bootstrapped = true;
+                    }, reject);
+                }, reject);
+            });
+        }
+        async init(container) {
+            await this._bootstrap();
+            //
+            const ctrl = container;
+            const centerPos = MapUtils.parseCoords(ctrl.center);
+            const center = new google.maps.LatLng(centerPos[0], centerPos[1]);
+            const mapOptions = this._buildMapOptions(ctrl);
+            const canvas = ctrl.container;
+            const mapElement = document.createElement('div');
+            mapElement.style.width = '100%';
+            mapElement.style.height = '100%';
+            canvas.innerHTML = '';
+            canvas.appendChild(mapElement);
+            const map = new google.maps.Map(mapElement, mapOptions);
+            const listeners = [];
+            this.#listeners.set(ctrl, listeners);
+            MAP_EVENTS.forEach(evt => {
+                listeners.push(map.addListener(evt, this._spinMapUpdateHandler(ctrl, map)));
+            });
+            // setting now the center and zoom, triggers the "load" event and activates the child-components, if any.
+            map.setZoom(ctrl.zoom);
+            map.setCenter(center);
+            // first-load
+            var listener = map.addListener('idle', function once(e) {
+                listener.remove();
+                container.dispatchEvent(new MapEvent("maploaded"));
+            });
+            // tilesloaded
+            listeners.push(map.addListener('tilesloaded', evt => {
+                container.dispatchEvent(new MapEvent("tilesloaded"));
+            }));
+            // call setView NOW to trigger the load event :(
+            const cnt = MapUtils.parseCoords(ctrl.center), xpr = new google.maps.LatLng(cnt[0], cnt[1]);
+            map.setZoom(ctrl.zoom);
+            map.setCenter(xpr);
+            return { map, container: mapElement };
+        }
+        invalidateSize(ctrl) {
+            if (!this.hasMap(ctrl)) {
+                return;
+            }
+            const { map } = this.tryGetMap(ctrl);
+            google.maps.event.trigger(map, "resize");
+        }
+        //#endregion
+        _spinMapUpdateHandler(ctrl, map) {
+            return () => {
+                if (!pacemCore.Utils.isNull(map) && !pacemCore.Utils.isNull(ctrl)) {
+                    const center = map.getCenter();
+                    if (pacemCore.Utils.isNull(center)) {
+                        // not fully initialized yet
+                        return;
+                    }
+                    this.updateMapElement(ctrl, {
+                        center: { lat: center.lat(), lng: center.lng() }, zoom: map.getZoom(),
+                        type: map.getMapTypeId(), tilt: map.getTilt(), heading: map.getHeading()
+                    });
+                }
+            };
+        }
+        fitBoundsNative(ctrl, bounds, padding = this._getPadding(ctrl)) {
+            const map = this.tryGetMap(ctrl)?.map;
+            if (pacemCore.Utils.isNull(map)) {
+                return;
+            }
+            const bnds = GMapsUtils.getBounds(bounds);
+            GMapsUtils.fitBounds(map, bnds, padding);
+        }
+        ;
+        _getPadding(ctrl) {
+            const top = ctrl.paddingTop || 0, left = ctrl.paddingLeft || 0, right = ctrl.paddingRight || 0, bottom = ctrl.paddingBottom || 0;
+            if (left || top || right || bottom) {
+                return { top, bottom, left, right };
+            }
+            return null;
+        }
+        /**
+         @deprecated
+         */
+        _padBounds(ctrl) {
+            const paddingTop = ctrl.paddingTop || 0, paddingLeft = ctrl.paddingLeft || 0, paddingRight = ctrl.paddingRight || 0, paddingBottom = ctrl.paddingBottom || 0;
+            if (paddingLeft || paddingTop || paddingRight || paddingBottom) {
+                const map = this.tryGetMap(ctrl).map;
+                const bnds = map.getBounds();
+                const w = map.getDiv().clientWidth, h = map.getDiv().clientHeight;
+                //
+                const n_nw = map.getProjection().fromPointToLatLng(new google.maps.Point(-paddingLeft, -paddingTop));
+                const n_se = map.getProjection().fromPointToLatLng(new google.maps.Point(w + paddingRight, h + paddingBottom));
+                //
+                bnds.extend(n_nw);
+                bnds.extend(n_se);
+            }
+        }
+        _redrawMap() {
+            // do nothing (no tiles)
+        }
+    };
+    __decorate([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemGoogleMapAdapterElement.prototype, "apiKey", void 0);
+    __decorate([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemGoogleMapAdapterElement.prototype, "version", void 0);
+    __decorate([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemGoogleMapAdapterElement.prototype, "language", void 0);
+    __decorate([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemGoogleMapAdapterElement.prototype, "region", void 0);
+    __decorate([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Json })
+    ], PacemGoogleMapAdapterElement.prototype, "defaultOptions", void 0);
+    __decorate([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.StringArray })
+    ], PacemGoogleMapAdapterElement.prototype, "libraries", void 0);
+    __decorate([
+        pacemCore.Debounce(consts.DETACH_TIMEOUT)
+    ], PacemGoogleMapAdapterElement.prototype, "_bootstrapDebounced", null);
+    PacemGoogleMapAdapterElement = __decorate([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-map-adapter-google' })
+    ], PacemGoogleMapAdapterElement);
+    //#region geocoders
+    class PacemGoogleMapGeocoder {
+        constructor(apiKey, language = '', region = '', version = 'weekly') {
+            this.apiKey = apiKey;
+            this.language = language;
+            this.region = region;
+            this.version = version;
+        }
+        /**
+         * Try add altitude info.
+         * @param results
+         * @returns
+         */
+        _elevateResults(set) {
+            return new Promise((resolve, reject) => {
+                // try get elevation as well
+                const elevation = new google.maps.ElevationService();
+                elevation.getElevationForLocations({ locations: set.map(i => i.geometry.location) }, (results2, status2) => {
+                    if (status2 === google.maps.ElevationStatus.OK) {
+                        const retval = GMapsUtils.mapGeocodeResults(set, results2);
+                        // success
+                        resolve(retval);
+                    }
+                    else {
+                        // partial success (no elevation)
+                        const retval = GMapsUtils.mapGeocodeResults(set);
+                        resolve(retval);
+                    }
+                });
+            });
+        }
+        geocode(search, maxResults = 10) {
+            return new Promise((resolve, reject) => {
+                bootstrapper.boostrap(this.apiKey, this.language || '', this.region || '', this.version || 'weekly').then(_ => {
+                    const geocoder = new google.maps.Geocoder();
+                    geocoder.geocode({
+                        address: search,
+                        //language: this.language || '',
+                        //region: this.region || ''
+                    }, (results, status) => {
+                        if (status === google.maps.GeocoderStatus.OK
+                            || status == google.maps.GeocoderStatus.ZERO_RESULTS) {
+                            const set = (results || [])
+                                .filter((_, index) => index < (maxResults || 10));
+                            this._elevateResults(set).then(resolve);
+                        }
+                        else {
+                            // error
+                            reject(status);
+                        }
+                    });
+                }, reject);
+            });
+        }
+        _reverseGeocodeInternal(position, maxResults) {
+            const location = GMapsUtils.getPosition(position);
+            return new Promise((resolve, reject) => {
+                bootstrapper.boostrap(this.apiKey, this.language || '', this.region || '', this.version || 'weekly').then(_ => {
+                    const geocoder = new google.maps.Geocoder();
+                    geocoder.geocode({
+                        location,
+                        //language: this.language || '',
+                        //region: this.region || ''
+                    }, (results, status) => {
+                        if (status === google.maps.GeocoderStatus.OK
+                            || status == google.maps.GeocoderStatus.ZERO_RESULTS) {
+                            const set = (results || [])
+                                .filter((_, index) => index < (maxResults || 10));
+                            this._elevateResults(set).then(resolve);
+                        }
+                        else {
+                            // error
+                            reject(status);
+                        }
+                    });
+                }, reject);
+            });
+        }
+        reverseGeocode(position, maxResults = 1) {
+            return this._reverseGeocodeInternal(position, maxResults);
+        }
+    }
+    //#endregion
+    //}
+
+    var indexComponentsMaps = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        LatLngBoundsConverter: LatLngBoundsConverter,
+        LatLngConverter: LatLngConverter,
+        LayerLoadEventName: LayerLoadEventName,
+        get MapColorScheme () { return MapColorScheme; },
+        MapConsts: MapConsts,
+        MapEvent: MapEvent,
+        MapItemAdapter: MapItemAdapter,
+        MapRelevantElement: MapRelevantElement,
+        get MapType () { return MapType; },
+        MapUtils: MapUtils,
+        get PacemAzureMapAdapterElement () { return PacemAzureMapAdapterElement; },
+        get PacemGoogleMapAdapterElement () { return PacemGoogleMapAdapterElement; },
+        PacemLayerAdapter: PacemLayerAdapter,
+        get PacemLeafletMapAdapterElement () { return PacemLeafletMapAdapterElement; },
+        PacemMapAdapterElement: PacemMapAdapterElement,
+        get PacemMapCircleElement () { return PacemMapCircleElement; },
+        get PacemMapElement () { return PacemMapElement; },
+        get PacemMapGeocodeElement () { return PacemMapGeocodeElement; },
+        get PacemMapGeolocateElement () { return PacemMapGeolocateElement; },
+        get PacemMapLayerElement () { return PacemMapLayerElement; },
+        get PacemMapMarkerElement () { return PacemMapMarkerElement; },
+        PacemMapOverlayElement: PacemMapOverlayElement,
+        get PacemMapOverlayImageElement () { return PacemMapOverlayImageElement; },
+        get PacemMapPolygonElement () { return PacemMapPolygonElement; },
+        get PacemMapPolylineElement () { return PacemMapPolylineElement; },
+        PacemMapShapeElement: PacemMapShapeElement,
+        PacemMarkerAdapter: PacemMarkerAdapter,
+        PacemOverlayAdapter: PacemOverlayAdapter,
+        PacemShapeAdapter: PacemShapeAdapter,
+        isLatLng: isLatLng,
+        isLatLngBounds: isLatLngBounds
+    });
+
+    var indexComponents = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        Maps: indexComponentsMaps
+    });
+
+    var Output = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        Components: indexComponents,
+        Maps: types
+    });
+
+    pacemFoundation.DeepMerger.merge(Output);
+
+})(Pacem, Pacem);
+//# sourceMappingURL=pacem-maps.js.map