@uiness/map 0.0.0-stage → 0.1.0

package/dist/index.cjs

@@ -0,0 +1,744 @@
+'use client';
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/engine.ts
+const scripts = {};
+/**
+* Loads a script once per `src`, resolving when it calls back the global named `callback`.
+* Both Google and Apple announce they are ready that way.
+*/
+function loadScript(src, callback, attributes = {}) {
+	scripts[src] ??= new Promise((resolve, reject) => {
+		const script = document.createElement("script");
+		window[callback] = () => resolve();
+		script.src = src;
+		script.async = true;
+		for (const [name, value] of Object.entries(attributes)) script.setAttribute(name, value);
+		script.onerror = () => {
+			delete scripts[src];
+			script.remove();
+			reject(/* @__PURE__ */ new Error(`Could not load ${src}`));
+		};
+		document.head.append(script);
+	});
+	return scripts[src];
+}
+//#endregion
+//#region src/projection.ts
+const TILE_SIZE = 256;
+/** The latitude where Web Mercator turns the world into a square. */
+const MAX_LAT = 85.0511287798;
+const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+const worldSize = (zoom) => 256 * 2 ** zoom;
+/** Longitude into [-180, 180), latitude into what Web Mercator can draw. */
+function normalize([lng, lat]) {
+	return [((lng + 180) % 360 + 360) % 360 - 180, clamp(lat, -85.0511287798, MAX_LAT)];
+}
+/** A coordinate to pixels of the whole world at `zoom`, from its top left corner. */
+function lngLatToWorld([lng, lat], zoom) {
+	const size = worldSize(zoom);
+	const sin = Math.sin(clamp(lat, -85.0511287798, MAX_LAT) * Math.PI / 180);
+	return [(lng + 180) / 360 * size, (.5 - Math.log((1 + sin) / (1 - sin)) / (4 * Math.PI)) * size];
+}
+/** World pixels at `zoom` back to a coordinate. */
+function worldToLngLat([x, y], zoom) {
+	const size = worldSize(zoom);
+	const n = Math.PI - 2 * Math.PI * y / size;
+	return [x / size * 360 - 180, 180 / Math.PI * Math.atan(Math.sinh(n))];
+}
+/** A coordinate to a point of a map of `size` showing `view`, on the copy of the world nearest the center. */
+function project(lngLat, view, size) {
+	const [cx, cy] = lngLatToWorld(view.center, view.zoom);
+	const [x, y] = lngLatToWorld(lngLat, view.zoom);
+	const world = worldSize(view.zoom);
+	return [x - cx - world * Math.round((x - cx) / world) + size[0] / 2, y - cy + size[1] / 2];
+}
+/** A point of the map back to a coordinate. */
+function unproject(point, view, size) {
+	const [cx, cy] = lngLatToWorld(view.center, view.zoom);
+	return normalize(worldToLngLat([cx + point[0] - size[0] / 2, cy + point[1] - size[1] / 2], view.zoom));
+}
+/** The view moved by `delta` pixels, the way a drag moves it. */
+function pan(view, delta, size) {
+	return {
+		center: unproject([size[0] / 2 - delta[0], size[1] / 2 - delta[1]], view, size),
+		zoom: view.zoom
+	};
+}
+/** The view at `zoom` that keeps the coordinate under `point` where it is. */
+function zoomAround(view, zoom, point, size) {
+	const [x, y] = lngLatToWorld(unproject(point, view, size), zoom);
+	return {
+		center: normalize(worldToLngLat([x - point[0] + size[0] / 2, y - point[1] + size[1] / 2], zoom)),
+		zoom
+	};
+}
+/** The tiles of zoom level `z` that cover a map of `size` showing `view`, scaled to its fractional zoom. */
+function visibleTiles(view, size, z) {
+	const scale = 2 ** (view.zoom - z);
+	const [cx, cy] = lngLatToWorld(view.center, z);
+	const count = 2 ** z;
+	const left = (x) => Math.round((x * 256 - cx) * scale + size[0] / 2);
+	const top = (y) => Math.round((y * 256 - cy) * scale + size[1] / 2);
+	const span = (px, c) => [Math.floor((c - px / 2 / scale) / 256), Math.floor((c + px / 2 / scale) / 256)];
+	const [x0, x1] = span(size[0], cx);
+	const [y0, y1] = span(size[1], cy);
+	const tiles = [];
+	for (let y = Math.max(0, y0); y <= Math.min(count - 1, y1); y++) for (let x = x0; x <= x1; x++) tiles.push({
+		x: (x % count + count) % count,
+		y,
+		z,
+		left: left(x),
+		top: top(y),
+		width: left(x + 1) - left(x),
+		height: top(y + 1) - top(y),
+		key: `${z}/${x}/${y}`
+	});
+	return tiles;
+}
+//#endregion
+//#region src/apple.ts
+/**
+* Draws the map with Apple Maps (MapKit JS), loading it on first use.
+* Create it once, outside the component, so the map is not mounted again on every render.
+*/
+function appleMaps({ token, options }) {
+	return async (container, view, onMove) => {
+		await loadScript("https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.core.js", "__uinessMapKit", {
+			crossorigin: "anonymous",
+			"data-callback": "__uinessMapKit",
+			"data-libraries": "map",
+			"data-initial-token": token
+		});
+		const mapkit = window.mapkit;
+		const map = new mapkit.Map(container, options);
+		const span = (zoom) => 360 * container.clientWidth / (256 * 2 ** zoom);
+		const current = () => {
+			const { center, span: s } = map.region;
+			return {
+				center: [center.longitude, center.latitude],
+				zoom: Math.log2(360 * container.clientWidth / (256 * s.longitudeDelta))
+			};
+		};
+		const setView = (next) => {
+			const [lng, lat] = next.center;
+			const size = [container.clientWidth, container.clientHeight];
+			const lngDelta = span(next.zoom);
+			const latDelta = unproject([0, 0], next, size)[1] - unproject([0, size[1]], next, size)[1];
+			map.setRegionAnimated(new mapkit.CoordinateRegion(new mapkit.Coordinate(lat, lng), new mapkit.CoordinateSpan(latDelta, lngDelta)), false);
+		};
+		setView(view);
+		let frame = 0;
+		const follow = () => {
+			onMove(current());
+			frame = requestAnimationFrame(follow);
+		};
+		const start = () => {
+			cancelAnimationFrame(frame);
+			follow();
+		};
+		const end = () => {
+			cancelAnimationFrame(frame);
+			onMove(current());
+		};
+		map.addEventListener("region-change-start", start);
+		map.addEventListener("region-change-end", end);
+		const offset = () => {
+			const rect = container.getBoundingClientRect();
+			return [rect.left + window.scrollX, rect.top + window.scrollY];
+		};
+		return {
+			setView,
+			project: ([lng, lat]) => {
+				const p = map.convertCoordinateToPointOnPage(new mapkit.Coordinate(lat, lng));
+				const [x, y] = offset();
+				return [p.x - x, p.y - y];
+			},
+			unproject: ([px, py]) => {
+				const [x, y] = offset();
+				const c = map.convertPointOnPageToCoordinate(new DOMPoint(px + x, py + y));
+				return [c.longitude, c.latitude];
+			},
+			destroy: () => {
+				cancelAnimationFrame(frame);
+				map.removeEventListener("region-change-start", start);
+				map.removeEventListener("region-change-end", end);
+				map.destroy();
+			}
+		};
+	};
+}
+//#endregion
+//#region src/google.ts
+/**
+* Draws the map with Google Maps (Maps JavaScript API), loading it on first use.
+* Create it once, outside the component, so the map is not mounted again on every render.
+*/
+function googleMaps({ apiKey, options }) {
+	return async (container, view, onMove) => {
+		await loadScript(`https://maps.googleapis.com/maps/api/js?key=${encodeURIComponent(apiKey)}&loading=async&callback=__uinessGoogleMaps`, "__uinessGoogleMaps");
+		const maps = window.google.maps;
+		const toLatLng = ([lng, lat]) => ({
+			lat,
+			lng
+		});
+		const map = new maps.Map(container, {
+			center: toLatLng(view.center),
+			zoom: view.zoom,
+			gestureHandling: "cooperative",
+			...options
+		});
+		const current = () => {
+			const center = map.getCenter();
+			return {
+				center: [center.lng(), center.lat()],
+				zoom: map.getZoom()
+			};
+		};
+		const overlay = new maps.OverlayView();
+		overlay.onAdd = () => {};
+		overlay.onRemove = () => {};
+		const ready = new Promise((resolve) => {
+			overlay.draw = () => {
+				resolve();
+				onMove(current());
+			};
+		});
+		overlay.setMap(map);
+		const listener = map.addListener("bounds_changed", () => onMove(current()));
+		await ready;
+		return {
+			setView: ({ center, zoom }) => {
+				map.setCenter(toLatLng(center));
+				map.setZoom(zoom);
+			},
+			project: (lngLat) => {
+				const p = overlay.getProjection().fromLatLngToContainerPixel(toLatLng(lngLat));
+				return [p.x, p.y];
+			},
+			unproject: ([x, y]) => {
+				const ll = overlay.getProjection().fromContainerPixelToLatLng(new maps.Point(x, y));
+				return [ll.lng(), ll.lat()];
+			},
+			destroy: () => {
+				listener.remove();
+				overlay.setMap(null);
+				maps.event.clearInstanceListeners(map);
+				container.replaceChildren();
+			}
+		};
+	};
+}
+//#endregion
+//#region src/providers.tsx
+const link = (href, text) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+	href,
+	target: "_blank",
+	rel: "noreferrer",
+	children: text
+});
+const osmCredit = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+	"© ",
+	link("https://www.openstreetmap.org/copyright", "OpenStreetMap"),
+	" contributors"
+] });
+const providers = {
+	osm: {
+		url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+		attribution: osmCredit,
+		maxZoom: 19
+	},
+	cartoLight: {
+		url: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
+		attribution: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			osmCredit,
+			" © ",
+			link("https://carto.com/attributions", "CARTO")
+		] }),
+		maxZoom: 20,
+		subdomains: [
+			"a",
+			"b",
+			"c",
+			"d"
+		]
+	},
+	cartoDark: {
+		url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
+		attribution: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			osmCredit,
+			" © ",
+			link("https://carto.com/attributions", "CARTO")
+		] }),
+		maxZoom: 20,
+		subdomains: [
+			"a",
+			"b",
+			"c",
+			"d"
+		]
+	},
+	openTopoMap: {
+		url: "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png",
+		attribution: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			osmCredit,
+			", SRTM | © ",
+			link("https://opentopomap.org", "OpenTopoMap"),
+			" (CC-BY-SA)"
+		] }),
+		maxZoom: 17,
+		subdomains: [
+			"a",
+			"b",
+			"c"
+		]
+	}
+};
+/** The address of one tile. */
+function tileUrl(provider, z, x, y) {
+	const subdomains = provider.subdomains ?? [];
+	return provider.url.replace("{s}", subdomains[(x + y) % subdomains.length] ?? "").replace("{z}", String(z)).replace("{x}", String(x)).replace("{y}", String(y));
+}
+//#endregion
+//#region src/map.tsx
+const MapContext = (0, react.createContext)(null);
+/** The map around a component: its view, the projection and `setView`, to overlay anything. */
+function useMap() {
+	const map = (0, react.useContext)(MapContext);
+	if (!map) throw new Error("useMap must be used inside a <Map>");
+	return map;
+}
+/** Whether a wheel event over the map should zoom it rather than scroll the page. */
+function zoomsOnWheel(mode, event) {
+	if (mode === "always") return true;
+	if (mode === "never") return false;
+	return event.ctrlKey || event.metaKey;
+}
+const KEY_PAN = 80;
+const NAN = [NaN, NaN];
+const sameView = (a, b) => a.zoom === b.zoom && a.center[0] === b.center[0] && a.center[1] === b.center[1];
+/**
+* A slippy map of XYZ raster tiles in Web Mercator, or of another platform through `engine`.
+* Give it a size: it fills its box and has no height of its own.
+*/
+function Map({ center, zoom, defaultCenter = [0, 20], defaultZoom = 2, onViewChange, minZoom = 0, maxZoom, wheelZoom = "modifier", provider = providers.osm, engine, children, style, onKeyDown, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onDoubleClick, ...props }) {
+	const ref = (0, react.useRef)(null);
+	const engineRef = (0, react.useRef)(null);
+	const [inner, setInner] = (0, react.useState)({
+		center: defaultCenter,
+		zoom: defaultZoom
+	});
+	const [size, setSize] = (0, react.useState)([0, 0]);
+	const [platform, setPlatform] = (0, react.useState)(null);
+	const view = {
+		center: center ?? inner.center,
+		zoom: zoom ?? inner.zoom
+	};
+	const max = maxZoom ?? (engine ? 22 : provider.maxZoom ?? 19);
+	const latest = (0, react.useRef)({
+		view,
+		size,
+		setView: (_) => {}
+	});
+	const fromPlatform = (0, react.useRef)(null);
+	const setView = (next) => {
+		const merged = {
+			...latest.current.view,
+			...next
+		};
+		const v = {
+			center: normalize(merged.center),
+			zoom: Math.min(max, Math.max(minZoom, merged.zoom))
+		};
+		latest.current.view = v;
+		setInner(v);
+		onViewChange?.(v);
+	};
+	latest.current = {
+		view,
+		size,
+		setView
+	};
+	(0, react.useEffect)(() => {
+		const el = ref.current;
+		if (!el) return;
+		const measure = () => setSize([el.clientWidth, el.clientHeight]);
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
+	(0, react.useEffect)(() => {
+		const el = ref.current;
+		if (!el || engine) return;
+		const wheel = (e) => {
+			if (!zoomsOnWheel(wheelZoom, e)) return;
+			e.preventDefault();
+			const { view, size, setView } = latest.current;
+			const rect = el.getBoundingClientRect();
+			const delta = e.deltaY * (e.deltaMode === 1 ? 40 : 1);
+			setView(zoomAround(view, view.zoom - delta / (e.ctrlKey ? 50 : 100), [e.clientX - rect.left, e.clientY - rect.top], size));
+		};
+		el.addEventListener("wheel", wheel, { passive: false });
+		return () => el.removeEventListener("wheel", wheel);
+	}, [engine, wheelZoom]);
+	(0, react.useEffect)(() => {
+		const el = engineRef.current;
+		if (!engine || !el) return;
+		let alive = true;
+		let mounted;
+		Promise.resolve(engine(el, latest.current.view, (v) => {
+			latest.current.setView(v);
+			fromPlatform.current = latest.current.view;
+		})).then((m) => {
+			if (!alive) return m.destroy();
+			mounted = m;
+			setPlatform(m);
+		}).catch((error) => console.error(error));
+		return () => {
+			alive = false;
+			mounted?.destroy();
+			setPlatform(null);
+		};
+	}, [engine]);
+	const [lng, lat] = view.center;
+	(0, react.useEffect)(() => {
+		const v = {
+			center: [lng, lat],
+			zoom: view.zoom
+		};
+		if (platform && !(fromPlatform.current && sameView(fromPlatform.current, v))) platform.setView(v);
+	}, [
+		platform,
+		lng,
+		lat,
+		view.zoom
+	]);
+	const pointers = (0, react.useRef)({});
+	const local = (e) => {
+		const rect = ref.current?.getBoundingClientRect();
+		return [e.clientX - (rect?.left ?? 0), e.clientY - (rect?.top ?? 0)];
+	};
+	const onOverlay = (target) => target.closest?.("[data-map-overlay]");
+	const gestures = engine ? {} : {
+		onPointerDown: (e) => {
+			onPointerDown?.(e);
+			if (onOverlay(e.target) || e.button !== 0) return;
+			e.currentTarget.setPointerCapture(e.pointerId);
+			pointers.current[e.pointerId] = local(e);
+		},
+		onPointerMove: (e) => {
+			onPointerMove?.(e);
+			const before = pointers.current;
+			if (!before[e.pointerId]) return;
+			const { view, size } = latest.current;
+			const after = {
+				...before,
+				[e.pointerId]: local(e)
+			};
+			pointers.current = after;
+			const [a, b] = Object.values(before);
+			const [c, d] = Object.values(after);
+			if (!a || !c) return;
+			if (!b || !d) {
+				setView(pan(view, [c[0] - a[0], c[1] - a[1]], size));
+				return;
+			}
+			const mid = (p, q) => [(p[0] + q[0]) / 2, (p[1] + q[1]) / 2];
+			const dist = (p, q) => Math.hypot(p[0] - q[0], p[1] - q[1]) || 1;
+			const [m0, m1] = [mid(a, b), mid(c, d)];
+			const moved = pan(view, [m1[0] - m0[0], m1[1] - m0[1]], size);
+			setView(zoomAround(moved, view.zoom + Math.log2(dist(c, d) / dist(a, b)), m1, size));
+		},
+		onPointerUp: (e) => {
+			onPointerUp?.(e);
+			delete pointers.current[e.pointerId];
+		},
+		onPointerCancel: (e) => {
+			onPointerCancel?.(e);
+			delete pointers.current[e.pointerId];
+		},
+		onDoubleClick: (e) => {
+			onDoubleClick?.(e);
+			if (onOverlay(e.target)) return;
+			const { view, size } = latest.current;
+			setView(zoomAround(view, Math.round(view.zoom) + (e.shiftKey ? -1 : 1), local(e), size));
+		}
+	};
+	const keyDown = (e) => {
+		onKeyDown?.(e);
+		if (e.target !== e.currentTarget || e.altKey || e.ctrlKey || e.metaKey) return;
+		const { view, size } = latest.current;
+		const by = {
+			ArrowLeft: [KEY_PAN, 0],
+			ArrowRight: [-80, 0],
+			ArrowUp: [0, KEY_PAN],
+			ArrowDown: [0, -80]
+		}[e.key];
+		if (by) setView(pan(view, by, size));
+		else if (e.key === "+" || e.key === "=") setView({ zoom: Math.round(view.zoom) + 1 });
+		else if (e.key === "-" || e.key === "_") setView({ zoom: Math.round(view.zoom) - 1 });
+		else return;
+		e.preventDefault();
+	};
+	const z = Math.round(Math.min(view.zoom, provider.maxZoom ?? 19));
+	const value = {
+		...view,
+		size,
+		project: engine ? (ll) => platform?.project(ll) ?? NAN : (ll) => project(ll, view, size),
+		unproject: engine ? (p) => platform?.unproject(p) ?? NAN : (p) => unproject(p, view, size),
+		setView
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		ref,
+		"aria-roledescription": "map",
+		"aria-label": "Map",
+		tabIndex: 0,
+		...props,
+		...gestures,
+		onKeyDown: keyDown,
+		style: {
+			position: "relative",
+			overflow: "hidden",
+			touchAction: engine ? void 0 : "none",
+			userSelect: "none",
+			...style
+		},
+		children: [
+			engine ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: engineRef,
+				style: {
+					position: "absolute",
+					inset: 0
+				}
+			}) : size[0] > 0 && visibleTiles(view, size, Math.max(0, z)).map((t) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+				src: tileUrl(provider, t.z, t.x, t.y),
+				alt: "",
+				"data-map-tile": "",
+				draggable: false,
+				style: {
+					position: "absolute",
+					left: t.left,
+					top: t.top,
+					width: t.width,
+					height: t.height,
+					maxWidth: "none",
+					pointerEvents: "none"
+				}
+			}, t.key)),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MapContext.Provider, {
+				value,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: {
+						position: "absolute",
+						inset: 0,
+						pointerEvents: "none"
+					},
+					children
+				})
+			}),
+			!engine && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-map-attribution": "",
+				"data-map-overlay": "",
+				style: {
+					position: "absolute",
+					right: 0,
+					bottom: 0,
+					padding: "1px 5px",
+					font: "11px/1.4 system-ui, sans-serif",
+					color: "#333",
+					background: "rgba(255, 255, 255, 0.8)"
+				},
+				children: provider.attribution
+			})
+		]
+	});
+}
+//#endregion
+//#region src/overlays.tsx
+/** Placed at a coordinate, anchored by `transform`, hidden while the projection is unknown. */
+function useAnchor(lngLat, transform) {
+	const [x, y] = useMap().project(lngLat);
+	return {
+		position: "absolute",
+		left: 0,
+		top: 0,
+		transform: `translate(${x}px, ${y}px) ${transform}`,
+		visibility: Number.isNaN(x) ? "hidden" : void 0
+	};
+}
+const pin = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	width: "27",
+	height: "41",
+	viewBox: "0 0 27 41",
+	"aria-hidden": "true",
+	style: { display: "block" },
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		d: "M13.5 1C6.6 1 1 6.6 1 13.5 1 23 13.5 40 13.5 40S26 23 26 13.5C26 6.6 20.4 1 13.5 1Z",
+		fill: "#e5484d",
+		stroke: "#fff",
+		strokeWidth: "2"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+		cx: "13.5",
+		cy: "13.5",
+		r: "4.5",
+		fill: "#fff"
+	})]
+});
+/** A pin at a coordinate. With `onClick` it is a button, else it lets the map be dragged through it. */
+function Marker({ lngLat, children = pin, onClick, label, className, style }) {
+	const anchor = {
+		...useAnchor(lngLat, "translate(-50%, -100%)"),
+		...style
+	};
+	if (!onClick) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		style: anchor,
+		children
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		"data-map-overlay": "",
+		"aria-label": label,
+		onClick,
+		className,
+		style: {
+			padding: 0,
+			border: 0,
+			background: "none",
+			cursor: "pointer",
+			pointerEvents: "auto",
+			...anchor
+		},
+		children
+	});
+}
+const card = {
+	padding: "8px 12px",
+	borderRadius: 8,
+	background: "#fff",
+	color: "#111",
+	font: "14px/1.4 system-ui, sans-serif",
+	boxShadow: "0 2px 12px rgba(0, 0, 0, 0.25)"
+};
+/**
+* A box above a coordinate. Render it while it should be open. A `className` replaces its
+* default white card, so the look can come from your styles.
+*/
+function Popup({ lngLat, offset = 44, onClose, closeLabel = "Close", closeIcon = "×", className, style, children, onKeyDown, ...props }) {
+	const anchor = useAnchor(lngLat, `translate(-50%, calc(-100% - ${offset}px))`);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "dialog",
+		"data-map-overlay": "",
+		className,
+		onKeyDown: (e) => {
+			onKeyDown?.(e);
+			if (e.key === "Escape" && onClose) {
+				e.stopPropagation();
+				onClose();
+			}
+		},
+		...props,
+		style: {
+			...className ? null : card,
+			...anchor,
+			pointerEvents: "auto",
+			userSelect: "text",
+			...style
+		},
+		children: [onClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			"aria-label": closeLabel,
+			onClick: onClose,
+			"data-map-popup-close": "",
+			style: className ? void 0 : {
+				float: "right",
+				margin: "-4px -6px 0 8px",
+				padding: 0,
+				border: 0,
+				background: "none",
+				font: "inherit",
+				fontSize: 18,
+				lineHeight: 1,
+				cursor: "pointer",
+				color: "inherit"
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"aria-hidden": "true",
+				style: { display: "contents" },
+				children: closeIcon
+			})
+		}), children]
+	});
+}
+const zoomButton = {
+	display: "block",
+	width: 32,
+	height: 32,
+	border: 0,
+	background: "#fff",
+	color: "#111",
+	font: "20px/1 system-ui, sans-serif",
+	cursor: "pointer"
+};
+/** Plus and minus buttons in the top right corner. A `className` replaces their default look. */
+function ZoomControl({ zoomInLabel = "Zoom in", zoomOutLabel = "Zoom out", className, style }) {
+	const map = useMap();
+	const look = className ? void 0 : zoomButton;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-map-overlay": "",
+		className,
+		style: {
+			position: "absolute",
+			top: 10,
+			right: 10,
+			pointerEvents: "auto",
+			...className ? null : {
+				borderRadius: 6,
+				overflow: "hidden",
+				boxShadow: "0 1px 6px rgba(0, 0, 0, 0.3)"
+			},
+			...style
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			"aria-label": zoomInLabel,
+			style: look,
+			onClick: () => map.setView({ zoom: Math.round(map.zoom) + 1 }),
+			children: "+"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			"aria-label": zoomOutLabel,
+			style: look && {
+				...look,
+				borderTop: "1px solid #ddd"
+			},
+			onClick: () => map.setView({ zoom: Math.round(map.zoom) - 1 }),
+			children: "−"
+		})]
+	});
+}
+//#endregion
+exports.Map = Map;
+exports.Marker = Marker;
+exports.Popup = Popup;
+exports.TILE_SIZE = TILE_SIZE;
+exports.ZoomControl = ZoomControl;
+exports.appleMaps = appleMaps;
+exports.googleMaps = googleMaps;
+exports.lngLatToWorld = lngLatToWorld;
+exports.loadScript = loadScript;
+exports.normalize = normalize;
+exports.pan = pan;
+exports.project = project;
+exports.providers = providers;
+exports.tileUrl = tileUrl;
+exports.unproject = unproject;
+exports.useMap = useMap;
+exports.visibleTiles = visibleTiles;
+exports.worldToLngLat = worldToLngLat;
+exports.zoomAround = zoomAround;
+exports.zoomsOnWheel = zoomsOnWheel;
+
+//# sourceMappingURL=index.cjs.map