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

package/fesm2022/ndwnu-map.mjs

@@ -1,16 +1,364 @@
-import { BehaviorSubject, map, Subject, takeUntil } 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';
+import { Map as Map$1 } 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],
-];
+class MapLayer {
+    config;
+    sourceId;
+    layerIdSuffix;
+    initialized = false;
+    unsubscribe = new Subject();
+    constructor(config, sourceId, layerIdSuffix) {
+        this.config = config;
+        this.sourceId = sourceId;
+        this.layerIdSuffix = layerIdSuffix;
+    }
+    get id() {
+        const suffix = this.layerIdSuffix ? `-${this.layerIdSuffix}` : '';
+        return `${this.sourceId}${suffix}`;
+    }
+    get styleLayer() {
+        return this.config.map.getLayer(this.id);
+    }
+    onInit() {
+        // Add the layer to the map, with the correct ordering (beforeId)
+        const beforeId = this.config.mapElementRepository.getBeforeId(this.config.elementId);
+        this.config.map.addLayer(this.getSpecification(), beforeId);
+        // Keeping track of which layers have been added to the map to allow for beforeId determination
+        this.#setupClickHandlers();
+        this.initialized = true;
+    }
+    onDestroy() {
+        this.initialized = false;
+        this.#removeClickHandlers();
+        this.config.map.removeLayer(this.id);
+        this.unsubscribe.next();
+        this.unsubscribe.complete();
+    }
+    setVisible(visible) {
+        this.config.map.setLayoutProperty(this.id, 'visibility', visible ? 'visible' : 'none');
+    }
+    #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?.(event.point, this.#getFeatures(event));
+        });
+        this.config.maplibreCursorService.setMouseCursor(this.config.map, this.id);
+    }
+    #removeClickHandlers() {
+        if (!this.onClick)
+            return;
+        this.config.map.off('click', this.id, (event) => {
+            this.onClick?.(event.point, this.#getFeatures(event));
+        });
+    }
+    #getFeatures(event) {
+        if (event.features && event.features.length > 0) {
+            return this.#distinctFeatures(event.features);
+        }
+        return [];
+    }
+    /**
+     * Filters an array of features to remove duplicates based on their properties.
+     * Two features are considered duplicates if they have identical properties.
+     * Particularly vector sources can yield duplicate features due to the way they
+     * are rendered in tiles.
+     *
+     * @param features - Array of GeoJSON features to filter
+     * @returns Array of unique features with no property duplicates
+     * @private
+     */
+    #distinctFeatures(features) {
+        const seen = new Set();
+        const uniqueFeatures = [];
+        features.forEach((feature) => {
+            const propertiesString = JSON.stringify(feature.properties);
+            if (!seen.has(propertiesString)) {
+                seen.add(propertiesString);
+                uniqueFeatures.push(feature);
+            }
+        });
+        return uniqueFeatures;
+    }
+}
+
+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 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();
+    }
+    get featureCollection$() {
+        return this.#featureCollection$;
+    }
+    set featureCollection$(value) {
+        this.#featureCollection$ = value;
+        this.#subscribeToFeatureCollection();
+    }
+    get isInitialized() {
+        return this.#isInitialized;
+    }
+    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],
@@ -32,11 +380,167 @@ const COMMON_BOUNDS = {
         [3.079667, 50.587611],
         [7.572028, 53.636667],
     ],
-    AMERSFOORT: [
-        [5.34458238242172, 52.11623605695118],
-        [5.446205917577942, 52.21132028216525],
+    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.
@@ -44,6 +548,8 @@ const COMMON_BOUNDS = {
  * 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 */
@@ -55,6 +561,8 @@ class MapElementRepository {
     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
@@ -65,6 +573,13 @@ class MapElementRepository {
      * @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
@@ -162,6 +677,17 @@ class MapElementRepository {
     hideMapElement(elementId) {
         this.setMapElementVisibility(elementId, false);
     }
+    /**
+     * 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();
+        }
+    }
     /**
      * Toggles the visibility of a map element by its ID.
      * If the element is currently visible, it will be hidden, and vice versa.
@@ -199,239 +725,6 @@ class MapElementRepository {
     }
 }
 
-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));
-    }
-}
-
-class MapLayer {
-    config;
-    sourceId;
-    layerIdSuffix;
-    initialized = false;
-    unsubscribe = new Subject();
-    constructor(config, sourceId, layerIdSuffix) {
-        this.config = config;
-        this.sourceId = sourceId;
-        this.layerIdSuffix = layerIdSuffix;
-    }
-    get id() {
-        const suffix = this.layerIdSuffix ? `-${this.layerIdSuffix}` : '';
-        return `${this.sourceId}${suffix}`;
-    }
-    get styleLayer() {
-        return this.config.map.getLayer(this.id);
-    }
-    onInit() {
-        // Add the layer to the map, with the correct ordering (beforeId)
-        const beforeId = this.config.mapElementRepository.getBeforeId(this.config.elementId);
-        this.config.map.addLayer(this.getSpecification(), beforeId);
-        // Keeping track of which layers have been added to the map to allow for beforeId determination
-        this.#setupClickHandlers();
-        this.initialized = true;
-    }
-    onDestroy() {
-        this.initialized = false;
-        this.#removeClickHandlers();
-        this.config.map.removeLayer(this.id);
-        this.unsubscribe.next();
-        this.unsubscribe.complete();
-    }
-    setVisible(visible) {
-        this.config.map.setLayoutProperty(this.id, 'visibility', visible ? 'visible' : 'none');
-    }
-    #setupClickHandlers() {
-        if (!this.onClick)
-            return;
-        this.config.map.on('click', this.id, (event) => {
-            this.onClick?.(this.#getFeatures(event));
-        });
-        this.config.maplibreCursorService.setMouseCursor(this.config.map, this.id);
-    }
-    #removeClickHandlers() {
-        if (!this.onClick)
-            return;
-        this.config.map.off('click', this.id, (event) => {
-            this.onClick?.(this.#getFeatures(event));
-        });
-    }
-    #getFeatures(event) {
-        if (event.features && event.features.length > 0) {
-            return this.#distinctFeatures(event.features);
-        }
-        return [];
-    }
-    /**
-     * Filters an array of features to remove duplicates based on their properties.
-     * Two features are considered duplicates if they have identical properties.
-     * Particularly vector sources can yield duplicate features due to the way they
-     * are rendered in tiles.
-     *
-     * @param features - Array of GeoJSON features to filter
-     * @returns Array of unique features with no property duplicates
-     * @private
-     */
-    #distinctFeatures(features) {
-        const seen = new Set();
-        const uniqueFeatures = [];
-        features.forEach((feature) => {
-            const propertiesString = JSON.stringify(feature.properties);
-            if (!seen.has(propertiesString)) {
-                seen.add(propertiesString);
-                uniqueFeatures.push(feature);
-            }
-        });
-        return uniqueFeatures;
-    }
-}
-
-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());
-        }
-        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();
-    }
-    get featureCollection$() {
-        return this.#featureCollection$;
-    }
-    set featureCollection$(value) {
-        this.#featureCollection$ = value;
-        this.#subscribeToFeatureCollection();
-    }
-    get isInitialized() {
-        return this.#isInitialized;
-    }
-    set isInitialized(value) {
-        this.#isInitialized = value;
-        this.#subscribeToFeatureCollection();
-    }
-    setVisible(visible) {
-        this.layers.forEach((layer) => layer.setVisible(visible));
-    }
-    #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 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(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 }] }] } });
-
 /**
  * Service for managing MapLibre map cursor interactions.
  *
@@ -528,5 +821,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { 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