@provoly/dashboard 0.14.4 → 0.14.6

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

@@ -7,7 +7,7 @@ import { Injectable, Component, ViewEncapsulation, Pipe, ViewContainerRef, Templ
 import * as i7 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2 from '@provoly/dashboard';
-import { widgetMapConfig, DashboardActions, ContextMenuActions, TooltipMode, FieldType, ItemUtils, ClassSelectors, FieldSelectors, DataWidgetComponent, WIDGET_HEADER_HEIGHT, ConfigSelectors, DashboardSelectors, GeoMetadata, DataSourceSelectors, ResultsetUtils, BaseWidgetModule, PryCoreModule, PryDashboardModule, PrySelectModule, PryIconModule, PryToggleModule, PryOverlayModule, PryI18nModule, PryRangeModule } from '@provoly/dashboard';
+import { widgetMapConfig, DashboardActions, ContextMenuActions, TooltipMode, ItemUtils, FieldType, ClassSelectors, FieldSelectors, DataWidgetComponent, WIDGET_HEADER_HEIGHT, ConfigSelectors, DashboardSelectors, GeoMetadata, GeometricFieldTypes, DataSourceSelectors, ResultsetUtils, BaseWidgetModule, PryCoreModule, PryDashboardModule, PrySelectModule, PryIconModule, PryToggleModule, PryOverlayModule, PryI18nModule, PryRangeModule } from '@provoly/dashboard';
 import * as i8 from '@provoly/dashboard/components/checkbox';
 import { PryCheckboxModule } from '@provoly/dashboard/components/checkbox';
 import equal from 'fast-deep-equal/es6';
@@ -22,20 +22,20 @@ import { Vector, TileWMS, WMTS, XYZ, Cluster } from 'ol/source';
 import proj4 from 'proj4';
 import { map, of, combineLatest, filter, BehaviorSubject, startWith, debounceTime, distinctUntilChanged, switchMap, delay, mergeMap, from } from 'rxjs';
 import { ScaleLine } from 'ol/control';
-import { Polygon, Circle, LineString } from 'ol/geom';
+import { Polygon, Circle as Circle$1, LineString } from 'ol/geom';
 import PointerInteraction from 'ol/interaction/Pointer';
 import TileLayer from 'ol/layer/Tile';
 import VectorLayer from 'ol/layer/Vector';
 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 * as i1 from '@angular/common/http';
-import { HttpHeaders } from '@angular/common/http';
-import * as i1$1 from '@ngrx/store';
+import { Style, Fill, Stroke, Circle, Text } from 'ol/style';
 import { GeoJSON, MVT } from 'ol/format';
 import VectorTile from 'ol/source/VectorTile';
 import CircleStyle from 'ol/style/Circle';
 import WMTSTileGrid from 'ol/tilegrid/WMTS';
+import * as i1 from '@angular/common/http';
+import { HttpHeaders } from '@angular/common/http';
+import * as i1$1 from '@ngrx/store';
 
 class SelectionInteraction extends PointerInteraction {
     constructor() {
@@ -352,319 +352,58 @@ class CqlUtils {
     }
 }
 
-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
-                    };
-                });
+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
             })
-                .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 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 XMLUtils {
-    static find(childs, name) {
-        if (!!childs) {
-            for (let i = 0; i < childs.length; i++) {
-                const node = childs[i];
-                if (node.nodeName === name) {
-                    return node;
-                }
-            }
-        }
-        return null;
-    }
-    static findAll(childs, name) {
-        const result = [];
-        for (let i = 0; i < childs.length; i++) {
-            const node = childs[i];
-            if (node.nodeName === name) {
-                result.push(node);
-            }
-        }
-        return result;
-    }
-    static findWith(childs, attribute, value) {
-        for (let i = 0; i < childs.length; i++) {
-            const node = childs[i];
-            const attrNode = XMLUtils.find(node.childNodes, attribute);
-            if (attrNode?.textContent === value) {
-                return node;
-            }
-        }
-        return null;
-    }
-}
-
-class WmsService {
-    constructor(httpClient) {
-        this.httpClient = httpClient;
-        this.parser = new DOMParser();
-    }
-    getCapabilities(wmsLayer) {
-        if (wmsLayer && wmsLayer.url) {
-            const layerUrlWithQmark = wmsLayer.url.indexOf('?') === -1 ? wmsLayer.url + '?' : wmsLayer.url;
-            const layerUrlWithService = layerUrlWithQmark.indexOf('&SERVICE=') === -1 ? layerUrlWithQmark + '&SERVICE=WMS' : layerUrlWithQmark;
-            const layerUrlWithVersion = layerUrlWithService.indexOf('&VERSION=') === -1 ? layerUrlWithService + '&VERSION=1.3.0' : layerUrlWithService;
-            return this.httpClient
-                .get(`${layerUrlWithVersion}&REQUEST=GetCapabilities`, {
-                headers: new HttpHeaders({
-                    Accept: 'text/html, application/xhtml+xml, */*',
-                    'Content-Type': 'application/x-www-form-urlencoded'
-                }),
-                responseType: 'text'
-            })
-                .pipe(map((response) => {
-                const doc = this.parser.parseFromString(response, 'application/xml');
-                const errorNode = doc.querySelector('parsererror');
-                if (errorNode) {
-                    console.error(`Cannot getCapabilities for ${wmsLayer.url}[${wmsLayer.paramLayer}]`);
-                    return null;
-                }
-                else {
-                    return { url: wmsLayer.url, paramLayer: wmsLayer.paramLayer, doc };
-                }
-            }));
-        }
-        return of(null);
-    }
-    static getMatchingLayer(paramLayer, doc) {
-        const WMSCapability = XMLUtils.find(doc.childNodes, 'WMS_Capabilities');
-        if (WMSCapability) {
-            const Capabilities = XMLUtils.find(WMSCapability.childNodes, 'Capability');
-            if (Capabilities) {
-                const Layer = XMLUtils.find(Capabilities.childNodes, 'Layer');
-                if (Layer) {
-                    let matchingLayer = XMLUtils.findWith(Layer.childNodes, 'Name', paramLayer);
-                    const split = paramLayer.split(':');
-                    if (!matchingLayer && split.length >= 2) {
-                        // Try again, splitting on ":" in the name to ignore namespace if present
-                        matchingLayer = XMLUtils.findWith(Layer.childNodes, 'Name', split[split.length - 1]);
-                    }
-                    return matchingLayer;
-                }
-            }
-        }
-        return null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WmsService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WmsService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WmsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
-
-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.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({
+            image: new Circle({
                 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({
+            image: new Circle({
                 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.dontNeedIntensity = [
+            ...this.dontNeedLocation,
+            'marker',
+            'point',
+            'line',
+            'polygon',
+            'multi-line',
+            'multi-polygon',
+            'auto'
+        ];
         this.layersImplementation = {
+            auto: (layer, attributesForClass, layerClassesId, resultSet, range, itemStyles, map) => {
+                return this.layersImplementation[WidgetMapLayerService.translateFieldTypeToLayerType(layer.subType)](
+                // @ts-ignore
+                layer, attributesForClass, layerClassesId, resultSet, range, itemStyles, map);
+            },
             heatmap: (layer, attributesForClass, layerClassesId, resultSet, range, itemStyles, map) => {
                 const heatmap = new Heatmap({
                     minZoom: layer.minZoom ?? DEFAULT_ZOOM_MIN,
@@ -786,147 +525,444 @@ class WidgetMapLayerService {
                     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 ?? '']
-                    })
-                });
+                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 translateFieldTypeToLayerType(subType) {
+        switch (subType) {
+            case FieldType.POINT:
+                return 'marker';
+            case FieldType.LINE:
+                return 'line';
+            case FieldType.POLYGON:
+                return 'polygon';
+            case FieldType.MULTILINE:
+                return 'multi-line';
+            case FieldType.MULTIPOLYGON:
+                return 'multi-polygon';
+            default:
+                console.warn(`wrong type ${subType} for auto options`);
+                return 'marker';
+        }
+    }
+    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'
+                }]
+        }] });
+
+const populateLocationAttribute = (layer, resultSet, classesNotFiltered, fields) => {
+    if (['heatmap', 'marker', 'bubble', 'point', 'line', 'polygon', 'multi-line', 'multi-polygon', 'auto'].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)
+                    .flat()
+                    .map((attr) => ({ attr, field: fields.find((field) => field.id === attr.field) }))
+                    .filter(({ attr, field }) => field?.type === geometry);
+            }
+            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$1(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([
+            // @ts-ignore
+            featureSource.getGeometry()?.getCoordinates() ?? featureSource.getGeometry()?.getCenter() ?? [0, 0],
+            // @ts-ignore
+            featureDestination.getGeometry()?.getCoordinates() ?? featureDestination.getGeometry()?.getCenter() ?? [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 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;
+        case 'auto':
+            return geometryForLayer({
+                type: WidgetMapLayerService.translateFieldTypeToLayerType(layer.subType)
+            });
+        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];
+
+class XMLUtils {
+    static find(childs, name) {
+        if (!!childs) {
+            for (let i = 0; i < childs.length; i++) {
+                const node = childs[i];
+                if (node.nodeName === name) {
+                    return node;
+                }
             }
-        };
+        }
+        return null;
     }
-    get implementationList() {
-        return Object.keys(this.layersImplementation).filter((implementation) => implementation !== 'geoserver');
+    static findAll(childs, name) {
+        const result = [];
+        for (let i = 0; i < childs.length; i++) {
+            const node = childs[i];
+            if (node.nodeName === name) {
+                result.push(node);
+            }
+        }
+        return result;
     }
-    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);
+    static findWith(childs, attribute, value) {
+        for (let i = 0; i < childs.length; i++) {
+            const node = childs[i];
+            const attrNode = XMLUtils.find(node.childNodes, attribute);
+            if (attrNode?.textContent === value) {
+                return node;
+            }
+        }
+        return null;
     }
-    makeClustered(layer, layerOptions) {
-        if (!['marker', 'bubble'].includes(layerOptions.type) || !('clustered' in layerOptions && layerOptions.clustered)) {
-            return layer;
+}
+
+class WmsService {
+    constructor(httpClient) {
+        this.httpClient = httpClient;
+        this.parser = new DOMParser();
+    }
+    getCapabilities(wmsLayer) {
+        if (wmsLayer && wmsLayer.url) {
+            const layerUrlWithQmark = wmsLayer.url.indexOf('?') === -1 ? wmsLayer.url + '?' : wmsLayer.url;
+            const layerUrlWithService = layerUrlWithQmark.indexOf('&SERVICE=') === -1 ? layerUrlWithQmark + '&SERVICE=WMS' : layerUrlWithQmark;
+            const layerUrlWithVersion = layerUrlWithService.indexOf('&VERSION=') === -1 ? layerUrlWithService + '&VERSION=1.3.0' : layerUrlWithService;
+            return this.httpClient
+                .get(`${layerUrlWithVersion}&REQUEST=GetCapabilities`, {
+                headers: new HttpHeaders({
+                    Accept: 'text/html, application/xhtml+xml, */*',
+                    'Content-Type': 'application/x-www-form-urlencoded'
+                }),
+                responseType: 'text'
+            })
+                .pipe(map((response) => {
+                const doc = this.parser.parseFromString(response, 'application/xml');
+                const errorNode = doc.querySelector('parsererror');
+                if (errorNode) {
+                    console.error(`Cannot getCapabilities for ${wmsLayer.url}[${wmsLayer.paramLayer}]`);
+                    return null;
+                }
+                else {
+                    return { url: wmsLayer.url, paramLayer: wmsLayer.paramLayer, doc };
+                }
+            }));
         }
-        // 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 of(null);
+    }
+    static getMatchingLayer(paramLayer, doc) {
+        const WMSCapability = XMLUtils.find(doc.childNodes, 'WMS_Capabilities');
+        if (WMSCapability) {
+            const Capabilities = XMLUtils.find(WMSCapability.childNodes, 'Capability');
+            if (Capabilities) {
+                const Layer = XMLUtils.find(Capabilities.childNodes, 'Layer');
+                if (Layer) {
+                    let matchingLayer = XMLUtils.findWith(Layer.childNodes, 'Name', paramLayer);
+                    const split = paramLayer.split(':');
+                    if (!matchingLayer && split.length >= 2) {
+                        // Try again, splitting on ":" in the name to ignore namespace if present
+                        matchingLayer = XMLUtils.findWith(Layer.childNodes, 'Name', split[split.length - 1]);
+                    }
+                    return matchingLayer;
                 }
-                return style;
-            }
-            else {
-                return size === 1 ? feature.get('features')[0].get('classicStyle') : null;
             }
-        });
-        return layer;
+        }
+        return null;
     }
-    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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WmsService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WmsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetMapLayerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WmsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
 
 class PryWidgetMapCssComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryWidgetMapCssComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -1089,14 +1125,31 @@ class WidgetMapComponent extends DataWidgetComponent {
             })
                 .map((layer) => layer);
         }));
+        this.autoDatasetLayers$ = combineLatest([
+            this.classes$,
+            this.fields$,
+            this.usedDatasources$.pipe(startWith([]), map((datasources) => datasources.filter((ds) => ds.sourceType === 'dataset')))
+        ]).pipe(map(([classes, fields, dataSets]) => dataSets
+            .map((ds) => {
+            const model = classes.find((clazz) => clazz.id === ds.oClass);
+            const geoAttributes = (model?.attributes.map((attr) => ({ attr, field: fields.find((f) => attr.field === f.id) })) ?? []).filter(({ attr, field }) => !!field && GeometricFieldTypes.includes(field.type));
+            return geoAttributes.map((geo) => ({
+                type: 'auto',
+                title: `${ds.name} - ${geo.attr.name} (${geo.field.type})`,
+                oClass: ds.oClass,
+                key: ds.id,
+                subType: geo.field.type,
+                classes: [ds.oClass],
+                attribute: geo.attr.name
+            }));
+        })
+            .flat()));
         this.wmsCapabilities$ = combineLatest([
-            this.manifest$.pipe(map((manifest) => (manifest.options ?? { layers: [] }).layers?.filter((layer) => ['wms', 'geoserver'].includes(layer.type)))),
+            this.manifest$.pipe(map((manifest) => (manifest.options ?? { layers: [] }).layers?.filter((layer) => ['wms'].includes(layer.type)))),
             this.geoServerLayerDescriptions$
-        ]).pipe(map(([wmsLayers, geoServerLayerDescriptions]) => wmsLayers.map((layer) => ({
-            ...layer,
-            // @ts-ignore
-            ...geoServerLayerDescriptions.find((layerDescr) => layerDescr.key === layer.key)
-        }))), distinctUntilChanged((p, c) => equal(p, c)), switchMap((wmsLayers) => combineLatest(wmsLayers.map((layer) => wmsService.getCapabilities(layer)))), startWith([]));
+        ]).pipe(map(([wmsLayers, geoServerLayerDescriptions]) => {
+            return [...wmsLayers, ...geoServerLayerDescriptions];
+        }), distinctUntilChanged((p, c) => equal(p, c)), switchMap((wmsLayers) => combineLatest(wmsLayers.map((layer) => wmsService.getCapabilities(layer)))), startWith([]));
         this.options$ = combineLatest([
             this.manifest$,
             this.resultSet$,
@@ -1104,13 +1157,28 @@ class WidgetMapComponent extends DataWidgetComponent {
             this.fields$,
             this.styles$,
             this.geoServerLayerDescriptions$,
-            this.wmsCapabilities$.pipe(startWith([]))
-        ]).pipe(map(([manifest, resultSet, classes, fields, mapStyles, geoLayers, capabilities]) => {
+            this.wmsCapabilities$.pipe(startWith([])),
+            this.autoDatasetLayers$
+        ]).pipe(map(([manifest, resultSet, classes, fields, mapStyles, geoLayers, capabilities, autoDatasetLayers]) => {
             // auto determine layers parameters to provide a working view
-            const autoOptions = JSON.parse(JSON.stringify({ relations: true, ...manifest.options }));
+            const autoOptions = JSON.parse(JSON.stringify(manifest.options));
             if (!autoOptions.tooltipMode) {
                 autoOptions.tooltipMode = TooltipMode.CLICK;
             }
+            autoOptions.layers = [
+                ...(autoOptions.layers ?? []).filter((layer) => layer.type !== 'auto'),
+                ...(autoOptions.automaticLayers
+                    ? autoDatasetLayers
+                        .filter((layer) => !autoOptions.ignoreAutoLayer ||
+                        !autoOptions.ignoreAutoLayer.includes(layer.key + '-' + layer.subType))
+                        .map((layer) => ({
+                        ...layer,
+                        ...((autoOptions.layers ?? []).find(
+                        // @ts-ignore
+                        (prevLayer) => prevLayer.key === layer.key && prevLayer.attribute === layer.attribute) ?? {})
+                    }))
+                    : [])
+            ];
             autoOptions.layers?.forEach((layer, i) => {
                 populateLocationAttribute(layer, resultSet, classes, fields);
                 populateIntensityAttribute(layer, resultSet, classes, fields);
@@ -1142,8 +1210,20 @@ class WidgetMapComponent extends DataWidgetComponent {
                 const lightStyles = mapStyles.filter((style) => !(style.identifier ?? '-').includes('dark'));
                 autoOptions.style = lightStyles.length > 0 ? lightStyles[0].identifier : mapStyles[0].identifier;
             }
+            if (autoOptions.ignoreAutoLayer) {
+                const base = autoOptions.ignoreAutoLayer;
+                // Remove from ignoreAutoLayers, values that are not necessary
+                const possibleIgnoreAutoLayerKeys = autoDatasetLayers.map((layer) => layer.key + '-' + layer.subType);
+                autoOptions.ignoreAutoLayer = (autoOptions.ignoreAutoLayer ?? []).filter((key) => possibleIgnoreAutoLayerKeys.includes(key));
+                if (autoOptions.ignoreAutoLayer.length === 0) {
+                    delete autoOptions.ignoreAutoLayer;
+                }
+                if (!autoOptions.ignoreAutoLayer || base.length !== autoOptions.ignoreAutoLayer.length) {
+                    this.emitManifest();
+                }
+            }
             return autoOptions;
-        }));
+        }), distinctUntilChanged((p, c) => equal(p, c)));
         this.subscriptions.add(this.options$.pipe(filter((opt) => !!opt)).subscribe((options) => {
             this.optionsCopy = JSON.parse(JSON.stringify(options));
         }));
@@ -1430,7 +1510,10 @@ class WidgetMapComponent extends DataWidgetComponent {
                     if (matchingLayer) {
                         const matchingTitle = XMLUtils.find(matchingLayer.childNodes, 'Title');
                         if (matchingTitle) {
-                            layer.title = matchingTitle.textContent ?? undefined;
+                            layer.title =
+                                !!matchingTitle.textContent && matchingTitle.textContent.length > 0
+                                    ? matchingTitle.textContent
+                                    : undefined;
                         }
                     }
                 }
@@ -1578,8 +1661,11 @@ class WidgetMapComponent extends DataWidgetComponent {
         const specificLayer = layer;
         specificLayer.classes = $event;
     }
-    deleteLayer(i) {
+    deleteLayer(i, layer) {
         this.optionsCopy?.layers?.splice(i, 1);
+        if (layer.type === 'auto') {
+            this.optionsCopy.ignoreAutoLayer = [...(this.optionsCopy.ignoreAutoLayer ?? []), layer.key + '-' + layer.subType];
+        }
     }
     invertLayers(idx, idxWith) {
         if (!!this.optionsCopy && !!this.optionsCopy.layers) {
@@ -1726,6 +1812,12 @@ class WidgetMapComponent extends DataWidgetComponent {
     changeSingleLayer($event) {
         this.optionsCopy.singleLayer = $event;
     }
+    changeAutoLayer($event) {
+        this.optionsCopy.automaticLayers = $event;
+        if (!this.optionsCopy.automaticLayers) {
+            delete this.optionsCopy.ignoreAutoLayer;
+        }
+    }
     get layerVisibleIdx() {
         return this.mapLayers.map((layer, idx) => (layer.getVisible() ? idx : 0)).reduce((a, b) => a + b);
     }
@@ -1734,11 +1826,11 @@ class WidgetMapComponent extends DataWidgetComponent {
         this.store.dispatch(DashboardActions.resetWmsFeatures());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetMapComponent, deps: [{ token: i1$1.Store }, { token: i2.PrySnackbarService }, { token: i2.PryI18nService }, { token: i2.TooltipFactoryService }, { token: i3.Overlay }, { token: i0.ViewContainerRef }, { token: i2.SymbolService }, { token: i0.Injector }, { token: WidgetMapLayerService }, { token: i0.ElementRef }, { token: WmsService }], 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: ["mapRef"], 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$ | async) ?? []\"\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      (changeTitle)=\"changeWidgetTitle($event)\"\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      <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.style === STYLE_FROM_URL\">\n        <label class=\"a-label\" for=\"style_URL\">{{ '@pry.widget.map.styleUrl' | i18n }}</label>\n        <input\n          id=\"style_URL\"\n          class=\"a-form-field\"\n          type=\"text\"\n          (input)=\"changeStyleURL($event)\"\n          [value]=\"optionsCopy.styleURL ?? ''\"\n        />\n      </div>\n\n      <pry-checkbox (ngModelChange)=\"changeSingleLayer($event)\" [ngModel]=\"optionsCopy.singleLayer ?? false\">\n        {{ '@pry.widget.map.singleLayer' | i18n }}\n      </pry-checkbox>\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      <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\" *ngIf=\"layer.type !== 'geoserver'\">\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                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 === '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              [value]=\"layer.url\"\n            />\n          </div>\n\n          <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wms' || layer.type === 'wmts'\">\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              [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)=\"interactionManager.selectionInteraction.changeSelection(action)\"\n        [class.-selected]=\"interactionManager.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)=\"export()\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </button>\n  </div>\n\n  <div\n    class=\"ol-control m-layer-switcher\"\n    *ngIf=\"((layers$ | async)?.length ?? 0) > 0\"\n    [style.top.px]=\"layersTop$ | async\"\n  >\n    <button\n      class=\"m-layer-switcher__toggle\"\n      (click)=\"toggleLayersWindow()\"\n      [title]=\"'@pry.widget.map.selectLayers' | i18n\"\n    >\n      <pry-icon iconSvg=\"layers\" [width]=\"22\" [height]=\"22\"></pry-icon>\n    </button>\n    <ng-container *ngFor=\"let layer of mapLayers; let index = index\">\n      <div class=\"m-layer-switcher__title\" [class.-hidden]=\"!layersTabOpen\">\n        {{ layer.get('title') }}\n        <ng-container *ngIf=\"!(options$ | async)?.singleLayer; else singleLayer\">\n          <pry-checkbox [ngModel]=\"layer.getVisible()\" (change)=\"changeVisibility(layer)\"></pry-checkbox>\n        </ng-container>\n        <ng-template #singleLayer>\n          <input\n            type=\"radio\"\n            name=\"layer\"\n            [id]=\"'radio-layer-' + layer.get('title').split(' ')[0]\"\n            [ngModel]=\"layerVisibleIdx\"\n            [value]=\"index\"\n            (change)=\"changeVisibility(layer)\"\n          />\n        </ng-template>\n      </div>\n    </ng-container>\n  </div>\n\n  <div\n    class=\"ol-control m-layer-legend\"\n    *ngIf=\"((legendLayers$ | async)?.length ?? 0) > 0\"\n    [style.top.px]=\"legendTop$ | async\"\n  >\n    <button class=\"m-layer-legend__toggle\" (click)=\"toggleLegendWindow()\" [title]=\"'@pry.widget.map.legends' | i18n\">\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        [style.max-height.px]=\"legendHeight$ | async\"\n      >\n        <ng-container *ngIf=\"geoLayer | legendUrl : { capabilities: (wmsCapabilities$ | async) } as url\">\n          <img\n            [src]=\"url\"\n            [alt]=\"'@pry.widget.map.legend' | i18n : { layer: geoLayer.title }\"\n            (error)=\"imageNotProvided[index] = true\"\n          />\n        </ng-container>\n        <ng-container *ngIf=\"!(geoLayer | legendUrl : { capabilities: (wmsCapabilities$ | async) })\">\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 #mapRef 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  <div #popup class=\"m-tooltip m-tooltip--popup\" [hidden]=\"true\" role=\"tooltip\">\n    <div class=\"m-tooltip--popup__header\">\n      <p>{{ this.tooltipIndex + 1 }} / {{ this.tooltipNumber }}</p>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"tooltipMove(-1)\" [disabled]=\"!tooltipCanMove(-1)\">\n        <pry-icon iconSvg=\"arrow_back\"></pry-icon>\n      </button>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"tooltipMove(1)\" [disabled]=\"!tooltipCanMove(1)\">\n        <pry-icon iconSvg=\"arrow_right\"></pry-icon>\n      </button>\n    </div>\n    <div class=\"m-tooltip--popup__container\">\n      <ng-container #popupContent></ng-container>\n    </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</div>\n", dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.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", "changeTitle"] }, { 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", "closeOnSelect", "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: i8.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: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }, { kind: "pipe", type: GeometryFieldsForPipe, name: "geometryFieldsFor" }, { kind: "pipe", type: WidgetMapLegendUrlPipe, name: "legendUrl" }] }); }
+    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: ["mapRef"], 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$ | async) ?? []\"\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      (changeTitle)=\"changeWidgetTitle($event)\"\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      <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.style === STYLE_FROM_URL\">\n        <label class=\"a-label\" for=\"style_URL\">{{ '@pry.widget.map.styleUrl' | i18n }}</label>\n        <input\n          id=\"style_URL\"\n          class=\"a-form-field\"\n          type=\"text\"\n          (input)=\"changeStyleURL($event)\"\n          [value]=\"optionsCopy.styleURL ?? ''\"\n        />\n      </div>\n\n      <pry-checkbox (ngModelChange)=\"changeSingleLayer($event)\" [ngModel]=\"optionsCopy.singleLayer ?? false\">\n        {{ '@pry.widget.map.singleLayer' | i18n }}\n      </pry-checkbox>\n\n      <pry-checkbox (ngModelChange)=\"changeAutoLayer($event)\" [ngModel]=\"optionsCopy.automaticLayers ?? false\">\n        {{ '@pry.widget.map.autoLayer' | i18n }}\n      </pry-checkbox>\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      <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\" *ngIf=\"!['geoserver', 'auto'].includes(layer.type)\">\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                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                layer.type !== 'auto'\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 === '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              [value]=\"layer.url\"\n            />\n          </div>\n\n          <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wms' || layer.type === 'wmts'\">\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              [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, layer)\"\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)=\"interactionManager.selectionInteraction.changeSelection(action)\"\n        [class.-selected]=\"interactionManager.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)=\"export()\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </button>\n  </div>\n\n  <div\n    class=\"ol-control m-layer-switcher\"\n    *ngIf=\"((layers$ | async)?.length ?? 0) > 0\"\n    [style.top.px]=\"layersTop$ | async\"\n  >\n    <button\n      class=\"m-layer-switcher__toggle\"\n      (click)=\"toggleLayersWindow()\"\n      [title]=\"'@pry.widget.map.selectLayers' | i18n\"\n    >\n      <pry-icon iconSvg=\"layers\" [width]=\"22\" [height]=\"22\"></pry-icon>\n    </button>\n    <ng-container *ngFor=\"let layer of mapLayers; let index = index\">\n      <div class=\"m-layer-switcher__title\" [class.-hidden]=\"!layersTabOpen\">\n        {{ layer.get('title') }}\n        <ng-container *ngIf=\"!(options$ | async)?.singleLayer; else singleLayer\">\n          <pry-checkbox [ngModel]=\"layer.getVisible()\" (change)=\"changeVisibility(layer)\"></pry-checkbox>\n        </ng-container>\n        <ng-template #singleLayer>\n          <input\n            type=\"radio\"\n            name=\"layer\"\n            [id]=\"'radio-layer-' + layer.get('title').split(' ')[0]\"\n            [ngModel]=\"layerVisibleIdx\"\n            [value]=\"index\"\n            (change)=\"changeVisibility(layer)\"\n          />\n        </ng-template>\n      </div>\n    </ng-container>\n  </div>\n\n  <div\n    class=\"ol-control m-layer-legend\"\n    *ngIf=\"((legendLayers$ | async)?.length ?? 0) > 0\"\n    [style.top.px]=\"legendTop$ | async\"\n  >\n    <button class=\"m-layer-legend__toggle\" (click)=\"toggleLegendWindow()\" [title]=\"'@pry.widget.map.legends' | i18n\">\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        [style.max-height.px]=\"legendHeight$ | async\"\n      >\n        <ng-container *ngIf=\"geoLayer | legendUrl : { capabilities: (wmsCapabilities$ | async) } as url\">\n          <img\n            [src]=\"url\"\n            [alt]=\"'@pry.widget.map.legend' | i18n : { layer: geoLayer.title }\"\n            (error)=\"imageNotProvided[index] = true\"\n          />\n        </ng-container>\n        <ng-container *ngIf=\"!(geoLayer | legendUrl : { capabilities: (wmsCapabilities$ | async) })\">\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 #mapRef 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  <div #popup class=\"m-tooltip m-tooltip--popup\" [hidden]=\"true\" role=\"tooltip\">\n    <div class=\"m-tooltip--popup__header\">\n      <p>{{ this.tooltipIndex + 1 }} / {{ this.tooltipNumber }}</p>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"tooltipMove(-1)\" [disabled]=\"!tooltipCanMove(-1)\">\n        <pry-icon iconSvg=\"arrow_back\"></pry-icon>\n      </button>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"tooltipMove(1)\" [disabled]=\"!tooltipCanMove(1)\">\n        <pry-icon iconSvg=\"arrow_right\"></pry-icon>\n      </button>\n    </div>\n    <div class=\"m-tooltip--popup__container\">\n      <ng-container #popupContent></ng-container>\n    </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</div>\n", dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.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", "changeTitle"] }, { 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", "closeOnSelect", "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: i8.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: i6.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$ | async) ?? []\"\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      (changeTitle)=\"changeWidgetTitle($event)\"\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      <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.style === STYLE_FROM_URL\">\n        <label class=\"a-label\" for=\"style_URL\">{{ '@pry.widget.map.styleUrl' | i18n }}</label>\n        <input\n          id=\"style_URL\"\n          class=\"a-form-field\"\n          type=\"text\"\n          (input)=\"changeStyleURL($event)\"\n          [value]=\"optionsCopy.styleURL ?? ''\"\n        />\n      </div>\n\n      <pry-checkbox (ngModelChange)=\"changeSingleLayer($event)\" [ngModel]=\"optionsCopy.singleLayer ?? false\">\n        {{ '@pry.widget.map.singleLayer' | i18n }}\n      </pry-checkbox>\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      <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\" *ngIf=\"layer.type !== 'geoserver'\">\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                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 === '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              [value]=\"layer.url\"\n            />\n          </div>\n\n          <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wms' || layer.type === 'wmts'\">\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              [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)=\"interactionManager.selectionInteraction.changeSelection(action)\"\n        [class.-selected]=\"interactionManager.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)=\"export()\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </button>\n  </div>\n\n  <div\n    class=\"ol-control m-layer-switcher\"\n    *ngIf=\"((layers$ | async)?.length ?? 0) > 0\"\n    [style.top.px]=\"layersTop$ | async\"\n  >\n    <button\n      class=\"m-layer-switcher__toggle\"\n      (click)=\"toggleLayersWindow()\"\n      [title]=\"'@pry.widget.map.selectLayers' | i18n\"\n    >\n      <pry-icon iconSvg=\"layers\" [width]=\"22\" [height]=\"22\"></pry-icon>\n    </button>\n    <ng-container *ngFor=\"let layer of mapLayers; let index = index\">\n      <div class=\"m-layer-switcher__title\" [class.-hidden]=\"!layersTabOpen\">\n        {{ layer.get('title') }}\n        <ng-container *ngIf=\"!(options$ | async)?.singleLayer; else singleLayer\">\n          <pry-checkbox [ngModel]=\"layer.getVisible()\" (change)=\"changeVisibility(layer)\"></pry-checkbox>\n        </ng-container>\n        <ng-template #singleLayer>\n          <input\n            type=\"radio\"\n            name=\"layer\"\n            [id]=\"'radio-layer-' + layer.get('title').split(' ')[0]\"\n            [ngModel]=\"layerVisibleIdx\"\n            [value]=\"index\"\n            (change)=\"changeVisibility(layer)\"\n          />\n        </ng-template>\n      </div>\n    </ng-container>\n  </div>\n\n  <div\n    class=\"ol-control m-layer-legend\"\n    *ngIf=\"((legendLayers$ | async)?.length ?? 0) > 0\"\n    [style.top.px]=\"legendTop$ | async\"\n  >\n    <button class=\"m-layer-legend__toggle\" (click)=\"toggleLegendWindow()\" [title]=\"'@pry.widget.map.legends' | i18n\">\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        [style.max-height.px]=\"legendHeight$ | async\"\n      >\n        <ng-container *ngIf=\"geoLayer | legendUrl : { capabilities: (wmsCapabilities$ | async) } as url\">\n          <img\n            [src]=\"url\"\n            [alt]=\"'@pry.widget.map.legend' | i18n : { layer: geoLayer.title }\"\n            (error)=\"imageNotProvided[index] = true\"\n          />\n        </ng-container>\n        <ng-container *ngIf=\"!(geoLayer | legendUrl : { capabilities: (wmsCapabilities$ | async) })\">\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 #mapRef 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  <div #popup class=\"m-tooltip m-tooltip--popup\" [hidden]=\"true\" role=\"tooltip\">\n    <div class=\"m-tooltip--popup__header\">\n      <p>{{ this.tooltipIndex + 1 }} / {{ this.tooltipNumber }}</p>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"tooltipMove(-1)\" [disabled]=\"!tooltipCanMove(-1)\">\n        <pry-icon iconSvg=\"arrow_back\"></pry-icon>\n      </button>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"tooltipMove(1)\" [disabled]=\"!tooltipCanMove(1)\">\n        <pry-icon iconSvg=\"arrow_right\"></pry-icon>\n      </button>\n    </div>\n    <div class=\"m-tooltip--popup__container\">\n      <ng-container #popupContent></ng-container>\n    </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</div>\n" }]
+            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$ | async) ?? []\"\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      (changeTitle)=\"changeWidgetTitle($event)\"\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      <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.style === STYLE_FROM_URL\">\n        <label class=\"a-label\" for=\"style_URL\">{{ '@pry.widget.map.styleUrl' | i18n }}</label>\n        <input\n          id=\"style_URL\"\n          class=\"a-form-field\"\n          type=\"text\"\n          (input)=\"changeStyleURL($event)\"\n          [value]=\"optionsCopy.styleURL ?? ''\"\n        />\n      </div>\n\n      <pry-checkbox (ngModelChange)=\"changeSingleLayer($event)\" [ngModel]=\"optionsCopy.singleLayer ?? false\">\n        {{ '@pry.widget.map.singleLayer' | i18n }}\n      </pry-checkbox>\n\n      <pry-checkbox (ngModelChange)=\"changeAutoLayer($event)\" [ngModel]=\"optionsCopy.automaticLayers ?? false\">\n        {{ '@pry.widget.map.autoLayer' | i18n }}\n      </pry-checkbox>\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      <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\" *ngIf=\"!['geoserver', 'auto'].includes(layer.type)\">\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                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                layer.type !== 'auto'\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 === '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              [value]=\"layer.url\"\n            />\n          </div>\n\n          <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wms' || layer.type === 'wmts'\">\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              [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, layer)\"\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)=\"interactionManager.selectionInteraction.changeSelection(action)\"\n        [class.-selected]=\"interactionManager.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)=\"export()\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </button>\n  </div>\n\n  <div\n    class=\"ol-control m-layer-switcher\"\n    *ngIf=\"((layers$ | async)?.length ?? 0) > 0\"\n    [style.top.px]=\"layersTop$ | async\"\n  >\n    <button\n      class=\"m-layer-switcher__toggle\"\n      (click)=\"toggleLayersWindow()\"\n      [title]=\"'@pry.widget.map.selectLayers' | i18n\"\n    >\n      <pry-icon iconSvg=\"layers\" [width]=\"22\" [height]=\"22\"></pry-icon>\n    </button>\n    <ng-container *ngFor=\"let layer of mapLayers; let index = index\">\n      <div class=\"m-layer-switcher__title\" [class.-hidden]=\"!layersTabOpen\">\n        {{ layer.get('title') }}\n        <ng-container *ngIf=\"!(options$ | async)?.singleLayer; else singleLayer\">\n          <pry-checkbox [ngModel]=\"layer.getVisible()\" (change)=\"changeVisibility(layer)\"></pry-checkbox>\n        </ng-container>\n        <ng-template #singleLayer>\n          <input\n            type=\"radio\"\n            name=\"layer\"\n            [id]=\"'radio-layer-' + layer.get('title').split(' ')[0]\"\n            [ngModel]=\"layerVisibleIdx\"\n            [value]=\"index\"\n            (change)=\"changeVisibility(layer)\"\n          />\n        </ng-template>\n      </div>\n    </ng-container>\n  </div>\n\n  <div\n    class=\"ol-control m-layer-legend\"\n    *ngIf=\"((legendLayers$ | async)?.length ?? 0) > 0\"\n    [style.top.px]=\"legendTop$ | async\"\n  >\n    <button class=\"m-layer-legend__toggle\" (click)=\"toggleLegendWindow()\" [title]=\"'@pry.widget.map.legends' | i18n\">\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        [style.max-height.px]=\"legendHeight$ | async\"\n      >\n        <ng-container *ngIf=\"geoLayer | legendUrl : { capabilities: (wmsCapabilities$ | async) } as url\">\n          <img\n            [src]=\"url\"\n            [alt]=\"'@pry.widget.map.legend' | i18n : { layer: geoLayer.title }\"\n            (error)=\"imageNotProvided[index] = true\"\n          />\n        </ng-container>\n        <ng-container *ngIf=\"!(geoLayer | legendUrl : { capabilities: (wmsCapabilities$ | async) })\">\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 #mapRef 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  <div #popup class=\"m-tooltip m-tooltip--popup\" [hidden]=\"true\" role=\"tooltip\">\n    <div class=\"m-tooltip--popup__header\">\n      <p>{{ this.tooltipIndex + 1 }} / {{ this.tooltipNumber }}</p>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"tooltipMove(-1)\" [disabled]=\"!tooltipCanMove(-1)\">\n        <pry-icon iconSvg=\"arrow_back\"></pry-icon>\n      </button>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"tooltipMove(1)\" [disabled]=\"!tooltipCanMove(1)\">\n        <pry-icon iconSvg=\"arrow_right\"></pry-icon>\n      </button>\n    </div>\n    <div class=\"m-tooltip--popup__container\">\n      <ng-container #popupContent></ng-container>\n    </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</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.Store }, { type: i2.PrySnackbarService }, { type: i2.PryI18nService }, { type: i2.TooltipFactoryService }, { type: i3.Overlay }, { type: i0.ViewContainerRef }, { type: i2.SymbolService }, { type: i0.Injector }, { type: WidgetMapLayerService }, { type: i0.ElementRef }, { type: WmsService }]; }, propDecorators: { mapRef: [{
                 type: ViewChild,
                 args: ['mapRef']
@@ -1831,7 +1923,8 @@ const enTranslations = {
                 legendNotProvided: 'Legend not provided by server',
                 selectLayers: 'Select layers',
                 legends: 'Display legend',
-                singleLayer: 'Single layer mode'
+                singleLayer: 'Single layer mode',
+                autoLayer: 'Automatic datasource layers configuration'
             }
         }
     }
@@ -1912,7 +2005,8 @@ const frTranslations = {
                 legendNotProvided: 'Légende non fournie par le serveur',
                 selectLayers: 'Sélectionner les couches',
                 legends: 'Afficher la légende',
-                singleLayer: 'Mode mono-couche'
+                singleLayer: 'Mode mono-couche',
+                autoLayer: 'Configuration automatique des sources de données'
             }
         }
     }
@@ -1981,5 +2075,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CqlUtils, DEFAULT_HEATMAP_RADIUS, DEFAULT_MAP_CENTER, DEFAULT_RADIUS_INTENSITY_FACTOR, DEFAULT_ZOOM_MAX, DEFAULT_ZOOM_MIN, DEFAULT_ZOOM_START, EMPTY_MAP_STYLE, GeometryFieldsForPipe, InteractionManager, PryWidgetMapCssComponent, SelectionInteraction, TOOLTIP_PADDING, WidgetMapComponent, WidgetMapLayerService, WidgetMapLegendUrlPipe, WidgetMapModule, WmsService, XMLUtils, exportMapAsImage, geometryForLayer, getCircleFeatureFromItem, getFeatureFromItem, getLinkFeature, getMapAsPng, populateIntensityAttribute, populateLocationAttribute };
+export { CqlUtils, DEFAULT_HEATMAP_RADIUS, DEFAULT_MAP_CENTER, DEFAULT_RADIUS_INTENSITY_FACTOR, DEFAULT_ZOOM_MAX, DEFAULT_ZOOM_MIN, DEFAULT_ZOOM_START, GeometryFieldsForPipe, InteractionManager, PryWidgetMapCssComponent, SelectionInteraction, TOOLTIP_PADDING, WidgetMapComponent, WidgetMapLayerService, WidgetMapLegendUrlPipe, WidgetMapModule, WmsService, XMLUtils, exportMapAsImage, geometryForLayer, getCircleFeatureFromItem, getFeatureFromItem, getLinkFeature, getMapAsPng, populateIntensityAttribute, populateLocationAttribute };
 //# sourceMappingURL=provoly-dashboard-widgets-widget-map.mjs.map