@ndwnu/map 0.0.1-beta.5 → 0.0.1-beta.7

package/fesm2022/ndwnu-map.mjs

@@ -1,230 +1,7 @@
-import { BehaviorSubject, map, Subject, takeUntil, filter } from 'rxjs';
+import { Subject, takeUntil, filter, BehaviorSubject, map } from 'rxjs';
 import * as i0 from '@angular/core';
 import { viewChild, input, ChangeDetectionStrategy, Component, Injectable } from '@angular/core';
-import { Map } from 'maplibre-gl';
-
-const BOUNDS_NL = [
-    [3.079667, 50.587611],
-    [7.572028, 53.636667],
-];
-const BOUNDS_AMERSFOORT = [
-    [5.34458238242172, 52.11623605695118],
-    [5.446205917577942, 52.21132028216525],
-];
-
-const DEFAULT_MAP_CONFIG = {
-    center: [5.387827, 52.155172],
-    zoom: 8,
-    maxZoom: 18,
-    minZoom: 6,
-    interactive: true,
-    dragRotate: false,
-    doubleClickZoom: true,
-    scrollZoom: true,
-    boxZoom: true,
-    dragPan: true,
-    keyboard: true,
-    touchZoomRotate: true,
-};
-// Common bounds that users can optionally use
-const COMMON_BOUNDS = {
-    NETHERLANDS: [
-        [3.079667, 50.587611],
-        [7.572028, 53.636667],
-    ],
-    AMERSFOORT: [
-        [5.34458238242172, 52.11623605695118],
-        [5.446205917577942, 52.21132028216525],
-    ],
-};
-
-/**
- * Repository for managing map elements.
- * Provides methods to add, remove, show, hide, and toggle map elements.
- * Also tracks element visibility state and provides observable streams for elements.
- *
- * @typeparam TElementType - The type of ID used for the map elements
- */
-class MapElementRepository {
-    /** Subject that holds the current array of map elements */
-    mapElementsSubject = new BehaviorSubject([]);
-    // mapElements are not directly exposed to prevent circular reference errors when
-    // they are used in a template. Because the mapElements$ observable contains MapLibre
-    // GL JS map objects, which have circular references.
-    /** Observable stream of all map elements */
-    mapElements$ = this.mapElementsSubject.asObservable();
-    /** Observable stream of only visible map elements */
-    visibleMapElements$ = this.mapElements$.pipe(map((elements) => elements.filter((element) => element.isVisible)));
-    /**
-     * Gets the ids (TElementType) as an array of all map element
-     * @returns Array of TElementType
-     */
-    mapElementIds$ = this.mapElements$.pipe(map((elements) => elements.map((element) => element.id)));
-    /**
-     * Gets the ids (TElementType) as an array of all visible map element
-     * @returns Array of TElementType
-     */
-    visibleMapElementIds$ = this.visibleMapElements$.pipe(map((elements) => elements.map((element) => element.id)));
-    /**
-     * Gets the current array of all map elements
-     * @returns Array of map elements
-     */
-    get mapElements() {
-        return this.mapElementsSubject.getValue();
-    }
-    /**
-     * Gets only the currently visible map elements
-     * @returns Array of visible map elements
-     */
-    get visibleMapElements() {
-        return this.mapElements.filter((element) => element.isVisible);
-    }
-    /**
-     * Finds a map element by its ID
-     *
-     * @param elementId - The ID of the element to find
-     * @returns The map element if found, undefined otherwise
-     */
-    getMapElementById(elementId) {
-        return this.mapElements.find((element) => element.id === elementId);
-    }
-    /**
-     * Checks if a map element is currently visible
-     *
-     * @param elementId - The ID of the element to check
-     * @returns True if the element is visible, false otherwise
-     */
-    isMapElementVisible(elementId) {
-        return this.visibleMapElements.some((element) => element.id === elementId);
-    }
-    /**
-     * Adds a new map element to the repository and initializes it.
-     * Sets the element's visibility based on its configuration.
-     *
-     * @param mapElement - The map element to add
-     */
-    addMapElement(mapElement) {
-        const currentElements = this.mapElements;
-        this.mapElementsSubject.next([...currentElements, mapElement]);
-        mapElement.onInit();
-        if (mapElement.alwaysVisible || this.isMapElementVisible(mapElement.id)) {
-            this.showMapElement(mapElement.id);
-        }
-        else {
-            this.hideMapElement(mapElement.id);
-        }
-    }
-    /**
-     * Removes a map element from the repository and destroys it.
-     *
-     * @param mapElement - The map element to remove
-     */
-    removeMapElement(mapElement) {
-        const filteredElements = this.mapElements.filter((element) => element.id !== mapElement.id);
-        this.mapElementsSubject.next(filteredElements);
-        mapElement.onDestroy();
-    }
-    /**
-     * Removes all map elements from the repository and destroys them.
-     */
-    removeAllMapElements() {
-        this.mapElements.forEach((element) => {
-            this.removeMapElement(element);
-        });
-    }
-    /**
-     * Sets the visibility of a map element by its ID and updates the subject with the new state.
-     *
-     * @param elementId - The ID of the element to update
-     * @param visible - Whether the element should be visible or hidden
-     */
-    setMapElementVisibility(elementId, visible) {
-        const element = this.getMapElementById(elementId);
-        if (element) {
-            element.setVisible(visible);
-            const elements = this.mapElements.filter((el) => el.id !== elementId);
-            this.mapElementsSubject.next([...elements, element]);
-        }
-    }
-    /**
-     * Shows a map element by its ID and updates the subject with the new state.
-     *
-     * @param elementId - The ID of the element to show
-     */
-    showMapElement(elementId) {
-        this.setMapElementVisibility(elementId, true);
-    }
-    /**
-     * Hides a map element by its ID and updates the subject with the new state.
-     *
-     * @param elementId - The ID of the element to hide
-     */
-    hideMapElement(elementId) {
-        this.setMapElementVisibility(elementId, false);
-    }
-    /**
-     * Toggles the visibility of a map element by its ID.
-     * If the element is currently visible, it will be hidden, and vice versa.
-     *
-     * @param elementId - The ID of the element to toggle visibility
-     */
-    toggleMapElement(elementId) {
-        if (this.visibleMapElements.some((element) => element.id === elementId)) {
-            this.hideMapElement(elementId);
-        }
-        else {
-            this.showMapElement(elementId);
-        }
-    }
-    /**
-     * Gets the ID of the layer that should come before the specified element's layers
-     * in the map's layer stack. This is used for maintaining proper layer ordering.
-     *
-     * @param elementId - The ID of the element to find a "before" reference for
-     * @returns The ID of the first layer of the next element in order, or undefined if none exists
-     */
-    getBeforeId(elementId) {
-        const currentElement = this.getMapElementById(elementId);
-        if (!currentElement) {
-            return undefined;
-        }
-        const nextElement = this.mapElements
-            .filter((item) => item.elementOrder > currentElement.elementOrder)
-            .sort((a, b) => a.elementOrder - b.elementOrder)[0];
-        const nextElementLayerIds = nextElement?.sources
-            .flatMap((source) => source.layers)
-            .filter((layer) => layer.initialized)
-            .map((layer) => layer.id);
-        return nextElement && nextElementLayerIds.length > 0 ? nextElementLayerIds[0] : undefined;
-    }
-}
-
-class MapElement {
-    config;
-    id;
-    elementOrder;
-    sources = [];
-    alwaysVisible = false;
-    isVisible = false;
-    unsubscribe = new Subject();
-    constructor(config) {
-        this.config = config;
-        this.id = config.elementId;
-        this.elementOrder = config.elementOrder;
-    }
-    onInit() {
-        this.sources.forEach((source) => source.onInit());
-    }
-    onDestroy() {
-        this.sources.forEach((source) => source.onDestroy());
-        this.unsubscribe.next();
-        this.unsubscribe.complete();
-    }
-    setVisible(visible) {
-        this.isVisible = visible;
-        this.sources.forEach((source) => source.setVisible(visible));
-    }
-}
+import { Map as Map$1 } from 'maplibre-gl';
 
 class MapLayer {
     config;
@@ -265,8 +42,12 @@ class MapLayer {
     #setupClickHandlers() {
         if (!this.onClick)
             return;
+        const mapElement = this.config.mapElementRepository.getMapElementById(this.config.elementId);
+        if (!mapElement?.isInteractive) {
+            return;
+        }
         this.config.map.on('click', this.id, (event) => {
-            this.onClick?.(this.#getFeatures(event));
+            this.onClick?.(event.point, this.#getFeatures(event));
         });
         this.config.maplibreCursorService.setMouseCursor(this.config.map, this.id);
     }
@@ -274,7 +55,7 @@ class MapLayer {
         if (!this.onClick)
             return;
         this.config.map.off('click', this.id, (event) => {
-            this.onClick?.(this.#getFeatures(event));
+            this.onClick?.(event.point, this.#getFeatures(event));
         });
     }
     #getFeatures(event) {
@@ -307,27 +88,95 @@ class MapLayer {
     }
 }
 
-class MapSource {
-    id;
-    config;
-    layers = [];
-    unsubscribe = new Subject();
-    #isInitialized = false;
-    #featureCollection$;
-    constructor(id, config) {
-        this.id = id;
-        this.config = config;
-    }
-    onInit() {
-        if (!this.config.map.getSource(this.id)) {
-            this.config.map.addSource(this.id, this.getSpecification());
+class ApiLayer extends MapLayer {
+    _layerSpecification;
+    constructor(config, _layerSpecification) {
+        const sourceId = 'source' in _layerSpecification ? _layerSpecification.source : '';
+        super(config, sourceId);
+        this._layerSpecification = _layerSpecification;
+        // Ensure that layout visibility is set after the base constructor has been called
+        if (this._layerSpecification.layout) {
+            this._layerSpecification.layout.visibility = 'none';
+        }
+        else {
+            this._layerSpecification.layout = { visibility: 'none' };
         }
-        this.layers.forEach((layer) => layer.onInit());
-        this.isInitialized = true;
     }
-    onDestroy() {
-        this.isInitialized = false;
-        this.layers.forEach((layer) => layer.onDestroy());
+    get id() {
+        return this._layerSpecification.id;
+    }
+    getSpecification() {
+        return this._layerSpecification;
+    }
+}
+
+class ApiBackgroundLayer extends ApiLayer {
+    constructor(config, layerSpecification) {
+        super(config, layerSpecification);
+    }
+}
+
+class MapElement {
+    config;
+    id;
+    elementOrder;
+    sources = [];
+    alwaysVisible = false;
+    isVisible = false;
+    isInteractive = true;
+    unsubscribe = new Subject();
+    constructor(config) {
+        this.config = config;
+        this.id = config.elementId;
+        this.elementOrder = config.elementOrder;
+        if (config.isInteractive !== undefined) {
+            this.isInteractive = config.isInteractive;
+        }
+    }
+    get legendItems() {
+        return [];
+    }
+    onInit() {
+        this.sources.forEach((source) => source.onInit());
+    }
+    onDestroy() {
+        this.sources.forEach((source) => source.onDestroy());
+        this.unsubscribe.next();
+        this.unsubscribe.complete();
+    }
+    setVisible(visible) {
+        this.isVisible = visible;
+        this.sources.forEach((source) => source.setVisible(visible));
+    }
+    reload() {
+        this.sources.forEach((source) => source.reload());
+    }
+}
+
+class MapSource {
+    id;
+    config;
+    layers = [];
+    unsubscribe = new Subject();
+    activeFilter;
+    #isInitialized = false;
+    #filter$;
+    #filterSubscription;
+    #featureCollection$;
+    constructor(id, config) {
+        this.id = id;
+        this.config = config;
+    }
+    onInit() {
+        if (!this.config.map.getSource(this.id)) {
+            this.config.map.addSource(this.id, this.getSpecification());
+        }
+        this.layers.forEach((layer) => layer.onInit());
+        this.isInitialized = true;
+    }
+    onDestroy() {
+        this.isInitialized = false;
+        this.layers.forEach((layer) => layer.onDestroy());
         this.unsubscribe.next();
         this.unsubscribe.complete();
     }
@@ -344,93 +193,537 @@ class MapSource {
     set isInitialized(value) {
         this.#isInitialized = value;
         this.#subscribeToFeatureCollection();
+        this.#subscribeToFilters();
+    }
+    get filter$() {
+        return this.#filter$;
+    }
+    set filter$(value) {
+        this.#filter$ = value;
+        this.#subscribeToFilters();
+    }
+    setVisible(visible) {
+        this.layers.forEach((layer) => layer.setVisible(visible));
+    }
+    reload() {
+        this.config.map.refreshTiles(this.id);
+    }
+    applyFilterToLayers(filterValue) {
+        const hasSourceFilter = !!this.getFilterSpecification;
+        const hasLayerFilter = this.layers.some((layer) => !!layer.getFilterSpecification);
+        if (!hasSourceFilter && !hasLayerFilter) {
+            return;
+        }
+        this.activeFilter = filterValue;
+        const sourceFilter = this.getFilterSpecification?.(filterValue);
+        this.layers.forEach((layer) => {
+            const layerFilter = layer.getFilterSpecification?.(filterValue);
+            const combinedFilter = (sourceFilter && layerFilter
+                ? ['all', sourceFilter, layerFilter]
+                : sourceFilter || layerFilter);
+            this.config.map.setFilter(layer.id, combinedFilter);
+        });
+    }
+    #subscribeToFilters() {
+        if (!this.isInitialized)
+            return;
+        if (this.#filterSubscription) {
+            this.#filterSubscription.unsubscribe();
+        }
+        if (this.#filter$) {
+            this.#filterSubscription = this.#filter$.pipe(takeUntil(this.unsubscribe)).subscribe({
+                next: (filter) => {
+                    this.applyFilterToLayers(filter);
+                },
+                error: (error) => {
+                    console.error('Error updating filter', error);
+                },
+            });
+        }
+        else {
+            this.applyFilterToLayers(undefined);
+        }
+    }
+    #subscribeToFeatureCollection() {
+        if (this.isInitialized && this.featureCollection$) {
+            this.featureCollection$.pipe(takeUntil(this.unsubscribe)).subscribe({
+                next: (featureCollection) => {
+                    const source = this.config.map.getSource(this.id);
+                    if (source && source.type === 'geojson') {
+                        source.setData(featureCollection);
+                    }
+                    else {
+                        // not needed because source is always specified as geojson with empty collection
+                        this.config.map.addSource(this.id, {
+                            type: 'geojson',
+                            data: featureCollection,
+                        });
+                    }
+                },
+                error: (error) => {
+                    console.error('Error updating feature collection', error);
+                },
+            });
+        }
+    }
+}
+
+class ApiSource extends MapSource {
+    _styleSpecification;
+    _layerFilter;
+    constructor(id, config, _styleSpecification, _layerFilter) {
+        super(id, config);
+        this._styleSpecification = _styleSpecification;
+        this._layerFilter = _layerFilter;
+    }
+    getSpecification() {
+        return this._styleSpecification.sources[this.id];
+    }
+    /**
+     * Creates ApiLayer instances for this source without initializing them.
+     */
+    createLayers(layers) {
+        this.layers = layers
+            .filter((layer) => layer.type !== 'background')
+            .filter((layer) => layer.source === this.id)
+            .filter((layer) => !this._layerFilter || this._layerFilter(layer))
+            .map((layer) => new ApiLayer(this.config, layer));
+    }
+}
+
+class ApiElement extends MapElement {
+    _http;
+    _mapStyleUrl;
+    _layerFilter;
+    backgroundLayers = [];
+    #visible = false;
+    constructor(config, _http, _mapStyleUrl, _layerFilter) {
+        super(config);
+        this._http = _http;
+        this._mapStyleUrl = _mapStyleUrl;
+        this._layerFilter = _layerFilter;
+    }
+    onInit() {
+        super.onInit();
+        this._http
+            .get(this._mapStyleUrl)
+            .pipe(filter((styleSpecification) => !!styleSpecification), takeUntil(this.unsubscribe))
+            .subscribe((styleSpecification) => {
+            this.#createBackgroundLayers(styleSpecification.layers);
+            this.#createSources(styleSpecification);
+            // If setVisible() was called before these layers were created,
+            // re-apply the current visibility state so the new layers respect it.
+            this.setVisible(this.#visible);
+        });
+    }
+    setVisible(visible) {
+        this.#visible = visible;
+        super.setVisible(visible);
+        this.backgroundLayers.forEach((layer) => layer.setVisible(visible));
+    }
+    #createSources(styleSpecification) {
+        const layers = styleSpecification.layers;
+        // First, create all sources and their layer instances (without initializing them)
+        this.sources = Object.entries(styleSpecification.sources).map(([id]) => {
+            const source = new ApiSource(id, this.config, styleSpecification, this._layerFilter);
+            source.onInit();
+            source.createLayers(layers);
+            return source;
+        });
+        // Then, initialize all layers according to the style.json order
+        // This ensures correct ordering regardless of which source they belong to
+        this.#initializeLayersInOrder(layers);
+    }
+    #initializeLayersInOrder(layers) {
+        // Create a map of layerId -> ApiLayer for quick lookup
+        const layerMap = new Map(this.sources.flatMap((source) => source.layers.map((layer) => [layer.id, layer])));
+        // Initialize layers in the order they appear in style.json
+        for (const layerSpec of layers) {
+            const layer = layerMap.get(layerSpec.id);
+            if (layer) {
+                layer.onInit();
+            }
+        }
+    }
+    // API elements are created from the style specification and this can contain layers of type 'background'
+    // These layers do not have a source and therefore don't fit in the element > source > layer hierarchy
+    // That is why we create these layers from the element itself
+    #createBackgroundLayers(layerSpecifications) {
+        this.backgroundLayers = layerSpecifications
+            .filter((layer) => layer.type === 'background')
+            .filter((layer) => !this._layerFilter || this._layerFilter(layer))
+            .map((layerSpecification) => {
+            const apiLayer = new ApiBackgroundLayer(this.config, layerSpecification);
+            apiLayer.onInit();
+            return apiLayer;
+        });
+    }
+}
+
+const DEFAULT_MAP_CONFIG = {
+    center: [5.387827, 52.155172],
+    zoom: 8,
+    maxZoom: 18,
+    minZoom: 6,
+    interactive: true,
+    dragRotate: false,
+    doubleClickZoom: true,
+    scrollZoom: true,
+    boxZoom: true,
+    dragPan: true,
+    keyboard: true,
+    touchZoomRotate: true,
+};
+// Common bounds that users can optionally use
+const COMMON_BOUNDS = {
+    NETHERLANDS: [
+        [3.079667, 50.587611],
+        [7.572028, 53.636667],
+    ],
+    AMERSFOORT: [
+        [5.34458238242172, 52.11623605695118],
+        [5.446205917577942, 52.21132028216525],
+    ],
+};
+
+class MapComponent {
+    mapContainer = viewChild.required('mapContainer');
+    config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    map;
+    ngAfterViewInit() {
+        this.map = this.#createMap(this.mapContainer().nativeElement);
+        this.map.once('load', () => this.#initiateMapLoading());
+    }
+    ngOnDestroy() {
+        // Note: Using `this.map.once('remove', this.onRemoveMap())` does not work correctly because,
+        // by the time the `onRemoveMap` event is triggered, it is no longer possible to interact with the map for cleanup.
+        // To address this we call `onRemoveMap` explicitly before destroying the MapLibre instance. This
+        // ensures that our map elements are cleaned up properly before the map is removed.
+        this.onRemoveMap();
+        this.map?.remove();
+    }
+    resizeMap() {
+        this.map?.resize();
+    }
+    zoomToLevel(zoomLevel, options) {
+        this.map?.zoomTo(zoomLevel, options);
+    }
+    #createMap(container) {
+        const config = { ...DEFAULT_MAP_CONFIG, ...this.config() };
+        const options = {
+            container,
+            style: {
+                version: 8,
+                sources: {},
+                layers: [],
+            },
+            maxZoom: config.maxZoom,
+            minZoom: config.minZoom,
+            interactive: config.interactive,
+            doubleClickZoom: config.doubleClickZoom,
+            scrollZoom: config.scrollZoom,
+            boxZoom: config.boxZoom,
+            dragPan: config.dragPan,
+            keyboard: config.keyboard,
+            touchZoomRotate: config.touchZoomRotate,
+        };
+        const map = new Map$1(options);
+        return map;
+    }
+    #initiateMapLoading() {
+        this.onLoadMap();
+        this.resizeMap();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: MapComponent, isStandalone: true, selector: "ng-component", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "mapContainer", first: true, predicate: ["mapContainer"], descendants: true, isSignal: true }], ngImport: i0, template: '<div #mapContainer class="map"></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MapComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    template: '<div #mapContainer class="map"></div>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { mapContainer: [{ type: i0.ViewChild, args: ['mapContainer', { isSignal: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
+
+const BOUNDS_NL = [
+    [3.079667, 50.587611],
+    [7.572028, 53.636667],
+];
+const BOUNDS_AMERSFOORT = [
+    [5.34458238242172, 52.11623605695118],
+    [5.446205917577942, 52.21132028216525],
+];
+const lineWidthFrcSpecification = [
+    'interpolate',
+    ['exponential', 1.1],
+    ['zoom'],
+    10,
+    [
+        'match',
+        ['get', 'functionalRoadClass'],
+        '0',
+        2.5,
+        '1',
+        2.5,
+        '2',
+        2.5,
+        '3',
+        1.5,
+        '4',
+        1.5,
+        '5',
+        1,
+        0,
+    ],
+    13,
+    [
+        'match',
+        ['get', 'functionalRoadClass'],
+        '0',
+        7,
+        '1',
+        7,
+        '2',
+        5.7,
+        '3',
+        4.1,
+        '4',
+        4.1,
+        '5',
+        2.7,
+        '6',
+        1.5,
+        0,
+    ],
+    15,
+    [
+        'match',
+        ['get', 'functionalRoadClass'],
+        '0',
+        10.4,
+        '1',
+        10.4,
+        '2',
+        8.4,
+        '3',
+        6.4,
+        '4',
+        6.4,
+        '5',
+        5.4,
+        '6',
+        3.4,
+        '7',
+        3.4,
+        3,
+    ],
+    20,
+    [
+        'match',
+        ['get', 'functionalRoadClass'],
+        '0',
+        24,
+        '1',
+        24,
+        '2',
+        22,
+        '3',
+        20,
+        '4',
+        18,
+        '5',
+        16,
+        '6',
+        14,
+        '7',
+        10,
+        8,
+    ],
+];
+
+/**
+ * Repository for managing map elements.
+ * Provides methods to add, remove, show, hide, and toggle map elements.
+ * Also tracks element visibility state and provides observable streams for elements.
+ *
+ * @typeparam TElementType - The type of ID used for the map elements
+ * @typeparam TFilter - The type of filter used for the map elements
+ * @typeparam TLegendItem - The type of legend item used for the map elements
+ */
+class MapElementRepository {
+    /** Subject that holds the current array of map elements */
+    mapElementsSubject = new BehaviorSubject([]);
+    // mapElements are not directly exposed to prevent circular reference errors when
+    // they are used in a template. Because the mapElements$ observable contains MapLibre
+    // GL JS map objects, which have circular references.
+    /** Observable stream of all map elements */
+    mapElements$ = this.mapElementsSubject.asObservable();
+    /** Observable stream of only visible map elements */
+    visibleMapElements$ = this.mapElements$.pipe(map((elements) => elements.filter((element) => element.isVisible)));
+    /** Observable stream of legend items from all visible map elements */
+    legendItems$ = this.visibleMapElements$.pipe(map((elements) => elements.flatMap((element) => element.legendItems)));
+    /**
+     * Gets the ids (TElementType) as an array of all map element
+     * @returns Array of TElementType
+     */
+    mapElementIds$ = this.mapElements$.pipe(map((elements) => elements.map((element) => element.id)));
+    /**
+     * Gets the ids (TElementType) as an array of all visible map element
+     * @returns Array of TElementType
+     */
+    visibleMapElementIds$ = this.visibleMapElements$.pipe(map((elements) => elements.map((element) => element.id)));
+    /**
+     * Gets the ids (TElementType) as an array of all visible map element
+     * @returns Array of TElementType
+     */
+    get visibleMapElementIds() {
+        return this.visibleMapElements.map((element) => element.id);
+    }
+    /**
+     * Gets the current array of all map elements
+     * @returns Array of map elements
+     */
+    get mapElements() {
+        return this.mapElementsSubject.getValue();
+    }
+    /**
+     * Gets only the currently visible map elements
+     * @returns Array of visible map elements
+     */
+    get visibleMapElements() {
+        return this.mapElements.filter((element) => element.isVisible);
+    }
+    /**
+     * Finds a map element by its ID
+     *
+     * @param elementId - The ID of the element to find
+     * @returns The map element if found, undefined otherwise
+     */
+    getMapElementById(elementId) {
+        return this.mapElements.find((element) => element.id === elementId);
+    }
+    /**
+     * Checks if a map element is currently visible
+     *
+     * @param elementId - The ID of the element to check
+     * @returns True if the element is visible, false otherwise
+     */
+    isMapElementVisible(elementId) {
+        return this.visibleMapElements.some((element) => element.id === elementId);
+    }
+    /**
+     * Adds a new map element to the repository and initializes it.
+     * Sets the element's visibility based on its configuration.
+     *
+     * @param mapElement - The map element to add
+     */
+    addMapElement(mapElement) {
+        const currentElements = this.mapElements;
+        this.mapElementsSubject.next([...currentElements, mapElement]);
+        mapElement.onInit();
+        if (mapElement.alwaysVisible || this.isMapElementVisible(mapElement.id)) {
+            this.showMapElement(mapElement.id);
+        }
+        else {
+            this.hideMapElement(mapElement.id);
+        }
+    }
+    /**
+     * Removes a map element from the repository and destroys it.
+     *
+     * @param mapElement - The map element to remove
+     */
+    removeMapElement(mapElement) {
+        const filteredElements = this.mapElements.filter((element) => element.id !== mapElement.id);
+        this.mapElementsSubject.next(filteredElements);
+        mapElement.onDestroy();
     }
-    setVisible(visible) {
-        this.layers.forEach((layer) => layer.setVisible(visible));
+    /**
+     * Removes all map elements from the repository and destroys them.
+     */
+    removeAllMapElements() {
+        this.mapElements.forEach((element) => {
+            this.removeMapElement(element);
+        });
     }
-    #subscribeToFeatureCollection() {
-        if (this.isInitialized && this.featureCollection$) {
-            this.featureCollection$.pipe(takeUntil(this.unsubscribe)).subscribe({
-                next: (featureCollection) => {
-                    const source = this.config.map.getSource(this.id);
-                    if (source && source.type === 'geojson') {
-                        source.setData(featureCollection);
-                    }
-                    else {
-                        // not needed because source is always specified as geojson with empty collection
-                        this.config.map.addSource(this.id, {
-                            type: 'geojson',
-                            data: featureCollection,
-                        });
-                    }
-                },
-                error: (error) => {
-                    console.error('Error updating feature collection', error);
-                },
-            });
+    /**
+     * Sets the visibility of a map element by its ID and updates the subject with the new state.
+     *
+     * @param elementId - The ID of the element to update
+     * @param visible - Whether the element should be visible or hidden
+     */
+    setMapElementVisibility(elementId, visible) {
+        const element = this.getMapElementById(elementId);
+        if (element) {
+            element.setVisible(visible);
+            const elements = this.mapElements.filter((el) => el.id !== elementId);
+            this.mapElementsSubject.next([...elements, element]);
         }
     }
-}
-
-class MapComponent {
-    mapContainer = viewChild.required('mapContainer');
-    config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
-    map;
-    ngAfterViewInit() {
-        this.map = this.#createMap(this.mapContainer().nativeElement);
-        this.map.once('load', () => this.#initiateMapLoading());
-    }
-    ngOnDestroy() {
-        // Note: Using `this.map.once('remove', this.onRemoveMap())` does not work correctly because,
-        // by the time the `onRemoveMap` event is triggered, it is no longer possible to interact with the map for cleanup.
-        // To address this we call `onRemoveMap` explicitly before destroying the MapLibre instance. This
-        // ensures that our map elements are cleaned up properly before the map is removed.
-        this.onRemoveMap();
-        this.map?.remove();
+    /**
+     * Shows a map element by its ID and updates the subject with the new state.
+     *
+     * @param elementId - The ID of the element to show
+     */
+    showMapElement(elementId) {
+        this.setMapElementVisibility(elementId, true);
     }
-    resizeMap() {
-        this.map?.resize();
+    /**
+     * Hides a map element by its ID and updates the subject with the new state.
+     *
+     * @param elementId - The ID of the element to hide
+     */
+    hideMapElement(elementId) {
+        this.setMapElementVisibility(elementId, false);
     }
-    zoomToLevel(zoomLevel, options) {
-        this.map?.zoomTo(zoomLevel, options);
+    /**
+     * Triggers a reload of the tiles in the sources of the map element with the given ID
+     *
+     * @param elementId - The ID of the element to reload
+     */
+    reloadMapElement(elementId) {
+        const element = this.getMapElementById(elementId);
+        if (element) {
+            element.reload();
+        }
     }
-    #createMap(container) {
-        const config = { ...DEFAULT_MAP_CONFIG, ...this.config() };
-        const options = {
-            container,
-            style: {
-                version: 8,
-                sources: {},
-                layers: [],
-            },
-            maxZoom: config.maxZoom,
-            minZoom: config.minZoom,
-            interactive: config.interactive,
-            doubleClickZoom: config.doubleClickZoom,
-            scrollZoom: config.scrollZoom,
-            boxZoom: config.boxZoom,
-            dragPan: config.dragPan,
-            keyboard: config.keyboard,
-            touchZoomRotate: config.touchZoomRotate,
-        };
-        const map = new Map(options);
-        return map;
+    /**
+     * Toggles the visibility of a map element by its ID.
+     * If the element is currently visible, it will be hidden, and vice versa.
+     *
+     * @param elementId - The ID of the element to toggle visibility
+     */
+    toggleMapElement(elementId) {
+        if (this.visibleMapElements.some((element) => element.id === elementId)) {
+            this.hideMapElement(elementId);
+        }
+        else {
+            this.showMapElement(elementId);
+        }
     }
-    #initiateMapLoading() {
-        this.onLoadMap();
-        this.resizeMap();
+    /**
+     * Gets the ID of the layer that should come before the specified element's layers
+     * in the map's layer stack. This is used for maintaining proper layer ordering.
+     *
+     * @param elementId - The ID of the element to find a "before" reference for
+     * @returns The ID of the first layer of the next element in order, or undefined if none exists
+     */
+    getBeforeId(elementId) {
+        const currentElement = this.getMapElementById(elementId);
+        if (!currentElement) {
+            return undefined;
+        }
+        const nextElement = this.mapElements
+            .filter((item) => item.elementOrder > currentElement.elementOrder)
+            .sort((a, b) => a.elementOrder - b.elementOrder)[0];
+        const nextElementLayerIds = nextElement?.sources
+            .flatMap((source) => source.layers)
+            .filter((layer) => layer.initialized)
+            .map((layer) => layer.id);
+        return nextElement && nextElementLayerIds.length > 0 ? nextElementLayerIds[0] : undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.9", type: MapComponent, isStandalone: true, selector: "ng-component", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "mapContainer", first: true, predicate: ["mapContainer"], descendants: true, isSignal: true }], ngImport: i0, template: '<div #mapContainer class="map"></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MapComponent, decorators: [{
-            type: Component,
-            args: [{
-                    standalone: true,
-                    template: '<div #mapContainer class="map"></div>',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { mapContainer: [{ type: i0.ViewChild, args: ['mapContainer', { isSignal: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
 
 /**
  * Service for managing MapLibre map cursor interactions.
@@ -514,125 +807,19 @@ class MaplibreCursorService {
             console.warn(`Cursor type '${cursor}' is not supported.`);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MaplibreCursorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MaplibreCursorService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MaplibreCursorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MaplibreCursorService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MaplibreCursorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MaplibreCursorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-class ApiLayer extends MapLayer {
-    _layerSpecification;
-    constructor(config, _layerSpecification) {
-        const sourceId = 'source' in _layerSpecification ? _layerSpecification.source : '';
-        super(config, sourceId);
-        this._layerSpecification = _layerSpecification;
-        // Ensure that layout visibility is set after the base constructor has been called
-        if (this._layerSpecification.layout) {
-            this._layerSpecification.layout.visibility = 'none';
-        }
-        else {
-            this._layerSpecification.layout = { visibility: 'none' };
-        }
-    }
-    get id() {
-        return this._layerSpecification.id;
-    }
-    getSpecification() {
-        return this._layerSpecification;
-    }
-}
-
-class ApiBackgroundLayer extends ApiLayer {
-    constructor(config, layerSpecification) {
-        super(config, layerSpecification);
-    }
-}
-
-class ApiSource extends MapSource {
-    _styleSpecification;
-    _layerFilter;
-    constructor(id, config, _styleSpecification, _layerFilter) {
-        super(id, config);
-        this._styleSpecification = _styleSpecification;
-        this._layerFilter = _layerFilter;
-    }
-    overrideonInit() {
-        super.onInit();
-        this.createLayers(this._styleSpecification.layers);
-    }
-    getSpecification() {
-        return this._styleSpecification.sources[this.id];
-    }
-    createLayers(layers) {
-        this.layers = layers
-            .filter((layer) => layer.source === this.id)
-            .filter((layer) => !this._layerFilter || this._layerFilter(layer))
-            .map((layer) => {
-            const apiLayer = new ApiLayer(this.config, layer);
-            apiLayer.onInit();
-            return apiLayer;
-        });
-    }
-}
-
-class ApiElement extends MapElement {
-    _http;
-    _mapStyleUrl;
-    _layerFilter;
-    backgroundLayers = [];
-    #visible = false;
-    constructor(config, _http, _mapStyleUrl, _layerFilter) {
-        super(config);
-        this._http = _http;
-        this._mapStyleUrl = _mapStyleUrl;
-        this._layerFilter = _layerFilter;
-    }
-    onInit() {
-        super.onInit();
-        this._http
-            .get(this._mapStyleUrl)
-            .pipe(filter((styleSpecification) => !!styleSpecification), takeUntil(this.unsubscribe))
-            .subscribe((styleSpecification) => {
-            this.#createBackgroundLayers(styleSpecification.layers);
-            this.#createSources(styleSpecification);
-            // If setVisible() was called before these layers were created,
-            // re-apply the current visibility state so the new layers respect it.
-            this.setVisible(this.#visible);
-        });
-    }
-    setVisible(visible) {
-        this.#visible = visible;
-        super.setVisible(visible);
-        this.backgroundLayers.forEach((layer) => layer.setVisible(visible));
-    }
-    #createSources(styleSpecification) {
-        this.sources = Object.entries(styleSpecification.sources).map(([id]) => {
-            const source = new ApiSource(id, this.config, styleSpecification, this._layerFilter);
-            source.onInit();
-            return source;
-        });
-    }
-    // API elements are created from the style specification and this can contain layers of type 'background'
-    // These layers do not have a source and therefore don't fit in the element > source > layer hierarchy
-    // That is why we create these layers from the element itself
-    #createBackgroundLayers(layerSpecifications) {
-        this.backgroundLayers = layerSpecifications
-            .filter((layer) => layer.type === 'background')
-            .map((layerSpecification) => {
-            const apiLayer = new ApiBackgroundLayer(this.config, layerSpecification);
-            apiLayer.onInit();
-            return apiLayer;
-        });
-    }
-}
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ApiBackgroundLayer, ApiElement, ApiLayer, ApiSource, BOUNDS_AMERSFOORT, BOUNDS_NL, COMMON_BOUNDS, DEFAULT_MAP_CONFIG, MapComponent, MapElement, MapElementRepository, MapLayer, MapSource, MaplibreCursorService };
+export { ApiBackgroundLayer, ApiElement, ApiLayer, ApiSource, BOUNDS_AMERSFOORT, BOUNDS_NL, COMMON_BOUNDS, DEFAULT_MAP_CONFIG, MapComponent, MapElement, MapElementRepository, MapLayer, MapSource, MaplibreCursorService, lineWidthFrcSpecification };
 //# sourceMappingURL=ndwnu-map.mjs.map