bbl-mapbox-react 0.0.22 → 0.0.23

package/dist/index.mjs

@@ -3932,8 +3932,8 @@ var RectangleRenderer = class e {
 	}
 };
 const EntityPopup = ({ popupState: e, onClose: r, portalContainer: i, popupRef: s }) => {
-	let c = useRef(null), [l, u] = useState("entering"), [d, p] = useState(!1), h = useRef(e.position), g = useRef(!1), _ = s || c;
-	g.current || (h.current = e.position), useEffect(() => {
+	let c = useRef(null), [l, u] = useState("entering"), [d, p] = useState(!1), g = useRef(e.position), _ = useRef(!1), v = s || c;
+	_.current || (g.current = e.position), useEffect(() => {
 		let e = setTimeout(() => {
 			p(!0);
 		}, 60);
@@ -3944,19 +3944,19 @@ const EntityPopup = ({ popupState: e, onClose: r, portalContainer: i, popupRef:
 			return () => clearTimeout(e);
 		}
 	}, [l, d]);
-	let v = useCallback(() => {
-		e.config.animation === "none" ? r() : (g.current = !0, u("exiting"), setTimeout(() => r(), 200));
+	let y = useCallback(() => {
+		e.config.animation === "none" ? r() : (_.current = !0, u("exiting"), setTimeout(() => r(), 200));
 	}, [e.config.animation, r]);
 	useEffect(() => {
 		if (!e.config.closeOnEscape) return;
 		let t = (e) => {
-			e.key === "Escape" && v();
+			e.key === "Escape" && y();
 		};
 		return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
-	}, [e.config.closeOnEscape, v]), useEffect(() => {
+	}, [e.config.closeOnEscape, y]), useEffect(() => {
 		if (!e.config.closeOnClickOutside) return;
 		let t = (e) => {
-			_.current && !_.current.contains(e.target) && v();
+			v.current && !v.current.contains(e.target) && y();
 		}, n = setTimeout(() => {
 			document.addEventListener("click", t, !0);
 		}, 0);
@@ -3965,10 +3965,10 @@ const EntityPopup = ({ popupState: e, onClose: r, portalContainer: i, popupRef:
 		};
 	}, [
 		e.config.closeOnClickOutside,
-		v,
-		_
+		y,
+		v
 	]);
-	let y = () => {
+	let b = () => {
 		switch (e.actualPosition) {
 			case "top": return "center bottom";
 			case "bottom": return "center top";
@@ -3977,25 +3977,25 @@ const EntityPopup = ({ popupState: e, onClose: r, portalContainer: i, popupRef:
 			case "center":
 			default: return "center center";
 		}
-	}, b = h.current, x = /* @__PURE__ */ jsxs("div", {
-		ref: _,
+	}, x = g.current, S = /* @__PURE__ */ jsxs("div", {
+		ref: v,
 		className: `entity-popup ${d ? `entity-popup--${l} animation-${e.config.animation}` : ""} ${e.config.className || ""}`,
 		style: {
 			position: "fixed",
-			left: `${b.x}px`,
-			top: `${b.y}px`,
+			left: `${x.x}px`,
+			top: `${x.y}px`,
 			maxWidth: e.config.maxWidth,
 			zIndex: e.config.zIndex,
 			pointerEvents: "all",
 			opacity: d ? void 0 : 0,
-			transformOrigin: y(),
+			transformOrigin: b(),
 			...e.config.style
 		},
 		role: "dialog",
 		"aria-modal": "true",
 		children: [e.config.showCloseButton && /* @__PURE__ */ jsx("button", {
 			className: "entity-popup__close",
-			onClick: v,
+			onClick: y,
 			"aria-label": "Close popup",
 			children: "×"
 		}), /* @__PURE__ */ jsx("div", {
@@ -4003,24 +4003,24 @@ const EntityPopup = ({ popupState: e, onClose: r, portalContainer: i, popupRef:
 			children: e.config.content
 		})]
 	});
-	return createPortal(x, i);
+	return createPortal(S, i);
 };
 var location_default = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20t='1768373933818'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20p-id='30344'%20width='200'%20height='200'%3e%3cpath%20d='M400.440142%201024h-0.073136a48.781895%2048.781895%200%200%201-45.490763-31.448598L3.383306%2066.061072a48.781895%2048.781895%200%200%201%2062.897196-62.897197l926.563466%20351.419801a48.928168%2048.928168%200%200%201%200.219409%2091.127799L597.761811%20597.688654l-151.904042%20395.082157a48.781895%2048.781895%200%200%201-45.490763%2031.229189zM133.053921%20132.907627l267.678766%20705.691916%20113.87318-296.201913a48.855032%2048.855032%200%200%201%2028.011193-27.938057l296.201913-113.87318-705.765052-267.678766z'%20p-id='30345'%20fill='%23ffffff'%20/%3e%3cscript%20xmlns=''%20/%3e%3c/svg%3e";
 function CoordinateDisplay({ map: e, precision: r = 6, className: i = "", style: s }) {
-	let [c, l] = useState(null), [u, d] = useState(!1), f = useRef(void 0), h = useCallback((e) => {
+	let [c, l] = useState(null), [u, d] = useState(!1), f = useRef(void 0), g = useCallback((e) => {
 		l({
 			lng: Number(e.lngLat.lng.toFixed(r)),
 			lat: Number(e.lngLat.lat.toFixed(r))
 		});
 	}, [r]);
 	useEffect(() => {
-		if (e) return e.on("mousemove", h), () => {
-			e.off("mousemove", h);
+		if (e) return e.on("mousemove", g), () => {
+			e.off("mousemove", g);
 		};
-	}, [e, h]), useEffect(() => () => {
+	}, [e, g]), useEffect(() => () => {
 		f.current && clearTimeout(f.current);
 	}, []);
-	let g = useCallback(() => {
+	let _ = useCallback(() => {
 		if (!c) return;
 		let e = `${c.lng},${c.lat}`;
 		navigator.clipboard.writeText(e).then(() => {
@@ -4030,7 +4030,7 @@ function CoordinateDisplay({ map: e, precision: r = 6, className: i = "", style:
 	return c ? /* @__PURE__ */ jsxs("div", {
 		className: `mapbox-coordinate-display ${u ? "mapbox-coordinate-display--copied" : ""} ${i}`,
 		style: s,
-		onClick: g,
+		onClick: _,
 		title: "点击复制坐标",
 		children: [/* @__PURE__ */ jsx("img", {
 			src: location_default,
@@ -4155,7 +4155,7 @@ function ResetViewControl({ map: e, initialCenter: t, initialZoom: n, initialPit
 		}), /* @__PURE__ */ jsx("span", { children: "复位" })]
 	});
 }
-var road_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20t='1769487141027'%20class='icon'%20viewBox='0%200%201517%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='2644'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='189.625'%20height='128'%3e%3cpath%20d='M1.68121071-242.12320149h1508.24640296v1508.24640298h-1508.24640296z'%20fill='%23ffffff'%20fill-opacity='0'%20p-id='2645'%3e%3c/path%3e%3cpath%20d='M437.30078846%20170.6624h682.66239999v682.6624H437.30078846z'%20fill='%23ffffff'%20fill-opacity='0'%20p-id='2646'%3e%3c/path%3e%3cpath%20d='M1151.68343834%2040.66710748H373.42829443A81.76345149%2081.76345149%200%200%200%20292.90207634%20121.49379654v784.42363608c0%2040.42218191%2036.92257893%2077.41545989%2080.5262181%2077.4154599h781.6133488a81.76345149%2081.76345149%200%200%200%2080.52621814-80.82668906V121.49379654C1232.08593315%2077.76643404%201195.25172802%2040.66710748%201151.6657636%2040.66710748z%20m-325.39237822%20616.14222197H618.29445458V451.37556451h53.66057906c6.71640976%200%2013.41514477-3.35820487%2020.11387975-6.73408452l97.28189301-100.99359314h134.18679716v208.72127078c-46.96184405%2013.50351858-87.22495312%2053.90802574-97.28189299%20104.4048223z%20m130.7932427-20.23760311c23.50743418%200%2043.65666346%2020.21992834%2043.65666349%2043.76271204a44.50505206%2044.50505206%200%200%201-43.62131391%2043.7803868%2044.50505206%2044.50505206%200%200%201-43.6036392-43.7803868c0-23.54278369%2020.096205-43.76271203%2043.6036392-43.76271204h-0.05302433zM564.63387554%20926.10201142H373.42829443a22.87114272%2022.87114272%200%200%201-16.79102442-6.71640975%2023.04789036%2023.04789036%200%200%201-6.71640975-16.82637394V714.02253578h214.73069002v212.07947564z%20m0-269.31035673H349.92086026V118.13559167c0-10.1453137%2010.05693988-20.2376031%2023.50743417-20.23760309h553.4321645v188.53669194h-147.54891766c-6.69873499%200-13.39747001%203.35820487-20.096205%206.71640977l-97.28189297%2097.653063H460.61789801a26.44144475%2026.44144475%200%200%200-19.08874355%207.79457028%2026.63586714%2026.63586714%200%200%200-7.72387123%2019.1594426c0%2016.80869917%2013.39747001%2026.90098858%2026.81261478%2026.90098857h104.03365227v212.13249995z%20m610.48629795%20245.71454877c0.17674763%206.29221547-2.24469484%2012.37233377-6.68106024%2016.84404869s-10.49880895%206.89315739-16.77334965%206.75175927h-533.42433329v-212.0971504H829.63159021c13.39747001%2057.24855586%2067.07572382%2097.65306301%20127.48806219%2097.653063a128.67227125%20128.67227125%200%200%200%2093.05762473-37.87701612%20129.60903367%20129.60903367%200%200%200%2037.73561801-93.39344522c0-64.00031515-46.96184405-117.8553166-103.98062799-128.00063029v-208.73894554h194.56378599v558.91134088h-3.35820489v-0.05302427z%20m0-616.07152294H980.57406228V97.89798858h171.10937607c13.39747001%200%2023.45440988%2010.07461465%2023.4544099%2023.59580796v164.94088398z'%20fill='%23ffffff'%20p-id='2647'%3e%3c/path%3e%3c/svg%3e", LAYER_ID_PREFIX = "road-highlight-", KNOWN_SOURCES = [
+var LAYER_ID_PREFIX = "road-highlight-", KNOWN_SOURCES = [
 	{
 		source: "composite",
 		sourceLayer: "road"
@@ -4182,10 +4182,10 @@ function detectVectorSource(e) {
 	};
 	return null;
 }
-function RoadHighlightControl({ map: e, highlightWidth: r = 3, defaultRoadTypes: i = [], defaultMinWidth: c = 0, source: l, sourceLayer: u, classField: d = "class", className: f = "", style: p }) {
-	let [g, _] = useState(!1), [v, y] = useState(i), [b, x] = useState(!1), S = useRef(!1), ye = useRef(null), C = useRef(null), w = useRef(null), T = useCallback((e, t, n) => {
+const RoadHighlightControl = forwardRef(({ map: e, highlightWidth: i = 3, defaultRoadTypes: c = [], defaultMinWidth: l = 0, source: u, sourceLayer: d, classField: _ = "class", className: v = "", style: y, showButton: b = !0 }, x) => {
+	let [S, C] = useState(!1), [w, ve] = useState(c), [T, E] = useState(!1), [D, ye] = useState(null), be = useRef(!1), k = useRef(null), A = useRef(null), j = useRef(null), xe = useCallback((e, t, n) => {
 		if (!e.isStyleLoaded() || !e.getSource(t)) return !1;
-		let i = !0;
+		let r = !0;
 		return ROAD_TYPE_OPTIONS.forEach((a) => {
 			let o = `${LAYER_ID_PREFIX}${a.class}`;
 			if (!e.getLayer(o)) try {
@@ -4196,50 +4196,50 @@ function RoadHighlightControl({ map: e, highlightWidth: r = 3, defaultRoadTypes:
 					"source-layer": n,
 					filter: [
 						"==",
-						["get", d],
+						["get", _],
 						a.class
 					],
 					paint: {
 						"line-color": a.color,
-						"line-width": r,
+						"line-width": i,
 						"line-opacity": .8
 					},
 					layout: { visibility: "none" }
 				}), console.log(`Added road highlight layer: ${o} (source: ${t}, source-layer: ${n})`);
 			} catch (e) {
-				console.error(`Failed to add road highlight layer for ${a.class}:`, e), i = !1;
+				console.error(`Failed to add road highlight layer for ${a.class}:`, e), r = !1;
 			}
-		}), i;
-	}, [r, d]);
+		}), r;
+	}, [i, _]);
 	useEffect(() => {
 		if (!e) return;
 		let t = () => {
-			let t = l, n = u;
+			let t = u, n = d;
 			if (!t || !n) {
 				let r = detectVectorSource(e);
 				r && (console.log("Auto-detected vector source:", r), t ||= r.source, n ||= r.sourceLayer);
 			}
-			t && n ? T(e, t, n) && (S.current = !0, x(!0)) : console.warn("No vector source found for road highlighting");
+			t && n ? xe(e, t, n) && (be.current = !0, E(!0)) : console.warn("No vector source found for road highlighting");
 		};
 		e.isStyleLoaded() ? t() : e.once("load", t);
 		let n = () => {
 			e.isStyleLoaded() && t();
 		}, r = () => {
-			S.current || t();
+			be.current || t();
 		};
 		return e.on("styledata", n), e.on("sourcedata", r), () => {
 			e.off("styledata", n), e.off("sourcedata", r);
 		};
 	}, [
 		e,
-		l,
 		u,
-		T
+		d,
+		xe
 	]), useEffect(() => {
-		!e || !b || ROAD_TYPE_OPTIONS.forEach((t) => {
+		!e || !T || ROAD_TYPE_OPTIONS.forEach((t) => {
 			let n = `${LAYER_ID_PREFIX}${t.class}`;
 			if (e.getLayer(n)) try {
-				let r = v.includes(t.class);
+				let r = w.includes(t.class);
 				e.setLayoutProperty(n, "visibility", r ? "visible" : "none");
 			} catch (e) {
 				console.error(`Failed to update layer ${n}:`, e);
@@ -4247,38 +4247,38 @@ function RoadHighlightControl({ map: e, highlightWidth: r = 3, defaultRoadTypes:
 		});
 	}, [
 		e,
-		b,
-		v
+		T,
+		w
 	]), useEffect(() => {
-		if (!g) return;
+		if (!S) return;
 		let e = (e) => {
-			ye.current && !ye.current.contains(e.target) && C.current && !C.current.contains(e.target) && _(!1);
+			k.current && !k.current.contains(e.target) && A.current && !A.current.contains(e.target) && C(!1);
 		}, t = setTimeout(() => {
 			document.addEventListener("mousedown", e);
 		}, 0);
 		return () => {
 			clearTimeout(t), document.removeEventListener("mousedown", e);
 		};
-	}, [g]), useEffect(() => () => {
+	}, [S]), useEffect(() => () => {
 		e && e.getStyle() && ROAD_TYPE_OPTIONS.forEach((t) => {
 			let n = `${LAYER_ID_PREFIX}${t.class}`;
 			if (e.getLayer(n)) try {
 				e.removeLayer(n);
 			} catch {}
-		}), w.current &&= (w.current.remove(), null);
+		}), j.current &&= (j.current.remove(), null);
 	}, [e]);
-	let E = useCallback((e) => ROAD_TYPE_OPTIONS.find((t) => t.class === e)?.label || e, []), be = useCallback((t) => {
-		if (!e || v.length === 0) {
-			w.current && w.current.remove(), e?.getCanvas().style.cursor && (e.getCanvas().style.cursor = "");
+	let M = useCallback((e) => ROAD_TYPE_OPTIONS.find((t) => t.class === e)?.label || e, []), N = useCallback((t) => {
+		if (!e || w.length === 0) {
+			j.current && j.current.remove(), e?.getCanvas().style.cursor && (e.getCanvas().style.cursor = "");
 			return;
 		}
-		let n = v.map((e) => `${LAYER_ID_PREFIX}${e}`), r = [[t.point.x - 10, t.point.y - 10], [t.point.x + 10, t.point.y + 10]], i = e.queryRenderedFeatures(r, { layers: n.filter((t) => e.getLayer(t)) });
+		let n = w.map((e) => `${LAYER_ID_PREFIX}${e}`), r = [[t.point.x - 10, t.point.y - 10], [t.point.x + 10, t.point.y + 10]], i = e.queryRenderedFeatures(r, { layers: n.filter((t) => e.getLayer(t)) });
 		if (i.length > 0) {
-			let n = i[0].properties || {}, r = t.lngLat, a = n.name || n.name_en || n.name_local || "", o = n[d] || "", c = n.type || "", l = n.structure || "", u = n.oneway, f = n.layer, p = n.iso_3166_1 || "", m = n.iso_3166_2 || "", ve = (e) => !(e == null || e === "" || typeof e == "string" && e.toLowerCase() === "none"), h = [];
-			ve(o) && h.push(`
+			let n = i[0].properties || {}, r = t.lngLat, a = n.name || n.name_en || n.name_local || "", o = n[_] || "", c = n.type || "", l = n.structure || "", u = n.oneway, d = n.layer, f = n.iso_3166_1 || "", p = n.iso_3166_2 || "", m = (e) => !(e == null || e === "" || typeof e == "string" && e.toLowerCase() === "none"), h = [];
+			m(o) && h.push(`
 						<div class="road-highlight-popup__row">
 							<span>道路类型:</span>
-							<span class="road-highlight-popup__value">${E(o)}</span>
+							<span class="road-highlight-popup__value">${M(o)}</span>
 						</div>
 					`), h.push(`
 					<div class="road-highlight-popup__row">
@@ -4290,12 +4290,12 @@ function RoadHighlightControl({ map: e, highlightWidth: r = 3, defaultRoadTypes:
 						<span>纬度:</span>
 						<span class="road-highlight-popup__value">${r.lat.toFixed(6)}</span>
 					</div>
-				`), ve(c) && h.push(`
+				`), m(c) && h.push(`
 						<div class="road-highlight-popup__row">
 							<span>类别:</span>
 							<span class="road-highlight-popup__value">${c}</span>
 						</div>
-					`), ve(l) && h.push(`
+					`), m(l) && h.push(`
 						<div class="road-highlight-popup__row">
 							<span>结构:</span>
 							<span class="road-highlight-popup__value">${l}</span>
@@ -4305,20 +4305,20 @@ function RoadHighlightControl({ map: e, highlightWidth: r = 3, defaultRoadTypes:
 							<span>单行道:</span>
 							<span class="road-highlight-popup__value">${u ? "是" : "否"}</span>
 						</div>
-					`), ve(f) && h.push(`
+					`), m(d) && h.push(`
 						<div class="road-highlight-popup__row">
 							<span>层级:</span>
-							<span class="road-highlight-popup__value">${f}</span>
+							<span class="road-highlight-popup__value">${d}</span>
 						</div>
-					`), ve(p) && h.push(`
+					`), m(f) && h.push(`
 						<div class="road-highlight-popup__row">
 							<span>国家代码:</span>
-							<span class="road-highlight-popup__value">${p}</span>
+							<span class="road-highlight-popup__value">${f}</span>
 						</div>
-					`), ve(m) && h.push(`
+					`), m(p) && h.push(`
 						<div class="road-highlight-popup__row">
 							<span>地区代码:</span>
-							<span class="road-highlight-popup__value">${m}</span>
+							<span class="road-highlight-popup__value">${p}</span>
 						</div>
 					`);
 			let g = `
@@ -4327,112 +4327,113 @@ function RoadHighlightControl({ map: e, highlightWidth: r = 3, defaultRoadTypes:
 						<div class="road-highlight-popup__info">${h.join("")}</div>
 					</div>
 				`;
-			w.current ||= new mapboxgl.Popup({
+			j.current ||= new mapboxgl.Popup({
 				closeButton: !1,
 				closeOnClick: !1,
 				offset: 15,
 				className: "road-highlight-popup"
-			}), w.current.setLngLat(r).setHTML(g).addTo(e), e.getCanvas().style.cursor = "pointer";
-		} else w.current && w.current.remove(), e.getCanvas().style.cursor = "";
+			}), j.current.setLngLat(r).setHTML(g).addTo(e), e.getCanvas().style.cursor = "pointer";
+		} else j.current && j.current.remove(), e.getCanvas().style.cursor = "";
 	}, [
 		e,
-		v,
-		E,
-		d
+		w,
+		M,
+		_
 	]);
 	useEffect(() => {
-		if (!(!e || !b)) return e.on("mousemove", be), () => {
-			e.off("mousemove", be), w.current && w.current.remove(), e.getCanvas().style.cursor = "";
+		if (!(!e || !T)) return e.on("mousemove", N), () => {
+			e.off("mousemove", N), j.current && j.current.remove(), e.getCanvas().style.cursor = "";
 		};
 	}, [
 		e,
-		b,
-		be
+		T,
+		N
 	]);
-	let xe = (e, t) => {
-		y((n) => t ? [...n, e] : n.filter((t) => t !== e));
-	}, O = (e) => {
-		y(e ? ROAD_TYPE_OPTIONS.map((e) => e.class) : []);
-	}, Se = v.length > 0;
-	return /* @__PURE__ */ jsxs("div", {
-		className: `mapbox-road-highlight-control ${f}`,
-		style: p,
+	let P = (e, t) => {
+		ve((n) => t ? [...n, e] : n.filter((t) => t !== e));
+	}, Se = (e) => {
+		ve(e ? ROAD_TYPE_OPTIONS.map((e) => e.class) : []);
+	}, F = w.length > 0, Ce = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "mapbox-road-highlight-control__panel-header",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "mapbox-road-highlight-control__panel-title",
+				children: "道路类型"
+			}), /* @__PURE__ */ jsx(Checkbox, {
+				checked: w.length === ROAD_TYPE_OPTIONS.length,
+				indeterminate: w.length > 0 && w.length < ROAD_TYPE_OPTIONS.length,
+				onChange: Se,
+				style: {
+					"--color-text-1": "#fff",
+					"--color-border-2": "rgba(255, 255, 255, 0.3)"
+				},
+				children: /* @__PURE__ */ jsx("span", {
+					className: "mapbox-road-highlight-control__type-label",
+					children: "全选"
+				})
+			})]
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "mapbox-road-highlight-control__scroll",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "mapbox-road-highlight-control__type-list",
+				children: ROAD_TYPE_OPTIONS.map((e) => /* @__PURE__ */ jsxs("div", {
+					className: "mapbox-road-highlight-control__type-item",
+					onClick: () => P(e.class, !w.includes(e.class)),
+					children: [
+						/* @__PURE__ */ jsx(Checkbox, {
+							checked: w.includes(e.class),
+							onChange: (t) => P(e.class, t),
+							onClick: (e) => e.stopPropagation(),
+							style: {
+								"--color-text-1": "#fff",
+								"--color-border-2": "rgba(255, 255, 255, 0.3)",
+								marginRight: 0,
+								flexShrink: 0
+							}
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "mapbox-road-highlight-control__color-indicator",
+							style: { backgroundColor: e.color }
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "mapbox-road-highlight-control__type-label",
+							children: e.label
+						})
+					]
+				}, e.class))
+			})
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "mapbox-road-highlight-control__tip",
+			children: "选中道路类型后立即显示高亮"
+		}),
+		!T && /* @__PURE__ */ jsx("div", {
+			className: "mapbox-road-highlight-control__warning",
+			children: "正在初始化图层..."
+		})
+	] });
+	return useImperativeHandle(x, () => ({ setPortalContainer: ye })), /* @__PURE__ */ jsxs(Fragment, { children: [b && /* @__PURE__ */ jsxs("div", {
+		className: `mapbox-road-highlight-control ${v}`,
+		style: y,
 		children: [/* @__PURE__ */ jsxs("button", {
-			ref: C,
-			className: `mapbox-control-btn mapbox-road-highlight-control__btn ${Se ? "mapbox-road-highlight-control__btn--active" : ""}`,
-			onClick: () => _(!g),
-			title: `路网高亮${v.length > 0 ? ` (已选 ${v.length})` : ""}`,
+			ref: A,
+			className: `mapbox-control-btn mapbox-road-highlight-control__btn ${F ? "mapbox-road-highlight-control__btn--active" : ""}`,
+			onClick: () => C(!S),
+			title: `路网高亮${w.length > 0 ? ` (已选 ${w.length})` : ""}`,
 			children: [/* @__PURE__ */ jsx("img", {
-				src: road_default,
+				src: "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20t='1769487141027'%20class='icon'%20viewBox='0%200%201517%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='2644'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='189.625'%20height='128'%3e%3cpath%20d='M1.68121071-242.12320149h1508.24640296v1508.24640298h-1508.24640296z'%20fill='%23ffffff'%20fill-opacity='0'%20p-id='2645'%3e%3c/path%3e%3cpath%20d='M437.30078846%20170.6624h682.66239999v682.6624H437.30078846z'%20fill='%23ffffff'%20fill-opacity='0'%20p-id='2646'%3e%3c/path%3e%3cpath%20d='M1151.68343834%2040.66710748H373.42829443A81.76345149%2081.76345149%200%200%200%20292.90207634%20121.49379654v784.42363608c0%2040.42218191%2036.92257893%2077.41545989%2080.5262181%2077.4154599h781.6133488a81.76345149%2081.76345149%200%200%200%2080.52621814-80.82668906V121.49379654C1232.08593315%2077.76643404%201195.25172802%2040.66710748%201151.6657636%2040.66710748z%20m-325.39237822%20616.14222197H618.29445458V451.37556451h53.66057906c6.71640976%200%2013.41514477-3.35820487%2020.11387975-6.73408452l97.28189301-100.99359314h134.18679716v208.72127078c-46.96184405%2013.50351858-87.22495312%2053.90802574-97.28189299%20104.4048223z%20m130.7932427-20.23760311c23.50743418%200%2043.65666346%2020.21992834%2043.65666349%2043.76271204a44.50505206%2044.50505206%200%200%201-43.62131391%2043.7803868%2044.50505206%2044.50505206%200%200%201-43.6036392-43.7803868c0-23.54278369%2020.096205-43.76271203%2043.6036392-43.76271204h-0.05302433zM564.63387554%20926.10201142H373.42829443a22.87114272%2022.87114272%200%200%201-16.79102442-6.71640975%2023.04789036%2023.04789036%200%200%201-6.71640975-16.82637394V714.02253578h214.73069002v212.07947564z%20m0-269.31035673H349.92086026V118.13559167c0-10.1453137%2010.05693988-20.2376031%2023.50743417-20.23760309h553.4321645v188.53669194h-147.54891766c-6.69873499%200-13.39747001%203.35820487-20.096205%206.71640977l-97.28189297%2097.653063H460.61789801a26.44144475%2026.44144475%200%200%200-19.08874355%207.79457028%2026.63586714%2026.63586714%200%200%200-7.72387123%2019.1594426c0%2016.80869917%2013.39747001%2026.90098858%2026.81261478%2026.90098857h104.03365227v212.13249995z%20m610.48629795%20245.71454877c0.17674763%206.29221547-2.24469484%2012.37233377-6.68106024%2016.84404869s-10.49880895%206.89315739-16.77334965%206.75175927h-533.42433329v-212.0971504H829.63159021c13.39747001%2057.24855586%2067.07572382%2097.65306301%20127.48806219%2097.653063a128.67227125%20128.67227125%200%200%200%2093.05762473-37.87701612%20129.60903367%20129.60903367%200%200%200%2037.73561801-93.39344522c0-64.00031515-46.96184405-117.8553166-103.98062799-128.00063029v-208.73894554h194.56378599v558.91134088h-3.35820489v-0.05302427z%20m0-616.07152294H980.57406228V97.89798858h171.10937607c13.39747001%200%2023.45440988%2010.07461465%2023.4544099%2023.59580796v164.94088398z'%20fill='%23ffffff'%20p-id='2647'%3e%3c/path%3e%3c/svg%3e",
 				alt: "road",
 				className: "mapbox-road-highlight-control__btn-icon"
-			}), /* @__PURE__ */ jsxs("span", { children: ["路网", v.length > 0 ? ` (${v.length})` : ""] })]
-		}), g && /* @__PURE__ */ jsxs("div", {
-			ref: ye,
+			}), /* @__PURE__ */ jsxs("span", { children: ["路网", w.length > 0 ? ` (${w.length})` : ""] })]
+		}), S && /* @__PURE__ */ jsx("div", {
+			ref: k,
 			className: "mapbox-road-highlight-control__panel",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "mapbox-road-highlight-control__panel-header",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "mapbox-road-highlight-control__panel-title",
-						children: "道路类型"
-					}), /* @__PURE__ */ jsx(Checkbox, {
-						checked: v.length === ROAD_TYPE_OPTIONS.length,
-						indeterminate: v.length > 0 && v.length < ROAD_TYPE_OPTIONS.length,
-						onChange: O,
-						style: {
-							"--color-text-1": "#fff",
-							"--color-border-2": "rgba(255, 255, 255, 0.3)"
-						},
-						children: /* @__PURE__ */ jsx("span", {
-							className: "mapbox-road-highlight-control__type-label",
-							children: "全选"
-						})
-					})]
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "mapbox-road-highlight-control__scroll",
-					children: /* @__PURE__ */ jsx("div", {
-						className: "mapbox-road-highlight-control__type-list",
-						children: ROAD_TYPE_OPTIONS.map((e) => /* @__PURE__ */ jsxs("div", {
-							className: "mapbox-road-highlight-control__type-item",
-							onClick: () => xe(e.class, !v.includes(e.class)),
-							children: [
-								/* @__PURE__ */ jsx(Checkbox, {
-									checked: v.includes(e.class),
-									onChange: (t) => xe(e.class, t),
-									onClick: (e) => e.stopPropagation(),
-									style: {
-										"--color-text-1": "#fff",
-										"--color-border-2": "rgba(255, 255, 255, 0.3)",
-										marginRight: 0,
-										flexShrink: 0
-									}
-								}),
-								/* @__PURE__ */ jsx("span", {
-									className: "mapbox-road-highlight-control__color-indicator",
-									style: { backgroundColor: e.color }
-								}),
-								/* @__PURE__ */ jsx("span", {
-									className: "mapbox-road-highlight-control__type-label",
-									children: e.label
-								})
-							]
-						}, e.class))
-					})
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "mapbox-road-highlight-control__tip",
-					children: "💡 选中道路类型后立即显示高亮"
-				}),
-				!b && /* @__PURE__ */ jsx("div", {
-					className: "mapbox-road-highlight-control__warning",
-					children: "⚠️ 正在初始化图层..."
-				})
-			]
+			children: Ce()
 		})]
-	});
-}
+	}), D && createPortal(Ce(), D)] });
+});
+RoadHighlightControl.displayName = "RoadHighlightControl";
 var measure_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20t='1773733446763'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='1802'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='128'%20height='128'%3e%3cpath%20d='M110.34624%20352.01024a30.72%2030.72%200%201%200%2061.44%200v-38.46144h680.42752v38.5024a30.72%2030.72%200%200%200%2061.44%200V213.72928a30.72%2030.72%200%200%200-61.44%200v38.33856H171.78624v-38.33856a30.72%2030.72%200%200%200-61.44%200v138.28096z%20m34.816%20127.22176a34.816%2034.816%200%200%200-34.816%2034.816v312.60672c0%2019.2512%2015.5648%2034.816%2034.816%2034.816h733.5936c19.2512%200%2034.816-15.5648%2034.816-34.816V514.048a34.816%2034.816%200%200%200-34.816-34.816H145.2032z%20m26.624%20320.79872V540.672h680.3456v259.35872H171.8272z'%20fill='white'%20p-id='1804'%3e%3c/path%3e%3c/svg%3e", square_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3csvg%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%3e%3crect%20x='192'%20y='192'%20width='640'%20height='640'%20rx='32'%20ry='32'%20fill='none'%20stroke='%23ffffff'%20stroke-width='64'/%3e%3c/svg%3e", rectangle_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3csvg%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%3e%3crect%20x='160'%20y='240'%20width='704'%20height='544'%20rx='32'%20ry='32'%20fill='none'%20stroke='%23ffffff'%20stroke-width='64'/%3e%3c/svg%3e", circle_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3csvg%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%3e%3ccircle%20cx='512'%20cy='512'%20r='384'%20fill='none'%20stroke='%23ffffff'%20stroke-width='64'/%3e%3c/svg%3e", polygon_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3csvg%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%3e%3cpolygon%20points='512,128%20864,384%20736,800%20288,800%20160,384'%20fill='none'%20stroke='%23ffffff'%20stroke-width='64'%20stroke-linejoin='round'/%3e%3c/svg%3e", polyline_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3csvg%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%3e%3cpolyline%20points='160,768%20384,256%20640,576%20864,192'%20fill='none'%20stroke='%23ffffff'%20stroke-width='64'%20stroke-linejoin='round'%20stroke-linecap='round'/%3e%3c/svg%3e", delete_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20t='1769394652565'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='6483'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='128'%20height='128'%3e%3cpath%20d='M841.385637%20288.639098a36.479886%2036.479886%200%200%201%2072.74644%207.679976l6.613312%20629.544699A109.866323%20109.866323%200%200%201%20810.665733%201023.9968H222.507571a109.652991%20109.652991%200%200%201-109.012992-98.133027l-3.626656-629.544699a36.479886%2036.479886%200%200%201%2072.74644-7.679976L186.241018%20917.330467a36.479886%2036.479886%200%200%200%2036.266553%2032.639898H810.665733A36.479886%2036.479886%200%200%200%20847.99895%20917.330467z%20m-219.732646%20113.706311a36.479886%2036.479886%200%200%201%2036.693218%2036.479886v255.9992a36.693219%2036.693219%200%201%201-73.173104%200v-255.9992a36.479886%2036.479886%200%200%201%2036.479886-36.479886z%20m-219.305982%200a36.479886%2036.479886%200%200%201%2036.479886%2036.479886v255.9992a36.693219%2036.693219%200%201%201-73.173104%200v-255.9992a36.479886%2036.479886%200%200%201%2036.693218-36.479886z%20m-36.693218-255.9992h292.692418V91.519714a18.346609%2018.346609%200%200%200-18.346609-18.346609H384.0004a18.346609%2018.346609%200%200%200-18.346609%2018.346609z%20m-73.173105%200V73.173105A73.173105%2073.173105%200%200%201%20365.653791%200h292.692418a73.386437%2073.386437%200%200%201%2073.173105%2073.173105v73.173104h255.9992a36.693219%2036.693219%200%200%201%200%2073.173105H36.481486a36.693219%2036.693219%200%200%201%200-73.173105z'%20fill='%23EB6865'%20p-id='6484'%3e%3c/path%3e%3c/svg%3e", SHAPE_LABELS = {
 	square: "正方形",
 	rectangle: "矩形",
@@ -4674,64 +4675,64 @@ function clearAllPreviewSources(e) {
 	]) clearPreviewSource(e, `${PREVIEW_PREFIX}${t}`);
 }
 function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDrawModeChange: s, className: c = "", style: l }) {
-	let [u, d] = useState(!1), [f, p] = useState(null), [g, _] = useState({
+	let [u, d] = useState(!1), [f, p] = useState(null), [_, v] = useState({
 		showArea: !0,
 		showLength: !0,
 		showRadius: !0
-	}), v = r !== void 0, y = v ? {
+	}), y = r !== void 0, b = y ? {
 		showArea: r.showArea ?? !0,
 		showLength: r.showLength ?? !0,
 		showRadius: r.showRadius ?? !0
-	} : g, [b, x] = useState([]), S = useRef(/* @__PURE__ */ new Map()), ye = useRef(0), w = useRef(null), T = useRef(null), E = useRef(null), D = useRef(null), O = useRef(null), k = useRef([]), A = useRef([]), j = useRef(y);
-	j.current = y;
-	let Te = useRef(f);
-	Te.current = f;
-	let M = useCallback(() => `measure-${++ye.current}`, []);
+	} : _, [x, S] = useState([]), C = useRef(/* @__PURE__ */ new Map()), w = useRef(0), T = useRef(null), E = useRef(null), D = useRef(null), O = useRef(null), k = useRef(null), M = useRef([]), N = useRef([]), P = useRef(b);
+	P.current = b;
+	let Se = useRef(f);
+	Se.current = f;
+	let F = useCallback(() => `measure-${++w.current}`, []);
 	useEffect(() => {
 		s?.(f !== null);
 	}, [f, s]);
-	let Ee = useRef(!1), De = useCallback(() => {
-		!e || !e.isStyleLoaded() || (initAllPreviewLayers(e), Ee.current = !0);
+	let Ce = useRef(!1), we = useCallback(() => {
+		!e || !e.isStyleLoaded() || (initAllPreviewLayers(e), Ce.current = !0);
 	}, [e]);
 	useEffect(() => {
 		if (!e) return;
 		let t = () => {
-			initAllPreviewLayers(e), Ee.current = !0;
+			initAllPreviewLayers(e), Ce.current = !0;
 		};
 		e.isStyleLoaded() ? t() : e.once("load", t);
 		let n = () => {
-			Ee.current = !1;
+			Ce.current = !1;
 		};
 		return e.on("style.load", n), () => {
 			e.off("style.load", n);
 		};
 	}, [e]), useEffect(() => {
 		let e = (e) => {
-			w.current && !w.current.contains(e.target) && T.current && !T.current.contains(e.target) && d(!1);
+			T.current && !T.current.contains(e.target) && E.current && !E.current.contains(e.target) && d(!1);
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	}, []);
-	let N = useCallback((t) => {
+	let I = useCallback((t) => {
 		if (!e) return;
-		let n = applyEntityConfig(t, j.current), r = null;
+		let n = applyEntityConfig(t, P.current), r = null;
 		if (n.type === "circle" ? r = new CircleRenderer(e, n) : n.type === "square" ? r = new SquareRenderer(e, n) : n.type === "rectangle" ? r = new RectangleRenderer(e, n) : n.type === "polygon" ? r = new PolygonRenderer(e, n) : n.type === "polyline" && (r = new PolylineRenderer(e, n)), r) {
-			S.current.set(n.id, r);
+			C.current.set(n.id, r);
 			let e = {
 				entity: n,
 				shapeLabel: SHAPE_LABELS[n.type] || n.type,
 				area: computeEntityArea(n),
 				lengthOrRadius: computeEntityLengthOrRadius(n)
 			};
-			x((t) => [...t, e]);
-		}
-	}, [e]), Oe = useCallback((e) => {
-		let t = S.current.get(e);
-		t && (t.destroy(), S.current.delete(e)), x((t) => t.filter((t) => t.entity.id !== e));
-	}, []), ke = useCallback(() => {
-		S.current.forEach((e) => e.destroy()), S.current.clear(), x([]);
-	}, []), Ae = useCallback((t) => {
+			S((t) => [...t, e]);
+		}
+	}, [e]), Te = useCallback((e) => {
+		let t = C.current.get(e);
+		t && (t.destroy(), C.current.delete(e)), S((t) => t.filter((t) => t.entity.id !== e));
+	}, []), Ee = useCallback(() => {
+		C.current.forEach((e) => e.destroy()), C.current.clear(), S([]);
+	}, []), De = useCallback((t) => {
 		if (!e) return;
-		let n = S.current.get(t);
+		let n = C.current.get(t);
 		if (!n) return;
 		let r = n.getBounds();
 		e.fitBounds(r, {
@@ -4739,21 +4740,21 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 			maxZoom: 18,
 			duration: 1e3
 		});
-	}, [e]), je = useCallback((e, t) => {
+	}, [e]), Oe = useCallback((e, t) => {
 		let n = {
-			...j.current,
+			...P.current,
 			[e]: t
 		};
-		v ? i?.({ ...n }) : _(n), x((t) => t.map((t) => {
+		y ? i?.({ ...n }) : v(n), S((t) => t.map((t) => {
 			let r = { ...t.entity };
 			r[e] = void 0;
-			let i = applyEntityConfig(r, n), a = S.current.get(t.entity.id);
+			let i = applyEntityConfig(r, n), a = C.current.get(t.entity.id);
 			return a && a.update(i), {
 				...t,
 				entity: i
 			};
 		}));
-	}, [v, i]), Me = useCallback((t, n) => {
+	}, [y, i]), ke = useCallback((t, n) => {
 		if (!e) return;
 		let [r, i] = t, [a, o] = n, s = [
 			[Math.min(r, a), Math.max(i, o)],
@@ -4772,7 +4773,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 		});
 		let l = e.getSource(`${PREVIEW_PREFIX}rect-preview-measure-source`);
 		if (l) {
-			let e = j.current, t = [], n = s[0], r = s[1], i = s[2];
+			let e = P.current, t = [], n = s[0], r = s[1], i = s[2];
 			if (e?.showArea) {
 				let e = distance(n, r), a = distance(r, i);
 				t.push({
@@ -4803,7 +4804,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 				features: t
 			});
 		}
-	}, [e]), Ne = useCallback((t, n) => {
+	}, [e]), Ae = useCallback((t, n) => {
 		if (!e) return;
 		let r = calculateDistance(t, n), i = createCirclePolygon(t, r), a = e.getSource(`${PREVIEW_PREFIX}circle-preview-source`);
 		a && a.setData({
@@ -4814,7 +4815,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 			},
 			properties: {}
 		});
-		let o = j.current, s = [], c = [];
+		let o = P.current, s = [], c = [];
 		if (o?.showArea && s.push({
 			type: "Feature",
 			geometry: {
@@ -4850,7 +4851,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 			type: "FeatureCollection",
 			features: c
 		});
-	}, [e]), Pe = useCallback((t, n) => {
+	}, [e]), je = useCallback((t, n) => {
 		if (!e) return;
 		let r = calculateDistance(t, n) * 2, i = createSquareCoords(t, r), a = e.getSource(`${PREVIEW_PREFIX}square-preview-source`);
 		a && a.setData({
@@ -4863,7 +4864,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 		});
 		let o = e.getSource(`${PREVIEW_PREFIX}square-preview-measure-source`);
 		if (o) {
-			let e = j.current, n = [];
+			let e = P.current, n = [];
 			if (e?.showArea && n.push({
 				type: "Feature",
 				geometry: {
@@ -4887,7 +4888,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 				features: n
 			});
 		}
-	}, [e]), P = useCallback((t, n) => {
+	}, [e]), L = useCallback((t, n) => {
 		if (!e) return;
 		let r = [...t, n], i = e.getSource(`${PREVIEW_PREFIX}polygon-preview-source`);
 		i && (r.length >= 3 ? i.setData({
@@ -4922,7 +4923,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 		});
 		let o = e.getSource(`${PREVIEW_PREFIX}polygon-preview-measure-source`);
 		if (o) {
-			let e = j.current, t = [];
+			let e = P.current, t = [];
 			if (e?.showArea && r.length >= 3) {
 				let e = polygonArea([...r, r[0]]), n = 0, i = 0;
 				for (let e of r) n += e[0], i += e[1];
@@ -4964,7 +4965,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 				features: t
 			});
 		}
-	}, [e]), Fe = useCallback((t, n) => {
+	}, [e]), Me = useCallback((t, n) => {
 		if (!e) return;
 		let r = [...t, n], i = e.getSource(`${PREVIEW_PREFIX}polyline-preview-source`);
 		i && (r.length >= 2 ? i.setData({
@@ -4992,7 +4993,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 		});
 		let o = e.getSource(`${PREVIEW_PREFIX}polyline-preview-measure-source`);
 		if (o) {
-			let e = j.current, t = [];
+			let e = P.current, t = [];
 			if (e?.showLength && r.length >= 2) for (let e = 0; e < r.length - 1; e++) {
 				let n = r[e], i = r[e + 1];
 				t.push({
@@ -5012,117 +5013,117 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 	}, [e]);
 	useEffect(() => {
 		if (!e || !f) return;
-		De(), e.getCanvas().style.cursor = "crosshair";
+		we(), e.getCanvas().style.cursor = "crosshair";
 		let t = (t) => {
-			let n = [t.lngLat.lng, t.lngLat.lat], r = Te.current;
+			let n = [t.lngLat.lng, t.lngLat.lat], r = Se.current;
 			if (r === "rectangle") {
-				let t = E.current;
-				if (!t) E.current = n;
+				let t = D.current;
+				if (!t) D.current = n;
 				else {
 					let r = {
-						id: M(),
+						id: F(),
 						type: "rectangle",
 						bounds: [t, n]
 					};
-					N(r), E.current = null, clearAllPreviewSources(e), p(null);
+					I(r), D.current = null, clearAllPreviewSources(e), p(null);
 				}
 			} else if (r === "circle") {
-				let t = D.current;
-				if (!t) D.current = { center: n };
+				let t = O.current;
+				if (!t) O.current = { center: n };
 				else {
 					let r = calculateDistance(t.center, n), i = {
-						id: M(),
+						id: F(),
 						type: "circle",
 						center: t.center,
 						radius: r
 					};
-					N(i), D.current = null, clearAllPreviewSources(e), p(null);
+					I(i), O.current = null, clearAllPreviewSources(e), p(null);
 				}
 			} else if (r === "square") {
-				let t = O.current;
-				if (!t) O.current = { center: n };
+				let t = k.current;
+				if (!t) k.current = { center: n };
 				else {
 					let r = calculateDistance(t.center, n) * 2, i = {
-						id: M(),
+						id: F(),
 						type: "square",
 						center: t.center,
 						length: r
 					};
-					N(i), O.current = null, clearAllPreviewSources(e), p(null);
+					I(i), k.current = null, clearAllPreviewSources(e), p(null);
 				}
 			} else if (r === "polygon") {
-				let t = k.current;
+				let t = M.current;
 				if (t.length >= 3 && calculateDistance(t[0], n) < 20) {
 					let n = {
-						id: M(),
+						id: F(),
 						type: "polygon",
 						coordinates: [...t]
 					};
-					N(n), k.current = [], clearAllPreviewSources(e), p(null);
+					I(n), M.current = [], clearAllPreviewSources(e), p(null);
 					return;
 				}
-				k.current = [...t, n];
-			} else r === "polyline" && (A.current = [...A.current, n]);
+				M.current = [...t, n];
+			} else r === "polyline" && (N.current = [...N.current, n]);
 		}, n = (e) => {
-			let t = [e.lngLat.lng, e.lngLat.lat], n = Te.current;
-			if (n === "rectangle" && E.current) Me(E.current, t);
-			else if (n === "circle" && D.current) Ne(D.current.center, t);
-			else if (n === "square" && O.current) Pe(O.current.center, t);
+			let t = [e.lngLat.lng, e.lngLat.lat], n = Se.current;
+			if (n === "rectangle" && D.current) ke(D.current, t);
+			else if (n === "circle" && O.current) Ae(O.current.center, t);
+			else if (n === "square" && k.current) je(k.current.center, t);
 			else if (n === "polygon") {
-				let e = k.current;
-				e.length > 0 && P(e, t);
+				let e = M.current;
+				e.length > 0 && L(e, t);
 			} else if (n === "polyline") {
-				let e = A.current;
-				e.length > 0 && Fe(e, t);
+				let e = N.current;
+				e.length > 0 && Me(e, t);
 			}
 		}, r = (t) => {
 			t.preventDefault();
-			let n = Te.current;
+			let n = Se.current;
 			if (n === "polygon") {
-				let t = k.current;
+				let t = M.current;
 				if (t.length >= 3) {
 					let n = {
-						id: M(),
+						id: F(),
 						type: "polygon",
 						coordinates: [...t]
 					};
-					N(n), k.current = [], clearAllPreviewSources(e), p(null);
-				} else k.current = [], clearAllPreviewSources(e);
+					I(n), M.current = [], clearAllPreviewSources(e), p(null);
+				} else M.current = [], clearAllPreviewSources(e);
 			} else if (n === "polyline") {
-				let t = A.current;
+				let t = N.current;
 				if (t.length >= 2) {
 					let n = {
-						id: M(),
+						id: F(),
 						type: "polyline",
 						coordinates: [...t]
 					};
-					N(n), A.current = [], clearAllPreviewSources(e), p(null);
-				} else A.current = [], clearAllPreviewSources(e);
+					I(n), N.current = [], clearAllPreviewSources(e), p(null);
+				} else N.current = [], clearAllPreviewSources(e);
 			}
 		}, i = (t) => {
-			t.key === "Escape" && (E.current = null, D.current = null, O.current = null, k.current = [], A.current = [], clearAllPreviewSources(e), p(null));
+			t.key === "Escape" && (D.current = null, O.current = null, k.current = null, M.current = [], N.current = [], clearAllPreviewSources(e), p(null));
 		}, a = (t) => {
 			t.preventDefault();
-			let n = Te.current;
+			let n = Se.current;
 			if (n === "polygon") {
-				let t = k.current;
+				let t = M.current;
 				if (t.length >= 3) {
 					let n = {
-						id: M(),
+						id: F(),
 						type: "polygon",
 						coordinates: [...t]
 					};
-					N(n), k.current = [], clearAllPreviewSources(e), p(null);
+					I(n), M.current = [], clearAllPreviewSources(e), p(null);
 				}
 			} else if (n === "polyline") {
-				let t = A.current;
+				let t = N.current;
 				if (t.length >= 2) {
 					let n = {
-						id: M(),
+						id: F(),
 						type: "polyline",
 						coordinates: [...t]
 					};
-					N(n), A.current = [], clearAllPreviewSources(e), p(null);
+					I(n), N.current = [], clearAllPreviewSources(e), p(null);
 				}
 			}
 		};
@@ -5132,25 +5133,25 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 	}, [
 		e,
 		f,
-		M,
-		N,
-		De,
-		Me,
-		Ne,
-		Pe,
-		P,
-		Fe
+		F,
+		I,
+		we,
+		ke,
+		Ae,
+		je,
+		L,
+		Me
 	]), useEffect(() => () => {
-		S.current.forEach((e) => e.destroy()), S.current.clear();
+		C.current.forEach((e) => e.destroy()), C.current.clear();
 	}, []);
-	let Ie = useCallback((t) => {
-		p((e) => e === t ? null : t), E.current = null, D.current = null, O.current = null, k.current = [], A.current = [], e && clearAllPreviewSources(e);
+	let Ne = useCallback((t) => {
+		p((e) => e === t ? null : t), D.current = null, O.current = null, k.current = null, M.current = [], N.current = [], e && clearAllPreviewSources(e);
 	}, [e]);
 	return e ? /* @__PURE__ */ jsxs("div", {
 		className: `mapbox-measure-control ${c}`,
 		style: l,
 		children: [/* @__PURE__ */ jsxs("button", {
-			ref: T,
+			ref: E,
 			className: `mapbox-control-btn mapbox-measure-control__btn ${u ? "mapbox-measure-control__btn--active" : ""}`,
 			onClick: () => d(!u),
 			title: "测量",
@@ -5161,14 +5162,14 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 					className: "mapbox-measure-control__btn-icon"
 				}),
 				/* @__PURE__ */ jsx("span", { children: "测量" }),
-				b.length > 0 && /* @__PURE__ */ jsxs("span", { children: [
+				x.length > 0 && /* @__PURE__ */ jsxs("span", { children: [
 					"(",
-					b.length,
+					x.length,
 					")"
 				] })
 			]
 		}), u && /* @__PURE__ */ jsxs("div", {
-			ref: w,
+			ref: T,
 			className: "mapbox-measure-control__panel",
 			children: [
 				/* @__PURE__ */ jsx("div", {
@@ -5179,18 +5180,18 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 					className: "mapbox-measure-control__settings",
 					children: [
 						/* @__PURE__ */ jsx(Checkbox, {
-							checked: y.showArea,
-							onChange: (e) => je("showArea", e),
+							checked: b.showArea,
+							onChange: (e) => Oe("showArea", e),
 							children: "面积"
 						}),
 						/* @__PURE__ */ jsx(Checkbox, {
-							checked: y.showLength,
-							onChange: (e) => je("showLength", e),
+							checked: b.showLength,
+							onChange: (e) => Oe("showLength", e),
 							children: "长度"
 						}),
 						/* @__PURE__ */ jsx(Checkbox, {
-							checked: y.showRadius,
-							onChange: (e) => je("showRadius", e),
+							checked: b.showRadius,
+							onChange: (e) => Oe("showRadius", e),
 							children: "半径"
 						})
 					]
@@ -5203,15 +5204,15 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 					className: "mapbox-measure-control__tools",
 					children: [DRAW_TOOLS.map((e) => /* @__PURE__ */ jsx("button", {
 						className: `mapbox-measure-control__tool-btn ${f === e.mode ? "mapbox-measure-control__tool-btn--active" : ""}`,
-						onClick: () => Ie(e.mode),
+						onClick: () => Ne(e.mode),
 						title: e.label,
 						children: /* @__PURE__ */ jsx("img", {
 							src: e.icon,
 							alt: e.label
 						})
-					}, e.mode)), b.length > 0 && /* @__PURE__ */ jsx("button", {
+					}, e.mode)), x.length > 0 && /* @__PURE__ */ jsx("button", {
 						className: "mapbox-measure-control__tool-btn mapbox-measure-control__tool-btn--danger",
-						onClick: ke,
+						onClick: Ee,
 						title: "清除全部",
 						children: /* @__PURE__ */ jsx("img", {
 							src: "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20t='1769394652565'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='6483'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='128'%20height='128'%3e%3cpath%20d='M841.385637%20288.639098a36.479886%2036.479886%200%200%201%2072.74644%207.679976l6.613312%20629.544699A109.866323%20109.866323%200%200%201%20810.665733%201023.9968H222.507571a109.652991%20109.652991%200%200%201-109.012992-98.133027l-3.626656-629.544699a36.479886%2036.479886%200%200%201%2072.74644-7.679976L186.241018%20917.330467a36.479886%2036.479886%200%200%200%2036.266553%2032.639898H810.665733A36.479886%2036.479886%200%200%200%20847.99895%20917.330467z%20m-219.732646%20113.706311a36.479886%2036.479886%200%200%201%2036.693218%2036.479886v255.9992a36.693219%2036.693219%200%201%201-73.173104%200v-255.9992a36.479886%2036.479886%200%200%201%2036.479886-36.479886z%20m-219.305982%200a36.479886%2036.479886%200%200%201%2036.479886%2036.479886v255.9992a36.693219%2036.693219%200%201%201-73.173104%200v-255.9992a36.479886%2036.479886%200%200%201%2036.693218-36.479886z%20m-36.693218-255.9992h292.692418V91.519714a18.346609%2018.346609%200%200%200-18.346609-18.346609H384.0004a18.346609%2018.346609%200%200%200-18.346609%2018.346609z%20m-73.173105%200V73.173105A73.173105%2073.173105%200%200%201%20365.653791%200h292.692418a73.386437%2073.386437%200%200%201%2073.173105%2073.173105v73.173104h255.9992a36.693219%2036.693219%200%200%201%200%2073.173105H36.481486a36.693219%2036.693219%200%200%201%200-73.173105z'%20fill='%23EB6865'%20p-id='6484'%3e%3c/path%3e%3c/svg%3e",
@@ -5219,7 +5220,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 						})
 					})]
 				}),
-				b.length > 0 ? /* @__PURE__ */ jsx("div", {
+				x.length > 0 ? /* @__PURE__ */ jsx("div", {
 					className: "mapbox-measure-control__list",
 					children: /* @__PURE__ */ jsxs("table", {
 						className: "mapbox-measure-control__table",
@@ -5229,9 +5230,9 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 							/* @__PURE__ */ jsx("th", { children: "面积" }),
 							/* @__PURE__ */ jsx("th", { children: "长度/半径" }),
 							/* @__PURE__ */ jsx("th", {})
-						] }) }), /* @__PURE__ */ jsx("tbody", { children: b.map((e) => /* @__PURE__ */ jsxs("tr", {
+						] }) }), /* @__PURE__ */ jsx("tbody", { children: x.map((e) => /* @__PURE__ */ jsxs("tr", {
 							className: "mapbox-measure-control__table-row",
-							onClick: () => Ae(e.entity.id),
+							onClick: () => De(e.entity.id),
 							children: [
 								/* @__PURE__ */ jsx("td", { children: e.shapeLabel }),
 								/* @__PURE__ */ jsx("td", { children: String(e.entity.id) }),
@@ -5240,7 +5241,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, onDr
 								/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("button", {
 									className: "mapbox-measure-control__delete-btn",
 									onClick: (t) => {
-										t.stopPropagation(), Oe(e.entity.id);
+										t.stopPropagation(), Te(e.entity.id);
 									},
 									title: "删除",
 									children: /* @__PURE__ */ jsx("img", {
@@ -5295,31 +5296,31 @@ var raster_paint_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20standal
 	}
 ];
 function RasterPaintControl({ map: e, value: r, onChange: s, rasterPaintLayerIds: c = [], className: l, style: u }) {
-	let [d, f] = useState(!1), [p, h] = useState({ ...DEFAULT_CONFIG }), _ = useRef(null), v = useRef(null), y = r !== void 0;
+	let [d, f] = useState(!1), [p, g] = useState({ ...DEFAULT_CONFIG }), v = useRef(null), y = useRef(null), b = r !== void 0;
 	useEffect(() => {
 		let e = (e) => {
-			_.current && !_.current.contains(e.target) && v.current && !v.current.contains(e.target) && f(!1);
+			v.current && !v.current.contains(e.target) && y.current && !y.current.contains(e.target) && f(!1);
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	}, []);
-	let b = useMemo(() => y ? {
+	let x = useMemo(() => b ? {
 		brightness: r.brightness ?? DEFAULT_CONFIG.brightness,
 		saturation: r.saturation ?? DEFAULT_CONFIG.saturation,
 		contrast: r.contrast ?? DEFAULT_CONFIG.contrast,
 		hueRotate: r.hueRotate ?? DEFAULT_CONFIG.hueRotate
 	} : p, [
-		y,
+		b,
 		r,
 		p
-	]), x = useRef(y);
+	]), S = useRef(b);
 	useEffect(() => {
-		y && !x.current && h({ ...b }), x.current = y;
-	}, [y, b]);
-	let S = useCallback((t) => {
+		b && !S.current && g({ ...x }), S.current = b;
+	}, [b, x]);
+	let C = useCallback((t) => {
 		if (!(!e || c.length === 0)) for (let n of c) e.getLayer(n) && (e.setPaintProperty(n, "raster-brightness-min", 0), e.setPaintProperty(n, "raster-brightness-max", t.brightness), e.setPaintProperty(n, "raster-saturation", t.saturation), e.setPaintProperty(n, "raster-contrast", t.contrast), e.setPaintProperty(n, "raster-hue-rotate", t.hueRotate));
-	}, [e, c]), ye = useCallback((e, t) => {
-		if (y) s?.({
-			...b,
+	}, [e, c]), w = useCallback((e, t) => {
+		if (b) s?.({
+			...x,
 			[e]: t
 		});
 		else {
@@ -5327,35 +5328,35 @@ function RasterPaintControl({ map: e, value: r, onChange: s, rasterPaintLayerIds
 				...p,
 				[e]: t
 			};
-			h(n), S(n);
+			g(n), C(n);
 		}
 	}, [
-		y,
-		s,
 		b,
+		s,
+		x,
 		p,
-		S
-	]), C = useCallback(() => {
-		y ? s?.({ ...DEFAULT_CONFIG }) : (h({ ...DEFAULT_CONFIG }), S({ ...DEFAULT_CONFIG }));
+		C
+	]), ve = useCallback(() => {
+		b ? s?.({ ...DEFAULT_CONFIG }) : (g({ ...DEFAULT_CONFIG }), C({ ...DEFAULT_CONFIG }));
 	}, [
-		y,
+		b,
 		s,
-		S
+		C
 	]);
 	useEffect(() => {
-		!y && c.length > 0 && S(p);
+		!b && c.length > 0 && C(p);
 	}, [
 		c,
-		y,
-		S,
+		b,
+		C,
 		p
 	]);
-	let w = (e, t) => e === "hueRotate" ? `${Math.round(t)}°` : t.toFixed(2);
+	let T = (e, t) => e === "hueRotate" ? `${Math.round(t)}°` : t.toFixed(2);
 	return /* @__PURE__ */ jsxs("div", {
 		className: `mapbox-raster-paint-control${l ? ` ${l}` : ""}`,
 		style: u,
 		children: [/* @__PURE__ */ jsxs("button", {
-			ref: v,
+			ref: y,
 			className: `mapbox-control-btn mapbox-raster-paint-control__btn${d ? " mapbox-raster-paint-control__btn--active" : ""}`,
 			onClick: () => f(!d),
 			title: "栅格渲染调节",
@@ -5365,7 +5366,7 @@ function RasterPaintControl({ map: e, value: r, onChange: s, rasterPaintLayerIds
 				alt: "raster paint"
 			}), /* @__PURE__ */ jsx("span", { children: "渲染" })]
 		}), d && /* @__PURE__ */ jsxs("div", {
-			ref: _,
+			ref: v,
 			className: "mapbox-raster-paint-control__panel",
 			children: [SLIDER_CONFIG.map(({ key: e, label: t, min: n, max: r, step: i }) => /* @__PURE__ */ jsxs("div", {
 				className: "mapbox-raster-paint-control__slider-row",
@@ -5379,18 +5380,18 @@ function RasterPaintControl({ map: e, value: r, onChange: s, rasterPaintLayerIds
 						min: n,
 						max: r,
 						step: i,
-						value: b[e],
-						onChange: (t) => ye(e, t),
+						value: x[e],
+						onChange: (t) => w(e, t),
 						tooltipVisible: !1
 					}),
 					/* @__PURE__ */ jsx("span", {
 						className: "mapbox-raster-paint-control__value",
-						children: w(e, b[e])
+						children: T(e, x[e])
 					})
 				]
 			}, e)), /* @__PURE__ */ jsx("button", {
 				className: "mapbox-raster-paint-control__reset",
-				onClick: C,
+				onClick: ve,
 				children: "重置"
 			})]
 		})]
@@ -5398,43 +5399,43 @@ function RasterPaintControl({ map: e, value: r, onChange: s, rasterPaintLayerIds
 }
 var marker_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20t='1769397418113'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='10253'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='128'%20height='128'%3e%3cpath%20d='M755.4048%20217.2928A348.3648%20348.3648%200%200%200%20512%20119.3472a348.3136%20348.3136%200%200%200-243.3536%2097.8944%20328.4992%20328.4992%200%200%200-100.864%20236.3392c0%2049.408%2011.7248%2095.744%2032%20137.728a378.0096%20378.0096%200%200%200%2091.136%20118.4256l203.5712%20179.456%2017.5104%2015.4624%2017.5104-15.4624%20203.4176-179.3536a378.6752%20378.6752%200%200%200%2091.2384-118.4768c20.2752-41.984%2032.0512-88.32%2032.0512-137.7792a328.448%20328.448%200%200%200-100.8128-236.288z%20m24.1152%20353.3824a329.216%20329.216%200%200%201-79.872%20103.0656l-188.0064%20164.6592-187.1872-164.7616a329.0624%20329.0624%200%200%201-79.7696-103.0144%20267.0592%20267.0592%200%200%201-27.136-117.0944c0-78.7968%2032.9728-150.1184%2086.272-201.728a298.3936%20298.3936%200%200%201%20208.2816-83.5584c81.3056%200%20154.9824%2031.9488%20208.2304%2083.6096a279.9104%20279.9104%200%200%201%2086.272%20201.728%20266.496%20266.496%200%200%201-27.0848%20117.0944z%20m-164.1472-212.1728l0.0512-0.0512a146.9952%20146.9952%200%200%200-104.2432-43.2128c-40.6528%200-77.568%2016.5376-104.2432%2043.2128l0.0512%200.0512a147.3536%20147.3536%200%200%200-0.0512%20208.6912%20147.0464%20147.0464%200%200%200%20208.4864%200%20147.5072%20147.5072%200%200%200-0.0512-208.6912z%20m-34.1504%20174.2336a97.536%2097.536%200%200%201-69.2736%2028.7232%2097.6384%2097.6384%200%200%201-69.3248-28.7232%2097.792%2097.792%200%200%201-0.1536-138.4448h0.1024a97.9456%2097.9456%200%200%201%20138.5984%200h0.1536c17.664%2017.6128%2028.5696%2042.1376%2028.5696%2069.2224a97.1776%2097.1776%200%200%201-28.672%2069.2224z'%20fill='%23ffffff'%20p-id='10254'%3e%3c/path%3e%3c/svg%3e";
 const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect: r, drawMode: i, onDrawModeChange: s, showRectangleTool: c = !1, showCircleTool: l = !1, showPolygonTool: u = !1, showSquareTool: d = !1, showPolylineTool: f = !1 }) => {
-	let [p, h] = useState(!1), g = useRef(null);
+	let [p, g] = useState(!1), _ = useRef(null);
 	useEffect(() => {
 		let e = (e) => {
-			g.current && !g.current.contains(e.target) && h(!1);
+			_.current && !_.current.contains(e.target) && g(!1);
 		};
 		if (p) return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	}, [p]);
-	let _ = (e) => {
-		t?.id === e.id ? (r(null), s(null)) : (r(e), s("marker")), h(!1);
-	}, v = () => {
-		i === "rectangle" ? s(null) : (r(null), s("rectangle"));
+	let v = (e) => {
+		t?.id === e.id ? (r(null), s(null)) : (r(e), s("marker")), g(!1);
 	}, y = () => {
-		i === "circle" ? s(null) : (r(null), s("circle"));
+		i === "rectangle" ? s(null) : (r(null), s("rectangle"));
 	}, b = () => {
-		i === "polygon" ? s(null) : (r(null), s("polygon"));
+		i === "circle" ? s(null) : (r(null), s("circle"));
 	}, x = () => {
-		i === "square" ? s(null) : (r(null), s("square"));
+		i === "polygon" ? s(null) : (r(null), s("polygon"));
 	}, S = () => {
+		i === "square" ? s(null) : (r(null), s("square"));
+	}, C = () => {
 		i === "polyline" ? s(null) : (r(null), s("polyline"));
-	}, ye = () => {
-		(i === "rectangle" || i === "circle" || i === "polygon" || i === "square" || i === "polyline") && s(null), h(!p);
-	}, C = (e) => e.size ? {
+	}, w = () => {
+		(i === "rectangle" || i === "circle" || i === "polygon" || i === "square" || i === "polyline") && s(null), g(!p);
+	}, ve = (e) => e.size ? {
 		width: e.size,
 		height: e.size
 	} : {
 		width: e.width || 32,
 		height: e.height || 32
-	}, w = p || t, T = i === "rectangle", E = i === "circle", D = i === "polygon", be = i === "square", xe = i === "polyline";
+	}, T = p || t, E = i === "rectangle", D = i === "circle", O = i === "polygon", ye = i === "square", be = i === "polyline";
 	return /* @__PURE__ */ jsxs("div", {
-		ref: g,
+		ref: _,
 		className: "mapbox-edit-control",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "mapbox-edit-control__btn-group",
 			children: [
 				/* @__PURE__ */ jsxs("button", {
-					className: `mapbox-control-btn ${w ? "mapbox-control-btn--active" : ""}`,
-					onClick: ye,
+					className: `mapbox-control-btn ${T ? "mapbox-control-btn--active" : ""}`,
+					onClick: w,
 					title: "Marker",
 					children: [t ? /* @__PURE__ */ jsx("img", {
 						src: t.icon,
@@ -5447,8 +5448,8 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 					}), /* @__PURE__ */ jsx("span", { children: t ? t.name : "Marker" })]
 				}),
 				d && /* @__PURE__ */ jsxs("button", {
-					className: `mapbox-control-btn ${be ? "mapbox-control-btn--active" : ""}`,
-					onClick: x,
+					className: `mapbox-control-btn ${ye ? "mapbox-control-btn--active" : ""}`,
+					onClick: S,
 					title: "绘制正方形",
 					children: [/* @__PURE__ */ jsx("img", {
 						src: "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3csvg%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%3e%3crect%20x='192'%20y='192'%20width='640'%20height='640'%20rx='32'%20ry='32'%20fill='none'%20stroke='%23ffffff'%20stroke-width='64'/%3e%3c/svg%3e",
@@ -5457,8 +5458,8 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 					}), /* @__PURE__ */ jsx("span", { children: "正方形" })]
 				}),
 				c && /* @__PURE__ */ jsxs("button", {
-					className: `mapbox-control-btn ${T ? "mapbox-control-btn--active" : ""}`,
-					onClick: v,
+					className: `mapbox-control-btn ${E ? "mapbox-control-btn--active" : ""}`,
+					onClick: y,
 					title: "绘制矩形",
 					children: [/* @__PURE__ */ jsx("img", {
 						src: "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3csvg%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%3e%3crect%20x='160'%20y='240'%20width='704'%20height='544'%20rx='32'%20ry='32'%20fill='none'%20stroke='%23ffffff'%20stroke-width='64'/%3e%3c/svg%3e",
@@ -5467,8 +5468,8 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 					}), /* @__PURE__ */ jsx("span", { children: "矩形" })]
 				}),
 				l && /* @__PURE__ */ jsxs("button", {
-					className: `mapbox-control-btn ${E ? "mapbox-control-btn--active" : ""}`,
-					onClick: y,
+					className: `mapbox-control-btn ${D ? "mapbox-control-btn--active" : ""}`,
+					onClick: b,
 					title: "绘制圆形",
 					children: [/* @__PURE__ */ jsx("img", {
 						src: "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3csvg%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%3e%3ccircle%20cx='512'%20cy='512'%20r='384'%20fill='none'%20stroke='%23ffffff'%20stroke-width='64'/%3e%3c/svg%3e",
@@ -5477,8 +5478,8 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 					}), /* @__PURE__ */ jsx("span", { children: "圆形" })]
 				}),
 				u && /* @__PURE__ */ jsxs("button", {
-					className: `mapbox-control-btn ${D ? "mapbox-control-btn--active" : ""}`,
-					onClick: b,
+					className: `mapbox-control-btn ${O ? "mapbox-control-btn--active" : ""}`,
+					onClick: x,
 					title: "绘制多边形",
 					children: [/* @__PURE__ */ jsx("img", {
 						src: "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3csvg%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%3e%3cpolygon%20points='512,128%20864,384%20736,800%20288,800%20160,384'%20fill='none'%20stroke='%23ffffff'%20stroke-width='64'%20stroke-linejoin='round'/%3e%3c/svg%3e",
@@ -5487,8 +5488,8 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 					}), /* @__PURE__ */ jsx("span", { children: "多边形" })]
 				}),
 				f && /* @__PURE__ */ jsxs("button", {
-					className: `mapbox-control-btn ${xe ? "mapbox-control-btn--active" : ""}`,
-					onClick: S,
+					className: `mapbox-control-btn ${be ? "mapbox-control-btn--active" : ""}`,
+					onClick: C,
 					title: "绘制折线",
 					children: [/* @__PURE__ */ jsx("img", {
 						src: "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3csvg%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%3e%3cpolyline%20points='160,768%20384,256%20640,576%20864,192'%20fill='none'%20stroke='%23ffffff'%20stroke-width='64'%20stroke-linejoin='round'%20stroke-linecap='round'/%3e%3c/svg%3e",
@@ -5505,10 +5506,10 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 			}), /* @__PURE__ */ jsx("div", {
 				className: "mapbox-edit-control__template-list",
 				children: e.map((e) => {
-					let n = C(e), r = t?.id === e.id;
+					let n = ve(e), r = t?.id === e.id;
 					return /* @__PURE__ */ jsxs("div", {
 						className: `mapbox-edit-control__template-item ${r ? "mapbox-edit-control__template-item--selected" : ""}`,
-						onClick: () => _(e),
+						onClick: () => v(e),
 						title: e.name,
 						children: [/* @__PURE__ */ jsx("img", {
 							src: e.icon,
@@ -5577,28 +5578,28 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 };
 var route_planning_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20t='1775031767174'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='30653'%20data-spm-anchor-id='a313x.search_index.0.i6.78953a81FCkAe0'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='64'%20height='64'%3e%3cpath%20d='M322.24%20479.210667l-42.453333-42.432%20198.826666-198.826667c53.397333-53.376%20139.306667-53.568%20191.914667-0.981333%2052.608%2052.608%2052.416%20138.517333-0.981333%20191.914666L455.722667%20642.709333l-42.432-42.453333%20213.824-213.802667a74.773333%2074.773333%200%200%200-0.341334-105.728%2074.773333%2074.773333%200%200%200-105.728-0.341333l-198.826666%20198.826667z'%20fill='%23ffffff'%20p-id='30654'%3e%3c/path%3e%3cpath%20d='M699.093333%20613.333333l42.453334%2042.432-169.429334%20169.408c-48.341333%2048.341333-129.28%2042.282667-181.248-9.664-51.968-51.968-58.026667-132.906667-9.664-181.248l234.346667-234.346666%2042.432%2042.410666L423.616%20676.693333c-22.250667%2022.250667-19.050667%2065.024%2011.008%2095.061334%2030.037333%2030.058667%2072.810667%2033.258667%2095.061333%2010.986666l169.429334-169.408zM187.989333%20571.029333c-38.933333-38.933333-38.805333-102.613333%200.853334-142.293333%2039.68-39.68%20103.381333-39.808%20142.293333-0.853333%2038.954667%2038.912%2038.826667%20102.613333-0.853333%20142.293333-39.68%2039.658667-103.381333%2039.786667-142.293334%200.853333z%20m43.733334-43.733333c15.744%2015.744%2040.874667%2015.68%2056.128%200.426667%2015.253333-15.232%2015.296-40.362667-0.426667-56.106667-15.765333-15.744-40.896-15.701333-56.149333-0.448-15.232%2015.232-15.296%2040.384%200.448%2056.106667z'%20fill='%23ffffff'%20p-id='30655'%3e%3c/path%3e%3cpath%20d='M846.144%20489.728l-31.466667%20198.784-56.96-101.461333-104.042666-38.506667z'%20fill='%23ffffff'%20p-id='30656'%3e%3c/path%3e%3c/svg%3e", SOURCE_ID = "route-planning-temp-line", LINE_LAYER_ID = "route-planning-temp-line-layer", POINT_LAYER_ID = "route-planning-temp-point-layer";
 const RoutePlanningControl = forwardRef(({ map: e, pointCount: i = 2, showPointCountInput: c = !1, visualType: l = "marker", onSelectFinished: u, showButton: d = !0 }, f) => {
-	let [p, h] = useState("idle"), [g, _] = useState(0), [v, y] = useState(i), [b, x] = useState(!1), S = useRef(null), ye = useRef(null), C = useRef([]), w = useRef([]), T = useRef("idle"), E = useRef(null), D = useRef("");
+	let [p, g] = useState("idle"), [_, v] = useState(0), [y, b] = useState(i), [x, S] = useState(!1), C = useRef(null), w = useRef(null), ve = useRef([]), T = useRef([]), E = useRef("idle"), D = useRef(null), O = useRef("");
 	useEffect(() => {
-		T.current = p;
+		E.current = p;
 	}, [p]), useEffect(() => {
-		y(i);
+		b(i);
 	}, [i]), useEffect(() => {
-		if (!b) return;
+		if (!x) return;
 		let e = (e) => {
-			ye.current && !ye.current.contains(e.target) && S.current && !S.current.contains(e.target) && x(!1);
+			w.current && !w.current.contains(e.target) && C.current && !C.current.contains(e.target) && S(!1);
 		}, t = setTimeout(() => {
 			document.addEventListener("mousedown", e);
 		}, 0);
 		return () => {
 			clearTimeout(t), document.removeEventListener("mousedown", e);
 		};
-	}, [b]);
-	let be = useCallback(() => {
-		for (let e of w.current) e.remove();
-		w.current = [], e && (e.getLayer(LINE_LAYER_ID) && e.removeLayer(LINE_LAYER_ID), e.getLayer(POINT_LAYER_ID) && e.removeLayer(POINT_LAYER_ID), e.getSource(SOURCE_ID) && e.removeSource(SOURCE_ID));
-	}, [e]), xe = useCallback(() => {
+	}, [x]);
+	let ye = useCallback(() => {
+		for (let e of T.current) e.remove();
+		T.current = [], e && (e.getLayer(LINE_LAYER_ID) && e.removeLayer(LINE_LAYER_ID), e.getLayer(POINT_LAYER_ID) && e.removeLayer(POINT_LAYER_ID), e.getSource(SOURCE_ID) && e.removeSource(SOURCE_ID));
+	}, [e]), be = useCallback(() => {
 		if (!e) return;
-		let t = C.current, n = {
+		let t = ve.current, n = {
 			type: "FeatureCollection",
 			features: [{
 				type: "Feature",
@@ -5649,104 +5650,104 @@ const RoutePlanningControl = forwardRef(({ map: e, pointCount: i = 2, showPointC
 				"circle-stroke-color": "#fff"
 			}
 		}));
-	}, [e]), O = useCallback((t) => {
-		if (!e || !E.current) return;
-		let { visualType: n } = E.current;
+	}, [e]), k = useCallback((t) => {
+		if (!e || !D.current) return;
+		let { visualType: n } = D.current;
 		if (n === "marker") {
 			let n = document.createElement("div");
-			n.className = "route-planning-temp-marker", n.textContent = String(C.current.length);
+			n.className = "route-planning-temp-marker", n.textContent = String(ve.current.length);
 			let r = new mapboxgl.Marker({ element: n }).setLngLat(t).addTo(e);
-			w.current.push(r);
-		} else xe();
-	}, [e, xe]), Se = useCallback(() => {
-		be(), C.current = [], E.current = null, _(0), h("idle"), e && (e.getCanvas().style.cursor = D.current);
-	}, [be, e]), Ce = useCallback(async () => {
-		let e = E.current, t = [...C.current];
+			T.current.push(r);
+		} else be();
+	}, [e, be]), A = useCallback(() => {
+		ye(), ve.current = [], D.current = null, v(0), g("idle"), e && (e.getCanvas().style.cursor = O.current);
+	}, [ye, e]), j = useCallback(async () => {
+		let e = D.current, t = [...ve.current];
 		if (!e || t.length < 2) {
-			Se();
+			A();
 			return;
 		}
-		h("planning");
+		g("planning");
 		try {
 			await e.onSelectFinished(t);
 		} catch (e) {
 			console.error("Route planning onSelectFinished failed:", e);
 		} finally {
-			Se();
+			A();
 		}
-	}, [Se]), we = useCallback((e) => {
-		if (T.current !== "selecting" || !E.current) return;
+	}, [A]), xe = useCallback((e) => {
+		if (E.current !== "selecting" || !D.current) return;
 		let t = [e.lngLat.lng, e.lngLat.lat];
-		C.current.push(t);
-		let n = C.current.length;
-		_(n), O(t), n >= E.current.pointCount && Ce();
-	}, [O, Ce]), k = useCallback((e) => {
-		T.current === "selecting" && (e.preventDefault(), Se());
-	}, [Se]);
+		ve.current.push(t);
+		let n = ve.current.length;
+		v(n), k(t), n >= D.current.pointCount && j();
+	}, [k, j]), M = useCallback((e) => {
+		E.current === "selecting" && (e.preventDefault(), A());
+	}, [A]);
 	useEffect(() => {
-		if (e && p === "selecting") return e.on("click", we), e.on("contextmenu", k), () => {
-			e.off("click", we), e.off("contextmenu", k);
+		if (e && p === "selecting") return e.on("click", xe), e.on("contextmenu", M), () => {
+			e.off("click", xe), e.off("contextmenu", M);
 		};
 	}, [
 		e,
 		p,
-		we,
-		k
+		xe,
+		M
 	]);
-	let A = useCallback((t) => {
+	let N = useCallback((t) => {
 		if (!e) return;
-		T.current !== "idle" && Se();
+		E.current !== "idle" && A();
 		let n = Math.max(2, t.pointCount ?? i), r = t.visualType ?? l;
-		E.current = {
+		D.current = {
 			pointCount: n,
 			visualType: r,
 			onSelectFinished: t.onSelectFinished
-		}, C.current = [], _(0), y(n), x(!1), D.current = e.getCanvas().style.cursor, e.getCanvas().style.cursor = "crosshair", h("selecting");
+		}, ve.current = [], v(0), b(n), S(!1), O.current = e.getCanvas().style.cursor, e.getCanvas().style.cursor = "crosshair", g("selecting");
 	}, [
 		e,
 		i,
 		l,
-		Se
+		A
 	]);
-	useImperativeHandle(f, () => ({ startPlanning: A }), [A]);
-	let j = () => {
-		p === "idle" ? x((e) => !e) : p === "selecting" && Se();
-	}, Te = () => {
-		u && A({
-			pointCount: Math.max(2, v),
+	useImperativeHandle(f, () => ({ startPlanning: N }), [N]);
+	let P = () => {
+		p === "idle" ? S((e) => !e) : p === "selecting" && A();
+	}, Se = () => {
+		u && N({
+			pointCount: Math.max(2, y),
 			visualType: l,
 			onSelectFinished: u
 		});
-	}, M = (e) => {
+	}, F = (e) => {
 		let t = parseInt(e.target.value, 10);
-		!isNaN(t) && t >= 2 ? y(t) : e.target.value === "" && y(2);
-	}, Ee = () => {
+		!isNaN(t) && t >= 2 ? b(t) : e.target.value === "" && b(2);
+	}, Ce = () => {
 		if (p === "planning") return /* @__PURE__ */ jsx("span", { children: "规划中..." });
 		if (p === "selecting") {
-			let e = E.current?.pointCount ?? v;
+			let e = D.current?.pointCount ?? y;
 			return /* @__PURE__ */ jsxs("span", { children: [
-				g,
+				_,
 				"/",
 				e
 			] });
 		}
 		return "路径规划";
-	}, De = p === "selecting", N = p === "planning";
+	}, we = p === "selecting", I = p === "planning";
 	return !d && p === "idle" ? null : /* @__PURE__ */ jsxs("div", {
 		className: `mapbox-route-planning-control${d ? "" : " mapbox-route-planning-control--floating"}`,
 		children: [/* @__PURE__ */ jsxs("button", {
-			ref: S,
-			className: `mapbox-control-btn mapbox-route-planning-control__btn${De ? " mapbox-route-planning-control__btn--active" : ""}${N ? " mapbox-route-planning-control__btn--planning" : ""}${b ? " mapbox-route-planning-control__btn--active" : ""}`,
-			onClick: j,
-			disabled: N,
+			ref: C,
+			className: `mapbox-control-btn mapbox-route-planning-control__btn${we ? " mapbox-route-planning-control__btn--active" : ""}${I ? " mapbox-route-planning-control__btn--planning" : ""}${x ? " mapbox-route-planning-control__btn--active" : ""}`,
+			onClick: P,
+			disabled: I,
 			title: p === "idle" ? "路径规划" : p === "selecting" ? "取消选点" : "规划中...",
 			children: [/* @__PURE__ */ jsx("img", {
 				src: route_planning_default,
 				alt: "route",
 				className: "mapbox-route-planning-control__btn-icon"
-			}), Ee()]
-		}), b && p === "idle" && /* @__PURE__ */ jsxs("div", {
-			ref: ye,
+			}), Ce()]
+		}), x && p === "idle" && /* @__PURE__ */ jsxs("div", {
+			ref: w,
 			className: "mapbox-route-planning-control__panel",
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "mapbox-route-planning-control__panel-header",
@@ -5765,12 +5766,12 @@ const RoutePlanningControl = forwardRef(({ map: e, pointCount: i = 2, showPointC
 						}), c ? /* @__PURE__ */ jsx("input", {
 							type: "number",
 							className: "mapbox-route-planning-control__panel-input",
-							value: v,
+							value: y,
 							min: 2,
-							onChange: M
+							onChange: F
 						}) : /* @__PURE__ */ jsx("span", {
 							className: "mapbox-route-planning-control__panel-value",
-							children: v
+							children: y
 						})]
 					}),
 					/* @__PURE__ */ jsx("div", {
@@ -5779,7 +5780,7 @@ const RoutePlanningControl = forwardRef(({ map: e, pointCount: i = 2, showPointC
 					}),
 					/* @__PURE__ */ jsx("button", {
 						className: "mapbox-route-planning-control__panel-start",
-						onClick: Te,
+						onClick: Se,
 						disabled: !u,
 						children: "开始规划"
 					})
@@ -5936,53 +5937,53 @@ function adjustPopupForBounds(e, t) {
 	return r.x + t.width + 10 > n.width && (r.x = n.width - t.width - 10), r.x < 10 && (r.x = 10), r.y + t.height + 10 > n.height && (r.y = n.height - t.height - 10), r.y < 10 && (r.y = 10), r;
 }
 const Mapbox = forwardRef((e, c) => {
-	let { center: l = [116.4074, 39.9042], zoom: u = 12, pitch: d = 0, bearing: f = 0, style: p = "mapbox://styles/mapbox/dark-v11", maxBounds: h, mode: g = "display", editConfig: _ = {}, pickerConfig: v = {}, onPick: y, interactive: b = {}, layers: x = [], rasterPaint: S, entities: w = [], selectedIds: T = [], entityConfig: E, nameConfig: D, selectNameConfig: O, areaConfig: k, circleConfig: A, lengthConfig: j, showCoordinates: Te = !0, showScale: M = !0, showResetView: Ee = !0, showRoadHighlight: De = !1, showMeasure: N = !1, showRasterPaint: ke = !1, showRoutePlanning: Ne, onRasterPaintChange: Pe, popupDefaults: P, renderPopup: Ie, onMapLoad: Le, onEntityClick: Re, onPopupOpen: ze, onPopupClose: Be, className: Ve = "", containerStyle: He } = e, Ue = useRef(null), We = useRef(null), F = useRef(null), I = useRef(/* @__PURE__ */ new Map()), L = useRef(/* @__PURE__ */ new Map()), Ge = useRef(/* @__PURE__ */ new Set()), [R, Ke] = useState(null), qe = useRef(null), Je = useRef(null), Ye = useRef(null), [Xe, Ze] = useState(null), Qe = useRef(null), $e = useRef(null), [z, et] = useState(null), [tt, nt] = useState(g), [rt, it] = useState(null), at = useRef(null), [ot, B] = useState(null), [st, V] = useState(null), [ct, lt] = useState(null), H = useRef(!1), U = useRef(null), ut = useRef(null), W = useRef(null), dt = useRef(null), G = useRef(null), ft = useRef([]), K = useRef(null), pt = useRef(null), q = useRef(null), mt = useRef([]), ht = useRef(null), gt = useRef(!1), [_t, vt] = useState([]), yt = useRef([]);
-	yt.current = _t;
+	let { center: l = [116.4074, 39.9042], zoom: u = 12, pitch: d = 0, bearing: f = 0, style: p = "mapbox://styles/mapbox/dark-v11", maxBounds: g, mode: _ = "display", editConfig: v = {}, pickerConfig: y = {}, onPick: b, interactive: x = {}, layers: S = [], rasterPaint: C, entities: T = [], selectedIds: E = [], entityConfig: D, nameConfig: O, selectNameConfig: k, areaConfig: M, circleConfig: N, lengthConfig: P, showCoordinates: Se = !0, showScale: F = !0, showResetView: Ce = !0, showRoadHighlight: we = !1, showMeasure: I = !1, showRasterPaint: Ee = !1, showRoutePlanning: Ae, onRasterPaintChange: je, popupDefaults: L, renderPopup: Ne, onMapLoad: Pe, onEntityClick: Fe, onPopupOpen: Ie, onPopupClose: Le, className: Re = "", containerStyle: ze } = e, Be = useRef(null), Ve = useRef(null), He = useRef(null), R = useRef(null), z = useRef(/* @__PURE__ */ new Map()), B = useRef(/* @__PURE__ */ new Map()), Ue = useRef(/* @__PURE__ */ new Set()), [V, We] = useState(null), Ge = useRef(null), Ke = useRef(null), qe = useRef(null), [Je, Ye] = useState(null), Xe = useRef(null), Ze = useRef(null), [H, Qe] = useState(null), [$e, et] = useState(_), [tt, nt] = useState(null), rt = useRef(null), [it, U] = useState(null), [at, W] = useState(null), [ot, st] = useState(null), G = useRef(!1), ct = useRef(null), lt = useRef(null), K = useRef(null), ut = useRef(null), q = useRef(null), dt = useRef([]), ft = useRef(null), pt = useRef(null), mt = useRef(null), ht = useRef([]), gt = useRef(null), _t = useRef(!1), [vt, yt] = useState([]), bt = useRef([]);
+	bt.current = vt;
 	let J = useRef(null);
 	useEffect(() => {
-		nt(g);
-	}, [g]);
-	let bt = useCallback((e) => {
-		let t = I.current.get(e), n = L.current.get(e);
+		et(_);
+	}, [_]);
+	let xt = useCallback((e) => {
+		let t = z.current.get(e), n = B.current.get(e);
 		if (t && n) {
 			if (n.type === "radar" && t instanceof CanvasRadarRenderer) {
 				let r = {
 					...n,
 					isAnimating: !0
 				};
-				L.current.set(e, r), t.startAnimation();
+				B.current.set(e, r), t.startAnimation();
 			} else if (n.type === "circle" && t instanceof CanvasCircleRenderer) {
 				let r = {
 					...n,
 					isAnimating: !0
 				};
-				L.current.set(e, r), t.startAnimation();
+				B.current.set(e, r), t.startAnimation();
 			}
 		}
-	}, []), xt = useCallback((e) => {
-		let t = I.current.get(e), n = L.current.get(e);
+	}, []), St = useCallback((e) => {
+		let t = z.current.get(e), n = B.current.get(e);
 		if (t && n) {
 			if (n.type === "radar" && t instanceof CanvasRadarRenderer) {
 				let r = {
 					...n,
 					isAnimating: !1
 				};
-				L.current.set(e, r), t.stopAnimation();
+				B.current.set(e, r), t.stopAnimation();
 			} else if (n.type === "circle" && t instanceof CanvasCircleRenderer) {
 				let r = {
 					...n,
 					isAnimating: !1
 				};
-				L.current.set(e, r), t.stopAnimation();
+				B.current.set(e, r), t.stopAnimation();
 			}
 		}
-	}, []), St = useCallback((e) => {
-		let t = L.current.get(e);
-		t && (t.type === "radar" || t.type === "circle") && (t.type, t.isAnimating ? xt(e) : bt(e));
-	}, [bt, xt]), Ct = useCallback((e) => {
+	}, []), Ct = useCallback((e) => {
+		let t = B.current.get(e);
+		t && (t.type === "radar" || t.type === "circle") && (t.type, t.isAnimating ? St(e) : xt(e));
+	}, [xt, St]), wt = useCallback((e) => {
 		if (e === void 0) {
 			let e = !1;
-			for (let [, t] of I.current) if (t instanceof UnitRenderer) {
+			for (let [, t] of z.current) if (t instanceof UnitRenderer) {
 				let n = t.getShowTrajectory();
 				if (n === "all" || typeof n == "number" && n > 0) {
 					e = !0;
@@ -5990,46 +5991,46 @@ const Mapbox = forwardRef((e, c) => {
 				}
 			}
 			let t = e ? 0 : "all";
-			for (let [, e] of I.current) e instanceof UnitRenderer && e.setShowTrajectory(t);
+			for (let [, e] of z.current) e instanceof UnitRenderer && e.setShowTrajectory(t);
 		} else {
 			let t = new Set(e.map(String));
-			for (let [e, n] of I.current) n instanceof UnitRenderer && n.setShowTrajectory(t.has(String(e)) ? "all" : 0);
+			for (let [e, n] of z.current) n instanceof UnitRenderer && n.setShowTrajectory(t.has(String(e)) ? "all" : 0);
 		}
-	}, []), wt = useCallback((e, t, n) => {
-		let r = w.find((t) => String(t.id) === String(e));
-		if (!r?.popup || !F.current) return;
-		let i = r.popup.content ?? Ie?.(r);
+	}, []), Tt = useCallback((e, t, n) => {
+		let r = T.find((t) => String(t.id) === String(e));
+		if (!r?.popup || !R.current) return;
+		let i = r.popup.content ?? Ne?.(r);
 		if (!i) return;
-		let a = mergePopupConfig(r.popup, P, i), { position: o, actualPosition: s } = calculatePopupPosition(r, a, F.current, n);
-		Ke({
+		let a = mergePopupConfig(r.popup, L, i), { position: o, actualPosition: s } = calculatePopupPosition(r, a, R.current, n);
+		We({
 			entityId: e,
 			position: o,
 			config: a,
 			openedBy: t,
 			actualPosition: s
-		}), ze?.(e);
+		}), Ie?.(e);
 	}, [
-		w,
-		P,
-		Ie,
-		ze
-	]), Tt = useCallback((e) => {
-		R?.entityId === e && (Ke(null), Be?.(e));
-	}, [R, Be]), Et = useCallback(() => {
-		Ke((e) => (e && Be?.(e.entityId), null));
-	}, [Be]), Dt = useCallback((e) => R?.entityId === e, [R]), Ot = useCallback((e, t, n) => {
-		let r = F.current;
+		T,
+		L,
+		Ne,
+		Ie
+	]), Et = useCallback((e) => {
+		V?.entityId === e && (We(null), Le?.(e));
+	}, [V, Le]), Dt = useCallback(() => {
+		We((e) => (e && Le?.(e.entityId), null));
+	}, [Le]), Ot = useCallback((e) => V?.entityId === e, [V]), kt = useCallback((e, t, n) => {
+		let r = R.current;
 		r && r.flyTo({
 			center: e,
 			zoom: t ?? r.getZoom(),
 			...n
 		});
-	}, []), kt = useCallback((e, t, n) => {
-		let r = F.current;
+	}, []), At = useCallback((e, t, n) => {
+		let r = R.current;
 		if (!r || e.length === 0) return;
 		let i = [];
 		for (let t of e) {
-			let e = I.current.get(t);
+			let e = z.current.get(t);
 			e && i.push(e.getBounds());
 		}
 		if (i.length === 0) return;
@@ -6051,19 +6052,19 @@ const Mapbox = forwardRef((e, c) => {
 			pitch: n?.pitch ?? r.getPitch()
 		};
 		t !== void 0 && (p.maxZoom = t), n?.essential !== void 0 && (p.essential = n.essential), r.fitBounds(f, p);
-	}, []), At = useCallback((e) => {
-		let t = F.current;
+	}, []), jt = useCallback((e) => {
+		let t = R.current;
 		if (!t || !t.getContainer()) return;
-		let { showMarker: n = !0, markerColor: r = "#3388ff", name: i, nameConfig: a } = v;
+		let { showMarker: n = !0, markerColor: r = "#3388ff", name: i, nameConfig: a } = y;
 		if (!n) {
-			at.current &&= (at.current.remove(), null);
+			rt.current &&= (rt.current.remove(), null);
 			return;
 		}
-		if (at.current) {
-			at.current.setLngLat(e);
-			let t = at.current.getElement(), n = t.querySelector(".marker-label");
+		if (rt.current) {
+			rt.current.setLngLat(e);
+			let t = rt.current.getElement(), n = t.querySelector(".marker-label");
 			if (i) {
-				let e = resolveNameConfig(a, D);
+				let e = resolveNameConfig(a, O);
 				if (n) n.textContent = i, n.style.color = e.fillColor, n.style.opacity = String(e.fillOpacity), n.style.webkitTextStrokeColor = e.strokeColor, n.style.webkitTextStrokeWidth = `${e.strokeWidth}px`;
 				else {
 					let n = document.createElement("div");
@@ -6075,41 +6076,41 @@ const Mapbox = forwardRef((e, c) => {
 			n.className = "mapbox-picker-marker";
 			let o = document.createElement("div");
 			if (o.className = "marker-inner", o.style.background = r, n.appendChild(o), i) {
-				let e = resolveNameConfig(a, D), t = document.createElement("div");
+				let e = resolveNameConfig(a, O), t = document.createElement("div");
 				t.className = "marker-label", t.textContent = i, t.style.color = e.fillColor, t.style.opacity = String(e.fillOpacity), t.style.webkitTextStrokeColor = e.strokeColor, t.style.webkitTextStrokeWidth = `${e.strokeWidth}px`, n.appendChild(t);
 			}
-			at.current = new mapboxgl.Marker({
+			rt.current = new mapboxgl.Marker({
 				element: n,
 				anchor: "bottom"
 			}).setLngLat(e).addTo(t);
 		}
-	}, [v, D]), jt = useCallback(() => {
-		at.current &&= (at.current.remove(), null);
-	}, []), Mt = useCallback(() => `marker-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`, []), Nt = useCallback((e) => {
-		let t = F.current;
-		if (Ue.current) if (ht.current &&= (ht.current.remove(), null), e && t) {
+	}, [y, O]), Mt = useCallback(() => {
+		rt.current &&= (rt.current.remove(), null);
+	}, []), Nt = useCallback(() => `marker-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`, []), Pt = useCallback((e) => {
+		let t = R.current;
+		if (Be.current) if (gt.current &&= (gt.current.remove(), null), e && t) {
 			t.getCanvas().style.cursor = "none";
 			let n = document.createElement("div");
 			n.className = "mapbox-custom-cursor";
 			let r = e.size || e.width || 32;
 			n.style.cssText = "\n				position: fixed;\n				pointer-events: none;\n				z-index: 9999;\n				transform: translate(-50%, -50%);\n				opacity: 0.8;\n			";
 			let i = document.createElement("img");
-			i.src = e.icon, i.style.width = `${r}px`, i.style.height = `${e.size || e.height || r}px`, i.style.objectFit = "contain", n.appendChild(i), document.body.appendChild(n), ht.current = n;
+			i.src = e.icon, i.style.width = `${r}px`, i.style.height = `${e.size || e.height || r}px`, i.style.objectFit = "contain", n.appendChild(i), document.body.appendChild(n), gt.current = n;
 			let a = (e) => {
-				ht.current && (ht.current.style.left = `${e.clientX}px`, ht.current.style.top = `${e.clientY}px`);
+				gt.current && (gt.current.style.left = `${e.clientX}px`, gt.current.style.top = `${e.clientY}px`);
 			};
 			document.addEventListener("mousemove", a), n.dataset.cleanup = "true", n._cleanup = () => {
 				document.removeEventListener("mousemove", a);
 			};
 		} else t && (t.getCanvas().style.cursor = "");
 	}, []), Y = useCallback(() => {
-		if (ht.current) {
-			let e = ht.current._cleanup;
-			e && e(), ht.current.remove(), ht.current = null;
+		if (gt.current) {
+			let e = gt.current._cleanup;
+			e && e(), gt.current.remove(), gt.current = null;
 		}
-		let e = F.current;
+		let e = R.current;
 		e && (e.getCanvas().style.cursor = "");
-	}, []), Pt = useCallback((e, t, n) => {
+	}, []), Ft = useCallback((e, t, n) => {
 		if (!e.getSource(t)) {
 			if (!e.getStyle().glyphs) {
 				let t = e.style, n = "/gis-fonts/{fontstack}/{range}.pbf";
@@ -6145,8 +6146,8 @@ const Mapbox = forwardRef((e, c) => {
 				}
 			});
 		}
-	}, []), Ft = useCallback(() => {
-		let e = F.current;
+	}, []), It = useCallback(() => {
+		let e = R.current;
 		e && (e.getSource("rect-preview-source") || (e.addSource("rect-preview-source", {
 			type: "geojson",
 			data: {
@@ -6170,9 +6171,9 @@ const Mapbox = forwardRef((e, c) => {
 				"line-width": 2,
 				"line-dasharray": [4, 4]
 			}
-		}), Pt(e, "rect-preview-measure-source", "rect-preview-measure-label")));
-	}, [Pt]), It = useCallback((e, t) => {
-		let n = F.current;
+		}), Ft(e, "rect-preview-measure-source", "rect-preview-measure-label")));
+	}, [Ft]), Lt = useCallback((e, t) => {
+		let n = R.current;
 		if (!n) return;
 		let r = n.getSource("rect-preview-source");
 		if (!r) return;
@@ -6191,11 +6192,11 @@ const Mapbox = forwardRef((e, c) => {
 			},
 			properties: {}
 		});
-		let l = U.current, u = l?.strokeColor ?? "#3388ff", d = l?.strokeWidth ?? 2, f = l?.fillColor ?? "#3388ff", p = l?.fillOpacity ?? .1;
+		let l = ct.current, u = l?.strokeColor ?? "#3388ff", d = l?.strokeWidth ?? 2, f = l?.fillColor ?? "#3388ff", p = l?.fillOpacity ?? .1;
 		n.getLayer("rect-preview-line") && (n.setPaintProperty("rect-preview-line", "line-color", u), n.setPaintProperty("rect-preview-line", "line-width", d)), n.getLayer("rect-preview-fill") && (n.setPaintProperty("rect-preview-fill", "fill-color", f), n.setPaintProperty("rect-preview-fill", "fill-opacity", p));
 		let m = n.getSource("rect-preview-measure-source");
 		if (m) {
-			let e = Pn.current, t = [], n = c[0], r = c[1], i = c[2];
+			let e = Fn.current, t = [], n = c[0], r = c[1], i = c[2];
 			if (e?.showArea) {
 				let e = [(n[0] + i[0]) / 2, (n[1] + i[1]) / 2], a = distance(n, r), o = distance(r, i);
 				t.push({
@@ -6232,8 +6233,8 @@ const Mapbox = forwardRef((e, c) => {
 				features: t
 			});
 		}
-	}, []), Lt = useCallback(() => {
-		let e = F.current;
+	}, []), Rt = useCallback(() => {
+		let e = R.current;
 		if (!e) return;
 		let t = e.getSource("rect-preview-source");
 		t && t.setData({
@@ -6246,9 +6247,9 @@ const Mapbox = forwardRef((e, c) => {
 			features: []
 		});
 	}, []), X = useCallback(() => {
-		lt(null), Lt();
-	}, [Lt]), Rt = useCallback(() => {
-		let e = F.current;
+		st(null), Rt();
+	}, [Rt]), zt = useCallback(() => {
+		let e = R.current;
 		e && (e.getSource("circle-preview-source") || (e.addSource("circle-preview-source", {
 			type: "geojson",
 			data: {
@@ -6272,7 +6273,7 @@ const Mapbox = forwardRef((e, c) => {
 				"line-width": 2,
 				"line-dasharray": [4, 4]
 			}
-		}), Pt(e, "circle-preview-measure-source", "circle-preview-measure-label"), e.getSource("circle-preview-radius-source") || (e.addSource("circle-preview-radius-source", {
+		}), Ft(e, "circle-preview-measure-source", "circle-preview-measure-label"), e.getSource("circle-preview-radius-source") || (e.addSource("circle-preview-radius-source", {
 			type: "geojson",
 			data: {
 				type: "FeatureCollection",
@@ -6289,22 +6290,22 @@ const Mapbox = forwardRef((e, c) => {
 				"line-dasharray": [4, 4]
 			}
 		}))));
-	}, [Pt]), zt = useCallback((e, t, n = 64) => {
+	}, [Ft]), Bt = useCallback((e, t, n = 64) => {
 		let [r, i] = e, a = [], o = t / 6371e3, s = i * Math.PI / 180;
 		for (let e = 0; e <= n; e++) {
 			let t = e / n * 2 * Math.PI, c = o * Math.cos(t), l = o * Math.sin(t) / Math.cos(s), u = i + c * 180 / Math.PI, d = r + l * 180 / Math.PI;
 			a.push([d, u]);
 		}
 		return a;
-	}, []), Bt = useCallback((e, t) => {
+	}, []), Vt = useCallback((e, t) => {
 		let [n, r] = e, [i, a] = t, o = (a - r) * Math.PI / 180, s = (i - n) * Math.PI / 180, c = Math.sin(o / 2) * Math.sin(o / 2) + Math.cos(r * Math.PI / 180) * Math.cos(a * Math.PI / 180) * Math.sin(s / 2) * Math.sin(s / 2);
 		return 6371e3 * (2 * Math.atan2(Math.sqrt(c), Math.sqrt(1 - c)));
-	}, []), Vt = useCallback((e, t) => {
-		let n = F.current;
+	}, []), Ht = useCallback((e, t) => {
+		let n = R.current;
 		if (!n) return;
 		let r = n.getSource("circle-preview-source");
 		if (!r) return;
-		let i = Bt(e, t), a = zt(e, i);
+		let i = Vt(e, t), a = Bt(e, i);
 		r.setData({
 			type: "Feature",
 			geometry: {
@@ -6313,9 +6314,9 @@ const Mapbox = forwardRef((e, c) => {
 			},
 			properties: {}
 		});
-		let o = W.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2, l = o?.fillColor ?? "#3388ff", u = o?.fillOpacity ?? .1;
+		let o = K.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2, l = o?.fillColor ?? "#3388ff", u = o?.fillOpacity ?? .1;
 		n.getLayer("circle-preview-line") && (n.setPaintProperty("circle-preview-line", "line-color", s), n.setPaintProperty("circle-preview-line", "line-width", c)), n.getLayer("circle-preview-fill") && (n.setPaintProperty("circle-preview-fill", "fill-color", l), n.setPaintProperty("circle-preview-fill", "fill-opacity", u));
-		let d = Pn.current, f = [], p = [];
+		let d = Fn.current, f = [], p = [];
 		if (d?.showArea) {
 			let t = Math.PI * i * i;
 			f.push({
@@ -6328,7 +6329,7 @@ const Mapbox = forwardRef((e, c) => {
 			});
 		}
 		if (d?.showRadius) {
-			let t = W.current?.radiusAngle ?? 90, n = destinationPoint(e, i, t), r = [(e[0] + n[0]) / 2, (e[1] + n[1]) / 2];
+			let t = K.current?.radiusAngle ?? 90, n = destinationPoint(e, i, t), r = [(e[0] + n[0]) / 2, (e[1] + n[1]) / 2];
 			p.push({
 				type: "Feature",
 				geometry: {
@@ -6350,13 +6351,13 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: f
 		});
-		let ve = n.getSource("circle-preview-radius-source");
-		ve && ve.setData({
+		let h = n.getSource("circle-preview-radius-source");
+		h && h.setData({
 			type: "FeatureCollection",
 			features: p
 		});
-	}, [Bt, zt]), Ht = useCallback(() => {
-		let e = F.current;
+	}, [Vt, Bt]), Ut = useCallback(() => {
+		let e = R.current;
 		if (!e) return;
 		let t = e.getSource("circle-preview-source");
 		t && t.setData({
@@ -6373,10 +6374,10 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), Ut = useCallback(() => {
-		dt.current = null, Ht();
-	}, [Ht]), Wt = useCallback(() => {
-		let e = F.current;
+	}, []), Wt = useCallback(() => {
+		ut.current = null, Ut();
+	}, [Ut]), Gt = useCallback(() => {
+		let e = R.current;
 		e && (e.getSource("polygon-preview-source") || (e.addSource("polygon-preview-source", {
 			type: "geojson",
 			data: {
@@ -6416,9 +6417,9 @@ const Mapbox = forwardRef((e, c) => {
 				"circle-stroke-color": "#ffffff",
 				"circle-stroke-width": 2
 			}
-		}), Pt(e, "polygon-preview-measure-source", "polygon-preview-measure-label")));
-	}, [Pt]), Gt = useCallback((e, t) => {
-		let n = F.current;
+		}), Ft(e, "polygon-preview-measure-source", "polygon-preview-measure-label")));
+	}, [Ft]), Kt = useCallback((e, t) => {
+		let n = R.current;
 		if (!n) return;
 		let r = n.getSource("polygon-preview-source"), i = n.getSource("polygon-vertices-source");
 		if (!r || !i) return;
@@ -6455,11 +6456,11 @@ const Mapbox = forwardRef((e, c) => {
 				properties: {}
 			}))
 		});
-		let o = G.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2, l = o?.fillColor ?? "#3388ff", u = o?.fillOpacity ?? .1;
+		let o = q.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2, l = o?.fillColor ?? "#3388ff", u = o?.fillOpacity ?? .1;
 		n.getLayer("polygon-preview-line") && (n.setPaintProperty("polygon-preview-line", "line-color", s), n.setPaintProperty("polygon-preview-line", "line-width", c)), n.getLayer("polygon-preview-fill") && (n.setPaintProperty("polygon-preview-fill", "fill-color", l), n.setPaintProperty("polygon-preview-fill", "fill-opacity", u)), n.getLayer("polygon-vertices") && n.setPaintProperty("polygon-vertices", "circle-color", s);
 		let d = n.getSource("polygon-preview-measure-source");
 		if (d) {
-			let e = Pn.current, t = [];
+			let e = Fn.current, t = [];
 			if (e?.showArea && a.length >= 3) {
 				let e = [...a, a[0]], n = polygonArea(e), r = 0, i = 0;
 				for (let e of a) r += e[0], i += e[1];
@@ -6501,8 +6502,8 @@ const Mapbox = forwardRef((e, c) => {
 				features: t
 			});
 		}
-	}, []), Kt = useCallback(() => {
-		let e = F.current;
+	}, []), qt = useCallback(() => {
+		let e = R.current;
 		if (!e) return;
 		let t = e.getSource("polygon-preview-source");
 		t && t.setData({
@@ -6519,10 +6520,10 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), qt = useCallback(() => {
-		ft.current = [], Kt();
-	}, [Kt]), Jt = useCallback(() => {
-		let e = F.current;
+	}, []), Jt = useCallback(() => {
+		dt.current = [], qt();
+	}, [qt]), Yt = useCallback(() => {
+		let e = R.current;
 		e && (e.getSource("square-preview-source") || (e.addSource("square-preview-source", {
 			type: "geojson",
 			data: {
@@ -6546,8 +6547,8 @@ const Mapbox = forwardRef((e, c) => {
 				"line-width": 2,
 				"line-dasharray": [4, 4]
 			}
-		}), Pt(e, "square-preview-measure-source", "square-preview-measure-label")));
-	}, [Pt]), Yt = useCallback((e, t) => {
+		}), Ft(e, "square-preview-measure-source", "square-preview-measure-label")));
+	}, [Ft]), Xt = useCallback((e, t) => {
 		let [n, r] = e, i = t / 2 / 6371e3, a = r * Math.PI / 180, o = i * 180 / Math.PI, s = i * 180 / Math.PI / Math.cos(a);
 		return [
 			[n - s, r + o],
@@ -6556,12 +6557,12 @@ const Mapbox = forwardRef((e, c) => {
 			[n - s, r - o],
 			[n - s, r + o]
 		];
-	}, []), Xt = useCallback((e, t) => {
-		let n = F.current;
+	}, []), Zt = useCallback((e, t) => {
+		let n = R.current;
 		if (!n) return;
 		let r = n.getSource("square-preview-source");
 		if (!r) return;
-		let i = Bt(e, t) * 2, a = Yt(e, i);
+		let i = Vt(e, t) * 2, a = Xt(e, i);
 		r.setData({
 			type: "Feature",
 			geometry: {
@@ -6570,11 +6571,11 @@ const Mapbox = forwardRef((e, c) => {
 			},
 			properties: {}
 		});
-		let o = K.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2, l = o?.fillColor ?? "#3388ff", u = o?.fillOpacity ?? .1;
+		let o = ft.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2, l = o?.fillColor ?? "#3388ff", u = o?.fillOpacity ?? .1;
 		n.getLayer("square-preview-line") && (n.setPaintProperty("square-preview-line", "line-color", s), n.setPaintProperty("square-preview-line", "line-width", c)), n.getLayer("square-preview-fill") && (n.setPaintProperty("square-preview-fill", "fill-color", l), n.setPaintProperty("square-preview-fill", "fill-opacity", u));
 		let d = n.getSource("square-preview-measure-source");
 		if (d) {
-			let t = Pn.current, n = [];
+			let t = Fn.current, n = [];
 			if (t?.showArea && n.push({
 				type: "Feature",
 				geometry: {
@@ -6598,8 +6599,8 @@ const Mapbox = forwardRef((e, c) => {
 				features: n
 			});
 		}
-	}, [Bt, Yt]), Zt = useCallback(() => {
-		let e = F.current;
+	}, [Vt, Xt]), Qt = useCallback(() => {
+		let e = R.current;
 		if (!e) return;
 		let t = e.getSource("square-preview-source");
 		t && t.setData({
@@ -6611,10 +6612,10 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), Qt = useCallback(() => {
-		pt.current = null, Zt();
-	}, [Zt]), $t = useCallback(() => {
-		let e = F.current;
+	}, []), $t = useCallback(() => {
+		pt.current = null, Qt();
+	}, [Qt]), en = useCallback(() => {
+		let e = R.current;
 		e && (e.getSource("polyline-preview-source") || (e.addSource("polyline-preview-source", {
 			type: "geojson",
 			data: {
@@ -6646,9 +6647,9 @@ const Mapbox = forwardRef((e, c) => {
 				"circle-stroke-color": "#ffffff",
 				"circle-stroke-width": 2
 			}
-		}), Pt(e, "polyline-preview-measure-source", "polyline-preview-measure-label")));
-	}, [Pt]), en = useCallback((e, t) => {
-		let n = F.current;
+		}), Ft(e, "polyline-preview-measure-source", "polyline-preview-measure-label")));
+	}, [Ft]), tn = useCallback((e, t) => {
+		let n = R.current;
 		if (!n) return;
 		let r = n.getSource("polyline-preview-source"), i = n.getSource("polyline-vertices-source");
 		if (!r || !i) return;
@@ -6674,11 +6675,11 @@ const Mapbox = forwardRef((e, c) => {
 				properties: {}
 			}))
 		});
-		let o = q.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2;
+		let o = mt.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2;
 		n.getLayer("polyline-preview-line") && (n.setPaintProperty("polyline-preview-line", "line-color", s), n.setPaintProperty("polyline-preview-line", "line-width", c)), n.getLayer("polyline-vertices") && n.setPaintProperty("polyline-vertices", "circle-color", s);
 		let l = n.getSource("polyline-preview-measure-source");
 		if (l) {
-			let e = Pn.current, t = [];
+			let e = Fn.current, t = [];
 			if (e?.showLength && a.length >= 2) for (let e = 0; e < a.length - 1; e++) {
 				let n = a[e], r = a[e + 1], i = [(n[0] + r[0]) / 2, (n[1] + r[1]) / 2];
 				t.push({
@@ -6695,8 +6696,8 @@ const Mapbox = forwardRef((e, c) => {
 				features: t
 			});
 		}
-	}, []), tn = useCallback(() => {
-		let e = F.current;
+	}, []), nn = useCallback(() => {
+		let e = R.current;
 		if (!e) return;
 		let t = e.getSource("polyline-preview-source");
 		t && t.setData({
@@ -6714,158 +6715,159 @@ const Mapbox = forwardRef((e, c) => {
 			features: []
 		});
 	}, []), Z = useCallback(() => {
-		mt.current = [], tn();
-	}, [tn]), nn = useCallback((e) => {
-		B(e), Nt(e), e ? (V("marker"), X(), Ut(), qt(), Qt(), Z()) : V(null);
+		ht.current = [], nn();
+	}, [nn]), rn = useCallback((e) => {
+		U(e), Pt(e), e ? (W("marker"), X(), Wt(), Jt(), $t(), Z()) : W(null);
 	}, [
-		Nt,
+		Pt,
 		X,
-		Ut,
-		qt,
-		Qt,
+		Wt,
+		Jt,
+		$t,
 		Z
-	]), rn = useCallback((e) => {
-		if (V(e), e === "rectangle") {
-			B(null), Y(), Ut(), qt(), Qt(), Z();
-			let e = F.current;
+	]), an = useCallback((e) => {
+		if (W(e), e === "rectangle") {
+			U(null), Y(), Wt(), Jt(), $t(), Z();
+			let e = R.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "circle") {
-			B(null), Y(), X(), qt(), Qt(), Z();
-			let e = F.current;
+			U(null), Y(), X(), Jt(), $t(), Z();
+			let e = R.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "polygon") {
-			B(null), Y(), X(), Ut(), Qt(), Z();
-			let e = F.current;
+			U(null), Y(), X(), Wt(), $t(), Z();
+			let e = R.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "square") {
-			B(null), Y(), X(), Ut(), qt(), Z();
-			let e = F.current;
+			U(null), Y(), X(), Wt(), Jt(), Z();
+			let e = R.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "polyline") {
-			B(null), Y(), X(), Ut(), qt(), Qt();
-			let e = F.current;
+			U(null), Y(), X(), Wt(), Jt(), $t();
+			let e = R.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
-		} else e === "marker" ? (X(), Ut(), qt(), Qt(), Z()) : (B(null), Y(), X(), Ut(), qt(), Qt(), Z());
+		} else e === "marker" ? (X(), Wt(), Jt(), $t(), Z()) : (U(null), Y(), X(), Wt(), Jt(), $t(), Z());
 	}, [
 		Y,
 		X,
-		Ut,
-		qt,
-		Qt,
+		Wt,
+		Jt,
+		$t,
 		Z
-	]), an = useCallback((e) => {
+	]), on = useCallback((e) => {
 		if (e !== "picker") {
-			let e = v.value && isFinite(v.value.lng) && isFinite(v.value.lat), t = v.showMarker !== !1;
-			(!e || !t) && jt(), it(null);
+			let e = y.value && isFinite(y.value.lng) && isFinite(y.value.lat), t = y.showMarker !== !1;
+			(!e || !t) && Mt(), nt(null);
 		}
-		e !== "edit" && (B(null), V(null), X(), Z(), Y()), nt(e);
+		e !== "edit" && (U(null), W(null), X(), Z(), Y()), et(e);
 	}, [
-		jt,
+		Mt,
 		Y,
 		X,
 		Z
-	]), on = useCallback(() => tt, [tt]), sn = useCallback(() => rt, [rt]), cn = useCallback(() => {
-		jt(), it(null);
-	}, [jt]);
+	]), sn = useCallback(() => $e, [$e]), cn = useCallback(() => tt, [tt]), ln = useCallback(() => {
+		Mt(), nt(null);
+	}, [Mt]);
 	useEffect(() => {
-		if (!z) return;
-		let e = v.value;
+		if (!H) return;
+		let e = y.value;
 		if (e && isFinite(e.lng) && isFinite(e.lat)) {
 			let t = [e.lng, e.lat];
-			it(e), At(t);
+			nt(e), jt(t);
 		}
 	}, [
-		v.value,
-		At,
-		z
+		y.value,
+		jt,
+		H
 	]);
-	let ln = (e) => "mode" in e, un = useCallback((e) => {
-		if (nt("edit"), jt(), it(null), H.current = !0, ln(e)) {
-			if (e.mode === "marker") e.markerStyle ? (ut.current = e.markerStyle, U.current = null, W.current = null, G.current = null, K.current = null, q.current = null, B(null), V("marker"), e.markerStyle.src && e.markerStyle.width ? Nt({
+	let un = (e) => "mode" in e, dn = useCallback((e) => {
+		if (et("edit"), Mt(), nt(null), G.current = !0, un(e)) {
+			if (e.mode === "marker") e.markerStyle ? (lt.current = e.markerStyle, ct.current = null, K.current = null, q.current = null, ft.current = null, mt.current = null, U(null), W("marker"), e.markerStyle.src && e.markerStyle.width ? Pt({
 				id: "custom",
 				name: e.markerStyle.name || "Marker",
 				icon: e.markerStyle.src,
 				width: e.markerStyle.width
-			}) : Y()) : e.template && (ut.current = null, U.current = null, W.current = null, G.current = null, K.current = null, q.current = null, B(e.template), V("marker"), Nt(e.template));
+			}) : Y()) : e.template && (lt.current = null, ct.current = null, K.current = null, q.current = null, ft.current = null, mt.current = null, U(e.template), W("marker"), Pt(e.template));
 			else if (e.mode === "rectangle") {
-				U.current = e.rectangleStyle || null, ut.current = null, W.current = null, G.current = null, K.current = null, q.current = null, B(null), V("rectangle"), Y();
-				let t = F.current;
+				ct.current = e.rectangleStyle || null, lt.current = null, K.current = null, q.current = null, ft.current = null, mt.current = null, U(null), W("rectangle"), Y();
+				let t = R.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "circle") {
-				W.current = e.circleStyle || null, U.current = null, ut.current = null, G.current = null, K.current = null, q.current = null, B(null), V("circle"), Y();
-				let t = F.current;
+				K.current = e.circleStyle || null, ct.current = null, lt.current = null, q.current = null, ft.current = null, mt.current = null, U(null), W("circle"), Y();
+				let t = R.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "polygon") {
-				G.current = e.polygonStyle || null, U.current = null, ut.current = null, W.current = null, K.current = null, q.current = null, B(null), V("polygon"), Y();
-				let t = F.current;
+				q.current = e.polygonStyle || null, ct.current = null, lt.current = null, K.current = null, ft.current = null, mt.current = null, U(null), W("polygon"), Y();
+				let t = R.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "square") {
-				K.current = e.squareStyle || null, U.current = null, ut.current = null, W.current = null, G.current = null, q.current = null, B(null), V("square"), Y();
-				let t = F.current;
+				ft.current = e.squareStyle || null, ct.current = null, lt.current = null, K.current = null, q.current = null, mt.current = null, U(null), W("square"), Y();
+				let t = R.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "polyline") {
-				q.current = e.polylineStyle || null, U.current = null, ut.current = null, W.current = null, G.current = null, K.current = null, B(null), V("polyline"), Y();
-				let t = F.current;
+				mt.current = e.polylineStyle || null, ct.current = null, lt.current = null, K.current = null, q.current = null, ft.current = null, U(null), W("polyline"), Y();
+				let t = R.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			}
-		} else B(e), V("marker"), Nt(e), U.current = null, ut.current = null, W.current = null, G.current = null, K.current = null, q.current = null;
+		} else U(e), W("marker"), Pt(e), ct.current = null, lt.current = null, K.current = null, q.current = null, ft.current = null, mt.current = null;
 	}, [
-		jt,
-		Nt,
+		Mt,
+		Pt,
 		Y
 	]);
 	useImperativeHandle(c, () => ({
-		startAnimation: bt,
-		stopAnimation: xt,
-		toggleAnimation: St,
-		getMap: () => F.current,
-		openPopup: (e) => wt(e, "programmatic"),
-		closePopup: Tt,
-		closeAllPopups: Et,
-		isPopupOpen: Dt,
-		toggleUnitTrajectory: Ct,
-		flyTo: Ot,
-		flyToEntities: kt,
-		getMode: on,
-		setMode: an,
-		getPickedLocation: sn,
-		clearPickedLocation: cn,
-		startDrawing: un,
-		getRenderer: (e) => I.current.get(e),
+		startAnimation: xt,
+		stopAnimation: St,
+		toggleAnimation: Ct,
+		getMap: () => R.current,
+		openPopup: (e) => Tt(e, "programmatic"),
+		closePopup: Et,
+		closeAllPopups: Dt,
+		isPopupOpen: Ot,
+		toggleUnitTrajectory: wt,
+		flyTo: kt,
+		flyToEntities: At,
+		getMode: sn,
+		setMode: on,
+		getPickedLocation: cn,
+		clearPickedLocation: ln,
+		startDrawing: dn,
+		getRenderer: (e) => z.current.get(e),
 		setEditingEntities: (e) => {
-			for (let t of yt.current) e.map(String).includes(String(t)) || I.current.get(t)?.setEditing?.(!1);
-			for (let t of e) I.current.get(t)?.setEditing?.(!0);
-			J.current &&= (I.current.get(J.current.entityId)?.cancelEditPreview?.(), null), vt(e);
+			for (let t of bt.current) e.map(String).includes(String(t)) || z.current.get(t)?.setEditing?.(!1);
+			for (let t of e) z.current.get(t)?.setEditing?.(!0);
+			J.current &&= (z.current.get(J.current.entityId)?.cancelEditPreview?.(), null), yt(e);
 		},
-		getEditingEntities: () => yt.current,
+		getEditingEntities: () => bt.current,
 		startRoutePlanning: (e) => {
-			We.current?.startPlanning(e);
-		}
+			Ve.current?.startPlanning(e);
+		},
+		getRoadHighlightControl: () => He.current
 	}), [
-		bt,
 		xt,
 		St,
-		wt,
+		Ct,
 		Tt,
 		Et,
 		Dt,
-		Ct,
 		Ot,
+		wt,
 		kt,
-		on,
-		an,
+		At,
 		sn,
+		on,
 		cn,
-		un
+		ln,
+		dn
 	]);
-	let dn = useCallback(() => {
-		let e = F.current;
+	let fn = useCallback(() => {
+		let e = R.current;
 		if (!e) return;
-		let t = new Set(w.map((e) => e.id)), n = new Set(I.current.keys());
-		for (let e of n) t.has(e) || (I.current.get(e)?.destroy(), I.current.delete(e));
-		let r = new Set(T.map(String));
-		for (let t of w) {
-			let n = applyEntityConfig(t, E), i = I.current.get(n.id);
+		let t = new Set(T.map((e) => e.id)), n = new Set(z.current.keys());
+		for (let e of n) t.has(e) || (z.current.get(e)?.destroy(), z.current.delete(e));
+		let r = new Set(E.map(String));
+		for (let t of T) {
+			let n = applyEntityConfig(t, D), i = z.current.get(n.id);
 			if (i) if (n.type === "radar" && i instanceof CanvasRadarRenderer) i.update(n);
 			else if (n.type === "image" && i instanceof CanvasImageRenderer) i.update(n);
 			else if (n.type === "marker" && i instanceof MarkerRenderer) i.update(n);
@@ -6874,38 +6876,38 @@ const Mapbox = forwardRef((e, c) => {
 			else if (n.type === "circle") if (n.fillType === "radial-gradient") if (i instanceof CanvasCircleRenderer) i.update(n);
 			else {
 				i.destroy();
-				let t = new CanvasCircleRenderer(e, n, D, O, k, A);
-				I.current.set(n.id, t), t.setSelected(r.has(String(n.id)));
+				let t = new CanvasCircleRenderer(e, n, O, k, M, N);
+				z.current.set(n.id, t), t.setSelected(r.has(String(n.id)));
 			}
 			else if (i instanceof CircleRenderer) i.update(n);
 			else {
 				i.destroy();
-				let t = new CircleRenderer(e, n, D, O, k, A);
-				I.current.set(n.id, t), t.setSelected(r.has(String(n.id)));
+				let t = new CircleRenderer(e, n, O, k, M, N);
+				z.current.set(n.id, t), t.setSelected(r.has(String(n.id)));
 			}
 			else (n.type === "square" && i instanceof SquareRenderer || n.type === "rectangle" && i instanceof RectangleRenderer || n.type === "polyline" && i instanceof PolylineRenderer) && i.update(n);
 			else {
 				let t = null;
-				n.type === "radar" ? t = new CanvasRadarRenderer(e, n, D, O) : n.type === "image" ? t = new CanvasImageRenderer(e, n, D, O) : n.type === "marker" ? t = new MarkerRenderer(e, n, D, O) : n.type === "unit" ? t = new UnitRenderer(e, n, D, O) : n.type === "polygon" ? t = new PolygonRenderer(e, n, D, O, k, j) : n.type === "circle" ? t = n.fillType === "radial-gradient" ? new CanvasCircleRenderer(e, n, D, O, k, A) : new CircleRenderer(e, n, D, O, k, A) : n.type === "square" ? t = new SquareRenderer(e, n, D, O, k, j) : n.type === "rectangle" ? t = new RectangleRenderer(e, n, D, O, k, j) : n.type === "polyline" && (t = new PolylineRenderer(e, n, D, O, j)), t && (I.current.set(n.id, t), t.setSelected(r.has(String(n.id))), yt.current.map(String).includes(String(n.id)) && t.setEditing?.(!0));
+				n.type === "radar" ? t = new CanvasRadarRenderer(e, n, O, k) : n.type === "image" ? t = new CanvasImageRenderer(e, n, O, k) : n.type === "marker" ? t = new MarkerRenderer(e, n, O, k) : n.type === "unit" ? t = new UnitRenderer(e, n, O, k) : n.type === "polygon" ? t = new PolygonRenderer(e, n, O, k, M, P) : n.type === "circle" ? t = n.fillType === "radial-gradient" ? new CanvasCircleRenderer(e, n, O, k, M, N) : new CircleRenderer(e, n, O, k, M, N) : n.type === "square" ? t = new SquareRenderer(e, n, O, k, M, P) : n.type === "rectangle" ? t = new RectangleRenderer(e, n, O, k, M, P) : n.type === "polyline" && (t = new PolylineRenderer(e, n, O, k, P)), t && (z.current.set(n.id, t), t.setSelected(r.has(String(n.id))), bt.current.map(String).includes(String(n.id)) && t.setEditing?.(!0));
 			}
 		}
-		for (let e of yt.current) {
-			let t = I.current.get(e);
+		for (let e of bt.current) {
+			let t = z.current.get(e);
 			t && t.setEditing?.(!0);
 		}
 	}, [
-		w,
 		T,
 		E,
 		D,
 		O,
 		k,
-		A,
-		j
-	]), fn = useCallback(() => {
-		for (let e of I.current.values()) e.destroy();
-		I.current.clear();
-	}, []), pn = useCallback((e) => {
+		M,
+		N,
+		P
+	]), pn = useCallback(() => {
+		for (let e of z.current.values()) e.destroy();
+		z.current.clear();
+	}, []), mn = useCallback((e) => {
 		let t = e.getStyle();
 		if (!t?.layers) return;
 		let n = [
@@ -6920,10 +6922,10 @@ const Mapbox = forwardRef((e, c) => {
 			"marker-"
 		];
 		for (let e of t.layers) if (n.some((t) => e.id.startsWith(t))) return e.id;
-	}, []), mn = useCallback((e) => {
-		let t = S, n = { "raster-opacity": e.opacity ?? 1 }, r = e.brightness ?? t?.brightness, i = e.saturation ?? t?.saturation, a = e.contrast ?? t?.contrast, o = e.hueRotate ?? t?.hueRotate;
+	}, []), hn = useCallback((e) => {
+		let t = C, n = { "raster-opacity": e.opacity ?? 1 }, r = e.brightness ?? t?.brightness, i = e.saturation ?? t?.saturation, a = e.contrast ?? t?.contrast, o = e.hueRotate ?? t?.hueRotate;
 		return r !== void 0 && (n["raster-brightness-min"] = 0, n["raster-brightness-max"] = r), i !== void 0 && (n["raster-saturation"] = i), a !== void 0 && (n["raster-contrast"] = a), o !== void 0 && (n["raster-hue-rotate"] = o), n;
-	}, [S]), hn = useCallback((e, t) => {
+	}, [C]), gn = useCallback((e, t) => {
 		let n = `base-layer-source-${t.id}`, r = `base-layer-${t.id}`, i = {
 			type: "raster",
 			tiles: [t.url],
@@ -6933,19 +6935,19 @@ const Mapbox = forwardRef((e, c) => {
 			scheme: t.scheme ?? "xyz"
 		};
 		t.bounds && (i.bounds = t.bounds), t.attribution && (i.attribution = t.attribution), e.addSource(n, i);
-		let a = pn(e);
+		let a = mn(e);
 		e.addLayer({
 			id: r,
 			type: "raster",
 			source: n,
-			paint: mn(t),
+			paint: hn(t),
 			layout: { visibility: t.visible === !1 ? "none" : "visible" }
 		}, a);
-	}, [pn, mn]), gn = useCallback(async (e, t) => {
+	}, [mn, hn]), _n = useCallback(async (e, t) => {
 		try {
 			let n = await (await fetch(t.url)).json(), r = `base-layer-source-${t.id}`, i = `base-layer-${t.id}`;
-			if (!Ge.current.has(t.id)) return;
-			let a = n.format === "pbf" || n.vector_layers, o = pn(e);
+			if (!Ue.current.has(t.id)) return;
+			let a = n.format === "pbf" || n.vector_layers, o = mn(e);
 			if (a) {
 				let t = {
 					type: "vector",
@@ -6966,21 +6968,21 @@ const Mapbox = forwardRef((e, c) => {
 				id: i,
 				type: "raster",
 				source: r,
-				paint: mn(t),
+				paint: hn(t),
 				layout: { visibility: t.visible === !1 ? "none" : "visible" }
 			}, o);
 		} catch (e) {
 			console.error(`Failed to load TileJSON from ${t.url}:`, e);
 		}
-	}, [pn, mn]), _n = useCallback(async (e, t) => {
+	}, [mn, hn]), vn = useCallback(async (e, t) => {
 		try {
 			let n = await (await fetch(t.url)).json();
-			if (!Ge.current.has(t.id)) return;
+			if (!Ue.current.has(t.id)) return;
 			if (n.sources) for (let [r, i] of Object.entries(n.sources)) {
 				let n = `base-layer-source-${t.id}-${r}`;
 				e.getSource(n) || e.addSource(n, i);
 			}
-			let r = pn(e);
+			let r = mn(e);
 			if (n.layers) for (let i of n.layers) {
 				let n = `base-layer-${t.id}-${i.id}`;
 				if (e.getLayer(n)) continue;
@@ -6991,7 +6993,7 @@ const Mapbox = forwardRef((e, c) => {
 				};
 				i.type === "raster" && (a.paint = {
 					...a.paint,
-					...mn(t)
+					...hn(t)
 				}), t.visible === !1 && (a.layout = {
 					...a.layout,
 					visibility: "none"
@@ -7004,50 +7006,50 @@ const Mapbox = forwardRef((e, c) => {
 		} catch (e) {
 			console.error(`Failed to load Style JSON from ${t.url}:`, e);
 		}
-	}, [pn, mn]), vn = useCallback((e, t) => {
+	}, [mn, hn]), yn = useCallback((e, t) => {
 		let n = e.getStyle();
 		if (!n) return;
 		let r = `base-layer-${t}`, i = n.layers?.filter((e) => e.id.startsWith(r)) ?? [];
 		for (let t of i) e.getLayer(t.id) && e.removeLayer(t.id);
 		let a = `base-layer-source-${t}`, o = n.sources ?? {};
 		for (let t of Object.keys(o)) t.startsWith(a) && e.getSource(t) && e.removeSource(t);
-	}, []), yn = useCallback((e) => {
-		let t = F.current;
+	}, []), bn = useCallback((e) => {
+		let t = R.current;
 		if (!t) return;
-		let n = new Set(e.map((e) => e.id)), r = Ge.current;
-		for (let e of r) n.has(e) || (vn(t, e), r.delete(e));
+		let n = new Set(e.map((e) => e.id)), r = Ue.current;
+		for (let e of r) n.has(e) || (yn(t, e), r.delete(e));
 		for (let n of e) if (r.has(n.id)) {
 			let e = `base-layer-${n.id}`;
 			if (t.getLayer(e)) {
-				let r = mn(n);
+				let r = hn(n);
 				for (let [n, i] of Object.entries(r)) t.setPaintProperty(e, n, i);
 				t.setLayoutProperty(e, "visibility", n.visible === !1 ? "none" : "visible");
 			}
 		} else switch (r.add(n.id), n.type) {
 			case "raster":
-				hn(t, n);
+				gn(t, n);
 				break;
 			case "tilejson":
-				gn(t, n);
+				_n(t, n);
 				break;
 			case "style":
-				_n(t, n);
+				vn(t, n);
 				break;
 			default: {
 				let e = n;
-				e.url && hn(t, {
+				e.url && gn(t, {
 					...e,
 					type: "raster"
 				});
 			}
 		}
 	}, [
-		hn,
 		gn,
 		_n,
 		vn,
-		mn
-	]), bn = useCallback((e) => {
+		yn,
+		hn
+	]), xn = useCallback((e) => {
 		let t = e;
 		for (; t;) {
 			let e = t.getAttribute?.("data-entity-id");
@@ -7055,143 +7057,143 @@ const Mapbox = forwardRef((e, c) => {
 			t = t.parentElement;
 		}
 		return null;
-	}, []), xn = useCallback((e) => {
+	}, []), Sn = useCallback((e) => {
 		let t = [e.lngLat.lng, e.lngLat.lat], n = {
 			x: e.point.x,
 			y: e.point.y
-		}, r = kn.current;
+		}, r = An.current;
 		if (r === "picker") {
 			let e = {
 				lng: t[0],
 				lat: t[1]
 			};
-			it(e), At(t), An.current?.(e);
+			nt(e), jt(t), jn.current?.(e);
 			return;
 		}
-		if (gt.current) return;
+		if (_t.current) return;
 		if (r === "edit") {
-			let e = Mn.current;
+			let e = Nn.current;
 			if (e === "rectangle") {
-				let e = Nn.current;
-				if (!e) lt(t);
+				let e = Pn.current;
+				if (!e) st(t);
 				else {
-					let n = U.current, r = applyEntityConfig({
+					let n = ct.current, r = applyEntityConfig({
 						...n,
-						id: n?.id ?? Mt(),
+						id: n?.id ?? Nt(),
 						type: "rectangle",
 						bounds: [e, t]
-					}, E);
-					Lt();
-					let i = F.current;
-					if (i && !I.current.has(r.id)) {
-						let e = new RectangleRenderer(i, r, D, O, k, j);
-						I.current.set(r.id, e);
+					}, D);
+					Rt();
+					let i = R.current;
+					if (i && !z.current.has(r.id)) {
+						let e = new RectangleRenderer(i, r, O, k, M, P);
+						z.current.set(r.id, e);
 					}
-					Q.current.onRectangleAdd?.(r), lt(null), U.current = null, H.current && (H.current = !1, V(null), i && (i.getCanvas().style.cursor = ""));
+					Q.current.onRectangleAdd?.(r), st(null), ct.current = null, G.current && (G.current = !1, W(null), i && (i.getCanvas().style.cursor = ""));
 				}
 				return;
 			}
 			if (e === "circle") {
-				let e = dt.current;
-				if (!e) dt.current = { center: t };
+				let e = ut.current;
+				if (!e) ut.current = { center: t };
 				else {
-					let n = Bt(e.center, t), r = W.current, i = applyEntityConfig({
+					let n = Vt(e.center, t), r = K.current, i = applyEntityConfig({
 						...r,
-						id: r?.id ?? Mt(),
+						id: r?.id ?? Nt(),
 						type: "circle",
 						center: e.center,
 						radius: n
-					}, E);
-					Ht();
-					let a = F.current;
-					if (a && !I.current.has(i.id)) {
-						let e = new CircleRenderer(a, i, D, O, k, A);
-						I.current.set(i.id, e);
+					}, D);
+					Ut();
+					let a = R.current;
+					if (a && !z.current.has(i.id)) {
+						let e = new CircleRenderer(a, i, O, k, M, N);
+						z.current.set(i.id, e);
 					}
-					Q.current.onCircleAdd?.(i), dt.current = null, W.current = null, H.current && (H.current = !1, V(null), a && (a.getCanvas().style.cursor = ""));
+					Q.current.onCircleAdd?.(i), ut.current = null, K.current = null, G.current && (G.current = !1, W(null), a && (a.getCanvas().style.cursor = ""));
 				}
 				return;
 			}
 			if (e === "polygon") {
-				let e = ft.current;
+				let e = dt.current;
 				if (e.length >= 3) {
 					let n = e[0];
-					if (Bt(n, t) < 20) {
-						let t = G.current, n = applyEntityConfig({
+					if (Vt(n, t) < 20) {
+						let t = q.current, n = applyEntityConfig({
 							...t,
-							id: t?.id ?? Mt(),
+							id: t?.id ?? Nt(),
 							type: "polygon",
 							coordinates: [...e]
-						}, E);
-						Kt();
-						let r = F.current;
-						if (r && !I.current.has(n.id)) {
-							let e = new PolygonRenderer(r, n, D, O, k, j);
-							I.current.set(n.id, e);
+						}, D);
+						qt();
+						let r = R.current;
+						if (r && !z.current.has(n.id)) {
+							let e = new PolygonRenderer(r, n, O, k, M, P);
+							z.current.set(n.id, e);
 						}
-						Q.current.onPolygonAdd?.(n), ft.current = [], G.current = null, H.current && (H.current = !1, V(null), r && (r.getCanvas().style.cursor = ""));
+						Q.current.onPolygonAdd?.(n), dt.current = [], q.current = null, G.current && (G.current = !1, W(null), r && (r.getCanvas().style.cursor = ""));
 						return;
 					}
 				}
-				ft.current = [...e, t];
+				dt.current = [...e, t];
 				return;
 			}
 			if (e === "square") {
 				let e = pt.current;
 				if (!e) pt.current = { center: t };
 				else {
-					let n = Bt(e.center, t) * 2, r = K.current, i = applyEntityConfig({
+					let n = Vt(e.center, t) * 2, r = ft.current, i = applyEntityConfig({
 						...r,
-						id: r?.id ?? Mt(),
+						id: r?.id ?? Nt(),
 						type: "square",
 						center: e.center,
 						length: n
-					}, E);
-					Zt();
-					let a = F.current;
-					if (a && !I.current.has(i.id)) {
-						let e = new SquareRenderer(a, i, D, O, k, j);
-						I.current.set(i.id, e);
+					}, D);
+					Qt();
+					let a = R.current;
+					if (a && !z.current.has(i.id)) {
+						let e = new SquareRenderer(a, i, O, k, M, P);
+						z.current.set(i.id, e);
 					}
-					Q.current.onSquareAdd?.(i), pt.current = null, K.current = null, H.current && (H.current = !1, V(null), a && (a.getCanvas().style.cursor = ""));
+					Q.current.onSquareAdd?.(i), pt.current = null, ft.current = null, G.current && (G.current = !1, W(null), a && (a.getCanvas().style.cursor = ""));
 				}
 				return;
 			}
 			if (e === "polyline") {
-				mt.current = [...mt.current, t];
+				ht.current = [...ht.current, t];
 				return;
 			}
-			let n = ut.current;
+			let n = lt.current;
 			if (n && n.src && n.width) {
 				let e = {
 					...n,
-					id: n.id ?? Mt(),
+					id: n.id ?? Nt(),
 					type: "marker",
 					center: t,
 					src: n.src,
 					width: n.width
 				};
-				Q.current.onMarkerAdd?.(e), B(null), V(null), Y(), ut.current = null, H.current = !1;
+				Q.current.onMarkerAdd?.(e), U(null), W(null), Y(), lt.current = null, G.current = !1;
 				return;
 			}
-			let r = jn.current;
+			let r = Mn.current;
 			if (r) {
 				let e = {
-					id: Mt(),
+					id: Nt(),
 					type: "marker",
 					name: r.name,
 					center: t,
 					src: r.icon,
 					width: r.size || r.width || 32
 				};
-				r.customData !== void 0 && (e.customData = r.customData), Q.current.onMarkerAdd?.(e), B(null), V(null), Y(), H.current = !1;
+				r.customData !== void 0 && (e.customData = r.customData), Q.current.onMarkerAdd?.(e), U(null), W(null), Y(), G.current = !1;
 				return;
 			}
 		}
-		if (yt.current.length > 0) {
-			let e = F.current?.getZoom() ?? 12;
+		if (bt.current.length > 0) {
+			let e = R.current?.getZoom() ?? 12;
 			if (J.current) {
-				let { entityId: e, activeHandle: n } = J.current, r = I.current.get(e);
+				let { entityId: e, activeHandle: n } = J.current, r = z.current.get(e);
 				if (r?.applyHandleMove) {
 					let e = r.applyHandleMove(n, t);
 					Q.current.onEntityEdit?.(e);
@@ -7199,8 +7201,8 @@ const Mapbox = forwardRef((e, c) => {
 				J.current = null;
 				return;
 			}
-			for (let n of yt.current) {
-				let r = I.current.get(n);
+			for (let n of bt.current) {
+				let r = z.current.get(n);
 				if (!r?.getEditHandleAt) continue;
 				let i = r.getEditHandleAt(t, e);
 				if (i) {
@@ -7222,100 +7224,100 @@ const Mapbox = forwardRef((e, c) => {
 				}
 			}
 		}
-		let i = En.current, a = Dn.current, o = On.current, s = bn(e.originalEvent.target);
+		let i = Dn.current, a = On.current, o = kn.current, s = xn(e.originalEvent.target);
 		if (s) {
 			let e = i.find((e) => String(e.id) === s);
 			if (e) {
 				if (a?.(e), e.popup) {
-					let t = e.popup.content ?? Ie?.(e);
-					t && mergePopupConfig(e.popup, P, t).trigger === "click" && o(s, "click", n);
+					let t = e.popup.content ?? Ne?.(e);
+					t && mergePopupConfig(e.popup, L, t).trigger === "click" && o(s, "click", n);
 				}
 				return;
 			}
 		}
-		for (let [t, r] of I.current) {
+		for (let [t, r] of z.current) {
 			let s = r.getLabelLayerId();
-			if (s && F.current?.getLayer(s) && F.current.queryRenderedFeatures(e.point, { layers: [s] }).length > 0) {
+			if (s && R.current?.getLayer(s) && R.current.queryRenderedFeatures(e.point, { layers: [s] }).length > 0) {
 				let e = i.find((e) => e.id === t);
 				if (e) {
 					if (a?.(e), e.popup) {
-						let r = e.popup.content ?? Ie?.(e);
-						r && mergePopupConfig(e.popup, P, r).trigger === "click" && o(t, "click", n);
+						let r = e.popup.content ?? Ne?.(e);
+						r && mergePopupConfig(e.popup, L, r).trigger === "click" && o(t, "click", n);
 					}
 					return;
 				}
 			}
 		}
-		for (let [e, r] of I.current) if (r.isPointInEntity(t)) {
+		for (let [e, r] of z.current) if (r.isPointInEntity(t)) {
 			let t = i.find((t) => t.id === e);
 			if (t) {
 				if (a?.(t), t.popup) {
-					let r = t.popup.content ?? Ie?.(t);
-					r && mergePopupConfig(t.popup, P, r).trigger === "click" && o(e, "click", n);
+					let r = t.popup.content ?? Ne?.(t);
+					r && mergePopupConfig(t.popup, L, r).trigger === "click" && o(e, "click", n);
 				}
 				return;
 			}
 		}
 	}, [
-		P,
-		Ie,
-		bn
-	]), Sn = useCallback((e) => {
+		L,
+		Ne,
+		xn
+	]), Cn = useCallback((e) => {
 		let t = [e.lngLat.lng, e.lngLat.lat];
 		if (J.current) {
 			let { entityId: e, activeHandle: n } = J.current;
-			I.current.get(e)?.updateEditPreview?.(n, t);
+			z.current.get(e)?.updateEditPreview?.(n, t);
 			return;
 		}
-		let n = Mn.current, r = Nn.current;
-		n === "rectangle" && r && It(r, t);
-		let i = dt.current;
-		n === "circle" && i && Vt(i.center, t);
-		let a = ft.current;
-		n === "polygon" && a.length > 0 && Gt(a, t);
+		let n = Nn.current, r = Pn.current;
+		n === "rectangle" && r && Lt(r, t);
+		let i = ut.current;
+		n === "circle" && i && Ht(i.center, t);
+		let a = dt.current;
+		n === "polygon" && a.length > 0 && Kt(a, t);
 		let o = pt.current;
-		n === "square" && o && Xt(o.center, t);
-		let s = mt.current;
-		n === "polyline" && s.length > 0 && en(s, t);
-		let c = En.current, l = On.current;
-		for (let [e, n] of I.current) if (n.isPointInEntity(t)) {
+		n === "square" && o && Zt(o.center, t);
+		let s = ht.current;
+		n === "polyline" && s.length > 0 && tn(s, t);
+		let c = Dn.current, l = kn.current;
+		for (let [e, n] of z.current) if (n.isPointInEntity(t)) {
 			let t = c.find((t) => t.id === e);
 			if (!t?.popup) continue;
-			let n = t.popup.content ?? Ie?.(t);
+			let n = t.popup.content ?? Ne?.(t);
 			if (!n) continue;
-			let r = mergePopupConfig(t.popup, P, n);
+			let r = mergePopupConfig(t.popup, L, n);
 			if (r.trigger === "hover") {
-				Ye.current && clearTimeout(Ye.current), Ye.current = window.setTimeout(() => {
+				qe.current && clearTimeout(qe.current), qe.current = window.setTimeout(() => {
 					l(e, "hover");
 				}, r.hoverDelay);
 				return;
 			}
 		}
-		if (Ye.current &&= (clearTimeout(Ye.current), null), R?.openedBy === "hover") {
-			let e = I.current.get(R.entityId);
-			e && !e.isPointInEntity(t) && Tt(R.entityId);
+		if (qe.current &&= (clearTimeout(qe.current), null), V?.openedBy === "hover") {
+			let e = z.current.get(V.entityId);
+			e && !e.isPointInEntity(t) && Et(V.entityId);
 		}
 	}, [
-		P,
-		Ie,
-		R,
-		Tt,
-		It,
-		Vt,
-		Gt,
-		Xt,
-		en
-	]), Cn = useCallback((e) => {
-		if (e.preventDefault(), gt.current) return;
-		if (yt.current.length > 0) {
+		L,
+		Ne,
+		V,
+		Et,
+		Lt,
+		Ht,
+		Kt,
+		Zt,
+		tn
+	]), wn = useCallback((e) => {
+		if (e.preventDefault(), _t.current) return;
+		if (bt.current.length > 0) {
 			let t = [e.lngLat.lng, e.lngLat.lat];
 			if (J.current) {
-				I.current.get(J.current.entityId)?.cancelEditPreview?.(), J.current = null;
+				z.current.get(J.current.entityId)?.cancelEditPreview?.(), J.current = null;
 				return;
 			}
-			let n = F.current?.getZoom() ?? 12;
-			for (let e of yt.current) {
-				let r = I.current.get(e);
+			let n = R.current?.getZoom() ?? 12;
+			for (let e of bt.current) {
+				let r = z.current.get(e);
 				if (!r?.getEditHandleAt || !r.deleteVertex) continue;
 				let i = r.getEditHandleAt(t, n);
 				if (i && i.type === "vertex") {
@@ -7325,83 +7327,83 @@ const Mapbox = forwardRef((e, c) => {
 				}
 			}
 		}
-		if (kn.current !== "edit") return;
-		if (jn.current) {
-			B(null), V(null), Y();
+		if (An.current !== "edit") return;
+		if (Mn.current) {
+			U(null), W(null), Y();
 			return;
 		}
-		let t = Mn.current;
+		let t = Nn.current;
 		if (t === "rectangle") {
-			if (Nn.current) lt(null), Lt();
+			if (Pn.current) st(null), Rt();
 			else {
-				V(null);
-				let e = F.current;
+				W(null);
+				let e = R.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
 			return;
 		}
 		if (t === "circle") {
-			if (dt.current) dt.current = null, Ht();
+			if (ut.current) ut.current = null, Ut();
 			else {
-				V(null);
-				let e = F.current;
+				W(null);
+				let e = R.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
 			return;
 		}
 		if (t === "polygon") {
-			let e = ft.current;
+			let e = dt.current;
 			if (e.length >= 3) {
-				let t = G.current, n = applyEntityConfig({
+				let t = q.current, n = applyEntityConfig({
 					...t,
-					id: t?.id ?? Mt(),
+					id: t?.id ?? Nt(),
 					type: "polygon",
 					coordinates: [...e]
-				}, E);
-				Kt();
-				let r = F.current;
-				if (r && !I.current.has(n.id)) {
-					let e = new PolygonRenderer(r, n, D, O, k, j);
-					I.current.set(n.id, e);
+				}, D);
+				qt();
+				let r = R.current;
+				if (r && !z.current.has(n.id)) {
+					let e = new PolygonRenderer(r, n, O, k, M, P);
+					z.current.set(n.id, e);
 				}
-				Q.current.onPolygonAdd?.(n), ft.current = [], G.current = null, H.current && (H.current = !1, V(null), r && (r.getCanvas().style.cursor = ""));
-			} else if (e.length > 0) ft.current = [], Kt();
+				Q.current.onPolygonAdd?.(n), dt.current = [], q.current = null, G.current && (G.current = !1, W(null), r && (r.getCanvas().style.cursor = ""));
+			} else if (e.length > 0) dt.current = [], qt();
 			else {
-				V(null);
-				let e = F.current;
+				W(null);
+				let e = R.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
 			return;
 		}
 		if (t === "square") {
-			if (pt.current) pt.current = null, Zt();
+			if (pt.current) pt.current = null, Qt();
 			else {
-				V(null);
-				let e = F.current;
+				W(null);
+				let e = R.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
 			return;
 		}
 		if (t === "polyline") {
-			let e = mt.current;
+			let e = ht.current;
 			if (e.length >= 2) {
-				let t = q.current, n = applyEntityConfig({
+				let t = mt.current, n = applyEntityConfig({
 					...t,
-					id: t?.id ?? Mt(),
+					id: t?.id ?? Nt(),
 					type: "polyline",
 					coordinates: [...e]
-				}, E);
-				tn();
-				let r = F.current;
-				if (r && !I.current.has(n.id)) {
-					let e = new PolylineRenderer(r, n, D, O, j);
-					I.current.set(n.id, e);
+				}, D);
+				nn();
+				let r = R.current;
+				if (r && !z.current.has(n.id)) {
+					let e = new PolylineRenderer(r, n, O, k, P);
+					z.current.set(n.id, e);
 				}
-				Q.current.onPolylineAdd?.(n), mt.current = [], q.current = null, H.current && (H.current = !1, V(null), r && (r.getCanvas().style.cursor = ""));
-			} else if (e.length > 0) mt.current = [], tn();
+				Q.current.onPolylineAdd?.(n), ht.current = [], mt.current = null, G.current && (G.current = !1, W(null), r && (r.getCanvas().style.cursor = ""));
+			} else if (e.length > 0) ht.current = [], nn();
 			else {
-				V(null);
-				let e = F.current;
+				W(null);
+				let e = R.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
 			return;
@@ -7409,45 +7411,45 @@ const Mapbox = forwardRef((e, c) => {
 		let n = [e.lngLat.lng, e.lngLat.lat], r = {
 			x: e.point.x,
 			y: e.point.y
-		}, i = En.current, a = bn(e.originalEvent.target);
+		}, i = Dn.current, a = xn(e.originalEvent.target);
 		if (a) {
 			let e = i.find((e) => String(e.id) === a);
 			if (e) {
-				wn(e, r, n);
+				Tn(e, r, n);
 				return;
 			}
 		}
-		for (let [t, a] of I.current) {
+		for (let [t, a] of z.current) {
 			let o = a.getLabelLayerId();
-			if (o && F.current?.getLayer(o) && F.current.queryRenderedFeatures(e.point, { layers: [o] }).length > 0) {
+			if (o && R.current?.getLayer(o) && R.current.queryRenderedFeatures(e.point, { layers: [o] }).length > 0) {
 				let e = i.find((e) => e.id === t);
 				if (e) {
-					wn(e, r, n);
+					Tn(e, r, n);
 					return;
 				}
 			}
 		}
-		for (let [e, t] of I.current) if (t.isPointInEntity(n)) {
+		for (let [e, t] of z.current) if (t.isPointInEntity(n)) {
 			let t = i.find((t) => t.id === e);
 			if (t) {
-				wn(t, r, n);
+				Tn(t, r, n);
 				return;
 			}
 		}
 	}, [
-		bn,
+		xn,
 		Y,
-		Lt,
-		Ht,
-		Kt,
-		Zt,
-		tn
-	]), wn = useCallback((e, t, n) => {
-		let r = Ue.current?.getBoundingClientRect(), i = r ? {
+		Rt,
+		Ut,
+		qt,
+		Qt,
+		nn
+	]), Tn = useCallback((e, t, n) => {
+		let r = Be.current?.getBoundingClientRect(), i = r ? {
 			x: t.x + r.left,
 			y: t.y + r.top
 		} : t;
-		Ze({
+		Ye({
 			position: i,
 			lngLat: n,
 			items: [{
@@ -7467,8 +7469,8 @@ const Mapbox = forwardRef((e, c) => {
 				}
 			}]
 		});
-	}, []), Tn = useCallback(() => {
-		Ze(null);
+	}, []), En = useCallback(() => {
+		Ye(null);
 	}, []);
 	useEffect(() => {
 		let e = document.createElement("div");
@@ -7479,11 +7481,11 @@ const Mapbox = forwardRef((e, c) => {
 			width: 100%;
 			pointer-events: none;
 			height: 100%;
-			z-index: ${P?.zIndex ?? 1e3};
-		`, document.body.appendChild(e), qe.current = e, () => {
+			z-index: ${L?.zIndex ?? 1e3};
+		`, document.body.appendChild(e), Ge.current = e, () => {
 			document.body.contains(e) && document.body.removeChild(e);
 		};
-	}, [P?.zIndex]), useEffect(() => {
+	}, [L?.zIndex]), useEffect(() => {
 		let e = document.createElement("div");
 		return e.id = `mapbox-context-menu-container-${Date.now()}`, e.style.cssText = `
 			position: fixed;
@@ -7492,65 +7494,65 @@ const Mapbox = forwardRef((e, c) => {
 			width: 100%;
 			pointer-events: none;
 			height: 100%;
-			z-index: ${(P?.zIndex ?? 1e3) + 100};
-		`, document.body.appendChild(e), Qe.current = e, () => {
+			z-index: ${(L?.zIndex ?? 1e3) + 100};
+		`, document.body.appendChild(e), Xe.current = e, () => {
 			document.body.contains(e) && document.body.removeChild(e);
 		};
-	}, [P?.zIndex]);
-	let En = useRef(w);
-	En.current = w;
-	let Dn = useRef(Re);
-	Dn.current = Re;
-	let On = useRef(wt);
-	On.current = wt;
-	let kn = useRef(tt);
-	kn.current = tt;
-	let An = useRef(y);
-	An.current = y;
-	let jn = useRef(ot);
-	jn.current = ot;
-	let Mn = useRef(st);
-	Mn.current = st;
-	let Nn = useRef(ct);
-	Nn.current = ct;
-	let Q = useRef(_);
-	Q.current = _;
-	let Pn = useRef(E);
-	Pn.current = E, useEffect(() => {
+	}, [L?.zIndex]);
+	let Dn = useRef(T);
+	Dn.current = T;
+	let On = useRef(Fe);
+	On.current = Fe;
+	let kn = useRef(Tt);
+	kn.current = Tt;
+	let An = useRef($e);
+	An.current = $e;
+	let jn = useRef(b);
+	jn.current = b;
+	let Mn = useRef(it);
+	Mn.current = it;
+	let Nn = useRef(at);
+	Nn.current = at;
+	let Pn = useRef(ot);
+	Pn.current = ot;
+	let Q = useRef(v);
+	Q.current = v;
+	let Fn = useRef(D);
+	Fn.current = D, useEffect(() => {
 		let e = (e) => {
 			if (e.key === "Escape" && J.current) {
-				I.current.get(J.current.entityId)?.cancelEditPreview?.(), J.current = null;
+				z.current.get(J.current.entityId)?.cancelEditPreview?.(), J.current = null;
 				return;
 			}
-			if (e.key === "Escape" && tt === "edit") {
-				if (ot && (B(null), V(null), Y()), st === "rectangle") if (ct) lt(null), Lt();
+			if (e.key === "Escape" && $e === "edit") {
+				if (it && (U(null), W(null), Y()), at === "rectangle") if (ot) st(null), Rt();
 				else {
-					V(null);
-					let e = F.current;
+					W(null);
+					let e = R.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (st === "circle") if (dt.current) dt.current = null, Ht();
+				if (at === "circle") if (ut.current) ut.current = null, Ut();
 				else {
-					V(null);
-					let e = F.current;
+					W(null);
+					let e = R.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (st === "polygon") if (ft.current.length > 0) ft.current = [], Kt();
+				if (at === "polygon") if (dt.current.length > 0) dt.current = [], qt();
 				else {
-					V(null);
-					let e = F.current;
+					W(null);
+					let e = R.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (st === "square") if (pt.current) pt.current = null, Zt();
+				if (at === "square") if (pt.current) pt.current = null, Qt();
 				else {
-					V(null);
-					let e = F.current;
+					W(null);
+					let e = R.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (st === "polyline") if (mt.current.length > 0) mt.current = [], tn();
+				if (at === "polyline") if (ht.current.length > 0) ht.current = [], nn();
 				else {
-					V(null);
-					let e = F.current;
+					W(null);
+					let e = R.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
 			}
@@ -7559,62 +7561,62 @@ const Mapbox = forwardRef((e, c) => {
 			document.removeEventListener("keydown", e);
 		};
 	}, [
-		tt,
+		$e,
+		it,
+		at,
 		ot,
-		st,
-		ct,
 		Y,
-		Lt,
-		Ht,
-		Kt,
-		Zt,
-		tn
+		Rt,
+		Ut,
+		qt,
+		Qt,
+		nn
 	]), useEffect(() => {
-		let e = F.current;
-		if (!e || !R) return;
-		let t = R.entityId, n = R.config, r = () => {
-			let r = En.current.find((e) => e.id === t);
+		let e = R.current;
+		if (!e || !V) return;
+		let t = V.entityId, n = V.config, r = () => {
+			let r = Dn.current.find((e) => e.id === t);
 			if (!r) {
-				Et();
+				Dt();
 				return;
 			}
-			let { position: i } = calculatePopupPosition(r, n, e, void 0, Je.current);
-			Je.current && (Je.current.style.left = `${i.x}px`, Je.current.style.top = `${i.y}px`);
+			let { position: i } = calculatePopupPosition(r, n, e, void 0, Ke.current);
+			Ke.current && (Ke.current.style.left = `${i.x}px`, Ke.current.style.top = `${i.y}px`);
 		}, i = setTimeout(() => {
 			r();
 		}, 50);
 		return e.on("move", r), e.on("zoom", r), e.on("rotate", r), e.on("pitch", r), () => {
 			clearTimeout(i), e.off("move", r), e.off("zoom", r), e.off("rotate", r), e.off("pitch", r);
 		};
-	}, [R?.entityId, Et]), useEffect(() => {
-		let e = F.current, t = Ue.current;
-		if (!e || !Xe || !t) return;
-		let n = Xe.lngLat, r = () => {
+	}, [V?.entityId, Dt]), useEffect(() => {
+		let e = R.current, t = Be.current;
+		if (!e || !Je || !t) return;
+		let n = Je.lngLat, r = () => {
 			let r = e.project(n), i = t.clientWidth, a = t.clientHeight;
 			if (r.x < 0 || r.x > i || r.y < 0 || r.y > a) {
-				Tn();
+				En();
 				return;
 			}
 			let o = t.getBoundingClientRect(), s = r.x + o.left, c = r.y + o.top;
-			$e.current && ($e.current.style.left = `${s}px`, $e.current.style.top = `${c}px`);
+			Ze.current && (Ze.current.style.left = `${s}px`, Ze.current.style.top = `${c}px`);
 		};
 		return e.on("move", r), e.on("zoom", r), e.on("rotate", r), e.on("pitch", r), () => {
 			e.off("move", r), e.off("zoom", r), e.off("rotate", r), e.off("pitch", r);
 		};
-	}, [Xe?.lngLat, Tn]), useEffect(() => {
-		if (!Ue.current) return;
+	}, [Je?.lngLat, En]), useEffect(() => {
+		if (!Be.current) return;
 		let e = {
 			version: 8,
 			sources: {},
 			layers: []
-		}, { dragPan: t = !0, scrollZoom: n = !0, doubleClickZoom: r = !0, touchZoomRotate: i = !0, keyboard: a = !0, dragRotate: o = !0, pitchWithRotate: c = !0, touchPitch: m = !0, boxZoom: ve = !0 } = b, g = new mapboxgl.Map({
-			container: Ue.current,
+		}, { dragPan: t = !0, scrollZoom: n = !0, doubleClickZoom: r = !0, touchZoomRotate: i = !0, keyboard: a = !0, dragRotate: o = !0, pitchWithRotate: c = !0, touchPitch: m = !0, boxZoom: h = !0 } = x, _ = new mapboxgl.Map({
+			container: Be.current,
 			style: p || e,
 			center: l,
 			zoom: u,
 			pitch: d,
 			bearing: f,
-			maxBounds: h,
+			maxBounds: g,
 			dragPan: t,
 			scrollZoom: n,
 			doubleClickZoom: r,
@@ -7623,7 +7625,7 @@ const Mapbox = forwardRef((e, c) => {
 			dragRotate: o,
 			pitchWithRotate: c,
 			touchPitch: m,
-			boxZoom: ve,
+			boxZoom: h,
 			transformRequest: (e, t) => {
 				if (t === "Glyphs") {
 					let t = e.match(/\/fonts\/([^/]+)\/(\d+-\d+)\.pbf/);
@@ -7635,98 +7637,98 @@ const Mapbox = forwardRef((e, c) => {
 				return { url: e };
 			}
 		});
-		return F.current = g, g.on("load", () => {
-			if (!g.getStyle().glyphs) {
-				let e = g.style, t = "/gis-fonts/{fontstack}/{range}.pbf";
+		return R.current = _, _.on("load", () => {
+			if (!_.getStyle().glyphs) {
+				let e = _.style, t = "/gis-fonts/{fontstack}/{range}.pbf";
 				e.glyphs = t, e.stylesheet && (e.stylesheet.glyphs = t);
 			}
-			L.current.clear(), w.forEach((e) => {
-				L.current.set(e.id, e);
-			}), yn(x), dn(), Ft(), Rt(), Wt(), Jt(), $t(), et(g), Le?.(g);
-		}), g.on("click", xn), g.on("mousemove", Sn), g.on("contextmenu", Cn), () => {
-			g.off("click", xn), g.off("mousemove", Sn), g.off("contextmenu", Cn), fn(), jt(), Y(), X(), Z(), g.remove(), F.current = null;
+			B.current.clear(), T.forEach((e) => {
+				B.current.set(e.id, e);
+			}), bn(S), fn(), It(), zt(), Gt(), Yt(), en(), Qe(_), Pe?.(_);
+		}), _.on("click", Sn), _.on("mousemove", Cn), _.on("contextmenu", wn), () => {
+			_.off("click", Sn), _.off("mousemove", Cn), _.off("contextmenu", wn), pn(), Mt(), Y(), X(), Z(), _.remove(), R.current = null;
 		};
 	}, []), useEffect(() => {
-		if (F.current) {
-			if (!F.current.isStyleLoaded()) {
-				F.current.once("load", () => {
-					L.current.clear(), w.forEach((e) => {
-						L.current.set(e.id, e);
-					}), dn();
+		if (R.current) {
+			if (!R.current.isStyleLoaded()) {
+				R.current.once("load", () => {
+					B.current.clear(), T.forEach((e) => {
+						B.current.set(e.id, e);
+					}), fn();
 				});
 				return;
 			}
-			L.current.clear(), w.forEach((e) => {
-				L.current.set(e.id, e);
-			}), dn();
+			B.current.clear(), T.forEach((e) => {
+				B.current.set(e.id, e);
+			}), fn();
 		}
-	}, [w, dn]), useEffect(() => {
-		!F.current || !F.current.isStyleLoaded() || (fn(), dn());
+	}, [T, fn]), useEffect(() => {
+		!R.current || !R.current.isStyleLoaded() || (pn(), fn());
 	}, [
-		D,
 		O,
 		k,
-		A,
-		j,
-		fn,
-		dn
+		M,
+		N,
+		P,
+		pn,
+		fn
 	]), useEffect(() => {
-		if (F.current) {
-			if (!F.current.isStyleLoaded()) {
-				F.current.once("load", () => {
-					yn(x);
+		if (R.current) {
+			if (!R.current.isStyleLoaded()) {
+				R.current.once("load", () => {
+					bn(S);
 				});
 				return;
 			}
-			yn(x);
-		}
-	}, [x, yn]);
-	let Fn = useRef(void 0), In = useRef(!0), Ln = useRef(x);
-	Ln.current = x;
-	let Rn = useRef(yn);
-	Rn.current = yn;
-	let zn = useRef(fn);
-	zn.current = fn;
-	let Bn = useRef(dn);
-	Bn.current = dn;
-	let Vn = useRef(Ft);
-	Vn.current = Ft;
-	let Hn = useRef(Rt);
-	Hn.current = Rt;
-	let Un = useRef(Wt);
-	Un.current = Wt;
-	let Wn = useRef(Jt);
-	Wn.current = Jt;
-	let Gn = useRef($t);
-	Gn.current = $t, useEffect(() => {
-		let e = F.current;
+			bn(S);
+		}
+	}, [S, bn]);
+	let In = useRef(void 0), Ln = useRef(!0), Rn = useRef(S);
+	Rn.current = S;
+	let zn = useRef(bn);
+	zn.current = bn;
+	let Bn = useRef(pn);
+	Bn.current = pn;
+	let Vn = useRef(fn);
+	Vn.current = fn;
+	let Hn = useRef(It);
+	Hn.current = It;
+	let Un = useRef(zt);
+	Un.current = zt;
+	let Wn = useRef(Gt);
+	Wn.current = Gt;
+	let Gn = useRef(Yt);
+	Gn.current = Yt;
+	let Kn = useRef(en);
+	Kn.current = en, useEffect(() => {
+		let e = R.current;
 		if (!e) return;
 		let t = p || {
 			version: 8,
 			sources: {},
 			layers: []
 		};
-		if (In.current) {
-			In.current = !1, Fn.current = p;
+		if (Ln.current) {
+			Ln.current = !1, In.current = p;
 			return;
 		}
-		Fn.current !== p && (Fn.current = p, e.setStyle(t), e.once("style.load", () => {
+		In.current !== p && (In.current = p, e.setStyle(t), e.once("style.load", () => {
 			if (!e.getStyle().glyphs) {
 				let t = e.style, n = "/gis-fonts/{fontstack}/{range}.pbf";
 				t.glyphs = n, t.stylesheet && (t.stylesheet.glyphs = n);
 			}
-			Ge.current.clear(), Rn.current(Ln.current), zn.current(), Bn.current(), Vn.current(), Hn.current(), Un.current(), Wn.current(), Gn.current();
+			Ue.current.clear(), zn.current(Rn.current), Bn.current(), Vn.current(), Hn.current(), Un.current(), Wn.current(), Gn.current(), Kn.current();
 		}));
 	}, [p]), useEffect(() => {
-		let e = new Set(T.map(String));
-		for (let [t, n] of I.current) n.setSelected(e.has(String(t)));
-	}, [T]);
-	let Kn = useRef({});
+		let e = new Set(E.map(String));
+		for (let [t, n] of z.current) n.setSelected(e.has(String(t)));
+	}, [E]);
+	let qn = useRef({});
 	useEffect(() => {
-		let e = F.current;
+		let e = R.current;
 		if (!e) return;
-		let t = Kn.current, n = l && (t.center?.[0] !== l[0] || t.center?.[1] !== l[1]), r = t.zoom !== u, i = t.pitch !== d, a = t.bearing !== f;
-		!n && !r && !i && !a || (Kn.current = {
+		let t = qn.current, n = l && (t.center?.[0] !== l[0] || t.center?.[1] !== l[1]), r = t.zoom !== u, i = t.pitch !== d, a = t.bearing !== f;
+		!n && !r && !i && !a || (qn.current = {
 			center: l,
 			zoom: u,
 			pitch: d,
@@ -7743,13 +7745,13 @@ const Mapbox = forwardRef((e, c) => {
 		d,
 		f
 	]);
-	let qn = (() => Te === !1 ? null : Te === !0 ? { enabled: !0 } : Te)(), Jn = (() => M === !1 ? null : M === !0 ? { enabled: !0 } : M)(), Yn = (() => Ee === !1 ? null : Ee === !0 ? { enabled: !0 } : Ee)(), $ = (() => {
-		if (De === !1) return null;
+	let Jn = (() => Se === !1 ? null : Se === !0 ? { enabled: !0 } : Se)(), Yn = (() => F === !1 ? null : F === !0 ? { enabled: !0 } : F)(), Xn = (() => Ce === !1 ? null : Ce === !0 ? { enabled: !0 } : Ce)(), $ = (() => {
+		if (we === !1) return null;
 		let e, t, n;
-		if (x && x.length > 0) {
-			let r = x.find((e) => e.hasRoadNetwork === !0) || x[0];
+		if (S && S.length > 0) {
+			let r = S.find((e) => e.hasRoadNetwork === !0) || S[0];
 			if (r.type === "style") {
-				let t = F.current?.getStyle();
+				let t = R.current?.getStyle();
 				if (t?.sources) {
 					let n = `base-layer-source-${r.id}-`, i = Object.keys(t.sources).find((e) => e.startsWith(n));
 					i && (e = i);
@@ -7757,143 +7759,145 @@ const Mapbox = forwardRef((e, c) => {
 			} else e = `base-layer-source-${r.id}`;
 			t = r.roadNetworkSourceLayer || "road", n = r.roadNetworkClassField;
 		}
-		return De === !0 ? {
+		return we === !0 ? {
 			enabled: !0,
 			source: e,
 			sourceLayer: t,
 			classField: n
 		} : {
-			...De,
-			source: De.source || e,
-			sourceLayer: De.sourceLayer || t,
-			classField: De.classField || n
+			...we,
+			source: we.source || e,
+			sourceLayer: we.sourceLayer || t,
+			classField: we.classField || n
 		};
-	})(), Xn = (() => N ? N === !0 ? { enabled: !0 } : N : null)(), Zn = (() => ke ? ke === !0 ? { enabled: !0 } : ke : null)(), Qn = (() => Ne || null)(), $n = useMemo(() => {
+	})(), Zn = (() => I ? I === !0 ? { enabled: !0 } : I : null)(), Qn = (() => Ee ? Ee === !0 ? { enabled: !0 } : Ee : null)(), $n = (() => Ae || null)(), er = useMemo(() => {
 		let e = [];
-		for (let t of x) if (t.applyRasterPaint) if (t.type === "style") {
-			let n = F.current;
+		for (let t of S) if (t.applyRasterPaint) if (t.type === "style") {
+			let n = R.current;
 			if (n) {
 				let r = `base-layer-${t.id}-`, i = n.getStyle();
 				if (i?.layers) for (let t of i.layers) t.id.startsWith(r) && t.type === "raster" && e.push(t.id);
 			}
 		} else e.push(`base-layer-${t.id}`);
 		return e;
-	}, [x, z]);
+	}, [S, H]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: `comp-mapbox ${tt === "picker" ? "comp-mapbox--picker-mode" : ""} ${Ve}`,
-		style: He,
+		className: `comp-mapbox ${$e === "picker" ? "comp-mapbox--picker-mode" : ""} ${Re}`,
+		style: ze,
 		children: [
 			/* @__PURE__ */ jsx("div", {
-				ref: Ue,
+				ref: Be,
 				className: "comp-mapbox__map"
 			}),
-			tt === "picker" && v.showCrosshair === !0 && /* @__PURE__ */ jsxs("div", {
+			$e === "picker" && y.showCrosshair === !0 && /* @__PURE__ */ jsxs("div", {
 				className: "comp-mapbox__crosshair",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "comp-mapbox__crosshair-h",
-					style: v.crosshairColor ? { backgroundColor: v.crosshairColor } : void 0
+					style: y.crosshairColor ? { backgroundColor: y.crosshairColor } : void 0
 				}), /* @__PURE__ */ jsx("div", {
 					className: "comp-mapbox__crosshair-v",
-					style: v.crosshairColor ? { backgroundColor: v.crosshairColor } : void 0
+					style: y.crosshairColor ? { backgroundColor: y.crosshairColor } : void 0
 				})]
 			}),
-			tt === "edit" && _.showEditTools !== !1 && (_.markerTemplates && _.markerTemplates.length > 0 || _.showRectangleTool || _.showCircleTool || _.showPolygonTool || _.showSquareTool || _.showPolylineTool) || $ && $.enabled !== !1 || Qn && Qn.enabled !== !1 ? /* @__PURE__ */ jsxs("div", {
+			$e === "edit" && v.showEditTools !== !1 && (v.markerTemplates && v.markerTemplates.length > 0 || v.showRectangleTool || v.showCircleTool || v.showPolygonTool || v.showSquareTool || v.showPolylineTool) || $ && $.enabled !== !1 || $n && $n.enabled !== !1 ? /* @__PURE__ */ jsxs("div", {
 				className: "comp-mapbox__edit-controls",
 				children: [
-					tt === "edit" && _.showEditTools !== !1 && (_.markerTemplates && _.markerTemplates.length > 0 || _.showRectangleTool || _.showCircleTool || _.showPolygonTool || _.showSquareTool || _.showPolylineTool) && /* @__PURE__ */ jsx(EditControl, {
-						markerTemplates: _.markerTemplates || [],
-						selectedTemplate: ot,
-						onTemplateSelect: nn,
-						drawMode: st,
-						onDrawModeChange: rn,
-						showRectangleTool: _.showRectangleTool,
-						showCircleTool: _.showCircleTool,
-						showPolygonTool: _.showPolygonTool,
-						showSquareTool: _.showSquareTool,
-						showPolylineTool: _.showPolylineTool
+					$e === "edit" && v.showEditTools !== !1 && (v.markerTemplates && v.markerTemplates.length > 0 || v.showRectangleTool || v.showCircleTool || v.showPolygonTool || v.showSquareTool || v.showPolylineTool) && /* @__PURE__ */ jsx(EditControl, {
+						markerTemplates: v.markerTemplates || [],
+						selectedTemplate: it,
+						onTemplateSelect: rn,
+						drawMode: at,
+						onDrawModeChange: an,
+						showRectangleTool: v.showRectangleTool,
+						showCircleTool: v.showCircleTool,
+						showPolygonTool: v.showPolygonTool,
+						showSquareTool: v.showSquareTool,
+						showPolylineTool: v.showPolylineTool
 					}),
-					$ && $.enabled !== !1 && /* @__PURE__ */ jsx(RoadHighlightControl, {
-						map: z,
-						highlightWidth: $.highlightWidth,
-						defaultRoadTypes: $.defaultRoadTypes,
-						defaultMinWidth: $.defaultMinWidth,
-						source: $.source,
-						sourceLayer: $.sourceLayer,
-						classField: $.classField,
-						className: $.className,
-						style: $.style
+					/* @__PURE__ */ jsx(RoadHighlightControl, {
+						ref: He,
+						map: H,
+						showButton: !!($ && $.enabled !== !1),
+						highlightWidth: $?.highlightWidth,
+						defaultRoadTypes: $?.defaultRoadTypes,
+						defaultMinWidth: $?.defaultMinWidth,
+						source: $?.source,
+						sourceLayer: $?.sourceLayer,
+						classField: $?.classField,
+						className: $?.className,
+						style: $?.style
 					}),
-					Qn && Qn.enabled !== !1 && /* @__PURE__ */ jsx(RoutePlanningControl, {
-						ref: We,
-						map: z,
-						pointCount: Qn.pointCount,
-						showPointCountInput: Qn.showPointCountInput,
-						visualType: Qn.visualType,
-						onSelectFinished: Qn.onSelectFinished
+					$n && $n.enabled !== !1 && /* @__PURE__ */ jsx(RoutePlanningControl, {
+						ref: Ve,
+						map: H,
+						pointCount: $n.pointCount,
+						showPointCountInput: $n.showPointCountInput,
+						visualType: $n.visualType,
+						onSelectFinished: $n.onSelectFinished
 					})
 				]
 			}) : null,
-			(qn?.enabled !== !1 || Jn?.enabled !== !1 || Yn?.enabled !== !1 || Xn && Xn.enabled !== !1 || Zn && Zn.enabled !== !1) && /* @__PURE__ */ jsxs("div", {
+			(Jn?.enabled !== !1 || Yn?.enabled !== !1 || Xn?.enabled !== !1 || Zn && Zn.enabled !== !1 || Qn && Qn.enabled !== !1) && /* @__PURE__ */ jsxs("div", {
 				className: "comp-mapbox__controls",
 				children: [
-					qn && qn.enabled !== !1 && /* @__PURE__ */ jsx(CoordinateDisplay, {
-						map: z,
-						precision: qn.precision,
-						className: qn.className,
-						style: qn.style
-					}),
-					Jn && Jn.enabled !== !1 && /* @__PURE__ */ jsx(ScaleControl, {
-						map: z,
-						maxWidth: Jn.maxWidth,
-						unit: Jn.unit,
+					Jn && Jn.enabled !== !1 && /* @__PURE__ */ jsx(CoordinateDisplay, {
+						map: H,
+						precision: Jn.precision,
 						className: Jn.className,
 						style: Jn.style
 					}),
-					Xn && Xn.enabled !== !1 && /* @__PURE__ */ jsx(MeasureControl, {
-						map: z,
-						entityConfig: E,
+					Yn && Yn.enabled !== !1 && /* @__PURE__ */ jsx(ScaleControl, {
+						map: H,
+						maxWidth: Yn.maxWidth,
+						unit: Yn.unit,
+						className: Yn.className,
+						style: Yn.style
+					}),
+					Zn && Zn.enabled !== !1 && /* @__PURE__ */ jsx(MeasureControl, {
+						map: H,
+						entityConfig: D,
 						onDrawModeChange: (e) => {
-							gt.current = e;
+							_t.current = e;
 						},
-						className: Xn.className,
-						style: Xn.style
-					}),
-					Zn && Zn.enabled !== !1 && /* @__PURE__ */ jsx(RasterPaintControl, {
-						map: z,
-						value: S,
-						onChange: Pe,
-						rasterPaintLayerIds: $n,
 						className: Zn.className,
 						style: Zn.style
 					}),
-					Yn && Yn.enabled !== !1 && /* @__PURE__ */ jsx(ResetViewControl, {
-						map: z,
+					Qn && Qn.enabled !== !1 && /* @__PURE__ */ jsx(RasterPaintControl, {
+						map: H,
+						value: C,
+						onChange: je,
+						rasterPaintLayerIds: er,
+						className: Qn.className,
+						style: Qn.style
+					}),
+					Xn && Xn.enabled !== !1 && /* @__PURE__ */ jsx(ResetViewControl, {
+						map: H,
 						initialCenter: l,
 						initialZoom: u,
 						initialPitch: d,
 						initialBearing: f,
-						duration: Yn.duration,
-						className: Yn.className,
-						style: Yn.style
+						duration: Xn.duration,
+						className: Xn.className,
+						style: Xn.style
 					})
 				]
 			}),
-			!(Qn && Qn.enabled !== !1) && /* @__PURE__ */ jsx(RoutePlanningControl, {
-				ref: We,
-				map: z,
+			!($n && $n.enabled !== !1) && /* @__PURE__ */ jsx(RoutePlanningControl, {
+				ref: Ve,
+				map: H,
 				showButton: !1
 			}),
-			R && qe.current && /* @__PURE__ */ jsx(EntityPopup, {
-				popupState: R,
-				onClose: () => Tt(R.entityId),
-				portalContainer: qe.current,
-				popupRef: Je
+			V && Ge.current && /* @__PURE__ */ jsx(EntityPopup, {
+				popupState: V,
+				onClose: () => Et(V.entityId),
+				portalContainer: Ge.current,
+				popupRef: Ke
 			}),
-			Xe && Qe.current && /* @__PURE__ */ jsx(ContextMenu, {
-				menuState: Xe,
-				onClose: Tn,
-				portalContainer: Qe.current,
-				menuRef: $e
+			Je && Xe.current && /* @__PURE__ */ jsx(ContextMenu, {
+				menuState: Je,
+				onClose: En,
+				portalContainer: Xe.current,
+				menuRef: Ze
 			})
 		]
 	});