@protobase/ui 0.19.3 → 0.19.4

package/dist/app/displays/map-display.js

@@ -25,7 +25,8 @@ const arrow = "flex size-8 items-center justify-center rounded-full border borde
 * elsewhere clears it. A marker and a card whose record's position is approximate say so.
 */
 const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove, footer = true, flush = false }) => {
-	const style = useAdminMeta().maps?.style;
+	const maps = useAdminMeta().maps;
+	const style = maps?.style;
 	const [chosen, setChosen] = useState();
 	const [area, setArea] = useState();
 	const settled = useDebounced(area, settleMs);
@@ -70,6 +71,7 @@ const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove,
 					fallback: null,
 					children: /* @__PURE__ */ jsx(RecordsMap, {
 						style,
+						layers: maps?.layers,
 						initial: at,
 						points,
 						buckets,

package/dist/app/map/map-layer-choice.js

@@ -0,0 +1,11 @@
+import { guarded } from "../../lib/guarded.js";
+//#region src/app/map/map-layer-choice.ts
+const mapLayerStorageKey = "protobase:map-layer";
+/** The layer the browser last chose, if the app still offers it: else the style's own map, which is the default. */
+const chosenMapLayer = (layers, id) => layers.find((layer) => layer.id === id);
+/** The id of the layer chosen in this browser, if any; unavailable storage reads as the default map. */
+const readMapLayer = (storage) => guarded(() => storage.getItem(mapLayerStorageKey), null);
+/** Remembers a layer by its id, and the default map by forgetting the choice, so the default costs no storage. */
+const writeMapLayer = (storage, id) => guarded(() => id === void 0 ? storage.removeItem(mapLayerStorageKey) : storage.setItem(mapLayerStorageKey, id), void 0);
+//#endregion
+export { chosenMapLayer, mapLayerStorageKey, readMapLayer, writeMapLayer };

package/dist/app/map/map-layer-switch.js

@@ -0,0 +1,55 @@
+import { Segmented } from "../../primitives/segmented.js";
+import { chosenMapLayer, readMapLayer, writeMapLayer } from "./map-layer-choice.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Layer, Source, useMap } from "react-map-gl/maplibre";
+//#region src/app/map/map-layer-switch.tsx
+const styleValue = "";
+/**
+* Inside a map, a switch in its top left corner between the style's map and each of `layers`, and the chosen layer's
+* tiles drawn over the style's, under `below` when the map has that layer, such as the areas around records. The
+* layer's credit joins the map's attribution while it shows. Outside its bounds the style's map shows through. The
+* choice is remembered in this browser, for every map. Nothing without layers.
+*/
+const MapLayerSwitch = ({ layers, below }) => {
+	const [chosenId, setChosenId] = useState(() => readMapLayer(localStorage));
+	const { current: map } = useMap();
+	if (!layers || layers.length === 0) return null;
+	const chosen = chosenMapLayer(layers, chosenId);
+	const choose = (value) => {
+		const id = value === styleValue ? void 0 : value;
+		writeMapLayer(localStorage, id);
+		setChosenId(id ?? null);
+	};
+	const beforeId = below && map?.getLayer(below) ? below : void 0;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [chosen && /* @__PURE__ */ jsx(Source, {
+		id: `map-layer-${chosen.id}`,
+		type: "raster",
+		tiles: [chosen.tiles],
+		tileSize: 256,
+		attribution: chosen.attribution,
+		maxzoom: chosen.maxzoom ?? 22,
+		...chosen.bounds && { bounds: chosen.bounds },
+		children: /* @__PURE__ */ jsx(Layer, {
+			id: `map-layer-${chosen.id}`,
+			type: "raster",
+			...beforeId && { beforeId }
+		})
+	}, chosen.id), /* @__PURE__ */ jsx("div", {
+		className: "absolute left-2.5 top-2.5 z-10 rounded-md shadow",
+		children: /* @__PURE__ */ jsx(Segmented, {
+			label: "Map layer",
+			value: chosen?.id ?? styleValue,
+			onChange: choose,
+			options: [{
+				value: styleValue,
+				label: "Map"
+			}, ...layers.map((layer) => ({
+				value: layer.id,
+				label: layer.label
+			}))]
+		})
+	})] });
+};
+//#endregion
+export { MapLayerSwitch };

package/dist/app/map/map-section.js

@@ -12,7 +12,8 @@ const defaultZoom = 15;
 * `/meta` names. Without a style, or for a record without a position, there is nothing to draw and no section.
 */
 const MapSection = ({ item, record }) => {
-	const style = useAdminMeta().maps?.style;
+	const maps = useAdminMeta().maps;
+	const style = maps?.style;
 	const position = recordPosition(record, item);
 	if (!style || !position) return null;
 	const map = /* @__PURE__ */ jsx("div", {
@@ -21,6 +22,7 @@ const MapSection = ({ item, record }) => {
 			fallback: null,
 			children: /* @__PURE__ */ jsx(RecordMap, {
 				style,
+				layers: maps?.layers,
 				position,
 				zoom: item.zoom ?? defaultZoom
 			}, `${position.latitude},${position.longitude}`)

package/dist/app/map/position-areas.js

@@ -2,6 +2,8 @@ import { areaFeatures, fadeIn } from "./area-features.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Layer, Source } from "react-map-gl/maplibre";
 //#region src/app/map/position-areas.tsx
+/** The areas' lowest layer, which a layer of tiles goes under. */
+const areaLayerId = "position-area-fills";
 const polygons = [
 	"==",
 	["get", "kind"],
@@ -38,7 +40,7 @@ const PositionAreas = ({ points, selected, colors }) => {
 		data,
 		children: [
 			/* @__PURE__ */ jsx(Layer, {
-				id: "position-area-fills",
+				id: areaLayerId,
 				type: "fill",
 				filter: polygons,
 				paint: {
@@ -75,4 +77,4 @@ const PositionAreas = ({ points, selected, colors }) => {
 	});
 };
 //#endregion
-export { PositionAreas };
+export { PositionAreas, areaLayerId };

package/dist/app/map/record-map.js

@@ -1,3 +1,4 @@
+import { MapLayerSwitch } from "./map-layer-switch.js";
 import { mapLib } from "./maplibre.js";
 import { MapPin } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -5,9 +6,9 @@ import { Map as Map$1, Marker, NavigationControl } from "react-map-gl/maplibre";
 //#region src/app/map/record-map.tsx
 /**
 * A map of `style` centred on `position` at `zoom`, with a pin on it. It pans and zooms with two fingers on a phone and
-* with Ctrl or Cmd and the wheel, so scrolling the page past it does not move it.
+* with Ctrl or Cmd and the wheel, so scrolling the page past it does not move it. With `layers`, it switches to them.
 */
-const RecordMap = ({ style, position, zoom }) => /* @__PURE__ */ jsxs(Map$1, {
+const RecordMap = ({ style, layers, position, zoom }) => /* @__PURE__ */ jsxs(Map$1, {
 	mapLib,
 	mapStyle: style,
 	initialViewState: {
@@ -19,16 +20,20 @@ const RecordMap = ({ style, position, zoom }) => /* @__PURE__ */ jsxs(Map$1, {
 		width: "100%",
 		height: "100%"
 	},
-	children: [/* @__PURE__ */ jsx(NavigationControl, { showCompass: false }), /* @__PURE__ */ jsx(Marker, {
-		latitude: position.latitude,
-		longitude: position.longitude,
-		anchor: "bottom",
-		children: /* @__PURE__ */ jsx(MapPin, {
-			"aria-hidden": true,
-			className: "size-8 fill-primary text-primary-foreground drop-shadow",
-			strokeWidth: 1.5
+	children: [
+		/* @__PURE__ */ jsx(NavigationControl, { showCompass: false }),
+		/* @__PURE__ */ jsx(MapLayerSwitch, { layers }),
+		/* @__PURE__ */ jsx(Marker, {
+			latitude: position.latitude,
+			longitude: position.longitude,
+			anchor: "bottom",
+			children: /* @__PURE__ */ jsx(MapPin, {
+				"aria-hidden": true,
+				className: "size-8 fill-primary text-primary-foreground drop-shadow",
+				strokeWidth: 1.5
+			})
 		})
-	})]
+	]
 });
 //#endregion
 export { RecordMap };

package/dist/app/map/records-map.js

@@ -1,7 +1,8 @@
 import { cn } from "../../lib/cn.js";
 import { groupPoints } from "../displays/map-groups.js";
+import { MapLayerSwitch } from "./map-layer-switch.js";
 import { mapLib } from "./maplibre.js";
-import { PositionAreas } from "./position-areas.js";
+import { PositionAreas, areaLayerId } from "./position-areas.js";
 import { themeColor } from "./theme-color.js";
 import { useEffect, useRef, useState } from "react";
 import { MapPin } from "lucide-react";
@@ -32,7 +33,7 @@ const corners = (bounds) => [[bounds.west, bounds.south], [bounds.east, bounds.n
 * marker selects its records; choosing the map elsewhere clears the selection. A chosen marker the covered bottom would
 * hide moves up into the open part of the map.
 */
-const RecordsMap = ({ style, initial, points, buckets, fit, onFitted, onMove, selected, covered, onSelect, onClear, markerLabel, bucketLabel }) => {
+const RecordsMap = ({ style, layers, initial, points, buckets, fit, onFitted, onMove, selected, covered, onSelect, onClear, markerLabel, bucketLabel }) => {
 	const ref = useRef(null);
 	const [groups, setGroups] = useState([]);
 	const [colors, setColors] = useState();
@@ -117,6 +118,10 @@ const RecordsMap = ({ style, initial, points, buckets, fit, onFitted, onMove, se
 		onClick: onClear,
 		children: [
 			/* @__PURE__ */ jsx(NavigationControl, { showCompass: false }),
+			/* @__PURE__ */ jsx(MapLayerSwitch, {
+				layers,
+				below: areaLayerId
+			}),
 			colors && /* @__PURE__ */ jsx(PositionAreas, {
 				points,
 				selected,

package/dist/data/meta-data.d.ts

@@ -1,4 +1,4 @@
-import { PluginRef, ResourcePermissions, SourceRef } from "@protobase/client";
+import { MapLayerModel, PluginRef, ResourcePermissions, SourceRef } from "@protobase/client";
 import { BottomBarModel, ResourceModel, SignInViewModel, UserMenuModel, ViewModel } from "@protobase/schema";
 import { PageModel } from "@protobase/layout";
 //#region src/data/meta-data.d.ts
@@ -27,9 +27,10 @@ export type MetaData = {
     dsn: string;
     environment?: string;
   };
-  /** The map style the record page's maps are drawn with, when the app has one (see `MapSection`). */
+  /** The map style the app's maps are drawn with, and the layers they may switch to, when the app has one (see `MapSection`). */
   maps?: {
     style: string;
+    layers?: MapLayerModel[];
   };
   /** The hosts besides the app's own whose images are drawn with the page's referrer (see `FileImage`). */
   files?: {

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.19.3";
+var version = "0.19.4";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };