bbl-mapbox-react 0.0.30 → 0.0.31

package/dist/index.mjs

@@ -6041,37 +6041,49 @@ const Mapbox = forwardRef((e, c) => {
 			zoom: t ?? r.getZoom(),
 			...n
 		});
-	}, []), jt = useCallback((e, t, n) => {
+	}, []), jt = useCallback((e) => {
+		if (e.length === 0) return null;
+		let t = Infinity, n = -Infinity, r = Infinity, i = -Infinity, a = !1;
+		for (let o of e) {
+			let e = R.current.get(o);
+			if (e) {
+				let [[o, s], [c, l]] = e.getBounds();
+				t = Math.min(t, o), n = Math.max(n, c), r = Math.min(r, s), i = Math.max(i, l), a = !0;
+			}
+		}
+		return a ? [(t + n) / 2, (r + i) / 2] : null;
+	}, []), Mt = useCallback((e, t, n) => {
 		let r = L.current;
 		if (!r || e.length === 0) return;
-		let i = [];
+		let i = jt(e);
+		if (!i) return;
+		let a = [];
 		for (let t of e) {
 			let e = R.current.get(t);
-			e && i.push(e.getBounds());
+			e && a.push(e.getBounds());
 		}
-		if (i.length === 0) return;
-		let a = Infinity, o = -Infinity, s = Infinity, c = -Infinity;
-		for (let [[e, t], [n, r]] of i) a = Math.min(a, e), o = Math.max(o, n), s = Math.min(s, t), c = Math.max(c, r);
-		let l = (a + o) / 2, u = (s + c) / 2, d = a === o && s === c;
-		if (i.length === 1 || d) {
+		let o = Infinity, s = -Infinity, c = Infinity, l = -Infinity;
+		for (let [[e, t], [n, r]] of a) o = Math.min(o, e), s = Math.max(s, n), c = Math.min(c, t), l = Math.max(l, r);
+		let u = o === s && c === l;
+		if (a.length === 1 || u) {
 			let e = {
-				center: [l, u],
+				center: i,
 				zoom: t ?? r.getZoom()
 			};
 			n?.duration !== void 0 && (e.duration = n.duration), n?.pitch !== void 0 && (e.pitch = n.pitch), n?.bearing !== void 0 && (e.bearing = n.bearing), n?.essential !== void 0 && (e.essential = n.essential), r.flyTo(e);
 			return;
 		}
-		let f = [[a, s], [o, c]], p = {
+		let d = [[o, c], [s, l]], f = {
 			padding: n?.padding ?? 50,
 			duration: n?.duration ?? 1e3,
 			bearing: n?.bearing ?? r.getBearing(),
 			pitch: n?.pitch ?? r.getPitch()
 		};
-		t !== void 0 && (p.maxZoom = t), n?.essential !== void 0 && (p.essential = n.essential), r.fitBounds(f, p);
-	}, []), Mt = useRef(null), Nt = useRef("display"), [Pt, Ft] = useState({}), J = useMemo(() => ({
+		t !== void 0 && (f.maxZoom = t), n?.essential !== void 0 && (f.essential = n.essential), r.fitBounds(d, f);
+	}, [jt]), Nt = useRef(null), Pt = useRef("display"), [Ft, It] = useState({}), J = useMemo(() => ({
 		...y,
-		...Pt
-	}), [y, Pt]), It = useCallback((e) => {
+		...Ft
+	}), [y, Ft]), Lt = useCallback((e) => {
 		let t = L.current;
 		if (!t || !t.getContainer()) return;
 		let { showMarker: n = !0, markerColor: r = "#3388ff", name: i, nameConfig: a } = J;
@@ -6103,9 +6115,9 @@ const Mapbox = forwardRef((e, c) => {
 				anchor: "bottom"
 			}).setLngLat(e).addTo(t);
 		}
-	}, [J, O]), Lt = useCallback(() => {
+	}, [J, O]), Rt = useCallback(() => {
 		it.current &&= (it.current.remove(), null);
-	}, []), Rt = useCallback(() => `marker-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`, []), zt = useCallback((e) => {
+	}, []), zt = useCallback(() => `marker-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`, []), Bt = useCallback((e) => {
 		let t = L.current;
 		if (Ve.current) if (_t.current &&= (_t.current.remove(), null), e && t) {
 			t.getCanvas().style.cursor = "none";
@@ -6129,7 +6141,7 @@ const Mapbox = forwardRef((e, c) => {
 		}
 		let e = L.current;
 		e && (e.getCanvas().style.cursor = "");
-	}, []), Bt = useCallback((e, t, n) => {
+	}, []), Vt = useCallback((e, t, n) => {
 		if (!e.getSource(t)) {
 			if (!e.getStyle().glyphs) {
 				let t = e.style, n = "/gis-fonts/{fontstack}/{range}.pbf";
@@ -6165,7 +6177,7 @@ const Mapbox = forwardRef((e, c) => {
 				}
 			});
 		}
-	}, []), Vt = useCallback(() => {
+	}, []), Ht = useCallback(() => {
 		let e = L.current;
 		e && (e.getSource("rect-preview-source") || (e.addSource("rect-preview-source", {
 			type: "geojson",
@@ -6190,8 +6202,8 @@ const Mapbox = forwardRef((e, c) => {
 				"line-width": 2,
 				"line-dasharray": [4, 4]
 			}
-		}), Bt(e, "rect-preview-measure-source", "rect-preview-measure-label")));
-	}, [Bt]), Ht = useCallback((e, t) => {
+		}), Vt(e, "rect-preview-measure-source", "rect-preview-measure-label")));
+	}, [Vt]), Ut = useCallback((e, t) => {
 		let n = L.current;
 		if (!n) return;
 		let r = n.getSource("rect-preview-source");
@@ -6215,7 +6227,7 @@ const Mapbox = forwardRef((e, c) => {
 		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 = Vn.current, t = [], n = c[0], r = c[1], i = c[2];
+			let e = Hn.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({
@@ -6252,7 +6264,7 @@ const Mapbox = forwardRef((e, c) => {
 				features: t
 			});
 		}
-	}, []), Ut = useCallback(() => {
+	}, []), Wt = useCallback(() => {
 		let e = L.current;
 		if (!e) return;
 		let t = e.getSource("rect-preview-source");
@@ -6266,8 +6278,8 @@ const Mapbox = forwardRef((e, c) => {
 			features: []
 		});
 	}, []), X = useCallback(() => {
-		ct(null), Ut();
-	}, [Ut]), Wt = useCallback(() => {
+		ct(null), Wt();
+	}, [Wt]), Gt = useCallback(() => {
 		let e = L.current;
 		e && (e.getSource("circle-preview-source") || (e.addSource("circle-preview-source", {
 			type: "geojson",
@@ -6292,7 +6304,7 @@ const Mapbox = forwardRef((e, c) => {
 				"line-width": 2,
 				"line-dasharray": [4, 4]
 			}
-		}), Bt(e, "circle-preview-measure-source", "circle-preview-measure-label"), e.getSource("circle-preview-radius-source") || (e.addSource("circle-preview-radius-source", {
+		}), Vt(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",
@@ -6309,22 +6321,22 @@ const Mapbox = forwardRef((e, c) => {
 				"line-dasharray": [4, 4]
 			}
 		}))));
-	}, [Bt]), Gt = useCallback((e, t, n = 64) => {
+	}, [Vt]), Kt = 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;
-	}, []), Kt = useCallback((e, t) => {
+	}, []), qt = 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)));
-	}, []), qt = useCallback((e, t) => {
+	}, []), Jt = useCallback((e, t) => {
 		let n = L.current;
 		if (!n) return;
 		let r = n.getSource("circle-preview-source");
 		if (!r) return;
-		let i = Kt(e, t), a = Gt(e, i);
+		let i = qt(e, t), a = Kt(e, i);
 		r.setData({
 			type: "Feature",
 			geometry: {
@@ -6335,7 +6347,7 @@ const Mapbox = forwardRef((e, c) => {
 		});
 		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 = Vn.current, f = [], p = [];
+		let d = Hn.current, f = [], p = [];
 		if (d?.showArea) {
 			let t = Math.PI * i * i;
 			f.push({
@@ -6375,7 +6387,7 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: p
 		});
-	}, [Kt, Gt]), Jt = useCallback(() => {
+	}, [qt, Kt]), Yt = useCallback(() => {
 		let e = L.current;
 		if (!e) return;
 		let t = e.getSource("circle-preview-source");
@@ -6393,9 +6405,9 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), Yt = useCallback(() => {
-		dt.current = null, Jt();
-	}, [Jt]), Xt = useCallback(() => {
+	}, []), Xt = useCallback(() => {
+		dt.current = null, Yt();
+	}, [Yt]), Zt = useCallback(() => {
 		let e = L.current;
 		e && (e.getSource("polygon-preview-source") || (e.addSource("polygon-preview-source", {
 			type: "geojson",
@@ -6436,8 +6448,8 @@ const Mapbox = forwardRef((e, c) => {
 				"circle-stroke-color": "#ffffff",
 				"circle-stroke-width": 2
 			}
-		}), Bt(e, "polygon-preview-measure-source", "polygon-preview-measure-label")));
-	}, [Bt]), Zt = useCallback((e, t) => {
+		}), Vt(e, "polygon-preview-measure-source", "polygon-preview-measure-label")));
+	}, [Vt]), Qt = useCallback((e, t) => {
 		let n = L.current;
 		if (!n) return;
 		let r = n.getSource("polygon-preview-source"), i = n.getSource("polygon-vertices-source");
@@ -6479,7 +6491,7 @@ const Mapbox = forwardRef((e, c) => {
 		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 = Vn.current, t = [];
+			let e = Hn.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];
@@ -6521,7 +6533,7 @@ const Mapbox = forwardRef((e, c) => {
 				features: t
 			});
 		}
-	}, []), Qt = useCallback(() => {
+	}, []), $t = useCallback(() => {
 		let e = L.current;
 		if (!e) return;
 		let t = e.getSource("polygon-preview-source");
@@ -6539,9 +6551,9 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), $t = useCallback(() => {
-		ft.current = [], Qt();
-	}, [Qt]), en = useCallback(() => {
+	}, []), en = useCallback(() => {
+		ft.current = [], $t();
+	}, [$t]), tn = useCallback(() => {
 		let e = L.current;
 		e && (e.getSource("square-preview-source") || (e.addSource("square-preview-source", {
 			type: "geojson",
@@ -6566,8 +6578,8 @@ const Mapbox = forwardRef((e, c) => {
 				"line-width": 2,
 				"line-dasharray": [4, 4]
 			}
-		}), Bt(e, "square-preview-measure-source", "square-preview-measure-label")));
-	}, [Bt]), tn = useCallback((e, t) => {
+		}), Vt(e, "square-preview-measure-source", "square-preview-measure-label")));
+	}, [Vt]), nn = 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],
@@ -6576,12 +6588,12 @@ const Mapbox = forwardRef((e, c) => {
 			[n - s, r - o],
 			[n - s, r + o]
 		];
-	}, []), nn = useCallback((e, t) => {
+	}, []), rn = useCallback((e, t) => {
 		let n = L.current;
 		if (!n) return;
 		let r = n.getSource("square-preview-source");
 		if (!r) return;
-		let i = Kt(e, t) * 2, a = tn(e, i);
+		let i = qt(e, t) * 2, a = nn(e, i);
 		r.setData({
 			type: "Feature",
 			geometry: {
@@ -6594,7 +6606,7 @@ const Mapbox = forwardRef((e, c) => {
 		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 = Vn.current, n = [];
+			let t = Hn.current, n = [];
 			if (t?.showArea && n.push({
 				type: "Feature",
 				geometry: {
@@ -6618,7 +6630,7 @@ const Mapbox = forwardRef((e, c) => {
 				features: n
 			});
 		}
-	}, [Kt, tn]), rn = useCallback(() => {
+	}, [qt, nn]), an = useCallback(() => {
 		let e = L.current;
 		if (!e) return;
 		let t = e.getSource("square-preview-source");
@@ -6631,9 +6643,9 @@ const Mapbox = forwardRef((e, c) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), an = useCallback(() => {
-		mt.current = null, rn();
-	}, [rn]), on = useCallback(() => {
+	}, []), on = useCallback(() => {
+		mt.current = null, an();
+	}, [an]), sn = useCallback(() => {
 		let e = L.current;
 		e && (e.getSource("polyline-preview-source") || (e.addSource("polyline-preview-source", {
 			type: "geojson",
@@ -6666,8 +6678,8 @@ const Mapbox = forwardRef((e, c) => {
 				"circle-stroke-color": "#ffffff",
 				"circle-stroke-width": 2
 			}
-		}), Bt(e, "polyline-preview-measure-source", "polyline-preview-measure-label")));
-	}, [Bt]), sn = useCallback((e, t) => {
+		}), Vt(e, "polyline-preview-measure-source", "polyline-preview-measure-label")));
+	}, [Vt]), cn = useCallback((e, t) => {
 		let n = L.current;
 		if (!n) return;
 		let r = n.getSource("polyline-preview-source"), i = n.getSource("polyline-vertices-source");
@@ -6698,7 +6710,7 @@ const Mapbox = forwardRef((e, c) => {
 		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 = Vn.current, t = [];
+			let e = Hn.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({
@@ -6715,7 +6727,7 @@ const Mapbox = forwardRef((e, c) => {
 				features: t
 			});
 		}
-	}, []), cn = useCallback(() => {
+	}, []), ln = useCallback(() => {
 		let e = L.current;
 		if (!e) return;
 		let t = e.getSource("polyline-preview-source");
@@ -6734,81 +6746,81 @@ const Mapbox = forwardRef((e, c) => {
 			features: []
 		});
 	}, []), Z = useCallback(() => {
-		gt.current = [], cn();
-	}, [cn]), ln = useCallback((e) => {
-		H(e), zt(e), e ? (U("marker"), X(), Yt(), $t(), an(), Z()) : U(null);
+		gt.current = [], ln();
+	}, [ln]), un = useCallback((e) => {
+		H(e), Bt(e), e ? (U("marker"), X(), Xt(), en(), on(), Z()) : U(null);
 	}, [
-		zt,
+		Bt,
 		X,
-		Yt,
-		$t,
-		an,
+		Xt,
+		en,
+		on,
 		Z
-	]), un = useCallback((e) => {
+	]), dn = useCallback((e) => {
 		if (U(e), e === "rectangle") {
-			H(null), Y(), Yt(), $t(), an(), Z();
+			H(null), Y(), Xt(), en(), on(), Z();
 			let e = L.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "circle") {
-			H(null), Y(), X(), $t(), an(), Z();
+			H(null), Y(), X(), en(), on(), Z();
 			let e = L.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "polygon") {
-			H(null), Y(), X(), Yt(), an(), Z();
+			H(null), Y(), X(), Xt(), on(), Z();
 			let e = L.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "square") {
-			H(null), Y(), X(), Yt(), $t(), Z();
+			H(null), Y(), X(), Xt(), en(), Z();
 			let e = L.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "polyline") {
-			H(null), Y(), X(), Yt(), $t(), an();
+			H(null), Y(), X(), Xt(), en(), on();
 			let e = L.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
-		} else e === "marker" ? (X(), Yt(), $t(), an(), Z()) : (H(null), Y(), X(), Yt(), $t(), an(), Z());
+		} else e === "marker" ? (X(), Xt(), en(), on(), Z()) : (H(null), Y(), X(), Xt(), en(), on(), Z());
 	}, [
 		Y,
 		X,
-		Yt,
-		$t,
-		an,
+		Xt,
+		en,
+		on,
 		Z
-	]), dn = useCallback((e) => {
+	]), fn = useCallback((e) => {
 		if (e !== "picker") {
 			let e = J.value && isFinite(J.value.lng) && isFinite(J.value.lat), t = J.showMarker !== !1;
-			(!e || !t) && Lt(), rt(null);
+			(!e || !t) && Rt(), rt(null);
 		}
 		e !== "edit" && (H(null), U(null), X(), Z(), Y()), tt(e);
 	}, [
-		Lt,
+		Rt,
 		Y,
 		X,
 		Z
-	]), fn = useCallback(() => V, [V]), pn = useCallback(() => nt, [nt]), mn = useCallback(() => {
-		Lt(), rt(null);
-	}, [Lt]), hn = useCallback((e = {}) => (Mt.current &&= (Mt.current(null), null), new Promise((t) => {
-		Mt.current = t, Nt.current = In.current, Ft(e), dn("picker");
-	})), [dn]);
+	]), pn = useCallback(() => V, [V]), mn = useCallback(() => nt, [nt]), hn = useCallback(() => {
+		Rt(), rt(null);
+	}, [Rt]), gn = useCallback((e = {}) => (Nt.current &&= (Nt.current(null), null), new Promise((t) => {
+		Nt.current = t, Pt.current = Ln.current, It(e), fn("picker");
+	})), [fn]);
 	useEffect(() => {
 		if (!$e) return;
 		let e = J.value;
 		if (e && isFinite(e.lng) && isFinite(e.lat)) {
 			let t = [e.lng, e.lat];
-			rt(e), It(t);
+			rt(e), Lt(t);
 		}
 	}, [
 		J.value,
-		It,
+		Lt,
 		$e
 	]);
-	let gn = (e) => "mode" in e, _n = useCallback((e, t = !0) => {
-		if (tt("edit"), t && (Lt(), rt(null)), W.current = !0, gn(e)) {
-			if (e.mode === "marker") e.markerStyle ? (ut.current = e.markerStyle, lt.current = null, G.current = null, K.current = null, pt.current = null, ht.current = null, H(null), U("marker"), e.markerStyle.src && e.markerStyle.width ? zt({
+	let _n = (e) => "mode" in e, vn = useCallback((e, t = !0) => {
+		if (tt("edit"), t && (Rt(), rt(null)), W.current = !0, _n(e)) {
+			if (e.mode === "marker") e.markerStyle ? (ut.current = e.markerStyle, lt.current = null, G.current = null, K.current = null, pt.current = null, ht.current = null, H(null), U("marker"), e.markerStyle.src && e.markerStyle.width ? Bt({
 				id: "custom",
 				name: e.markerStyle.name || "Marker",
 				icon: e.markerStyle.src,
 				width: e.markerStyle.width
-			}) : Y()) : e.template && (ut.current = null, lt.current = null, G.current = null, K.current = null, pt.current = null, ht.current = null, H(e.template), U("marker"), zt(e.template));
+			}) : Y()) : e.template && (ut.current = null, lt.current = null, G.current = null, K.current = null, pt.current = null, ht.current = null, H(e.template), U("marker"), Bt(e.template));
 			else if (e.mode === "rectangle") {
 				lt.current = e.rectangleStyle || null, ut.current = null, G.current = null, K.current = null, pt.current = null, ht.current = null, H(null), U("rectangle"), Y();
 				let t = L.current;
@@ -6830,10 +6842,10 @@ const Mapbox = forwardRef((e, c) => {
 				let t = L.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			}
-		} else H(e), U("marker"), zt(e), lt.current = null, ut.current = null, G.current = null, K.current = null, pt.current = null, ht.current = null;
+		} else H(e), U("marker"), Bt(e), lt.current = null, ut.current = null, G.current = null, K.current = null, pt.current = null, ht.current = null;
 	}, [
-		Lt,
-		zt,
+		Rt,
+		Bt,
 		Y
 	]);
 	useImperativeHandle(c, () => ({
@@ -6847,12 +6859,13 @@ const Mapbox = forwardRef((e, c) => {
 		isPopupOpen: kt,
 		toggleUnitTrajectory: Tt,
 		flyTo: At,
-		flyToEntities: jt,
-		getMode: fn,
-		setMode: dn,
-		getPickedLocation: pn,
-		clearPickedLocation: mn,
-		startDrawing: _n,
+		getCenterByIds: jt,
+		flyToEntities: Mt,
+		getMode: pn,
+		setMode: fn,
+		getPickedLocation: mn,
+		clearPickedLocation: hn,
+		startDrawing: vn,
 		getRenderer: (e) => R.current.get(e),
 		setEditingEntities: (e) => {
 			for (let t of xt.current) e.map(String).includes(String(t)) || R.current.get(t)?.setEditing?.(!1);
@@ -6860,7 +6873,7 @@ const Mapbox = forwardRef((e, c) => {
 			q.current &&= (R.current.get(q.current.entityId)?.cancelEditPreview?.(), null), bt(e);
 		},
 		getEditingEntities: () => xt.current,
-		startPicking: hn,
+		startPicking: gn,
 		startRoutePlanning: (e) => {
 			He.current?.startPlanning(e);
 		},
@@ -6876,14 +6889,15 @@ const Mapbox = forwardRef((e, c) => {
 		Tt,
 		At,
 		jt,
-		fn,
-		dn,
+		Mt,
 		pn,
+		fn,
 		mn,
-		_n,
-		hn
+		hn,
+		vn,
+		gn
 	]);
-	let vn = useCallback(() => {
+	let yn = useCallback(() => {
 		let e = L.current;
 		if (!e) return;
 		let t = new Set(T.map((e) => e.id)), n = new Set(R.current.keys());
@@ -6927,10 +6941,10 @@ const Mapbox = forwardRef((e, c) => {
 		j,
 		M,
 		N
-	]), yn = useCallback(() => {
+	]), bn = useCallback(() => {
 		for (let e of R.current.values()) e.destroy();
 		R.current.clear();
-	}, []), bn = useCallback((e) => {
+	}, []), xn = useCallback((e) => {
 		let t = e.getStyle();
 		if (!t?.layers) return;
 		let n = [
@@ -6945,10 +6959,10 @@ const Mapbox = forwardRef((e, c) => {
 			"marker-"
 		];
 		for (let e of t.layers) if (n.some((t) => e.id.startsWith(t))) return e.id;
-	}, []), xn = useCallback((e) => {
+	}, []), Sn = 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;
-	}, [C]), Sn = useCallback((e, t) => {
+	}, [C]), Cn = useCallback((e, t) => {
 		let n = `base-layer-source-${t.id}`, r = `base-layer-${t.id}`, i = {
 			type: "raster",
 			tiles: [t.url],
@@ -6958,19 +6972,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 = bn(e);
+		let a = xn(e);
 		e.addLayer({
 			id: r,
 			type: "raster",
 			source: n,
-			paint: xn(t),
+			paint: Sn(t),
 			layout: { visibility: t.visible === !1 ? "none" : "visible" }
 		}, a);
-	}, [bn, xn]), Cn = useCallback(async (e, t) => {
+	}, [xn, Sn]), wn = 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 (!We.current.has(t.id)) return;
-			let a = n.format === "pbf" || n.vector_layers, o = bn(e);
+			let a = n.format === "pbf" || n.vector_layers, o = xn(e);
 			if (a) {
 				let t = {
 					type: "vector",
@@ -6991,13 +7005,13 @@ const Mapbox = forwardRef((e, c) => {
 				id: i,
 				type: "raster",
 				source: r,
-				paint: xn(t),
+				paint: Sn(t),
 				layout: { visibility: t.visible === !1 ? "none" : "visible" }
 			}, o);
 		} catch (e) {
 			console.error(`Failed to load TileJSON from ${t.url}:`, e);
 		}
-	}, [bn, xn]), wn = useCallback(async (e, t) => {
+	}, [xn, Sn]), Tn = useCallback(async (e, t) => {
 		try {
 			let n = await (await fetch(t.url)).json();
 			if (!We.current.has(t.id)) return;
@@ -7005,7 +7019,7 @@ const Mapbox = forwardRef((e, c) => {
 				let n = `base-layer-source-${t.id}-${r}`;
 				e.getSource(n) || e.addSource(n, i);
 			}
-			let r = bn(e);
+			let r = xn(e);
 			if (n.layers) for (let i of n.layers) {
 				let n = `base-layer-${t.id}-${i.id}`;
 				if (e.getLayer(n)) continue;
@@ -7016,7 +7030,7 @@ const Mapbox = forwardRef((e, c) => {
 				};
 				i.type === "raster" && (a.paint = {
 					...a.paint,
-					...xn(t)
+					...Sn(t)
 				}), t.visible === !1 && (a.layout = {
 					...a.layout,
 					visibility: "none"
@@ -7029,50 +7043,50 @@ const Mapbox = forwardRef((e, c) => {
 		} catch (e) {
 			console.error(`Failed to load Style JSON from ${t.url}:`, e);
 		}
-	}, [bn, xn]), Tn = useCallback((e, t) => {
+	}, [xn, Sn]), En = 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);
-	}, []), En = useCallback((e) => {
+	}, []), Dn = useCallback((e) => {
 		let t = L.current;
 		if (!t) return;
 		let n = new Set(e.map((e) => e.id)), r = We.current;
-		for (let e of r) n.has(e) || (Tn(t, e), r.delete(e));
+		for (let e of r) n.has(e) || (En(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 = xn(n);
+				let r = Sn(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":
-				Sn(t, n);
+				Cn(t, n);
 				break;
 			case "tilejson":
-				Cn(t, n);
+				wn(t, n);
 				break;
 			case "style":
-				wn(t, n);
+				Tn(t, n);
 				break;
 			default: {
 				let e = n;
-				e.url && Sn(t, {
+				e.url && Cn(t, {
 					...e,
 					type: "raster"
 				});
 			}
 		}
 	}, [
-		Sn,
 		Cn,
 		wn,
 		Tn,
-		xn
-	]), Dn = useCallback((e) => {
+		En,
+		Sn
+	]), On = useCallback((e) => {
 		let t = e;
 		for (; t;) {
 			let e = t.getAttribute?.("data-entity-id");
@@ -7080,33 +7094,33 @@ const Mapbox = forwardRef((e, c) => {
 			t = t.parentElement;
 		}
 		return null;
-	}, []), On = useCallback((e) => {
+	}, []), kn = useCallback((e) => {
 		let t = [e.lngLat.lng, e.lngLat.lat], n = {
 			x: e.point.x,
 			y: e.point.y
-		}, r = In.current;
+		}, r = Ln.current;
 		if (r === "picker") {
 			let e = {
 				lng: t[0],
 				lat: t[1]
 			};
-			rt(e), It(t), Ln.current?.(e), Mt.current && (Mt.current(e), Mt.current = null, Ft({}), Lt(), rt(null), dn(Nt.current));
+			rt(e), Lt(t), Rn.current?.(e), Nt.current && (Nt.current(e), Nt.current = null, It({}), Rt(), rt(null), fn(Pt.current));
 			return;
 		}
 		if (vt.current) return;
 		if (r === "edit") {
-			let e = zn.current;
+			let e = Bn.current;
 			if (e === "rectangle") {
-				let e = Bn.current;
+				let e = Vn.current;
 				if (!e) ct(t);
 				else {
 					let n = lt.current, r = applyEntityConfig({
 						...n,
-						id: n?.id ?? Rt(),
+						id: n?.id ?? zt(),
 						type: "rectangle",
 						bounds: [e, t]
 					}, D);
-					Ut();
+					Wt();
 					let i = L.current;
 					if (i && !R.current.has(r.id)) {
 						let e = new RectangleRenderer(i, r, O, k, j, N);
@@ -7120,14 +7134,14 @@ const Mapbox = forwardRef((e, c) => {
 				let e = dt.current;
 				if (!e) dt.current = { center: t };
 				else {
-					let n = Kt(e.center, t), r = G.current, i = applyEntityConfig({
+					let n = qt(e.center, t), r = G.current, i = applyEntityConfig({
 						...r,
-						id: r?.id ?? Rt(),
+						id: r?.id ?? zt(),
 						type: "circle",
 						center: e.center,
 						radius: n
 					}, D);
-					Jt();
+					Yt();
 					let a = L.current;
 					if (a && !R.current.has(i.id)) {
 						let e = new CircleRenderer(a, i, O, k, j, M);
@@ -7141,14 +7155,14 @@ const Mapbox = forwardRef((e, c) => {
 				let e = ft.current;
 				if (e.length >= 3) {
 					let n = e[0];
-					if (Kt(n, t) < 20) {
+					if (qt(n, t) < 20) {
 						let t = K.current, n = applyEntityConfig({
 							...t,
-							id: t?.id ?? Rt(),
+							id: t?.id ?? zt(),
 							type: "polygon",
 							coordinates: [...e]
 						}, D);
-						Qt();
+						$t();
 						let r = L.current;
 						if (r && !R.current.has(n.id)) {
 							let e = new PolygonRenderer(r, n, O, k, j, N);
@@ -7165,14 +7179,14 @@ const Mapbox = forwardRef((e, c) => {
 				let e = mt.current;
 				if (!e) mt.current = { center: t };
 				else {
-					let n = Kt(e.center, t) * 2, r = pt.current, i = applyEntityConfig({
+					let n = qt(e.center, t) * 2, r = pt.current, i = applyEntityConfig({
 						...r,
-						id: r?.id ?? Rt(),
+						id: r?.id ?? zt(),
 						type: "square",
 						center: e.center,
 						length: n
 					}, D);
-					rn();
+					an();
 					let a = L.current;
 					if (a && !R.current.has(i.id)) {
 						let e = new SquareRenderer(a, i, O, k, j, N);
@@ -7190,7 +7204,7 @@ const Mapbox = forwardRef((e, c) => {
 			if (n && n.src && n.width) {
 				let e = {
 					...n,
-					id: n.id ?? Rt(),
+					id: n.id ?? zt(),
 					type: "marker",
 					center: t,
 					src: n.src,
@@ -7199,10 +7213,10 @@ const Mapbox = forwardRef((e, c) => {
 				Q.current.onMarkerAdd?.(e), H(null), U(null), Y(), ut.current = null, W.current = !1;
 				return;
 			}
-			let r = Rn.current;
+			let r = zn.current;
 			if (r) {
 				let e = {
-					id: Rt(),
+					id: zt(),
 					type: "marker",
 					name: r.name,
 					center: t,
@@ -7247,7 +7261,7 @@ const Mapbox = forwardRef((e, c) => {
 				}
 			}
 		}
-		let i = Nn.current, a = Pn.current, o = Fn.current, s = Dn(e.originalEvent.target);
+		let i = Pn.current, a = Fn.current, o = In.current, s = On(e.originalEvent.target);
 		if (s) {
 			let e = i.find((e) => String(e.id) === s);
 			if (e) {
@@ -7284,25 +7298,25 @@ const Mapbox = forwardRef((e, c) => {
 	}, [
 		I,
 		Pe,
-		Dn
-	]), kn = useCallback((e) => {
+		On
+	]), An = useCallback((e) => {
 		let t = [e.lngLat.lng, e.lngLat.lat];
 		if (q.current) {
 			let { entityId: e, activeHandle: n } = q.current;
 			R.current.get(e)?.updateEditPreview?.(n, t);
 			return;
 		}
-		let n = zn.current, r = Bn.current;
-		n === "rectangle" && r && Ht(r, t);
+		let n = Bn.current, r = Vn.current;
+		n === "rectangle" && r && Ut(r, t);
 		let i = dt.current;
-		n === "circle" && i && qt(i.center, t);
+		n === "circle" && i && Jt(i.center, t);
 		let a = ft.current;
-		n === "polygon" && a.length > 0 && Zt(a, t);
+		n === "polygon" && a.length > 0 && Qt(a, t);
 		let o = mt.current;
-		n === "square" && o && nn(o.center, t);
+		n === "square" && o && rn(o.center, t);
 		let s = gt.current;
-		n === "polyline" && s.length > 0 && sn(s, t);
-		let c = Nn.current, l = Fn.current;
+		n === "polyline" && s.length > 0 && cn(s, t);
+		let c = Pn.current, l = In.current;
 		for (let [e, n] of R.current) if (n.isPointInEntity(t)) {
 			let t = c.find((t) => t.id === e);
 			if (!t?.popup) continue;
@@ -7325,14 +7339,14 @@ const Mapbox = forwardRef((e, c) => {
 		Pe,
 		B,
 		Dt,
-		Ht,
-		qt,
-		Zt,
-		nn,
-		sn
-	]), An = useCallback((e) => {
-		if (e.preventDefault(), Mt.current) {
-			Mt.current(null), Mt.current = null, Ft({}), Lt(), rt(null), dn(Nt.current);
+		Ut,
+		Jt,
+		Qt,
+		rn,
+		cn
+	]), jn = useCallback((e) => {
+		if (e.preventDefault(), Nt.current) {
+			Nt.current(null), Nt.current = null, It({}), Rt(), rt(null), fn(Pt.current);
 			return;
 		}
 		if (vt.current) return;
@@ -7354,14 +7368,14 @@ const Mapbox = forwardRef((e, c) => {
 				}
 			}
 		}
-		if (In.current !== "edit") return;
-		if (Rn.current) {
+		if (Ln.current !== "edit") return;
+		if (zn.current) {
 			H(null), U(null), Y();
 			return;
 		}
-		let t = zn.current;
+		let t = Bn.current;
 		if (t === "rectangle") {
-			if (Bn.current) ct(null), Ut();
+			if (Vn.current) ct(null), Wt();
 			else {
 				U(null);
 				let e = L.current;
@@ -7370,7 +7384,7 @@ const Mapbox = forwardRef((e, c) => {
 			return;
 		}
 		if (t === "circle") {
-			if (dt.current) dt.current = null, Jt();
+			if (dt.current) dt.current = null, Yt();
 			else {
 				U(null);
 				let e = L.current;
@@ -7383,18 +7397,18 @@ const Mapbox = forwardRef((e, c) => {
 			if (e.length >= 3) {
 				let t = K.current, n = applyEntityConfig({
 					...t,
-					id: t?.id ?? Rt(),
+					id: t?.id ?? zt(),
 					type: "polygon",
 					coordinates: [...e]
 				}, D);
-				Qt();
+				$t();
 				let r = L.current;
 				if (r && !R.current.has(n.id)) {
 					let e = new PolygonRenderer(r, n, O, k, j, N);
 					R.current.set(n.id, e);
 				}
 				Q.current.onPolygonAdd?.(n), ft.current = [], K.current = null, W.current && (W.current = !1, U(null), r && (r.getCanvas().style.cursor = ""));
-			} else if (e.length > 0) ft.current = [], Qt();
+			} else if (e.length > 0) ft.current = [], $t();
 			else {
 				U(null);
 				let e = L.current;
@@ -7403,7 +7417,7 @@ const Mapbox = forwardRef((e, c) => {
 			return;
 		}
 		if (t === "square") {
-			if (mt.current) mt.current = null, rn();
+			if (mt.current) mt.current = null, an();
 			else {
 				U(null);
 				let e = L.current;
@@ -7416,18 +7430,18 @@ const Mapbox = forwardRef((e, c) => {
 			if (e.length >= 2) {
 				let t = ht.current, n = applyEntityConfig({
 					...t,
-					id: t?.id ?? Rt(),
+					id: t?.id ?? zt(),
 					type: "polyline",
 					coordinates: [...e]
 				}, D);
-				cn();
+				ln();
 				let r = L.current;
 				if (r && !R.current.has(n.id)) {
 					let e = new PolylineRenderer(r, n, O, k, N);
 					R.current.set(n.id, e);
 				}
 				Q.current.onPolylineAdd?.(n), gt.current = [], ht.current = null, W.current && (W.current = !1, U(null), r && (r.getCanvas().style.cursor = ""));
-			} else if (e.length > 0) gt.current = [], cn();
+			} else if (e.length > 0) gt.current = [], ln();
 			else {
 				U(null);
 				let e = L.current;
@@ -7438,11 +7452,11 @@ const Mapbox = forwardRef((e, c) => {
 		let n = [e.lngLat.lng, e.lngLat.lat], r = {
 			x: e.point.x,
 			y: e.point.y
-		}, i = Nn.current, a = Dn(e.originalEvent.target);
+		}, i = Pn.current, a = On(e.originalEvent.target);
 		if (a) {
 			let e = i.find((e) => String(e.id) === a);
 			if (e) {
-				jn(e, r, n);
+				Mn(e, r, n);
 				return;
 			}
 		}
@@ -7451,7 +7465,7 @@ const Mapbox = forwardRef((e, c) => {
 			if (o && L.current?.getLayer(o) && L.current.queryRenderedFeatures(e.point, { layers: [o] }).length > 0) {
 				let e = i.find((e) => e.id === t);
 				if (e) {
-					jn(e, r, n);
+					Mn(e, r, n);
 					return;
 				}
 			}
@@ -7459,19 +7473,19 @@ const Mapbox = forwardRef((e, c) => {
 		for (let [e, t] of R.current) if (t.isPointInEntity(n)) {
 			let t = i.find((t) => t.id === e);
 			if (t) {
-				jn(t, r, n);
+				Mn(t, r, n);
 				return;
 			}
 		}
 	}, [
-		Dn,
+		On,
 		Y,
-		Ut,
-		Jt,
-		Qt,
-		rn,
-		cn
-	]), jn = useCallback((e, t, n) => {
+		Wt,
+		Yt,
+		$t,
+		an,
+		ln
+	]), Mn = useCallback((e, t, n) => {
 		let r = Ve.current?.getBoundingClientRect(), i = r ? {
 			x: t.x + r.left,
 			y: t.y + r.top
@@ -7496,7 +7510,7 @@ const Mapbox = forwardRef((e, c) => {
 				}
 			}]
 		});
-	}, []), Mn = useCallback(() => {
+	}, []), Nn = useCallback(() => {
 		Xe(null);
 	}, []);
 	useEffect(() => {
@@ -7526,57 +7540,57 @@ const Mapbox = forwardRef((e, c) => {
 			document.body.contains(e) && document.body.removeChild(e);
 		};
 	}, [I?.zIndex]);
-	let Nn = useRef(T);
-	Nn.current = T;
-	let Pn = useRef(Ie);
-	Pn.current = Ie;
-	let Fn = useRef(Et);
-	Fn.current = Et;
-	let In = useRef(V);
-	In.current = V;
-	let Ln = useRef(b);
-	Ln.current = b;
-	let Rn = useRef(at);
-	Rn.current = at;
-	let zn = useRef(ot);
-	zn.current = ot;
-	let Bn = useRef(st);
-	Bn.current = st;
+	let Pn = useRef(T);
+	Pn.current = T;
+	let Fn = useRef(Ie);
+	Fn.current = Ie;
+	let In = useRef(Et);
+	In.current = Et;
+	let Ln = useRef(V);
+	Ln.current = V;
+	let Rn = useRef(b);
+	Rn.current = b;
+	let zn = useRef(at);
+	zn.current = at;
+	let Bn = useRef(ot);
+	Bn.current = ot;
+	let Vn = useRef(st);
+	Vn.current = st;
 	let Q = useRef(v);
 	Q.current = v;
-	let Vn = useRef(D);
-	Vn.current = D, useEffect(() => {
+	let Hn = useRef(D);
+	Hn.current = D, useEffect(() => {
 		let e = (e) => {
 			if (e.key === "Escape" && q.current) {
 				R.current.get(q.current.entityId)?.cancelEditPreview?.(), q.current = null;
 				return;
 			}
 			if (e.key === "Escape" && V === "edit") {
-				if (at && (H(null), U(null), Y()), ot === "rectangle") if (st) ct(null), Ut();
+				if (at && (H(null), U(null), Y()), ot === "rectangle") if (st) ct(null), Wt();
 				else {
 					U(null);
 					let e = L.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (ot === "circle") if (dt.current) dt.current = null, Jt();
+				if (ot === "circle") if (dt.current) dt.current = null, Yt();
 				else {
 					U(null);
 					let e = L.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (ot === "polygon") if (ft.current.length > 0) ft.current = [], Qt();
+				if (ot === "polygon") if (ft.current.length > 0) ft.current = [], $t();
 				else {
 					U(null);
 					let e = L.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (ot === "square") if (mt.current) mt.current = null, rn();
+				if (ot === "square") if (mt.current) mt.current = null, an();
 				else {
 					U(null);
 					let e = L.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (ot === "polyline") if (gt.current.length > 0) gt.current = [], cn();
+				if (ot === "polyline") if (gt.current.length > 0) gt.current = [], ln();
 				else {
 					U(null);
 					let e = L.current;
@@ -7593,16 +7607,16 @@ const Mapbox = forwardRef((e, c) => {
 		ot,
 		st,
 		Y,
-		Ut,
-		Jt,
-		Qt,
-		rn,
-		cn
+		Wt,
+		Yt,
+		$t,
+		an,
+		ln
 	]), useEffect(() => {
 		let e = L.current;
 		if (!e || !B) return;
 		let t = B.entityId, n = B.config, r = () => {
-			let r = Nn.current.find((e) => e.id === t);
+			let r = Pn.current.find((e) => e.id === t);
 			if (!r) {
 				Ot();
 				return;
@@ -7621,7 +7635,7 @@ const Mapbox = forwardRef((e, c) => {
 		let n = Ye.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) {
-				Mn();
+				Nn();
 				return;
 			}
 			let o = t.getBoundingClientRect(), s = r.x + o.left, c = r.y + o.top;
@@ -7630,7 +7644,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);
 		};
-	}, [Ye?.lngLat, Mn]), useEffect(() => {
+	}, [Ye?.lngLat, Nn]), useEffect(() => {
 		if (!Ve.current) return;
 		let e = {
 			version: 8,
@@ -7671,9 +7685,9 @@ const Mapbox = forwardRef((e, c) => {
 			}
 			z.current.clear(), T.forEach((e) => {
 				z.current.set(e.id, e);
-			}), En(S), vn(), Vt(), Wt(), Xt(), en(), on(), et(_), Fe?.(_);
-		}), _.on("click", On), _.on("mousemove", kn), _.on("contextmenu", An), () => {
-			_.off("click", On), _.off("mousemove", kn), _.off("contextmenu", An), yn(), Lt(), Y(), X(), Z(), _.remove(), L.current = null;
+			}), Dn(S), yn(), Ht(), Gt(), Zt(), tn(), sn(), et(_), Fe?.(_);
+		}), _.on("click", kn), _.on("mousemove", An), _.on("contextmenu", jn), () => {
+			_.off("click", kn), _.off("mousemove", An), _.off("contextmenu", jn), bn(), Rt(), Y(), X(), Z(), _.remove(), L.current = null;
 		};
 	}, []), useEffect(() => {
 		if (L.current) {
@@ -7681,53 +7695,53 @@ const Mapbox = forwardRef((e, c) => {
 				L.current.once("load", () => {
 					z.current.clear(), T.forEach((e) => {
 						z.current.set(e.id, e);
-					}), vn();
+					}), yn();
 				});
 				return;
 			}
 			z.current.clear(), T.forEach((e) => {
 				z.current.set(e.id, e);
-			}), vn();
+			}), yn();
 		}
-	}, [T, vn]), useEffect(() => {
-		!L.current || !L.current.isStyleLoaded() || (yn(), vn());
+	}, [T, yn]), useEffect(() => {
+		!L.current || !L.current.isStyleLoaded() || (bn(), yn());
 	}, [
 		O,
 		k,
 		j,
 		M,
 		N,
-		yn,
-		vn
+		bn,
+		yn
 	]), useEffect(() => {
 		if (L.current) {
 			if (!L.current.isStyleLoaded()) {
 				L.current.once("load", () => {
-					En(S);
+					Dn(S);
 				});
 				return;
 			}
-			En(S);
-		}
-	}, [S, En]);
-	let Hn = useRef(void 0), Un = useRef(!0), Wn = useRef(S);
-	Wn.current = S;
-	let Gn = useRef(En);
-	Gn.current = En;
-	let Kn = useRef(yn);
-	Kn.current = yn;
-	let qn = useRef(vn);
-	qn.current = vn;
-	let Jn = useRef(Vt);
-	Jn.current = Vt;
-	let Yn = useRef(Wt);
-	Yn.current = Wt;
-	let Xn = useRef(Xt);
-	Xn.current = Xt;
-	let Zn = useRef(en);
-	Zn.current = en;
-	let Qn = useRef(on);
-	Qn.current = on, useEffect(() => {
+			Dn(S);
+		}
+	}, [S, Dn]);
+	let Un = useRef(void 0), Wn = useRef(!0), Gn = useRef(S);
+	Gn.current = S;
+	let Kn = useRef(Dn);
+	Kn.current = Dn;
+	let qn = useRef(bn);
+	qn.current = bn;
+	let Jn = useRef(yn);
+	Jn.current = yn;
+	let Yn = useRef(Ht);
+	Yn.current = Ht;
+	let Xn = useRef(Gt);
+	Xn.current = Gt;
+	let Zn = useRef(Zt);
+	Zn.current = Zt;
+	let Qn = useRef(tn);
+	Qn.current = tn;
+	let $n = useRef(sn);
+	$n.current = sn, useEffect(() => {
 		let e = L.current;
 		if (!e) return;
 		let t = p || {
@@ -7735,27 +7749,27 @@ const Mapbox = forwardRef((e, c) => {
 			sources: {},
 			layers: []
 		};
-		if (Un.current) {
-			Un.current = !1, Hn.current = p;
+		if (Wn.current) {
+			Wn.current = !1, Un.current = p;
 			return;
 		}
-		Hn.current !== p && (Hn.current = p, e.setStyle(t), e.once("style.load", () => {
+		Un.current !== p && (Un.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);
 			}
-			We.current.clear(), Gn.current(Wn.current), Kn.current(), qn.current(), Jn.current(), Yn.current(), Xn.current(), Zn.current(), Qn.current();
+			We.current.clear(), Kn.current(Gn.current), qn.current(), Jn.current(), Yn.current(), Xn.current(), Zn.current(), Qn.current(), $n.current();
 		}));
 	}, [p]), useEffect(() => {
 		let e = new Set(E.map(String));
 		for (let [t, n] of R.current) n.setSelected(e.has(String(t)));
 	}, [E]);
-	let $n = useRef({});
+	let er = useRef({});
 	useEffect(() => {
 		let e = L.current;
 		if (!e) return;
-		let t = $n.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 || ($n.current = {
+		let t = er.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 || (er.current = {
 			center: l,
 			zoom: u,
 			pitch: d,
@@ -7772,7 +7786,7 @@ const Mapbox = forwardRef((e, c) => {
 		d,
 		f
 	]);
-	let er = (() => Ce === !1 ? null : Ce === !0 ? { enabled: !0 } : Ce)(), tr = (() => P === !1 ? null : P === !0 ? { enabled: !0 } : P)(), nr = (() => we === !1 ? null : we === !0 ? { enabled: !0 } : we)(), $ = (() => {
+	let tr = (() => Ce === !1 ? null : Ce === !0 ? { enabled: !0 } : Ce)(), nr = (() => P === !1 ? null : P === !0 ? { enabled: !0 } : P)(), rr = (() => we === !1 ? null : we === !0 ? { enabled: !0 } : we)(), $ = (() => {
 		if (Te === !1) return null;
 		let e, t, n;
 		if (S && S.length > 0) {
@@ -7797,7 +7811,7 @@ const Mapbox = forwardRef((e, c) => {
 			sourceLayer: Te.sourceLayer || t,
 			classField: Te.classField || n
 		};
-	})(), rr = (() => F ? F === !0 ? { enabled: !0 } : F : null)(), ir = (() => De ? De === !0 ? { enabled: !0 } : De : null)(), ar = (() => je || null)(), or = useMemo(() => {
+	})(), ir = (() => F ? F === !0 ? { enabled: !0 } : F : null)(), ar = (() => De ? De === !0 ? { enabled: !0 } : De : null)(), or = (() => je || null)(), sr = useMemo(() => {
 		let e = [];
 		for (let t of S) if (t.applyRasterPaint) if (t.type === "style") {
 			let n = L.current;
@@ -7807,7 +7821,7 @@ const Mapbox = forwardRef((e, c) => {
 			}
 		} else e.push(`base-layer-${t.id}`);
 		return e;
-	}, [S, $e]), sr = useMemo(() => {
+	}, [S, $e]), cr = useMemo(() => {
 		if (V !== "picker") return;
 		let e = J.cursorImage;
 		if (!e) return;
@@ -7842,13 +7856,13 @@ const Mapbox = forwardRef((e, c) => {
 				break;
 		}
 		return `url(${e.url}) ${i} ${a}, crosshair`;
-	}, [V, J.cursorImage]), cr = useMemo(() => sr ? {
+	}, [V, J.cursorImage]), lr = useMemo(() => cr ? {
 		...Be,
-		"--mapbox-picker-cursor": sr
-	} : Be, [Be, sr]);
+		"--mapbox-picker-cursor": cr
+	} : Be, [Be, cr]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: `comp-mapbox ${V === "picker" ? "comp-mapbox--picker-mode" : ""} ${ze}`,
-		style: cr,
+		style: lr,
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				ref: Ve,
@@ -7865,14 +7879,14 @@ const Mapbox = forwardRef((e, c) => {
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: `comp-mapbox__edit-controls${V === "edit" && v.showEditTools !== !1 && (v.markerTemplates && v.markerTemplates.length > 0 || v.showRectangleTool || v.showCircleTool || v.showPolygonTool || v.showSquareTool || v.showPolylineTool) || $ && $.enabled !== !1 || ar && ar.enabled !== !1 ? "" : " comp-mapbox__edit-controls--hidden"}`,
+				className: `comp-mapbox__edit-controls${V === "edit" && v.showEditTools !== !1 && (v.markerTemplates && v.markerTemplates.length > 0 || v.showRectangleTool || v.showCircleTool || v.showPolygonTool || v.showSquareTool || v.showPolylineTool) || $ && $.enabled !== !1 || or && or.enabled !== !1 ? "" : " comp-mapbox__edit-controls--hidden"}`,
 				children: [
 					V === "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: at,
-						onTemplateSelect: ln,
+						onTemplateSelect: un,
 						drawMode: ot,
-						onDrawModeChange: un,
+						onDrawModeChange: dn,
 						showRectangleTool: v.showRectangleTool,
 						showCircleTool: v.showCircleTool,
 						showPolygonTool: v.showPolygonTool,
@@ -7892,62 +7906,62 @@ const Mapbox = forwardRef((e, c) => {
 						className: $?.className,
 						style: $?.style
 					}),
-					ar && ar.enabled !== !1 && /* @__PURE__ */ jsx(RoutePlanningControl, {
+					or && or.enabled !== !1 && /* @__PURE__ */ jsx(RoutePlanningControl, {
 						ref: He,
 						map: $e,
-						pointCount: ar.pointCount,
-						showPointCountInput: ar.showPointCountInput,
-						visualType: ar.visualType,
-						onSelectFinished: ar.onSelectFinished
+						pointCount: or.pointCount,
+						showPointCountInput: or.showPointCountInput,
+						visualType: or.visualType,
+						onSelectFinished: or.onSelectFinished
 					})
 				]
 			}),
-			(er?.enabled !== !1 || tr?.enabled !== !1 || nr?.enabled !== !1 || rr && rr.enabled !== !1 || ir && ir.enabled !== !1) && /* @__PURE__ */ jsxs("div", {
+			(tr?.enabled !== !1 || nr?.enabled !== !1 || rr?.enabled !== !1 || ir && ir.enabled !== !1 || ar && ar.enabled !== !1) && /* @__PURE__ */ jsxs("div", {
 				className: "comp-mapbox__controls",
 				children: [
-					er && er.enabled !== !1 && /* @__PURE__ */ jsx(CoordinateDisplay, {
+					tr && tr.enabled !== !1 && /* @__PURE__ */ jsx(CoordinateDisplay, {
 						map: $e,
-						precision: er.precision,
-						className: er.className,
-						style: er.style
-					}),
-					tr && tr.enabled !== !1 && /* @__PURE__ */ jsx(ScaleControl, {
-						map: $e,
-						maxWidth: tr.maxWidth,
-						unit: tr.unit,
+						precision: tr.precision,
 						className: tr.className,
 						style: tr.style
 					}),
-					rr && rr.enabled !== !1 && /* @__PURE__ */ jsx(MeasureControl, {
+					nr && nr.enabled !== !1 && /* @__PURE__ */ jsx(ScaleControl, {
+						map: $e,
+						maxWidth: nr.maxWidth,
+						unit: nr.unit,
+						className: nr.className,
+						style: nr.style
+					}),
+					ir && ir.enabled !== !1 && /* @__PURE__ */ jsx(MeasureControl, {
 						map: $e,
 						entityConfig: D,
 						onDrawModeChange: (e) => {
 							vt.current = e;
 						},
-						className: rr.className,
-						style: rr.style
+						className: ir.className,
+						style: ir.style
 					}),
-					ir && ir.enabled !== !1 && /* @__PURE__ */ jsx(RasterPaintControl, {
+					ar && ar.enabled !== !1 && /* @__PURE__ */ jsx(RasterPaintControl, {
 						map: $e,
 						value: C,
 						onChange: Me,
-						rasterPaintLayerIds: or,
-						className: ir.className,
-						style: ir.style
+						rasterPaintLayerIds: sr,
+						className: ar.className,
+						style: ar.style
 					}),
-					nr && nr.enabled !== !1 && /* @__PURE__ */ jsx(ResetViewControl, {
+					rr && rr.enabled !== !1 && /* @__PURE__ */ jsx(ResetViewControl, {
 						map: $e,
 						initialCenter: l,
 						initialZoom: u,
 						initialPitch: d,
 						initialBearing: f,
-						duration: nr.duration,
-						className: nr.className,
-						style: nr.style
+						duration: rr.duration,
+						className: rr.className,
+						style: rr.style
 					})
 				]
 			}),
-			!(ar && ar.enabled !== !1) && /* @__PURE__ */ jsx(RoutePlanningControl, {
+			!(or && or.enabled !== !1) && /* @__PURE__ */ jsx(RoutePlanningControl, {
 				ref: He,
 				map: $e,
 				showButton: !1
@@ -7960,7 +7974,7 @@ const Mapbox = forwardRef((e, c) => {
 			}),
 			Ye && Ze.current && /* @__PURE__ */ jsx(ContextMenu, {
 				menuState: Ye,
-				onClose: Mn,
+				onClose: Nn,
 				portalContainer: Ze.current,
 				menuRef: Qe
 			})