@provoly/dashboard 0.13.6 → 0.13.8

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

@@ -17,14 +17,13 @@ import { applyStyle, applyBackground } from 'ol-mapbox-style';
 import { getWidth, getTopLeft, createEmpty, boundingExtent } from 'ol/extent';
 import { Heatmap, Tile } from 'ol/layer';
 import VectorTileLayer from 'ol/layer/VectorTile';
-import { fromLonLat, toLonLat, get, transform } from 'ol/proj';
+import { toLonLat, fromLonLat, get, transform } from 'ol/proj';
 import { register } from 'ol/proj/proj4';
 import { Vector, TileWMS, WMTS, XYZ, Cluster } from 'ol/source';
 import proj4 from 'proj4';
 import { map, combineLatest, filter, catchError, throwError, of, BehaviorSubject, startWith, debounceTime, delay, mergeMap, from, distinctUntilChanged } from 'rxjs';
 import LayerSwitcher from 'ol-layerswitcher';
-import { Control, ScaleLine } from 'ol/control';
-import BaseEvent from 'ol/events/Event';
+import { ScaleLine } from 'ol/control';
 import { Polygon, GeometryCollection, Circle, MultiPolygon, MultiLineString, LineString, MultiPoint, Point } from 'ol/geom';
 import PointerInteraction from 'ol/interaction/Pointer';
 import TileLayer from 'ol/layer/Tile';
@@ -45,69 +44,6 @@ import WMTSTileGrid from 'ol/tilegrid/WMTS';
 import * as i1$1 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
 
-class AddressSearchedEvent extends BaseEvent {
-    // @ts-ignore
-    constructor({ type, coordinates, address, latLon, query }) {
-        super(type);
-        this.coordinates = coordinates;
-        this.address = address;
-        this.latLon = latLon;
-        this.query = query;
-    }
-}
-class SearchBarControl extends Control {
-    constructor(opt_options) {
-        const options = opt_options || {};
-        const button = document.createElement('button');
-        button.innerHTML = '<div></div>';
-        const element = document.createElement('div');
-        element.className = 'ol-searchbar ol-unselectable ol-control';
-        element.appendChild(button);
-        const input = document.createElement('input');
-        input.type = 'text';
-        input.placeholder = '1 rue de la Paix...';
-        input.style.display = 'none';
-        element.appendChild(input);
-        super({
-            element: element,
-            target: options.target
-        });
-        this.button = button;
-        button.addEventListener('click', this.toggleInputVisible.bind(this), false);
-        this.input = input;
-        input.addEventListener('keypress', this.keyPress.bind(this), false);
-    }
-    toggleInputVisible() {
-        if (this.inputVisible) {
-            this.input.style.display = 'none';
-        }
-        else {
-            this.input.style.display = 'block';
-        }
-    }
-    get inputVisible() {
-        return this.input.style.display === 'block';
-    }
-    keyPress(e) {
-        if (e.key === 'Enter') {
-            this.geocodingService?.fromAddress(this.input.value).subscribe((result) => {
-                this.getMap()?.dispatchEvent(new AddressSearchedEvent({
-                    type: 'searched-address',
-                    latLon: result.latLon,
-                    coordinates: fromLonLat(result.latLon.reverse(), this.getMap()?.getView().getProjection()),
-                    query: this.input.value,
-                    address: result.pointAddress
-                }));
-                this.toggleInputVisible();
-            });
-        }
-    }
-    withGeocodingService(geocodingService) {
-        this.geocodingService = geocodingService;
-        return this;
-    }
-}
-
 class SelectionInteraction extends PointerInteraction {
     constructor() {
         super({});
@@ -311,6 +247,7 @@ class InteractionManager {
                 if (wmsLayers) {
                     this.component.getFeatureFromServer(wmsLayers, event.coordinate);
                 }
+                this.tooltipEvent = event;
             }
         };
     }
@@ -319,7 +256,6 @@ class InteractionManager {
         this.addContextMenuInteraction();
         this.addDropInteraction();
         this.addOverlayOnInteraction();
-        this.addSearchBarControl();
         this.addLayerSwitcher();
         this.addScaleControl();
         this.addUpdateZoomAndCenter();
@@ -357,28 +293,10 @@ class InteractionManager {
             this.component.map.addControl(this.scaleControl);
         }
     }
-    addSearchBarControl() {
-        this.searchBarControl = new SearchBarControl({}).withGeocodingService(this.component.geocodingService);
-        this.component.map.addControl(this.searchBarControl);
-        const addressOverlay = new Overlay({
-            element: this.component.address.nativeElement,
-            offset: [9, 9]
-        });
-        this.component.map.addOverlay(addressOverlay);
-        // @ts-ignore
-        this.component.map.on('searched-address', (evt) => {
-            this.component.address.nativeElement.innerHTML = `<div>
-        <div>${this.component.translateService.instant('@pry.widget.map.address')}: ${evt.address}</div>
-        <div>${this.component.translateService.instant('@pry.widget.map.addressCoords')}: ${evt.latLon}</div>
-        </div>`;
-            this.component.address.nativeElement.style.display = '';
-            addressOverlay.setPosition(evt.coordinates);
-            this.component.map.getView().setCenter(evt.coordinates);
-            this.component.map.getView().setZoom(this.component.map.getView().getMaxZoom());
-        });
-    }
     addLayerSwitcher() {
         this.layerSwitchControl = new LayerSwitcher({
+            tipLabel: this.component.translateService.instant('@pry.widget.map.selectLayers'),
+            collapseTipLabel: this.component.translateService.instant('@pry.widget.map.selectLayers'),
             activationMode: 'click',
             reverse: false
         });
@@ -1261,13 +1179,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
 
+const TOOLTIP_PADDING = 15;
 class WidgetMapComponent extends DataWidgetComponent {
-    constructor(store, snackBar, translateService, tooltipFactoryService, geocodingService, overlay, viewContainerRef, symbolService, injector, widgetMapLayerService, el) {
+    constructor(store, snackBar, translateService, tooltipFactoryService, overlay, viewContainerRef, symbolService, injector, widgetMapLayerService, el) {
         super(store, el);
         this.snackBar = snackBar;
         this.translateService = translateService;
         this.tooltipFactoryService = tooltipFactoryService;
-        this.geocodingService = geocodingService;
         this.overlay = overlay;
         this.viewContainerRef = viewContainerRef;
         this.symbolService = symbolService;
@@ -1287,6 +1205,8 @@ class WidgetMapComponent extends DataWidgetComponent {
         this.imageNotProvided = [];
         this.zoomAndCenter$ = new BehaviorSubject({});
         this.interactionManager = new InteractionManager();
+        this.tooltipIndex = 0;
+        this.tooltipNumber = 0;
         this.basicActions$ = this.actions$.pipe(map((actions) => actions.filter((action) => action !== 'export' && action !== 'upload')));
         this.classes$ = this.store
             .select(ClassSelectors.classes)
@@ -1371,18 +1291,6 @@ class WidgetMapComponent extends DataWidgetComponent {
         this.subscriptions.add(this.options$.pipe(filter((opt) => !!opt)).subscribe((options) => {
             this.optionsCopy = JSON.parse(JSON.stringify(options));
         }));
-        this.subscriptions.add(this.store
-            .select(DashboardSelectors.address)
-            .pipe(filter((addr) => !!addr && !!addr.pointAddress))
-            .subscribe((addr) => {
-            this.map?.dispatchEvent(new AddressSearchedEvent({
-                type: 'searched-address',
-                latLon: addr.latLon,
-                coordinates: fromLonLat([...addr.latLon].reverse(), this.map.getView().getProjection()),
-                query: addr.latLon,
-                address: addr.pointAddress
-            }));
-        }));
         this.mapUrl$ = this.store.select(ConfigSelectors.mapUrl);
         this.wmsFeatures$ = this.store.select(DashboardSelectors.wmsFeatures);
         this.bottomLeft$ = this.widgetSize$.pipe(map((size) => `translate(10px ,calc(${size.height}px - 100% - 10px))`), delay(10));
@@ -1411,7 +1319,7 @@ class WidgetMapComponent extends DataWidgetComponent {
             }
         }));
         this.height$ = combineLatest([this.widgetSize$.pipe(debounceTime(100)), this.displayHeader$]).pipe(map(([size, display]) => (size.height ?? 100) - (display ? WIDGET_HEADER_HEIGHT : 0)), delay(10));
-        this.legendTop$ = this.displayHeader$.pipe(map((display) => 225 - (display ? 0 : WIDGET_HEADER_HEIGHT)));
+        this.legendTop$ = this.displayHeader$.pipe(map((display) => 181 - (display ? 0 : WIDGET_HEADER_HEIGHT)));
         this.legendHeight$ = combineLatest([this.widgetSize$.pipe(debounceTime(100)), this.legendTop$]).pipe(map(([size, top]) => {
             return (size.height ?? 100) - WIDGET_HEADER_HEIGHT - top - 56; // 56px is the tooltip height + margin
         }), delay(10));
@@ -1543,8 +1451,10 @@ class WidgetMapComponent extends DataWidgetComponent {
                 this.map.updateSize();
             }, 200);
         }));
-        this.subscriptions.add(combineLatest([this.wmsFeatures$, this.classicFeatures$]).subscribe(([wmsFeatures, classicFeatures]) => {
+        this.subscriptions.add(combineLatest([this.wmsFeatures$, this.classicFeatures$, this.widgetSize$, this.displayHeader$]).subscribe(([wmsFeatures, classicFeatures, size, header]) => {
             if (this.map) {
+                this.tooltipIndex = 0;
+                this.tooltipMove(0);
                 const popupOverlay = new Overlay({
                     element: this.popup.nativeElement,
                     offset: [9, 9]
@@ -1560,13 +1470,26 @@ class WidgetMapComponent extends DataWidgetComponent {
                 });
                 Promise.all(componentPromises).then((promises) => {
                     const realComponents = promises.filter((component) => !!component);
+                    this.tooltipNumber = realComponents.length;
                     if (realComponents.length <= 0) {
                         this.popup.nativeElement.hidden = true;
                         popupOverlay.setPosition([-9999999999, -9999999999]);
                     }
                     else {
                         this.popup.nativeElement.hidden = false;
-                        popupOverlay.setPosition(wmsFeatures.length > 0 ? wmsFeatures[0].coordinates : classicFeatures[0].coordinates);
+                        // Do not go outside the map
+                        const rect = {
+                            height: 200 + (header ? WIDGET_HEADER_HEIGHT : 0) + TOOLTIP_PADDING,
+                            width: 300 + TOOLTIP_PADDING
+                        };
+                        let pixel = this.interactionManager.tooltipEvent?.pixel;
+                        if (!!pixel && pixel[0] + rect.width > size.width) {
+                            pixel[0] = size.width - rect.width;
+                        }
+                        if (!!pixel && pixel[1] + rect.height > size.height) {
+                            pixel[1] = size.height - rect.height;
+                        }
+                        popupOverlay.setPosition(this.map.getCoordinateFromPixel(pixel ?? [0, 0]));
                     }
                 });
             }
@@ -1901,13 +1824,32 @@ class WidgetMapComponent extends DataWidgetComponent {
         this.legendTabOpen = !this.legendTabOpen;
         this.interactionManager.layerSwitchControl?.hidePanel();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetMapComponent, deps: [{ token: i1.Store }, { token: i2.PrySnackbarService }, { token: i2.PryI18nService }, { token: i2.TooltipFactoryService }, { token: i2.GeocodingService }, { token: i3.Overlay }, { token: i0.ViewContainerRef }, { token: i2.SymbolService }, { token: i0.Injector }, { token: WidgetMapLayerService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: WidgetMapComponent, selector: "pry-widget-map", viewQueries: [{ propertyName: "mapRef", first: true, predicate: ["map"], descendants: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true }, { propertyName: "popupContent", first: true, predicate: ["popupContent"], descendants: true, read: ViewContainerRef }, { propertyName: "exportTypeTemplate", first: true, predicate: ["exportTypeTemplate"], descendants: true, read: TemplateRef }, { propertyName: "address", first: true, predicate: ["address"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<pry-widget-map-css></pry-widget-map-css>\n<div class=\"o-widget o-widget--map\">\n  <pry-widget-header\n    [datasourceIds]=\"(datasourceIds$ | 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      <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)=\"displayExportType($event)\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only\"\n      (click)=\"uploader.click()\"\n      [pryTooltip]=\"infoTooltipLoad\"\n      aria-describedby=\"infoTooltipLoad_widgetMap\"\n      pryTooltipPosition=\"bottom\"\n      *ngIf=\"(actions$ | async)?.includes('upload')\"\n    >\n      <pry-icon iconSvg=\"file_upload\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.import' | i18n }}</span>\n    </button>\n    <input hidden type=\"file\" #uploader (change)=\"import($event)\" />\n  </div>\n\n  <div\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()\">\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 | 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 | 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 #map id=\"map\"></div>\n    </div>\n  </div>\n\n  <ng-template #infoTooltipAction let-action=\"action\">\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipAction\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.' + action | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <ng-template #infoTooltipDown>\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipDown_widgetMap\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <ng-template #infoTooltipLoad>\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipLoad_widgetMap\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.import' | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <div #popup class=\"m-tooltip m-tooltip--popup\" [hidden]=\"true\" role=\"tooltip\">\n    <div #popupContent></div>\n  </div>\n  <div\n    #address\n    class=\"m-tooltip m-tooltip--address tooltip-address\"\n    [style.display]=\"'none'\"\n    (click)=\"hideAddress()\"\n  ></div>\n  <ng-template\n    #exportTypeTemplate\n    class=\"m-context-menu-wrapper\"\n    id=\"export_type\"\n    aria-hidden=\"true\"\n    aria-label=\"TODO-access\"\n    aria-labelledby=\"export_card\"\n  >\n    <div class=\"m-context-menu\">\n      <ul class=\"m-context-menu__list\">\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('png')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> PNG\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('kml')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> KML\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('geoJSON')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> GeoJSON\n          </button>\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.SettingsComponent, selector: "pry-settings", inputs: ["widgetIndex", "isDisable", "headerPresent", "open$", "header"], outputs: ["saveTriggered", "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", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "component", type: i2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i7.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "directive", type: i2.PryTooltipDirective, selector: "[pryTooltip]", inputs: ["pryTooltip", "styleReversed", "pryTooltipContext", "pryTooltipPosition", "pryTooltipShowDelay"] }, { kind: "component", type: i2.PryRangeComponent, selector: "pry-range", inputs: ["min", "max", "step", "disabled", "labelTranslate"] }, { kind: "component", type: PryWidgetMapCssComponent, selector: "pry-widget-map-css" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }, { kind: "pipe", type: GeometryFieldsForPipe, name: "geometryFieldsFor" }, { kind: "pipe", type: WidgetMapLegendUrlPipe, name: "legendUrl" }] }); }
+    tooltipMove(number) {
+        if (this.tooltipCanMove(number)) {
+            this.setStyleAsync(this.tooltipIndex, 'none');
+            this.tooltipIndex = this.tooltipIndex + number;
+            this.setStyleAsync(this.tooltipIndex, 'block');
+        }
+    }
+    tooltipCanMove(number) {
+        return this.tooltipIndex + number >= 0 && this.tooltipIndex + number < this.tooltipNumber;
+    }
+    setStyleAsync(idx, value) {
+        setTimeout(() => {
+            const targetContainer = this.popupContent.get(idx);
+            if (targetContainer) {
+                // @ts-ignore
+                targetContainer.rootNodes[0].style.display = value;
+            }
+        }, 100);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetMapComponent, deps: [{ token: i1.Store }, { token: i2.PrySnackbarService }, { token: i2.PryI18nService }, { token: i2.TooltipFactoryService }, { token: i3.Overlay }, { token: i0.ViewContainerRef }, { token: i2.SymbolService }, { token: i0.Injector }, { token: WidgetMapLayerService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: WidgetMapComponent, selector: "pry-widget-map", viewQueries: [{ propertyName: "mapRef", first: true, predicate: ["map"], descendants: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true }, { propertyName: "popupContent", first: true, predicate: ["popupContent"], descendants: true, read: ViewContainerRef }, { propertyName: "exportTypeTemplate", first: true, predicate: ["exportTypeTemplate"], descendants: true, read: TemplateRef }, { propertyName: "address", first: true, predicate: ["address"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<pry-widget-map-css></pry-widget-map-css>\n<div class=\"o-widget o-widget--map\">\n  <pry-widget-header\n    [datasourceIds]=\"(datasourceIds$ | 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      <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                [closeOnSelect]=\"false\"\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)=\"displayExportType($event)\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only\"\n      (click)=\"uploader.click()\"\n      [pryTooltip]=\"infoTooltipLoad\"\n      aria-describedby=\"infoTooltipLoad_widgetMap\"\n      pryTooltipPosition=\"bottom\"\n      *ngIf=\"(actions$ | async)?.includes('upload')\"\n    >\n      <pry-icon iconSvg=\"file_upload\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.import' | i18n }}</span>\n    </button>\n    <input hidden type=\"file\" #uploader (change)=\"import($event)\" />\n  </div>\n\n  <div\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 | 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 | 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 #map id=\"map\"></div>\n    </div>\n  </div>\n\n  <ng-template #infoTooltipAction let-action=\"action\">\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipAction\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.' + action | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <ng-template #infoTooltipDown>\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipDown_widgetMap\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <ng-template #infoTooltipLoad>\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipLoad_widgetMap\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.import' | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <div #popup class=\"m-tooltip m-tooltip--popup\" [hidden]=\"true\" role=\"tooltip\">\n    <div 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  <ng-template\n    #exportTypeTemplate\n    class=\"m-context-menu-wrapper\"\n    id=\"export_type\"\n    aria-hidden=\"true\"\n    aria-label=\"TODO-access\"\n    aria-labelledby=\"export_card\"\n  >\n    <div class=\"m-context-menu\">\n      <ul class=\"m-context-menu__list\">\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('png')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> PNG\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('kml')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> KML\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('geoJSON')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> GeoJSON\n          </button>\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.SettingsComponent, selector: "pry-settings", inputs: ["widgetIndex", "isDisable", "headerPresent", "open$", "header"], outputs: ["saveTriggered", "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: i7.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "directive", type: i2.PryTooltipDirective, selector: "[pryTooltip]", inputs: ["pryTooltip", "styleReversed", "pryTooltipContext", "pryTooltipPosition", "pryTooltipShowDelay"] }, { kind: "component", type: i2.PryRangeComponent, selector: "pry-range", inputs: ["min", "max", "step", "disabled", "labelTranslate"] }, { kind: "component", type: PryWidgetMapCssComponent, selector: "pry-widget-map-css" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }, { kind: "pipe", type: GeometryFieldsForPipe, name: "geometryFieldsFor" }, { kind: "pipe", type: WidgetMapLegendUrlPipe, name: "legendUrl" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetMapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-widget-map', template: "<pry-widget-map-css></pry-widget-map-css>\n<div class=\"o-widget o-widget--map\">\n  <pry-widget-header\n    [datasourceIds]=\"(datasourceIds$ | 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      <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)=\"displayExportType($event)\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only\"\n      (click)=\"uploader.click()\"\n      [pryTooltip]=\"infoTooltipLoad\"\n      aria-describedby=\"infoTooltipLoad_widgetMap\"\n      pryTooltipPosition=\"bottom\"\n      *ngIf=\"(actions$ | async)?.includes('upload')\"\n    >\n      <pry-icon iconSvg=\"file_upload\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.import' | i18n }}</span>\n    </button>\n    <input hidden type=\"file\" #uploader (change)=\"import($event)\" />\n  </div>\n\n  <div\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()\">\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 | 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 | 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 #map id=\"map\"></div>\n    </div>\n  </div>\n\n  <ng-template #infoTooltipAction let-action=\"action\">\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipAction\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.' + action | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <ng-template #infoTooltipDown>\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipDown_widgetMap\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <ng-template #infoTooltipLoad>\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipLoad_widgetMap\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.import' | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <div #popup class=\"m-tooltip m-tooltip--popup\" [hidden]=\"true\" role=\"tooltip\">\n    <div #popupContent></div>\n  </div>\n  <div\n    #address\n    class=\"m-tooltip m-tooltip--address tooltip-address\"\n    [style.display]=\"'none'\"\n    (click)=\"hideAddress()\"\n  ></div>\n  <ng-template\n    #exportTypeTemplate\n    class=\"m-context-menu-wrapper\"\n    id=\"export_type\"\n    aria-hidden=\"true\"\n    aria-label=\"TODO-access\"\n    aria-labelledby=\"export_card\"\n  >\n    <div class=\"m-context-menu\">\n      <ul class=\"m-context-menu__list\">\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('png')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> PNG\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('kml')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> KML\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('geoJSON')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> GeoJSON\n          </button>\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.PrySnackbarService }, { type: i2.PryI18nService }, { type: i2.TooltipFactoryService }, { type: i2.GeocodingService }, { type: i3.Overlay }, { type: i0.ViewContainerRef }, { type: i2.SymbolService }, { type: i0.Injector }, { type: WidgetMapLayerService }, { type: i0.ElementRef }]; }, propDecorators: { mapRef: [{
+            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      <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                [closeOnSelect]=\"false\"\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)=\"displayExportType($event)\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only\"\n      (click)=\"uploader.click()\"\n      [pryTooltip]=\"infoTooltipLoad\"\n      aria-describedby=\"infoTooltipLoad_widgetMap\"\n      pryTooltipPosition=\"bottom\"\n      *ngIf=\"(actions$ | async)?.includes('upload')\"\n    >\n      <pry-icon iconSvg=\"file_upload\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.import' | i18n }}</span>\n    </button>\n    <input hidden type=\"file\" #uploader (change)=\"import($event)\" />\n  </div>\n\n  <div\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 | 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 | 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 #map id=\"map\"></div>\n    </div>\n  </div>\n\n  <ng-template #infoTooltipAction let-action=\"action\">\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipAction\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.' + action | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <ng-template #infoTooltipDown>\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipDown_widgetMap\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <ng-template #infoTooltipLoad>\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipLoad_widgetMap\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.import' | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <div #popup class=\"m-tooltip m-tooltip--popup\" [hidden]=\"true\" role=\"tooltip\">\n    <div 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  <ng-template\n    #exportTypeTemplate\n    class=\"m-context-menu-wrapper\"\n    id=\"export_type\"\n    aria-hidden=\"true\"\n    aria-label=\"TODO-access\"\n    aria-labelledby=\"export_card\"\n  >\n    <div class=\"m-context-menu\">\n      <ul class=\"m-context-menu__list\">\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('png')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> PNG\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('kml')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> KML\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('geoJSON')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> GeoJSON\n          </button>\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.PrySnackbarService }, { type: i2.PryI18nService }, { type: i2.TooltipFactoryService }, { type: i3.Overlay }, { type: i0.ViewContainerRef }, { type: i2.SymbolService }, { type: i0.Injector }, { type: WidgetMapLayerService }, { type: i0.ElementRef }]; }, propDecorators: { mapRef: [{
                 type: ViewChild,
                 args: ['map']
             }], popup: [{
@@ -1999,7 +1941,9 @@ const enTranslations = {
                 export: 'Export map',
                 import: 'Import layer',
                 legend: 'Legend of layer {{layer}}',
-                legendNotProvided: 'Legend not provided by server'
+                legendNotProvided: 'Legend not provided by server',
+                selectLayers: 'Select layers',
+                legends: 'Display legend'
             }
         }
     }
@@ -2080,7 +2024,9 @@ const frTranslations = {
                 export: 'Exporter la carte',
                 import: 'Importer une couche',
                 legend: 'Légende de la couche {{layer}}',
-                legendNotProvided: 'Légende non fournie par le serveur'
+                legendNotProvided: 'Légende non fournie par le serveur',
+                selectLayers: 'Sélectionner les couches',
+                legends: 'Afficher la légende'
             }
         }
     }
@@ -2149,5 +2095,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_HEATMAP_RADIUS, DEFAULT_MAP_CENTER, DEFAULT_RADIUS_INTENSITY_FACTOR, DEFAULT_ZOOM_MAX, DEFAULT_ZOOM_MIN, DEFAULT_ZOOM_START, EMPTY_MAP_STYLE, GeometryFieldsForPipe, InteractionManager, PryWidgetMapCssComponent, SelectionInteraction, WidgetMapComponent, WidgetMapLayerService, WidgetMapLegendUrlPipe, WidgetMapModule, exportMapAsGeoJSON, exportMapAsImage, exportMapAsKML, geometryForLayer, getCircleFeatureFromItem, getFeatureFromItem, getLinkFeature, getMapAsPng, populateIntensityAttribute, populateLocationAttribute };
+export { 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, exportMapAsGeoJSON, exportMapAsImage, exportMapAsKML, geometryForLayer, getCircleFeatureFromItem, getFeatureFromItem, getLinkFeature, getMapAsPng, populateIntensityAttribute, populateLocationAttribute };
 //# sourceMappingURL=provoly-dashboard-widgets-widget-map.mjs.map