@provoly/dashboard 0.11.0

package/fesm2022/provoly-dashboard-widgets-widget-map.mjs

@@ -0,0 +1,2055 @@
+import * as i3 from '@angular/cdk/overlay';
+import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import * as i5 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, Component, ViewEncapsulation, Pipe, ViewContainerRef, TemplateRef, ViewChild, NgModule } from '@angular/core';
+import * as i6 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i2 from '@provoly/dashboard';
+import { widgetMapConfig, DashboardActions, FieldType, ItemUtils, ClassSelectors, FieldSelectors, DataWidgetComponent, WIDGET_HEADER_HEIGHT, ConfigSelectors, DashboardSelectors, GeoMetadata, TooltipMode, DataSourceSelectors, ResultsetUtils, ContextMenuActions, ConfigActions, BaseWidgetModule, PryCoreModule, PryDashboardModule, PrySelectModule, PryIconModule, PryToggleModule, PryOverlayModule, PryI18nModule, PryRangeModule } from '@provoly/dashboard';
+import * as i7 from '@provoly/dashboard/components/checkbox';
+import { PryCheckboxModule } from '@provoly/dashboard/components/checkbox';
+import { TemplatePortal } from '@angular/cdk/portal';
+import equal from 'fast-deep-equal/es6';
+import { Feature, Map, View, Overlay } from 'ol';
+import LayerSwitcher from 'ol-layerswitcher';
+import { apply } from 'ol-mapbox-style';
+import { Control, Attribution, ScaleLine } from 'ol/control';
+import { getWidth, getTopLeft, createEmpty, boundingExtent } from 'ol/extent';
+import { Heatmap, Tile } from 'ol/layer';
+import { fromLonLat, toLonLat, get, transform } from 'ol/proj';
+import { register } from 'ol/proj/proj4';
+import { Vector, TileWMS, WMTS, XYZ, Cluster } from 'ol/source';
+import proj4 from 'proj4';
+import { map, combineLatest, filter, BehaviorSubject, startWith, debounceTime, delay, mergeMap, of, from, tap, distinctUntilChanged } from 'rxjs';
+import { Polygon, GeometryCollection, Circle, MultiPolygon, MultiLineString, LineString, MultiPoint, Point } from 'ol/geom';
+import PointerInteraction from 'ol/interaction/Pointer';
+import TileLayer from 'ol/layer/Tile';
+import VectorLayer from 'ol/layer/Vector';
+import VectorTileLayer from 'ol/layer/VectorTile';
+import RenderBox from 'ol/render/Box';
+import VectorSource from 'ol/source/Vector';
+import { Style, Fill, Stroke, Circle as Circle$1, Text } from 'ol/style';
+import { KML, GeoJSON, GPX, IGC, TopoJSON, MVT } from 'ol/format';
+import JSZip from 'jszip';
+import CircleStyle from 'ol/style/Circle';
+import FeatureFormat from 'ol/format/Feature';
+import { parseZip } from 'shpjs';
+import { Buffer } from 'buffer';
+import BaseEvent from 'ol/events/Event';
+import tokml from 'geojson-to-kml';
+import * as i1 from '@ngrx/store';
+import VectorTile from 'ol/source/VectorTile';
+import WMTSTileGrid from 'ol/tilegrid/WMTS';
+
+class SelectionInteraction extends PointerInteraction {
+    constructor() {
+        super({});
+        this.currentRectangle = new RenderBox('ol-rectangle-selection');
+        this.lassoCoordinates = [];
+        this.currentLassoFeature = null;
+        this.actions = [];
+        this.selectionStyle = new Style({
+            fill: new Fill({
+                color: 'rgba(251, 198, 199, 0.5)'
+            })
+        });
+        this.coordinates = null;
+        this.cursor = 'pointer';
+        this.features = [];
+        this.previousCursor = undefined;
+        widgetMapConfig.actions$.subscribe((actions) => {
+            // @ts-ignore
+            this.actions = actions.filter((action) => action !== 'export' && action !== 'upload');
+            this.selectionType = this.actions[0];
+        });
+        this.overlayForLasso = new VectorLayer({
+            source: new VectorSource({
+                useSpatialIndex: false,
+                wrapX: false,
+                features: []
+            }),
+            style: this.selectionStyle,
+            updateWhileInteracting: true
+        });
+    }
+    init(store) {
+        this.store = store;
+        return this;
+    }
+    handleDownEvent(evt) {
+        const map = evt.map;
+        if (this.selectionType === 'move') {
+            return false;
+        }
+        if (this.selectionType === 'click') {
+            this.features = [
+                ...new Set(map
+                    .getFeaturesAtPixel(evt.pixel)
+                    .map((feature) => feature.get('id'))
+                    .filter((id) => !!id))
+            ];
+            // Click and move are collisionning. Need to make another button if needed right now click is aborted
+            return true;
+        }
+        if (['rectangle', 'zoom'].includes(this.selectionType)) {
+            this.coordinates = evt.pixel;
+            this.currentRectangle.setMap(evt.map);
+            this.currentRectangle.setPixels(this.coordinates, this.coordinates);
+        }
+        if (this.selectionType === 'lasso') {
+            this.getMap()?.addLayer(this.overlayForLasso);
+            this.lassoCoordinates = [evt.coordinate];
+            if (!this.currentLassoFeature) {
+                this.currentLassoFeature = new Feature(new Polygon(this.getPolygonCoordinates(this.lassoCoordinates)));
+                this.overlayForLasso.getSource().addFeature(this.currentLassoFeature);
+            }
+        }
+        return true;
+    }
+    getPolygonCoordinates(coordinates) {
+        return [coordinates.concat(coordinates[0])];
+    }
+    handleDragEvent(evt) {
+        if (['rectangle', 'zoom'].includes(this.selectionType)) {
+            this.currentRectangle.setPixels(this.coordinates ?? [0, 0], evt.pixel);
+            return true;
+        }
+        if (this.selectionType === 'lasso') {
+            this.lassoCoordinates.push(evt.coordinate);
+            this.currentLassoFeature?.getGeometry()?.setCoordinates(this.getPolygonCoordinates(this.lassoCoordinates));
+            return true;
+        }
+        return false;
+    }
+    handleUpEvent() {
+        if (this.selectionType === 'click' && this.features.length > 0) {
+            this.store?.dispatch(DashboardActions.selectMany({ ids: this.features }));
+        }
+        if (this.selectionType === 'lasso') {
+            const geometry = this.currentLassoFeature?.getGeometry();
+            const boxFeatures = this.getMap()
+                ?.getAllLayers()
+                .filter((layer) => !(layer instanceof VectorTileLayer) &&
+                !(layer instanceof TileLayer) &&
+                layer?.getSource() instanceof VectorSource)
+                .map((layer) => layer?.getSource()
+                ?.getFeatures()
+                .filter((features) => !!features.get('id'))
+                .filter((feature) => {
+                switch (feature.get('type')) {
+                    case 'point':
+                    case 'marker':
+                        return geometry?.intersectsCoordinate(feature.getGeometry().getCoordinates());
+                    case 'bubble':
+                    case 'line':
+                        return feature
+                            .getGeometry()
+                            .getCoordinates()
+                            .map((coords) => geometry?.intersectsCoordinate(coords))
+                            .reduce((a, b) => a || b, false);
+                    case 'polygon':
+                        return feature
+                            .getGeometry()
+                            .getCoordinates()[0]
+                            .map((coords) => geometry?.intersectsCoordinate(coords))
+                            .reduce((a, b) => a || b, false);
+                    default:
+                        return false;
+                }
+            }))
+                .reduce((p, c) => [...p, ...c], []);
+            const ids = [
+                ...new Set(boxFeatures?.map((feature) => feature.get('id')).filter((id) => !!id))
+            ];
+            this.store?.dispatch(DashboardActions.selectMany({ ids }));
+            this.getMap()?.removeLayer(this.overlayForLasso);
+            this.lassoCoordinates = [];
+        }
+        if (this.selectionType === 'rectangle') {
+            this.currentRectangle.setMap(null);
+            const extent = this.currentRectangle.getGeometry().getExtent();
+            const boxFeatures = this.getMap()
+                ?.getLayers()
+                .getArray()
+                // @ts-ignore
+                .map((layer) => layer.getSource())
+                .map((source) => (source.getFeaturesInExtent ? source.getFeaturesInExtent(extent) : []))
+                .reduce((p, c) => [...p, ...c], [])
+                .filter((feature) => !!feature.getGeometry().intersectsExtent && feature.getGeometry().intersectsExtent(extent));
+            const ids = [
+                ...new Set(boxFeatures.map((feature) => feature.get('id')).filter((id) => !!id))
+            ];
+            this.store?.dispatch(DashboardActions.selectMany({ ids }));
+        }
+        if (this.selectionType === 'zoom') {
+            this.currentRectangle.setMap(null);
+            const extent = this.currentRectangle.getGeometry().getExtent();
+            this.getMap()
+                ?.getView()
+                .fit(extent, { padding: [20, 20, 70, 70], duration: 200 });
+        }
+        if (this.selectionType === 'lasso') {
+            this.getMap()?.removeLayer(this.overlayForLasso);
+        }
+        this.changeSelection(this.actions[0]);
+        this.coordinates = null;
+        this.features = [];
+        return false;
+    }
+    changeSelection(type) {
+        this.selectionType = type;
+    }
+}
+
+class KmzZipReader {
+    constructor() {
+        this.reader = new JSZip();
+        this.fileInsideZipExtension = '.kml';
+        this.parser = new KML();
+    }
+    withMap(map) {
+        this.map = map;
+        return this;
+    }
+    apply(file, resolve, reject) {
+        this.reader.loadAsync(file).then((zip) => {
+            let entry = null;
+            let imageReplacements = [];
+            zip.forEach((path, zipEntry) => {
+                if (zipEntry.name.endsWith(this.fileInsideZipExtension)) {
+                    entry = zipEntry;
+                }
+                const split = zipEntry.name.toLowerCase().split('.');
+                const extention = split[split.length - 1];
+                if (['png', 'jpeg'].includes(extention)) {
+                    imageReplacements.push(new Promise((resolveS) => {
+                        zipEntry.async('arraybuffer').then((buffer) => {
+                            resolveS({
+                                name: zipEntry.name,
+                                image: window.URL.createObjectURL(new Blob([buffer], { type: `image/${extention}` }))
+                            });
+                        });
+                    }));
+                }
+            });
+            if (entry === null) {
+                reject({ msg: '@pry.widget.map.importNotFoundInZip', val: { extension: this.fileInsideZipExtension } });
+            }
+            else {
+                Promise.all(imageReplacements).then((replacements) => {
+                    entry?.async('string').then((buffer) => {
+                        let replacedBuffer = buffer;
+                        replacements.forEach((replacement) => (replacedBuffer = replacedBuffer.replace(replacement.name, replacement.image)));
+                        resolve(new VectorLayer({
+                            source: new VectorSource({
+                                features: this.parser.readFeatures(replacedBuffer, {
+                                    featureProjection: this.map.getView().getProjection()
+                                })
+                            })
+                        }));
+                    });
+                });
+            }
+        });
+    }
+}
+
+const randomColor = () => [
+    Math.round(Math.random() * 255),
+    Math.round(Math.random() * 255),
+    Math.round(Math.random() * 255)
+];
+const styleFunction = (color) => (feature) => {
+    const stroke = new Stroke({
+        color: `rgb(${color.join(',')})`,
+        width: 1
+    });
+    const fill = new Fill({ color: `rgba(${color.join(',')}, 0.1)` });
+    const image = new CircleStyle({ radius: 5, fill, stroke });
+    switch (feature.getGeometry()?.getType()) {
+        case Point:
+        case MultiPoint:
+            return new Style({ image });
+        case LineString:
+        case MultiLineString:
+            return new Style({ stroke });
+        case MultiPolygon:
+        case Polygon:
+        case Circle:
+            return new Style({ stroke, fill });
+        case GeometryCollection:
+        default:
+            return new Style({ stroke, fill, image });
+    }
+};
+
+class ReadAsText {
+    constructor(parser) {
+        this.parser = parser;
+        this.reader = new FileReader();
+    }
+    withMap(map) {
+        this.map = map;
+        return this;
+    }
+    apply(file, resolve, reject) {
+        this.reader.readAsText(file, 'UTF-8');
+        this.reader.onload = (evt) => {
+            resolve(new VectorLayer({
+                source: new VectorSource({
+                    features: this.parser.readFeatures(evt.target?.result, {
+                        featureProjection: this.map.getView().getProjection()
+                    })
+                }),
+                style: styleFunction(randomColor())
+            }));
+        };
+        this.reader.onerror = (err) => {
+            reject({ msg: 'ReadAsText: ' + err, val: {} });
+        };
+    }
+}
+
+class ShpZipReader extends FeatureFormat {
+    constructor() {
+        super();
+        this.parser = new GeoJSON();
+    }
+    withMap(map) {
+        this.map = map;
+        return this;
+    }
+    apply(file, resolve, reject) {
+        file
+            .arrayBuffer()
+            .then((buffer) => {
+            parseZip(Buffer.from(buffer))
+                .then((geojson) => {
+                resolve(new VectorLayer({
+                    source: new VectorSource({
+                        features: this.parser.readFeatures(geojson, {
+                            featureProjection: this.map.getView().getProjection()
+                        })
+                    })
+                }));
+            })
+                .catch((err) => reject({ msg: 'ShpZipReader: ' + err, val: {} }));
+        })
+            .catch((err) => reject({ msg: 'ShpZipReader: ' + err, val: {} }));
+    }
+}
+
+class MapFormatsReader {
+    constructor(map) {
+        this.formats = {
+            gpx: new ReadAsText(new GPX()),
+            geojson: new ReadAsText(new GeoJSON()),
+            igc: new ReadAsText(new IGC()),
+            kml: new ReadAsText(new KML()),
+            kmz: new KmzZipReader(),
+            'kml.zip': new KmzZipReader(),
+            topojson: new ReadAsText(new TopoJSON()),
+            'shp.zip': new ShpZipReader()
+        };
+        this.map = map;
+    }
+    decodeFile(file) {
+        return new Promise((resolve, reject) => {
+            const split = file.name.split('.');
+            let extension = split[split.length - 1];
+            if (extension === 'zip') {
+                extension = `${split[split.length - 2]}.${split[split.length - 1]}`;
+            }
+            if (!this.formats[extension]) {
+                reject({
+                    msg: '@pry.widget.map.importError',
+                    val: { extension, authorizedFormats: Object.keys(this.formats).join(', ') }
+                });
+                return;
+            }
+            this.formats[extension].withMap(this.map).apply(file, resolve, reject);
+        });
+    }
+}
+
+class AddressSearchedEvent extends BaseEvent {
+    // @ts-ignore
+    constructor({ type, coordinates, address, latLon, query }) {
+        super(type);
+        this.coordinates = coordinates;
+        this.address = address;
+        this.latLon = latLon;
+        this.query = query;
+    }
+}
+class SearchBarControl extends Control {
+    constructor(opt_options) {
+        const options = opt_options || {};
+        const button = document.createElement('button');
+        button.innerHTML = '<div></div>';
+        const element = document.createElement('div');
+        element.className = 'ol-searchbar ol-unselectable ol-control';
+        element.appendChild(button);
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.placeholder = '1 rue de la Paix...';
+        input.style.display = 'none';
+        element.appendChild(input);
+        super({
+            element: element,
+            target: options.target
+        });
+        this.button = button;
+        button.addEventListener('click', this.toggleInputVisible.bind(this), false);
+        this.input = input;
+        input.addEventListener('keypress', this.keyPress.bind(this), false);
+    }
+    toggleInputVisible() {
+        if (this.inputVisible) {
+            this.input.style.display = 'none';
+        }
+        else {
+            this.input.style.display = 'block';
+        }
+    }
+    get inputVisible() {
+        return this.input.style.display === 'block';
+    }
+    keyPress(e) {
+        if (e.key === 'Enter') {
+            this.geocodingService?.fromAddress(this.input.value).subscribe((result) => {
+                this.getMap()?.dispatchEvent(new AddressSearchedEvent({
+                    type: 'searched-address',
+                    latLon: result.latLon,
+                    coordinates: fromLonLat(result.latLon.reverse(), this.getMap()?.getView().getProjection()),
+                    query: this.input.value,
+                    address: result.pointAddress
+                }));
+                this.toggleInputVisible();
+            });
+        }
+    }
+    withGeocodingService(geocodingService) {
+        this.geocodingService = geocodingService;
+        return this;
+    }
+}
+
+const populateLocationAttribute = (layer, resultSet, classesNotFiltered, fields) => {
+    if (['heatmap', 'marker', 'bubble', 'point', 'line', 'polygon', 'multi-line', 'multi-polygon'].includes(layer.type) &&
+        !!resultSet &&
+        !!classesNotFiltered &&
+        classesNotFiltered.length > 0) {
+        const specificLayer = layer;
+        const classes = classesNotFiltered.filter((cl) => specificLayer.classes?.includes(cl.id) || !specificLayer.classes || specificLayer.classes.length === 0);
+        if (!specificLayer.attribute) {
+            // No location attribute available, then try to guess one that will be ok
+            const geometry = geometryForLayer(layer);
+            let candidates = [];
+            if (Object.keys(resultSet.items).length > 0) {
+                // Based on items that we have to display
+                candidates = Object.keys(resultSet.items)
+                    .map((key) => ({ items: resultSet.items[key], oClass: classes.find((cl) => cl.id === key) }))
+                    .map(({ items, oClass }) => (oClass ?? { attributes: [] }).attributes
+                    .map((attr) => ({ attr, field: fields.find((f) => f.id === attr.field) }))
+                    .filter((attr) => attr.field?.type === geometry))
+                    .reduce((p, c) => [...p, ...c], []);
+            }
+            else {
+                // We don't have any items to display, so allow all corresponding geometry fields
+                candidates = classesNotFiltered
+                    .map((clazz) => clazz.attributes)
+                    .reduce((p, c) => [...p, ...c], [])
+                    .map((attr) => fields.filter((field) => field?.type === geometry).map((field) => ({ attr, field })))
+                    .reduce((p, c) => [...p, ...c], []);
+            }
+            if (candidates.length > 0) {
+                specificLayer.attribute = candidates[0].attr.name;
+            }
+        }
+    }
+};
+const populateIntensityAttribute = (layer, resultSet, classesNotFiltered, fields) => {
+    if (['heatmap', 'bubble'].includes(layer.type) &&
+        !!resultSet &&
+        !!classesNotFiltered &&
+        classesNotFiltered.length > 0) {
+        const specificLayer = layer;
+        const classes = classesNotFiltered.filter((cl) => (specificLayer.classes?.includes(cl.id) || !specificLayer.classes || specificLayer.classes.length === 0) &&
+            cl.attributes.find((attr) => attr.name === (specificLayer?.attribute ?? [])));
+        if (!specificLayer.intensityAttribute) {
+            // No intensity attribute available, then take the maximum intensity matching attribute
+            const candidatesDry = Object.keys(resultSet.items)
+                .map((key) => ({ items: resultSet.items[key], oClass: classes.find((cl) => cl.id === key) }))
+                .map(({ items, oClass }) => {
+                return (oClass ?? { attributes: [] }).attributes
+                    .map((attr) => ({ attr, field: fields.find((f) => f.id === attr.field) }))
+                    .filter((attr) => attr.field?.type === FieldType.DECIMAL || attr.field?.type === FieldType.INTEGER)
+                    .map((attr) => {
+                    const attrValues = ItemUtils.pertinentValue(items, attr.attr);
+                    return {
+                        min: Math.min(...attrValues),
+                        max: Math.max(...attrValues),
+                        name: attr.attr.name
+                    };
+                });
+            })
+                .reduce((p, c) => [...p, ...c], [])
+                .sort((a, b) => b.max - a.max);
+            if (candidatesDry.length > 0) {
+                specificLayer.intensityAttribute = candidatesDry[0].name;
+                specificLayer.intensityAsc = true;
+            }
+        }
+    }
+};
+const getFeatureFromItem = (item, type, locationAttribute, iconStyle, selectedIconStyle) => {
+    return new Feature({
+        ...item,
+        type,
+        geometry: ItemUtils.readGeometry(item, 'point', locationAttribute),
+        classicStyle: iconStyle ?? null,
+        selectedStyle: selectedIconStyle ?? null
+    });
+};
+const getCircleFeatureFromItem = (item, locationAttribute, radius, iconStyle, selectedIconStyle) => {
+    return new Feature({
+        ...item,
+        geometry: new Circle(ItemUtils.readGeometry(item, 'point', locationAttribute).getCoordinates(), radius),
+        classicStyle: iconStyle,
+        selectedStyle: selectedIconStyle,
+        type: 'bubble'
+    });
+};
+const getLinkFeature = (relation, featureSource, featureDestination) => {
+    return new Feature({
+        ...relation,
+        geometry: new LineString([
+            featureSource.getGeometry()?.getCoordinates() ?? [0, 0],
+            featureDestination.getGeometry()?.getCoordinates() ?? [0, 0]
+        ]),
+        source: featureSource,
+        destination: featureDestination,
+        type: 'link'
+    });
+};
+const getMapAsPng = (map) => {
+    return new Promise((resolve, reject) => {
+        map.once('rendercomplete', function () {
+            const mapCanvas = document.createElement('canvas');
+            const size = map.getSize() || [100, 100];
+            mapCanvas.width = size[0];
+            mapCanvas.height = size[1];
+            const mapContext = mapCanvas.getContext('2d') || null;
+            Array.prototype.forEach.call(document.querySelectorAll('.ol-layer canvas, canvas.ol-layer'), (canvas) => {
+                if (canvas.width > 0) {
+                    const opacity = canvas.parentNode.style.opacity || canvas.style.opacity;
+                    mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
+                    const backgroundColor = canvas.parentNode.style.backgroundColor;
+                    if (backgroundColor) {
+                        mapContext.fillStyle = backgroundColor;
+                        mapContext.fillRect(0, 0, canvas.width, canvas.height);
+                    }
+                    let matrix;
+                    const transform = canvas.style.transform;
+                    if (transform) {
+                        // Get the transform parameters from the style's transform matrix
+                        matrix = transform
+                            .match(/^matrix\(([^(]*)\)$/)[1]
+                            .split(',')
+                            .map(Number);
+                    }
+                    else {
+                        matrix = [
+                            parseFloat(canvas.style.width) / canvas.width,
+                            0,
+                            0,
+                            parseFloat(canvas.style.height) / canvas.height,
+                            0,
+                            0
+                        ];
+                    }
+                    // Apply the transform to the export map context
+                    CanvasRenderingContext2D.prototype.setTransform.apply(mapContext, matrix);
+                    mapContext.drawImage(canvas, 0, 0);
+                }
+            });
+            mapContext.globalAlpha = 1;
+            resolve(mapCanvas.toDataURL('image/png'));
+        });
+        map.renderSync();
+    });
+};
+const exportMapAsImage = (map, filename) => {
+    getMapAsPng(map).then((data) => {
+        const link = document.createElement('a');
+        link.download = filename;
+        link.href = data;
+        link.click();
+    });
+};
+const exportMapAsGeoJSONString = (map) => {
+    return new Promise((resolve, reject) => {
+        const format = new GeoJSON();
+        const features = [];
+        const promises = map
+            .getAllLayers()
+            .filter((layer) => !!layer.getSource && !!layer.getSource() && !!layer.getSource().getFeatures)
+            .map((layer) => layer.getSource().getFeatures())
+            .filter((promise) => !!promise);
+        Promise.all(promises)
+            .then((featuresOfLayer) => {
+            featuresOfLayer.forEach((feature) => {
+                features.push(...feature);
+            });
+            resolve(format.writeFeatures(features));
+        })
+            .catch((err) => reject(err));
+    });
+};
+const exportMapAsGeoJSON = (map, filename) => {
+    exportMapAsGeoJSONString(map).then((output) => {
+        const link = document.createElement('a');
+        link.download = filename;
+        const blob = new Blob([output], {
+            type: 'application /geo+json'
+        });
+        link.href = URL.createObjectURL(blob);
+        link.click();
+    });
+};
+const exportMapAsKML = (map, filename) => {
+    exportMapAsGeoJSONString(map).then((output) => {
+        const geoJSON = JSON.parse(output);
+        const kml = tokml(geoJSON);
+        const link = document.createElement('a');
+        link.download = filename;
+        const blob = new Blob([kml], {
+            type: 'application/vnd.google-earth.kml+xml'
+        });
+        link.href = URL.createObjectURL(blob);
+        link.click();
+    });
+};
+const geometryForLayer = (layer) => {
+    switch (layer.type) {
+        case 'marker':
+        case 'heatmap':
+        case 'bubble':
+        case 'point':
+            return FieldType.POINT;
+        case 'line':
+            return FieldType.LINE;
+        case 'polygon':
+            return FieldType.POLYGON;
+        case 'multi-line':
+            return FieldType.MULTILINE;
+        case 'multi-polygon':
+            return FieldType.MULTIPOLYGON;
+        default:
+            return FieldType.POINT;
+    }
+};
+const DEFAULT_HEATMAP_RADIUS = 25;
+const DEFAULT_RADIUS_INTENSITY_FACTOR = 10000;
+const DEFAULT_ZOOM_MIN = 3;
+const DEFAULT_ZOOM_START = 10;
+const DEFAULT_ZOOM_MAX = 18;
+const DEFAULT_MAP_CENTER = [2.2827217347381525, 48.864706031557716];
+const EMPTY_MAP_STYLE = { layers: [] };
+
+class WidgetMapLayerService {
+    constructor() {
+        this.styleCache = {};
+        this.circleStyle = new Style({
+            fill: new Fill({
+                color: 'rgba(37,89,163,0.24)'
+            }),
+            stroke: new Stroke({
+                color: 'rgb(37,89,163)',
+                width: 2
+            })
+        });
+        this.selectedCircleStyle = new Style({
+            fill: new Fill({
+                color: 'rgba(37,163,58,0.24)'
+            }),
+            stroke: new Stroke({
+                color: 'rgb(37,163,58)',
+                width: 2
+            })
+        });
+        this.pointStyle = new Style({
+            image: new Circle$1({
+                fill: new Fill({ color: 'rgba(37,89,163,0.24)' }),
+                stroke: new Stroke({ color: 'rgb(37,89,163)', width: 2 }),
+                radius: 10
+            })
+        });
+        this.selectedPointStyle = new Style({
+            image: new Circle$1({
+                fill: new Fill({ color: 'rgba(37,163,58,0.24)' }),
+                stroke: new Stroke({ color: 'rgb(37,163,58)', width: 2 }),
+                radius: 10
+            })
+        });
+        this.dontNeedLocation = ['relation', 'wms', 'wmts', 'geoserver', 'featurelayer', 'vectortile', 'rastertile'];
+        this.dontNeedIntensity = [...this.dontNeedLocation, 'marker', 'point', 'line', 'polygon', 'multi-line', 'multi-polygon'];
+        this.layersImplementation = {
+            heatmap: (layer, attributesForClass, layerClassesId, resultSet, range, itemStyles, map) => {
+                const heatmap = new Heatmap({
+                    minZoom: layer.minZoom ?? DEFAULT_ZOOM_MIN,
+                    maxZoom: layer.maxZoom ?? DEFAULT_ZOOM_MAX,
+                    opacity: (layer.opacity ?? 100) / 100,
+                    source: new Vector({ attributions: [layer.attribution ?? ''] }),
+                    blur: (layer.radius ?? DEFAULT_HEATMAP_RADIUS) / 2,
+                    radius: layer.radius ?? DEFAULT_HEATMAP_RADIUS,
+                    weight: (feature) => {
+                        const value = ItemUtils.getAttributeCalculatedValue(feature, attributesForClass[feature.get('oClass')].intensityAttribute);
+                        const atScale = (value - range.min) / (range.max - range.min);
+                        return layer.intensityAsc ? atScale : 1 - atScale;
+                    }
+                });
+                layerClassesId.forEach((classId) => {
+                    (resultSet.items[classId] || [])
+                        .filter((item) => {
+                        const location = ItemUtils.readGeometry(item, 'point', attributesForClass[classId].locationAttribute);
+                        return !!location;
+                    })
+                        .forEach((item) => {
+                        heatmap
+                            .getSource()
+                            ?.addFeature(getFeatureFromItem(item, 'heatpoint', attributesForClass[item.oClass].locationAttribute));
+                    });
+                });
+                return heatmap;
+            },
+            marker: (layer, attributesForClass, layerClassesId, resultSet, range, itemStyles, map) => {
+                const vectorLayer = new VectorLayer({
+                    minZoom: layer.minZoom ?? DEFAULT_ZOOM_MIN,
+                    maxZoom: layer.maxZoom ?? DEFAULT_ZOOM_MAX,
+                    opacity: (layer.opacity ?? 100) / 100,
+                    source: new VectorSource({ attributions: [layer.attribution ?? ''] })
+                });
+                layerClassesId.forEach((classId) => {
+                    (resultSet.items[classId] || [])
+                        .filter((item) => {
+                        const location = ItemUtils.readGeometry(item, 'point', attributesForClass[item.oClass].locationAttribute);
+                        return !!location;
+                    })
+                        .forEach(async (item) => {
+                        const itemFeature = getFeatureFromItem(item, 'marker', attributesForClass[item.oClass].locationAttribute, itemStyles[item.id]?.classic, itemStyles[item.id]?.bordered);
+                        itemFeature.setStyle(itemFeature.get('classicStyle'));
+                        vectorLayer.getSource()?.addFeature(itemFeature);
+                    });
+                });
+                return this.makeClustered(vectorLayer, layer);
+            },
+            point: (layer, attributesForClass, layerClassesId, resultSet, range, itemStyles, map) => {
+                return this.layerFromGeoJsonGeometry(layer, layerClassesId, resultSet, attributesForClass, 'point');
+            },
+            line: (layer, attributesForClass, layerClassesId, resultSet, range, itemStyles, map) => {
+                return this.layerFromGeoJsonGeometry(layer, layerClassesId, resultSet, attributesForClass, 'line');
+            },
+            'multi-line': (layer, attributesForClass, layerClassesId, resultSet, range, itemStyles, map) => {
+                return this.layerFromGeoJsonGeometry(layer, layerClassesId, resultSet, attributesForClass, 'multi-line');
+            },
+            polygon: (layer, attributesForClass, layerClassesId, resultSet, range, itemStyles, map) => {
+                return this.layerFromGeoJsonGeometry(layer, layerClassesId, resultSet, attributesForClass, 'polygon');
+            },
+            'multi-polygon': (layer, attributesForClass, layerClassesId, resultSet, range, itemStyles, map) => {
+                return this.layerFromGeoJsonGeometry(layer, layerClassesId, resultSet, attributesForClass, 'multi-polygon');
+            },
+            bubble: (layer, attributesForClass, layerClassesId, resultSet, range, itemStyles, map) => {
+                const bubbleLayer = new VectorLayer({
+                    minZoom: layer.minZoom ?? DEFAULT_ZOOM_MIN,
+                    maxZoom: layer.maxZoom ?? DEFAULT_ZOOM_MAX,
+                    opacity: (layer.opacity ?? 100) / 100,
+                    source: new VectorSource({ attributions: [layer.attribution ?? ''] })
+                });
+                layerClassesId.forEach((classId) => {
+                    (resultSet.items[classId] || [])
+                        .filter((item) => {
+                        const location = ItemUtils.readGeometry(item, 'point', attributesForClass[item.oClass].locationAttribute);
+                        return !!location;
+                    })
+                        .forEach((item) => {
+                        const value = ItemUtils.getAttributeCalculatedValue(item, attributesForClass[item.oClass].intensityAttribute);
+                        const atScale = (value - range.min) / (range.max - range.min);
+                        const itemFeature = getCircleFeatureFromItem(item, attributesForClass[item.oClass].locationAttribute, (layer.intensityAsc ? atScale : 1 - atScale) * (layer.radiusFactor ?? DEFAULT_RADIUS_INTENSITY_FACTOR), this.circleStyle, this.selectedCircleStyle);
+                        itemFeature.setStyle(itemFeature.get('classicStyle'));
+                        bubbleLayer.getSource()?.addFeature(itemFeature);
+                    });
+                });
+                return bubbleLayer;
+            },
+            relation: (layer, attributesForClass, layerClassesId, resultSet, range, itemStyles, map) => {
+                return new VectorLayer({
+                    minZoom: layer.minZoom ?? DEFAULT_ZOOM_MIN,
+                    maxZoom: layer.maxZoom ?? DEFAULT_ZOOM_MAX,
+                    opacity: (layer.opacity ?? 100) / 100,
+                    source: new VectorSource({ attributions: [layer.attribution ?? ''] })
+                });
+            },
+            wms: (layer, attributesForClass, layerClassesId, resultSet, range, itemStyles, map) => {
+                const impl = new Tile({
+                    minZoom: layer.minZoom ?? DEFAULT_ZOOM_MIN,
+                    maxZoom: layer.maxZoom ?? DEFAULT_ZOOM_MAX,
+                    opacity: (layer.opacity ?? 100) / 100,
+                    source: new TileWMS({
+                        attributions: [layer.attribution ?? ''],
+                        crossOrigin: 'anonymous',
+                        url: layer.url,
+                        params: { LAYERS: layer.paramLayer, TILED: layer.paramTiled }
+                    })
+                });
+                impl.set('oClass', layer.oClass);
+                return impl;
+            },
+            wmts: (layer, attributesForClass, layerClassesId, resultSet, range, itemStyles, map) => {
+                const projection = map.getView().getProjection();
+                const projectionExtent = projection.getExtent();
+                const size = getWidth(projectionExtent) / 256;
+                const resolutions = new Array(19);
+                const matrixIds = new Array(19);
+                for (let z = 0; z < 19; ++z) {
+                    // generate resolutions and matrixIds arrays for this WMTS
+                    resolutions[z] = size / Math.pow(2, z);
+                    matrixIds[z] = z;
+                }
+                return new Tile({
+                    minZoom: layer.minZoom ?? DEFAULT_ZOOM_MIN,
+                    maxZoom: layer.maxZoom ?? DEFAULT_ZOOM_MAX,
+                    opacity: (layer.opacity ?? 100) / 100,
+                    source: new WMTS({
+                        attributions: [layer.attribution ?? ''],
+                        crossOrigin: 'anonymous',
+                        url: layer.url,
+                        layer: layer.paramLayer,
+                        matrixSet: layer.matrixSet,
+                        projection,
+                        tileGrid: new WMTSTileGrid({
+                            origin: getTopLeft(projectionExtent),
+                            resolutions: resolutions,
+                            matrixIds: matrixIds
+                        }),
+                        style: layer.style
+                    })
+                });
+            },
+            geoserver: (layer, attributesForClass, layerClassesId, resultSet, range, itemStyles, map) => {
+                const impl = this.layersImplementation['wms']({ ...layer, type: 'wms', oClass: layer.oClass }, attributesForClass, layerClassesId, resultSet, range, itemStyles, map);
+                impl.set('title', layer.title);
+                impl.set('oClass', layer.oClass);
+                return impl;
+            },
+            featurelayer: (layer, attributesForClass, layerClassesId, resultSet, range, itemStyles, map) => {
+                return new VectorLayer({
+                    minZoom: layer.minZoom ?? DEFAULT_ZOOM_MIN,
+                    maxZoom: layer.maxZoom ?? DEFAULT_ZOOM_MAX,
+                    opacity: (layer.opacity ?? 100) / 100,
+                    source: new VectorSource({
+                        attributions: [layer.attribution ?? ''],
+                        format: new GeoJSON(),
+                        url: layer.url
+                    })
+                });
+            },
+            vectortile: (layer, attributesForClass, layerClassesId, resultSet, range, itemStyles, map) => {
+                return new VectorTileLayer({
+                    minZoom: layer.minZoom ?? DEFAULT_ZOOM_MIN,
+                    maxZoom: layer.maxZoom ?? DEFAULT_ZOOM_MAX,
+                    opacity: (layer.opacity ?? 100) / 100,
+                    source: new VectorTile({
+                        attributions: [layer.attribution ?? ''],
+                        format: new MVT(),
+                        url: layer.url
+                    })
+                });
+            },
+            rastertile: (layer, attributesForClass, layerClassesId, resultSet, range, itemStyles, map) => {
+                return new Tile({
+                    minZoom: layer.minZoom ?? DEFAULT_ZOOM_MIN,
+                    maxZoom: layer.maxZoom ?? DEFAULT_ZOOM_MAX,
+                    opacity: (layer.opacity ?? 100) / 100,
+                    source: new XYZ({
+                        url: layer.url,
+                        attributions: [layer.attribution ?? '']
+                    })
+                });
+            }
+        };
+    }
+    get implementationList() {
+        return Object.keys(this.layersImplementation).filter((implementation) => implementation !== 'geoserver');
+    }
+    layerFromGeoJsonGeometry(layer, layerClassesId, resultSet, attributesForClass, type) {
+        const vectorLayer = new VectorLayer({
+            minZoom: layer.minZoom ?? DEFAULT_ZOOM_MIN,
+            maxZoom: layer.maxZoom ?? DEFAULT_ZOOM_MAX,
+            opacity: (layer.opacity ?? 100) / 100,
+            source: new VectorSource({ attributions: [layer.attribution ?? ''] })
+        });
+        layerClassesId.forEach((classId) => {
+            (resultSet.items[classId] || [])
+                .map((item) => ({
+                item,
+                location: ItemUtils.readGeometry(item, type, attributesForClass[item.oClass].locationAttribute)
+            }))
+                .filter(({ location }) => !!location)
+                .forEach(async (subItem) => {
+                const itemFeature = new Feature({
+                    ...subItem.item,
+                    type,
+                    geometry: subItem.location,
+                    classicStyle: type === 'point' ? this.pointStyle : this.circleStyle,
+                    selectedStyle: type === 'point' ? this.selectedPointStyle : this.selectedCircleStyle
+                });
+                itemFeature.setStyle(itemFeature.get('classicStyle'));
+                vectorLayer.getSource()?.addFeature(itemFeature);
+            });
+        });
+        return this.makeClustered(vectorLayer, layer);
+    }
+    makeClustered(layer, layerOptions) {
+        if (!['marker', 'bubble'].includes(layerOptions.type) || !('clustered' in layerOptions && layerOptions.clustered)) {
+            return layer;
+        }
+        // Clustering source
+        const vectorLayer = layer;
+        vectorLayer.setSource(new Cluster({
+            distance: layerOptions.clusterDistance,
+            minDistance: 10,
+            source: vectorLayer.getSource()
+        }));
+        vectorLayer.setStyle((feature) => {
+            const size = feature.get('features').length;
+            if (size > 1) {
+                let style = this.styleCache[size];
+                if (!style) {
+                    style = new Style({
+                        image: new CircleStyle({
+                            radius: 10,
+                            stroke: new Stroke({
+                                color: '#fff'
+                            }),
+                            fill: new Fill({
+                                color: '#3399CC'
+                            })
+                        }),
+                        text: new Text({ text: `${size}` })
+                    });
+                    this.styleCache[size] = style;
+                }
+                return style;
+            }
+            else {
+                return size === 1 ? feature.get('features')[0].get('classicStyle') : null;
+            }
+        });
+        return layer;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetMapLayerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetMapLayerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetMapLayerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class PryWidgetMapCssComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryWidgetMapCssComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: PryWidgetMapCssComponent, selector: "pry-widget-map-css", ngImport: i0, template: '', isInline: true, styles: [".layer-switcher{position:absolute;top:3.5em;right:.5em;text-align:left}.layer-switcher .panel{margin:0;border:4px solid #eee;border-radius:4px;background-color:#fff;display:none;max-height:inherit;height:100%;box-sizing:border-box;overflow-y:auto}.layer-switcher button{float:right;z-index:1;width:38px;height:38px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAACE1BMVEX///8A//8AgICA//8AVVVAQID///8rVVVJtttgv98nTmJ2xNgkW1ttyNsmWWZmzNZYxM4gWGgeU2JmzNNr0N1Rwc0eU2VXxdEhV2JqytQeVmMhVmNoydUfVGUgVGQfVGQfVmVqy9hqy9dWw9AfVWRpydVry9YhVmMgVGNUw9BrytchVWRexdGw294gVWQgVmUhVWPd4N6HoaZsy9cfVmQgVGRrytZsy9cgVWQgVWMgVWRsy9YfVWNsy9YgVWVty9YgVWVry9UgVWRsy9Zsy9UfVWRsy9YgVWVty9YgVWRty9Vsy9aM09sgVWRTws/AzM0gVWRtzNYgVWRuy9Zsy9cgVWRGcHxty9bb5ORbxdEgVWRty9bn6OZTws9mydRfxtLX3Nva5eRix9NFcXxOd4JPeINQeIMiVmVUws9Vws9Vw9BXw9BYxNBaxNBbxNBcxdJexdElWWgmWmhjyNRlx9IqXGtoipNpytVqytVryNNrytZsjZUuX210k5t1y9R2zNR3y9V4lp57zth9zdaAnKOGoaeK0NiNpquV09mesrag1tuitbmj1tuj19uktrqr2d2svcCu2d2xwMO63N+7x8nA3uDC3uDFz9DK4eHL4eLN4eIyYnDX5OM5Z3Tb397e4uDf4uHf5uXi5ePi5+Xj5+Xk5+Xm5+Xm6OY6aHXQ19fT4+NfhI1Ww89gx9Nhx9Nsy9ZWw9Dpj2abAAAAWnRSTlMAAQICAwQEBgcIDQ0ODhQZGiAiIyYpKywvNTs+QklPUlNUWWJjaGt0dnd+hIWFh4mNjZCSm6CpsbW2t7nDzNDT1dje5efr7PHy9PT29/j4+Pn5+vr8/f39/f6DPtKwAAABTklEQVR4Xr3QVWPbMBSAUTVFZmZmhhSXMjNvkhwqMzMzMzPDeD+xASvObKePPa+ffHVl8PlsnE0+qPpBuQjVJjno6pZpSKXYl7/bZyFaQxhf98hHDKEppwdWIW1frFnrxSOWHFfWesSEWC6R/P4zOFrix3TzDFLlXRTR8c0fEEJ1/itpo7SVO9Jdr1DVxZ0USyjZsEY5vZfiiAC0UoTGOrm9PZLuRl8X+Dq1HQtoFbJZbv61i+Poblh/97TC7n0neCcK0ETNUrz1/xPHf+DNAW9Ac6t8O8WH3Vp98f5lCaYKAOFZMLyHL4Y0fe319idMNgMMp+zWVSybUed/+/h7I4wRAG1W6XDy4XmjR9HnzvDRZXUAYDFOhC1S/Hh+fIXxen+eO+AKqbs+wAo30zDTDvDxKoJN88sjUzDFAvBzEUGFsnADoIvAJzoh2BZ8sner+Ke/vwECuQAAAABJRU5ErkJggg==);background-repeat:no-repeat;background-position:2px;background-color:#fff;color:#000;border:none}.layer-switcher button:focus,.layer-switcher button:hover{background-color:#fff}.layer-switcher.shown{overflow-y:hidden;display:flex;flex-direction:column;max-height:calc(100% - 5.5em)}.layer-switcher.shown.ol-control,.layer-switcher.shown.ol-control:hover{background-color:transparent}.layer-switcher.shown .panel{display:block}.layer-switcher.shown button{display:none}.layer-switcher.shown.layer-switcher-activation-mode-click>button{display:block;background-image:unset;right:2px;position:absolute;background-color:#eee;margin:1px}.layer-switcher.shown button:focus,.layer-switcher.shown button:hover{background-color:#fafafa}.layer-switcher ul{list-style:none;margin:1.6em .4em;padding-left:0}.layer-switcher ul ul{padding-left:1.2em;margin:.1em 0 0}.layer-switcher li.group+li.group{margin-top:.4em}.layer-switcher li.group>label{font-weight:700}.layer-switcher.layer-switcher-group-select-style-none li.group>label{padding-left:1.2em}.layer-switcher li{position:relative;margin-top:.3em}.layer-switcher li input{position:absolute;left:1.2em;height:1em;width:1em;font-size:1em}.layer-switcher li label{padding-left:2.7em;padding-right:1.2em;display:inline-block;margin-top:1px}.layer-switcher label.disabled{opacity:.4}.layer-switcher input{margin:0}.layer-switcher.touch ::-webkit-scrollbar{width:4px}.layer-switcher.touch ::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px}.layer-switcher.touch ::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.5)}li.layer-switcher-base-group>label{padding-left:1.2em}.layer-switcher .group button{position:absolute;left:0;display:inline-block;vertical-align:top;float:none;font-size:1em;width:1em;height:1em;margin:0;background-position:center 2px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAW0lEQVR4nGNgGAWMyBwXFxcGBgaGeii3EU0tXHzPnj1wQRYsihqQ+I0ExDEMQAYNONgoAN0AmMkNaDSyQSheY8JiaCMOGzE04zIAmyFYNTMw4A+DRhzsUUBtAADw4BCeIZkGdwAAAABJRU5ErkJggg==);transition:transform .2s ease-in-out}.layer-switcher .group.layer-switcher-close button{transform:rotate(-90deg);-webkit-transform:rotate(-90deg)}.layer-switcher .group.layer-switcher-fold.layer-switcher-close>ul{overflow:hidden;height:0}.layer-switcher.shown.layer-switcher-activation-mode-click{padding-left:34px}.layer-switcher.shown.layer-switcher-activation-mode-click>button{left:0;border-right:0}:root,:host{--ol-background-color: white;--ol-accent-background-color: #F5F5F5;--ol-subtle-background-color: rgba(128, 128, 128, .25);--ol-partial-background-color: rgba(255, 255, 255, .75);--ol-foreground-color: #333333;--ol-subtle-foreground-color: #666666;--ol-brand-color: #00AAFF}.ol-box{box-sizing:border-box;border-radius:2px;border:1.5px solid var(--ol-background-color);background-color:var(--ol-partial-background-color)}.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:var(--ol-partial-background-color);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line-inner{border:1px solid var(--ol-subtle-foreground-color);border-top:none;color:var(--ol-foreground-color);font-size:10px;text-align:center;margin:1px;will-change:contents,width;transition:all .25s}.ol-scale-bar{position:absolute;bottom:8px;left:8px}.ol-scale-bar-inner{display:flex}.ol-scale-step-marker{width:1px;height:15px;background-color:var(--ol-foreground-color);float:right;z-index:10}.ol-scale-step-text{position:absolute;bottom:-5px;font-size:10px;z-index:11;color:var(--ol-foreground-color);text-shadow:-1.5px 0 var(--ol-partial-background-color),0 1.5px var(--ol-partial-background-color),1.5px 0 var(--ol-partial-background-color),0 -1.5px var(--ol-partial-background-color)}.ol-scale-text{position:absolute;font-size:12px;text-align:center;bottom:25px;color:var(--ol-foreground-color);text-shadow:-1.5px 0 var(--ol-partial-background-color),0 1.5px var(--ol-partial-background-color),1.5px 0 var(--ol-partial-background-color),0 -1.5px var(--ol-partial-background-color)}.ol-scale-singlebar{position:relative;height:10px;z-index:9;box-sizing:border-box;border:1px solid var(--ol-foreground-color)}.ol-scale-singlebar-even{background-color:var(--ol-subtle-foreground-color)}.ol-scale-singlebar-odd{background-color:var(--ol-background-color)}.ol-unsupported{display:none}.ol-viewport,.ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-viewport canvas{all:unset}.ol-selectable{-webkit-touch-callout:default;-webkit-user-select:text;user-select:text}.ol-grabbing{cursor:grabbing}.ol-grab{cursor:move;cursor:grab}.ol-control{position:absolute;background-color:var(--ol-subtle-background-color);border-radius:4px}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}.ol-control button{display:block;margin:1px;padding:0;color:var(--ol-subtle-foreground-color);font-weight:700;text-decoration:none;font-size:inherit;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:var(--ol-background-color);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:hover,.ol-control button:focus{text-decoration:none;outline:1px solid var(--ol-subtle-foreground-color);color:var(--ol-foreground-color)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em);display:flex;flex-flow:row-reverse;align-items:center}.ol-attribution a{color:var(--ol-subtle-foreground-color);text-decoration:none}.ol-attribution ul{margin:0;padding:1px .5em;color:var(--ol-foreground-color);text-shadow:0 0 2px var(--ol-background-color);font-size:12px}.ol-attribution li{display:inline;list-style:none}.ol-attribution li:not(:last-child):after{content:\" \"}.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}.ol-attribution button{flex-shrink:0}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution:not(.ol-collapsed){background:var(--ol-partial-background-color)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{top:4.5em;left:.5em;height:200px}.ol-zoomslider button{position:relative;height:10px}.ol-touch .ol-zoomslider{top:5.5em}.ol-overviewmap{left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:block}.ol-overviewmap .ol-overviewmap-map{border:1px solid var(--ol-subtle-foreground-color);height:150px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:0;left:0;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:var(--ol-subtle-background-color)}.ol-overviewmap-box{border:1.5px dotted var(--ol-subtle-foreground-color)}.ol-overviewmap .ol-overviewmap-box:hover{cursor:move}.o-widget--map{display:flex;flex-direction:column}.o-widget--map div.ol-scale-bar{position:absolute;left:initial;right:8px;bottom:8px}.o-map-wrapper{display:flex;width:100%;flex:1 1}.o-map{width:100%;height:100%}#map,.map-frame{height:100%}.layer-switcher{top:5rem;left:.5rem;right:unset;border-width:.0625rem;border-style:solid;border-radius:.4375rem}.layer-switcher button{background-size:30px;background-position:unset;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIj48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTIwLjA4MyAxNS4ybDEuMjAyLjcyMWEuNS41IDAgMCAxIDAgLjg1OGwtOC43NyA1LjI2MmExIDEgMCAwIDEtMS4wMyAwbC04Ljc3LTUuMjYyYS41LjUgMCAwIDEgMC0uODU4bDEuMjAyLS43MjFMMTIgMjAuMDVsOC4wODMtNC44NXptMC00LjdsMS4yMDIuNzIxYS41LjUgMCAwIDEgMCAuODU4TDEyIDE3LjY1bC05LjI4NS01LjU3MWEuNS41IDAgMCAxIDAtLjg1OGwxLjIwMi0uNzIxTDEyIDE1LjM1bDguMDgzLTQuODV6bS03LjU2OS05LjE5MWw4Ljc3MSA1LjI2MmEuNS41IDAgMCAxIDAgLjg1OEwxMiAxMyAyLjcxNSA3LjQyOWEuNS41IDAgMCAxIDAtLjg1OGw4Ljc3LTUuMjYyYTEgMSAwIDAgMSAxLjAzIDB6TTEyIDMuMzMyTDUuODg3IDcgMTIgMTAuNjY4IDE4LjExMyA3IDEyIDMuMzMyeiIvPjwvc3ZnPg==)}.layer-switcher.shown.ol-control:hover{background-color:#fff9}.ol-attribution{top:.3125rem;bottom:unset}.a-form-field[type=radio]:read-only{pointer-events:auto}\n", ".m-layer-legend{z-index:2;top:14.0625rem;left:.5rem}.m-layer-legend.ol-control{border:1px solid #bccad8}.m-layer-legend button{background-color:#fafafa!important;color:#000}.m-layer-legend .-hidden{display:none}.m-layer-legend__toggle{width:1.875rem;height:1.875rem}.m-layer-legend__title{display:flex;flex-direction:row;align-items:center;background-color:#fff;justify-content:space-between}.m-layer-legend__image{background:white}.m-layer-legend__error{font-style:italic;color:#c74646}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryWidgetMapCssComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-widget-map-css', template: '', encapsulation: ViewEncapsulation.None, styles: [".layer-switcher{position:absolute;top:3.5em;right:.5em;text-align:left}.layer-switcher .panel{margin:0;border:4px solid #eee;border-radius:4px;background-color:#fff;display:none;max-height:inherit;height:100%;box-sizing:border-box;overflow-y:auto}.layer-switcher button{float:right;z-index:1;width:38px;height:38px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAACE1BMVEX///8A//8AgICA//8AVVVAQID///8rVVVJtttgv98nTmJ2xNgkW1ttyNsmWWZmzNZYxM4gWGgeU2JmzNNr0N1Rwc0eU2VXxdEhV2JqytQeVmMhVmNoydUfVGUgVGQfVGQfVmVqy9hqy9dWw9AfVWRpydVry9YhVmMgVGNUw9BrytchVWRexdGw294gVWQgVmUhVWPd4N6HoaZsy9cfVmQgVGRrytZsy9cgVWQgVWMgVWRsy9YfVWNsy9YgVWVty9YgVWVry9UgVWRsy9Zsy9UfVWRsy9YgVWVty9YgVWRty9Vsy9aM09sgVWRTws/AzM0gVWRtzNYgVWRuy9Zsy9cgVWRGcHxty9bb5ORbxdEgVWRty9bn6OZTws9mydRfxtLX3Nva5eRix9NFcXxOd4JPeINQeIMiVmVUws9Vws9Vw9BXw9BYxNBaxNBbxNBcxdJexdElWWgmWmhjyNRlx9IqXGtoipNpytVqytVryNNrytZsjZUuX210k5t1y9R2zNR3y9V4lp57zth9zdaAnKOGoaeK0NiNpquV09mesrag1tuitbmj1tuj19uktrqr2d2svcCu2d2xwMO63N+7x8nA3uDC3uDFz9DK4eHL4eLN4eIyYnDX5OM5Z3Tb397e4uDf4uHf5uXi5ePi5+Xj5+Xk5+Xm5+Xm6OY6aHXQ19fT4+NfhI1Ww89gx9Nhx9Nsy9ZWw9Dpj2abAAAAWnRSTlMAAQICAwQEBgcIDQ0ODhQZGiAiIyYpKywvNTs+QklPUlNUWWJjaGt0dnd+hIWFh4mNjZCSm6CpsbW2t7nDzNDT1dje5efr7PHy9PT29/j4+Pn5+vr8/f39/f6DPtKwAAABTklEQVR4Xr3QVWPbMBSAUTVFZmZmhhSXMjNvkhwqMzMzMzPDeD+xASvObKePPa+ffHVl8PlsnE0+qPpBuQjVJjno6pZpSKXYl7/bZyFaQxhf98hHDKEppwdWIW1frFnrxSOWHFfWesSEWC6R/P4zOFrix3TzDFLlXRTR8c0fEEJ1/itpo7SVO9Jdr1DVxZ0USyjZsEY5vZfiiAC0UoTGOrm9PZLuRl8X+Dq1HQtoFbJZbv61i+Poblh/97TC7n0neCcK0ETNUrz1/xPHf+DNAW9Ac6t8O8WH3Vp98f5lCaYKAOFZMLyHL4Y0fe319idMNgMMp+zWVSybUed/+/h7I4wRAG1W6XDy4XmjR9HnzvDRZXUAYDFOhC1S/Hh+fIXxen+eO+AKqbs+wAo30zDTDvDxKoJN88sjUzDFAvBzEUGFsnADoIvAJzoh2BZ8sner+Ke/vwECuQAAAABJRU5ErkJggg==);background-repeat:no-repeat;background-position:2px;background-color:#fff;color:#000;border:none}.layer-switcher button:focus,.layer-switcher button:hover{background-color:#fff}.layer-switcher.shown{overflow-y:hidden;display:flex;flex-direction:column;max-height:calc(100% - 5.5em)}.layer-switcher.shown.ol-control,.layer-switcher.shown.ol-control:hover{background-color:transparent}.layer-switcher.shown .panel{display:block}.layer-switcher.shown button{display:none}.layer-switcher.shown.layer-switcher-activation-mode-click>button{display:block;background-image:unset;right:2px;position:absolute;background-color:#eee;margin:1px}.layer-switcher.shown button:focus,.layer-switcher.shown button:hover{background-color:#fafafa}.layer-switcher ul{list-style:none;margin:1.6em .4em;padding-left:0}.layer-switcher ul ul{padding-left:1.2em;margin:.1em 0 0}.layer-switcher li.group+li.group{margin-top:.4em}.layer-switcher li.group>label{font-weight:700}.layer-switcher.layer-switcher-group-select-style-none li.group>label{padding-left:1.2em}.layer-switcher li{position:relative;margin-top:.3em}.layer-switcher li input{position:absolute;left:1.2em;height:1em;width:1em;font-size:1em}.layer-switcher li label{padding-left:2.7em;padding-right:1.2em;display:inline-block;margin-top:1px}.layer-switcher label.disabled{opacity:.4}.layer-switcher input{margin:0}.layer-switcher.touch ::-webkit-scrollbar{width:4px}.layer-switcher.touch ::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px}.layer-switcher.touch ::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.5)}li.layer-switcher-base-group>label{padding-left:1.2em}.layer-switcher .group button{position:absolute;left:0;display:inline-block;vertical-align:top;float:none;font-size:1em;width:1em;height:1em;margin:0;background-position:center 2px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAW0lEQVR4nGNgGAWMyBwXFxcGBgaGeii3EU0tXHzPnj1wQRYsihqQ+I0ExDEMQAYNONgoAN0AmMkNaDSyQSheY8JiaCMOGzE04zIAmyFYNTMw4A+DRhzsUUBtAADw4BCeIZkGdwAAAABJRU5ErkJggg==);transition:transform .2s ease-in-out}.layer-switcher .group.layer-switcher-close button{transform:rotate(-90deg);-webkit-transform:rotate(-90deg)}.layer-switcher .group.layer-switcher-fold.layer-switcher-close>ul{overflow:hidden;height:0}.layer-switcher.shown.layer-switcher-activation-mode-click{padding-left:34px}.layer-switcher.shown.layer-switcher-activation-mode-click>button{left:0;border-right:0}:root,:host{--ol-background-color: white;--ol-accent-background-color: #F5F5F5;--ol-subtle-background-color: rgba(128, 128, 128, .25);--ol-partial-background-color: rgba(255, 255, 255, .75);--ol-foreground-color: #333333;--ol-subtle-foreground-color: #666666;--ol-brand-color: #00AAFF}.ol-box{box-sizing:border-box;border-radius:2px;border:1.5px solid var(--ol-background-color);background-color:var(--ol-partial-background-color)}.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:var(--ol-partial-background-color);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line-inner{border:1px solid var(--ol-subtle-foreground-color);border-top:none;color:var(--ol-foreground-color);font-size:10px;text-align:center;margin:1px;will-change:contents,width;transition:all .25s}.ol-scale-bar{position:absolute;bottom:8px;left:8px}.ol-scale-bar-inner{display:flex}.ol-scale-step-marker{width:1px;height:15px;background-color:var(--ol-foreground-color);float:right;z-index:10}.ol-scale-step-text{position:absolute;bottom:-5px;font-size:10px;z-index:11;color:var(--ol-foreground-color);text-shadow:-1.5px 0 var(--ol-partial-background-color),0 1.5px var(--ol-partial-background-color),1.5px 0 var(--ol-partial-background-color),0 -1.5px var(--ol-partial-background-color)}.ol-scale-text{position:absolute;font-size:12px;text-align:center;bottom:25px;color:var(--ol-foreground-color);text-shadow:-1.5px 0 var(--ol-partial-background-color),0 1.5px var(--ol-partial-background-color),1.5px 0 var(--ol-partial-background-color),0 -1.5px var(--ol-partial-background-color)}.ol-scale-singlebar{position:relative;height:10px;z-index:9;box-sizing:border-box;border:1px solid var(--ol-foreground-color)}.ol-scale-singlebar-even{background-color:var(--ol-subtle-foreground-color)}.ol-scale-singlebar-odd{background-color:var(--ol-background-color)}.ol-unsupported{display:none}.ol-viewport,.ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-viewport canvas{all:unset}.ol-selectable{-webkit-touch-callout:default;-webkit-user-select:text;user-select:text}.ol-grabbing{cursor:grabbing}.ol-grab{cursor:move;cursor:grab}.ol-control{position:absolute;background-color:var(--ol-subtle-background-color);border-radius:4px}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}.ol-control button{display:block;margin:1px;padding:0;color:var(--ol-subtle-foreground-color);font-weight:700;text-decoration:none;font-size:inherit;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:var(--ol-background-color);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:hover,.ol-control button:focus{text-decoration:none;outline:1px solid var(--ol-subtle-foreground-color);color:var(--ol-foreground-color)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em);display:flex;flex-flow:row-reverse;align-items:center}.ol-attribution a{color:var(--ol-subtle-foreground-color);text-decoration:none}.ol-attribution ul{margin:0;padding:1px .5em;color:var(--ol-foreground-color);text-shadow:0 0 2px var(--ol-background-color);font-size:12px}.ol-attribution li{display:inline;list-style:none}.ol-attribution li:not(:last-child):after{content:\" \"}.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}.ol-attribution button{flex-shrink:0}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution:not(.ol-collapsed){background:var(--ol-partial-background-color)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{top:4.5em;left:.5em;height:200px}.ol-zoomslider button{position:relative;height:10px}.ol-touch .ol-zoomslider{top:5.5em}.ol-overviewmap{left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:block}.ol-overviewmap .ol-overviewmap-map{border:1px solid var(--ol-subtle-foreground-color);height:150px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:0;left:0;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:var(--ol-subtle-background-color)}.ol-overviewmap-box{border:1.5px dotted var(--ol-subtle-foreground-color)}.ol-overviewmap .ol-overviewmap-box:hover{cursor:move}.o-widget--map{display:flex;flex-direction:column}.o-widget--map div.ol-scale-bar{position:absolute;left:initial;right:8px;bottom:8px}.o-map-wrapper{display:flex;width:100%;flex:1 1}.o-map{width:100%;height:100%}#map,.map-frame{height:100%}.layer-switcher{top:5rem;left:.5rem;right:unset;border-width:.0625rem;border-style:solid;border-radius:.4375rem}.layer-switcher button{background-size:30px;background-position:unset;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIj48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTIwLjA4MyAxNS4ybDEuMjAyLjcyMWEuNS41IDAgMCAxIDAgLjg1OGwtOC43NyA1LjI2MmExIDEgMCAwIDEtMS4wMyAwbC04Ljc3LTUuMjYyYS41LjUgMCAwIDEgMC0uODU4bDEuMjAyLS43MjFMMTIgMjAuMDVsOC4wODMtNC44NXptMC00LjdsMS4yMDIuNzIxYS41LjUgMCAwIDEgMCAuODU4TDEyIDE3LjY1bC05LjI4NS01LjU3MWEuNS41IDAgMCAxIDAtLjg1OGwxLjIwMi0uNzIxTDEyIDE1LjM1bDguMDgzLTQuODV6bS03LjU2OS05LjE5MWw4Ljc3MSA1LjI2MmEuNS41IDAgMCAxIDAgLjg1OEwxMiAxMyAyLjcxNSA3LjQyOWEuNS41IDAgMCAxIDAtLjg1OGw4Ljc3LTUuMjYyYTEgMSAwIDAgMSAxLjAzIDB6TTEyIDMuMzMyTDUuODg3IDcgMTIgMTAuNjY4IDE4LjExMyA3IDEyIDMuMzMyeiIvPjwvc3ZnPg==)}.layer-switcher.shown.ol-control:hover{background-color:#fff9}.ol-attribution{top:.3125rem;bottom:unset}.a-form-field[type=radio]:read-only{pointer-events:auto}\n", ".m-layer-legend{z-index:2;top:14.0625rem;left:.5rem}.m-layer-legend.ol-control{border:1px solid #bccad8}.m-layer-legend button{background-color:#fafafa!important;color:#000}.m-layer-legend .-hidden{display:none}.m-layer-legend__toggle{width:1.875rem;height:1.875rem}.m-layer-legend__title{display:flex;flex-direction:row;align-items:center;background-color:#fff;justify-content:space-between}.m-layer-legend__image{background:white}.m-layer-legend__error{font-style:italic;color:#c74646}\n"] }]
+        }] });
+
+class GeometryFieldsForPipe {
+    constructor(store) {
+        this.store = store;
+        this.classes$ = this.store
+            .select(ClassSelectors.classes)
+            .pipe(map((classes) => classes.sort((a, b) => a.name.localeCompare(b.name))));
+        this.fields$ = this.store.select(FieldSelectors.fields);
+    }
+    transform(value, ...args) {
+        const specificLayer = value;
+        const limitToClasses = args[0].classes;
+        const type = geometryForLayer({ type: args[0].type });
+        return combineLatest([this.classes$, this.fields$]).pipe(filter(([classes, fields]) => !!classes && !!fields && classes.length > 0 && fields.length > 0), map(([classes, fields]) => {
+            const potentialFields = classes
+                .map((cl) => cl.id)
+                .filter((oClassId) => !specificLayer.classes ||
+                specificLayer.classes.length === 0 ||
+                !!specificLayer.classes?.find((cl) => oClassId === cl))
+                .filter((classId) => !limitToClasses || limitToClasses.length === 0 || limitToClasses.includes(classId))
+                .map((oClassId) => classes.find((cl) => cl.id === oClassId) ?? { attributes: [] })
+                .map((oClass) => oClass.attributes)
+                .reduce((prev, curr) => [...prev, ...curr], [])
+                .filter((attr) => {
+                const attrField = fields.find((f) => f.id === attr.field);
+                return !!attrField && attrField.type === type;
+            })
+                .sort((a, b) => a.name.localeCompare(b.name));
+            const resArr = [];
+            potentialFields.forEach(function (attr) {
+                if (resArr.findIndex((x) => x.name == attr.name) <= -1) {
+                    resArr.push(attr);
+                }
+            });
+            return resArr;
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: GeometryFieldsForPipe, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: GeometryFieldsForPipe, name: "geometryFieldsFor" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: GeometryFieldsForPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'geometryFieldsFor'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.Store }]; } });
+
+class WidgetMapLegendUrlPipe {
+    transform(geoLayer) {
+        if (geoLayer && geoLayer.url) {
+            const layerUrlWithQmark = geoLayer.url.indexOf('?') === -1 ? geoLayer.url + '?' : geoLayer.url;
+            const layerUrlWithService = layerUrlWithQmark.indexOf('&SERVICE=') === -1 ? layerUrlWithQmark + '&SERVICE=WMS' : layerUrlWithQmark;
+            const layerUrlWithVersion = layerUrlWithService.indexOf('&VERSION=') === -1 ? layerUrlWithService + '&VERSION=1.3.0' : layerUrlWithService;
+            return `${layerUrlWithVersion}&REQUEST=GetLegendGraphic&format=image%2Fpng&LAYER=${geoLayer.paramLayer}&LEGEND_OPTIONS=fontName:Ubuntu`;
+        }
+        return '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetMapLegendUrlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: WidgetMapLegendUrlPipe, name: "legendUrl" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetMapLegendUrlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'legendUrl'
+                }]
+        }] });
+
+class WidgetMapComponent extends DataWidgetComponent {
+    constructor(store, snackBar, translateService, tooltipFactoryService, geocodingService, overlay, viewContainerRef, symbolService, injector, widgetMapLayerService, el) {
+        super(store, el);
+        this.snackBar = snackBar;
+        this.translateService = translateService;
+        this.tooltipFactoryService = tooltipFactoryService;
+        this.geocodingService = geocodingService;
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.symbolService = symbolService;
+        this.injector = injector;
+        this.widgetMapLayerService = widgetMapLayerService;
+        this.layerTypes = this.widgetMapLayerService.implementationList.sort((a, b) => this.translateService
+            .instant('@pry.widget.map.layerType.' + a)
+            .localeCompare(this.translateService.instant('@pry.widget.map.layerType.' + b)));
+        this.optionsCopy = {};
+        this.selectionInteraction = new SelectionInteraction();
+        this.additionalLayers$ = new BehaviorSubject([]);
+        this.WIDGET_HEADER_HEIGHT = WIDGET_HEADER_HEIGHT;
+        this.i = 0;
+        this.actions$ = widgetMapConfig.actions$;
+        this.classicFeatures$ = new BehaviorSubject([]);
+        this.legendTabOpen = false;
+        this.legendTab = 0;
+        this.imageNotProvided = [];
+        this.zoomAndCenter$ = new BehaviorSubject({});
+        this.basicActions$ = this.actions$.pipe(map((actions) => actions.filter((action) => action !== 'export' && action !== 'upload')));
+        this.classes$ = this.store
+            .select(ClassSelectors.classes)
+            .pipe(map((classes) => classes.sort((a, b) => a.name.localeCompare(b.name))));
+        this.fields$ = this.store.select(FieldSelectors.fields);
+        this.styles$ = this.store.select(ConfigSelectors.mapStyles).pipe(map((styles) => styles.concat({
+            identifier: 'none',
+            label: this.translateService.instant('@pry.widget.map.noStyle')
+        })));
+        this.selectedIds$ = this.store.select(DashboardSelectors.selectedItemIds);
+        this.geoServerLayerDescriptions$ = combineLatest([
+            this.usedDatasources$.pipe(startWith([])),
+            this.store.select(ConfigSelectors.geoServerUrl).pipe(debounceTime(10), startWith(undefined))
+        ]).pipe(map(([dataSources, geoServerUrl]) => {
+            if (!geoServerUrl)
+                return [];
+            return dataSources
+                .filter((ds) => ds.metadata?.find((m) => m.metadataDef.name === GeoMetadata.NAMESPACE) !== undefined)
+                .map((ds) => {
+                ds = ds;
+                const metadatas = {};
+                ds.metadata?.forEach((m) => (metadatas[m.metadataDef.name] = m.value));
+                return {
+                    type: 'geoserver',
+                    url: geoServerUrl + '/' + metadatas[GeoMetadata.NAMESPACE] + '/wms?SERVICE=WMS&VERSION=1.3.0',
+                    paramLayer: metadatas[GeoMetadata.KEY],
+                    paramTiled: true,
+                    opacity: parseInt(metadatas[GeoMetadata.OPACITY] ?? 100, 10),
+                    title: metadatas[GeoMetadata.NAMESPACE] + ':' + metadatas[GeoMetadata.KEY],
+                    oClass: ds.oClass,
+                    key: metadatas[GeoMetadata.NAMESPACE] + ':' + metadatas[GeoMetadata.KEY]
+                };
+            })
+                .map((layer) => layer);
+        }));
+        this.options$ = combineLatest([
+            this.manifest$,
+            this.resultSet$,
+            this.classes$,
+            this.fields$,
+            this.styles$,
+            this.geoServerLayerDescriptions$
+        ]).pipe(map(([manifest, resultSet, classes, fields, mapStyles, geoLayers]) => {
+            // auto determine layers parameters to provide a working view
+            const autoOptions = JSON.parse(JSON.stringify({ relations: true, ...manifest.options }));
+            if (!autoOptions.tooltipMode) {
+                autoOptions.tooltipMode = TooltipMode.HOVER;
+            }
+            if (geoLayers.length > 0) {
+                autoOptions.tooltipMode = TooltipMode.CLICK;
+            }
+            autoOptions.layers?.forEach((layer, i) => {
+                populateLocationAttribute(layer, resultSet, classes, fields);
+                populateIntensityAttribute(layer, resultSet, classes, fields);
+                if (autoOptions.attributions) {
+                    layer.attribution = layer.attribution ?? '';
+                }
+                if (!layer.title) {
+                    this.setDefaultLayerTitle(layer, i);
+                }
+            });
+            const actualLayerKeys = (autoOptions.layers ?? [])
+                .map((layer) => layer.key ?? null)
+                .filter((key) => !!key);
+            // Get all previous layers, without geoserver layers that are not requested anymore, then add new geoserver layers (potentially with a preconfig from manifest).
+            autoOptions.layers = [
+                ...(autoOptions.layers ?? []).map((layer) => {
+                    const geoLayer = geoLayers.find((layer) => layer.key === layer.key) ?? null;
+                    return layer.type === 'geoserver'
+                        ? geoLayer
+                            ? { ...geoLayer, ...layer }
+                            : null
+                        : { ...layer };
+                }),
+                ...geoLayers.filter((layer) => !actualLayerKeys.includes(layer.key))
+            ].filter((layer) => !!layer);
+            if (!!mapStyles &&
+                mapStyles.length > 0 &&
+                (!autoOptions.style || !mapStyles.map((style) => style.identifier).includes(autoOptions.style))) {
+                const lightStyles = mapStyles.filter((style) => !(style.identifier ?? '-').includes('dark'));
+                autoOptions.style = lightStyles.length > 0 ? lightStyles[0].identifier : mapStyles[0].identifier;
+            }
+            return autoOptions;
+        }));
+        this.subscriptions.add(this.options$.pipe(filter((opt) => !!opt)).subscribe((options) => {
+            this.optionsCopy = JSON.parse(JSON.stringify(options));
+        }));
+        this.subscriptions.add(this.store
+            .select(DashboardSelectors.address)
+            .pipe(filter((addr) => !!addr && !!addr.pointAddress))
+            .subscribe((addr) => {
+            this.map?.dispatchEvent(new AddressSearchedEvent({
+                type: 'searched-address',
+                latLon: addr.latLon,
+                coordinates: fromLonLat([...addr.latLon].reverse(), this.map.getView().getProjection()),
+                query: addr.latLon,
+                address: addr.pointAddress
+            }));
+        }));
+        this.mapUrl$ = this.store.select(ConfigSelectors.mapUrl);
+        this.wmsFeatures$ = this.store.select(DashboardSelectors.wmsFeatures);
+        this.bottomLeft$ = combineLatest([this.widgetSize$, this.displayHeader$]).pipe(map(([size, displayHeader]) => `translate(10px ,calc(${size.height}px - 100% - 10px - ${displayHeader ? WIDGET_HEADER_HEIGHT + 'px' : '0px'}))`), delay(10));
+        this.itemStyles$ = combineLatest([this.resultSet$, this.manifest$, this.staticResultSet$]).pipe(mergeMap(([rs, manifest, srs]) => {
+            if ((manifest.datasource === undefined || manifest.datasource.length === 0) && !srs) {
+                return of({});
+            }
+            else {
+                return from(new Promise((resolve, reject) => {
+                    const total = Object.values(rs.items).reduce((p, c) => c.length + p, 0);
+                    if (total === 0)
+                        resolve({});
+                    const result = {};
+                    Object.values(rs.items).forEach((items) => {
+                        items.forEach((item) => Promise.all([
+                            this.symbolService.getSymbolAsIconStyle(item),
+                            this.symbolService.getSymbolAsIconStyle(item, '#8cd560')
+                        ]).then(([style, bStyle]) => {
+                            result[item.id] = { classic: style, bordered: bStyle };
+                            if (Object.keys(result).length >= total) {
+                                resolve(result);
+                            }
+                        }));
+                    });
+                }));
+            }
+        }));
+        this.height$ = combineLatest([this.widgetSize$.pipe(debounceTime(100)), this.displayHeader$]).pipe(map(([size, display]) => (size.height ?? 100) - (display ? WIDGET_HEADER_HEIGHT : 0)), delay(10));
+    }
+    ngAfterViewInit() {
+        this.map$ = combineLatest([this.mapUrl$, this.options$, this.itemStyles$, this.widgetSize$]).pipe(debounceTime(300), mergeMap(([mapUrl, options, rs]) => {
+            if (!this.map) {
+                this.map = new Map({ target: this.mapRef.nativeElement });
+            }
+            this.map.setTarget(undefined);
+            const rect = this.mapRef.nativeElement.getBoundingClientRect();
+            if (rect.height === 0 || rect.width === 0) {
+                console.warn('Map size problem. Resize map');
+            }
+            let mapPromise = new Promise((resolve) => resolve(this.map));
+            if (options.style !== 'none') {
+                mapPromise = apply(this.map, `${mapUrl}/styles/${options.style}/style.json`);
+            }
+            return from(mapPromise).pipe(tap((map) => {
+                this.map.setTarget(this.mapRef.nativeElement);
+                this.map.setView(new View({
+                    center: fromLonLat(options.center ?? DEFAULT_MAP_CENTER),
+                    maxZoom: options.zoom?.max ?? DEFAULT_ZOOM_MAX,
+                    minZoom: options.zoom?.min ?? DEFAULT_ZOOM_MIN,
+                    zoom: options.zoom?.start ?? DEFAULT_ZOOM_START
+                }));
+                if (!options.attributions) {
+                    this.map.getControls().forEach((control) => {
+                        if (control instanceof Attribution) {
+                            this.map.removeControl(control);
+                        }
+                    });
+                }
+                this.map.addInteraction(this.selectionInteraction.init(this.store));
+                this.addContextMenuInteraction();
+                this.addDropInteraction();
+                this.addOverlayOnHoverInteraction();
+                this.addSearchBarControl();
+                this.addLayerSwitcher();
+                this.addScaleControl();
+                this.addUpdateZoomAndCenter();
+                this.fitMapForObjects(options);
+            }));
+        }));
+        this.layers$ = combineLatest([
+            this.resultSet$,
+            this.usedDatasources$,
+            this.options$,
+            this.classes$,
+            this.additionalLayers$,
+            this.itemStyles$,
+            this.store.select(ConfigSelectors.geoServerUrl),
+            this.map$
+        ]).pipe(filter(([resultSet, dataSources, options, classes, additionalLayers, itemStyles, geoServerUrl, map]) => !!resultSet && !!options && !!classes && !!map), map(([resultSet, dataSources, options, classes, additionalLayers, itemStyles, geoServerUrl]) => {
+            let hasRelationLayer = null;
+            const layers = (options?.layers || [])
+                .filter(
+            // @ts-ignore
+            (layer) => this.widgetMapLayerService.dontNeedLocation.includes(layer.type) || !!layer.attribute)
+                .filter(
+            // @ts-ignore
+            (layer) => this.widgetMapLayerService.dontNeedIntensity.includes(layer.type) || !!layer.intensityAttribute)
+                .map((layer, idx) => {
+                const attributesForClass = Object.keys(resultSet.items)
+                    .map((classId) => ({
+                    classId,
+                    ...this.getAttributesForDrawing(classes, classId, layer)
+                }))
+                    .reduce((p, c) => ({
+                    ...p,
+                    [c.classId]: c
+                }), {});
+                let layerClassesId = classes.map((clazz) => clazz.id);
+                if ('classes' in layer && !!layer.classes && layer.classes.length > 0) {
+                    layerClassesId = layer.classes;
+                }
+                let range = { min: 0, max: 0 };
+                // @ts-ignore
+                if (!!layer.intensityAttribute) {
+                    const values = Object.keys(resultSet.items)
+                        .map((classId) => resultSet.items[classId].map((item) => ItemUtils.getAttributeCalculatedValue(item, attributesForClass[item.oClass].intensityAttribute)))
+                        .reduce((p, c) => [...p, ...c], [])
+                        .filter((value) => !!value && typeof value === 'number');
+                    range = values.reduce((p, c) => ({ min: Math.min(p.min, c), max: Math.max(p.max, c) }), {
+                        min: Number.MAX_VALUE,
+                        max: -Number.MAX_VALUE
+                    });
+                }
+                const impl = this.widgetMapLayerService.layersImplementation[layer.type];
+                if (!!impl) {
+                    const resultLayer = impl(layer, attributesForClass, layerClassesId, resultSet, range, itemStyles, this.map);
+                    if (layer.type === 'relation') {
+                        hasRelationLayer = resultLayer;
+                    }
+                    resultLayer.set('title', layer.title);
+                    return resultLayer;
+                }
+                else {
+                    console.error(`Layer type ${layer.type} is unknown`);
+                    return null;
+                }
+            })
+                .filter((layer) => !!layer);
+            if (!!hasRelationLayer) {
+                const features = layers
+                    .filter((layer) => !(layer instanceof Tile))
+                    .map((layer) => layer
+                    // @ts-ignore
+                    .getSource()
+                    .getFeatures()
+                    .filter((features) => !!features.get('id') || !!features.get('features')))
+                    .reduce((p, c) => [...p, ...c], []);
+                resultSet.relations.forEach((relation) => {
+                    const source = features.find((f) => f.get('id') === relation.source);
+                    const dest = features.find((f) => f.get('id') === relation.destination);
+                    if (!!source && !!dest) {
+                        hasRelationLayer.getSource()?.addFeature(getLinkFeature(relation, source, dest));
+                    }
+                });
+            }
+            layers.push(...additionalLayers);
+            layers.forEach((layer, index, arr) => layer.set('zIndex', arr.length - index));
+            return layers;
+        }));
+        this.legendLayers$ = this.options$.pipe(map((options) => (options.layers ?? []).filter((layer) => ['geoserver', 'wms'].includes(layer.type))), delay(10));
+        this.subscriptions.add(combineLatest([
+            this.mapUrl$,
+            this.map$,
+            this.layers$,
+            this.options$,
+            this.selectedIds$,
+            this.additionalLayers$
+        ]).subscribe(([mapUrl, map, layers, options, selectedIds]) => {
+            this.map.setLayers(layers);
+            this.map
+                .getAllLayers()
+                .filter((layer) => !(layer instanceof Tile))
+                .forEach((layer) => {
+                layer.getSource()?.getFeatures().forEach((feature) => {
+                    const type = feature.get('type');
+                    if (['bubble', 'marker', 'point', 'line', 'polygon', 'multi-line', 'multi-polygon'].includes(type)) {
+                        feature.setStyle(feature.get(selectedIds.includes(feature.get('id')) ? 'selectedStyle' : 'classicStyle'));
+                    }
+                });
+            });
+            setTimeout(() => {
+                if (options.style !== 'none') {
+                    apply(this.map, `${mapUrl}/styles/${options.style}/style.json`).then((map) => {
+                        this.map.setTarget(this.mapRef.nativeElement);
+                    });
+                }
+                this.fitMapForObjects(options, selectedIds);
+                this.map.updateSize();
+            }, 200);
+        }));
+        this.subscriptions.add(combineLatest([this.wmsFeatures$, this.classicFeatures$]).subscribe(([wmsFeatures, classicFeatures]) => {
+            if (this.map) {
+                const popupOverlay = new Overlay({
+                    element: this.popup.nativeElement,
+                    offset: [9, 9]
+                });
+                this.map.addOverlay(popupOverlay);
+                this.popupContent.clear();
+                const componentPromises = [];
+                wmsFeatures.forEach((value) => {
+                    componentPromises.push(this.generateTooltip(value));
+                });
+                classicFeatures.forEach((value) => {
+                    componentPromises.push(this.generateTooltip(value));
+                });
+                Promise.all(componentPromises).then((promises) => {
+                    const realComponents = promises.filter((component) => !!component);
+                    if (realComponents.length <= 0) {
+                        this.popup.nativeElement.hidden = true;
+                        popupOverlay.setPosition([-9999999999, -9999999999]);
+                    }
+                    else {
+                        this.popup.nativeElement.hidden = false;
+                        popupOverlay.setPosition(wmsFeatures.length > 0 ? wmsFeatures[0].coordinates : classicFeatures[0].coordinates);
+                    }
+                });
+            }
+        }));
+    }
+    initResultSet$() {
+        return combineLatest([
+            this.store.select(DashboardSelectors.resultSets),
+            this.datasourceIds$,
+            this.staticResultSet$,
+            this.store.select(DataSourceSelectors.datasets)
+        ]).pipe(map(([resultSets, resultSetNamesArray, staticResultSet, definitions]) => {
+            if (!!staticResultSet) {
+                return staticResultSet;
+            }
+            const resultSetArray = resultSetNamesArray
+                .filter((rsName) => {
+                const definition = definitions.find((dsd) => dsd.id === rsName);
+                return !definition || !(definition.metadata ?? []).find((meta) => meta.metadataDef.name === '_geoKey');
+            })
+                .map((rsName) => resultSets[rsName ?? ''])
+                .filter((rsName) => !!rsName);
+            return resultSetArray.reduce((rs1, rs2) => ResultsetUtils.mergeResultSets(rs1, rs2), {
+                items: {},
+                relations: [],
+                merged: resultSetArray.length
+            });
+        }), distinctUntilChanged((p, v) => equal(p, v)));
+    }
+    generateTooltip(value) {
+        return new Promise((resolve) => {
+            const component$ = this.tooltipFactoryService.generateTooltip(value.oClass, this.injector, this.popupContent);
+            component$.subscribe((component) => {
+                if (component) {
+                    component.instance.data.item = value.values;
+                    component.instance.popup = this.popup;
+                    resolve(component);
+                }
+                resolve(null);
+            });
+        });
+    }
+    setDefaultLayerTitle(layer, idx) {
+        layer.title = idx + 1 + ' - ' + this.translateService.instant(`@pry.widget.map.layerType.${layer.type}`);
+    }
+    fitMapForObjects(options, selectedIds) {
+        if (!!options?.fit) {
+            let extent = createEmpty();
+            const listOfMarkers = [];
+            this.map
+                .getAllLayers()
+                .filter((layer) => !!layer.getSource && !!layer.getSource() && !!layer.getSource().getFeatures)
+                .forEach((layer) => {
+                layer.getSource().getFeatures().forEach((feature) => {
+                    const id = feature.get('id');
+                    if (!selectedIds || selectedIds.length <= 0 || (selectedIds.length > 0 && selectedIds.includes(id))) {
+                        switch (feature.get('type')) {
+                            case 'heatpoint':
+                            case 'point':
+                            case 'marker':
+                                listOfMarkers.push(feature.getGeometry().getCoordinates());
+                                break;
+                            case 'line':
+                            case 'link':
+                                listOfMarkers.push(...feature.getGeometry().getCoordinates());
+                                break;
+                            case 'polygon':
+                            case 'multi-line':
+                                listOfMarkers.push(...feature.getGeometry().getCoordinates().flat());
+                                break;
+                            case 'multi-polygon':
+                                listOfMarkers.push(...feature.getGeometry().getCoordinates().flat().flat());
+                                break;
+                            default:
+                                listOfMarkers.push(feature.getGeometry().getCenter());
+                        }
+                    }
+                });
+            });
+            const selectedExtent = boundingExtent(listOfMarkers.filter((coord) => !!coord));
+            if (selectedExtent[0] !== Infinity &&
+                selectedExtent[1] !== Infinity &&
+                selectedExtent[2] !== -Infinity &&
+                selectedExtent[3] !== -Infinity) {
+                extent = selectedExtent;
+            }
+            if (extent[0] !== Infinity && extent[1] !== Infinity && extent[2] !== -Infinity && extent[3] !== -Infinity) {
+                this.map.getView().fit(extent, { padding: [20, 20, 70, 70], duration: 200 });
+            }
+        }
+    }
+    addOverlayOnHoverInteraction() {
+        const popupOverlay = new Overlay({
+            element: this.popup.nativeElement,
+            offset: [9, 9]
+        });
+        this.map.addOverlay(popupOverlay);
+        if (this.optionsCopy.tooltipMode !== TooltipMode.NONE) {
+            const tooltip = this.optionsCopy.tooltipMode === TooltipMode.CLICK ? 'singleclick' : 'pointermove';
+            this.map.on(tooltip, (event) => {
+                const values = this.map.getFeaturesAtPixel(event.pixel, { hitTolerance: 5 });
+                const valuesToDisplay = [
+                    ...new Set(values
+                        .map((value) => value.get('id'))
+                        .filter((id) => !!id)
+                        .map((id) => values.find((value) => value.get('id') === id))
+                        .map((value) => ({
+                        oClass: value?.get('oClass'),
+                        coordinates: event.coordinate,
+                        values: value?.getKeys().reduce((p, c) => ({ ...p, [c]: value.get(c) }), {})
+                    })))
+                ];
+                this.classicFeatures$.next(valuesToDisplay);
+                const wmsLayers = this.getWMSLayers();
+                if (wmsLayers) {
+                    this.getFeatureFromServer(wmsLayers, event.coordinate);
+                }
+            });
+        }
+    }
+    addContextMenuInteraction() {
+        if (this.manifest.contextMenu !== false) {
+            this.map.getViewport().addEventListener('contextmenu', (e) => {
+                const mapCoordinates = this.map.getEventPixel(e);
+                const itemId = this.map.forEachFeatureAtPixel(mapCoordinates, (feature) => feature.get('id'));
+                this.store.dispatch(ContextMenuActions.open({
+                    itemId,
+                    clientX: e.clientX,
+                    clientY: e.clientY,
+                    resultSet: Array.isArray(this.manifest.datasource) ? this.manifest.datasource[0] : this.manifest.datasource,
+                    from: 'map',
+                    coordinates: toLonLat(this.map.getCoordinateFromPixel(mapCoordinates), this.map.getView().getProjection()).reverse()
+                }));
+                e.preventDefault();
+            });
+        }
+    }
+    getAttributesForDrawing(classes, classId, layer) {
+        const classObj = classes.find((cl) => cl.id === classId) ?? { attributes: [] };
+        const locationAttribute = this.getLocationAttribute(classObj, layer);
+        const intensityAttribute = this.getIntensityAttribute(classObj, layer);
+        return { locationAttribute, intensityAttribute };
+    }
+    getIntensityAttribute(classObj, layer) {
+        return ((classObj || { attributes: [] }).attributes.find((attr) => attr.name === layer?.intensityAttribute ?? '') ??
+            undefined);
+    }
+    getLocationAttribute(classObj, layer) {
+        const specificLayer = layer;
+        return (classObj.attributes.find((attr) => attr.name === (specificLayer?.attribute ?? []) ?? '') ??
+            undefined);
+    }
+    changeStyle($event) {
+        this.optionsCopy.style = $event;
+    }
+    changeFit($event) {
+        this.optionsCopy.fit = $event;
+    }
+    changeAttributions($event) {
+        this.optionsCopy.attributions = $event;
+        if (this.optionsCopy.attributions) {
+            this.optionsCopy.layers?.forEach((layer) => (layer.attribution = ''));
+        }
+        else {
+            this.optionsCopy.layers?.forEach((layer) => delete layer.attribution);
+        }
+    }
+    changeTooltipMode($event) {
+        this.optionsCopy.tooltipMode = $event === 'hover' ? TooltipMode.HOVER : TooltipMode.CLICK;
+    }
+    addLayer() {
+        if (!this.optionsCopy.layers) {
+            this.optionsCopy.layers = [];
+        }
+        this.optionsCopy.layers.push({ attribute: '' });
+    }
+    changeLayerType($event, i) {
+        if (!this.optionsCopy.layers) {
+            this.optionsCopy.layers = this.optionsCopy.layers ?? [];
+        }
+        this.optionsCopy.layers[i].type = $event;
+        if (this.optionsCopy.layers[i].type === 'wms') {
+            const options = this.optionsCopy.layers[i];
+            options.paramLayer = options.paramLayer ?? '';
+            options.url = options.url ?? '';
+        }
+        if (this.optionsCopy.layers[i].type === 'wmts') {
+            const options = this.optionsCopy.layers[i];
+            options.paramLayer = options.paramLayer ?? '';
+            options.style = options.style ?? '';
+            options.matrixSet = options.matrixSet ?? '';
+            options.url = options.url ?? '';
+        }
+        if (['featurelayer', 'vectortile', 'rastertile'].includes(this.optionsCopy.layers[i].type)) {
+            const options = this.optionsCopy.layers[i];
+            options.url = options.url ?? '';
+        }
+    }
+    changeTitle($event, layer) {
+        layer.title = $event.currentTarget?.value;
+    }
+    emitManifest() {
+        this.manifestModified.emit({
+            widgetIndex: this.widgetIndex,
+            manifest: {
+                ...this.manifest,
+                options: { ...this.optionsCopy, layers: (this.optionsCopy.layers ?? []).filter((layer) => !!layer.type) }
+            }
+        });
+    }
+    changeLocationAttributes($event, layer) {
+        // @ts-ignore
+        layer.attribute = $event;
+    }
+    layerHasIntensity(layer) {
+        return layer;
+    }
+    changeIntensityAttributes($event, layer) {
+        const layer_ = layer;
+        layer_.intensityAttribute = $event;
+    }
+    changeClasses($event, layer) {
+        const specificLayer = layer;
+        specificLayer.classes = $event;
+    }
+    deleteLayer(i) {
+        this.optionsCopy?.layers?.splice(i, 1);
+    }
+    invertLayers(idx, idxWith) {
+        if (!!this.optionsCopy && !!this.optionsCopy.layers) {
+            const tmp = this.optionsCopy.layers[idxWith];
+            this.optionsCopy.layers[idxWith] = this.optionsCopy.layers[idx];
+            this.optionsCopy.layers[idx] = tmp;
+        }
+    }
+    changeUrl($event, layer) {
+        // @ts-ignore
+        layer.url = $event.currentTarget?.value;
+    }
+    changeAttribution($event, layer) {
+        // @ts-ignore
+        layer.attribution = $event.currentTarget?.value;
+    }
+    changeParamLayer($event, layer) {
+        // @ts-ignore
+        layer.paramLayer = $event.currentTarget?.value;
+    }
+    changeParamTiled($event, layer) {
+        layer.paramTiled = $event;
+    }
+    changeMatrixSet($event, layer) {
+        // @ts-ignore
+        layer.matrixSet = $event.currentTarget?.value;
+    }
+    changeParamStyle($event, layer) {
+        // @ts-ignore
+        layer.style = $event.currentTarget?.value;
+    }
+    export(type) {
+        switch (type) {
+            case 'png':
+                exportMapAsImage(this.map, 'map.png');
+                break;
+            case 'kml':
+                exportMapAsKML(this.map, 'map.kml');
+                break;
+            case 'geoJSON':
+                exportMapAsGeoJSON(this.map, 'map.geojson');
+                break;
+            default:
+                console.error('Unknown format');
+        }
+        this.hideExportType();
+    }
+    toImage() {
+        return getMapAsPng(this.map);
+    }
+    import(event) {
+        const reader = new MapFormatsReader(this.map);
+        const input = event instanceof DragEvent ? event.dataTransfer : event.target;
+        if (!!input && !!input.files && input.files.length > 0) {
+            const filename = input.files[0].name;
+            this.snackBar.open({
+                type: 'info',
+                message: this.translateService.instant('@pry.widget.map.importStart', { filename })
+            });
+            reader
+                .decodeFile(input.files[0])
+                .then((layer) => {
+                this.additionalLayers$.next([...this.additionalLayers$.getValue(), layer]);
+                this.snackBar.open({
+                    type: 'success',
+                    message: this.translateService.instant('@pry.widget.map.importOk', { filename })
+                });
+            })
+                .catch((err) => this.snackBar.open({ type: 'error', message: this.translateService.instant(err.msg, err.val) }));
+        }
+        if (!!input && !(input instanceof DataTransfer)) {
+            input.value = null;
+        }
+    }
+    addDropInteraction() {
+        this.map.getViewport().addEventListener('drop', (e) => {
+            this.import(e);
+            e.preventDefault();
+        });
+    }
+    changeClustered(layer, $event) {
+        layer.clustered = $event;
+        if (layer.clustered) {
+            layer.clusterDistance = 10;
+        }
+    }
+    changeClusterDistance(layer, $event) {
+        // @ts-ignore
+        layer.clusterDistance = $event.currentTarget?.value;
+    }
+    addScaleControl() {
+        this.map.addControl(new ScaleLine({
+            units: 'metric',
+            bar: true,
+            steps: 4,
+            text: true,
+            minWidth: 140
+        }));
+    }
+    addSearchBarControl() {
+        this.searchBarControl = new SearchBarControl({}).withGeocodingService(this.geocodingService);
+        this.map.addControl(this.searchBarControl);
+        const addressOverlay = new Overlay({
+            element: this.address.nativeElement,
+            offset: [9, 9]
+        });
+        this.map.addOverlay(addressOverlay);
+        // @ts-ignore
+        this.map.on('searched-address', (evt) => {
+            this.address.nativeElement.innerHTML = `<div>
+        <div>${this.translateService.instant('@pry.widget.map.address')}: ${evt.address}</div>
+        <div>${this.translateService.instant('@pry.widget.map.addressCoords')}: ${evt.latLon}</div>
+        </div>`;
+            this.address.nativeElement.style.display = '';
+            addressOverlay.setPosition(evt.coordinates);
+            this.map.getView().setCenter(evt.coordinates);
+            this.map.getView().setZoom(this.map.getView().getMaxZoom());
+        });
+    }
+    addLayerSwitcher() {
+        this.layerSwitchControl = new LayerSwitcher({
+            activationMode: 'click',
+            reverse: false
+        });
+        this.map.addControl(this.layerSwitchControl);
+        // @ts-ignore
+        this.layerSwitchControl.on('show', () => {
+            this.legendTabOpen = false;
+        });
+    }
+    hideAddress() {
+        this.address.nativeElement.style.display = 'none';
+    }
+    addUpdateZoomAndCenter() {
+        this.map.on('moveend', () => {
+            this.optionsCopy.zoom = {
+                start: this.map.getView().getZoom() ?? this.optionsCopy.zoom?.start ?? this.map.getView().getMinZoom(),
+                min: this.map.getView().getMinZoom(),
+                max: this.map.getView().getMaxZoom()
+            };
+            this.optionsCopy.center = toLonLat(this.map.getView().getCenter() ?? [0, 0]) ?? this.optionsCopy.center;
+            this.zoomAndCenter$.next({ zoom: this.optionsCopy.zoom, center: this.optionsCopy.center });
+        });
+    }
+    changeOpacity(layer, $event) {
+        // @ts-ignore
+        layer.opacity = parseInt($event, 10);
+    }
+    displayExportType($event) {
+        this.overlayRef = this.overlay.create(new OverlayConfig({
+            hasBackdrop: true,
+            panelClass: ['m-context-menu-wrapper'],
+            backdropClass: 'backdrop'
+        }));
+        this.store.dispatch(ConfigActions.addingOverlay({ id: this.constructor.name }));
+        this.overlayRef.backdropClick().subscribe((_) => this.hideExportType());
+        this.overlayRef.attach(new TemplatePortal(this.exportTypeTemplate, this.viewContainerRef));
+        const contextMenu = document.querySelector('div.m-context-menu-wrapper');
+        if (!!contextMenu) {
+            contextMenu.style.left = $event.clientX - 10 + 'px';
+            contextMenu.style.top = $event.clientY - 10 - contextMenu.clientHeight + 'px';
+        }
+    }
+    hideExportType() {
+        this.overlayRef?.dispose();
+        this.store.dispatch(ConfigActions.addingOverlay({ id: this.constructor.name }));
+    }
+    getWMSLayers() {
+        return !this.map
+            ? []
+            : this.map
+                .getAllLayers()
+                .filter((layer) => layer.getSource() instanceof TileWMS)
+                // @ts-ignore
+                .filter((layer) => layer.rendered === true);
+    }
+    isLayerRendered(layer) {
+        return !!this.getWMSLayers().find((wmsLayer) => wmsLayer.get('title') === layer.title);
+    }
+    getFeatureFromServer(wmsLayers, pixel) {
+        proj4.defs('EPSG:2154', '+proj=lcc +lat_0=46.5 +lon_0=3 +lat_1=49 +lat_2=44 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs');
+        register(proj4);
+        const projGeo = get('EPSG:3857');
+        const projLambert = get('EPSG:2154');
+        if (projLambert && projGeo) {
+            for (const layer of wmsLayers) {
+                const url = layer
+                    .getSource()
+                    .getFeatureInfoUrl(transform(pixel, projGeo, projLambert), this.map.getView().getResolution(), 'EPSG:2154', {
+                    INFO_FORMAT: 'application/json',
+                    FEATURE_COUNT: 10
+                });
+                if (url) {
+                    this.store.dispatch(DashboardActions.getWmsFeatures({
+                        url,
+                        oClass: layer.getProperties().oClass ?? '',
+                        coordinates: pixel
+                    }));
+                }
+            }
+        }
+    }
+    changeWmsClass($event, layer) {
+        layer.oClass = $event;
+    }
+    toggleLegend(index) {
+        this.legendTab = this.legendTab === index ? -1 : index;
+    }
+    toggleLegendWindow() {
+        this.legendTabOpen = !this.legendTabOpen;
+        this.layerSwitchControl?.hidePanel();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetMapComponent, deps: [{ token: i1.Store }, { token: i2.PrySnackbarService }, { token: i2.PryI18nService }, { token: i2.TooltipFactoryService }, { token: i2.GeocodingService }, { token: i3.Overlay }, { token: i0.ViewContainerRef }, { token: i2.SymbolService }, { token: i0.Injector }, { token: WidgetMapLayerService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: WidgetMapComponent, selector: "pry-widget-map", viewQueries: [{ propertyName: "mapRef", first: true, predicate: ["map"], descendants: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true }, { propertyName: "popupContent", first: true, predicate: ["popupContent"], descendants: true, read: ViewContainerRef }, { propertyName: "exportTypeTemplate", first: true, predicate: ["exportTypeTemplate"], descendants: true, read: TemplateRef }, { propertyName: "address", first: true, predicate: ["address"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<pry-widget-map-css></pry-widget-map-css>\n<div class=\"o-widget o-widget--map\">\n  <pry-widget-header\n    [datasourceIds$]=\"datasourceIds$\"\n    *ngIf=\"displayHeader$ | async\"\n    [widgetIndex]=\"widgetIndex\"\n    [manifest]=\"manifest\"\n    (manifestModified)=\"manifestModified.emit($event)\"\n    [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n    #header\n  >\n    <pry-settings\n      (saveTriggered)=\"emitManifest()\"\n      [headerPresent]=\"displayHeader$ | async\"\n      [widgetIndex]=\"widgetIndex\"\n      [header]=\"header\"\n      [open$]=\"open$\"\n      class=\"o-settings\"\n    >\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label\" for=\"map_style\">{{ '@pry.widget.map.style' | i18n }}</label>\n        <pry-select\n          (ngModelChange)=\"changeStyle($event)\"\n          [itemsAsOption]=\"true\"\n          [items]=\"styles$ | async\"\n          [ngModel]=\"optionsCopy.style\"\n          bindLabel=\"label\"\n          bindValue=\"identifier\"\n          id=\"map_style\"\n          class=\"a-pry-select\"\n        ></pry-select>\n      </div>\n\n      <pry-checkbox (ngModelChange)=\"changeFit($event)\" [ngModel]=\"optionsCopy.fit ?? false\">\n        {{ '@pry.widget.map.fit' | i18n }}\n      </pry-checkbox>\n\n      <pry-checkbox (ngModelChange)=\"changeAttributions($event)\" [ngModel]=\"optionsCopy.attributions ?? false\">\n        {{ '@pry.widget.map.attributions' | i18n }}\n      </pry-checkbox>\n\n      <fieldset class=\"m-form-radio-group-wrapper\">\n        <legend class=\"a-label\">{{ '@pry.widget.map.tooltip.title' | i18n }}</legend>\n        <div class=\"m-form-radio-group\">\n          <div class=\"m-form-radio-group__item\">\n            <input\n              class=\"a-form-field\"\n              type=\"radio\"\n              id=\"click\"\n              name=\"tooltip\"\n              [ngModel]=\"optionsCopy.tooltipMode\"\n              (ngModelChange)=\"changeTooltipMode('click')\"\n              value=\"click\"\n              [disabled]=\"((geoServerLayerDescriptions$ | async)?.length ?? 0) > 0\"\n            />\n            <label for=\"click\" class=\"a-label\">\n              {{ '@pry.widget.map.tooltip.click' | i18n }}\n            </label>\n          </div>\n          <div class=\"m-form-radio-group__item\">\n            <input\n              class=\"a-form-field\"\n              type=\"radio\"\n              id=\"hover\"\n              name=\"tooltip\"\n              [ngModel]=\"optionsCopy.tooltipMode\"\n              (ngModelChange)=\"changeTooltipMode('hover')\"\n              value=\"hover\"\n              [disabled]=\"((geoServerLayerDescriptions$ | async)?.length ?? 0) > 0\"\n            />\n            <label for=\"hover\" class=\"a-label\">\n              {{ '@pry.widget.map.tooltip.hover' | i18n }}\n            </label>\n          </div>\n        </div>\n      </fieldset>\n\n      <div class=\"o-settings__popup__content__actions -has-separator\">\n        <button type=\"button\" (click)=\"addLayer()\" class=\"a-btn a-btn--icon-text -link-like\">\n          <pry-icon iconSvg=\"library_add\"></pry-icon>\n          {{ '@pry.widget.map.addLayer' | i18n }}\n        </button>\n      </div>\n\n      <div *ngFor=\"let layer of optionsCopy?.layers; let i = index\" class=\"o-settings__popup__content__fields\">\n        <div class=\"o-settings__popup__content__fields__head\">\n          <h3 class=\"a-h3 settings-layer-title__title\">{{ '@pry.widget.map.layer' | i18n: { index: i + 1 } }}</h3>\n          <div class=\"m-btn-group\">\n            <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"invertLayers(i, i - 1)\" *ngIf=\"i > 0\">\n              <pry-icon iconSvg=\"fleche_haut\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ '@pry.action.moveUp' | i18n }}</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              (click)=\"invertLayers(i, i + 1)\"\n              *ngIf=\"i < (optionsCopy?.layers?.length ?? 0) - 1\"\n            >\n              <pry-icon iconSvg=\"fleche_bas\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ '@pry.action.moveDown' | i18n }}</span>\n            </button>\n          </div>\n        </div>\n\n        <div class=\"o-settings__popup__content__fields__content\">\n          <pry-range\n            [ngModel]=\"(layer?.opacity ?? 100) + ''\"\n            (ngModelChange)=\"changeOpacity(layer, $event)\"\n            labelTranslate=\"@pry.widget.map.opacity\"\n            min=\"0\"\n            max=\"100\"\n          ></pry-range>\n\n          <fieldset>\n            <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.layerOptions' | i18n: { index: i + 1 } }}</legend>\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"map_layerTitle\">{{ '@pry.widget.map.layerTitle' | i18n }}</label>\n              <input\n                id=\"map_layerTitle\"\n                class=\"a-form-field\"\n                type=\"text\"\n                (input)=\"changeTitle($event, layer)\"\n                [value]=\"layer.title ?? ''\"\n              />\n            </div>\n\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"map_layerType\">{{ '@pry.widget.map.layerType.title' | i18n }}</label>\n              <pry-select\n                (ngModelChange)=\"changeLayerType($event, i)\"\n                [bindData]=\"true\"\n                [itemsAsOption]=\"true\"\n                [items]=\"layerTypes\"\n                [labelTranslate]=\"true\"\n                [ngModel]=\"layer.type\"\n                [disabled]=\"layer.type === 'geoserver'\"\n                baseTranslate=\"@pry.widget.map.layerType.\"\n                class=\"a-pry-select\"\n                id=\"map_layerType\"\n              ></pry-select>\n            </div>\n\n            <div\n              *ngIf=\"\n                layer.type !== 'relation' &&\n                layer.type !== 'wms' &&\n                layer.type !== 'wmts' &&\n                layer.type !== 'geoserver' &&\n                layer.type !== 'featurelayer' &&\n                layer.type !== 'vectortile' &&\n                layer.type !== 'rastertile'\n              \"\n              class=\"m-form-label-field\"\n            >\n              <label class=\"a-label\" for=\"map_classes\">{{ '@pry.widget.map.classes' | i18n }}</label>\n              <pry-select\n                (ngModelChange)=\"changeClasses($event, layer)\"\n                [itemsAsOption]=\"true\"\n                [items]=\"classes$ | async\"\n                [multiple]=\"true\"\n                [ngModel]=\"layer.classes\"\n                bindLabel=\"name\"\n                bindValue=\"id\"\n                class=\"a-pry-select\"\n                id=\"map_classes\"\n              ></pry-select>\n            </div>\n          </fieldset>\n        </div>\n\n        <fieldset\n          *ngIf=\"\n            layer.type !== 'relation' &&\n            layer.type !== 'wms' &&\n            layer.type !== 'wmts' &&\n            layer.type !== 'geoserver' &&\n            layer.type !== 'featurelayer' &&\n            layer.type !== 'vectortile' &&\n            layer.type !== 'rastertile'\n          \"\n        >\n          <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.locationAttr' | i18n }}</legend>\n          <ng-container\n            *ngIf=\"\n              layer\n                | geometryFieldsFor: { resultSet: resultSet$, classes: layer.classes, type: layer.type }\n                | async as fields\n            \"\n          >\n            <div\n              *ngIf=\"\n                ['heatmap', 'bubble', 'marker', 'point', 'line', 'polygon', 'multi-line', 'multi-polygon'].indexOf(\n                  layer.type\n                ) >= 0\n              \"\n            >\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"map_locationAttribute_both\">{{\n                  '@pry.widget.map.locationAttribute.both' | i18n\n                }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeLocationAttributes($event, layer)\"\n                  [itemsAsOption]=\"true\"\n                  [items]=\"fields\"\n                  [ngModel]=\"layer.attribute\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"map_locationAttribute_both\"\n                  class=\"a-pry-select\"\n                ></pry-select>\n              </div>\n            </div>\n\n            <div *ngIf=\"['heatmap', 'bubble'].indexOf(layer.type) >= 0\">\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"map_intensityAttribute\">{{\n                  '@pry.widget.map.intensityAttribute' | i18n\n                }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeIntensityAttributes($event, layer)\"\n                  [itemsAsOption]=\"true\"\n                  [items]=\"fields\"\n                  [ngModel]=\"layerHasIntensity(layer).intensityAttribute\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"map_intensityAttribute\"\n                  class=\"a-pry-select\"\n                ></pry-select>\n              </div>\n            </div>\n          </ng-container>\n        </fieldset>\n\n        <fieldset\n          *ngIf=\"\n            layer.type === 'wms' ||\n            layer.type === 'geoserver' ||\n            layer.type === 'wmts' ||\n            layer.type === 'featurelayer' ||\n            layer.type === 'vectortile' ||\n            layer.type === 'rastertile'\n          \"\n        >\n          <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.tile' | i18n }}</legend>\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"map_wms_url\">{{ '@pry.widget.map.wms.url' | i18n }}</label>\n            <input\n              id=\"map_wms_url\"\n              class=\"a-form-field\"\n              type=\"text\"\n              (input)=\"changeUrl($event, layer)\"\n              [disabled]=\"layer.type === 'geoserver'\"\n              [value]=\"layer.url\"\n            />\n          </div>\n\n          <div\n            class=\"m-form-label-field\"\n            *ngIf=\"layer.type === 'wms' || layer.type === 'geoserver' || layer.type === 'wmts'\"\n          >\n            <label class=\"a-label\" for=\"map_wms_paramLayer\">{{ '@pry.widget.map.wms.paramLayer' | i18n }}</label>\n            <input\n              id=\"map_wms_paramLayer\"\n              class=\"a-form-field\"\n              type=\"text\"\n              (input)=\"changeParamLayer($event, layer)\"\n              [disabled]=\"layer.type === 'geoserver'\"\n              [value]=\"layer.paramLayer\"\n            />\n          </div>\n\n          <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wmts'\">\n            <label class=\"a-label\" for=\"map_wms_matrixSet\">{{ '@pry.widget.map.wms.matrixSet' | i18n }}</label>\n            <input\n              id=\"map_wms_matrixSet\"\n              class=\"a-form-field\"\n              type=\"text\"\n              (input)=\"changeMatrixSet($event, layer)\"\n              [value]=\"layer.matrixSet\"\n            />\n          </div>\n\n          <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wmts'\">\n            <label class=\"a-label\" for=\"map_wms_style\">{{ '@pry.widget.map.wms.style' | i18n }}</label>\n            <input\n              id=\"map_wms_style\"\n              class=\"a-form-field\"\n              type=\"text\"\n              (input)=\"changeParamStyle($event, layer)\"\n              [value]=\"layer.style\"\n            />\n          </div>\n\n          <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wms'\">\n            <pry-checkbox (ngModelChange)=\"changeParamTiled($event, layer)\" [ngModel]=\"layer?.paramTiled ?? false\">\n              {{ '@pry.widget.map.wms.paramTiled' | i18n }}\n            </pry-checkbox>\n          </div>\n        </fieldset>\n\n        <fieldset *ngIf=\"layer.type === 'marker'\">\n          <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.clustering' | i18n }}</legend>\n          <div class=\"m-form-label-field\">\n            <pry-checkbox (ngModelChange)=\"changeClustered(layer, $event)\" [ngModel]=\"layer.clustered\">\n              {{ '@pry.widget.map.clustered' | i18n }}\n            </pry-checkbox>\n          </div>\n          <div *ngIf=\"layer.clustered\">\n            <pry-range\n              [ngModel]=\"layer.clustered\"\n              (ngModelChange)=\"changeClusterDistance(layer, $event)\"\n              labelTranslate=\"@pry.widget.map.clusterDistance\"\n              min=\"1\"\n              max=\"500\"\n            ></pry-range>\n          </div>\n        </fieldset>\n\n        <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.attributions\">\n          <label class=\"a-label\" for=\"attribution\">{{ '@pry.widget.map.attribution' | i18n }}</label>\n          <input\n            id=\"attribution\"\n            class=\"a-form-field\"\n            type=\"text\"\n            (input)=\"changeAttribution($event, layer)\"\n            [value]=\"layer.attribution ? layer.attribution : ''\"\n          />\n        </div>\n\n        <button\n          type=\"button\"\n          (click)=\"deleteLayer(i)\"\n          class=\"a-btn a-btn--icon-text -link-like\"\n          *ngIf=\"layer.type !== 'geoserver'\"\n          data-func=\"delete\"\n        >\n          <pry-icon iconSvg=\"delete\" [width]=\"19\" [height]=\"19\"></pry-icon>\n          <span>{{ '@pry.widget.map.deleteLayer' | i18n }}</span>\n        </button>\n      </div>\n    </pry-settings>\n  </pry-widget-header>\n\n  <div class=\"m-btn-group -selection-choice\" [style.transform]=\"bottomLeft$ | async\">\n    <ng-container *ngFor=\"let action of basicActions$ | async\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--icon-only\"\n        (click)=\"selectionInteraction.changeSelection(action)\"\n        [class.-selected]=\"selectionInteraction.selectionType === action\"\n        [pryTooltip]=\"infoTooltipAction\"\n        pryTooltipPosition=\"bottom\"\n        aria-describedby=\"infoTooltipAction\"\n        [pryTooltipContext]=\"{ action: action }\"\n      >\n        <pry-icon [iconSvg]=\"action\"></pry-icon>\n        <span class=\"u-visually-hidden\">{{ '@pry.widget.map.' + action | i18n }}</span>\n      </button>\n    </ng-container>\n\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only\"\n      id=\"export_card\"\n      aria-expanded=\"false\"\n      aria-controls=\"export_type\"\n      aria-haspopup=\"menu\"\n      [pryTooltip]=\"infoTooltipDown\"\n      pryTooltipPosition=\"bottom\"\n      aria-describedby=\"infoTooltipDown_widgetMap\"\n      *ngIf=\"(actions$ | async)?.includes('export')\"\n    >\n      <pry-icon iconSvg=\"file_download\" (click)=\"displayExportType($event)\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only\"\n      (click)=\"uploader.click()\"\n      [pryTooltip]=\"infoTooltipLoad\"\n      aria-describedby=\"infoTooltipLoad_widgetMap\"\n      pryTooltipPosition=\"bottom\"\n      *ngIf=\"(actions$ | async)?.includes('upload')\"\n    >\n      <pry-icon iconSvg=\"file_upload\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.import' | i18n }}</span>\n    </button>\n    <input hidden type=\"file\" #uploader (change)=\"import($event)\" />\n  </div>\n\n  <div class=\"ol-control m-layer-legend\" *ngIf=\"((legendLayers$ | async)?.length ?? 0) > 0\">\n    <button class=\"m-layer-legend__toggle\" (click)=\"toggleLegendWindow()\">\n      <pry-icon iconSvg=\"legend\" [width]=\"22\" [height]=\"22\"></pry-icon>\n    </button>\n    <ng-container *ngFor=\"let geoLayer of legendLayers$ | async; let index = index\">\n      <div class=\"m-layer-legend__title\" [class.-hidden]=\"!legendTabOpen\">\n        {{ geoLayer.title }}\n        <ng-container *ngIf=\"isLayerRendered(geoLayer)\">\n          <button class=\"m-layer-legend__toggle\" (click)=\"toggleLegend(index)\">\n            <pry-icon\n              [iconSvg]=\"legendTab === index ? 'chevron_top' : 'chevron_bottom'\"\n              [width]=\"22\"\n              [height]=\"22\"\n            ></pry-icon>\n          </button>\n        </ng-container>\n        <ng-container *ngIf=\"!isLayerRendered(geoLayer)\">\n          <pry-icon [iconSvg]=\"'close'\" [width]=\"22\" [height]=\"22\"></pry-icon>\n        </ng-container>\n      </div>\n      <div\n        class=\"m-layer-legend__image\"\n        [class.-hidden]=\"!legendTabOpen || legendTab !== index || !isLayerRendered(geoLayer)\"\n      >\n        <ng-container *ngIf=\"!imageNotProvided[index] && (geoLayer | legendUrl)\">\n          <img\n            [src]=\"geoLayer | legendUrl\"\n            [alt]=\"'@pry.widget.map.legend' | i18n: { layer: geoLayer.title }\"\n            (error)=\"imageNotProvided[index] = true\"\n          />\n        </ng-container>\n        <ng-container *ngIf=\"imageNotProvided[index]\">\n          <p class=\"m-layer-legend__error\">{{ '@pry.widget.map.legendNotProvided' | i18n }}</p>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n\n  <div [style.height.px]=\"height$ | async\" class=\"o-map-wrapper\">\n    <div class=\"o-map\">\n      <div #map id=\"map\"></div>\n    </div>\n  </div>\n\n  <ng-template #infoTooltipAction let-action=\"action\">\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipAction\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.' + action | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <ng-template #infoTooltipDown>\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipDown_widgetMap\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <ng-template #infoTooltipLoad>\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipLoad_widgetMap\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.import' | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <div #popup class=\"m-tooltip m-tooltip--popup\" [hidden]=\"true\" role=\"tooltip\">\n    <div #popupContent></div>\n  </div>\n  <div\n    #address\n    class=\"m-tooltip m-tooltip--address tooltip-address\"\n    [style.display]=\"'none'\"\n    (click)=\"hideAddress()\"\n  ></div>\n  <ng-template\n    #exportTypeTemplate\n    class=\"m-context-menu-wrapper\"\n    id=\"export_type\"\n    aria-hidden=\"true\"\n    aria-label=\"TODO-access\"\n    aria-labelledby=\"export_card\"\n  >\n    <div class=\"m-context-menu\">\n      <ul class=\"m-context-menu__list\">\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('png')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> PNG\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('kml')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> KML\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('geoJSON')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> GeoJSON\n          </button>\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.SettingsComponent, selector: "pry-settings", inputs: ["widgetIndex", "isDisable", "headerPresent", "open$", "header"], outputs: ["saveTriggered"] }, { kind: "component", type: i2.PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: ["manifest", "additionalOptions", "headerOptions", "displayCount", "datasourceIds$", "widgetIndex"], outputs: ["manifestModified"] }, { kind: "component", type: i2.PrySelectComponent, selector: "pry-select", inputs: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "component", type: i2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i7.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "directive", type: i2.PryTooltipDirective, selector: "[pryTooltip]", inputs: ["pryTooltip", "styleReversed", "pryTooltipContext", "pryTooltipPosition", "pryTooltipShowDelay"] }, { kind: "component", type: i2.PryRangeComponent, selector: "pry-range", inputs: ["min", "max", "step", "disabled", "labelTranslate"] }, { kind: "component", type: PryWidgetMapCssComponent, selector: "pry-widget-map-css" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }, { kind: "pipe", type: GeometryFieldsForPipe, name: "geometryFieldsFor" }, { kind: "pipe", type: WidgetMapLegendUrlPipe, name: "legendUrl" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetMapComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-widget-map', template: "<pry-widget-map-css></pry-widget-map-css>\n<div class=\"o-widget o-widget--map\">\n  <pry-widget-header\n    [datasourceIds$]=\"datasourceIds$\"\n    *ngIf=\"displayHeader$ | async\"\n    [widgetIndex]=\"widgetIndex\"\n    [manifest]=\"manifest\"\n    (manifestModified)=\"manifestModified.emit($event)\"\n    [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n    #header\n  >\n    <pry-settings\n      (saveTriggered)=\"emitManifest()\"\n      [headerPresent]=\"displayHeader$ | async\"\n      [widgetIndex]=\"widgetIndex\"\n      [header]=\"header\"\n      [open$]=\"open$\"\n      class=\"o-settings\"\n    >\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label\" for=\"map_style\">{{ '@pry.widget.map.style' | i18n }}</label>\n        <pry-select\n          (ngModelChange)=\"changeStyle($event)\"\n          [itemsAsOption]=\"true\"\n          [items]=\"styles$ | async\"\n          [ngModel]=\"optionsCopy.style\"\n          bindLabel=\"label\"\n          bindValue=\"identifier\"\n          id=\"map_style\"\n          class=\"a-pry-select\"\n        ></pry-select>\n      </div>\n\n      <pry-checkbox (ngModelChange)=\"changeFit($event)\" [ngModel]=\"optionsCopy.fit ?? false\">\n        {{ '@pry.widget.map.fit' | i18n }}\n      </pry-checkbox>\n\n      <pry-checkbox (ngModelChange)=\"changeAttributions($event)\" [ngModel]=\"optionsCopy.attributions ?? false\">\n        {{ '@pry.widget.map.attributions' | i18n }}\n      </pry-checkbox>\n\n      <fieldset class=\"m-form-radio-group-wrapper\">\n        <legend class=\"a-label\">{{ '@pry.widget.map.tooltip.title' | i18n }}</legend>\n        <div class=\"m-form-radio-group\">\n          <div class=\"m-form-radio-group__item\">\n            <input\n              class=\"a-form-field\"\n              type=\"radio\"\n              id=\"click\"\n              name=\"tooltip\"\n              [ngModel]=\"optionsCopy.tooltipMode\"\n              (ngModelChange)=\"changeTooltipMode('click')\"\n              value=\"click\"\n              [disabled]=\"((geoServerLayerDescriptions$ | async)?.length ?? 0) > 0\"\n            />\n            <label for=\"click\" class=\"a-label\">\n              {{ '@pry.widget.map.tooltip.click' | i18n }}\n            </label>\n          </div>\n          <div class=\"m-form-radio-group__item\">\n            <input\n              class=\"a-form-field\"\n              type=\"radio\"\n              id=\"hover\"\n              name=\"tooltip\"\n              [ngModel]=\"optionsCopy.tooltipMode\"\n              (ngModelChange)=\"changeTooltipMode('hover')\"\n              value=\"hover\"\n              [disabled]=\"((geoServerLayerDescriptions$ | async)?.length ?? 0) > 0\"\n            />\n            <label for=\"hover\" class=\"a-label\">\n              {{ '@pry.widget.map.tooltip.hover' | i18n }}\n            </label>\n          </div>\n        </div>\n      </fieldset>\n\n      <div class=\"o-settings__popup__content__actions -has-separator\">\n        <button type=\"button\" (click)=\"addLayer()\" class=\"a-btn a-btn--icon-text -link-like\">\n          <pry-icon iconSvg=\"library_add\"></pry-icon>\n          {{ '@pry.widget.map.addLayer' | i18n }}\n        </button>\n      </div>\n\n      <div *ngFor=\"let layer of optionsCopy?.layers; let i = index\" class=\"o-settings__popup__content__fields\">\n        <div class=\"o-settings__popup__content__fields__head\">\n          <h3 class=\"a-h3 settings-layer-title__title\">{{ '@pry.widget.map.layer' | i18n: { index: i + 1 } }}</h3>\n          <div class=\"m-btn-group\">\n            <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"invertLayers(i, i - 1)\" *ngIf=\"i > 0\">\n              <pry-icon iconSvg=\"fleche_haut\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ '@pry.action.moveUp' | i18n }}</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              (click)=\"invertLayers(i, i + 1)\"\n              *ngIf=\"i < (optionsCopy?.layers?.length ?? 0) - 1\"\n            >\n              <pry-icon iconSvg=\"fleche_bas\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ '@pry.action.moveDown' | i18n }}</span>\n            </button>\n          </div>\n        </div>\n\n        <div class=\"o-settings__popup__content__fields__content\">\n          <pry-range\n            [ngModel]=\"(layer?.opacity ?? 100) + ''\"\n            (ngModelChange)=\"changeOpacity(layer, $event)\"\n            labelTranslate=\"@pry.widget.map.opacity\"\n            min=\"0\"\n            max=\"100\"\n          ></pry-range>\n\n          <fieldset>\n            <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.layerOptions' | i18n: { index: i + 1 } }}</legend>\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"map_layerTitle\">{{ '@pry.widget.map.layerTitle' | i18n }}</label>\n              <input\n                id=\"map_layerTitle\"\n                class=\"a-form-field\"\n                type=\"text\"\n                (input)=\"changeTitle($event, layer)\"\n                [value]=\"layer.title ?? ''\"\n              />\n            </div>\n\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"map_layerType\">{{ '@pry.widget.map.layerType.title' | i18n }}</label>\n              <pry-select\n                (ngModelChange)=\"changeLayerType($event, i)\"\n                [bindData]=\"true\"\n                [itemsAsOption]=\"true\"\n                [items]=\"layerTypes\"\n                [labelTranslate]=\"true\"\n                [ngModel]=\"layer.type\"\n                [disabled]=\"layer.type === 'geoserver'\"\n                baseTranslate=\"@pry.widget.map.layerType.\"\n                class=\"a-pry-select\"\n                id=\"map_layerType\"\n              ></pry-select>\n            </div>\n\n            <div\n              *ngIf=\"\n                layer.type !== 'relation' &&\n                layer.type !== 'wms' &&\n                layer.type !== 'wmts' &&\n                layer.type !== 'geoserver' &&\n                layer.type !== 'featurelayer' &&\n                layer.type !== 'vectortile' &&\n                layer.type !== 'rastertile'\n              \"\n              class=\"m-form-label-field\"\n            >\n              <label class=\"a-label\" for=\"map_classes\">{{ '@pry.widget.map.classes' | i18n }}</label>\n              <pry-select\n                (ngModelChange)=\"changeClasses($event, layer)\"\n                [itemsAsOption]=\"true\"\n                [items]=\"classes$ | async\"\n                [multiple]=\"true\"\n                [ngModel]=\"layer.classes\"\n                bindLabel=\"name\"\n                bindValue=\"id\"\n                class=\"a-pry-select\"\n                id=\"map_classes\"\n              ></pry-select>\n            </div>\n          </fieldset>\n        </div>\n\n        <fieldset\n          *ngIf=\"\n            layer.type !== 'relation' &&\n            layer.type !== 'wms' &&\n            layer.type !== 'wmts' &&\n            layer.type !== 'geoserver' &&\n            layer.type !== 'featurelayer' &&\n            layer.type !== 'vectortile' &&\n            layer.type !== 'rastertile'\n          \"\n        >\n          <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.locationAttr' | i18n }}</legend>\n          <ng-container\n            *ngIf=\"\n              layer\n                | geometryFieldsFor: { resultSet: resultSet$, classes: layer.classes, type: layer.type }\n                | async as fields\n            \"\n          >\n            <div\n              *ngIf=\"\n                ['heatmap', 'bubble', 'marker', 'point', 'line', 'polygon', 'multi-line', 'multi-polygon'].indexOf(\n                  layer.type\n                ) >= 0\n              \"\n            >\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"map_locationAttribute_both\">{{\n                  '@pry.widget.map.locationAttribute.both' | i18n\n                }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeLocationAttributes($event, layer)\"\n                  [itemsAsOption]=\"true\"\n                  [items]=\"fields\"\n                  [ngModel]=\"layer.attribute\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"map_locationAttribute_both\"\n                  class=\"a-pry-select\"\n                ></pry-select>\n              </div>\n            </div>\n\n            <div *ngIf=\"['heatmap', 'bubble'].indexOf(layer.type) >= 0\">\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"map_intensityAttribute\">{{\n                  '@pry.widget.map.intensityAttribute' | i18n\n                }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeIntensityAttributes($event, layer)\"\n                  [itemsAsOption]=\"true\"\n                  [items]=\"fields\"\n                  [ngModel]=\"layerHasIntensity(layer).intensityAttribute\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"map_intensityAttribute\"\n                  class=\"a-pry-select\"\n                ></pry-select>\n              </div>\n            </div>\n          </ng-container>\n        </fieldset>\n\n        <fieldset\n          *ngIf=\"\n            layer.type === 'wms' ||\n            layer.type === 'geoserver' ||\n            layer.type === 'wmts' ||\n            layer.type === 'featurelayer' ||\n            layer.type === 'vectortile' ||\n            layer.type === 'rastertile'\n          \"\n        >\n          <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.tile' | i18n }}</legend>\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"map_wms_url\">{{ '@pry.widget.map.wms.url' | i18n }}</label>\n            <input\n              id=\"map_wms_url\"\n              class=\"a-form-field\"\n              type=\"text\"\n              (input)=\"changeUrl($event, layer)\"\n              [disabled]=\"layer.type === 'geoserver'\"\n              [value]=\"layer.url\"\n            />\n          </div>\n\n          <div\n            class=\"m-form-label-field\"\n            *ngIf=\"layer.type === 'wms' || layer.type === 'geoserver' || layer.type === 'wmts'\"\n          >\n            <label class=\"a-label\" for=\"map_wms_paramLayer\">{{ '@pry.widget.map.wms.paramLayer' | i18n }}</label>\n            <input\n              id=\"map_wms_paramLayer\"\n              class=\"a-form-field\"\n              type=\"text\"\n              (input)=\"changeParamLayer($event, layer)\"\n              [disabled]=\"layer.type === 'geoserver'\"\n              [value]=\"layer.paramLayer\"\n            />\n          </div>\n\n          <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wmts'\">\n            <label class=\"a-label\" for=\"map_wms_matrixSet\">{{ '@pry.widget.map.wms.matrixSet' | i18n }}</label>\n            <input\n              id=\"map_wms_matrixSet\"\n              class=\"a-form-field\"\n              type=\"text\"\n              (input)=\"changeMatrixSet($event, layer)\"\n              [value]=\"layer.matrixSet\"\n            />\n          </div>\n\n          <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wmts'\">\n            <label class=\"a-label\" for=\"map_wms_style\">{{ '@pry.widget.map.wms.style' | i18n }}</label>\n            <input\n              id=\"map_wms_style\"\n              class=\"a-form-field\"\n              type=\"text\"\n              (input)=\"changeParamStyle($event, layer)\"\n              [value]=\"layer.style\"\n            />\n          </div>\n\n          <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wms'\">\n            <pry-checkbox (ngModelChange)=\"changeParamTiled($event, layer)\" [ngModel]=\"layer?.paramTiled ?? false\">\n              {{ '@pry.widget.map.wms.paramTiled' | i18n }}\n            </pry-checkbox>\n          </div>\n        </fieldset>\n\n        <fieldset *ngIf=\"layer.type === 'marker'\">\n          <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.clustering' | i18n }}</legend>\n          <div class=\"m-form-label-field\">\n            <pry-checkbox (ngModelChange)=\"changeClustered(layer, $event)\" [ngModel]=\"layer.clustered\">\n              {{ '@pry.widget.map.clustered' | i18n }}\n            </pry-checkbox>\n          </div>\n          <div *ngIf=\"layer.clustered\">\n            <pry-range\n              [ngModel]=\"layer.clustered\"\n              (ngModelChange)=\"changeClusterDistance(layer, $event)\"\n              labelTranslate=\"@pry.widget.map.clusterDistance\"\n              min=\"1\"\n              max=\"500\"\n            ></pry-range>\n          </div>\n        </fieldset>\n\n        <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.attributions\">\n          <label class=\"a-label\" for=\"attribution\">{{ '@pry.widget.map.attribution' | i18n }}</label>\n          <input\n            id=\"attribution\"\n            class=\"a-form-field\"\n            type=\"text\"\n            (input)=\"changeAttribution($event, layer)\"\n            [value]=\"layer.attribution ? layer.attribution : ''\"\n          />\n        </div>\n\n        <button\n          type=\"button\"\n          (click)=\"deleteLayer(i)\"\n          class=\"a-btn a-btn--icon-text -link-like\"\n          *ngIf=\"layer.type !== 'geoserver'\"\n          data-func=\"delete\"\n        >\n          <pry-icon iconSvg=\"delete\" [width]=\"19\" [height]=\"19\"></pry-icon>\n          <span>{{ '@pry.widget.map.deleteLayer' | i18n }}</span>\n        </button>\n      </div>\n    </pry-settings>\n  </pry-widget-header>\n\n  <div class=\"m-btn-group -selection-choice\" [style.transform]=\"bottomLeft$ | async\">\n    <ng-container *ngFor=\"let action of basicActions$ | async\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--icon-only\"\n        (click)=\"selectionInteraction.changeSelection(action)\"\n        [class.-selected]=\"selectionInteraction.selectionType === action\"\n        [pryTooltip]=\"infoTooltipAction\"\n        pryTooltipPosition=\"bottom\"\n        aria-describedby=\"infoTooltipAction\"\n        [pryTooltipContext]=\"{ action: action }\"\n      >\n        <pry-icon [iconSvg]=\"action\"></pry-icon>\n        <span class=\"u-visually-hidden\">{{ '@pry.widget.map.' + action | i18n }}</span>\n      </button>\n    </ng-container>\n\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only\"\n      id=\"export_card\"\n      aria-expanded=\"false\"\n      aria-controls=\"export_type\"\n      aria-haspopup=\"menu\"\n      [pryTooltip]=\"infoTooltipDown\"\n      pryTooltipPosition=\"bottom\"\n      aria-describedby=\"infoTooltipDown_widgetMap\"\n      *ngIf=\"(actions$ | async)?.includes('export')\"\n    >\n      <pry-icon iconSvg=\"file_download\" (click)=\"displayExportType($event)\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only\"\n      (click)=\"uploader.click()\"\n      [pryTooltip]=\"infoTooltipLoad\"\n      aria-describedby=\"infoTooltipLoad_widgetMap\"\n      pryTooltipPosition=\"bottom\"\n      *ngIf=\"(actions$ | async)?.includes('upload')\"\n    >\n      <pry-icon iconSvg=\"file_upload\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.import' | i18n }}</span>\n    </button>\n    <input hidden type=\"file\" #uploader (change)=\"import($event)\" />\n  </div>\n\n  <div class=\"ol-control m-layer-legend\" *ngIf=\"((legendLayers$ | async)?.length ?? 0) > 0\">\n    <button class=\"m-layer-legend__toggle\" (click)=\"toggleLegendWindow()\">\n      <pry-icon iconSvg=\"legend\" [width]=\"22\" [height]=\"22\"></pry-icon>\n    </button>\n    <ng-container *ngFor=\"let geoLayer of legendLayers$ | async; let index = index\">\n      <div class=\"m-layer-legend__title\" [class.-hidden]=\"!legendTabOpen\">\n        {{ geoLayer.title }}\n        <ng-container *ngIf=\"isLayerRendered(geoLayer)\">\n          <button class=\"m-layer-legend__toggle\" (click)=\"toggleLegend(index)\">\n            <pry-icon\n              [iconSvg]=\"legendTab === index ? 'chevron_top' : 'chevron_bottom'\"\n              [width]=\"22\"\n              [height]=\"22\"\n            ></pry-icon>\n          </button>\n        </ng-container>\n        <ng-container *ngIf=\"!isLayerRendered(geoLayer)\">\n          <pry-icon [iconSvg]=\"'close'\" [width]=\"22\" [height]=\"22\"></pry-icon>\n        </ng-container>\n      </div>\n      <div\n        class=\"m-layer-legend__image\"\n        [class.-hidden]=\"!legendTabOpen || legendTab !== index || !isLayerRendered(geoLayer)\"\n      >\n        <ng-container *ngIf=\"!imageNotProvided[index] && (geoLayer | legendUrl)\">\n          <img\n            [src]=\"geoLayer | legendUrl\"\n            [alt]=\"'@pry.widget.map.legend' | i18n: { layer: geoLayer.title }\"\n            (error)=\"imageNotProvided[index] = true\"\n          />\n        </ng-container>\n        <ng-container *ngIf=\"imageNotProvided[index]\">\n          <p class=\"m-layer-legend__error\">{{ '@pry.widget.map.legendNotProvided' | i18n }}</p>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n\n  <div [style.height.px]=\"height$ | async\" class=\"o-map-wrapper\">\n    <div class=\"o-map\">\n      <div #map id=\"map\"></div>\n    </div>\n  </div>\n\n  <ng-template #infoTooltipAction let-action=\"action\">\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipAction\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.' + action | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <ng-template #infoTooltipDown>\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipDown_widgetMap\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <ng-template #infoTooltipLoad>\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipLoad_widgetMap\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.import' | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <div #popup class=\"m-tooltip m-tooltip--popup\" [hidden]=\"true\" role=\"tooltip\">\n    <div #popupContent></div>\n  </div>\n  <div\n    #address\n    class=\"m-tooltip m-tooltip--address tooltip-address\"\n    [style.display]=\"'none'\"\n    (click)=\"hideAddress()\"\n  ></div>\n  <ng-template\n    #exportTypeTemplate\n    class=\"m-context-menu-wrapper\"\n    id=\"export_type\"\n    aria-hidden=\"true\"\n    aria-label=\"TODO-access\"\n    aria-labelledby=\"export_card\"\n  >\n    <div class=\"m-context-menu\">\n      <ul class=\"m-context-menu__list\">\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('png')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> PNG\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('kml')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> KML\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('geoJSON')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> GeoJSON\n          </button>\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.PrySnackbarService }, { type: i2.PryI18nService }, { type: i2.TooltipFactoryService }, { type: i2.GeocodingService }, { type: i3.Overlay }, { type: i0.ViewContainerRef }, { type: i2.SymbolService }, { type: i0.Injector }, { type: WidgetMapLayerService }, { type: i0.ElementRef }]; }, propDecorators: { mapRef: [{
+                type: ViewChild,
+                args: ['map']
+            }], popup: [{
+                type: ViewChild,
+                args: ['popup']
+            }], popupContent: [{
+                type: ViewChild,
+                args: ['popupContent', { read: ViewContainerRef }]
+            }], exportTypeTemplate: [{
+                type: ViewChild,
+                args: ['exportTypeTemplate', { read: TemplateRef }]
+            }], address: [{
+                type: ViewChild,
+                args: ['address']
+            }] } });
+
+const enTranslations = {
+    '@pry': {
+        widget: {
+            map: {
+                attribution: 'Layer credits',
+                attributions: 'Display credits',
+                style: 'Map style',
+                noStyle: 'Empty map',
+                fit: 'Fit data',
+                addLayer: 'Add layer',
+                layer: 'Layer n°{{index}}',
+                layerOptions: 'Layer options',
+                layerTitle: 'Layer Label',
+                layerType: {
+                    title: 'Type',
+                    heatmap: 'Heatmap',
+                    bubble: 'Bubbles map',
+                    relation: 'Links',
+                    marker: 'Markers map',
+                    polygon: 'Shapes map',
+                    wms: 'WMS API',
+                    wmts: 'WMTS API',
+                    featurelayer: 'Feature layer',
+                    vectortile: 'Vector tile',
+                    rastertile: 'Raster tile',
+                    point: 'Points',
+                    line: 'Lines',
+                    geoserver: 'Geoserver',
+                    'multi-line': 'Multi-lines',
+                    'multi-polygon': 'Multi-polygons'
+                },
+                tooltip: {
+                    hover: 'Hover',
+                    click: 'Click',
+                    title: 'Opening tooltips'
+                },
+                tile: 'Tile layer options',
+                locationAttr: 'Placement options',
+                clustering: 'Clustering options',
+                wms: {
+                    url: 'Service Url',
+                    paramLayer: 'Data identifier',
+                    paramTiled: 'Tiled',
+                    style: 'Style',
+                    matrixSet: 'matrixSet'
+                },
+                deleteLayer: 'Delete layer',
+                locationArray: 'Lat and Lng in separate properties',
+                locationAttribute: {
+                    both: 'Location property',
+                    lat: 'Latitude property',
+                    lng: 'Longitude property'
+                },
+                intensityAttribute: 'Intensity property',
+                classes: 'Classes displayed in layer',
+                relations: 'Display links',
+                importStart: 'Import file {{filename}}...',
+                importOk: 'File {{filename}} imported.',
+                importError: 'Cannot read format with extension {{extension}}. Authorized types are {{authorizedFormats}}',
+                importNotFoundInZip: 'No file {{extension}} found in archive.',
+                clustered: 'Clustered',
+                clusterDistance: 'Cluster distance',
+                opacity: 'Opacity',
+                address: 'Address',
+                addressCoords: 'Coordinates',
+                active: 'Active',
+                inactive: 'Inactive',
+                move: 'Move mode',
+                lasso: 'Lasso selection',
+                rectangle: 'Rectangle selection',
+                click: 'Click selection',
+                zoom: 'Zoom selection',
+                export: 'Export map',
+                import: 'Import layer',
+                legend: 'Legend of layer {{layer}}',
+                legendNotProvided: 'Legend not provided by server'
+            }
+        }
+    }
+};
+
+const frTranslations = {
+    '@pry': {
+        widget: {
+            map: {
+                attribution: 'Crédits de cette couche',
+                attributions: 'Afficher les crédits',
+                style: 'Style du fond de carte',
+                noStyle: 'Aucun fond de carte',
+                fit: 'Adapter la taille aux données',
+                addLayer: 'Ajouter une couche',
+                layer: 'Couche n°{{index}}',
+                layerOptions: 'Options de la couche',
+                layerTitle: 'Libellé de la couche',
+                layerType: {
+                    title: 'Type',
+                    heatmap: 'Chaleur',
+                    relation: 'Relations',
+                    bubble: 'Bulles',
+                    marker: 'Marqueurs',
+                    polygon: 'Formes',
+                    wms: 'Service WMS',
+                    wmts: 'Service WMTS',
+                    featurelayer: 'Feature layer',
+                    vectortile: 'Vector tile',
+                    rastertile: 'Raster tile',
+                    point: 'Points',
+                    line: 'Lignes',
+                    geoserver: 'Geoserver',
+                    'multi-line': 'Multi-lignes',
+                    'multi-polygon': 'Multi-polygone'
+                },
+                tooltip: {
+                    hover: 'Survol',
+                    click: 'Clic',
+                    title: 'Ouverture des tooltips'
+                },
+                tile: 'Option de couche tuile',
+                locationAttr: 'Options de positionnement',
+                clustering: 'Options de regroupement',
+                wms: {
+                    url: 'Url du service',
+                    paramLayer: 'Identifiant de donnnées',
+                    paramTiled: 'Sous forme de tuiles',
+                    style: 'Style',
+                    matrixSet: 'matrixSet'
+                },
+                deleteLayer: 'Supprimer la couche',
+                locationArray: 'Latitude et Longitude séparées',
+                locationAttribute: {
+                    both: 'Propriété des coordonnées',
+                    lat: 'Propriété de la latitude',
+                    lng: 'Propriété de la longitude'
+                },
+                intensityAttribute: "Propriété de l'intensité",
+                classes: 'Classes affichées dans cette couche',
+                relations: 'Afficher les relations',
+                importStart: 'Importation du fichier {{filename}}...',
+                importOk: 'Fichier {{filename}} importé.',
+                importError: "L'extension {{extension}} n'est pas reconnue. Vous pouvez utiliser: {{authorizedFormats}}.",
+                importNotFoundInZip: "Aucun fichier {{extension}} trouvé dans l'archive.",
+                clustered: 'Regroupement',
+                clusterDistance: 'Distance de regroupement',
+                opacity: 'Opacité',
+                address: 'Adresse',
+                addressCoords: 'Coordonnées',
+                active: 'Active',
+                inactive: 'Inactive',
+                move: 'Mode déplacement',
+                lasso: 'Sélection par lasso',
+                rectangle: 'Sélection par rectangle',
+                click: 'Sélectionner par clic',
+                zoom: 'Zoom par rectangle',
+                export: 'Exporter la carte',
+                import: 'Importer une couche',
+                legend: 'Légende de la couche {{layer}}',
+                legendNotProvided: 'Légende non fournie par le serveur'
+            }
+        }
+    }
+};
+
+class WidgetMapModule extends BaseWidgetModule {
+    constructor(pryTranslateService) {
+        super();
+        this.pryTranslateService = pryTranslateService;
+        this.pryTranslateService.addLangObject('fr', 'widget-map', frTranslations);
+        this.pryTranslateService.addLangObject('en', 'widget-map', enTranslations);
+    }
+    getComponent() {
+        return WidgetMapComponent;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetMapModule, deps: [{ token: i2.PryI18nService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: WidgetMapModule, declarations: [WidgetMapComponent, GeometryFieldsForPipe, PryWidgetMapCssComponent, WidgetMapLegendUrlPipe], imports: [CommonModule,
+            FormsModule,
+            OverlayModule,
+            PryCoreModule,
+            PryDashboardModule,
+            PrySelectModule,
+            PryIconModule,
+            PryCheckboxModule,
+            PryToggleModule,
+            PryOverlayModule,
+            PryI18nModule,
+            PryRangeModule], exports: [WidgetMapComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetMapModule, imports: [CommonModule,
+            FormsModule,
+            OverlayModule,
+            PryCoreModule,
+            PryDashboardModule,
+            PrySelectModule,
+            PryIconModule,
+            PryCheckboxModule,
+            PryToggleModule,
+            PryOverlayModule,
+            PryI18nModule,
+            PryRangeModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetMapModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [WidgetMapComponent, GeometryFieldsForPipe, PryWidgetMapCssComponent, WidgetMapLegendUrlPipe],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        OverlayModule,
+                        PryCoreModule,
+                        PryDashboardModule,
+                        PrySelectModule,
+                        PryIconModule,
+                        PryCheckboxModule,
+                        PryToggleModule,
+                        PryOverlayModule,
+                        PryI18nModule,
+                        PryRangeModule
+                    ],
+                    exports: [WidgetMapComponent]
+                }]
+        }], ctorParameters: function () { return [{ type: i2.PryI18nService }]; } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_HEATMAP_RADIUS, DEFAULT_MAP_CENTER, DEFAULT_RADIUS_INTENSITY_FACTOR, DEFAULT_ZOOM_MAX, DEFAULT_ZOOM_MIN, DEFAULT_ZOOM_START, EMPTY_MAP_STYLE, GeometryFieldsForPipe, WidgetMapComponent, WidgetMapLayerService, WidgetMapLegendUrlPipe, WidgetMapModule, exportMapAsGeoJSON, exportMapAsImage, exportMapAsKML, geometryForLayer, getCircleFeatureFromItem, getFeatureFromItem, getLinkFeature, getMapAsPng, populateIntensityAttribute, populateLocationAttribute };
+//# sourceMappingURL=provoly-dashboard-widgets-widget-map.mjs.map