aviation-chart 0.2.5 → 0.3.0

package/dist/nav-sdk.esm.js

@@ -88,6 +88,1243 @@ var _mlGl = /*#__PURE__*/_mergeNamespaces({
 	default: ku
 }, [_mlGlExports]);
 
+const R$1 = 6371008.8;
+const STROKE_DASHARRAY = {
+    solid: undefined,
+    dashed: [6, 4],
+    dotted: [1, 3],
+    "dash-dot": [8, 4, 2, 4],
+    "long-dash": [12, 6],
+    "double-dash": [6, 2, 6, 8],
+};
+function toRad(deg) {
+    return (deg * Math.PI) / 180;
+}
+function toDeg(rad) {
+    return (rad * 180) / Math.PI;
+}
+function haversineDistance(a, b) {
+    const dLat = toRad(b[1] - a[1]);
+    const dLon = toRad(b[0] - a[0]);
+    const lat1 = toRad(a[1]);
+    const lat2 = toRad(b[1]);
+    const h = Math.sin(dLat / 2) ** 2 +
+        Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLon / 2) ** 2;
+    return 2 * R$1 * Math.asin(Math.sqrt(h));
+}
+function destinationPoint(origin, distanceMeters, bearingDeg) {
+    const d = distanceMeters / R$1;
+    const brng = toRad(bearingDeg);
+    const lat1 = toRad(origin[1]);
+    const lon1 = toRad(origin[0]);
+    const lat2 = Math.asin(Math.sin(lat1) * Math.cos(d) + Math.cos(lat1) * Math.sin(d) * Math.cos(brng));
+    const lon2 = lon1 +
+        Math.atan2(Math.sin(brng) * Math.sin(d) * Math.cos(lat1), Math.cos(d) - Math.sin(lat1) * Math.sin(lat2));
+    return [toDeg(lon2), toDeg(lat2)];
+}
+function circlePolygon(center, radiusMeters, steps = 64) {
+    const coords = [];
+    for (let i = 0; i <= steps; i++) {
+        const bearing = (360 / steps) * i;
+        coords.push(destinationPoint(center, radiusMeters, bearing));
+    }
+    return coords;
+}
+function computeBounds(coords) {
+    let minLng = Infinity, minLat = Infinity, maxLng = -Infinity, maxLat = -Infinity;
+    for (const [lng, lat] of coords) {
+        if (lng < minLng)
+            minLng = lng;
+        if (lng > maxLng)
+            maxLng = lng;
+        if (lat < minLat)
+            minLat = lat;
+        if (lat > maxLat)
+            maxLat = lat;
+    }
+    return [
+        [minLng, minLat],
+        [maxLng, maxLat],
+    ];
+}
+function flattenCoords(rings) {
+    const result = [];
+    for (const ring of rings) {
+        if (!ring)
+            continue;
+        for (const c of ring)
+            result.push(c);
+    }
+    return result;
+}
+function pointInPolygon(point, ring) {
+    const [x, y] = point;
+    let inside = false;
+    for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
+        const [xi, yi] = ring[i];
+        const [xj, yj] = ring[j];
+        if (yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi) {
+            inside = !inside;
+        }
+    }
+    return inside;
+}
+function polylineLength(coords) {
+    let total = 0;
+    for (let i = 1; i < coords.length; i++) {
+        total += haversineDistance(coords[i - 1], coords[i]);
+    }
+    return total;
+}
+function polygonArea(ring) {
+    let area = 0;
+    for (let i = 0; i < ring.length; i++) {
+        const j = (i + 1) % ring.length;
+        const [lng1, lat1] = ring[i];
+        const [lng2, lat2] = ring[j];
+        area += toRad(lng2 - lng1) * (2 + Math.sin(toRad(lat1)) + Math.sin(toRad(lat2)));
+    }
+    return Math.abs((area * R$1 * R$1) / 2);
+}
+
+let circleCounter = 0;
+class Circle {
+    constructor(options) {
+        this._map = null;
+        this._visible = true;
+        this.id = `overlay-circle-${++circleCounter}`;
+        this._center = options.center;
+        this._radius = options.radius;
+        this._options = { ...options };
+        this._sourceId = this.id;
+        this._fillLayerId = `${this.id}-fill`;
+        this._strokeLayerId = `${this.id}-stroke`;
+        this._labelLayerId = `${this.id}-label`;
+    }
+    bindTo(mapOrSdk) {
+        const map = mapOrSdk.map ?? mapOrSdk;
+        this._map = map;
+        this._addToMap();
+        return this;
+    }
+    _ring() {
+        return circlePolygon(this._center, this._radius, this._options.steps ?? 64);
+    }
+    _geojson() {
+        const ring = this._ring();
+        return {
+            type: "FeatureCollection",
+            features: [
+                {
+                    type: "Feature",
+                    properties: { ...this._options.properties, overlayId: this.id, _label: this._options.label ?? "" },
+                    geometry: { type: "Polygon", coordinates: [ring] },
+                },
+                {
+                    type: "Feature",
+                    properties: { overlayId: this.id, _label: this._options.label ?? "", _type: "center" },
+                    geometry: { type: "Point", coordinates: this._center },
+                },
+            ],
+        };
+    }
+    _resolveStrokeDash() {
+        if (this._options.strokeLineType)
+            return STROKE_DASHARRAY[this._options.strokeLineType];
+        return this._options.strokeDasharray;
+    }
+    _addToMap() {
+        const map = this._map;
+        const o = this._options;
+        const before = o.beforeId;
+        const zoomFilter = {};
+        if (o.minZoom != null)
+            zoomFilter.minzoom = o.minZoom;
+        if (o.maxZoom != null)
+            zoomFilter.maxzoom = o.maxZoom;
+        map.addSource(this._sourceId, { type: "geojson", data: this._geojson() });
+        const fillPaint = {
+            "fill-color": o.color ?? "#1890ff",
+            "fill-opacity": o.opacity ?? 0.25,
+            "fill-antialias": o.antialias ?? true,
+        };
+        if (o.fillTranslate)
+            fillPaint["fill-translate"] = o.fillTranslate;
+        if (o.fillPattern)
+            fillPaint["fill-pattern"] = o.fillPattern;
+        map.addLayer({
+            id: this._fillLayerId,
+            type: "fill",
+            source: this._sourceId,
+            filter: ["==", ["geometry-type"], "Polygon"],
+            ...zoomFilter,
+            paint: fillPaint,
+        }, before);
+        const strokePaint = {
+            "line-color": o.strokeColor ?? o.color ?? "#1890ff",
+            "line-width": o.strokeWidth ?? 2,
+            "line-opacity": o.strokeOpacity ?? 0.8,
+        };
+        const dash = this._resolveStrokeDash();
+        if (dash)
+            strokePaint["line-dasharray"] = dash;
+        if (o.strokeBlur)
+            strokePaint["line-blur"] = o.strokeBlur;
+        if (o.strokeTranslate)
+            strokePaint["line-translate"] = o.strokeTranslate;
+        map.addLayer({
+            id: this._strokeLayerId,
+            type: "line",
+            source: this._sourceId,
+            filter: ["==", ["geometry-type"], "Polygon"],
+            ...zoomFilter,
+            layout: {
+                "line-cap": o.strokeLineCap ?? "round",
+                "line-join": o.strokeLineJoin ?? "round",
+            },
+            paint: strokePaint,
+        }, before);
+        if (o.label) {
+            map.addLayer({
+                id: this._labelLayerId,
+                type: "symbol",
+                source: this._sourceId,
+                filter: ["==", ["get", "_type"], "center"],
+                ...zoomFilter,
+                layout: {
+                    "text-field": ["get", "_label"],
+                    "text-size": o.labelSize ?? 14,
+                    "text-anchor": "center",
+                    "text-allow-overlap": true,
+                },
+                paint: {
+                    "text-color": o.labelColor ?? "#333333",
+                    "text-halo-color": o.labelHaloColor ?? "#ffffff",
+                    "text-halo-width": o.labelHaloWidth ?? 1,
+                },
+            }, before);
+        }
+        if (o.cursor) {
+            map.on("mouseenter", this._fillLayerId, () => { map.getCanvas().style.cursor = o.cursor; });
+            map.on("mouseleave", this._fillLayerId, () => { map.getCanvas().style.cursor = ""; });
+        }
+    }
+    _updateSource() {
+        const src = this._map?.getSource(this._sourceId);
+        if (src)
+            src.setData(this._geojson());
+    }
+    getCenter() {
+        return [...this._center];
+    }
+    setCenter(center) {
+        this._center = center;
+        this._updateSource();
+        return this;
+    }
+    getRadius() {
+        return this._radius;
+    }
+    setRadius(radius) {
+        this._radius = radius;
+        this._updateSource();
+        return this;
+    }
+    getBounds() {
+        return computeBounds(this._ring());
+    }
+    contains(lnglat) {
+        return haversineDistance(this._center, lnglat) <= this._radius;
+    }
+    setStyle(style) {
+        const map = this._map;
+        if (!map)
+            return this;
+        if (style.color !== undefined)
+            map.setPaintProperty(this._fillLayerId, "fill-color", style.color);
+        if (style.opacity !== undefined)
+            map.setPaintProperty(this._fillLayerId, "fill-opacity", style.opacity);
+        if (style.fillTranslate !== undefined)
+            map.setPaintProperty(this._fillLayerId, "fill-translate", style.fillTranslate);
+        if (style.fillPattern !== undefined)
+            map.setPaintProperty(this._fillLayerId, "fill-pattern", style.fillPattern);
+        if (style.antialias !== undefined)
+            map.setPaintProperty(this._fillLayerId, "fill-antialias", style.antialias);
+        if (style.strokeColor !== undefined)
+            map.setPaintProperty(this._strokeLayerId, "line-color", style.strokeColor);
+        if (style.strokeWidth !== undefined)
+            map.setPaintProperty(this._strokeLayerId, "line-width", style.strokeWidth);
+        if (style.strokeOpacity !== undefined)
+            map.setPaintProperty(this._strokeLayerId, "line-opacity", style.strokeOpacity);
+        if (style.strokeLineType !== undefined || style.strokeDasharray !== undefined) {
+            Object.assign(this._options, style);
+            const d = this._resolveStrokeDash();
+            map.setPaintProperty(this._strokeLayerId, "line-dasharray", d ?? []);
+        }
+        if (style.strokeBlur !== undefined)
+            map.setPaintProperty(this._strokeLayerId, "line-blur", style.strokeBlur);
+        if (style.strokeTranslate !== undefined)
+            map.setPaintProperty(this._strokeLayerId, "line-translate", style.strokeTranslate);
+        if (style.strokeLineCap !== undefined)
+            map.setLayoutProperty(this._strokeLayerId, "line-cap", style.strokeLineCap);
+        if (style.strokeLineJoin !== undefined)
+            map.setLayoutProperty(this._strokeLayerId, "line-join", style.strokeLineJoin);
+        Object.assign(this._options, style);
+        return this;
+    }
+    setLabel(label) {
+        this._options.label = label;
+        this._updateSource();
+        return this;
+    }
+    show() {
+        this._visible = true;
+        const vis = "visible";
+        this._map?.setLayoutProperty(this._fillLayerId, "visibility", vis);
+        this._map?.setLayoutProperty(this._strokeLayerId, "visibility", vis);
+        if (this._map?.getLayer(this._labelLayerId))
+            this._map.setLayoutProperty(this._labelLayerId, "visibility", vis);
+        return this;
+    }
+    hide() {
+        this._visible = false;
+        const vis = "none";
+        this._map?.setLayoutProperty(this._fillLayerId, "visibility", vis);
+        this._map?.setLayoutProperty(this._strokeLayerId, "visibility", vis);
+        if (this._map?.getLayer(this._labelLayerId))
+            this._map.setLayoutProperty(this._labelLayerId, "visibility", vis);
+        return this;
+    }
+    isVisible() {
+        return this._visible;
+    }
+    remove() {
+        const map = this._map;
+        if (!map)
+            return;
+        for (const lid of [this._labelLayerId, this._strokeLayerId, this._fillLayerId]) {
+            if (map.getLayer(lid))
+                map.removeLayer(lid);
+        }
+        if (map.getSource(this._sourceId))
+            map.removeSource(this._sourceId);
+        this._map = null;
+    }
+}
+
+let textCounter = 0;
+let Text$1 = class Text {
+    constructor(options) {
+        this._map = null;
+        this._visible = true;
+        this.id = `overlay-text-${++textCounter}`;
+        this._position = options.position;
+        this._text = options.text;
+        this._options = { ...options };
+        this._sourceId = this.id;
+        this._layerId = this.id;
+    }
+    bindTo(mapOrSdk) {
+        const map = mapOrSdk.map ?? mapOrSdk;
+        this._map = map;
+        this._addToMap();
+        return this;
+    }
+    _geojson() {
+        return {
+            type: "Feature",
+            properties: {
+                ...this._options.properties,
+                overlayId: this.id,
+                _text: this._text,
+            },
+            geometry: { type: "Point", coordinates: this._position },
+        };
+    }
+    _buildFont() {
+        const o = this._options;
+        if (o.fontFamily)
+            return o.fontFamily;
+        const weight = o.fontWeight === "bold" ? "Bold" : "Regular";
+        const style = o.fontStyle === "italic" ? " Italic" : "";
+        return [`Open Sans ${weight}${style}`, `Arial Unicode MS ${weight}`];
+    }
+    _addToMap() {
+        const map = this._map;
+        const o = this._options;
+        const before = o.beforeId;
+        const zoomFilter = {};
+        if (o.minZoom != null)
+            zoomFilter.minzoom = o.minZoom;
+        if (o.maxZoom != null)
+            zoomFilter.maxzoom = o.maxZoom;
+        map.addSource(this._sourceId, { type: "geojson", data: this._geojson() });
+        const layout = {
+            "text-field": ["get", "_text"],
+            "text-size": o.fontSize ?? 14,
+            "text-anchor": o.anchor ?? "center",
+            "text-rotate": o.rotation ?? 0,
+            "text-offset": o.offset ?? [0, 0],
+            "text-allow-overlap": o.allowOverlap ?? true,
+            "text-ignore-placement": o.ignorePlacement ?? false,
+            "text-max-width": o.maxWidth ?? 10,
+            "text-line-height": o.lineHeight ?? 1.2,
+            "text-letter-spacing": o.letterSpacing ?? 0,
+            "text-font": this._buildFont(),
+        };
+        if (o.justify)
+            layout["text-justify"] = o.justify;
+        const paint = {
+            "text-color": o.color ?? "#000000",
+            "text-opacity": o.opacity ?? 1,
+            "text-halo-color": o.backgroundColor ?? o.haloColor ?? "#ffffff",
+            "text-halo-width": o.backgroundColor ? (o.fontSize ?? 14) * 0.3 : (o.haloWidth ?? 1),
+            "text-halo-blur": o.haloBlur ?? 0,
+        };
+        if (o.translate)
+            paint["text-translate"] = o.translate;
+        map.addLayer({
+            id: this._layerId,
+            type: "symbol",
+            source: this._sourceId,
+            ...zoomFilter,
+            layout,
+            paint,
+        }, before);
+        if (o.cursor) {
+            map.on("mouseenter", this._layerId, () => { map.getCanvas().style.cursor = o.cursor; });
+            map.on("mouseleave", this._layerId, () => { map.getCanvas().style.cursor = ""; });
+        }
+    }
+    _updateSource() {
+        const src = this._map?.getSource(this._sourceId);
+        if (src)
+            src.setData(this._geojson());
+    }
+    getText() {
+        return this._text;
+    }
+    setText(text) {
+        this._text = text;
+        this._updateSource();
+        return this;
+    }
+    getPosition() {
+        return [...this._position];
+    }
+    setPosition(position) {
+        this._position = position;
+        this._updateSource();
+        return this;
+    }
+    setStyle(style) {
+        const map = this._map;
+        if (!map)
+            return this;
+        if (style.color !== undefined)
+            map.setPaintProperty(this._layerId, "text-color", style.color);
+        if (style.opacity !== undefined)
+            map.setPaintProperty(this._layerId, "text-opacity", style.opacity);
+        if (style.haloColor !== undefined)
+            map.setPaintProperty(this._layerId, "text-halo-color", style.haloColor);
+        if (style.haloWidth !== undefined)
+            map.setPaintProperty(this._layerId, "text-halo-width", style.haloWidth);
+        if (style.haloBlur !== undefined)
+            map.setPaintProperty(this._layerId, "text-halo-blur", style.haloBlur);
+        if (style.translate !== undefined)
+            map.setPaintProperty(this._layerId, "text-translate", style.translate);
+        if (style.fontSize !== undefined)
+            map.setLayoutProperty(this._layerId, "text-size", style.fontSize);
+        if (style.rotation !== undefined)
+            map.setLayoutProperty(this._layerId, "text-rotate", style.rotation);
+        if (style.anchor !== undefined)
+            map.setLayoutProperty(this._layerId, "text-anchor", style.anchor);
+        if (style.offset !== undefined)
+            map.setLayoutProperty(this._layerId, "text-offset", style.offset);
+        if (style.justify !== undefined)
+            map.setLayoutProperty(this._layerId, "text-justify", style.justify);
+        if (style.maxWidth !== undefined)
+            map.setLayoutProperty(this._layerId, "text-max-width", style.maxWidth);
+        if (style.lineHeight !== undefined)
+            map.setLayoutProperty(this._layerId, "text-line-height", style.lineHeight);
+        if (style.letterSpacing !== undefined)
+            map.setLayoutProperty(this._layerId, "text-letter-spacing", style.letterSpacing);
+        if (style.fontWeight !== undefined) {
+            this._options.fontWeight = style.fontWeight;
+            map.setLayoutProperty(this._layerId, "text-font", this._buildFont());
+        }
+        Object.assign(this._options, style);
+        return this;
+    }
+    show() {
+        this._visible = true;
+        this._map?.setLayoutProperty(this._layerId, "visibility", "visible");
+        return this;
+    }
+    hide() {
+        this._visible = false;
+        this._map?.setLayoutProperty(this._layerId, "visibility", "none");
+        return this;
+    }
+    isVisible() {
+        return this._visible;
+    }
+    remove() {
+        const map = this._map;
+        if (!map)
+            return;
+        if (map.getLayer(this._layerId))
+            map.removeLayer(this._layerId);
+        if (map.getSource(this._sourceId))
+            map.removeSource(this._sourceId);
+        this._map = null;
+    }
+};
+
+let markerCounter = 0;
+class EnhancedMarker {
+    constructor(options) {
+        this._map = null;
+        this._wrapperEl = null;
+        this._labelEl = null;
+        this._iconEl = null;
+        this._listeners = new Map();
+        this._visible = true;
+        this.id = `overlay-marker-${++markerCounter}`;
+        this._options = { ...options };
+        const element = this._buildElement(options);
+        const markerOpts = {
+            draggable: options.draggable ?? false,
+            rotation: options.angle,
+        };
+        if (element)
+            markerOpts.element = element;
+        else
+            markerOpts.color = options.color ?? "#1890ff";
+        if (options.anchor)
+            markerOpts.anchor = options.anchor;
+        if (options.offset)
+            markerOpts.offset = options.offset;
+        if (options.scale && !element)
+            markerOpts.scale = options.scale;
+        this._marker = new _mlGlExports.Marker(markerOpts).setLngLat(options.position);
+        if (options.popupContent) {
+            this._applyPopup(options.popupContent);
+        }
+        this._setupEvents();
+    }
+    _labelPositionCSS() {
+        const pos = this._options.labelPosition ?? "bottom";
+        switch (pos) {
+            case "top": return "flex-direction:column-reverse;";
+            case "left": return "flex-direction:row-reverse;";
+            case "right": return "flex-direction:row;";
+            default: return "flex-direction:column;";
+        }
+    }
+    _buildElement(opts) {
+        const needCustom = opts.icon || opts.label || opts.className || opts.opacity != null;
+        if (!needCustom)
+            return null;
+        const wrapper = document.createElement("div");
+        wrapper.className = `aviation-marker ${opts.className ?? ""}`.trim();
+        wrapper.style.cssText = `display:flex;${this._labelPositionCSS()}align-items:center;cursor:${opts.cursor ?? "pointer"};opacity:${opts.opacity ?? 1};`;
+        this._wrapperEl = wrapper;
+        if (opts.icon instanceof HTMLElement) {
+            wrapper.appendChild(opts.icon);
+            this._iconEl = opts.icon;
+        }
+        else if (typeof opts.icon === "string") {
+            const img = document.createElement("img");
+            img.src = opts.icon;
+            img.style.cssText = `width:${opts.iconWidth ?? 24}px;height:${opts.iconHeight ?? 24}px;`;
+            img.draggable = false;
+            wrapper.appendChild(img);
+            this._iconEl = img;
+        }
+        if (opts.label) {
+            this._labelEl = this._buildLabelEl(opts);
+            wrapper.appendChild(this._labelEl);
+        }
+        return wrapper;
+    }
+    _buildLabelEl(opts) {
+        const label = document.createElement("span");
+        label.className = opts.labelClassName ?? "aviation-marker-label";
+        label.textContent = opts.label;
+        const lo = opts.labelOffset ?? [0, 2];
+        label.style.cssText = `
+      font-size:${opts.labelFontSize ?? 12}px;
+      color:${opts.labelColor ?? "#333"};
+      background:${opts.labelBackground ?? "rgba(255,255,255,0.85)"};
+      white-space:nowrap;padding:1px 6px;border-radius:3px;
+      margin:${lo[1]}px ${lo[0]}px;
+      pointer-events:none;
+    `;
+        return label;
+    }
+    _applyPopup(content) {
+        const popup = new _mlGlExports.Popup({
+            offset: this._options.popupOffset ?? 25,
+            maxWidth: this._options.popupMaxWidth ?? "240px",
+        });
+        if (typeof content === "string")
+            popup.setHTML(content);
+        else
+            popup.setDOMContent(content);
+        this._marker.setPopup(popup);
+    }
+    _setupEvents() {
+        this._marker.on("dragstart", (e) => this._emit("dragstart", e));
+        this._marker.on("drag", (e) => this._emit("drag", e));
+        this._marker.on("dragend", (e) => this._emit("dragend", e));
+        const el = this._marker.getElement();
+        el.addEventListener("click", (e) => this._emit("click", e));
+        el.addEventListener("dblclick", (e) => this._emit("dblclick", e));
+        el.addEventListener("mouseenter", (e) => this._emit("mouseenter", e));
+        el.addEventListener("mouseleave", (e) => this._emit("mouseleave", e));
+    }
+    bindTo(mapOrSdk) {
+        const map = mapOrSdk.map ?? mapOrSdk;
+        this._map = map;
+        this._marker.addTo(map);
+        if (this._options.popupOpen && this._marker.getPopup()) {
+            this._marker.togglePopup();
+        }
+        return this;
+    }
+    getPosition() {
+        const ll = this._marker.getLngLat();
+        return [ll.lng, ll.lat];
+    }
+    setPosition(position) {
+        this._marker.setLngLat(position);
+        return this;
+    }
+    getLabel() {
+        return this._labelEl?.textContent ?? undefined;
+    }
+    setLabel(label) {
+        if (this._labelEl) {
+            this._labelEl.textContent = label;
+        }
+        else if (this._wrapperEl) {
+            this._options.label = label;
+            this._labelEl = this._buildLabelEl(this._options);
+            this._wrapperEl.appendChild(this._labelEl);
+        }
+        return this;
+    }
+    setLabelStyle(style) {
+        if (!this._labelEl)
+            return this;
+        if (style.labelFontSize !== undefined)
+            this._labelEl.style.fontSize = `${style.labelFontSize}px`;
+        if (style.labelColor !== undefined)
+            this._labelEl.style.color = style.labelColor;
+        if (style.labelBackground !== undefined)
+            this._labelEl.style.background = style.labelBackground;
+        Object.assign(this._options, style);
+        return this;
+    }
+    setIcon(icon) {
+        if (typeof icon === "string" && this._iconEl instanceof HTMLImageElement) {
+            this._iconEl.src = icon;
+        }
+        else if (this._wrapperEl && this._iconEl) {
+            const newEl = icon instanceof HTMLElement ? icon : (() => {
+                const img = document.createElement("img");
+                img.src = icon;
+                img.style.cssText = `width:${this._options.iconWidth ?? 24}px;height:${this._options.iconHeight ?? 24}px;`;
+                img.draggable = false;
+                return img;
+            })();
+            this._wrapperEl.replaceChild(newEl, this._iconEl);
+            this._iconEl = newEl;
+        }
+        return this;
+    }
+    setIconSize(width, height) {
+        this._options.iconWidth = width;
+        this._options.iconHeight = height;
+        if (this._iconEl instanceof HTMLImageElement) {
+            this._iconEl.style.width = `${width}px`;
+            this._iconEl.style.height = `${height}px`;
+        }
+        return this;
+    }
+    getDraggable() {
+        return this._marker.isDraggable();
+    }
+    setDraggable(draggable) {
+        this._marker.setDraggable(draggable);
+        return this;
+    }
+    getAngle() {
+        return this._marker.getRotation();
+    }
+    setAngle(angle) {
+        this._marker.setRotation(angle);
+        return this;
+    }
+    setOpacity(opacity) {
+        this._options.opacity = opacity;
+        this._marker.getElement().style.opacity = String(opacity);
+        return this;
+    }
+    setPopup(content) {
+        this._applyPopup(content);
+        return this;
+    }
+    openPopup() {
+        const popup = this._marker.getPopup();
+        if (popup && !popup.isOpen())
+            this._marker.togglePopup();
+        return this;
+    }
+    closePopup() {
+        const popup = this._marker.getPopup();
+        if (popup && popup.isOpen())
+            this._marker.togglePopup();
+        return this;
+    }
+    show() {
+        this._visible = true;
+        this._marker.getElement().style.display = "";
+        return this;
+    }
+    hide() {
+        this._visible = false;
+        this._marker.getElement().style.display = "none";
+        return this;
+    }
+    isVisible() {
+        return this._visible;
+    }
+    on(event, fn) {
+        if (!this._listeners.has(event))
+            this._listeners.set(event, new Set());
+        this._listeners.get(event).add(fn);
+        return this;
+    }
+    off(event, fn) {
+        this._listeners.get(event)?.delete(fn);
+        return this;
+    }
+    _emit(event, data) {
+        this._listeners.get(event)?.forEach((fn) => fn(data));
+    }
+    remove() {
+        this._marker.remove();
+        this._listeners.clear();
+        this._map = null;
+    }
+}
+
+const LINE_DASHARRAY = {
+    solid: undefined,
+    dashed: [6, 4],
+    dotted: [1, 3],
+    "dash-dot": [8, 4, 2, 4],
+    "long-dash": [12, 6],
+    "double-dash": [6, 2, 6, 8],
+};
+let polylineCounter = 0;
+class Polyline {
+    constructor(options) {
+        this._map = null;
+        this._visible = true;
+        this.id = `overlay-polyline-${++polylineCounter}`;
+        this._path = options.path.map((c) => [...c]);
+        this._options = { ...options };
+        this._sourceId = this.id;
+        this._borderLayerId = `${this.id}-border`;
+        this._layerId = this.id;
+        this._arrowLayerId = `${this.id}-arrow`;
+        this._labelLayerId = `${this.id}-label`;
+    }
+    bindTo(mapOrSdk) {
+        const map = mapOrSdk.map ?? mapOrSdk;
+        this._map = map;
+        this._addToMap();
+        return this;
+    }
+    _geojson() {
+        return {
+            type: "Feature",
+            properties: { ...this._options.properties, overlayId: this.id, _label: this._options.label ?? "" },
+            geometry: { type: "LineString", coordinates: this._path },
+        };
+    }
+    _resolveDasharray() {
+        if (this._options.lineType)
+            return LINE_DASHARRAY[this._options.lineType];
+        return this._options.dasharray;
+    }
+    _addToMap() {
+        const map = this._map;
+        const o = this._options;
+        const before = o.beforeId;
+        map.addSource(this._sourceId, { type: "geojson", data: this._geojson() });
+        if (o.borderWidth && o.borderWidth > 0) {
+            map.addLayer({
+                id: this._borderLayerId,
+                type: "line",
+                source: this._sourceId,
+                ...(o.minZoom != null ? { minzoom: o.minZoom } : {}),
+                ...(o.maxZoom != null ? { maxzoom: o.maxZoom } : {}),
+                layout: {
+                    "line-cap": o.lineCap ?? "round",
+                    "line-join": o.lineJoin ?? "round",
+                },
+                paint: {
+                    "line-color": o.borderColor ?? "#000000",
+                    "line-width": (o.width ?? 2) + (o.borderWidth ?? 0) * 2,
+                    "line-opacity": o.opacity ?? 1,
+                },
+            }, before);
+        }
+        const paint = {
+            "line-color": o.color ?? "#1890ff",
+            "line-width": o.width ?? 2,
+            "line-opacity": o.opacity ?? 1,
+        };
+        const dash = this._resolveDasharray();
+        if (dash)
+            paint["line-dasharray"] = dash;
+        if (o.blur)
+            paint["line-blur"] = o.blur;
+        if (o.offset)
+            paint["line-offset"] = o.offset;
+        if (o.translate)
+            paint["line-translate"] = o.translate;
+        if (o.gradient)
+            paint["line-gradient"] = o.gradient;
+        const layout = {
+            "line-cap": o.lineCap ?? "round",
+            "line-join": o.lineJoin ?? "round",
+        };
+        if (o.miterLimit != null)
+            layout["line-miter-limit"] = o.miterLimit;
+        if (o.roundLimit != null)
+            layout["line-round-limit"] = o.roundLimit;
+        map.addLayer({
+            id: this._layerId,
+            type: "line",
+            source: this._sourceId,
+            ...(o.minZoom != null ? { minzoom: o.minZoom } : {}),
+            ...(o.maxZoom != null ? { maxzoom: o.maxZoom } : {}),
+            layout,
+            paint,
+        }, before);
+        if (o.showArrow) {
+            this._ensureArrowImage(map);
+            map.addLayer({
+                id: this._arrowLayerId,
+                type: "symbol",
+                source: this._sourceId,
+                ...(o.minZoom != null ? { minzoom: o.minZoom } : {}),
+                ...(o.maxZoom != null ? { maxzoom: o.maxZoom } : {}),
+                layout: {
+                    "symbol-placement": "line",
+                    "symbol-spacing": o.arrowSpacing ?? 100,
+                    "icon-image": "__overlay_arrow__",
+                    "icon-size": Math.max(0.6, (o.width ?? 2) / 5),
+                    "icon-allow-overlap": true,
+                    "icon-rotation-alignment": "map",
+                },
+            }, before);
+        }
+        if (o.label) {
+            map.addLayer({
+                id: this._labelLayerId,
+                type: "symbol",
+                source: this._sourceId,
+                ...(o.minZoom != null ? { minzoom: o.minZoom } : {}),
+                ...(o.maxZoom != null ? { maxzoom: o.maxZoom } : {}),
+                layout: {
+                    "symbol-placement": "line",
+                    "symbol-spacing": o.labelSpacing ?? 250,
+                    "text-field": ["get", "_label"],
+                    "text-size": o.labelSize ?? 12,
+                    "text-offset": o.labelOffset ?? [0, -0.8],
+                    "text-allow-overlap": false,
+                    "text-rotation-alignment": "map",
+                },
+                paint: {
+                    "text-color": o.labelColor ?? o.color ?? "#1890ff",
+                    "text-halo-color": o.labelHaloColor ?? "#ffffff",
+                    "text-halo-width": o.labelHaloWidth ?? 1,
+                },
+            }, before);
+        }
+        if (o.cursor) {
+            map.on("mouseenter", this._layerId, () => { map.getCanvas().style.cursor = o.cursor; });
+            map.on("mouseleave", this._layerId, () => { map.getCanvas().style.cursor = ""; });
+        }
+    }
+    _ensureArrowImage(map) {
+        if (map.hasImage("__overlay_arrow__"))
+            return;
+        const size = 16;
+        const data = new Uint8Array(size * size * 4);
+        for (let y = 0; y < size; y++) {
+            for (let x = 0; x < size; x++) {
+                const cx = x - size / 2, cy = y - size / 2;
+                const inArrow = cx >= 0 && Math.abs(cy) <= (size / 2 - cx) * 0.6;
+                const idx = (y * size + x) * 4;
+                if (inArrow) {
+                    data[idx] = 255;
+                    data[idx + 1] = 255;
+                    data[idx + 2] = 255;
+                    data[idx + 3] = 255;
+                }
+            }
+        }
+        map.addImage("__overlay_arrow__", { width: size, height: size, data }, { sdf: true });
+    }
+    _updateSource() {
+        const src = this._map?.getSource(this._sourceId);
+        if (src)
+            src.setData(this._geojson());
+    }
+    getPath() {
+        return this._path.map((c) => [...c]);
+    }
+    setPath(path) {
+        this._path = path.map((c) => [...c]);
+        this._updateSource();
+        return this;
+    }
+    getLength() {
+        return polylineLength(this._path);
+    }
+    getBounds() {
+        return computeBounds(this._path);
+    }
+    setStyle(style) {
+        const map = this._map;
+        if (!map)
+            return this;
+        if (style.color !== undefined) {
+            map.setPaintProperty(this._layerId, "line-color", style.color);
+        }
+        if (style.width !== undefined) {
+            map.setPaintProperty(this._layerId, "line-width", style.width);
+            if (map.getLayer(this._borderLayerId)) {
+                map.setPaintProperty(this._borderLayerId, "line-width", style.width + (this._options.borderWidth ?? 0) * 2);
+            }
+        }
+        if (style.opacity !== undefined) {
+            map.setPaintProperty(this._layerId, "line-opacity", style.opacity);
+            if (map.getLayer(this._borderLayerId))
+                map.setPaintProperty(this._borderLayerId, "line-opacity", style.opacity);
+        }
+        if (style.lineType !== undefined || style.dasharray !== undefined) {
+            Object.assign(this._options, style);
+            const dash = this._resolveDasharray();
+            map.setPaintProperty(this._layerId, "line-dasharray", dash ?? []);
+        }
+        if (style.blur !== undefined)
+            map.setPaintProperty(this._layerId, "line-blur", style.blur);
+        if (style.offset !== undefined)
+            map.setPaintProperty(this._layerId, "line-offset", style.offset);
+        if (style.translate !== undefined)
+            map.setPaintProperty(this._layerId, "line-translate", style.translate);
+        if (style.borderColor !== undefined && map.getLayer(this._borderLayerId)) {
+            map.setPaintProperty(this._borderLayerId, "line-color", style.borderColor);
+        }
+        if (style.lineCap !== undefined)
+            map.setLayoutProperty(this._layerId, "line-cap", style.lineCap);
+        if (style.lineJoin !== undefined)
+            map.setLayoutProperty(this._layerId, "line-join", style.lineJoin);
+        Object.assign(this._options, style);
+        return this;
+    }
+    setLabel(label) {
+        this._options.label = label;
+        this._updateSource();
+        return this;
+    }
+    show() {
+        this._visible = true;
+        const vis = "visible";
+        this._map?.setLayoutProperty(this._layerId, "visibility", vis);
+        if (this._map?.getLayer(this._borderLayerId))
+            this._map.setLayoutProperty(this._borderLayerId, "visibility", vis);
+        if (this._map?.getLayer(this._arrowLayerId))
+            this._map.setLayoutProperty(this._arrowLayerId, "visibility", vis);
+        if (this._map?.getLayer(this._labelLayerId))
+            this._map.setLayoutProperty(this._labelLayerId, "visibility", vis);
+        return this;
+    }
+    hide() {
+        this._visible = false;
+        const vis = "none";
+        this._map?.setLayoutProperty(this._layerId, "visibility", vis);
+        if (this._map?.getLayer(this._borderLayerId))
+            this._map.setLayoutProperty(this._borderLayerId, "visibility", vis);
+        if (this._map?.getLayer(this._arrowLayerId))
+            this._map.setLayoutProperty(this._arrowLayerId, "visibility", vis);
+        if (this._map?.getLayer(this._labelLayerId))
+            this._map.setLayoutProperty(this._labelLayerId, "visibility", vis);
+        return this;
+    }
+    isVisible() {
+        return this._visible;
+    }
+    remove() {
+        const map = this._map;
+        if (!map)
+            return;
+        for (const lid of [this._labelLayerId, this._arrowLayerId, this._layerId, this._borderLayerId]) {
+            if (map.getLayer(lid))
+                map.removeLayer(lid);
+        }
+        if (map.getSource(this._sourceId))
+            map.removeSource(this._sourceId);
+        this._map = null;
+    }
+}
+
+let polygonCounter = 0;
+class EnhancedPolygon {
+    constructor(options) {
+        this._map = null;
+        this._visible = true;
+        this.id = `overlay-polygon-${++polygonCounter}`;
+        this._path = options.path.map((ring) => ring.map((c) => [...c]));
+        this._options = { ...options };
+        this._sourceId = this.id;
+        this._fillLayerId = `${this.id}-fill`;
+        this._strokeLayerId = `${this.id}-stroke`;
+        this._labelLayerId = `${this.id}-label`;
+    }
+    bindTo(mapOrSdk) {
+        const map = mapOrSdk.map ?? mapOrSdk;
+        this._map = map;
+        this._addToMap();
+        return this;
+    }
+    _geojson() {
+        const centroid = this._centroid();
+        return {
+            type: "FeatureCollection",
+            features: [
+                {
+                    type: "Feature",
+                    properties: { ...this._options.properties, overlayId: this.id, _label: this._options.label ?? "" },
+                    geometry: { type: "Polygon", coordinates: this._path },
+                },
+                {
+                    type: "Feature",
+                    properties: { overlayId: this.id, _label: this._options.label ?? "", _type: "centroid" },
+                    geometry: { type: "Point", coordinates: centroid },
+                },
+            ],
+        };
+    }
+    _centroid() {
+        const ring = this._path[0];
+        if (!ring || ring.length === 0)
+            return [0, 0];
+        let lngSum = 0, latSum = 0;
+        for (const [lng, lat] of ring) {
+            lngSum += lng;
+            latSum += lat;
+        }
+        return [lngSum / ring.length, latSum / ring.length];
+    }
+    _resolveStrokeDash() {
+        if (this._options.strokeLineType)
+            return STROKE_DASHARRAY[this._options.strokeLineType];
+        return this._options.strokeDasharray;
+    }
+    _addToMap() {
+        const map = this._map;
+        const o = this._options;
+        const before = o.beforeId;
+        const zoomFilter = {};
+        if (o.minZoom != null)
+            zoomFilter.minzoom = o.minZoom;
+        if (o.maxZoom != null)
+            zoomFilter.maxzoom = o.maxZoom;
+        map.addSource(this._sourceId, { type: "geojson", data: this._geojson() });
+        const fillPaint = {
+            "fill-color": o.color ?? "#1890ff",
+            "fill-opacity": o.opacity ?? 0.25,
+            "fill-antialias": o.antialias ?? true,
+        };
+        if (o.fillTranslate)
+            fillPaint["fill-translate"] = o.fillTranslate;
+        if (o.fillPattern)
+            fillPaint["fill-pattern"] = o.fillPattern;
+        map.addLayer({
+            id: this._fillLayerId,
+            type: "fill",
+            source: this._sourceId,
+            filter: ["==", ["geometry-type"], "Polygon"],
+            ...zoomFilter,
+            paint: fillPaint,
+        }, before);
+        const strokePaint = {
+            "line-color": o.strokeColor ?? o.color ?? "#1890ff",
+            "line-width": o.strokeWidth ?? 2,
+            "line-opacity": o.strokeOpacity ?? 0.8,
+        };
+        const dash = this._resolveStrokeDash();
+        if (dash)
+            strokePaint["line-dasharray"] = dash;
+        if (o.strokeBlur)
+            strokePaint["line-blur"] = o.strokeBlur;
+        if (o.strokeOffset)
+            strokePaint["line-offset"] = o.strokeOffset;
+        if (o.strokeTranslate)
+            strokePaint["line-translate"] = o.strokeTranslate;
+        map.addLayer({
+            id: this._strokeLayerId,
+            type: "line",
+            source: this._sourceId,
+            filter: ["==", ["geometry-type"], "Polygon"],
+            ...zoomFilter,
+            layout: {
+                "line-cap": o.strokeLineCap ?? "round",
+                "line-join": o.strokeLineJoin ?? "round",
+            },
+            paint: strokePaint,
+        }, before);
+        if (o.label) {
+            map.addLayer({
+                id: this._labelLayerId,
+                type: "symbol",
+                source: this._sourceId,
+                filter: ["==", ["get", "_type"], "centroid"],
+                ...zoomFilter,
+                layout: {
+                    "text-field": ["get", "_label"],
+                    "text-size": o.labelSize ?? 14,
+                    "text-anchor": o.labelAnchor ?? "center",
+                    "text-offset": o.labelOffset ?? [0, 0],
+                    "text-allow-overlap": true,
+                },
+                paint: {
+                    "text-color": o.labelColor ?? "#333333",
+                    "text-halo-color": o.labelHaloColor ?? "#ffffff",
+                    "text-halo-width": o.labelHaloWidth ?? 1,
+                },
+            }, before);
+        }
+        if (o.cursor) {
+            map.on("mouseenter", this._fillLayerId, () => { map.getCanvas().style.cursor = o.cursor; });
+            map.on("mouseleave", this._fillLayerId, () => { map.getCanvas().style.cursor = ""; });
+        }
+    }
+    _updateSource() {
+        const src = this._map?.getSource(this._sourceId);
+        if (src)
+            src.setData(this._geojson());
+    }
+    getPath() {
+        return this._path.map((ring) => ring.map((c) => [...c]));
+    }
+    setPath(path) {
+        this._path = path.map((ring) => ring.map((c) => [...c]));
+        this._updateSource();
+        return this;
+    }
+    getArea() {
+        const ring = this._path[0];
+        if (!ring)
+            return 0;
+        return polygonArea(ring);
+    }
+    getBounds() {
+        return computeBounds(flattenCoords(this._path));
+    }
+    contains(lnglat) {
+        const ring = this._path[0];
+        if (!ring)
+            return false;
+        return pointInPolygon(lnglat, ring);
+    }
+    setStyle(style) {
+        const map = this._map;
+        if (!map)
+            return this;
+        if (style.color !== undefined)
+            map.setPaintProperty(this._fillLayerId, "fill-color", style.color);
+        if (style.opacity !== undefined)
+            map.setPaintProperty(this._fillLayerId, "fill-opacity", style.opacity);
+        if (style.fillTranslate !== undefined)
+            map.setPaintProperty(this._fillLayerId, "fill-translate", style.fillTranslate);
+        if (style.fillPattern !== undefined)
+            map.setPaintProperty(this._fillLayerId, "fill-pattern", style.fillPattern);
+        if (style.antialias !== undefined)
+            map.setPaintProperty(this._fillLayerId, "fill-antialias", style.antialias);
+        if (style.strokeColor !== undefined)
+            map.setPaintProperty(this._strokeLayerId, "line-color", style.strokeColor);
+        if (style.strokeWidth !== undefined)
+            map.setPaintProperty(this._strokeLayerId, "line-width", style.strokeWidth);
+        if (style.strokeOpacity !== undefined)
+            map.setPaintProperty(this._strokeLayerId, "line-opacity", style.strokeOpacity);
+        if (style.strokeLineType !== undefined || style.strokeDasharray !== undefined) {
+            Object.assign(this._options, style);
+            const dash = this._resolveStrokeDash();
+            map.setPaintProperty(this._strokeLayerId, "line-dasharray", dash ?? []);
+        }
+        if (style.strokeBlur !== undefined)
+            map.setPaintProperty(this._strokeLayerId, "line-blur", style.strokeBlur);
+        if (style.strokeOffset !== undefined)
+            map.setPaintProperty(this._strokeLayerId, "line-offset", style.strokeOffset);
+        if (style.strokeTranslate !== undefined)
+            map.setPaintProperty(this._strokeLayerId, "line-translate", style.strokeTranslate);
+        if (style.strokeLineCap !== undefined)
+            map.setLayoutProperty(this._strokeLayerId, "line-cap", style.strokeLineCap);
+        if (style.strokeLineJoin !== undefined)
+            map.setLayoutProperty(this._strokeLayerId, "line-join", style.strokeLineJoin);
+        Object.assign(this._options, style);
+        return this;
+    }
+    setLabel(label) {
+        this._options.label = label;
+        this._updateSource();
+        return this;
+    }
+    show() {
+        this._visible = true;
+        const vis = "visible";
+        this._map?.setLayoutProperty(this._fillLayerId, "visibility", vis);
+        this._map?.setLayoutProperty(this._strokeLayerId, "visibility", vis);
+        if (this._map?.getLayer(this._labelLayerId))
+            this._map.setLayoutProperty(this._labelLayerId, "visibility", vis);
+        return this;
+    }
+    hide() {
+        this._visible = false;
+        const vis = "none";
+        this._map?.setLayoutProperty(this._fillLayerId, "visibility", vis);
+        this._map?.setLayoutProperty(this._strokeLayerId, "visibility", vis);
+        if (this._map?.getLayer(this._labelLayerId))
+            this._map.setLayoutProperty(this._labelLayerId, "visibility", vis);
+        return this;
+    }
+    isVisible() {
+        return this._visible;
+    }
+    remove() {
+        const map = this._map;
+        if (!map)
+            return;
+        for (const lid of [this._labelLayerId, this._strokeLayerId, this._fillLayerId]) {
+            if (map.getLayer(lid))
+                map.removeLayer(lid);
+        }
+        if (map.getSource(this._sourceId))
+            map.removeSource(this._sourceId);
+        this._map = null;
+    }
+}
+
 // AMM layer styles — multi-theme support.
 
 // ── Light theme colors ────────────────────────────────────────────────────────
@@ -4073,7 +5310,7 @@ function buildLayersLight() {
         "text-anchor": "bottom",
         "text-justify": "center",
         "text-size": ["interpolate", ["linear"], ["zoom"], 4, 0, 5, 12],
-        "text-offset": ["interpolate", ["linear"], ["zoom"], 4, ["literal", [0, -1.2]], 5, ["literal", [0, -0.6]]],
+        "text-offset": [0, -1.2],
         "icon-allow-overlap": true,
         "icon-ignore-placement": true,
         "text-allow-overlap": true,
@@ -5210,6 +6447,21 @@ class MapSDK {
     addGeoJSON(sourceId, geojson, props) {
         return this.geoJSONManager.addGeoJSON(sourceId, geojson, props);
     }
+    createCircle(options) {
+        return new Circle(options).bindTo(this);
+    }
+    createText(options) {
+        return new Text$1(options).bindTo(this);
+    }
+    createMarker(options) {
+        return new EnhancedMarker(options).bindTo(this);
+    }
+    createPolyline(options) {
+        return new Polyline(options).bindTo(this);
+    }
+    createPolygon(options) {
+        return new EnhancedPolygon(options).bindTo(this);
+    }
     addLayer(layerConfig) {
         this.layerManager.addLayer(layerConfig);
     }
@@ -27034,4 +28286,4 @@ var LngLat = _mlGlExports.LngLat;
 var LngLatBounds = _mlGlExports.LngLatBounds;
 var Marker = _mlGlExports.Marker;
 var Popup = _mlGlExports.Popup;
-export { API, MapSDK as AviationChart, CHART_THEMES, DEFAULT_LAYER_VISIBILITY, DrawPlugin, ErrorManager, GROUP_ALIASES, GeoJSONManager, LAYER_GROUPS, LAYER_LABELS, LayerManager, LngLat, LngLatBounds, _mlGl as MapEngine, MapSDK, Marker, MeasurePlugin, NOTAM, PerformanceManager, PluginManager, Popup, TYPEMAP, WindManager, MapSDK as default, globalConfig };
+export { API, MapSDK as AviationChart, CHART_THEMES, Circle, DEFAULT_LAYER_VISIBILITY, DrawPlugin, EnhancedMarker, EnhancedPolygon, ErrorManager, GROUP_ALIASES, GeoJSONManager, LAYER_GROUPS, LAYER_LABELS, LayerManager, LngLat, LngLatBounds, _mlGl as MapEngine, MapSDK, Marker, MeasurePlugin, NOTAM, PerformanceManager, PluginManager, Polyline, Popup, TYPEMAP, Text$1 as Text, WindManager, MapSDK as default, globalConfig };