@angular-helpers/openlayers 0.4.0 → 0.5.0

package/fesm2022/angular-helpers-openlayers-layers.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { inject, signal, computed, Injectable, DestroyRef, input, afterNextRender, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, signal, computed, Injectable, input, ChangeDetectionStrategy, Component, DestroyRef, contentChild, afterNextRender, effect } from '@angular/core';
 import VectorLayer from 'ol/layer/Vector';
+import HeatmapLayer from 'ol/layer/Heatmap';
 import TileLayer from 'ol/layer/Tile';
 import ImageLayer from 'ol/layer/Image';
 import VectorSource from 'ol/source/Vector';
@@ -16,7 +17,15 @@ import XYZ from 'ol/source/XYZ';
 import TileWMS from 'ol/source/TileWMS';
 import ImageWMS from 'ol/source/ImageWMS';
 import ImageStatic from 'ol/source/ImageStatic';
+import GeoJSON from 'ol/format/GeoJSON';
+import TopoJSON from 'ol/format/TopoJSON';
+import KML from 'ol/format/KML';
 import { OlMapService } from '@angular-helpers/openlayers/core';
+import WebGLVectorLayer from 'ol/layer/WebGLVector';
+import WebGLTileLayer from 'ol/layer/WebGLTile';
+import WebGLVectorTileLayer from 'ol/layer/WebGLVectorTile';
+import VectorTileSource from 'ol/source/VectorTile';
+import MVT from 'ol/format/MVT';
 
 // OlLayerService
 /**
@@ -58,6 +67,8 @@ class OlLayerService {
         switch (config.type) {
             case 'vector':
                 return this.createVectorLayer(config, map);
+            case 'heatmap':
+                return this.createHeatmapLayer(config, map);
             case 'tile':
                 return this.createTileLayer(config, map);
             case 'image':
@@ -93,6 +104,12 @@ class OlLayerService {
             layer.setVisible(visible);
             this.updateLayerState();
         }
+        else {
+            const pending = this.pendingConfigs.find((c) => c.id === id);
+            if (pending) {
+                pending.visible = visible;
+            }
+        }
     }
     toggleVisibility(id) {
         const layer = this.layerCache.get(id);
@@ -110,6 +127,12 @@ class OlLayerService {
             layer.setOpacity(opacity);
             this.updateLayerState();
         }
+        else {
+            const pending = this.pendingConfigs.find((c) => c.id === id);
+            if (pending) {
+                pending.opacity = opacity;
+            }
+        }
     }
     setZIndex(id, zIndex) {
         const layer = this.layerCache.get(id);
@@ -117,6 +140,35 @@ class OlLayerService {
             layer.setZIndex(zIndex);
             this.updateLayerState();
         }
+        else {
+            const pending = this.pendingConfigs.find((c) => c.id === id);
+            if (pending) {
+                pending.zIndex = zIndex;
+            }
+        }
+    }
+    setHeatmapProperties(id, props) {
+        const layer = this.layerCache.get(id);
+        if (layer instanceof HeatmapLayer) {
+            if (props.blur !== undefined)
+                layer.setBlur(props.blur);
+            if (props.radius !== undefined)
+                layer.setRadius(props.radius);
+            if (props.weight !== undefined)
+                layer.setWeight(props.weight);
+        }
+        else {
+            const pending = this.pendingConfigs.find((c) => c.id === id);
+            if (pending && pending.type === 'heatmap') {
+                const heatmapConfig = pending;
+                if (props.blur !== undefined)
+                    heatmapConfig.blur = props.blur;
+                if (props.radius !== undefined)
+                    heatmapConfig.radius = props.radius;
+                if (props.weight !== undefined)
+                    heatmapConfig.weight = props.weight;
+            }
+        }
     }
     isVisible(id) {
         return this.layerCache.get(id)?.getVisible() ?? false;
@@ -166,19 +218,27 @@ class OlLayerService {
             : source;
         if (!(vectorSource instanceof VectorSource))
             return;
-        // Get existing feature IDs from source
-        const existingIds = new Set(vectorSource
-            .getFeatures()
-            .map((f) => f.getId())
-            .filter((id) => id !== undefined));
-        // Only add features that don't already exist in the source
-        if (features && features.length > 0) {
-            const newFeatures = features.filter((f) => !existingIds.has(f.id));
-            if (newFeatures.length > 0) {
-                const olFeatures = newFeatures.map((feature) => {
+        // Sync features: remove old ones, update existing ones, add new ones
+        if (features) {
+            const newFeatureIds = new Set(features.map((f) => f.id));
+            const sourceFeatures = vectorSource.getFeatures();
+            // 1. Remove features that are no longer in the input
+            sourceFeatures.forEach((f) => {
+                const id = f.getId();
+                if (id !== undefined && !newFeatureIds.has(id)) {
+                    vectorSource.removeFeature(f);
+                }
+            });
+            // 2. Only add features that don't already exist in the source
+            const existingIds = new Set(vectorSource
+                .getFeatures()
+                .map((f) => f.getId())
+                .filter((id) => id !== undefined));
+            const featuresToAdd = features.filter((f) => !existingIds.has(f.id));
+            if (featuresToAdd.length > 0) {
+                const olFeatures = featuresToAdd.map((feature) => {
                     const geom = feature.geometry;
                     let geometry;
-                    // Validate coordinates exist before processing
                     if (!geom.coordinates) {
                         geometry = new Point([0, 0]);
                     }
@@ -196,7 +256,6 @@ class OlLayerService {
                     }
                     else if (geom.type === 'Circle') {
                         const center = fromLonLat(geom.coordinates);
-                        // Approximate radius in meters - use 1000m as default if not specified
                         geometry = new Circle(center, geom.radius ?? 1000);
                     }
                     else {
@@ -219,7 +278,13 @@ class OlLayerService {
     updateLayerState() {
         const layers = [];
         this.layerCache.forEach((layer, id) => {
-            const type = layer instanceof VectorLayer ? 'vector' : layer instanceof TileLayer ? 'tile' : 'image';
+            let type = 'vector';
+            if (layer instanceof HeatmapLayer)
+                type = 'heatmap';
+            else if (layer instanceof TileLayer)
+                type = 'tile';
+            else if (layer instanceof ImageLayer)
+                type = 'image';
             layers.push({
                 id,
                 type: type,
@@ -231,7 +296,17 @@ class OlLayerService {
         this.layerState.set(layers.sort((a, b) => a.zIndex - b.zIndex));
     }
     createVectorLayer(config, map) {
-        const vectorSource = new VectorSource();
+        const sourceOptions = {};
+        if (config.url && config.format) {
+            sourceOptions.url = config.url;
+            if (config.format === 'geojson')
+                sourceOptions.format = new GeoJSON();
+            else if (config.format === 'topojson')
+                sourceOptions.format = new TopoJSON();
+            else if (config.format === 'kml')
+                sourceOptions.format = new KML();
+        }
+        const vectorSource = new VectorSource(sourceOptions);
         // Add features if provided
         if (config.features && config.features.length > 0) {
             const olFeatures = config.features.map((feature) => {
@@ -305,58 +380,10 @@ class OlLayerService {
                 stroke: new Stroke({ color: '#d32f2f', width: 2 }),
             }),
         });
-        // Cluster style: shows count badge when features are clustered
-        const clusterStyleFn = (olFeature) => {
-            const features = olFeature.get('features');
-            const size = features?.length ?? 1;
-            if (size > 1) {
-                const showCount = clusterCfg?.showCount ?? true;
-                return new Style({
-                    image: new Circle$1({
-                        radius: 15 + Math.min(size * 2, 15),
-                        fill: new Fill({ color: 'rgba(255, 100, 100, 0.8)' }),
-                        stroke: new Stroke({ color: '#fff', width: 2 }),
-                    }),
-                    text: showCount
-                        ? new Text({
-                            text: String(size),
-                            fill: new Fill({ color: '#fff' }),
-                        })
-                        : undefined,
-                });
-            }
-            // Single feature: get the original feature from the cluster and use its style
-            const originalFeatures = olFeature.get('features');
-            const originalFeature = originalFeatures?.[0];
-            if (originalFeature) {
-                const abstractStyle = originalFeature.get(STYLE_PROP);
-                if (abstractStyle) {
-                    const style = new Style();
-                    const { icon, fill, stroke } = abstractStyle;
-                    if (icon?.src) {
-                        style.setImage(new Icon({
-                            src: icon.src,
-                            ...(icon.size ? { size: icon.size } : {}),
-                            ...(icon.anchor ? { anchor: icon.anchor } : {}),
-                        }));
-                    }
-                    if (fill) {
-                        style.setFill(new Fill({ color: fill.color }));
-                    }
-                    if (stroke) {
-                        style.setStroke(new Stroke({ color: stroke.color, width: stroke.width }));
-                    }
-                    // If we mapped at least one property, return it, otherwise fallback
-                    if (icon?.src || fill || stroke)
-                        return style;
-                }
-            }
-            return defaultStyle;
-        };
-        // Per-feature style resolver: features carrying `style` render it.
-        // Structural type avoids importing `FeatureLike` from `ol/Feature`;
-        // tooling has been observed to auto-remove the unused-looking import.
-        const styleFn = (olFeature) => {
+        // Resolved style: priority to stashed metadata, then config-level style, then default.
+        const userStyle = config.style;
+        const styleFn = (olFeature, resolution) => {
+            // 1. Per-feature style metadata (stashed via STYLE_PROP)
             const abstractStyle = olFeature.get(STYLE_PROP);
             if (abstractStyle) {
                 const style = new Style();
@@ -377,8 +404,59 @@ class OlLayerService {
                 if (icon?.src || fill || stroke)
                     return style;
             }
+            // 2. Layer-level style from config (supports functions or static styles)
+            if (userStyle) {
+                if (typeof userStyle === 'function') {
+                    // Check if it's already an OL native feature or wrap if needed
+                    // For simplicity in the demo, we pass the feature as-is or mapped
+                    const feature = {
+                        id: String(olFeature.getId() ?? ''),
+                        geometry: {
+                            type: olFeature.getGeometry()?.getType(),
+                            coordinates: [], // coordinates not easily reversible without extra work
+                        },
+                        properties: olFeature.getProperties(),
+                    };
+                    return userStyle(feature, resolution);
+                }
+                return userStyle;
+            }
             return defaultStyle;
         };
+        // Cluster style: shows count badge when features are clustered, else delegates to styleFn
+        const clusterStyleFn = (olFeature, resolution) => {
+            const features = olFeature.get('features');
+            const size = features?.length ?? 1;
+            if (size > 1) {
+                const showCount = clusterCfg?.showCount ?? true;
+                return new Style({
+                    image: new Circle$1({
+                        radius: 15 + Math.min(size * 2, 15),
+                        fill: new Fill({ color: 'rgba(255, 100, 100, 0.8)' }),
+                        stroke: new Stroke({ color: '#fff', width: 2 }),
+                    }),
+                    text: showCount
+                        ? new Text({
+                            text: String(size),
+                            fill: new Fill({ color: '#fff' }),
+                        })
+                        : undefined,
+                });
+            }
+            // Single feature in cluster: unwrap and call styleFn
+            const originalFeature = features?.[0];
+            if (originalFeature) {
+                // We MUST preserve the original geometry if it's a non-point ( spiderfication etc)
+                const style = styleFn(originalFeature, resolution);
+                if (style instanceof Style) {
+                    const origGeom = originalFeature.getGeometry();
+                    if (origGeom)
+                        style.setGeometry(origGeom);
+                }
+                return style;
+            }
+            return styleFn(olFeature, resolution);
+        };
         const layer = new VectorLayer({
             source,
             visible: config.visible ?? true,
@@ -392,6 +470,56 @@ class OlLayerService {
         this.updateLayerState();
         return { id: config.id };
     }
+    createHeatmapLayer(config, map) {
+        const vectorSource = new VectorSource();
+        if (config.features && config.features.length > 0) {
+            const olFeatures = config.features.map((feature) => {
+                const geom = feature.geometry;
+                let geometry;
+                if (!geom.coordinates) {
+                    geometry = new Point([0, 0]);
+                }
+                else if (geom.type === 'Point') {
+                    const coords = geom.coordinates;
+                    geometry = new Point(fromLonLat(coords));
+                }
+                else if (geom.type === 'LineString') {
+                    const coords = geom.coordinates.map((c) => fromLonLat(c));
+                    geometry = new LineString(coords);
+                }
+                else if (geom.type === 'Polygon') {
+                    const rings = geom.coordinates.map((ring) => ring.map((c) => fromLonLat(c)));
+                    geometry = new Polygon(rings);
+                }
+                else {
+                    geometry = new Point([0, 0]);
+                }
+                const olFeature = new OLFeature({
+                    geometry,
+                    ...feature.properties,
+                });
+                olFeature.setId(feature.id);
+                return olFeature;
+            });
+            vectorSource.addFeatures(olFeatures);
+        }
+        const layer = new HeatmapLayer({
+            source: vectorSource,
+            visible: config.visible ?? true,
+            opacity: config.opacity ?? 1,
+            zIndex: config.zIndex,
+            ...(config.blur !== undefined && { blur: config.blur }),
+            ...(config.radius !== undefined && { radius: config.radius }),
+            ...(config.weight !== undefined && {
+                weight: config.weight,
+            }),
+        });
+        layer.set('id', config.id);
+        map.addLayer(layer);
+        this.layerCache.set(config.id, layer);
+        this.updateLayerState();
+        return { id: config.id };
+    }
     createTileLayer(config, map) {
         let source;
         switch (config.source.type) {
@@ -404,7 +532,7 @@ class OlLayerService {
             case 'wms':
                 source = new TileWMS({
                     url: config.source.url,
-                    params: config.source.params,
+                    params: config.source.params ?? {},
                     attributions: config.source.attributions,
                 });
                 break;
@@ -446,36 +574,69 @@ class OlLayerService {
         this.updateLayerState();
         return { id: config.id };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlLayerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlLayerService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlLayerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlLayerService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlLayerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlLayerService, decorators: [{
             type: Injectable
         }] });
 
+class OlClusterComponent {
+    distance = input(40, ...(ngDevMode ? [{ debugName: "distance" }] : /* istanbul ignore next */ []));
+    minDistance = input(20, ...(ngDevMode ? [{ debugName: "minDistance" }] : /* istanbul ignore next */ []));
+    showCount = input(true, ...(ngDevMode ? [{ debugName: "showCount" }] : /* istanbul ignore next */ []));
+    featureStyle = input(...(ngDevMode ? [undefined, { debugName: "featureStyle" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlClusterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: OlClusterComponent, isStandalone: true, selector: "ol-cluster", inputs: { distance: { classPropertyName: "distance", publicName: "distance", isSignal: true, isRequired: false, transformFunction: null }, minDistance: { classPropertyName: "minDistance", publicName: "minDistance", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, featureStyle: { classPropertyName: "featureStyle", publicName: "featureStyle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlClusterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ol-cluster',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { distance: [{ type: i0.Input, args: [{ isSignal: true, alias: "distance", required: false }] }], minDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDistance", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], featureStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureStyle", required: false }] }] } });
+
 // OlVectorLayerComponent
 class OlVectorLayerComponent {
     layerService = inject(OlLayerService);
     destroyRef = inject(DestroyRef);
     id = input.required(...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     features = input([], ...(ngDevMode ? [{ debugName: "features" }] : /* istanbul ignore next */ []));
+    url = input(...(ngDevMode ? [undefined, { debugName: "url" }] : /* istanbul ignore next */ []));
+    format = input(...(ngDevMode ? [undefined, { debugName: "format" }] : /* istanbul ignore next */ []));
     zIndex = input(0, ...(ngDevMode ? [{ debugName: "zIndex" }] : /* istanbul ignore next */ []));
     opacity = input(1, ...(ngDevMode ? [{ debugName: "opacity" }] : /* istanbul ignore next */ []));
     visible = input(true, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
     style = input(...(ngDevMode ? [undefined, { debugName: "style" }] : /* istanbul ignore next */ []));
     cluster = input(...(ngDevMode ? [undefined, { debugName: "cluster" }] : /* istanbul ignore next */ []));
+    clusterComponent = contentChild(OlClusterComponent, ...(ngDevMode ? [{ debugName: "clusterComponent" }] : /* istanbul ignore next */ []));
     constructor() {
         // Initialize layer after DOM is ready
         afterNextRender(() => {
+            const clusterCmp = this.clusterComponent();
+            const resolvedClusterConfig = this.cluster() ??
+                (clusterCmp
+                    ? {
+                        enabled: true,
+                        distance: clusterCmp.distance(),
+                        minDistance: clusterCmp.minDistance(),
+                        showCount: clusterCmp.showCount(),
+                        featureStyle: clusterCmp.featureStyle(),
+                    }
+                    : undefined);
             this.layerService.addLayer({
                 id: this.id(),
                 type: 'vector',
                 features: this.features(),
+                url: this.url(),
+                format: this.format(),
                 zIndex: this.zIndex(),
                 opacity: this.opacity(),
                 visible: this.visible(),
                 style: this.style(),
-                cluster: this.cluster(),
+                cluster: resolvedClusterConfig,
             });
         });
         // Effect to sync features when input changes
@@ -486,22 +647,31 @@ class OlVectorLayerComponent {
                 this.layerService.updateFeatures(this.id(), currentFeatures);
             }
         });
+        effect(() => {
+            this.layerService.setOpacity(this.id(), this.opacity());
+        });
+        effect(() => {
+            this.layerService.setVisibility(this.id(), this.visible());
+        });
+        effect(() => {
+            this.layerService.setZIndex(this.id(), this.zIndex());
+        });
         // Cleanup when component is destroyed
         this.destroyRef.onDestroy(() => {
             this.layerService.removeLayer(this.id());
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlVectorLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: OlVectorLayerComponent, isStandalone: true, selector: "ol-vector-layer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, cluster: { classPropertyName: "cluster", publicName: "cluster", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlVectorLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.13", type: OlVectorLayerComponent, isStandalone: true, selector: "ol-vector-layer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, cluster: { classPropertyName: "cluster", publicName: "cluster", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "clusterComponent", first: true, predicate: OlClusterComponent, descendants: true, isSignal: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlVectorLayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlVectorLayerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ol-vector-layer',
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], features: [{ type: i0.Input, args: [{ isSignal: true, alias: "features", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], opacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacity", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], cluster: [{ type: i0.Input, args: [{ isSignal: true, alias: "cluster", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], features: [{ type: i0.Input, args: [{ isSignal: true, alias: "features", required: false }] }], url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], opacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacity", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], cluster: [{ type: i0.Input, args: [{ isSignal: true, alias: "cluster", required: false }] }], clusterComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OlClusterComponent), { isSignal: true }] }] } });
 
 // OlTileLayerComponent
 class OlTileLayerComponent {
@@ -532,15 +702,24 @@ class OlTileLayerComponent {
                 visible: this.visible(),
             });
         });
+        effect(() => {
+            this.layerService.setOpacity(this.id(), this.opacity());
+        });
+        effect(() => {
+            this.layerService.setVisibility(this.id(), this.visible());
+        });
+        effect(() => {
+            this.layerService.setZIndex(this.id(), this.zIndex());
+        });
         // Cleanup when component is destroyed
         this.destroyRef.onDestroy(() => {
             this.layerService.removeLayer(this.id());
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlTileLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: OlTileLayerComponent, isStandalone: true, selector: "ol-tile-layer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, attributions: { classPropertyName: "attributions", publicName: "attributions", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlTileLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: OlTileLayerComponent, isStandalone: true, selector: "ol-tile-layer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, attributions: { classPropertyName: "attributions", publicName: "attributions", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlTileLayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlTileLayerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ol-tile-layer',
@@ -583,10 +762,10 @@ class OlImageLayerComponent {
             this.layerService.removeLayer(this.id());
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlImageLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: OlImageLayerComponent, isStandalone: true, selector: "ol-image-layer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, sourceType: { classPropertyName: "sourceType", publicName: "sourceType", isSignal: true, isRequired: true, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: true, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, imageExtent: { classPropertyName: "imageExtent", publicName: "imageExtent", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlImageLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: OlImageLayerComponent, isStandalone: true, selector: "ol-image-layer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, sourceType: { classPropertyName: "sourceType", publicName: "sourceType", isSignal: true, isRequired: true, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: true, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, imageExtent: { classPropertyName: "imageExtent", publicName: "imageExtent", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlImageLayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlImageLayerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ol-image-layer',
@@ -595,6 +774,378 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], sourceType: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceType", required: true }] }], url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: true }] }], params: [{ type: i0.Input, args: [{ isSignal: true, alias: "params", required: false }] }], imageExtent: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageExtent", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], opacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacity", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }] } });
 
+class OlHeatmapLayerComponent {
+    layerService = inject(OlLayerService);
+    mapService = inject(OlMapService);
+    destroyRef = inject(DestroyRef);
+    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    features = input([], ...(ngDevMode ? [{ debugName: "features" }] : /* istanbul ignore next */ []));
+    zIndex = input(0, ...(ngDevMode ? [{ debugName: "zIndex" }] : /* istanbul ignore next */ []));
+    opacity = input(1, ...(ngDevMode ? [{ debugName: "opacity" }] : /* istanbul ignore next */ []));
+    visible = input(true, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    blur = input(15, ...(ngDevMode ? [{ debugName: "blur" }] : /* istanbul ignore next */ []));
+    radius = input(8, ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    /** Unit for radius and blur: 'pixels' (default) or 'meters' */
+    radiusUnit = input('pixels', ...(ngDevMode ? [{ debugName: "radiusUnit" }] : /* istanbul ignore next */ []));
+    weight = input(...(ngDevMode ? [undefined, { debugName: "weight" }] : /* istanbul ignore next */ []));
+    /** Computed radius in pixels based on current resolution if unit is 'meters' */
+    scaledRadius = computed(() => {
+        const r = this.radius();
+        if (this.radiusUnit() === 'pixels')
+            return r;
+        return r / this.mapService.resolution();
+    }, ...(ngDevMode ? [{ debugName: "scaledRadius" }] : /* istanbul ignore next */ []));
+    /** Computed blur in pixels based on current resolution if unit is 'meters' */
+    scaledBlur = computed(() => {
+        const b = this.blur();
+        if (this.radiusUnit() === 'pixels')
+            return b;
+        return b / this.mapService.resolution();
+    }, ...(ngDevMode ? [{ debugName: "scaledBlur" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => {
+            this.layerService.addLayer({
+                id: this.id(),
+                type: 'heatmap',
+                features: this.features(),
+                zIndex: this.zIndex(),
+                opacity: this.opacity(),
+                visible: this.visible(),
+                blur: this.scaledBlur(),
+                radius: this.scaledRadius(),
+                weight: this.weight(),
+            });
+        });
+        effect(() => {
+            const currentFeatures = this.features();
+            if (this.layerService.getLayer(this.id())) {
+                this.layerService.updateFeatures(this.id(), currentFeatures);
+            }
+        });
+        effect(() => {
+            this.layerService.setOpacity(this.id(), this.opacity());
+        });
+        effect(() => {
+            this.layerService.setVisibility(this.id(), this.visible());
+        });
+        effect(() => {
+            this.layerService.setZIndex(this.id(), this.zIndex());
+        });
+        effect(() => {
+            this.layerService.setHeatmapProperties(this.id(), {
+                blur: this.scaledBlur(),
+                radius: this.scaledRadius(),
+                weight: this.weight(),
+            });
+        });
+        this.destroyRef.onDestroy(() => {
+            this.layerService.removeLayer(this.id());
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlHeatmapLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: OlHeatmapLayerComponent, isStandalone: true, selector: "ol-heatmap-layer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, blur: { classPropertyName: "blur", publicName: "blur", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, radiusUnit: { classPropertyName: "radiusUnit", publicName: "radiusUnit", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlHeatmapLayerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ol-heatmap-layer',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], features: [{ type: i0.Input, args: [{ isSignal: true, alias: "features", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], opacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacity", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], blur: [{ type: i0.Input, args: [{ isSignal: true, alias: "blur", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], radiusUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "radiusUnit", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }] } });
+
+// OlWebGLVectorLayerComponent
+// GPU-accelerated vector layer for large datasets (10k+ features).
+// Uses FlatStyleLike instead of ol/style/Style. Must be manually disposed.
+/**
+ * GPU-accelerated vector layer for rendering large datasets.
+ *
+ * Important: Uses WebGL 2 for rendering. Styles must be provided as
+ * `FlatStyleLike` objects (not `ol/style/Style` instances).
+ * Hit detection is disabled by default for performance.
+ *
+ * @usageNotes
+ * ```html
+ * <ol-webgl-vector-layer
+ *   id="big-dataset"
+ *   [features]="largeDataset()"
+ *   [flatStyle]="{
+ *     'circle-radius': 6,
+ *     'circle-fill-color': ['match', ['get', 'type'], 'alert', 'red', 'blue'],
+ *     'stroke-color': '#333',
+ *     'stroke-width': 1
+ *   }"
+ *   [disableHitDetection]="true">
+ * </ol-webgl-vector-layer>
+ * ```
+ */
+class OlWebGLVectorLayerComponent {
+    mapService = inject(OlMapService);
+    destroyRef = inject(DestroyRef);
+    /** Unique layer identifier */
+    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Features to render */
+    features = input([], ...(ngDevMode ? [{ debugName: "features" }] : /* istanbul ignore next */ []));
+    /** WebGL flat style (required — no default provided) */
+    flatStyle = input.required(...(ngDevMode ? [{ debugName: "flatStyle" }] : /* istanbul ignore next */ []));
+    /** Z-index for layer ordering */
+    zIndex = input(0, ...(ngDevMode ? [{ debugName: "zIndex" }] : /* istanbul ignore next */ []));
+    /** Opacity (0–1) */
+    opacity = input(1, ...(ngDevMode ? [{ debugName: "opacity" }] : /* istanbul ignore next */ []));
+    /** Layer visibility */
+    visible = input(true, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    /** Disable hit detection for better performance (default: true) */
+    disableHitDetection = input(true, ...(ngDevMode ? [{ debugName: "disableHitDetection" }] : /* istanbul ignore next */ []));
+    /** Style variables for dynamic expressions (e.g. `['var', 'threshold']`) */
+    variables = input(...(ngDevMode ? [undefined, { debugName: "variables" }] : /* istanbul ignore next */ []));
+    layer = null;
+    vectorSource = new VectorSource();
+    constructor() {
+        afterNextRender(() => {
+            const map = this.mapService.getMap();
+            if (!map)
+                return;
+            this.syncFeatures(this.features());
+            try {
+                this.layer = new WebGLVectorLayer({
+                    source: this.vectorSource,
+                    style: this.flatStyle(),
+                    visible: this.visible(),
+                    opacity: this.opacity(),
+                    zIndex: this.zIndex(),
+                    disableHitDetection: this.disableHitDetection(),
+                    ...(this.variables() ? { variables: this.variables() } : {}),
+                });
+                this.layer.set('id', this.id());
+                map.addLayer(this.layer);
+            }
+            catch (err) {
+                // WebGL Vector Layer failed to initialize (e.g., not supported by browser)
+            }
+        });
+        // Reactive feature sync
+        effect(() => {
+            const currentFeatures = this.features();
+            if (this.layer) {
+                this.syncFeatures(currentFeatures);
+            }
+        });
+        // Reactive style updates
+        effect(() => {
+            this.layer?.setStyle(this.flatStyle());
+        });
+        effect(() => {
+            this.layer?.setOpacity(this.opacity());
+        });
+        effect(() => {
+            this.layer?.setVisible(this.visible());
+        });
+        effect(() => {
+            this.layer?.setZIndex(this.zIndex());
+        });
+        effect(() => {
+            const vars = this.variables();
+            if (vars && this.layer) {
+                this.layer.updateStyleVariables(vars);
+            }
+        });
+        // CRITICAL: WebGL layers must be manually disposed
+        this.destroyRef.onDestroy(() => {
+            const map = this.mapService.getMap();
+            if (map && this.layer) {
+                map.removeLayer(this.layer);
+                try {
+                    this.layer.dispose();
+                }
+                catch {
+                    // Ignore WebGL layer disposal errors (e.g., reading 'deleteBuffer' if renderer not fully initialized)
+                }
+            }
+        });
+    }
+    syncFeatures(features) {
+        this.vectorSource.clear();
+        if (!features?.length)
+            return;
+        const olFeatures = features.map((feature) => {
+            const geom = feature.geometry;
+            let geometry;
+            if (!geom.coordinates) {
+                geometry = new Point([0, 0]);
+            }
+            else if (geom.type === 'Point') {
+                geometry = new Point(fromLonLat(geom.coordinates));
+            }
+            else if (geom.type === 'LineString') {
+                geometry = new LineString(geom.coordinates.map((c) => fromLonLat(c)));
+            }
+            else if (geom.type === 'Polygon') {
+                geometry = new Polygon(geom.coordinates.map((ring) => ring.map((c) => fromLonLat(c))));
+            }
+            else if (geom.type === 'Circle') {
+                const center = fromLonLat(geom.coordinates);
+                geometry = new Circle(center, geom.radius ?? 1000);
+            }
+            else {
+                geometry = new Point([0, 0]);
+            }
+            const olFeature = new OLFeature({
+                geometry,
+                ...feature.properties,
+            });
+            olFeature.setId(feature.id);
+            return olFeature;
+        });
+        this.vectorSource.addFeatures(olFeatures);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlWebGLVectorLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: OlWebGLVectorLayerComponent, isStandalone: true, selector: "ol-webgl-vector-layer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: false, transformFunction: null }, flatStyle: { classPropertyName: "flatStyle", publicName: "flatStyle", isSignal: true, isRequired: true, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, disableHitDetection: { classPropertyName: "disableHitDetection", publicName: "disableHitDetection", isSignal: true, isRequired: false, transformFunction: null }, variables: { classPropertyName: "variables", publicName: "variables", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlWebGLVectorLayerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ol-webgl-vector-layer',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], features: [{ type: i0.Input, args: [{ isSignal: true, alias: "features", required: false }] }], flatStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "flatStyle", required: true }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], opacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacity", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], disableHitDetection: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableHitDetection", required: false }] }], variables: [{ type: i0.Input, args: [{ isSignal: true, alias: "variables", required: false }] }] } });
+
+// OlWebGLTileLayerComponent
+// GPU-accelerated tile layer with style expressions for color manipulation.
+/**
+ * GPU-accelerated tile layer with color/brightness/contrast expressions.
+ *
+ * Supports the same tile sources as `ol-tile-layer` but renders via WebGL,
+ * enabling GPU-powered color manipulation (brightness, contrast, saturation, gamma).
+ *
+ * @usageNotes
+ * ```html
+ * <ol-webgl-tile-layer
+ *   id="satellite-webgl"
+ *   source="xyz"
+ *   [url]="'https://server.arcgisonline.com/.../{z}/{y}/{x}'"
+ *   [tileStyle]="{ brightness: 0.1, contrast: 0.2 }">
+ * </ol-webgl-tile-layer>
+ * ```
+ */
+class OlWebGLTileLayerComponent {
+    mapService = inject(OlMapService);
+    destroyRef = inject(DestroyRef);
+    /** Unique layer identifier */
+    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Tile source type */
+    source = input.required(...(ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []));
+    /** Tile URL template (required for 'xyz' and 'mvt') */
+    url = input(...(ngDevMode ? [undefined, { debugName: "url" }] : /* istanbul ignore next */ []));
+    /** Attribution text */
+    attributions = input(...(ngDevMode ? [undefined, { debugName: "attributions" }] : /* istanbul ignore next */ []));
+    /** WebGL tile style (raster expressions) or flat style (MVT) */
+    tileStyle = input(...(ngDevMode ? [undefined, { debugName: "tileStyle" }] : /* istanbul ignore next */ []));
+    /** Z-index for layer ordering */
+    zIndex = input(0, ...(ngDevMode ? [{ debugName: "zIndex" }] : /* istanbul ignore next */ []));
+    /** Opacity (0–1) */
+    opacity = input(1, ...(ngDevMode ? [{ debugName: "opacity" }] : /* istanbul ignore next */ []));
+    /** Layer visibility */
+    visible = input(true, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    /** Preload low-res tiles up to this many zoom levels */
+    preload = input(0, ...(ngDevMode ? [{ debugName: "preload" }] : /* istanbul ignore next */ []));
+    layer = null;
+    constructor() {
+        afterNextRender(() => {
+            const map = this.mapService.getMap();
+            if (!map)
+                return;
+            let tileSource;
+            switch (this.source()) {
+                case 'mvt':
+                    tileSource = new VectorTileSource({
+                        format: new MVT(),
+                        url: this.url(),
+                        attributions: this.attributions(),
+                    });
+                    this.layer = new WebGLVectorTileLayer({
+                        source: tileSource,
+                        visible: this.visible(),
+                        opacity: this.opacity(),
+                        zIndex: this.zIndex(),
+                        style: this.tileStyle() || {},
+                    });
+                    break;
+                case 'xyz':
+                    tileSource = new XYZ({
+                        url: this.url(),
+                        attributions: this.attributions(),
+                    });
+                    this.layer = new WebGLTileLayer({
+                        source: tileSource,
+                        visible: this.visible(),
+                        opacity: this.opacity(),
+                        zIndex: this.zIndex(),
+                        preload: this.preload(),
+                        ...(this.tileStyle() ? { style: this.tileStyle() } : {}),
+                    });
+                    break;
+                case 'osm':
+                default:
+                    tileSource = new OSM({
+                        attributions: this.attributions(),
+                    });
+                    this.layer = new WebGLTileLayer({
+                        source: tileSource,
+                        visible: this.visible(),
+                        opacity: this.opacity(),
+                        zIndex: this.zIndex(),
+                        preload: this.preload(),
+                        ...(this.tileStyle() ? { style: this.tileStyle() } : {}),
+                    });
+                    break;
+            }
+            if (this.layer) {
+                this.layer.set('id', this.id());
+                map.addLayer(this.layer);
+            }
+        });
+        effect(() => {
+            this.layer?.setOpacity(this.opacity());
+        });
+        effect(() => {
+            this.layer?.setVisible(this.visible());
+        });
+        effect(() => {
+            this.layer?.setZIndex(this.zIndex());
+        });
+        effect(() => {
+            const style = this.tileStyle();
+            if (style && this.layer) {
+                if (this.source() === 'mvt') {
+                    this.layer.setStyle(style);
+                }
+                else {
+                    this.layer.setStyle(style);
+                }
+            }
+        });
+        // WebGL tile layers also need manual dispose
+        this.destroyRef.onDestroy(() => {
+            const map = this.mapService.getMap();
+            if (map && this.layer) {
+                map.removeLayer(this.layer);
+                this.layer.dispose();
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlWebGLTileLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: OlWebGLTileLayerComponent, isStandalone: true, selector: "ol-webgl-tile-layer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, attributions: { classPropertyName: "attributions", publicName: "attributions", isSignal: true, isRequired: false, transformFunction: null }, tileStyle: { classPropertyName: "tileStyle", publicName: "tileStyle", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, preload: { classPropertyName: "preload", publicName: "preload", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlWebGLTileLayerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ol-webgl-tile-layer',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: true }] }], url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], attributions: [{ type: i0.Input, args: [{ isSignal: true, alias: "attributions", required: false }] }], tileStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tileStyle", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], opacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacity", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], preload: [{ type: i0.Input, args: [{ isSignal: true, alias: "preload", required: false }] }] } });
+
 // Provider functions
 function withLayers() {
     return { kind: 'layers', providers: [OlLayerService] };
@@ -609,4 +1160,4 @@ function provideLayers() {
  * Generated bundle index. Do not edit.
  */
 
-export { OlImageLayerComponent, OlLayerService, OlTileLayerComponent, OlVectorLayerComponent, provideLayers, withLayers };
+export { OlClusterComponent, OlHeatmapLayerComponent, OlImageLayerComponent, OlLayerService, OlTileLayerComponent, OlVectorLayerComponent, OlWebGLTileLayerComponent, OlWebGLVectorLayerComponent, provideLayers, withLayers };