@accelint/map-toolkit 1.5.0 → 3.0.0

package/dist/deckgl/shapes/display-shape-layer/index.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License. You may obtain a copy
  * of the License at https://www.apache.org/licenses/LICENSE-2.0
@@ -14,24 +14,22 @@
 'use client';
 
 import { ShapeEvents } from "../shared/events.js";
-import { DASH_ARRAYS, SHAPE_LAYER_IDS } from "../shared/constants.js";
+import { isCircleShape, isLineGeometry, isPointType, isPolygonGeometry } from "../shared/types.js";
+import { DEFAULT_TEXT_SIZE, DEFAULT_TEXT_STYLE } from "../../text-settings.js";
+import { SHAPE_LAYER_IDS } from "../shared/constants.js";
 import { getDashArray, getFillColor, getLineColor } from "../shared/utils/style-utils.js";
-import { COFFIN_CORNERS, DEFAULT_DISPLAY_PROPS, MAP_INTERACTION } from "./constants.js";
+import { BRIGHTNESS_FACTOR, DEFAULT_DISPLAY_PROPS, DISPLAY_EXTENSIONS, HIGHLIGHT_COLOR_TUPLE, MAP_INTERACTION, MATERIAL_SETTINGS } from "./constants.js";
+import { getLabelPosition2d } from "./utils/labels.js";
 import { createShapeLabelLayer } from "./shape-label-layer.js";
-import { getHighlightColor, getHighlightLineWidth, getHoverLineWidth } from "./utils/display-style.js";
+import { applyOverlayOpacity, brightenColor, getHighlightLineWidth, getHoverLineWidth, getOverlayFillColor } from "./utils/display-style.js";
+import { buildIndicatorLineData, classifyElevatedFeatures, createCurtainPolygonFeatures, flattenFeatureTo2D, getFeatureElevation, partitionCurtains } from "./utils/elevation.js";
+import { getIconConfig, getIconLayerProps, getIconUpdateTriggers } from "./utils/icon-config.js";
+import { getRadiusLabelText } from "./utils/radius-label.js";
 import { Broadcast } from "@accelint/bus";
-import { getLogger } from "@accelint/logger";
 import { CompositeLayer } from "@deck.gl/core";
-import { PathStyleExtension } from "@deck.gl/extensions";
-import { GeoJsonLayer, IconLayer } from "@deck.gl/layers";
+import { GeoJsonLayer, LineLayer, TextLayer } from "@deck.gl/layers";
 
 //#region src/deckgl/shapes/display-shape-layer/index.ts
-const logger = getLogger({
-	enabled: process.env.NODE_ENV !== "production",
-	level: "warn",
-	prefix: "[DisplayShapeLayer]",
-	pretty: true
-});
 /**
 * Typed event bus instance for shape events.
 * Provides type-safe event emission for shape interactions.
@@ -46,24 +44,28 @@ const shapeBus = Broadcast.getInstance();
 * ## Features
 * - **Multiple geometry types**: Point, LineString, Polygon, and Circle
 * - **Icon support**: Custom icons for Point geometries via icon atlases
-* - **Interactive selection**: Click handling with dotted border and optional highlight
-* - **Hover effects**: Border/outline width increases on hover for better UX
+* - **Interactive selection**: Click handling with brightness overlay on polygon select, optional highlight outline for non-Point shapes (if showHighlight=true). Point geometries use coffin corner brackets instead.
+* - **Hover effects**: Polygon fills brighten via material lighting; outline width increases by 2px on hover
 * - **Customizable labels**: Flexible label positioning with per-shape or global options
 * - **Style properties**: Full control over colors, border/outline patterns, and opacity
 * - **Event bus integration**: Automatically emits shape events via @accelint/bus
 * - **Multi-map support**: Events include map instance ID for isolation
 *
-* ## Selection Visual Feedback
-* When a shape is selected via `selectedShapeId`:
-* - The shape's border/outline pattern changes to dotted
-* - An optional highlight renders underneath (controlled by `showHighlight` prop)
+* ## Interaction Philosophy
+* Interactions never modify a shape's innate styling. Hover and selection are always
+* additive overlays rendered apart from the main layer using opacity-scaled fill colors
+* and material-based brightness — the base shape is never altered.
 *
 * ## Layer Structure
-* Renders up to four sublayers (in order, bottom to top):
-* 1. **Highlight layer**: Selection highlight effect for non-icon-Point shapes (if showHighlight=true)
-* 2. **Coffin corners layer**: Selection/hover feedback for Point shapes with icons
-* 3. **Main GeoJsonLayer**: Shape geometries with styling and interaction
-* 4. **Label layer**: Text labels (if showLabels enabled)
+* Renders sublayers in this order (bottom to top):
+* 1. **Highlight layer**: Selection outline for non-polygon, non-Point shapes (when showHighlight enabled)
+* 2. **Select layer**: Selection brightness overlay for polygon shapes
+* 3. **Hover layer**: Hover brightness overlay for polygon shapes
+* 4. **Elevation visualization**: Curtains (LineStrings) or wireframes (polygons) — elevation only
+* 5. **Elevation indicators**: Vertical strut lines for elevated non-polygon shapes — elevation only
+* 6. **Main GeoJsonLayer**: Shape geometries with styling and interaction; includes CoffinCornerExtension
+*    which propagates to the icon/scatterplot sublayer for Point hover/select bracket feedback
+* 7. **Label layer**: Text labels (if showLabels enabled)
 *
 * ## Icon Atlas Constraint
 * When using icons for Point geometries, all shapes in a single layer must share the
@@ -124,6 +126,12 @@ const shapeBus = Broadcast.getInstance();
 var DisplayShapeLayer = class extends CompositeLayer {
 	/** Cache for transformed features to avoid recreating objects on every render */
 	featuresCache = null;
+	/** Cache for elevation classification and curtain features */
+	elevationCache = null;
+	/** Cache for elevation indicator line segments */
+	indicatorCache = null;
+	/** Cached coffin corner color tuple — avoids new array reference per render when highlight hasn't changed. */
+	coffinCornerColorCache = null;
 	static layerName = "DisplayShapeLayer";
 	static defaultProps = { ...DEFAULT_DISPLAY_PROPS };
 	/**
@@ -135,19 +143,82 @@ var DisplayShapeLayer = class extends CompositeLayer {
 			lastHoveredId: void 0
 		});
 		this.featuresCache = null;
+		this.elevationCache = null;
+		this.indicatorCache = null;
+		this.coffinCornerColorCache = null;
+	}
+	/**
+	* Resolved highlight color — uses prop if provided, falls back to default.
+	*/
+	get resolvedHighlight() {
+		return this.props.highlightColor ?? HIGHLIGHT_COLOR_TUPLE;
+	}
+	/**
+	* Coffin corner bracket color derived from resolvedHighlight with forced full opacity.
+	* Cached to avoid a new array reference per render triggering deck.gl prop-change detection.
+	*/
+	get coffinCornerColor() {
+		const highlight = this.resolvedHighlight;
+		if (this.coffinCornerColorCache?.source !== highlight) this.coffinCornerColorCache = {
+			source: highlight,
+			color: [
+				highlight[0],
+				highlight[1],
+				highlight[2],
+				255
+			]
+		};
+		return this.coffinCornerColorCache.color;
+	}
+	/**
+	* Handle picking events from the main shapes layer
+	*/
+	handleMainLayerPick(info, mode) {
+		if (mode === "query") this.handleShapeClick(info);
+		if (mode === "hover" || !mode) {
+			if (info.index !== void 0 && info.index !== this.state?.hoverIndex) this.setState({ hoverIndex: info.index });
+			this.handleShapeHover(info);
+		}
+	}
+	/**
+	* Handle picking events from curtain layers and map back to original LineString
+	*/
+	handleCurtainPick(info, mode) {
+		if (!info.object) return;
+		const curtainShapeId = info.object.properties?.shapeId;
+		if (!curtainShapeId) return;
+		const features = this.getFeaturesWithId();
+		const featureIndex = this.featuresCache?.shapeIdToIndex.get(curtainShapeId);
+		if (featureIndex === void 0) return;
+		const modifiedInfo = {
+			...info,
+			index: featureIndex,
+			object: features[featureIndex]
+		};
+		if (mode === "query") this.handleShapeClick(modifiedInfo);
+		if (mode === "hover" || !mode) {
+			if (featureIndex !== this.state?.hoverIndex) this.setState({ hoverIndex: featureIndex });
+			this.handleShapeHover(modifiedInfo);
+		}
+		return modifiedInfo;
 	}
 	/**
 	* Override getPickingInfo to handle events from sublayers
 	* This is the correct pattern for CompositeLayer event handling
 	*/
 	getPickingInfo({ info, mode, sourceLayer }) {
+		if ((mode === "hover" || !mode) && (info.index === void 0 || info.index < 0)) {
+			if (this.state?.hoverIndex !== void 0) this.setState({ hoverIndex: void 0 });
+			this.handleShapeHover(info);
+			return info;
+		}
 		if (sourceLayer?.id === `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY}`) {
-			if (mode === "query") this.handleShapeClick(info);
-			if (mode === "hover" || !mode) {
-				if (info.index !== void 0 && info.index !== this.state?.hoverIndex) this.setState({ hoverIndex: info.index });
-				else if (info.index === void 0 && this.state?.hoverIndex !== void 0) this.setState({ hoverIndex: void 0 });
-				this.handleShapeHover(info);
-			}
+			this.handleMainLayerPick(info, mode);
+			return info;
+		}
+		if (sourceLayer?.id?.includes("-elevation-curtain")) {
+			const curtainInfo = this.handleCurtainPick(info, mode);
+			if (curtainInfo) return curtainInfo;
 		}
 		return info;
 	}
@@ -160,20 +231,25 @@ var DisplayShapeLayer = class extends CompositeLayer {
 		if (this.featuresCache?.data === data) return this.featuresCache.features;
 		const features = [];
 		const shapeIdToIndex = /* @__PURE__ */ new Map();
+		const normalizedLineColors = [];
 		for (const [i, shape] of data.entries()) {
-			features.push({
+			let feature = {
 				...shape.feature,
 				properties: {
 					...shape.feature.properties,
 					shapeId: shape.id
 				}
-			});
+			};
+			if (isPolygonGeometry(feature.geometry) && getFeatureElevation(feature) > 0) feature = flattenFeatureTo2D(feature);
+			features.push(feature);
 			shapeIdToIndex.set(shape.id, i);
+			normalizedLineColors.push(getLineColor(shape.feature));
 		}
 		this.featuresCache = {
 			data,
 			features,
-			shapeIdToIndex
+			shapeIdToIndex,
+			normalizedLineColors
 		};
 		return features;
 	}
@@ -182,10 +258,12 @@ var DisplayShapeLayer = class extends CompositeLayer {
 	* Used by event handlers to get full shape without storing in feature properties.
 	*/
 	getShapeById(shapeId) {
-		return this.props.data.find((shape) => shape.id === shapeId);
+		const index = this.featuresCache?.shapeIdToIndex.get(shapeId);
+		return index !== void 0 ? this.props.data[index] : void 0;
 	}
 	/**
-	* Handle shape click
+	* Handle shape click — emits `shapes:selected` via bus and calls `onShapeClick` callback.
+	* @param info - deck.gl picking info from the clicked sublayer.
 	*/
 	handleShapeClick = (info) => {
 		const { onShapeClick, mapId } = this.props;
@@ -201,208 +279,192 @@ var DisplayShapeLayer = class extends CompositeLayer {
 		if (onShapeClick) onShapeClick(shape);
 	};
 	/**
-	* Handle shape hover
+	* Handle shape hover — emits `shapes:hovered` via bus (deduplicated by shapeId) and calls `onShapeHover` callback.
+	* @param info - deck.gl picking info from the hovered sublayer.
 	*/
 	handleShapeHover = (info) => {
 		const { onShapeHover, mapId } = this.props;
-		const shapeId = info.object?.properties?.shapeId ?? null;
-		const shape = shapeId ? this.getShapeById(shapeId) ?? null : null;
+		const shapeId = info.object?.properties?.shapeId;
+		const shape = shapeId ? this.getShapeById(shapeId) : void 0;
 		if (shapeId !== this.state?.lastHoveredId) {
 			this.setState({ lastHoveredId: shapeId });
 			shapeBus.emit(ShapeEvents.hovered, {
-				shapeId,
+				shapeId: shapeId ?? null,
 				mapId
 			});
 		}
 		if (onShapeHover) onShapeHover(shape);
 	};
 	/**
-	* Render highlight sublayer (underneath main layer)
-	* Note: Points with icons use coffin corners instead of highlight layer
+	* Get or compute elevation-derived data (feature classification + curtain features).
+	* Cached on features identity and applyBaseOpacity to avoid per-frame recomputation.
+	*/
+	getElevationData(features, applyBaseOpacity) {
+		if (this.elevationCache !== null && this.elevationCache.features === features && this.elevationCache.applyBaseOpacity === applyBaseOpacity) return this.elevationCache;
+		const classification = classifyElevatedFeatures(features, getFeatureElevation);
+		const curtainFeatures = createCurtainPolygonFeatures(classification.lines, applyBaseOpacity);
+		this.elevationCache = {
+			features,
+			applyBaseOpacity,
+			classification,
+			curtainFeatures
+		};
+		return {
+			classification,
+			curtainFeatures
+		};
+	}
+	/**
+	* Render highlight sublayer (underneath main layer).
+	* Point geometries skip this layer — they use coffin corner brackets
+	* via CoffinCornerExtension on the main layer's icon/scatterplot sublayer instead.
 	*/
 	renderHighlightLayer(features) {
-		const { selectedShapeId, showHighlight, highlightColor } = this.props;
-		if (!selectedShapeId || showHighlight === false) return null;
-		const selectedFeature = features.find((f) => f.properties?.shapeId === selectedShapeId);
-		if (!selectedFeature) return null;
-		if (selectedFeature.geometry.type === "Point") {
-			if (!!selectedFeature.properties?.styleProperties?.icon) return null;
-		}
-		return new GeoJsonLayer({
+		const { selectedShapeId, showHighlight } = this.props;
+		if (!selectedShapeId || showHighlight === false) return [];
+		const featureIndex = this.featuresCache?.shapeIdToIndex.get(selectedShapeId);
+		const selectedFeature = featureIndex !== void 0 ? features[featureIndex] : void 0;
+		if (!selectedFeature) return [];
+		if (isPointType(selectedFeature.geometry)) return [];
+		const highlightFeature = flattenFeatureTo2D(selectedFeature);
+		const lineColor = this.resolvedHighlight;
+		return [new GeoJsonLayer({
 			id: `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY_HIGHLIGHT}`,
-			data: [selectedFeature],
-			filled: true,
+			data: [highlightFeature],
+			filled: false,
 			stroked: true,
 			lineWidthUnits: "pixels",
 			lineWidthMinPixels: MAP_INTERACTION.LINE_WIDTH_MIN_PIXELS,
-			getFillColor: () => [
-				0,
-				0,
-				0,
-				0
-			],
-			getLineColor: () => highlightColor || getHighlightColor(),
+			getLineColor: lineColor,
 			getLineWidth: getHighlightLineWidth,
 			pickable: false,
 			updateTriggers: {
-				getLineColor: [highlightColor],
+				getLineColor: [this.props.highlightColor],
 				getLineWidth: [selectedShapeId, features]
 			}
-		});
+		})];
 	}
 	/**
-	* Render coffin corners layer for Point geometries that have icons on hover/select
-	* Coffin corners provide visual feedback for points instead of highlight layer
+	* Render selection overlay layer for polygon shapes.
+	* Mirrors renderHoverLayer but triggers on selectedShapeId instead of hover.
+	* When a shape is both selected and hovered, both layers stack for a brighter combined effect.
 	*/
-	renderCoffinCornersLayer(features) {
-		const { selectedShapeId } = this.props;
-		const hoverIndex = this.state?.hoverIndex;
-		const shapeIdToIndex = this.featuresCache?.shapeIdToIndex;
-		if (!shapeIdToIndex) return null;
-		const pointFeatures = features.filter((f) => {
-			if (f.geometry.type !== "Point") return false;
-			if (!!!f.properties?.styleProperties?.icon) return false;
-			const shapeId = f.properties?.shapeId;
-			const isSelected = shapeId === selectedShapeId;
-			const featureIndex = shapeId ? shapeIdToIndex.get(shapeId) : void 0;
-			return isSelected || hoverIndex !== void 0 && featureIndex === hoverIndex;
-		});
-		if (pointFeatures.length === 0) return null;
-		const firstPointIcon = pointFeatures[0]?.properties?.styleProperties?.icon;
-		const iconAtlas = firstPointIcon?.atlas;
-		const iconMapping = firstPointIcon?.mapping;
-		if (!(iconAtlas && iconMapping)) {
-			logger.warn("Point shape has icon style but missing iconAtlas or iconMapping - coffin corners will not render");
-			return null;
-		}
-		const extendedMapping = {
-			...iconMapping,
-			[COFFIN_CORNERS.HOVER_ICON]: {
-				x: 0,
-				y: 0,
-				width: 76,
-				height: 76,
-				mask: false
-			},
-			[COFFIN_CORNERS.SELECTED_ICON]: {
-				x: 76,
-				y: 0,
-				width: 76,
-				height: 76,
-				mask: false
-			},
-			[COFFIN_CORNERS.SELECTED_HOVER_ICON]: {
-				x: 152,
-				y: 0,
-				width: 76,
-				height: 76,
-				mask: false
-			}
-		};
-		return new IconLayer({
-			id: `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY}-coffin-corners`,
-			data: pointFeatures,
-			iconAtlas,
-			iconMapping: extendedMapping,
-			getIcon: (d) => {
-				const shapeId = d.properties?.shapeId;
-				const isSelected = shapeId === selectedShapeId;
-				const featureIndex = shapeId ? shapeIdToIndex.get(shapeId) : void 0;
-				if (isSelected && hoverIndex !== void 0 && featureIndex === hoverIndex) return COFFIN_CORNERS.SELECTED_HOVER_ICON;
-				if (isSelected) return COFFIN_CORNERS.SELECTED_ICON;
-				return COFFIN_CORNERS.HOVER_ICON;
-			},
-			getSize: COFFIN_CORNERS.SIZE,
-			getPosition: (d) => {
-				return d.geometry.type === "Point" ? d.geometry.coordinates : [0, 0];
-			},
-			getPixelOffset: (d) => {
-				return [-1, -(d.properties?.styleProperties?.icon?.size ?? MAP_INTERACTION.ICON_SIZE) / 2];
-			},
-			billboard: false,
+	renderSelectLayer(features) {
+		const { selectedShapeId, enableElevation } = this.props;
+		if (!selectedShapeId) return [];
+		const featureIndex = this.featuresCache?.shapeIdToIndex.get(selectedShapeId);
+		const selectedFeature = featureIndex !== void 0 ? features[featureIndex] : void 0;
+		if (!selectedFeature) return [];
+		if (!isPolygonGeometry(selectedFeature.geometry)) return [];
+		return [new GeoJsonLayer({
+			id: `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY_SELECTION}`,
+			data: [selectedFeature],
+			filled: true,
+			stroked: false,
+			getFillColor: getOverlayFillColor,
+			extruded: enableElevation,
+			getElevation: getFeatureElevation,
+			material: MATERIAL_SETTINGS.HOVER_OR_SELECT,
 			pickable: false,
 			updateTriggers: {
-				getIcon: [selectedShapeId, this.state?.hoverIndex],
-				data: [
-					features,
-					selectedShapeId,
-					this.state?.hoverIndex
-				]
+				data: [features, selectedShapeId],
+				getFillColor: [features],
+				getElevation: [features]
 			}
-		});
+		})];
 	}
 	/**
-	* Extract icon configuration from features in a single pass.
-	* Returns the first icon's atlas and mapping (all shapes share the same atlas).
-	* Uses early return for O(1) best case when first feature has icons.
+	* Render hover layer for all polygon shapes (2D and 3D).
+	* Overlays the shape's base fill with brighter material lighting.
+	* Stacks with other interaction layers (e.g. selection highlight underneath).
 	*/
-	getIconConfig(features) {
-		for (const f of features) {
-			const icon = f.properties?.styleProperties?.icon;
-			if (icon) return {
-				hasIcons: true,
-				atlas: icon.atlas,
-				mapping: icon.mapping
-			};
-		}
-		return { hasIcons: false };
+	renderHoverLayer(features) {
+		const { enableElevation, selectedShapeId } = this.props;
+		const hoverIndex = this.state?.hoverIndex;
+		if (hoverIndex === void 0) return [];
+		const hoveredFeature = features[hoverIndex];
+		if (!hoveredFeature) return [];
+		if (!isPolygonGeometry(hoveredFeature.geometry)) return [];
+		const material = hoveredFeature.properties?.shapeId === selectedShapeId ? MATERIAL_SETTINGS.HOVER_AND_SELECT : MATERIAL_SETTINGS.HOVER_OR_SELECT;
+		return [new GeoJsonLayer({
+			id: `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY}-hover`,
+			data: [hoveredFeature],
+			filled: true,
+			stroked: false,
+			getFillColor: getOverlayFillColor,
+			extruded: enableElevation,
+			getElevation: getFeatureElevation,
+			material,
+			pickable: false,
+			updateTriggers: {
+				data: [features, hoverIndex],
+				getFillColor: [features],
+				getElevation: [features],
+				material: [selectedShapeId, hoverIndex]
+			}
+		})];
 	}
 	/**
 	* Render main shapes layer
 	*/
 	renderMainLayer(features) {
 		const { pickable, applyBaseOpacity, selectedShapeId } = this.props;
-		const { hasIcons, atlas: iconAtlas, mapping: iconMapping } = this.getIconConfig(features);
+		const { hasIcons, atlas: iconAtlas, mapping: iconMapping } = getIconConfig(features);
+		const hoveredFeature = this.state?.hoverIndex !== void 0 ? features[this.state.hoverIndex] : void 0;
+		const hoveredEntityId = hoveredFeature?.geometry.type === "Point" ? hoveredFeature.properties?.shapeId : void 0;
 		return new GeoJsonLayer({
 			id: `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY}`,
 			data: features,
 			filled: true,
 			stroked: true,
 			getFillColor: (d) => getFillColor(d, applyBaseOpacity),
-			getLineColor,
+			getLineColor: (d, info) => {
+				const baseColor = this.featuresCache?.normalizedLineColors[info?.index ?? -1] ?? getLineColor(d);
+				const isHovered = info?.index === this.state?.hoverIndex;
+				const isSelected = d.properties?.shapeId === selectedShapeId;
+				if (isHovered && isSelected) return brightenColor(baseColor, BRIGHTNESS_FACTOR.HOVER_AND_SELECT);
+				if (isHovered || isSelected) return brightenColor(baseColor, BRIGHTNESS_FACTOR.HOVER_OR_SELECT);
+				return baseColor;
+			},
 			getLineWidth: (d, info) => {
+				if (this.props.enableElevation && isLineGeometry(d.geometry) && getFeatureElevation(d) > 0) return d.properties?.styleProperties?.lineWidth ?? 2;
 				return getHoverLineWidth(d, info?.index === this.state?.hoverIndex);
 			},
 			lineWidthUnits: "pixels",
 			lineWidthMinPixels: MAP_INTERACTION.LINE_WIDTH_MIN_PIXELS,
 			lineWidthMaxPixels: 20,
+			extruded: this.props.enableElevation ?? false,
+			getElevation: getFeatureElevation,
+			...this.props.enableElevation ? { material: MATERIAL_SETTINGS.NORMAL } : {},
 			pointType: hasIcons ? "icon" : "circle",
 			getPointRadius: (d) => {
 				return d.properties?.styleProperties?.icon?.size ?? 2;
 			},
 			pointRadiusUnits: "pixels",
-			...hasIcons && iconAtlas ? { iconAtlas } : {},
-			...hasIcons && iconMapping ? { iconMapping } : {},
-			...hasIcons ? {
-				getIcon: (d) => d.properties?.styleProperties?.icon?.name ?? "marker",
-				getIconSize: (d) => {
-					return d.properties?.styleProperties?.icon?.size ?? MAP_INTERACTION.ICON_SIZE;
-				},
-				getIconColor: getLineColor,
-				getIconPixelOffset: (d) => {
-					return [-1, -(d.properties?.styleProperties?.icon?.size ?? MAP_INTERACTION.ICON_SIZE) / 2];
-				},
-				iconBillboard: false
-			} : {},
-			extensions: [new PathStyleExtension({ dash: true })],
-			getDashArray: (d) => {
-				if (d.properties?.shapeId === selectedShapeId) return DASH_ARRAYS.dotted;
-				return getDashArray(d);
-			},
+			...getIconLayerProps(hasIcons, iconAtlas, iconMapping),
+			selectedEntityId: selectedShapeId,
+			hoveredEntityId,
+			getEntityId: (d) => d.properties?.shapeId,
+			selectedCoffinCornerColor: this.coffinCornerColor,
+			extensions: DISPLAY_EXTENSIONS,
+			getDashArray,
 			pickable,
 			autoHighlight: false,
+			...this.props.enableElevation ? { parameters: {
+				depthTest: true,
+				depthCompare: "less-equal"
+			} } : {},
 			updateTriggers: {
 				getFillColor: [features, applyBaseOpacity],
-				getLineColor: [features],
+				getLineColor: [
+					features,
+					this.state?.hoverIndex,
+					selectedShapeId
+				],
 				getLineWidth: [features, this.state?.hoverIndex],
-				getDashArray: [features, selectedShapeId],
+				getDashArray: [features],
 				getPointRadius: [features],
-				...hasIcons ? {
-					getIcon: [features],
-					getIconSize: [features],
-					getIconColor: [features],
-					getIconPixelOffset: [features]
-				} : {}
+				...getIconUpdateTriggers(hasIcons, features)
 			}
 		});
 	}
@@ -415,32 +477,216 @@ var DisplayShapeLayer = class extends CompositeLayer {
 	*/
 	renderLabelsLayer() {
 		const { showLabels, data, labelOptions } = this.props;
-		if (showLabels === "never") return null;
+		if (showLabels === "never") return [];
 		let labelData = data;
 		if (showLabels === "hover") {
 			const hoverIndex = this.state?.hoverIndex;
-			if (hoverIndex === void 0) return null;
+			if (hoverIndex === void 0) return [];
 			const hoveredShape = data[hoverIndex];
 			labelData = hoveredShape ? [hoveredShape] : [];
 		}
-		if (labelData.length === 0) return null;
-		return createShapeLabelLayer({
+		if (labelData.length === 0) return [];
+		return [createShapeLabelLayer({
 			id: `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY_LABELS}`,
 			data: labelData,
 			labelOptions
+		})];
+	}
+	/**
+	* Render radius label layer for hovered circle shapes.
+	* Shows the circle's radius value converted to the configured display unit.
+	*
+	* Positioning relative to the shape's label:
+	* - When showLabels is 'always' or 'hover': appears below the label
+	* - When showLabels is 'never': appears in the label's position
+	*/
+	renderRadiusLabelLayer() {
+		const { data, unit, showLabels, labelOptions } = this.props;
+		const hoverIndex = this.state?.hoverIndex;
+		const hoveredShape = hoverIndex !== void 0 ? data[hoverIndex] : void 0;
+		const radiusText = hoveredShape && isCircleShape(hoveredShape) ? getRadiusLabelText(hoveredShape, unit) : void 0;
+		const labelPosition = radiusText && hoveredShape ? getLabelPosition2d(hoveredShape, labelOptions) : void 0;
+		if (!labelPosition) return [];
+		const pixelOffset = showLabels !== "never" ? [labelPosition.pixelOffset[0], labelPosition.pixelOffset[1] + DEFAULT_TEXT_SIZE + 2] : labelPosition.pixelOffset;
+		return [new TextLayer({
+			id: `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY}-radius-label`,
+			data: [{
+				text: radiusText,
+				position: labelPosition.coordinates
+			}],
+			getText: (d) => d.text,
+			getPosition: (d) => d.position,
+			getPixelOffset: pixelOffset,
+			getTextAnchor: labelPosition.textAnchor,
+			getAlignmentBaseline: labelPosition.alignmentBaseline,
+			...DEFAULT_TEXT_STYLE,
+			getAngle: 0,
+			background: false,
+			fontFamily: "Roboto MonoVariable, monospace",
+			pickable: false,
+			updateTriggers: {
+				getText: [hoverIndex, unit],
+				getPosition: [hoverIndex, labelOptions],
+				getPixelOffset: [
+					hoverIndex,
+					labelOptions,
+					showLabels
+				],
+				getTextAnchor: [hoverIndex, labelOptions],
+				getAlignmentBaseline: [hoverIndex, labelOptions]
+			}
+		})];
+	}
+	/**
+	* Render vertical elevation indicator lines for non-polygon shapes.
+	* Creates vertical "strut" lines from ground level to elevated features.
+	* For LineStrings, creates a "curtain" effect with vertical lines at each coordinate.
+	* Polygons use wireframe extrusion instead.
+	*/
+	renderElevationIndicatorLayer(features, elevatedNonPolygons) {
+		if (elevatedNonPolygons.length === 0) return [];
+		const { selectedShapeId } = this.props;
+		const hoverIndex = this.state?.hoverIndex;
+		const cache = this.indicatorCache;
+		let lineData;
+		if (cache !== null && cache.features === features && cache.selectedShapeId === selectedShapeId && cache.hoverIndex === hoverIndex) lineData = cache.lineData;
+		else {
+			lineData = buildIndicatorLineData(elevatedNonPolygons, features, selectedShapeId, hoverIndex);
+			this.indicatorCache = {
+				features,
+				selectedShapeId,
+				hoverIndex,
+				lineData
+			};
+		}
+		if (lineData.length === 0) return [];
+		return [new LineLayer({
+			id: `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY}-elevation-indicators`,
+			data: lineData,
+			getSourcePosition: (d) => d.source,
+			getTargetPosition: (d) => d.target,
+			getColor: (d) => d.color,
+			getWidth: 2,
+			widthUnits: "pixels",
+			pickable: false,
+			updateTriggers: {
+				data: [
+					features,
+					selectedShapeId,
+					hoverIndex
+				],
+				getColor: [
+					features,
+					selectedShapeId,
+					hoverIndex
+				]
+			}
+		})];
+	}
+	/**
+	* Create a single curtain GeoJsonLayer with shared configuration.
+	*/
+	createCurtainGeoJsonLayer(idSuffix, data, getFillColor$1, dataTriggers, fillColorTriggers) {
+		return new GeoJsonLayer({
+			id: `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY}-${idSuffix}`,
+			data,
+			filled: true,
+			stroked: false,
+			_full3d: true,
+			getFillColor: getFillColor$1,
+			pickable: this.props.pickable ?? true,
+			parameters: {
+				depthTest: true,
+				depthCompare: "less-equal"
+			},
+			updateTriggers: {
+				data: dataTriggers,
+				getFillColor: fillColorTriggers
+			}
 		});
 	}
 	/**
-	* Render all sublayers
+	* Render curtain layers for elevated LineStrings.
+	* Creates three separate layers for main, hovered, and selected states.
+	*/
+	renderCurtainLayers(features, allCurtainFeatures) {
+		const layers = [];
+		const { selectedShapeId } = this.props;
+		const hoverIndex = this.state?.hoverIndex;
+		const hoveredShapeId = hoverIndex !== void 0 && features[hoverIndex] ? features[hoverIndex].properties?.shapeId : void 0;
+		const { main, hovered, selected } = partitionCurtains(allCurtainFeatures, hoveredShapeId, selectedShapeId);
+		const isSelectedHovered = selectedShapeId === hoveredShapeId;
+		const dataTriggers = [
+			features,
+			hoveredShapeId,
+			selectedShapeId
+		];
+		if (main.length > 0) layers.push(this.createCurtainGeoJsonLayer("elevation-curtain", main, (d) => d.properties.fillColor, dataTriggers, [features, this.props.applyBaseOpacity]));
+		if (hovered.length > 0) {
+			const hoveredColor = applyOverlayOpacity(brightenColor(hovered[0].properties.lineColor, BRIGHTNESS_FACTOR.HOVER_OR_SELECT));
+			layers.push(this.createCurtainGeoJsonLayer("elevation-curtain-hover", hovered, () => hoveredColor, dataTriggers, [features]));
+		}
+		if (selected.length > 0) {
+			const factor = isSelectedHovered ? BRIGHTNESS_FACTOR.HOVER_AND_SELECT : BRIGHTNESS_FACTOR.HOVER_OR_SELECT;
+			const selectedColor = applyOverlayOpacity(brightenColor(selected[0].properties.lineColor, factor));
+			layers.push(this.createCurtainGeoJsonLayer("elevation-curtain-selected", selected, () => selectedColor, dataTriggers, [features, isSelectedHovered]));
+		}
+		return layers;
+	}
+	/**
+	* Render elevation visualization layers (curtains for lines, wireframes for polygons).
+	*/
+	renderElevationVisualizationLayer(features, allCurtainFeatures, elevatedPolygons) {
+		const layers = [];
+		if (allCurtainFeatures.length > 0) layers.push(...this.renderCurtainLayers(features, allCurtainFeatures));
+		if (elevatedPolygons.length > 0) {
+			const { applyBaseOpacity } = this.props;
+			layers.push(new GeoJsonLayer({
+				id: `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY}-elevation-wireframe`,
+				data: elevatedPolygons,
+				filled: false,
+				stroked: false,
+				extruded: true,
+				wireframe: true,
+				getElevation: getFeatureElevation,
+				getFillColor: (d) => getFillColor(d, applyBaseOpacity),
+				getLineColor,
+				pickable: false,
+				parameters: {
+					depthTest: true,
+					depthCompare: "less-equal"
+				},
+				updateTriggers: {
+					getElevation: [features],
+					getFillColor: [features, applyBaseOpacity],
+					getLineColor: [features]
+				}
+			}));
+		}
+		return layers;
+	}
+	/**
+	* Render all sublayers.
+	* @returns Ordered array of sublayers (highlight, select, hover, elevation, main, labels) from bottom to top.
 	*/
 	renderLayers() {
 		const features = this.getFeaturesWithId();
-		return [
-			this.renderHighlightLayer(features),
-			this.renderCoffinCornersLayer(features),
-			this.renderMainLayer(features),
-			this.renderLabelsLayer()
-		].filter(Boolean);
+		const enableElevation = this.props.enableElevation ?? false;
+		const layers = [
+			...this.renderHighlightLayer(features),
+			...this.renderSelectLayer(features),
+			...this.renderHoverLayer(features)
+		];
+		if (enableElevation) {
+			const { classification, curtainFeatures } = this.getElevationData(features, this.props.applyBaseOpacity);
+			const { polygons, nonPolygons } = classification;
+			layers.push(...this.renderElevationVisualizationLayer(features, curtainFeatures, polygons));
+			layers.push(...this.renderElevationIndicatorLayer(features, nonPolygons));
+		}
+		layers.push(this.renderMainLayer(features));
+		layers.push(...this.renderLabelsLayer());
+		layers.push(...this.renderRadiusLabelLayer());
+		return layers;
 	}
 };