bbl-mapbox-react 0.0.16 → 0.0.17

package/dist/index.mjs

@@ -3516,19 +3516,19 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 		showRadius: r.showRadius ?? !0
 	} : g, [b, x] = useState([]), S = useRef(/* @__PURE__ */ new Map()), C = useRef(0), T = useRef(null), E = useRef(null), D = useRef(null), O = useRef(null), k = useRef(null), A = useRef([]), j = useRef([]), M = useRef(y);
 	M.current = y;
-	let be = useRef(d);
-	be.current = d;
-	let xe = useCallback(() => `measure-${++C.current}`, []), Se = useRef(!1), Ce = useCallback(() => {
-		!e || !e.isStyleLoaded() || (initAllPreviewLayers(e), Se.current = !0);
+	let N = useRef(d);
+	N.current = d;
+	let be = useCallback(() => `measure-${++C.current}`, []), xe = useRef(!1), Se = useCallback(() => {
+		!e || !e.isStyleLoaded() || (initAllPreviewLayers(e), xe.current = !0);
 	}, [e]);
 	useEffect(() => {
 		if (!e) return;
 		let t = () => {
-			initAllPreviewLayers(e), Se.current = !0;
+			initAllPreviewLayers(e), xe.current = !0;
 		};
 		e.isStyleLoaded() ? t() : e.once("load", t);
 		let n = () => {
-			Se.current = !1;
+			xe.current = !1;
 		};
 		return e.on("style.load", n), () => {
 			e.off("style.load", n);
@@ -3539,7 +3539,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	}, []);
-	let we = useCallback((t) => {
+	let Ce = useCallback((t) => {
 		if (!e) return;
 		let n = applyEntityConfig(t, M.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) {
@@ -3552,12 +3552,12 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 			};
 			x((t) => [...t, e]);
 		}
-	}, [e]), Te = useCallback((e) => {
+	}, [e]), we = useCallback((e) => {
 		let t = S.current.get(e);
 		t && (t.destroy(), S.current.delete(e)), x((t) => t.filter((t) => t.entity.id !== e));
-	}, []), Ee = useCallback(() => {
+	}, []), Te = useCallback(() => {
 		S.current.forEach((e) => e.destroy()), S.current.clear(), x([]);
-	}, []), De = useCallback((t) => {
+	}, []), Ee = useCallback((t) => {
 		if (!e) return;
 		let n = S.current.get(t);
 		if (!n) return;
@@ -3567,7 +3567,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 			maxZoom: 18,
 			duration: 1e3
 		});
-	}, [e]), Oe = useCallback((e, t) => {
+	}, [e]), De = useCallback((e, t) => {
 		let n = {
 			...M.current,
 			[e]: t
@@ -3581,7 +3581,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 				entity: i
 			};
 		}));
-	}, [v, i]), ke = useCallback((t, n) => {
+	}, [v, i]), Oe = useCallback((t, n) => {
 		if (!e) return;
 		let [r, i] = t, [a, o] = n, s = [
 			[Math.min(r, a), Math.max(i, o)],
@@ -3631,7 +3631,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 				features: t
 			});
 		}
-	}, [e]), Ae = useCallback((t, n) => {
+	}, [e]), ke = 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({
@@ -3678,7 +3678,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 			type: "FeatureCollection",
 			features: c
 		});
-	}, [e]), je = useCallback((t, n) => {
+	}, [e]), Ae = 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({
@@ -3715,7 +3715,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 				features: n
 			});
 		}
-	}, [e]), Me = useCallback((t, n) => {
+	}, [e]), je = useCallback((t, n) => {
 		if (!e) return;
 		let r = [...t, n], i = e.getSource(`${PREVIEW_PREFIX}polygon-preview-source`);
 		i && (r.length >= 3 ? i.setData({
@@ -3792,7 +3792,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 				features: t
 			});
 		}
-	}, [e]), N = 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({
@@ -3840,117 +3840,117 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 	}, [e]);
 	useEffect(() => {
 		if (!e || !d) return;
-		Ce(), e.getCanvas().style.cursor = "crosshair";
+		Se(), e.getCanvas().style.cursor = "crosshair";
 		let t = (t) => {
-			let n = [t.lngLat.lng, t.lngLat.lat], r = be.current;
+			let n = [t.lngLat.lng, t.lngLat.lat], r = N.current;
 			if (r === "rectangle") {
 				let t = D.current;
 				if (!t) D.current = n;
 				else {
 					let r = {
-						id: xe(),
+						id: be(),
 						type: "rectangle",
 						bounds: [t, n]
 					};
-					we(r), D.current = null, clearAllPreviewSources(e), f(null);
+					Ce(r), D.current = null, clearAllPreviewSources(e), f(null);
 				}
 			} else if (r === "circle") {
 				let t = O.current;
 				if (!t) O.current = { center: n };
 				else {
 					let r = calculateDistance(t.center, n), i = {
-						id: xe(),
+						id: be(),
 						type: "circle",
 						center: t.center,
 						radius: r
 					};
-					we(i), O.current = null, clearAllPreviewSources(e), f(null);
+					Ce(i), O.current = null, clearAllPreviewSources(e), f(null);
 				}
 			} else if (r === "square") {
 				let t = k.current;
 				if (!t) k.current = { center: n };
 				else {
 					let r = calculateDistance(t.center, n) * 2, i = {
-						id: xe(),
+						id: be(),
 						type: "square",
 						center: t.center,
 						length: r
 					};
-					we(i), k.current = null, clearAllPreviewSources(e), f(null);
+					Ce(i), k.current = null, clearAllPreviewSources(e), f(null);
 				}
 			} else if (r === "polygon") {
 				let t = A.current;
 				if (t.length >= 3 && calculateDistance(t[0], n) < 20) {
 					let n = {
-						id: xe(),
+						id: be(),
 						type: "polygon",
 						coordinates: [...t]
 					};
-					we(n), A.current = [], clearAllPreviewSources(e), f(null);
+					Ce(n), A.current = [], clearAllPreviewSources(e), f(null);
 					return;
 				}
 				A.current = [...t, n];
 			} else r === "polyline" && (j.current = [...j.current, n]);
 		}, n = (e) => {
-			let t = [e.lngLat.lng, e.lngLat.lat], n = be.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);
+			let t = [e.lngLat.lng, e.lngLat.lat], n = N.current;
+			if (n === "rectangle" && D.current) Oe(D.current, t);
+			else if (n === "circle" && O.current) ke(O.current.center, t);
+			else if (n === "square" && k.current) Ae(k.current.center, t);
 			else if (n === "polygon") {
 				let e = A.current;
-				e.length > 0 && Me(e, t);
+				e.length > 0 && je(e, t);
 			} else if (n === "polyline") {
 				let e = j.current;
-				e.length > 0 && N(e, t);
+				e.length > 0 && Me(e, t);
 			}
 		}, r = (t) => {
 			t.preventDefault();
-			let n = be.current;
+			let n = N.current;
 			if (n === "polygon") {
 				let t = A.current;
 				if (t.length >= 3) {
 					let n = {
-						id: xe(),
+						id: be(),
 						type: "polygon",
 						coordinates: [...t]
 					};
-					we(n), A.current = [], clearAllPreviewSources(e), f(null);
+					Ce(n), A.current = [], clearAllPreviewSources(e), f(null);
 				} else A.current = [], clearAllPreviewSources(e);
 			} else if (n === "polyline") {
 				let t = j.current;
 				if (t.length >= 2) {
 					let n = {
-						id: xe(),
+						id: be(),
 						type: "polyline",
 						coordinates: [...t]
 					};
-					we(n), j.current = [], clearAllPreviewSources(e), f(null);
+					Ce(n), j.current = [], clearAllPreviewSources(e), f(null);
 				} else j.current = [], clearAllPreviewSources(e);
 			}
 		}, i = (t) => {
 			t.key === "Escape" && (D.current = null, O.current = null, k.current = null, A.current = [], j.current = [], clearAllPreviewSources(e), f(null));
 		}, a = (t) => {
 			t.preventDefault();
-			let n = be.current;
+			let n = N.current;
 			if (n === "polygon") {
 				let t = A.current;
 				if (t.length >= 3) {
 					let n = {
-						id: xe(),
+						id: be(),
 						type: "polygon",
 						coordinates: [...t]
 					};
-					we(n), A.current = [], clearAllPreviewSources(e), f(null);
+					Ce(n), A.current = [], clearAllPreviewSources(e), f(null);
 				}
 			} else if (n === "polyline") {
 				let t = j.current;
 				if (t.length >= 2) {
 					let n = {
-						id: xe(),
+						id: be(),
 						type: "polyline",
 						coordinates: [...t]
 					};
-					we(n), j.current = [], clearAllPreviewSources(e), f(null);
+					Ce(n), j.current = [], clearAllPreviewSources(e), f(null);
 				}
 			}
 		};
@@ -3960,14 +3960,14 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 	}, [
 		e,
 		d,
-		xe,
-		we,
+		be,
 		Ce,
+		Se,
+		Oe,
 		ke,
 		Ae,
 		je,
-		Me,
-		N
+		Me
 	]), useEffect(() => () => {
 		S.current.forEach((e) => e.destroy()), S.current.clear();
 	}, []);
@@ -4008,17 +4008,17 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 					children: [
 						/* @__PURE__ */ jsx(Checkbox, {
 							checked: y.showArea,
-							onChange: (e) => Oe("showArea", e),
+							onChange: (e) => De("showArea", e),
 							children: "面积"
 						}),
 						/* @__PURE__ */ jsx(Checkbox, {
 							checked: y.showLength,
-							onChange: (e) => Oe("showLength", e),
+							onChange: (e) => De("showLength", e),
 							children: "长度"
 						}),
 						/* @__PURE__ */ jsx(Checkbox, {
 							checked: y.showRadius,
-							onChange: (e) => Oe("showRadius", e),
+							onChange: (e) => De("showRadius", e),
 							children: "半径"
 						})
 					]
@@ -4039,7 +4039,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 						})
 					}, e.mode)), b.length > 0 && /* @__PURE__ */ jsx("button", {
 						className: "mapbox-measure-control__tool-btn mapbox-measure-control__tool-btn--danger",
-						onClick: Ee,
+						onClick: Te,
 						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",
@@ -4059,7 +4059,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 							/* @__PURE__ */ jsx("th", {})
 						] }) }), /* @__PURE__ */ jsx("tbody", { children: b.map((e) => /* @__PURE__ */ jsxs("tr", {
 							className: "mapbox-measure-control__table-row",
-							onClick: () => De(e.entity.id),
+							onClick: () => Ee(e.entity.id),
 							children: [
 								/* @__PURE__ */ jsx("td", { children: e.shapeLabel }),
 								/* @__PURE__ */ jsx("td", { children: String(e.entity.id) }),
@@ -4068,7 +4068,7 @@ function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, clas
 								/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("button", {
 									className: "mapbox-measure-control__delete-btn",
 									onClick: (t) => {
-										t.stopPropagation(), Te(e.entity.id);
+										t.stopPropagation(), we(e.entity.id);
 									},
 									title: "删除",
 									children: /* @__PURE__ */ jsx("img", {
@@ -4550,51 +4550,51 @@ 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: h = "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: A, circleConfig: j, lengthConfig: M, showCoordinates: be = !0, showScale: Se = !0, showResetView: Ee = !0, showRoadHighlight: De = !1, showMeasure: Oe = !1, showRasterPaint: Ae = !1, onRasterPaintChange: je, popupDefaults: N, renderPopup: Pe, onMapLoad: Fe, onEntityClick: Ie, onPopupOpen: Le, onPopupClose: Re, className: ze = "", containerStyle: Be } = e, Ve = useRef(null), P = useRef(null), F = useRef(/* @__PURE__ */ new Map()), I = useRef(/* @__PURE__ */ new Map()), He = useRef(/* @__PURE__ */ new Set()), [L, Ue] = useState(null), We = useRef(null), Ge = useRef(null), Ke = useRef(null), [qe, Je] = useState(null), Ye = useRef(null), Xe = useRef(null), [Ze, Qe] = useState(null), [R, $e] = useState(_), [et, tt] = useState(null), nt = useRef(null), [rt, z] = useState(null), [it, B] = useState(null), [at, ot] = useState(null), V = useRef(!1), H = useRef(null), U = useRef(null), W = useRef(null), st = useRef(null), G = useRef(null), ct = useRef([]), K = useRef(null), lt = useRef(null), q = useRef(null), ut = useRef([]), J = useRef(null);
+	let { center: l = [116.4074, 39.9042], zoom: u = 12, pitch: d = 0, bearing: f = 0, style: h = "mapbox://styles/mapbox/dark-v11", maxBounds: g, mode: _ = "display", editConfig: v = {}, pickerConfig: y = {}, onPick: b, interactive: x = {}, layers: S = [], rasterPaint: T, entities: E = [], selectedIds: D = [], entityConfig: O, nameConfig: k, selectNameConfig: A, areaConfig: j, circleConfig: M, lengthConfig: N, showCoordinates: xe = !0, showScale: Te = !0, showResetView: Ee = !0, showRoadHighlight: De = !1, showMeasure: ke = !1, showRasterPaint: Ae = !1, onRasterPaintChange: Me, popupDefaults: P, renderPopup: Pe, onMapLoad: Fe, onEntityClick: Ie, onPopupOpen: Le, onPopupClose: Re, className: ze = "", containerStyle: Be } = e, Ve = useRef(null), F = useRef(null), I = useRef(/* @__PURE__ */ new Map()), L = useRef(/* @__PURE__ */ new Map()), He = useRef(/* @__PURE__ */ new Set()), [R, Ue] = useState(null), We = useRef(null), Ge = useRef(null), Ke = useRef(null), [qe, Je] = useState(null), Ye = useRef(null), Xe = useRef(null), [Ze, Qe] = useState(null), [z, $e] = useState(_), [et, tt] = useState(null), nt = useRef(null), [rt, B] = useState(null), [it, V] = useState(null), [at, ot] = useState(null), H = useRef(!1), U = useRef(null), W = useRef(null), G = useRef(null), st = useRef(null), K = useRef(null), ct = useRef([]), q = useRef(null), lt = useRef(null), J = useRef(null), ut = useRef([]), dt = useRef(null);
 	useEffect(() => {
 		$e(_);
 	}, [_]);
-	let dt = useCallback((e) => {
-		let t = F.current.get(e), n = I.current.get(e);
+	let ft = useCallback((e) => {
+		let t = I.current.get(e), n = L.current.get(e);
 		if (t && n) {
 			if (n.type === "radar" && t instanceof CanvasRadarRenderer) {
 				let r = {
 					...n,
 					isAnimating: !0
 				};
-				I.current.set(e, r), t.startAnimation();
+				L.current.set(e, r), t.startAnimation();
 			} else if (n.type === "circle" && t instanceof CanvasCircleRenderer) {
 				let r = {
 					...n,
 					isAnimating: !0
 				};
-				I.current.set(e, r), t.startAnimation();
+				L.current.set(e, r), t.startAnimation();
 			}
 		}
-	}, []), ft = useCallback((e) => {
-		let t = F.current.get(e), n = I.current.get(e);
+	}, []), pt = useCallback((e) => {
+		let t = I.current.get(e), n = L.current.get(e);
 		if (t && n) {
 			if (n.type === "radar" && t instanceof CanvasRadarRenderer) {
 				let r = {
 					...n,
 					isAnimating: !1
 				};
-				I.current.set(e, r), t.stopAnimation();
+				L.current.set(e, r), t.stopAnimation();
 			} else if (n.type === "circle" && t instanceof CanvasCircleRenderer) {
 				let r = {
 					...n,
 					isAnimating: !1
 				};
-				I.current.set(e, r), t.stopAnimation();
+				L.current.set(e, r), t.stopAnimation();
 			}
 		}
-	}, []), pt = useCallback((e) => {
-		let t = I.current.get(e);
-		t && (t.type === "radar" || t.type === "circle") && (t.type, t.isAnimating ? ft(e) : dt(e));
-	}, [dt, ft]), mt = useCallback((e) => {
+	}, []), mt = useCallback((e) => {
+		let t = L.current.get(e);
+		t && (t.type === "radar" || t.type === "circle") && (t.type, t.isAnimating ? pt(e) : ft(e));
+	}, [ft, pt]), ht = useCallback((e) => {
 		if (e === void 0) {
 			let e = !1;
-			for (let [, t] of F.current) if (t instanceof UnitRenderer) {
+			for (let [, t] of I.current) if (t instanceof UnitRenderer) {
 				let n = t.getShowTrajectory();
 				if (n === "all" || typeof n == "number" && n > 0) {
 					e = !0;
@@ -4602,17 +4602,17 @@ const Mapbox = forwardRef((e, c) => {
 				}
 			}
 			let t = e ? 0 : "all";
-			for (let [, e] of F.current) e instanceof UnitRenderer && e.setShowTrajectory(t);
+			for (let [, e] of I.current) e instanceof UnitRenderer && e.setShowTrajectory(t);
 		} else {
 			let t = new Set(e.map(String));
-			for (let [e, n] of F.current) n instanceof UnitRenderer && n.setShowTrajectory(t.has(String(e)) ? "all" : 0);
+			for (let [e, n] of I.current) n instanceof UnitRenderer && n.setShowTrajectory(t.has(String(e)) ? "all" : 0);
 		}
-	}, []), ht = useCallback((e, t, n) => {
-		let r = T.find((t) => String(t.id) === String(e));
-		if (!r?.popup || !P.current) return;
+	}, []), gt = useCallback((e, t, n) => {
+		let r = E.find((t) => String(t.id) === String(e));
+		if (!r?.popup || !F.current) return;
 		let i = r.popup.content ?? Pe?.(r);
 		if (!i) return;
-		let a = mergePopupConfig(r.popup, N, i), { position: o, actualPosition: s } = calculatePopupPosition(r, a, P.current, n);
+		let a = mergePopupConfig(r.popup, P, i), { position: o, actualPosition: s } = calculatePopupPosition(r, a, F.current, n);
 		Ue({
 			entityId: e,
 			position: o,
@@ -4621,27 +4621,27 @@ const Mapbox = forwardRef((e, c) => {
 			actualPosition: s
 		}), Le?.(e);
 	}, [
-		T,
-		N,
+		E,
+		P,
 		Pe,
 		Le
-	]), gt = useCallback((e) => {
-		L?.entityId === e && (Ue(null), Re?.(e));
-	}, [L, Re]), _t = useCallback(() => {
+	]), _t = useCallback((e) => {
+		R?.entityId === e && (Ue(null), Re?.(e));
+	}, [R, Re]), vt = useCallback(() => {
 		Ue((e) => (e && Re?.(e.entityId), null));
-	}, [Re]), vt = useCallback((e) => L?.entityId === e, [L]), yt = useCallback((e, t, n) => {
-		let r = P.current;
+	}, [Re]), yt = useCallback((e) => R?.entityId === e, [R]), bt = useCallback((e, t, n) => {
+		let r = F.current;
 		r && r.flyTo({
 			center: e,
 			zoom: t ?? r.getZoom(),
 			...n
 		});
-	}, []), bt = useCallback((e, t, n) => {
-		let r = P.current;
+	}, []), xt = useCallback((e, t, n) => {
+		let r = F.current;
 		if (!r || e.length === 0) return;
 		let i = [];
 		for (let t of e) {
-			let e = F.current.get(t);
+			let e = I.current.get(t);
 			e && i.push(e.getBounds());
 		}
 		if (i.length === 0) return;
@@ -4663,51 +4663,65 @@ 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);
-	}, []), xt = useCallback((e) => {
-		let t = P.current;
+	}, []), St = useCallback((e) => {
+		let t = F.current;
 		if (!t || !t.getContainer()) return;
-		let { showMarker: n = !0, markerColor: r = "#3388ff" } = y;
+		let { showMarker: n = !0, markerColor: r = "#3388ff", name: i, nameConfig: a } = y;
 		if (!n) {
 			nt.current &&= (nt.current.remove(), null);
 			return;
 		}
-		if (nt.current) nt.current.setLngLat(e);
-		else {
+		if (nt.current) {
+			nt.current.setLngLat(e);
+			let t = nt.current.getElement(), n = t.querySelector(".marker-label");
+			if (i) {
+				let e = resolveNameConfig(a, k);
+				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");
+					n.className = "marker-label", 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`, t.appendChild(n);
+				}
+			} else n && n.remove();
+		} else {
 			let n = document.createElement("div");
 			n.className = "mapbox-picker-marker";
-			let i = document.createElement("div");
-			i.className = "marker-inner", i.style.background = r, n.appendChild(i), nt.current = new mapboxgl.Marker({
+			let o = document.createElement("div");
+			if (o.className = "marker-inner", o.style.background = r, n.appendChild(o), i) {
+				let e = resolveNameConfig(a, k), 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);
+			}
+			nt.current = new mapboxgl.Marker({
 				element: n,
 				anchor: "bottom"
 			}).setLngLat(e).addTo(t);
 		}
-	}, [y]), St = useCallback(() => {
+	}, [y, k]), Ct = useCallback(() => {
 		nt.current &&= (nt.current.remove(), null);
-	}, []), Ct = useCallback(() => `marker-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`, []), wt = useCallback((e) => {
-		let t = P.current;
-		if (Ve.current) if (J.current &&= (J.current.remove(), null), e && t) {
+	}, []), wt = useCallback(() => `marker-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`, []), Tt = useCallback((e) => {
+		let t = F.current;
+		if (Ve.current) if (dt.current &&= (dt.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), J.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), dt.current = n;
 			let a = (e) => {
-				J.current && (J.current.style.left = `${e.clientX}px`, J.current.style.top = `${e.clientY}px`);
+				dt.current && (dt.current.style.left = `${e.clientX}px`, dt.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 (J.current) {
-			let e = J.current._cleanup;
-			e && e(), J.current.remove(), J.current = null;
+		if (dt.current) {
+			let e = dt.current._cleanup;
+			e && e(), dt.current.remove(), dt.current = null;
 		}
-		let e = P.current;
+		let e = F.current;
 		e && (e.getCanvas().style.cursor = "");
-	}, []), X = useCallback((e, t, n) => {
+	}, []), Et = useCallback((e, t, n) => {
 		if (!e.getSource(t)) {
 			if (!e.getStyle().glyphs) {
 				let t = e.style, n = "/gis-fonts/{fontstack}/{range}.pbf";
@@ -4743,8 +4757,8 @@ const Mapbox = forwardRef((e, c) => {
 				}
 			});
 		}
-	}, []), Tt = useCallback(() => {
-		let e = P.current;
+	}, []), Dt = useCallback(() => {
+		let e = F.current;
 		e && (e.getSource("rect-preview-source") || (e.addSource("rect-preview-source", {
 			type: "geojson",
 			data: {
@@ -4768,9 +4782,9 @@ const Mapbox = forwardRef((e, c) => {
 				"line-width": 2,
 				"line-dasharray": [4, 4]
 			}
-		}), X(e, "rect-preview-measure-source", "rect-preview-measure-label")));
-	}, [X]), Et = useCallback((e, t) => {
-		let n = P.current;
+		}), Et(e, "rect-preview-measure-source", "rect-preview-measure-label")));
+	}, [Et]), Ot = useCallback((e, t) => {
+		let n = F.current;
 		if (!n) return;
 		let r = n.getSource("rect-preview-source");
 		if (!r) return;
@@ -4789,11 +4803,11 @@ const Mapbox = forwardRef((e, c) => {
 			},
 			properties: {}
 		});
-		let l = H.current, u = l?.strokeColor ?? "#3388ff", d = l?.strokeWidth ?? 2, f = l?.fillColor ?? "#3388ff", p = l?.fillOpacity ?? .1;
+		let l = U.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 = Tn.current, t = [], n = c[0], r = c[1], i = c[2];
+			let e = En.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({
@@ -4830,8 +4844,8 @@ const Mapbox = forwardRef((e, c) => {
 				features: t
 			});
 		}
-	}, []), Dt = useCallback(() => {
-		let e = P.current;
+	}, []), kt = useCallback(() => {
+		let e = F.current;
 		if (!e) return;
 		let t = e.getSource("rect-preview-source");
 		t && t.setData({
@@ -4843,10 +4857,10 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), Z = useCallback(() => {
-		ot(null), Dt();
-	}, [Dt]), Ot = useCallback(() => {
-		let e = P.current;
+	}, []), X = useCallback(() => {
+		ot(null), kt();
+	}, [kt]), At = useCallback(() => {
+		let e = F.current;
 		e && (e.getSource("circle-preview-source") || (e.addSource("circle-preview-source", {
 			type: "geojson",
 			data: {
@@ -4870,7 +4884,7 @@ const Mapbox = forwardRef((e, c) => {
 				"line-width": 2,
 				"line-dasharray": [4, 4]
 			}
-		}), X(e, "circle-preview-measure-source", "circle-preview-measure-label"), e.getSource("circle-preview-radius-source") || (e.addSource("circle-preview-radius-source", {
+		}), Et(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",
@@ -4887,22 +4901,22 @@ const Mapbox = forwardRef((e, c) => {
 				"line-dasharray": [4, 4]
 			}
 		}))));
-	}, [X]), kt = useCallback((e, t, n = 64) => {
+	}, [Et]), jt = 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;
-	}, []), At = useCallback((e, t) => {
+	}, []), Mt = 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)));
-	}, []), jt = useCallback((e, t) => {
-		let n = P.current;
+	}, []), Nt = useCallback((e, t) => {
+		let n = F.current;
 		if (!n) return;
 		let r = n.getSource("circle-preview-source");
 		if (!r) return;
-		let i = At(e, t), a = kt(e, i);
+		let i = Mt(e, t), a = jt(e, i);
 		r.setData({
 			type: "Feature",
 			geometry: {
@@ -4911,9 +4925,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 = G.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 = Tn.current, f = [], p = [];
+		let d = En.current, f = [], p = [];
 		if (d?.showArea) {
 			let t = Math.PI * i * i;
 			f.push({
@@ -4926,7 +4940,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 = G.current?.radiusAngle ?? 90, n = destinationPoint(e, i, t), r = [(e[0] + n[0]) / 2, (e[1] + n[1]) / 2];
 			p.push({
 				type: "Feature",
 				geometry: {
@@ -4953,8 +4967,8 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: p
 		});
-	}, [At, kt]), Mt = useCallback(() => {
-		let e = P.current;
+	}, [Mt, jt]), Pt = useCallback(() => {
+		let e = F.current;
 		if (!e) return;
 		let t = e.getSource("circle-preview-source");
 		t && t.setData({
@@ -4971,10 +4985,10 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), Nt = useCallback(() => {
-		st.current = null, Mt();
-	}, [Mt]), Pt = useCallback(() => {
-		let e = P.current;
+	}, []), Ft = useCallback(() => {
+		st.current = null, Pt();
+	}, [Pt]), It = useCallback(() => {
+		let e = F.current;
 		e && (e.getSource("polygon-preview-source") || (e.addSource("polygon-preview-source", {
 			type: "geojson",
 			data: {
@@ -5014,9 +5028,9 @@ const Mapbox = forwardRef((e, c) => {
 				"circle-stroke-color": "#ffffff",
 				"circle-stroke-width": 2
 			}
-		}), X(e, "polygon-preview-measure-source", "polygon-preview-measure-label")));
-	}, [X]), Ft = useCallback((e, t) => {
-		let n = P.current;
+		}), Et(e, "polygon-preview-measure-source", "polygon-preview-measure-label")));
+	}, [Et]), Lt = useCallback((e, t) => {
+		let n = F.current;
 		if (!n) return;
 		let r = n.getSource("polygon-preview-source"), i = n.getSource("polygon-vertices-source");
 		if (!r || !i) return;
@@ -5053,11 +5067,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 = K.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 = Tn.current, t = [];
+			let e = En.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];
@@ -5099,8 +5113,8 @@ const Mapbox = forwardRef((e, c) => {
 				features: t
 			});
 		}
-	}, []), It = useCallback(() => {
-		let e = P.current;
+	}, []), Rt = useCallback(() => {
+		let e = F.current;
 		if (!e) return;
 		let t = e.getSource("polygon-preview-source");
 		t && t.setData({
@@ -5117,10 +5131,10 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), Lt = useCallback(() => {
-		ct.current = [], It();
-	}, [It]), Rt = useCallback(() => {
-		let e = P.current;
+	}, []), zt = useCallback(() => {
+		ct.current = [], Rt();
+	}, [Rt]), Bt = useCallback(() => {
+		let e = F.current;
 		e && (e.getSource("square-preview-source") || (e.addSource("square-preview-source", {
 			type: "geojson",
 			data: {
@@ -5144,8 +5158,8 @@ const Mapbox = forwardRef((e, c) => {
 				"line-width": 2,
 				"line-dasharray": [4, 4]
 			}
-		}), X(e, "square-preview-measure-source", "square-preview-measure-label")));
-	}, [X]), zt = useCallback((e, t) => {
+		}), Et(e, "square-preview-measure-source", "square-preview-measure-label")));
+	}, [Et]), Vt = 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],
@@ -5154,12 +5168,12 @@ const Mapbox = forwardRef((e, c) => {
 			[n - s, r - o],
 			[n - s, r + o]
 		];
-	}, []), Bt = useCallback((e, t) => {
-		let n = P.current;
+	}, []), Ht = useCallback((e, t) => {
+		let n = F.current;
 		if (!n) return;
 		let r = n.getSource("square-preview-source");
 		if (!r) return;
-		let i = At(e, t) * 2, a = zt(e, i);
+		let i = Mt(e, t) * 2, a = Vt(e, i);
 		r.setData({
 			type: "Feature",
 			geometry: {
@@ -5168,11 +5182,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 = q.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 = Tn.current, n = [];
+			let t = En.current, n = [];
 			if (t?.showArea && n.push({
 				type: "Feature",
 				geometry: {
@@ -5196,8 +5210,8 @@ const Mapbox = forwardRef((e, c) => {
 				features: n
 			});
 		}
-	}, [At, zt]), Vt = useCallback(() => {
-		let e = P.current;
+	}, [Mt, Vt]), Ut = useCallback(() => {
+		let e = F.current;
 		if (!e) return;
 		let t = e.getSource("square-preview-source");
 		t && t.setData({
@@ -5209,10 +5223,10 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), Ht = useCallback(() => {
-		lt.current = null, Vt();
-	}, [Vt]), Ut = useCallback(() => {
-		let e = P.current;
+	}, []), Wt = useCallback(() => {
+		lt.current = null, Ut();
+	}, [Ut]), Gt = useCallback(() => {
+		let e = F.current;
 		e && (e.getSource("polyline-preview-source") || (e.addSource("polyline-preview-source", {
 			type: "geojson",
 			data: {
@@ -5244,9 +5258,9 @@ const Mapbox = forwardRef((e, c) => {
 				"circle-stroke-color": "#ffffff",
 				"circle-stroke-width": 2
 			}
-		}), X(e, "polyline-preview-measure-source", "polyline-preview-measure-label")));
-	}, [X]), Wt = useCallback((e, t) => {
-		let n = P.current;
+		}), Et(e, "polyline-preview-measure-source", "polyline-preview-measure-label")));
+	}, [Et]), Kt = useCallback((e, t) => {
+		let n = F.current;
 		if (!n) return;
 		let r = n.getSource("polyline-preview-source"), i = n.getSource("polyline-vertices-source");
 		if (!r || !i) return;
@@ -5272,11 +5286,11 @@ const Mapbox = forwardRef((e, c) => {
 				properties: {}
 			}))
 		});
-		let o = q.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2;
+		let o = J.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 = Tn.current, t = [];
+			let e = En.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({
@@ -5293,8 +5307,8 @@ const Mapbox = forwardRef((e, c) => {
 				features: t
 			});
 		}
-	}, []), Gt = useCallback(() => {
-		let e = P.current;
+	}, []), qt = useCallback(() => {
+		let e = F.current;
 		if (!e) return;
 		let t = e.getSource("polyline-preview-source");
 		t && t.setData({
@@ -5311,146 +5325,150 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), Q = useCallback(() => {
-		ut.current = [], Gt();
-	}, [Gt]), Kt = useCallback((e) => {
-		z(e), wt(e), e ? (B("marker"), Z(), Nt(), Lt(), Ht(), Q()) : B(null);
+	}, []), Z = useCallback(() => {
+		ut.current = [], qt();
+	}, [qt]), Jt = useCallback((e) => {
+		B(e), Tt(e), e ? (V("marker"), X(), Ft(), zt(), Wt(), Z()) : V(null);
 	}, [
-		wt,
-		Z,
-		Nt,
-		Lt,
-		Ht,
-		Q
-	]), qt = useCallback((e) => {
-		if (B(e), e === "rectangle") {
-			z(null), Y(), Nt(), Lt(), Ht(), Q();
-			let e = P.current;
+		Tt,
+		X,
+		Ft,
+		zt,
+		Wt,
+		Z
+	]), Yt = useCallback((e) => {
+		if (V(e), e === "rectangle") {
+			B(null), Y(), Ft(), zt(), Wt(), Z();
+			let e = F.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "circle") {
-			z(null), Y(), Z(), Lt(), Ht(), Q();
-			let e = P.current;
+			B(null), Y(), X(), zt(), Wt(), Z();
+			let e = F.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "polygon") {
-			z(null), Y(), Z(), Nt(), Ht(), Q();
-			let e = P.current;
+			B(null), Y(), X(), Ft(), Wt(), Z();
+			let e = F.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "square") {
-			z(null), Y(), Z(), Nt(), Lt(), Q();
-			let e = P.current;
+			B(null), Y(), X(), Ft(), zt(), Z();
+			let e = F.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "polyline") {
-			z(null), Y(), Z(), Nt(), Lt(), Ht();
-			let e = P.current;
+			B(null), Y(), X(), Ft(), zt(), Wt();
+			let e = F.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
-		} else e === "marker" ? (Z(), Nt(), Lt(), Ht(), Q()) : (z(null), Y(), Z(), Nt(), Lt(), Ht(), Q());
+		} else e === "marker" ? (X(), Ft(), zt(), Wt(), Z()) : (B(null), Y(), X(), Ft(), zt(), Wt(), Z());
 	}, [
 		Y,
-		Z,
-		Nt,
-		Lt,
-		Ht,
-		Q
-	]), Jt = useCallback((e) => {
-		e !== "picker" && (St(), tt(null)), e !== "edit" && (z(null), B(null), Z(), Q(), Y()), $e(e);
+		X,
+		Ft,
+		zt,
+		Wt,
+		Z
+	]), Xt = useCallback((e) => {
+		if (e !== "picker") {
+			let e = y.value && isFinite(y.value.lng) && isFinite(y.value.lat), t = y.showMarker !== !1;
+			(!e || !t) && Ct(), tt(null);
+		}
+		e !== "edit" && (B(null), V(null), X(), Z(), Y()), $e(e);
 	}, [
-		St,
+		Ct,
 		Y,
-		Z,
-		Q
-	]), Yt = useCallback(() => R, [R]), Xt = useCallback(() => et, [et]), Zt = useCallback(() => {
-		St(), tt(null);
-	}, [St]);
+		X,
+		Z
+	]), Zt = useCallback(() => z, [z]), Qt = useCallback(() => et, [et]), $t = useCallback(() => {
+		Ct(), tt(null);
+	}, [Ct]);
 	useEffect(() => {
 		if (!Ze) return;
 		let e = y.value;
 		if (e && isFinite(e.lng) && isFinite(e.lat)) {
 			let t = [e.lng, e.lat];
-			tt(e), xt(t);
+			tt(e), St(t);
 		}
 	}, [
 		y.value,
-		xt,
+		St,
 		Ze
 	]);
-	let Qt = (e) => "mode" in e, $t = useCallback((e) => {
-		if ($e("edit"), St(), tt(null), V.current = !0, Qt(e)) {
-			if (e.mode === "marker") e.markerStyle ? (U.current = e.markerStyle, H.current = null, W.current = null, G.current = null, K.current = null, q.current = null, z(null), B("marker"), e.markerStyle.src && e.markerStyle.width ? wt({
+	let en = (e) => "mode" in e, tn = useCallback((e) => {
+		if ($e("edit"), Ct(), tt(null), H.current = !0, en(e)) {
+			if (e.mode === "marker") e.markerStyle ? (W.current = e.markerStyle, U.current = null, G.current = null, K.current = null, q.current = null, J.current = null, B(null), V("marker"), e.markerStyle.src && e.markerStyle.width ? Tt({
 				id: "custom",
 				name: e.markerStyle.name || "Marker",
 				icon: e.markerStyle.src,
 				width: e.markerStyle.width
-			}) : Y()) : e.template && (U.current = null, H.current = null, W.current = null, G.current = null, K.current = null, q.current = null, z(e.template), B("marker"), wt(e.template));
+			}) : Y()) : e.template && (W.current = null, U.current = null, G.current = null, K.current = null, q.current = null, J.current = null, B(e.template), V("marker"), Tt(e.template));
 			else if (e.mode === "rectangle") {
-				H.current = e.rectangleStyle || null, U.current = null, W.current = null, G.current = null, K.current = null, q.current = null, z(null), B("rectangle"), Y();
-				let t = P.current;
+				U.current = e.rectangleStyle || null, W.current = null, G.current = null, K.current = null, q.current = null, J.current = null, B(null), V("rectangle"), Y();
+				let t = F.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "circle") {
-				W.current = e.circleStyle || null, H.current = null, U.current = null, G.current = null, K.current = null, q.current = null, z(null), B("circle"), Y();
-				let t = P.current;
+				G.current = e.circleStyle || null, U.current = null, W.current = null, K.current = null, q.current = null, J.current = null, B(null), V("circle"), Y();
+				let t = F.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "polygon") {
-				G.current = e.polygonStyle || null, H.current = null, U.current = null, W.current = null, K.current = null, q.current = null, z(null), B("polygon"), Y();
-				let t = P.current;
+				K.current = e.polygonStyle || null, U.current = null, W.current = null, G.current = null, q.current = null, J.current = null, B(null), V("polygon"), Y();
+				let t = F.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "square") {
-				K.current = e.squareStyle || null, H.current = null, U.current = null, W.current = null, G.current = null, q.current = null, z(null), B("square"), Y();
-				let t = P.current;
+				q.current = e.squareStyle || null, U.current = null, W.current = null, G.current = null, K.current = null, J.current = null, B(null), V("square"), Y();
+				let t = F.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "polyline") {
-				q.current = e.polylineStyle || null, H.current = null, U.current = null, W.current = null, G.current = null, K.current = null, z(null), B("polyline"), Y();
-				let t = P.current;
+				J.current = e.polylineStyle || null, U.current = null, W.current = null, G.current = null, K.current = null, q.current = null, B(null), V("polyline"), Y();
+				let t = F.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			}
-		} else z(e), B("marker"), wt(e), H.current = null, U.current = null, W.current = null, G.current = null, K.current = null, q.current = null;
+		} else B(e), V("marker"), Tt(e), U.current = null, W.current = null, G.current = null, K.current = null, q.current = null, J.current = null;
 	}, [
-		St,
-		wt,
+		Ct,
+		Tt,
 		Y
 	]);
 	useImperativeHandle(c, () => ({
-		startAnimation: dt,
-		stopAnimation: ft,
-		toggleAnimation: pt,
-		getMap: () => P.current,
-		openPopup: (e) => ht(e, "programmatic"),
-		closePopup: gt,
-		closeAllPopups: _t,
-		isPopupOpen: vt,
-		toggleUnitTrajectory: mt,
-		flyTo: yt,
-		flyToEntities: bt,
-		getMode: Yt,
-		setMode: Jt,
-		getPickedLocation: Xt,
-		clearPickedLocation: Zt,
-		startDrawing: $t,
-		getRenderer: (e) => F.current.get(e)
+		startAnimation: ft,
+		stopAnimation: pt,
+		toggleAnimation: mt,
+		getMap: () => F.current,
+		openPopup: (e) => gt(e, "programmatic"),
+		closePopup: _t,
+		closeAllPopups: vt,
+		isPopupOpen: yt,
+		toggleUnitTrajectory: ht,
+		flyTo: bt,
+		flyToEntities: xt,
+		getMode: Zt,
+		setMode: Xt,
+		getPickedLocation: Qt,
+		clearPickedLocation: $t,
+		startDrawing: tn,
+		getRenderer: (e) => I.current.get(e)
 	}), [
-		dt,
 		ft,
 		pt,
-		ht,
+		mt,
 		gt,
 		_t,
 		vt,
-		mt,
 		yt,
+		ht,
 		bt,
-		Yt,
-		Jt,
-		Xt,
+		xt,
 		Zt,
-		$t
+		Xt,
+		Qt,
+		$t,
+		tn
 	]);
-	let en = useCallback(() => {
-		let e = P.current;
+	let nn = useCallback(() => {
+		let e = F.current;
 		if (!e) return;
-		let t = new Set(T.map((e) => e.id)), n = new Set(F.current.keys());
-		for (let e of n) t.has(e) || (F.current.get(e)?.destroy(), F.current.delete(e));
-		let r = new Set(E.map(String));
-		for (let t of T) {
-			let n = applyEntityConfig(t, D), i = F.current.get(n.id);
+		let t = new Set(E.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(D.map(String));
+		for (let t of E) {
+			let n = applyEntityConfig(t, O), i = I.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);
@@ -5459,34 +5477,34 @@ 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, O, k, A, j);
-				F.current.set(n.id, t), t.setSelected(r.has(String(n.id)));
+				let t = new CanvasCircleRenderer(e, n, k, A, j, M);
+				I.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, O, k, A, j);
-				F.current.set(n.id, t), t.setSelected(r.has(String(n.id)));
+				let t = new CircleRenderer(e, n, k, A, j, M);
+				I.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, 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, A, M) : n.type === "circle" ? t = n.fillType === "radial-gradient" ? new CanvasCircleRenderer(e, n, O, k, A, j) : new CircleRenderer(e, n, O, k, A, j) : n.type === "square" ? t = new SquareRenderer(e, n, O, k, A, M) : n.type === "rectangle" ? t = new RectangleRenderer(e, n, O, k, A, M) : n.type === "polyline" && (t = new PolylineRenderer(e, n, O, k, M)), t && (F.current.set(n.id, t), t.setSelected(r.has(String(n.id))));
+				n.type === "radar" ? t = new CanvasRadarRenderer(e, n, k, A) : n.type === "image" ? t = new CanvasImageRenderer(e, n, k, A) : n.type === "marker" ? t = new MarkerRenderer(e, n, k, A) : n.type === "unit" ? t = new UnitRenderer(e, n, k, A) : n.type === "polygon" ? t = new PolygonRenderer(e, n, k, A, j, N) : n.type === "circle" ? t = n.fillType === "radial-gradient" ? new CanvasCircleRenderer(e, n, k, A, j, M) : new CircleRenderer(e, n, k, A, j, M) : n.type === "square" ? t = new SquareRenderer(e, n, k, A, j, N) : n.type === "rectangle" ? t = new RectangleRenderer(e, n, k, A, j, N) : n.type === "polyline" && (t = new PolylineRenderer(e, n, k, A, N)), t && (I.current.set(n.id, t), t.setSelected(r.has(String(n.id))));
 			}
 		}
 	}, [
-		T,
 		E,
 		D,
 		O,
 		k,
 		A,
 		j,
-		M
-	]), tn = useCallback(() => {
-		for (let e of F.current.values()) e.destroy();
-		F.current.clear();
-	}, []), nn = useCallback((e) => {
+		M,
+		N
+	]), rn = useCallback(() => {
+		for (let e of I.current.values()) e.destroy();
+		I.current.clear();
+	}, []), an = useCallback((e) => {
 		let t = e.getStyle();
 		if (!t?.layers) return;
 		let n = [
@@ -5501,10 +5519,10 @@ const Mapbox = forwardRef((e, c) => {
 			"marker-"
 		];
 		for (let e of t.layers) if (n.some((t) => e.id.startsWith(t))) return e.id;
-	}, []), rn = 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;
+	}, []), on = useCallback((e) => {
+		let t = T, 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;
-	}, [C]), an = useCallback((e, t) => {
+	}, [T]), sn = useCallback((e, t) => {
 		let n = `base-layer-source-${t.id}`, r = `base-layer-${t.id}`, i = {
 			type: "raster",
 			tiles: [t.url],
@@ -5514,19 +5532,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 = nn(e);
+		let a = an(e);
 		e.addLayer({
 			id: r,
 			type: "raster",
 			source: n,
-			paint: rn(t),
+			paint: on(t),
 			layout: { visibility: t.visible === !1 ? "none" : "visible" }
 		}, a);
-	}, [nn, rn]), on = useCallback(async (e, t) => {
+	}, [an, on]), cn = 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 (!He.current.has(t.id)) return;
-			let a = n.format === "pbf" || n.vector_layers, o = nn(e);
+			let a = n.format === "pbf" || n.vector_layers, o = an(e);
 			a ? (e.addSource(r, {
 				type: "vector",
 				tiles: n.tiles,
@@ -5546,13 +5564,13 @@ const Mapbox = forwardRef((e, c) => {
 				id: i,
 				type: "raster",
 				source: r,
-				paint: rn(t),
+				paint: on(t),
 				layout: { visibility: t.visible === !1 ? "none" : "visible" }
 			}, o));
 		} catch (e) {
 			console.error(`Failed to load TileJSON from ${t.url}:`, e);
 		}
-	}, [nn, rn]), sn = useCallback(async (e, t) => {
+	}, [an, on]), ln = useCallback(async (e, t) => {
 		try {
 			let n = await (await fetch(t.url)).json();
 			if (!He.current.has(t.id)) return;
@@ -5560,7 +5578,7 @@ const Mapbox = forwardRef((e, c) => {
 				let n = `base-layer-source-${t.id}-${r}`;
 				e.getSource(n) || e.addSource(n, i);
 			}
-			let r = nn(e);
+			let r = an(e);
 			if (n.layers) for (let i of n.layers) {
 				let n = `base-layer-${t.id}-${i.id}`;
 				if (e.getLayer(n)) continue;
@@ -5571,7 +5589,7 @@ const Mapbox = forwardRef((e, c) => {
 				};
 				i.type === "raster" && (a.paint = {
 					...a.paint,
-					...rn(t)
+					...on(t)
 				}), t.visible === !1 && (a.layout = {
 					...a.layout,
 					visibility: "none"
@@ -5584,50 +5602,50 @@ const Mapbox = forwardRef((e, c) => {
 		} catch (e) {
 			console.error(`Failed to load Style JSON from ${t.url}:`, e);
 		}
-	}, [nn, rn]), cn = useCallback((e, t) => {
+	}, [an, on]), un = 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);
-	}, []), ln = useCallback((e) => {
-		let t = P.current;
+	}, []), dn = useCallback((e) => {
+		let t = F.current;
 		if (!t) return;
 		let n = new Set(e.map((e) => e.id)), r = He.current;
-		for (let e of r) n.has(e) || (cn(t, e), r.delete(e));
+		for (let e of r) n.has(e) || (un(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 = rn(n);
+				let r = on(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":
-				an(t, n);
+				sn(t, n);
 				break;
 			case "tilejson":
-				on(t, n);
+				cn(t, n);
 				break;
 			case "style":
-				sn(t, n);
+				ln(t, n);
 				break;
 			default: {
 				let e = n;
-				e.url && an(t, {
+				e.url && sn(t, {
 					...e,
 					type: "raster"
 				});
 			}
 		}
 	}, [
-		an,
-		on,
 		sn,
 		cn,
-		rn
-	]), un = useCallback((e) => {
+		ln,
+		un,
+		on
+	]), fn = useCallback((e) => {
 		let t = e;
 		for (; t;) {
 			let e = t.getAttribute?.("data-entity-id");
@@ -5635,38 +5653,38 @@ const Mapbox = forwardRef((e, c) => {
 			t = t.parentElement;
 		}
 		return null;
-	}, []), dn = useCallback((e) => {
+	}, []), pn = useCallback((e) => {
 		let t = [e.lngLat.lng, e.lngLat.lat], n = {
 			x: e.point.x,
 			y: e.point.y
-		}, r = yn.current;
+		}, r = xn.current;
 		if (r === "picker") {
 			let e = {
 				lng: t[0],
 				lat: t[1]
 			};
-			tt(e), xt(t), bn.current?.(e);
+			tt(e), St(t), Sn.current?.(e);
 			return;
 		}
 		if (r === "edit") {
-			let e = Sn.current;
+			let e = wn.current;
 			if (e === "rectangle") {
-				let e = Cn.current;
+				let e = Tn.current;
 				if (!e) ot(t);
 				else {
-					let n = H.current, r = applyEntityConfig({
+					let n = U.current, r = applyEntityConfig({
 						...n,
-						id: n?.id ?? Ct(),
+						id: n?.id ?? wt(),
 						type: "rectangle",
 						bounds: [e, t]
-					}, D);
-					Dt();
-					let i = P.current;
-					if (i && !F.current.has(r.id)) {
-						let e = new RectangleRenderer(i, r, O, k, A, M);
-						F.current.set(r.id, e);
+					}, O);
+					kt();
+					let i = F.current;
+					if (i && !I.current.has(r.id)) {
+						let e = new RectangleRenderer(i, r, k, A, j, N);
+						I.current.set(r.id, e);
 					}
-					wn.current.onRectangleAdd?.(r), ot(null), H.current = null, V.current && (V.current = !1, B(null), i && (i.getCanvas().style.cursor = ""));
+					Q.current.onRectangleAdd?.(r), ot(null), U.current = null, H.current && (H.current = !1, V(null), i && (i.getCanvas().style.cursor = ""));
 				}
 				return;
 			}
@@ -5674,20 +5692,20 @@ const Mapbox = forwardRef((e, c) => {
 				let e = st.current;
 				if (!e) st.current = { center: t };
 				else {
-					let n = At(e.center, t), r = W.current, i = applyEntityConfig({
+					let n = Mt(e.center, t), r = G.current, i = applyEntityConfig({
 						...r,
-						id: r?.id ?? Ct(),
+						id: r?.id ?? wt(),
 						type: "circle",
 						center: e.center,
 						radius: n
-					}, D);
-					Mt();
-					let a = P.current;
-					if (a && !F.current.has(i.id)) {
-						let e = new CircleRenderer(a, i, O, k, A, j);
-						F.current.set(i.id, e);
+					}, O);
+					Pt();
+					let a = F.current;
+					if (a && !I.current.has(i.id)) {
+						let e = new CircleRenderer(a, i, k, A, j, M);
+						I.current.set(i.id, e);
 					}
-					wn.current.onCircleAdd?.(i), st.current = null, W.current = null, V.current && (V.current = !1, B(null), a && (a.getCanvas().style.cursor = ""));
+					Q.current.onCircleAdd?.(i), st.current = null, G.current = null, H.current && (H.current = !1, V(null), a && (a.getCanvas().style.cursor = ""));
 				}
 				return;
 			}
@@ -5695,20 +5713,20 @@ const Mapbox = forwardRef((e, c) => {
 				let e = ct.current;
 				if (e.length >= 3) {
 					let n = e[0];
-					if (At(n, t) < 20) {
-						let t = G.current, n = applyEntityConfig({
+					if (Mt(n, t) < 20) {
+						let t = K.current, n = applyEntityConfig({
 							...t,
-							id: t?.id ?? Ct(),
+							id: t?.id ?? wt(),
 							type: "polygon",
 							coordinates: [...e]
-						}, D);
-						It();
-						let r = P.current;
-						if (r && !F.current.has(n.id)) {
-							let e = new PolygonRenderer(r, n, O, k, A, M);
-							F.current.set(n.id, e);
+						}, O);
+						Rt();
+						let r = F.current;
+						if (r && !I.current.has(n.id)) {
+							let e = new PolygonRenderer(r, n, k, A, j, N);
+							I.current.set(n.id, e);
 						}
-						wn.current.onPolygonAdd?.(n), ct.current = [], G.current = null, V.current && (V.current = !1, B(null), r && (r.getCanvas().style.cursor = ""));
+						Q.current.onPolygonAdd?.(n), ct.current = [], K.current = null, H.current && (H.current = !1, V(null), r && (r.getCanvas().style.cursor = ""));
 						return;
 					}
 				}
@@ -5719,20 +5737,20 @@ const Mapbox = forwardRef((e, c) => {
 				let e = lt.current;
 				if (!e) lt.current = { center: t };
 				else {
-					let n = At(e.center, t) * 2, r = K.current, i = applyEntityConfig({
+					let n = Mt(e.center, t) * 2, r = q.current, i = applyEntityConfig({
 						...r,
-						id: r?.id ?? Ct(),
+						id: r?.id ?? wt(),
 						type: "square",
 						center: e.center,
 						length: n
-					}, D);
-					Vt();
-					let a = P.current;
-					if (a && !F.current.has(i.id)) {
-						let e = new SquareRenderer(a, i, O, k, A, M);
-						F.current.set(i.id, e);
+					}, O);
+					Ut();
+					let a = F.current;
+					if (a && !I.current.has(i.id)) {
+						let e = new SquareRenderer(a, i, k, A, j, N);
+						I.current.set(i.id, e);
 					}
-					wn.current.onSquareAdd?.(i), lt.current = null, K.current = null, V.current && (V.current = !1, B(null), a && (a.getCanvas().style.cursor = ""));
+					Q.current.onSquareAdd?.(i), lt.current = null, q.current = null, H.current && (H.current = !1, V(null), a && (a.getCanvas().style.cursor = ""));
 				}
 				return;
 			}
@@ -5740,89 +5758,89 @@ const Mapbox = forwardRef((e, c) => {
 				ut.current = [...ut.current, t];
 				return;
 			}
-			let n = U.current;
+			let n = W.current;
 			if (n && n.src && n.width) {
 				let e = {
 					...n,
-					id: n.id ?? Ct(),
+					id: n.id ?? wt(),
 					type: "marker",
 					center: t,
 					src: n.src,
 					width: n.width
 				};
-				wn.current.onMarkerAdd?.(e), z(null), B(null), Y(), U.current = null, V.current = !1;
+				Q.current.onMarkerAdd?.(e), B(null), V(null), Y(), W.current = null, H.current = !1;
 				return;
 			}
-			let r = xn.current;
+			let r = Cn.current;
 			if (r) {
 				let e = {
-					id: Ct(),
+					id: wt(),
 					type: "marker",
 					name: r.name,
 					center: t,
 					src: r.icon,
 					width: r.size || r.width || 32
 				};
-				r.customData !== void 0 && (e.customData = r.customData), wn.current.onMarkerAdd?.(e), z(null), B(null), Y(), V.current = !1;
+				r.customData !== void 0 && (e.customData = r.customData), Q.current.onMarkerAdd?.(e), B(null), V(null), Y(), H.current = !1;
 				return;
 			}
 		}
-		let i = gn.current, a = _n.current, o = vn.current, s = un(e.originalEvent.target);
+		let i = vn.current, a = yn.current, o = bn.current, s = fn(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 ?? Pe?.(e);
-					t && mergePopupConfig(e.popup, N, t).trigger === "click" && o(s, "click", n);
+					t && mergePopupConfig(e.popup, P, t).trigger === "click" && o(s, "click", n);
 				}
 				return;
 			}
 		}
-		for (let [t, r] of F.current) {
+		for (let [t, r] of I.current) {
 			let s = r.getLabelLayerId();
-			if (s && P.current?.getLayer(s) && P.current.queryRenderedFeatures(e.point, { layers: [s] }).length > 0) {
+			if (s && F.current?.getLayer(s) && F.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 ?? Pe?.(e);
-						r && mergePopupConfig(e.popup, N, r).trigger === "click" && o(t, "click", n);
+						r && mergePopupConfig(e.popup, P, r).trigger === "click" && o(t, "click", n);
 					}
 					return;
 				}
 			}
 		}
-		for (let [e, r] of F.current) if (r.isPointInEntity(t)) {
+		for (let [e, r] of I.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 ?? Pe?.(t);
-					r && mergePopupConfig(t.popup, N, r).trigger === "click" && o(e, "click", n);
+					r && mergePopupConfig(t.popup, P, r).trigger === "click" && o(e, "click", n);
 				}
 				return;
 			}
 		}
 	}, [
-		N,
+		P,
 		Pe,
-		un
-	]), fn = useCallback((e) => {
-		let t = [e.lngLat.lng, e.lngLat.lat], n = Sn.current, r = Cn.current;
-		n === "rectangle" && r && Et(r, t);
+		fn
+	]), mn = useCallback((e) => {
+		let t = [e.lngLat.lng, e.lngLat.lat], n = wn.current, r = Tn.current;
+		n === "rectangle" && r && Ot(r, t);
 		let i = st.current;
-		n === "circle" && i && jt(i.center, t);
+		n === "circle" && i && Nt(i.center, t);
 		let a = ct.current;
-		n === "polygon" && a.length > 0 && Ft(a, t);
+		n === "polygon" && a.length > 0 && Lt(a, t);
 		let o = lt.current;
-		n === "square" && o && Bt(o.center, t);
+		n === "square" && o && Ht(o.center, t);
 		let s = ut.current;
-		n === "polyline" && s.length > 0 && Wt(s, t);
-		let c = gn.current, l = vn.current;
-		for (let [e, n] of F.current) if (n.isPointInEntity(t)) {
+		n === "polyline" && s.length > 0 && Kt(s, t);
+		let c = vn.current, l = bn.current;
+		for (let [e, n] of I.current) if (n.isPointInEntity(t)) {
 			let t = c.find((t) => t.id === e);
 			if (!t?.popup) continue;
 			let n = t.popup.content ?? Pe?.(t);
 			if (!n) continue;
-			let r = mergePopupConfig(t.popup, N, n);
+			let r = mergePopupConfig(t.popup, P, n);
 			if (r.trigger === "hover") {
 				Ke.current && clearTimeout(Ke.current), Ke.current = window.setTimeout(() => {
 					l(e, "hover");
@@ -5830,41 +5848,41 @@ const Mapbox = forwardRef((e, c) => {
 				return;
 			}
 		}
-		if (Ke.current &&= (clearTimeout(Ke.current), null), L?.openedBy === "hover") {
-			let e = F.current.get(L.entityId);
-			e && !e.isPointInEntity(t) && gt(L.entityId);
+		if (Ke.current &&= (clearTimeout(Ke.current), null), R?.openedBy === "hover") {
+			let e = I.current.get(R.entityId);
+			e && !e.isPointInEntity(t) && _t(R.entityId);
 		}
 	}, [
-		N,
+		P,
 		Pe,
-		L,
-		gt,
-		Et,
-		jt,
-		Ft,
-		Bt,
-		Wt
-	]), pn = useCallback((e) => {
-		if (e.preventDefault(), yn.current !== "edit") return;
-		if (xn.current) {
-			z(null), B(null), Y();
+		R,
+		_t,
+		Ot,
+		Nt,
+		Lt,
+		Ht,
+		Kt
+	]), hn = useCallback((e) => {
+		if (e.preventDefault(), xn.current !== "edit") return;
+		if (Cn.current) {
+			B(null), V(null), Y();
 			return;
 		}
-		let t = Sn.current;
+		let t = wn.current;
 		if (t === "rectangle") {
-			if (Cn.current) ot(null), Dt();
+			if (Tn.current) ot(null), kt();
 			else {
-				B(null);
-				let e = P.current;
+				V(null);
+				let e = F.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
 			return;
 		}
 		if (t === "circle") {
-			if (st.current) st.current = null, Mt();
+			if (st.current) st.current = null, Pt();
 			else {
-				B(null);
-				let e = P.current;
+				V(null);
+				let e = F.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
 			return;
@@ -5872,32 +5890,32 @@ const Mapbox = forwardRef((e, c) => {
 		if (t === "polygon") {
 			let e = ct.current;
 			if (e.length >= 3) {
-				let t = G.current, n = applyEntityConfig({
+				let t = K.current, n = applyEntityConfig({
 					...t,
-					id: t?.id ?? Ct(),
+					id: t?.id ?? wt(),
 					type: "polygon",
 					coordinates: [...e]
-				}, D);
-				It();
-				let r = P.current;
-				if (r && !F.current.has(n.id)) {
-					let e = new PolygonRenderer(r, n, O, k, A, M);
-					F.current.set(n.id, e);
+				}, O);
+				Rt();
+				let r = F.current;
+				if (r && !I.current.has(n.id)) {
+					let e = new PolygonRenderer(r, n, k, A, j, N);
+					I.current.set(n.id, e);
 				}
-				wn.current.onPolygonAdd?.(n), ct.current = [], G.current = null, V.current && (V.current = !1, B(null), r && (r.getCanvas().style.cursor = ""));
-			} else if (e.length > 0) ct.current = [], It();
+				Q.current.onPolygonAdd?.(n), ct.current = [], K.current = null, H.current && (H.current = !1, V(null), r && (r.getCanvas().style.cursor = ""));
+			} else if (e.length > 0) ct.current = [], Rt();
 			else {
-				B(null);
-				let e = P.current;
+				V(null);
+				let e = F.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
 			return;
 		}
 		if (t === "square") {
-			if (lt.current) lt.current = null, Vt();
+			if (lt.current) lt.current = null, Ut();
 			else {
-				B(null);
-				let e = P.current;
+				V(null);
+				let e = F.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
 			return;
@@ -5905,23 +5923,23 @@ const Mapbox = forwardRef((e, c) => {
 		if (t === "polyline") {
 			let e = ut.current;
 			if (e.length >= 2) {
-				let t = q.current, n = applyEntityConfig({
+				let t = J.current, n = applyEntityConfig({
 					...t,
-					id: t?.id ?? Ct(),
+					id: t?.id ?? wt(),
 					type: "polyline",
 					coordinates: [...e]
-				}, D);
-				Gt();
-				let r = P.current;
-				if (r && !F.current.has(n.id)) {
-					let e = new PolylineRenderer(r, n, O, k, M);
-					F.current.set(n.id, e);
+				}, O);
+				qt();
+				let r = F.current;
+				if (r && !I.current.has(n.id)) {
+					let e = new PolylineRenderer(r, n, k, A, N);
+					I.current.set(n.id, e);
 				}
-				wn.current.onPolylineAdd?.(n), ut.current = [], q.current = null, V.current && (V.current = !1, B(null), r && (r.getCanvas().style.cursor = ""));
-			} else if (e.length > 0) ut.current = [], Gt();
+				Q.current.onPolylineAdd?.(n), ut.current = [], J.current = null, H.current && (H.current = !1, V(null), r && (r.getCanvas().style.cursor = ""));
+			} else if (e.length > 0) ut.current = [], qt();
 			else {
-				B(null);
-				let e = P.current;
+				V(null);
+				let e = F.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
 			return;
@@ -5929,40 +5947,40 @@ const Mapbox = forwardRef((e, c) => {
 		let n = [e.lngLat.lng, e.lngLat.lat], r = {
 			x: e.point.x,
 			y: e.point.y
-		}, i = gn.current, a = un(e.originalEvent.target);
+		}, i = vn.current, a = fn(e.originalEvent.target);
 		if (a) {
 			let e = i.find((e) => String(e.id) === a);
 			if (e) {
-				mn(e, r, n);
+				gn(e, r, n);
 				return;
 			}
 		}
-		for (let [t, a] of F.current) {
+		for (let [t, a] of I.current) {
 			let o = a.getLabelLayerId();
-			if (o && P.current?.getLayer(o) && P.current.queryRenderedFeatures(e.point, { layers: [o] }).length > 0) {
+			if (o && F.current?.getLayer(o) && F.current.queryRenderedFeatures(e.point, { layers: [o] }).length > 0) {
 				let e = i.find((e) => e.id === t);
 				if (e) {
-					mn(e, r, n);
+					gn(e, r, n);
 					return;
 				}
 			}
 		}
-		for (let [e, t] of F.current) if (t.isPointInEntity(n)) {
+		for (let [e, t] of I.current) if (t.isPointInEntity(n)) {
 			let t = i.find((t) => t.id === e);
 			if (t) {
-				mn(t, r, n);
+				gn(t, r, n);
 				return;
 			}
 		}
 	}, [
-		un,
+		fn,
 		Y,
-		Dt,
-		Mt,
-		It,
-		Vt,
-		Gt
-	]), mn = useCallback((e, t, n) => {
+		kt,
+		Pt,
+		Rt,
+		Ut,
+		qt
+	]), gn = useCallback((e, t, n) => {
 		let r = Ve.current?.getBoundingClientRect(), i = r ? {
 			x: t.x + r.left,
 			y: t.y + r.top
@@ -5983,11 +6001,11 @@ const Mapbox = forwardRef((e, c) => {
 				}),
 				danger: !0,
 				onClick: () => {
-					wn.current.onEntityDelete?.(e);
+					Q.current.onEntityDelete?.(e);
 				}
 			}]
 		});
-	}, []), hn = useCallback(() => {
+	}, []), _n = useCallback(() => {
 		Je(null);
 	}, []);
 	useEffect(() => {
@@ -5999,11 +6017,11 @@ const Mapbox = forwardRef((e, c) => {
 			width: 100%;
 			pointer-events: none;
 			height: 100%;
-			z-index: ${N?.zIndex ?? 1e3};
+			z-index: ${P?.zIndex ?? 1e3};
 		`, document.body.appendChild(e), We.current = e, () => {
 			document.body.contains(e) && document.body.removeChild(e);
 		};
-	}, [N?.zIndex]), useEffect(() => {
+	}, [P?.zIndex]), useEffect(() => {
 		let e = document.createElement("div");
 		return e.id = `mapbox-context-menu-container-${Date.now()}`, e.style.cssText = `
 			position: fixed;
@@ -6012,61 +6030,61 @@ const Mapbox = forwardRef((e, c) => {
 			width: 100%;
 			pointer-events: none;
 			height: 100%;
-			z-index: ${(N?.zIndex ?? 1e3) + 100};
+			z-index: ${(P?.zIndex ?? 1e3) + 100};
 		`, document.body.appendChild(e), Ye.current = e, () => {
 			document.body.contains(e) && document.body.removeChild(e);
 		};
-	}, [N?.zIndex]);
-	let gn = useRef(T);
-	gn.current = T;
-	let _n = useRef(Ie);
-	_n.current = Ie;
-	let vn = useRef(ht);
-	vn.current = ht;
-	let yn = useRef(R);
-	yn.current = R;
-	let bn = useRef(b);
-	bn.current = b;
-	let xn = useRef(rt);
-	xn.current = rt;
-	let Sn = useRef(it);
-	Sn.current = it;
-	let Cn = useRef(at);
-	Cn.current = at;
-	let wn = useRef(v);
-	wn.current = v;
-	let Tn = useRef(D);
-	Tn.current = D, useEffect(() => {
+	}, [P?.zIndex]);
+	let vn = useRef(E);
+	vn.current = E;
+	let yn = useRef(Ie);
+	yn.current = Ie;
+	let bn = useRef(gt);
+	bn.current = gt;
+	let xn = useRef(z);
+	xn.current = z;
+	let Sn = useRef(b);
+	Sn.current = b;
+	let Cn = useRef(rt);
+	Cn.current = rt;
+	let wn = useRef(it);
+	wn.current = it;
+	let Tn = useRef(at);
+	Tn.current = at;
+	let Q = useRef(v);
+	Q.current = v;
+	let En = useRef(O);
+	En.current = O, useEffect(() => {
 		let e = (e) => {
-			if (e.key === "Escape" && R === "edit") {
-				if (rt && (z(null), B(null), Y()), it === "rectangle") if (at) ot(null), Dt();
+			if (e.key === "Escape" && z === "edit") {
+				if (rt && (B(null), V(null), Y()), it === "rectangle") if (at) ot(null), kt();
 				else {
-					B(null);
-					let e = P.current;
+					V(null);
+					let e = F.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (it === "circle") if (st.current) st.current = null, Mt();
+				if (it === "circle") if (st.current) st.current = null, Pt();
 				else {
-					B(null);
-					let e = P.current;
+					V(null);
+					let e = F.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (it === "polygon") if (ct.current.length > 0) ct.current = [], It();
+				if (it === "polygon") if (ct.current.length > 0) ct.current = [], Rt();
 				else {
-					B(null);
-					let e = P.current;
+					V(null);
+					let e = F.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (it === "square") if (lt.current) lt.current = null, Vt();
+				if (it === "square") if (lt.current) lt.current = null, Ut();
 				else {
-					B(null);
-					let e = P.current;
+					V(null);
+					let e = F.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (it === "polyline") if (ut.current.length > 0) ut.current = [], Gt();
+				if (it === "polyline") if (ut.current.length > 0) ut.current = [], qt();
 				else {
-					B(null);
-					let e = P.current;
+					V(null);
+					let e = F.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
 			}
@@ -6075,23 +6093,23 @@ const Mapbox = forwardRef((e, c) => {
 			document.removeEventListener("keydown", e);
 		};
 	}, [
-		R,
+		z,
 		rt,
 		it,
 		at,
 		Y,
-		Dt,
-		Mt,
-		It,
-		Vt,
-		Gt
+		kt,
+		Pt,
+		Rt,
+		Ut,
+		qt
 	]), useEffect(() => {
-		let e = P.current;
-		if (!e || !L) return;
-		let t = L.entityId, n = L.config, r = () => {
-			let r = gn.current.find((e) => e.id === t);
+		let e = F.current;
+		if (!e || !R) return;
+		let t = R.entityId, n = R.config, r = () => {
+			let r = vn.current.find((e) => e.id === t);
 			if (!r) {
-				_t();
+				vt();
 				return;
 			}
 			let { position: i } = calculatePopupPosition(r, n, e, void 0, Ge.current);
@@ -6102,13 +6120,13 @@ const Mapbox = forwardRef((e, c) => {
 		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);
 		};
-	}, [L?.entityId, _t]), useEffect(() => {
-		let e = P.current, t = Ve.current;
+	}, [R?.entityId, vt]), useEffect(() => {
+		let e = F.current, t = Ve.current;
 		if (!e || !qe || !t) return;
 		let n = qe.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) {
-				hn();
+				_n();
 				return;
 			}
 			let o = t.getBoundingClientRect(), s = r.x + o.left, c = r.y + o.top;
@@ -6117,7 +6135,7 @@ const Mapbox = forwardRef((e, c) => {
 		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);
 		};
-	}, [qe?.lngLat, hn]), useEffect(() => {
+	}, [qe?.lngLat, _n]), useEffect(() => {
 		if (!Ve.current) return;
 		let e = {
 			version: 8,
@@ -6151,98 +6169,98 @@ const Mapbox = forwardRef((e, c) => {
 				return { url: e };
 			}
 		});
-		return P.current = _, _.on("load", () => {
+		return F.current = _, _.on("load", () => {
 			if (!_.getStyle().glyphs) {
 				let e = _.style, t = "/gis-fonts/{fontstack}/{range}.pbf";
 				e.glyphs = t, e.stylesheet && (e.stylesheet.glyphs = t);
 			}
-			I.current.clear(), T.forEach((e) => {
-				I.current.set(e.id, e);
-			}), ln(S), en(), Tt(), Ot(), Pt(), Rt(), Ut(), Qe(_), Fe?.(_);
-		}), _.on("click", dn), _.on("mousemove", fn), _.on("contextmenu", pn), () => {
-			_.off("click", dn), _.off("mousemove", fn), _.off("contextmenu", pn), tn(), St(), Y(), Z(), Q(), _.remove(), P.current = null;
+			L.current.clear(), E.forEach((e) => {
+				L.current.set(e.id, e);
+			}), dn(S), nn(), Dt(), At(), It(), Bt(), Gt(), Qe(_), Fe?.(_);
+		}), _.on("click", pn), _.on("mousemove", mn), _.on("contextmenu", hn), () => {
+			_.off("click", pn), _.off("mousemove", mn), _.off("contextmenu", hn), rn(), Ct(), Y(), X(), Z(), _.remove(), F.current = null;
 		};
 	}, []), useEffect(() => {
-		if (P.current) {
-			if (!P.current.isStyleLoaded()) {
-				P.current.once("load", () => {
-					I.current.clear(), T.forEach((e) => {
-						I.current.set(e.id, e);
-					}), en();
+		if (F.current) {
+			if (!F.current.isStyleLoaded()) {
+				F.current.once("load", () => {
+					L.current.clear(), E.forEach((e) => {
+						L.current.set(e.id, e);
+					}), nn();
 				});
 				return;
 			}
-			I.current.clear(), T.forEach((e) => {
-				I.current.set(e.id, e);
-			}), en();
+			L.current.clear(), E.forEach((e) => {
+				L.current.set(e.id, e);
+			}), nn();
 		}
-	}, [T, en]), useEffect(() => {
-		!P.current || !P.current.isStyleLoaded() || (tn(), en());
+	}, [E, nn]), useEffect(() => {
+		!F.current || !F.current.isStyleLoaded() || (rn(), nn());
 	}, [
-		O,
 		k,
 		A,
 		j,
 		M,
-		tn,
-		en
+		N,
+		rn,
+		nn
 	]), useEffect(() => {
-		if (P.current) {
-			if (!P.current.isStyleLoaded()) {
-				P.current.once("load", () => {
-					ln(S);
+		if (F.current) {
+			if (!F.current.isStyleLoaded()) {
+				F.current.once("load", () => {
+					dn(S);
 				});
 				return;
 			}
-			ln(S);
+			dn(S);
 		}
-	}, [S, ln]);
-	let En = useRef(void 0), Dn = useRef(!0), On = useRef(S);
-	On.current = S;
-	let kn = useRef(ln);
-	kn.current = ln;
-	let An = useRef(tn);
-	An.current = tn;
-	let jn = useRef(en);
-	jn.current = en;
-	let Mn = useRef(Tt);
-	Mn.current = Tt;
-	let Nn = useRef(Ot);
-	Nn.current = Ot;
-	let Pn = useRef(Pt);
-	Pn.current = Pt;
-	let Fn = useRef(Rt);
-	Fn.current = Rt;
-	let In = useRef(Ut);
-	In.current = Ut, useEffect(() => {
-		let e = P.current;
+	}, [S, dn]);
+	let Dn = useRef(void 0), On = useRef(!0), kn = useRef(S);
+	kn.current = S;
+	let An = useRef(dn);
+	An.current = dn;
+	let jn = useRef(rn);
+	jn.current = rn;
+	let Mn = useRef(nn);
+	Mn.current = nn;
+	let Nn = useRef(Dt);
+	Nn.current = Dt;
+	let Pn = useRef(At);
+	Pn.current = At;
+	let Fn = useRef(It);
+	Fn.current = It;
+	let In = useRef(Bt);
+	In.current = Bt;
+	let Ln = useRef(Gt);
+	Ln.current = Gt, useEffect(() => {
+		let e = F.current;
 		if (!e) return;
 		let t = h || {
 			version: 8,
 			sources: {},
 			layers: []
 		};
-		if (Dn.current) {
-			Dn.current = !1, En.current = h;
+		if (On.current) {
+			On.current = !1, Dn.current = h;
 			return;
 		}
-		En.current !== h && (En.current = h, e.setStyle(t), e.once("style.load", () => {
+		Dn.current !== h && (Dn.current = h, 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);
 			}
-			He.current.clear(), kn.current(On.current), An.current(), jn.current(), Mn.current(), Nn.current(), Pn.current(), Fn.current(), In.current();
+			He.current.clear(), An.current(kn.current), jn.current(), Mn.current(), Nn.current(), Pn.current(), Fn.current(), In.current(), Ln.current();
 		}));
 	}, [h]), useEffect(() => {
-		let e = new Set(E.map(String));
-		for (let [t, n] of F.current) n.setSelected(e.has(String(t)));
-	}, [E]);
-	let Ln = useRef({});
+		let e = new Set(D.map(String));
+		for (let [t, n] of I.current) n.setSelected(e.has(String(t)));
+	}, [D]);
+	let Rn = useRef({});
 	useEffect(() => {
-		let e = P.current;
+		let e = F.current;
 		if (!e) return;
-		let t = Ln.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 || (Ln.current = {
+		let t = Rn.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 || (Rn.current = {
 			center: l,
 			zoom: u,
 			pitch: d,
@@ -6259,13 +6277,13 @@ const Mapbox = forwardRef((e, c) => {
 		d,
 		f
 	]);
-	let Rn = (() => be === !1 ? null : be === !0 ? { enabled: !0 } : be)(), zn = (() => Se === !1 ? null : Se === !0 ? { enabled: !0 } : Se)(), Bn = (() => Ee === !1 ? null : Ee === !0 ? { enabled: !0 } : Ee)(), $ = (() => {
+	let zn = (() => xe === !1 ? null : xe === !0 ? { enabled: !0 } : xe)(), Bn = (() => Te === !1 ? null : Te === !0 ? { enabled: !0 } : Te)(), Vn = (() => Ee === !1 ? null : Ee === !0 ? { enabled: !0 } : Ee)(), $ = (() => {
 		if (De === !1) return null;
 		let e, t;
 		if (S && S.length > 0) {
 			let n = S.find((e) => e.hasRoadNetwork === !0) || S[0];
 			if (n.type === "style") {
-				let t = P.current?.getStyle();
+				let t = F.current?.getStyle();
 				if (t?.sources) {
 					let r = `base-layer-source-${n.id}-`, i = Object.keys(t.sources).find((e) => e.startsWith(r));
 					i && (e = i);
@@ -6282,10 +6300,10 @@ const Mapbox = forwardRef((e, c) => {
 			source: De.source || e,
 			sourceLayer: De.sourceLayer || t
 		};
-	})(), Vn = (() => Oe ? Oe === !0 ? { enabled: !0 } : Oe : null)(), Hn = (() => Ae ? Ae === !0 ? { enabled: !0 } : Ae : null)(), Un = useMemo(() => {
+	})(), Hn = (() => ke ? ke === !0 ? { enabled: !0 } : ke : null)(), Un = (() => Ae ? Ae === !0 ? { enabled: !0 } : Ae : null)(), Wn = useMemo(() => {
 		let e = [];
 		for (let t of S) if (t.applyRasterPaint) if (t.type === "style") {
-			let n = P.current;
+			let n = F.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);
@@ -6294,14 +6312,14 @@ const Mapbox = forwardRef((e, c) => {
 		return e;
 	}, [S, Ze]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: `comp-mapbox ${R === "picker" ? "comp-mapbox--picker-mode" : ""} ${ze}`,
+		className: `comp-mapbox ${z === "picker" ? "comp-mapbox--picker-mode" : ""} ${ze}`,
 		style: Be,
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				ref: Ve,
 				className: "comp-mapbox__map"
 			}),
-			R === "picker" && y.showCrosshair === !0 && /* @__PURE__ */ jsxs("div", {
+			z === "picker" && y.showCrosshair === !0 && /* @__PURE__ */ jsxs("div", {
 				className: "comp-mapbox__crosshair",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "comp-mapbox__crosshair-h",
@@ -6311,14 +6329,14 @@ const Mapbox = forwardRef((e, c) => {
 					style: y.crosshairColor ? { backgroundColor: y.crosshairColor } : void 0
 				})]
 			}),
-			R === "edit" && v.showEditTools !== !1 && (v.markerTemplates && v.markerTemplates.length > 0 || v.showRectangleTool || v.showCircleTool || v.showPolygonTool || v.showSquareTool || v.showPolylineTool) || $ && $.enabled !== !1 ? /* @__PURE__ */ jsxs("div", {
+			z === "edit" && v.showEditTools !== !1 && (v.markerTemplates && v.markerTemplates.length > 0 || v.showRectangleTool || v.showCircleTool || v.showPolygonTool || v.showSquareTool || v.showPolylineTool) || $ && $.enabled !== !1 ? /* @__PURE__ */ jsxs("div", {
 				className: "comp-mapbox__edit-controls",
-				children: [R === "edit" && v.showEditTools !== !1 && (v.markerTemplates && v.markerTemplates.length > 0 || v.showRectangleTool || v.showCircleTool || v.showPolygonTool || v.showSquareTool || v.showPolylineTool) && /* @__PURE__ */ jsx(EditControl, {
+				children: [z === "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: rt,
-					onTemplateSelect: Kt,
+					onTemplateSelect: Jt,
 					drawMode: it,
-					onDrawModeChange: qt,
+					onDrawModeChange: Yt,
 					showRectangleTool: v.showRectangleTool,
 					showCircleTool: v.showCircleTool,
 					showPolygonTool: v.showPolygonTool,
@@ -6335,57 +6353,57 @@ const Mapbox = forwardRef((e, c) => {
 					style: $.style
 				})]
 			}) : null,
-			(Rn?.enabled !== !1 || zn?.enabled !== !1 || Bn?.enabled !== !1 || Vn && Vn.enabled !== !1 || Hn && Hn.enabled !== !1) && /* @__PURE__ */ jsxs("div", {
+			(zn?.enabled !== !1 || Bn?.enabled !== !1 || Vn?.enabled !== !1 || Hn && Hn.enabled !== !1 || Un && Un.enabled !== !1) && /* @__PURE__ */ jsxs("div", {
 				className: "comp-mapbox__controls",
 				children: [
-					Rn && Rn.enabled !== !1 && /* @__PURE__ */ jsx(CoordinateDisplay, {
-						map: Ze,
-						precision: Rn.precision,
-						className: Rn.className,
-						style: Rn.style
-					}),
-					zn && zn.enabled !== !1 && /* @__PURE__ */ jsx(ScaleControl, {
+					zn && zn.enabled !== !1 && /* @__PURE__ */ jsx(CoordinateDisplay, {
 						map: Ze,
-						maxWidth: zn.maxWidth,
-						unit: zn.unit,
+						precision: zn.precision,
 						className: zn.className,
 						style: zn.style
 					}),
-					Vn && Vn.enabled !== !1 && /* @__PURE__ */ jsx(MeasureControl, {
+					Bn && Bn.enabled !== !1 && /* @__PURE__ */ jsx(ScaleControl, {
 						map: Ze,
-						entityConfig: D,
-						className: Vn.className,
-						style: Vn.style
+						maxWidth: Bn.maxWidth,
+						unit: Bn.unit,
+						className: Bn.className,
+						style: Bn.style
 					}),
-					Hn && Hn.enabled !== !1 && /* @__PURE__ */ jsx(RasterPaintControl, {
+					Hn && Hn.enabled !== !1 && /* @__PURE__ */ jsx(MeasureControl, {
 						map: Ze,
-						value: C,
-						onChange: je,
-						rasterPaintLayerIds: Un,
+						entityConfig: O,
 						className: Hn.className,
 						style: Hn.style
 					}),
-					Bn && Bn.enabled !== !1 && /* @__PURE__ */ jsx(ResetViewControl, {
+					Un && Un.enabled !== !1 && /* @__PURE__ */ jsx(RasterPaintControl, {
+						map: Ze,
+						value: T,
+						onChange: Me,
+						rasterPaintLayerIds: Wn,
+						className: Un.className,
+						style: Un.style
+					}),
+					Vn && Vn.enabled !== !1 && /* @__PURE__ */ jsx(ResetViewControl, {
 						map: Ze,
 						initialCenter: l,
 						initialZoom: u,
 						initialPitch: d,
 						initialBearing: f,
-						duration: Bn.duration,
-						className: Bn.className,
-						style: Bn.style
+						duration: Vn.duration,
+						className: Vn.className,
+						style: Vn.style
 					})
 				]
 			}),
-			L && We.current && /* @__PURE__ */ jsx(EntityPopup, {
-				popupState: L,
-				onClose: () => gt(L.entityId),
+			R && We.current && /* @__PURE__ */ jsx(EntityPopup, {
+				popupState: R,
+				onClose: () => _t(R.entityId),
 				portalContainer: We.current,
 				popupRef: Ge
 			}),
 			qe && Ye.current && /* @__PURE__ */ jsx(ContextMenu, {
 				menuState: qe,
-				onClose: hn,
+				onClose: _n,
 				portalContainer: Ye.current,
 				menuRef: Xe
 			})