adb-shared 6.2.20 → 6.2.21

package/fesm2022/adb-shared-src-map.mjs

@@ -0,0 +1,824 @@
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { forwardRef, Component, InjectionToken, Inject, Injectable, Input, signal, effect, NgModule } from '@angular/core';
+import * as i4 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormControl, FormGroup, FormArray, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as Leaflet from 'leaflet';
+import Leaflet__default from 'leaflet';
+import '@geoman-io/leaflet-geoman-free';
+import { Subscription, combineLatest, map, debounceTime } from 'rxjs';
+import * as i3 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import { finalize } from 'rxjs/operators';
+import * as i3$1 from '@angular/common/http';
+import * as i5 from 'adb-shared';
+import { AdbDatePickerModule, AdbPipesModule, AdbFilterSectionModule, AdbPickerModule } from 'adb-shared';
+import { addYears, startOfYear, endOfYear, startOfDay, endOfDay, parseISO } from 'date-fns';
+
+class AdbMapUtils {
+    static INITIAL_CENTER_LAT = 62;
+    static INITIAL_CENTER_LNG = 17;
+    static OverlayMaps = {
+        'Altitude': new Leaflet.TileLayer.WMS("https://maps.sgu.se/lmv/hojdmodell/v1.1?SERVICE=WMS", { layers: "terrangskuggning", format: "image/png", transparent: true, opacity: 0.3, maxZoom: 16, version: "1.3.0" }),
+        'Fjällkarta': new Leaflet.TileLayer.WMS('api/maps/mountain', {
+            minZoom: 6,
+            maxZoom: 18,
+            maxNativeZoom: 14,
+            attribution: '© <a href="https://www.lantmateriet.se/">Fjällkart</a>',
+            wms: true
+        }),
+        'Kommuner': new Leaflet.TileLayer.WMS('https://sosgeo.artdata.slu.se/geoserver/GeoRegion/wms?', {
+            layers: 'GeoRegion:Municipality',
+            version: '1.1.0',
+            transparent: true,
+            format: 'image/png'
+        }),
+        'Län': new Leaflet.TileLayer.WMS('https://sosgeo.artdata.slu.se/geoserver/GeoRegion/wms?', {
+            layers: 'GeoRegion:County',
+            version: '1.1.0',
+            transparent: true,
+            format: 'image/png'
+        }),
+        'Ortnamn': new Leaflet.TileLayer.WMS("https://maps.sgu.se/lmv/topowebb-skikt/v1.1?SERVICE=WMS", {
+            layers: "text",
+            format: "image/png",
+            transparent: true,
+            version: "1.3.0",
+        }),
+        'Ekonomisk zon': new Leaflet.TileLayer.WMS("https://sosgeo.artdata.slu.se/geoserver/it.geosolutions/wms?", {
+            layers: "it.geosolutions:Ekonomiska_zonens_yttre_avgränsningslinjer_linje",
+            format: "image/png",
+            transparent: true,
+            version: "1.1.0"
+        })
+    };
+    static Providers = [
+        {
+            name: 'Open Streetmap',
+            id: 3,
+            url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+            minZoom: 0,
+            maxZoom: 18,
+            params: {
+                maxNativeZoom: 18,
+                attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            },
+            wms: false
+        },
+        {
+            name: 'Sveriges gränser',
+            id: 7,
+            url: 'https://sosgeo.artdata.slu.se/geoserver/it.geosolutions/wms',
+            minZoom: 6,
+            maxZoom: 18,
+            params: {
+                maxNativeZoom: 14,
+                attribution: '© <a href="https://www.lantmateriet.se/">Sveriges gränser</a>',
+                layers: 'it.geosolutions:Sverige_epsg5845', styles: 'municipality_name_yellow',
+                epsg: 5845
+            },
+            wms: true
+        }
+    ];
+    //NOTE: Will be move
+    static redListMapper2 = {
+        'VU': '228',
+        'EN': '229',
+        'CR': '230',
+        'RE': '231',
+        'DD': '232',
+        'NT': '233'
+    };
+    static createMap(elementId, options = {}) {
+        const map = Leaflet.map(elementId, {
+            zoomAnimation: false,
+            fadeAnimation: false,
+            markerZoomAnimation: false,
+            inertia: false,
+            scrollWheelZoom: options.scrollZoom ?? true,
+            zoomControl: options.zoom ?? true,
+            dragging: options.zoom ?? true,
+            minZoom: -1
+        });
+        map.setView([62, 17], 5);
+        Leaflet.control.scale().addTo(map);
+        if (options.providers !== false) {
+            this.addProviders(map);
+        }
+        return map;
+    }
+    static addProviders(map) {
+        const backgroundMaps = {};
+        for (const value of Object.values(AdbMapUtils.Providers)) {
+            backgroundMaps[value.name] = value.wms
+                ? Leaflet.tileLayer.wms(value.url, value.params)
+                : Leaflet.tileLayer(value.url, value.params);
+        }
+        if (backgroundMaps['Open Streetmap']) {
+            map.addLayer(backgroundMaps['Open Streetmap']);
+        }
+        Leaflet.control.layers(backgroundMaps, AdbMapUtils.OverlayMaps).addTo(map);
+    }
+}
+
+class PolygonDrawerInput {
+    subscriptions = new Subscription();
+    mapId = "" + Math.floor(Math.random() * Date.now());
+    map;
+    polygonDraw = false;
+    shapeLayer = null;
+    geoJson;
+    ngAfterViewInit() {
+        this.map = AdbMapUtils.createMap(this.mapId, {
+            zoom: true,
+            scrollZoom: true,
+            providers: true
+        });
+        this.map.whenReady(() => {
+            this.initDraw();
+            this.renderInitialShape();
+        });
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    initDraw() {
+        this.map.pm.removeControls();
+        this.map.pm.enableDraw('Polygon', {
+            tooltips: false,
+            finishOn: 'snap',
+            snapDistance: 30,
+            snapMiddle: false
+        });
+        this.map.on("pm:create", (e) => {
+            if (e.shape !== "Polygon")
+                return;
+            this.polygonDraw = false;
+            this.map.pm.disableDraw();
+            this.clearShape();
+            this.shapeLayer = Leaflet__default.geoJSON(e.layer.toGeoJSON(), {
+                interactive: false
+            });
+            this.map.addLayer(this.shapeLayer);
+            this.map.fitBounds(this.shapeLayer.getBounds());
+            this.onChange(e.layer.toGeoJSON());
+            this.map.removeLayer(e.layer);
+        });
+    }
+    renderInitialShape() {
+        if (this.geoJson?.type === "Feature") {
+            this.shapeLayer = Leaflet__default.geoJSON(this.geoJson, {
+                interactive: false
+            });
+            this.map.addLayer(this.shapeLayer);
+            this.map.fitBounds(this.shapeLayer.getBounds());
+        }
+        else {
+            this.map.setView([AdbMapUtils.INITIAL_CENTER_LAT, AdbMapUtils.INITIAL_CENTER_LNG], 5);
+        }
+    }
+    clearShape() {
+        if (this.shapeLayer) {
+            this.map.removeLayer(this.shapeLayer);
+            this.shapeLayer = null;
+        }
+    }
+    onDrawPolygon() {
+        this.polygonDraw = true;
+        this.map.pm.enableDraw("Polygon", {
+            allowSelfIntersection: false,
+            snappable: false
+        });
+    }
+    onUndoStep() {
+        const draw = this.map.pm.Draw?.Polygon;
+        draw?._removeLastVertex();
+    }
+    onDeleteShape() {
+        this.clearShape();
+        this.map.pm.disableDraw();
+        this.polygonDraw = false;
+        this.onChange(null);
+        this.map.setView([62, 17], 5);
+    }
+    // ControlValueAccessor
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(geoJson) {
+        this.geoJson = geoJson;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PolygonDrawerInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PolygonDrawerInput, isStandalone: false, selector: "adb-polygon-drawer", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PolygonDrawerInput),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div class=\"mb-1 d-flex gap-1 flex-wrap align-items-start\">\r\n  <button class=\"btn btn-secondary\" type=\"button\" (click)=\"onDrawPolygon()\" title=\"Polygon\">\r\n    <span class=\"fas fa-draw-polygon\"></span> {{'OBSERVATION.DRAW'|translate}}\r\n  </button>\r\n  @if (polygonDraw) {\r\n  <button class=\"btn btn-secondary\" type=\"button\" (click)=\"onDeleteShape()\" title=\"Ta bort\">\r\n    <span class=\"fas fa-times\"></span>\r\n  </button>\r\n  <button class=\"btn btn-secondary\" type=\"button\" (click)=\"onUndoStep()\" title=\"\u00C5ngra\">\r\n    <span class=\"fas fa-undo\"></span>\r\n  </button>\r\n  }\r\n</div>\r\n<div [id]=\"mapId\" class=\"border\" style=\"height:20rem\"></div>", dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PolygonDrawerInput, decorators: [{
+            type: Component,
+            args: [{ selector: "adb-polygon-drawer", standalone: false, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PolygonDrawerInput),
+                            multi: true
+                        }
+                    ], template: "<div class=\"mb-1 d-flex gap-1 flex-wrap align-items-start\">\r\n  <button class=\"btn btn-secondary\" type=\"button\" (click)=\"onDrawPolygon()\" title=\"Polygon\">\r\n    <span class=\"fas fa-draw-polygon\"></span> {{'OBSERVATION.DRAW'|translate}}\r\n  </button>\r\n  @if (polygonDraw) {\r\n  <button class=\"btn btn-secondary\" type=\"button\" (click)=\"onDeleteShape()\" title=\"Ta bort\">\r\n    <span class=\"fas fa-times\"></span>\r\n  </button>\r\n  <button class=\"btn btn-secondary\" type=\"button\" (click)=\"onUndoStep()\" title=\"\u00C5ngra\">\r\n    <span class=\"fas fa-undo\"></span>\r\n  </button>\r\n  }\r\n</div>\r\n<div [id]=\"mapId\" class=\"border\" style=\"height:20rem\"></div>" }]
+        }] });
+
+var AdbMapFilterType;
+(function (AdbMapFilterType) {
+    AdbMapFilterType["Taxon"] = "taxon";
+    AdbMapFilterType["Area"] = "area";
+    AdbMapFilterType["OwnArea"] = "ownArea";
+    AdbMapFilterType["Time"] = "time";
+    AdbMapFilterType["RedList"] = "redlist";
+    AdbMapFilterType["RiskList"] = "risklist";
+    AdbMapFilterType["TaxaLists"] = "taxonLists";
+    AdbMapFilterType["Datasources"] = "datasources";
+})(AdbMapFilterType || (AdbMapFilterType = {}));
+class VisibleFilters {
+    showTaxon;
+    showTime;
+    showArea;
+    showOwnArea;
+    showTaxaLists;
+    showDatasets;
+}
+const ADB_MAP_CONFIG = new InjectionToken('ADB_MAP_CONFIG');
+class AdbMapConfigService {
+    log;
+    artfaktaTaxonLists;
+    observationFeatures;
+    taxaListsApi;
+    filters;
+    observationPage;
+    constructor(config) {
+        this.log = config.log ?? false;
+        this.artfaktaTaxonLists = config.artfaktaTaxonLists ?? 'https://artfakta.se/metadata/listor';
+        this.taxaListsApi = config.api + '/taxalists';
+        this.observationFeatures = config.api + '/observation-features';
+        this.observationPage = config.observationPage ?? 'https://mobil.artportalen.se/observationer';
+        this.filters = {
+            showTaxon: this.hasFilter(AdbMapFilterType.Taxon, config.filters),
+            showTime: this.hasFilter(AdbMapFilterType.Time, config.filters),
+            showArea: this.hasFilter(AdbMapFilterType.Area, config.filters),
+            showOwnArea: this.hasFilter(AdbMapFilterType.OwnArea, config.filters),
+            showTaxaLists: this.hasFilter(AdbMapFilterType.TaxaLists, config.filters),
+            showDatasets: this.hasFilter(AdbMapFilterType.Datasources, config.filters),
+        };
+    }
+    hasFilter(f, filters) {
+        return filters?.includes(f) ?? true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdbMapConfigService, deps: [{ token: ADB_MAP_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdbMapConfigService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdbMapConfigService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ADB_MAP_CONFIG]
+                }] }] });
+
+class TreeviewComponent {
+    nodes = [];
+    selectedIds = [];
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(ids) {
+        this.selectedIds = ids ?? [];
+        this.applySelection(this.nodes);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.setReadOnly(this.nodes, isDisabled);
+    }
+    onLeafToggle(node) {
+        if (node._readOnly)
+            return;
+        node._selected = !node._selected;
+        this.selectedIds = TreeviewComponent.collectSelectedLeafIds(this.nodes);
+        this.onChange(this.selectedIds);
+        this.onTouched();
+    }
+    applySelection(nodes) {
+        for (const node of nodes) {
+            if (node.children?.length) {
+                this.applySelection(node.children);
+            }
+            else {
+                node._selected = this.selectedIds.includes(node.id);
+            }
+        }
+    }
+    setReadOnly(nodes, readOnly) {
+        for (const node of nodes) {
+            node._readOnly = readOnly;
+            if (node.children?.length) {
+                this.setReadOnly(node.children, readOnly);
+            }
+        }
+    }
+    static collectSelectedLeafIds(nodes) {
+        const ids = [];
+        for (const node of nodes) {
+            if (node.children?.length) {
+                ids.push(...this.collectSelectedLeafIds(node.children));
+            }
+            else if (node._selected) {
+                ids.push(node.id);
+            }
+        }
+        return ids;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TreeviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TreeviewComponent, isStandalone: false, selector: "app-treeview", inputs: { nodes: "nodes" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TreeviewComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"nodeTpl; context: { $implicit: nodes }\">\r\n</ng-container>\r\n<ng-template #nodeTpl let-nodes>\r\n  @for (node of nodes; track node) {\r\n    <div class=\"ms-3\">\r\n      @if(!node.children || node.children.length === 0){\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <input id=\"{{node.id}}\" type=\"checkbox\" class=\"form-check-input m-0\" [checked]=\"node._selected\" [disabled]=\"node._readOnly\" (change)=\"onLeafToggle(node)\" />\r\n          <label for=\"{{node.id}}\">{{ node.name }}</label>\r\n        </div>\r\n      }\r\n      @else {\r\n      {{ node.name }}\r\n      <div>\r\n        <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $implicit: node.children }\">\r\n        </ng-container>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n</ng-template>", dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TreeviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-treeview', standalone: false, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TreeviewComponent),
+                            multi: true
+                        }
+                    ], template: "<ng-container *ngTemplateOutlet=\"nodeTpl; context: { $implicit: nodes }\">\r\n</ng-container>\r\n<ng-template #nodeTpl let-nodes>\r\n  @for (node of nodes; track node) {\r\n    <div class=\"ms-3\">\r\n      @if(!node.children || node.children.length === 0){\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <input id=\"{{node.id}}\" type=\"checkbox\" class=\"form-check-input m-0\" [checked]=\"node._selected\" [disabled]=\"node._readOnly\" (change)=\"onLeafToggle(node)\" />\r\n          <label for=\"{{node.id}}\">{{ node.name }}</label>\r\n        </div>\r\n      }\r\n      @else {\r\n      {{ node.name }}\r\n      <div>\r\n        <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $implicit: node.children }\">\r\n        </ng-container>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n</ng-template>" }]
+        }], propDecorators: { nodes: [{
+                type: Input
+            }] } });
+
+class AdbObsMapComponent {
+    activatedRoute;
+    config;
+    router;
+    http;
+    subscriptions = new Subscription();
+    error;
+    mapLoading = signal(false, ...(ngDevMode ? [{ debugName: "mapLoading" }] : []));
+    siteLayer;
+    hasBox;
+    count;
+    mapId = '' + Math.floor(Math.random() * Date.now());
+    map = Leaflet.map;
+    //Lock start
+    mapReady = signal(false, ...(ngDevMode ? [{ debugName: "mapReady" }] : []));
+    hasQueryParams = false;
+    hasUrlParams = false;
+    queryParams;
+    urlParams;
+    //Lock end
+    constructor(activatedRoute, config, router, http) {
+        this.activatedRoute = activatedRoute;
+        this.config = config;
+        this.router = router;
+        this.http = http;
+        effect(() => {
+            // This will re-run whenever mapReady() changes
+            if (this.mapReady() && this.hasQueryParams && this.hasUrlParams) {
+                this.tryLoad();
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.map = AdbMapUtils.createMap(this.mapId, {
+            zoom: true,
+            scrollZoom: false,
+            providers: true
+        });
+        this.map.whenReady(() => {
+            this.mapReady.set(true);
+        });
+    }
+    // Loads data only after:
+    // - the Leaflet map is ready
+    // - Angular has emitted query params (may be empty)
+    // - Angular has emitted route params (may be empty)
+    tryLoad() {
+        if (!this.mapReady() || !this.hasQueryParams || !this.hasUrlParams) {
+            return;
+        }
+        const params = { ...this.queryParams };
+        this.hasBox = params['bbox'] ? true : false;
+        if (this.urlParams.has('taxonId')) {
+            params['taxonId'] = this.urlParams.get('taxonId');
+        }
+        this.loadFeature(params);
+    }
+    ngOnInit() {
+        this.subscriptions.add(this.activatedRoute.queryParams.subscribe(q => {
+            this.queryParams = q ?? {};
+            this.hasQueryParams = true;
+            this.tryLoad();
+        }));
+        this.subscriptions.add(this.activatedRoute.paramMap.subscribe(p => {
+            this.urlParams = p;
+            this.hasUrlParams = true;
+            this.tryLoad();
+        }));
+    }
+    loadFeature(qParams) {
+        this.mapLoading.set(true);
+        this.error = null;
+        const url = this.config.observationFeatures;
+        this.subscriptions.add(this.http.get(url, { observe: 'response', params: qParams }).
+            pipe(finalize(() => {
+            this.mapLoading.set(false);
+        })).
+            subscribe({
+            next: (response) => {
+                if (!response.body) {
+                    throw new Error('No GeoJson body');
+                }
+                const geo = response.body;
+                geo.properties = { count: response.headers.get('X-Observations-TotalCount') };
+                this.buildMap(geo);
+            }, error: err => {
+                this.error = err;
+            }
+        }));
+    }
+    buildMap(geojson) {
+        if (this.siteLayer) {
+            this.map.removeLayer(this.siteLayer);
+        }
+        this.count = geojson?.properties?.count;
+        this.siteLayer = Leaflet.geoJson(geojson, {
+            style: (feature) => {
+                return {
+                    className: `svg ${this.getPolygonClassName(feature.properties)}`, // Leaflet applies this class to the SVG path
+                    weight: 1,
+                    fillOpacity: 0.8,
+                };
+            },
+            pointToLayer: (feature, latlng) => {
+                const marker = Leaflet.marker(latlng, {
+                    icon: Leaflet.divIcon({
+                        className: '',
+                        html: '<div class="adb-map-marker"></div>',
+                        iconAnchor: [3, 3]
+                    })
+                });
+                // if (feature.properties && feature.properties['Occurrence.OccurrenceId']) {
+                //     marker.on('click', () => {
+                //         window.location.href = this.config.observationPage + '/' + feature.properties['Occurrence.OccurrenceId'];
+                //     });
+                // }
+                return marker;
+            }, onEachFeature: (feature, layer) => {
+                if (feature.geometry.type === "Polygon" ||
+                    feature.geometry.type === "MultiPolygon") {
+                    layer.setStyle({ interactive: false });
+                    // if (feature.properties.ObservationsCount > 0) {
+                    //     layer.on('click', () => {
+                    //         const boundBox = JSON.stringify(this.getMapBoundsToBbox(layer.getBounds()));
+                    //         this.router.navigate([], { queryParams: { bbox: boundBox }, queryParamsHandling: 'merge' });
+                    //     });
+                    //     layer.on('mouseover', () => {
+                    //         layer.setStyle({ className: 'svg cursor-pointer' });
+                    //     });
+                    //     layer.on('mouseout', () => {
+                    //         layer.setStyle({ className: 'svg' });
+                    //     });
+                    // }
+                    // if (feature.properties.FeatureType) { //area
+                    //     layer.setStyle({ interactive: false });
+                    // }
+                }
+            }
+        });
+        const circleLayer = Leaflet.featureGroup();
+        circleLayer.addTo(this.siteLayer);
+        this.map.addLayer(this.siteLayer);
+        if (geojson.bbox) {
+            const [minLon, minLat, maxLon, maxLat] = geojson.bbox;
+            const bounds = Leaflet.latLngBounds([[minLat, minLon], [maxLat, maxLon]]);
+            if (bounds.isValid()) {
+                // Safari sometimes needs extra time after layer adds
+                setTimeout(() => {
+                    this.map.invalidateSize({ animate: false });
+                    this.map.fitBounds(bounds, { animate: false });
+                }, 50); // 30–50ms works best in Safari
+            }
+        }
+    }
+    getPolygonClassName(props) {
+        if (props.FeatureType) {
+            return 'map-area';
+        }
+        if (props.ObservationsCount < 10)
+            return 'map-heat-low';
+        if (props.ObservationsCount < 500)
+            return 'map-heat-small';
+        return 'map-heat-high';
+    }
+    getMapBoundsToBbox(bounds) {
+        return [bounds.getNorthWest().lat, bounds.getNorthWest().lng, bounds.getSouthEast().lat, bounds.getSouthEast().lng];
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdbObsMapComponent, deps: [{ token: i3.ActivatedRoute }, { token: AdbMapConfigService }, { token: i3.Router }, { token: i3$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AdbObsMapComponent, isStandalone: false, selector: "adb-obs-map", ngImport: i0, template: "<!-- @if(hasBox&&!mapLoading()){\r\n<div class=\"mb-1 d-flex justify-content-between flex-wrap\">\r\n  <a [routerLink]=\"[]\" [queryParams]=\"{bbox:null,z:null}\" queryParamsHandling=\"merge\" class=\"d-flex gap-1 align-items-baseline\">\r\n    <span class=\"fas fa-chevron-left\"></span>\r\n    Tillbaka upp\r\n  </a>\r\n</div>\r\n} -->\r\n@if(error){\r\n<div class=\"alert alert-danger\">\r\n  {{'ERROR.SERVER_ERROR'|translate}}\r\n</div>\r\n}\r\n<div [class.loading]=\"mapLoading()\">\r\n  <div [id]=\"mapId\" class=\"mb-1 map-container\"></div>\r\n</div>\r\n<div class=\"mb-1 d-flex gap-3 justify-content-between flex-wrap\">\r\n  @if (!mapLoading()&&count) {\r\n  <div class=\"d-flex align-items-center gap-1\">\r\n    <div class=\"legend map-heat-low\"></div>\r\n    &lt;10\r\n  </div>\r\n  <div class=\"d-flex align-items-center gap-1\">\r\n    <div class=\"legend map-heat-medium\"></div>\r\n    10 - 500\r\n  </div>\r\n  <div class=\"d-flex align-items-center gap-1\">\r\n    <div class=\"legend map-heat-high\"></div>\r\n    &gt;500\r\n  </div>\r\n  <div class=\"ms-auto\">\r\n    {{count|adbSpacing}} {{'OBSERVATION.OBSERVATIONS'|translate}}\r\n  </div>\r\n  }\r\n</div>", dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i5.NumberSpacingPipe, name: "adbSpacing" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdbObsMapComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'adb-obs-map', standalone: false, template: "<!-- @if(hasBox&&!mapLoading()){\r\n<div class=\"mb-1 d-flex justify-content-between flex-wrap\">\r\n  <a [routerLink]=\"[]\" [queryParams]=\"{bbox:null,z:null}\" queryParamsHandling=\"merge\" class=\"d-flex gap-1 align-items-baseline\">\r\n    <span class=\"fas fa-chevron-left\"></span>\r\n    Tillbaka upp\r\n  </a>\r\n</div>\r\n} -->\r\n@if(error){\r\n<div class=\"alert alert-danger\">\r\n  {{'ERROR.SERVER_ERROR'|translate}}\r\n</div>\r\n}\r\n<div [class.loading]=\"mapLoading()\">\r\n  <div [id]=\"mapId\" class=\"mb-1 map-container\"></div>\r\n</div>\r\n<div class=\"mb-1 d-flex gap-3 justify-content-between flex-wrap\">\r\n  @if (!mapLoading()&&count) {\r\n  <div class=\"d-flex align-items-center gap-1\">\r\n    <div class=\"legend map-heat-low\"></div>\r\n    &lt;10\r\n  </div>\r\n  <div class=\"d-flex align-items-center gap-1\">\r\n    <div class=\"legend map-heat-medium\"></div>\r\n    10 - 500\r\n  </div>\r\n  <div class=\"d-flex align-items-center gap-1\">\r\n    <div class=\"legend map-heat-high\"></div>\r\n    &gt;500\r\n  </div>\r\n  <div class=\"ms-auto\">\r\n    {{count|adbSpacing}} {{'OBSERVATION.OBSERVATIONS'|translate}}\r\n  </div>\r\n  }\r\n</div>" }]
+        }], ctorParameters: () => [{ type: i3.ActivatedRoute }, { type: AdbMapConfigService }, { type: i3.Router }, { type: i3$1.HttpClient }] });
+
+const DateTypes = {
+    THIS_YEAR: '1',
+    LAST_YEAR: '2',
+    ALL_YEAR: '3',
+    LAST_5_YEAR: '4',
+    LAST_25_YEAR: '5',
+    CUSTOM: '6',
+};
+
+class AdbMapFilters {
+    cdr;
+    config;
+    http;
+    router;
+    activatedRoute;
+    inline = false;
+    static datasets = ['1', '3', '5', '6', '4', '8'];
+    subscriptions = new Subscription();
+    form;
+    thisYear = new Date();
+    lastYear = addYears(new Date(), -1);
+    queryParamsMap;
+    hasOwnArea;
+    geo;
+    area;
+    areasArray;
+    dataSetCount;
+    taxonListCount;
+    riskListCount;
+    redListCount;
+    areaCount;
+    periodCount;
+    listsError;
+    filters;
+    taxaLists;
+    hasTaxonInUrlParameter;
+    dsControls;
+    dateStartConfig;
+    dateEndConfig;
+    artfakta;
+    constructor(cdr, config, http, router, activatedRoute) {
+        this.cdr = cdr;
+        this.config = config;
+        this.http = http;
+        this.router = router;
+        this.activatedRoute = activatedRoute;
+        this.filters = config.filters;
+        this.artfakta = this.config.artfaktaTaxonLists;
+    }
+    ngOnInit() {
+        const lists$ = this.http.get(this.config.taxaListsApi, { params: { limit: -1 } });
+        const combined$ = combineLatest([this.activatedRoute.paramMap, this.activatedRoute.queryParamMap, lists$])
+            .pipe(map(results => ({ params: results[0], qParams: results[1], lists: results[2] })), debounceTime(0));
+        this.subscriptions.add(combined$.subscribe(result => {
+            this.form = this.createForm(result.params, result.qParams, result.lists);
+            this.cdr.markForCheck();
+        }));
+    }
+    removeArea(index) {
+        this.form.get('areas').removeAt(index);
+        this.form.markAsDirty();
+    }
+    addArea() {
+        const areas = this.form.get('areas');
+        areas.push(new FormControl(null));
+        this.form.updateValueAndValidity();
+        this.form.markAsDirty();
+    }
+    onSubmit() {
+        const data = this.form.value;
+        let params = {};
+        params.p = data.period ?? null;
+        if (data.period === DateTypes.THIS_YEAR) {
+            params.startAt = startOfYear(this.thisYear).toISOString();
+            params.endAt = null;
+        }
+        else if (data.period === DateTypes.LAST_YEAR) {
+            params.startAt = startOfYear(this.lastYear).toISOString();
+            params.endAt = endOfYear(this.lastYear).toISOString();
+        }
+        else if (data.period === DateTypes.ALL_YEAR) {
+            params.startAt = null;
+            params.endAt = null;
+            params.p = null;
+        }
+        else if (data.period === DateTypes.LAST_5_YEAR) {
+            params.startAt = startOfYear(addYears(new Date(), -5)).toISOString();
+            params.endAt = null;
+        }
+        else if (data.period === DateTypes.LAST_25_YEAR) {
+            params.startAt = startOfYear(addYears(new Date(), -25)).toISOString();
+            params.endAt = null;
+        }
+        else if (data.period === DateTypes.CUSTOM) {
+            params.startAt = startOfDay(data.startAt).toISOString();
+            params.endAt = endOfDay(data.endAt).toISOString();
+        }
+        if (this.hasOwnArea && data.geo) {
+            params.geo = JSON.stringify(data.geo.geometry?.coordinates[0]);
+        }
+        const cleaned = data.areas?.filter(v => v != null && v !== '');
+        if (cleaned.length > 0) {
+            params.area = cleaned;
+        }
+        if (this.activatedRoute.snapshot.paramMap.has('taxonId')) {
+            params.taxonId = this.activatedRoute.snapshot.paramMap.get('taxonId');
+        }
+        else {
+            params.taxonId = data.taxonId ?? null;
+        }
+        if (data.list?.length > 0) {
+            params.list = data.list;
+        }
+        if (data.ds?.length > 0) {
+            const selected = data.ds.filter(f => f.selected).map(m => m.id);
+            params.ds = selected.length ? selected : null;
+        }
+        this.router.navigate([], { queryParams: params, relativeTo: this.activatedRoute });
+    }
+    createForm(params, qMap, lists) {
+        this.hasTaxonInUrlParameter = params['taxonId'];
+        this.hasOwnArea = qMap.has('geo') && this.filters.showOwnArea;
+        const areas = qMap.getAll('area').filter(a => a != null && a.trim() !== '' && a.includes('-'));
+        const form = new FormGroup({
+            period: new FormControl(qMap.has('p') ? qMap.get('p') : '3'),
+            areas: new FormArray((Array.isArray(areas) && areas.length ? areas : [null]).map(a => new FormControl(a))),
+            geo: new FormControl(qMap.has('geo') ? {
+                type: 'Feature',
+                geometry: { type: 'Polygon', coordinates: [JSON.parse(qMap.get('geo'))] }
+            } : null)
+        });
+        this.areasArray = form.get('areas');
+        this.periodCount = qMap.has('p') && qMap.get('p') !== '3' ? 1 : 0;
+        this.areaCount = areas?.length;
+        if (!this.hasTaxonInUrlParameter) {
+            form.addControl('taxonId', new FormControl(qMap.get('taxonId') ?? null));
+            const selectedTaxonList = qMap.has('list') ? qMap.getAll('list').map(val => Number(val)).filter(val => !isNaN(val)) : null;
+            this.taxaLists = lists;
+            this.taxonListCount = selectedTaxonList?.length;
+            form.addControl('list', new FormControl(selectedTaxonList));
+            let datasets = qMap.has('ds') ? (Array.isArray(qMap.getAll('ds')) ? qMap.getAll('ds') : [qMap.get('ds')]) : null;
+            this.dataSetCount = datasets?.length;
+            form.addControl('ds', new FormArray(AdbMapFilters.datasets.map(id => new FormGroup({
+                id: new FormControl(id),
+                selected: new FormControl(datasets?.includes(id))
+            }))));
+            this.dsControls = form.get('ds').controls;
+        }
+        this.updateCustomDate(form, qMap.get('p'), qMap);
+        this.subscriptions.add(form.get('period').valueChanges.subscribe(period => {
+            this.updateCustomDate(form, period, qMap);
+        }));
+        return form;
+    }
+    updateCustomDate(form, period, qMap) {
+        if (form.contains('startAt')) {
+            form.removeControl('startAt');
+        }
+        if (form.contains('endAt')) {
+            form.removeControl('endAt');
+        }
+        if (period === DateTypes.CUSTOM) {
+            let start = qMap.has('startAt') ? parseISO(qMap.get('startAt')) : null;
+            let end = qMap.has('endAt') ? parseISO(qMap.get('endAt')) : null;
+            if (qMap.get('p') !== DateTypes.CUSTOM) {
+                start = new Date();
+                end = new Date();
+            }
+            this.dateStartConfig = { maxDate: end ?? new Date() };
+            this.dateEndConfig = { minDate: start ?? null, maxDate: new Date() };
+            const startControl = new FormControl(start, Validators.required);
+            const endControl = new FormControl(end, Validators.required);
+            form.addControl('startAt', startControl);
+            form.addControl('endAt', endControl);
+            this.subscriptions.add(startControl.valueChanges.subscribe(startAt => {
+                this.dateEndConfig = { minDate: startAt ?? null, maxDate: new Date() };
+            }));
+            this.subscriptions.add(endControl.valueChanges.subscribe(endAt => {
+                this.dateStartConfig = { maxDate: endAt ?? new Date() };
+            }));
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdbMapFilters, deps: [{ token: i0.ChangeDetectorRef }, { token: AdbMapConfigService }, { token: i3$1.HttpClient }, { token: i3.Router }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AdbMapFilters, isStandalone: false, selector: "adb-map-filters", inputs: { inline: "inline" }, ngImport: i0, template: "@if(form){\r\n<form [formGroup]=\"form\" class=\"form mb-3\" (ngSubmit)=\"onSubmit()\">\r\n  <div class=\"mb-3\">\r\n    <adb-filter-section titleResource=\"TAXON.TAXA\" [expanded]=\"true\">\r\n      @if(filters.showTaxon&&!hasTaxonInUrlParameter){\r\n      <div class=\"mb-3\">\r\n        <label for=\"species\">{{'TAXON.TAXON'|translate}}</label>\r\n        <adb-taxon-picker formControlName=\"taxonId\" id=\"species\"></adb-taxon-picker>\r\n      </div>\r\n      }\r\n    </adb-filter-section>\r\n    @if(filters.showTime){\r\n    <adb-filter-section [count]=\"periodCount\" titleResource=\"OBSERVATION.PERIOD\">\r\n      <div class=\"mb-1\">\r\n        <select class=\"form-select\" formControlName=\"period\" id=\"period\">\r\n          <option value=\"1\">{{thisYear|date:'yyyy'}}</option>\r\n          <option value=\"2\">{{lastYear|date:'yyyy'}}</option>\r\n          <option value=\"3\">{{'OBSERVATION.ALL_YEAR'|translate}}</option>\r\n          <option value=\"4\">{{'OBSERVATION.LAST_5_YEAR'|translate}}</option>\r\n          <option value=\"5\">{{'OBSERVATION.LAST_25_YEAR'|translate}}</option>\r\n          <option value=\"6\">{{'OBSERVATION.CUSTOMIZED'|translate}}</option>\r\n        </select>\r\n      </div>\r\n      @if (form.value?.period==='6') {\r\n      <div class=\"mb-2\">\r\n        <label for=\"startAt\">{{'FROM' |translate}}</label>\r\n        <input adbDatepicker type=\"text\" class=\"form-control datepicker\" id=\"startAt\" formControlName=\"startAt\" [settings]=\"dateStartConfig\">\r\n      </div>\r\n      <div class=\"mb-2\">\r\n        <label for=\"endAt\">{{'TO' |translate}}</label>\r\n        <input adbDatepicker type=\"text\" class=\"form-control datepicker\" id=\"endAt\" formControlName=\"endAt\" [settings]=\"dateEndConfig\">\r\n      </div>\r\n      }\r\n    </adb-filter-section>\r\n    }\r\n    @if(filters.showArea){\r\n    <adb-filter-section [count]=\"areaCount\" titleResource=\"GEOGRAPHY\" [lazy]=\"true\">\r\n      <ng-template>\r\n        @if(filters.showOwnArea){\r\n        <div role=\"tablist\" aria-label=\"{{'AREA'|translate}}\" class=\"d-flex gap-2 justify-content-end\">\r\n          <button class=\"btn btn-link p-0\" [class.text-dark]=\"!hasOwnArea\" (click)=\"hasOwnArea=false\" role=\"tab\" id=\"tab-select\" aria-selected=\"{{!hasOwnArea}}\" aria-controls=\"panel-select\">\r\n            {{'CHOOSE'|translate}}\r\n          </button>\r\n          <button class=\"btn btn-link p-0\" [class.text-dark]=\"hasOwnArea\" (click)=\"hasOwnArea=true\" role=\"tab\" id=\"tab-draw\" aria-selected=\"false\" aria-controls=\"panel-draw\">\r\n            {{'OWN_AREA'|translate}}\r\n          </button>\r\n        </div>\r\n        }\r\n        <div class=\"mb-2\">\r\n          @if(hasOwnArea&&filters.showOwnArea){\r\n          <div class=\"pt-1\" role=\"tabpanel\" id=\"area-draw\" aria-labelledby=\"tab-draw\">\r\n            <div>\r\n              <adb-polygon-drawer formControlName=\"geo\"></adb-polygon-drawer>\r\n            </div>\r\n          </div>\r\n          }@else{\r\n          <div role=\"tabpanel\" id=\"area-select\" aria-labelledby=\"tab-select\">\r\n            <div formArrayName=\"areas\">\r\n              <div class=\"d-flex align-items-end mb-1\">\r\n                <label>{{'AREAS'|translate}}</label>\r\n                <button class=\"ms-auto text-dark btn btn-sm btn-secondary\" attr.aria-label=\"{{'OBSERVATION.ADD_AREA'|translate}}\" title=\"{{'OBSERVATION.ADD_AREA'|translate}}\" type=\"button\" (click)=\"addArea()\">\r\n                  <span class=\"fas fa-plus\"></span>\r\n                </button>\r\n              </div>\r\n              @for (ctrl of areasArray.controls; track ctrl; let i = $index; let last = $last) {\r\n              <div class=\"d-flex mb-2\">\r\n                <adb-area-picker id=\"area-{{i}}\" [formControlName]=\"i\"></adb-area-picker>\r\n                @if(areasArray.length>1){\r\n                <button class=\"btn btn-secondary ms-1\" attr.aria-label=\"{{'DELETE'|translate}}\" title=\"{{'DELETE'|translate}}\" type=\"button\" (click)=\"removeArea(i)\">\r\n                  <span class=\"fas fa-trash\"></span>\r\n                </button>\r\n                }\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n          }\r\n        </div>\r\n      </ng-template>\r\n    </adb-filter-section>\r\n    }\r\n    @if(form.get('taxonId')){\r\n    @if(filters.showTaxaLists){\r\n    <adb-filter-section [count]=\"taxonListCount\" titleResource=\"LISTS.NATURE_CONSERVATION_LISTS\">\r\n      <div class=\"mb-3\">\r\n        <app-treeview formControlName=\"list\" [nodes]=\"taxaLists\"></app-treeview>\r\n      </div>\r\n      {{'LISTS.READ_MORE'|translate}}\r\n      <a [href]=\"artfakta\">{{'LISTS.LIST_CONTENT'|translate}}</a>\r\n    </adb-filter-section>\r\n    }\r\n    @if(filters.showDatasets){\r\n    <adb-filter-section [count]=\"dataSetCount\" titleResource=\"DATASET.DATASETS\">\r\n      @if (form.get('ds')) {\r\n      <div formArrayName=\"ds\">\r\n        @for (item of dsControls; track item; let i = $index) {\r\n        <div [formGroupName]=\"i\" class=\"form-check\">\r\n          <input type=\"checkbox\" formControlName=\"selected\" [id]=\"'ds-' + item.value.id\" class=\"form-check-input\">\r\n          <label [for]=\"'ds-' + item.value.id\" class=\"form-check-label\">{{ 'PROVIDERS.'+item.value.id |translate }}</label>\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </adb-filter-section>\r\n    }\r\n    }\r\n  </div>\r\n  <div class=\"d-flex justify-content-end gap-2\">\r\n    @if (inline) {\r\n    <a class=\"btn btn-secondary\" [routerLink]=\"[]\">\r\n      {{'CANCEL'|translate}}\r\n    </a>\r\n    }\r\n    <button type=\"submit\" class=\"btn btn-primary\" [disabled]=\"form.invalid||form.pristine\">{{'FILTER'|translate}}</button>\r\n  </div>\r\n</form>\r\n}", dependencies: [{ kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i5.AdbDatePickerDirective, selector: "input[adbDatepicker]", inputs: ["format", "toLeft", "settings"], outputs: ["adbBlur"] }, { kind: "component", type: i5.FilterSectionComponent, selector: "adb-filter-section", inputs: ["titleResource", "helpResource", "count", "expanded", "lazy"] }, { kind: "component", type: i5.AdbAreaPickerComponent, selector: "adb-area-picker", inputs: ["placeholder", "useObject", "prefill"] }, { kind: "component", type: i5.AdbTaxonPickerComponent, selector: "adb-taxon-picker", inputs: ["placeholder", "useObject", "prefill"] }, { kind: "component", type: PolygonDrawerInput, selector: "adb-polygon-drawer" }, { kind: "component", type: TreeviewComponent, selector: "app-treeview", inputs: ["nodes"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdbMapFilters, decorators: [{
+            type: Component,
+            args: [{ selector: 'adb-map-filters', standalone: false, template: "@if(form){\r\n<form [formGroup]=\"form\" class=\"form mb-3\" (ngSubmit)=\"onSubmit()\">\r\n  <div class=\"mb-3\">\r\n    <adb-filter-section titleResource=\"TAXON.TAXA\" [expanded]=\"true\">\r\n      @if(filters.showTaxon&&!hasTaxonInUrlParameter){\r\n      <div class=\"mb-3\">\r\n        <label for=\"species\">{{'TAXON.TAXON'|translate}}</label>\r\n        <adb-taxon-picker formControlName=\"taxonId\" id=\"species\"></adb-taxon-picker>\r\n      </div>\r\n      }\r\n    </adb-filter-section>\r\n    @if(filters.showTime){\r\n    <adb-filter-section [count]=\"periodCount\" titleResource=\"OBSERVATION.PERIOD\">\r\n      <div class=\"mb-1\">\r\n        <select class=\"form-select\" formControlName=\"period\" id=\"period\">\r\n          <option value=\"1\">{{thisYear|date:'yyyy'}}</option>\r\n          <option value=\"2\">{{lastYear|date:'yyyy'}}</option>\r\n          <option value=\"3\">{{'OBSERVATION.ALL_YEAR'|translate}}</option>\r\n          <option value=\"4\">{{'OBSERVATION.LAST_5_YEAR'|translate}}</option>\r\n          <option value=\"5\">{{'OBSERVATION.LAST_25_YEAR'|translate}}</option>\r\n          <option value=\"6\">{{'OBSERVATION.CUSTOMIZED'|translate}}</option>\r\n        </select>\r\n      </div>\r\n      @if (form.value?.period==='6') {\r\n      <div class=\"mb-2\">\r\n        <label for=\"startAt\">{{'FROM' |translate}}</label>\r\n        <input adbDatepicker type=\"text\" class=\"form-control datepicker\" id=\"startAt\" formControlName=\"startAt\" [settings]=\"dateStartConfig\">\r\n      </div>\r\n      <div class=\"mb-2\">\r\n        <label for=\"endAt\">{{'TO' |translate}}</label>\r\n        <input adbDatepicker type=\"text\" class=\"form-control datepicker\" id=\"endAt\" formControlName=\"endAt\" [settings]=\"dateEndConfig\">\r\n      </div>\r\n      }\r\n    </adb-filter-section>\r\n    }\r\n    @if(filters.showArea){\r\n    <adb-filter-section [count]=\"areaCount\" titleResource=\"GEOGRAPHY\" [lazy]=\"true\">\r\n      <ng-template>\r\n        @if(filters.showOwnArea){\r\n        <div role=\"tablist\" aria-label=\"{{'AREA'|translate}}\" class=\"d-flex gap-2 justify-content-end\">\r\n          <button class=\"btn btn-link p-0\" [class.text-dark]=\"!hasOwnArea\" (click)=\"hasOwnArea=false\" role=\"tab\" id=\"tab-select\" aria-selected=\"{{!hasOwnArea}}\" aria-controls=\"panel-select\">\r\n            {{'CHOOSE'|translate}}\r\n          </button>\r\n          <button class=\"btn btn-link p-0\" [class.text-dark]=\"hasOwnArea\" (click)=\"hasOwnArea=true\" role=\"tab\" id=\"tab-draw\" aria-selected=\"false\" aria-controls=\"panel-draw\">\r\n            {{'OWN_AREA'|translate}}\r\n          </button>\r\n        </div>\r\n        }\r\n        <div class=\"mb-2\">\r\n          @if(hasOwnArea&&filters.showOwnArea){\r\n          <div class=\"pt-1\" role=\"tabpanel\" id=\"area-draw\" aria-labelledby=\"tab-draw\">\r\n            <div>\r\n              <adb-polygon-drawer formControlName=\"geo\"></adb-polygon-drawer>\r\n            </div>\r\n          </div>\r\n          }@else{\r\n          <div role=\"tabpanel\" id=\"area-select\" aria-labelledby=\"tab-select\">\r\n            <div formArrayName=\"areas\">\r\n              <div class=\"d-flex align-items-end mb-1\">\r\n                <label>{{'AREAS'|translate}}</label>\r\n                <button class=\"ms-auto text-dark btn btn-sm btn-secondary\" attr.aria-label=\"{{'OBSERVATION.ADD_AREA'|translate}}\" title=\"{{'OBSERVATION.ADD_AREA'|translate}}\" type=\"button\" (click)=\"addArea()\">\r\n                  <span class=\"fas fa-plus\"></span>\r\n                </button>\r\n              </div>\r\n              @for (ctrl of areasArray.controls; track ctrl; let i = $index; let last = $last) {\r\n              <div class=\"d-flex mb-2\">\r\n                <adb-area-picker id=\"area-{{i}}\" [formControlName]=\"i\"></adb-area-picker>\r\n                @if(areasArray.length>1){\r\n                <button class=\"btn btn-secondary ms-1\" attr.aria-label=\"{{'DELETE'|translate}}\" title=\"{{'DELETE'|translate}}\" type=\"button\" (click)=\"removeArea(i)\">\r\n                  <span class=\"fas fa-trash\"></span>\r\n                </button>\r\n                }\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n          }\r\n        </div>\r\n      </ng-template>\r\n    </adb-filter-section>\r\n    }\r\n    @if(form.get('taxonId')){\r\n    @if(filters.showTaxaLists){\r\n    <adb-filter-section [count]=\"taxonListCount\" titleResource=\"LISTS.NATURE_CONSERVATION_LISTS\">\r\n      <div class=\"mb-3\">\r\n        <app-treeview formControlName=\"list\" [nodes]=\"taxaLists\"></app-treeview>\r\n      </div>\r\n      {{'LISTS.READ_MORE'|translate}}\r\n      <a [href]=\"artfakta\">{{'LISTS.LIST_CONTENT'|translate}}</a>\r\n    </adb-filter-section>\r\n    }\r\n    @if(filters.showDatasets){\r\n    <adb-filter-section [count]=\"dataSetCount\" titleResource=\"DATASET.DATASETS\">\r\n      @if (form.get('ds')) {\r\n      <div formArrayName=\"ds\">\r\n        @for (item of dsControls; track item; let i = $index) {\r\n        <div [formGroupName]=\"i\" class=\"form-check\">\r\n          <input type=\"checkbox\" formControlName=\"selected\" [id]=\"'ds-' + item.value.id\" class=\"form-check-input\">\r\n          <label [for]=\"'ds-' + item.value.id\" class=\"form-check-label\">{{ 'PROVIDERS.'+item.value.id |translate }}</label>\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </adb-filter-section>\r\n    }\r\n    }\r\n  </div>\r\n  <div class=\"d-flex justify-content-end gap-2\">\r\n    @if (inline) {\r\n    <a class=\"btn btn-secondary\" [routerLink]=\"[]\">\r\n      {{'CANCEL'|translate}}\r\n    </a>\r\n    }\r\n    <button type=\"submit\" class=\"btn btn-primary\" [disabled]=\"form.invalid||form.pristine\">{{'FILTER'|translate}}</button>\r\n  </div>\r\n</form>\r\n}" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: AdbMapConfigService }, { type: i3$1.HttpClient }, { type: i3.Router }, { type: i3.ActivatedRoute }], propDecorators: { inline: [{
+                type: Input
+            }] } });
+
+class AdbMapModule {
+    static forRoot(config) {
+        return {
+            ngModule: AdbMapModule,
+            providers: [
+                {
+                    provide: ADB_MAP_CONFIG,
+                    useValue: config
+                }
+            ]
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdbMapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: AdbMapModule, declarations: [AdbObsMapComponent,
+            PolygonDrawerInput,
+            AdbMapFilters,
+            TreeviewComponent], imports: [CommonModule,
+            FormsModule,
+            RouterModule,
+            ReactiveFormsModule,
+            AdbDatePickerModule, i1.TranslateModule, AdbPipesModule,
+            AdbFilterSectionModule,
+            AdbPickerModule], exports: [AdbObsMapComponent,
+            PolygonDrawerInput,
+            AdbMapFilters] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdbMapModule, providers: [
+            AdbMapConfigService
+        ], imports: [CommonModule,
+            FormsModule,
+            RouterModule,
+            ReactiveFormsModule,
+            AdbDatePickerModule,
+            TranslateModule.forChild(),
+            AdbPipesModule,
+            AdbFilterSectionModule,
+            AdbPickerModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdbMapModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        RouterModule,
+                        ReactiveFormsModule,
+                        AdbDatePickerModule,
+                        TranslateModule.forChild(),
+                        AdbPipesModule,
+                        AdbFilterSectionModule,
+                        AdbPickerModule
+                    ],
+                    declarations: [
+                        AdbObsMapComponent,
+                        PolygonDrawerInput,
+                        AdbMapFilters,
+                        TreeviewComponent,
+                        // Stats,
+                        // AdbGeojsonPolygonDirective
+                    ],
+                    exports: [
+                        AdbObsMapComponent,
+                        PolygonDrawerInput,
+                        AdbMapFilters,
+                        // Stats,
+                        // AdbGeojsonPolygonDirective
+                    ],
+                    providers: [
+                        AdbMapConfigService
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ADB_MAP_CONFIG, AdbMapConfigService, AdbMapFilterType, AdbMapFilters, AdbMapModule, AdbMapUtils, AdbObsMapComponent, PolygonDrawerInput, VisibleFilters };
+//# sourceMappingURL=adb-shared-src-map.mjs.map