@sjvair/monitor-map 3.0.3 → 3.0.5

package/dist/lib/hms/hms.svelte.js

@@ -1,78 +1,227 @@
-import * as e from "svelte/internal/client";
-import { SvelteMap as t } from "svelte/reactivity";
-import { featureCollection as n, point as r } from "@turf/helpers";
-import { getHMSFire as i, getHMSSmoke as a } from "@sjvair/sdk/hms";
-import o from "@turf/clusters-dbscan";
-//#region src/lib/hms/hms.svelte.ts
-var s = 2, c = 1, l = class {
-	#e = e.state();
-	get smoke() {
-		return e.get(this.#e);
-	}
-	set smoke(t) {
-		e.set(this.#e, t, !0);
-	}
-	#t = e.state();
-	get fire() {
-		return e.get(this.#t);
-	}
-	set fire(t) {
-		e.set(this.#t, t, !0);
-	}
-	#n = e.state();
-	get fireGroups() {
-		return e.get(this.#n);
-	}
-	set fireGroups(t) {
-		e.set(this.#n, t, !0);
-	}
-	async init() {
-		await Promise.allSettled([this.loadSmoke(), this.loadFire()]);
-	}
-	async loadSmoke() {
-		this.smoke = await a();
-	}
-	async loadFire() {
-		try {
-			let e = u((await i()).filter((e) => e.frp !== null));
-			this.fire = e, this.fireGroups = d(e);
-		} catch (e) {
-			console.error("HMS fire load failed:", e);
-		}
-	}
-};
-function u(e) {
-	let t = /* @__PURE__ */ new Map();
-	for (let n of e) {
-		let [e, r] = n.geometry.coordinates, i = `${e},${r}`, a = t.get(i);
-		(!a || n.timestamp > a.timestamp) && t.set(i, n);
-	}
-	return Array.from(t.values());
+import { getHMSFire, getHMSSmoke } from "@sjvair/sdk/hms";
+import clustersDbscan from "@turf/clusters-dbscan";
+import { featureCollection, point } from "@turf/helpers";
+const HMS_FIRE_DBSCAN_EPSILON = 2;
+const HMS_FIRE_DBSCAN_MIN_POINTS = 1;
+class HmsManager {
+    smoke = $state();
+    fire = $state();
+    fireGroups = $state();
+    async init() {
+        await Promise.allSettled([this.loadSmoke(), this.loadFire()]);
+    }
+    async loadSmoke() {
+        this.smoke = await getHMSSmoke();
+    }
+    async loadFire() {
+        try {
+            const raw = await getHMSFire();
+            const filtered = raw.filter((d) => d.frp !== null);
+            const deduped = deduplicateByCoordinates(filtered);
+            this.fire = deduped;
+            this.fireGroups = computeFireGroups(deduped);
+        }
+        catch (err) {
+            console.error("HMS fire load failed:", err);
+        }
+    }
 }
-function d(e) {
-	if (!e.length) return [];
-	let i = o(n(e.map((e) => r(e.geometry.coordinates, {
-		fireId: e.id,
-		frp: e.frp
-	}))), s, {
-		minPoints: c,
-		units: "kilometers"
-	}), a = new t();
-	for (let e of i.features) {
-		let t = e.properties, n = t.dbscan === "noise" ? `noise-${t.fireId}` : `cluster-${t.cluster}`, [r, i] = e.geometry.coordinates, o = a.get(n) ?? {
-			frps: [],
-			lngs: [],
-			lats: []
-		};
-		o.frps.push(t.frp), o.lngs.push(r), o.lats.push(i), a.set(n, o);
-	}
-	return Array.from(a.entries()).map(([e, { frps: t, lngs: n, lats: r }]) => ({
-		id: `hms-fire-group-${e}`,
-		coordinates: [n.reduce((e, t) => e + t, 0) / n.length, r.reduce((e, t) => e + t, 0) / r.length],
-		avgFrp: t.reduce((e, t) => e + t, 0) / t.length,
-		count: t.length
-	}));
+function deduplicateByCoordinates(fires) {
+    const latest = {};
+    for (const fire of fires) {
+        const [lng, lat] = fire.geometry.coordinates;
+        const key = `${lng},${lat}`;
+        const existing = latest[key];
+        if (!existing || fire.timestamp > existing.timestamp) {
+            latest[key] = fire;
+        }
+    }
+    return Object.values(latest);
 }
-var f = new l();
-//#endregion
-export { f as hmsManager };
+function computeFireGroups(fires) {
+    if (!fires.length)
+        return [];
+    const fc = featureCollection(fires.map((d) => point(d.geometry.coordinates, { fireId: d.id, frp: d.frp })));
+    const clustered = clustersDbscan(fc, HMS_FIRE_DBSCAN_EPSILON, {
+        minPoints: HMS_FIRE_DBSCAN_MIN_POINTS,
+        units: "kilometers"
+    });
+    const groups = {};
+    for (const feature of clustered.features) {
+        const props = feature.properties;
+        // With minPoints=1 every point self-qualifies as core, so "noise" never occurs.
+        // This branch activates correctly if minPoints is raised above 1 in future.
+        const key = props.dbscan === "noise" ? `noise-${props.fireId}` : `cluster-${props.cluster}`;
+        const [lng, lat] = feature.geometry.coordinates;
+        const entry = groups[key] ?? { frps: [], lngs: [], lats: [] };
+        entry.frps.push(props.frp);
+        entry.lngs.push(lng);
+        entry.lats.push(lat);
+        groups[key] = entry;
+    }
+    return Object.entries(groups).map(([key, { frps, lngs, lats }]) => ({
+        id: `hms-fire-group-${key}`,
+        coordinates: [
+            lngs.reduce((s, v) => s + v, 0) / lngs.length,
+            lats.reduce((s, v) => s + v, 0) / lats.length
+        ],
+        avgFrp: frps.reduce((s, v) => s + v, 0) / frps.length,
+        count: frps.length
+    }));
+}
+//async function fakeFireData(): Promise<Array<HMSFireGeoJSON>> {
+//  const response: FetchHMSFireResponse["body"] = {
+//    data: [
+//      {
+//        id: "4Kx7mNpQrQ",
+//        date: "2026-04-13",
+//        satellite: "GOES-16",
+//        timestamp: "2026-04-13T18:30:00Z",
+//        frp: 360,
+//        ecosystem: 4,
+//        method: "AF",
+//        geometry: {
+//          type: "Point",
+//          coordinates: [-118.532, 36.591],
+//        },
+//      },
+//      {
+//        id: "4Kx7mNpQrD",
+//        date: "2026-04-13",
+//        satellite: "GOES-16",
+//        timestamp: "2026-04-13T18:30:00Z",
+//        frp: 20,
+//        ecosystem: 4,
+//        method: "AF",
+//        geometry: {
+//          type: "Point",
+//          coordinates: [-118.632, 36.691],
+//        },
+//      },
+//      {
+//        id: "4Kx7mNpQrT",
+//        date: "2026-04-13",
+//        satellite: "GOES-16",
+//        timestamp: "2026-04-13T18:30:00Z",
+//        frp: 152.7,
+//        ecosystem: 4,
+//        method: "AF",
+//        geometry: {
+//          type: "Point",
+//          coordinates: [-118.832, 36.491],
+//        },
+//      },
+//      {
+//        id: "9vBjLsWqYm",
+//        date: "2026-04-13",
+//        satellite: "GOES-17",
+//        timestamp: "2026-04-13T17:45:00Z",
+//        frp: 58.2,
+//        ecosystem: 2,
+//        method: "AF",
+//        geometry: {
+//          type: "Point",
+//          coordinates: [-119.204, 37.112],
+//        },
+//      },
+//      {
+//        id: "2HcFnRkVxZ",
+//        date: "2026-04-13",
+//        satellite: "GOES-16",
+//        timestamp: "2026-04-13T16:00:00Z",
+//        frp: null,
+//        ecosystem: 7,
+//        method: "FDC",
+//        geometry: {
+//          type: "Point",
+//          coordinates: [-120.571, 35.883],
+//        },
+//      },
+//    ],
+//    page: 1,
+//    count: 3,
+//    pages: 1,
+//    has_next_page: false,
+//    has_previous_page: false,
+//  };
+//  return Promise.resolve(response.data);
+//}
+//async function fakeSmokeData(): Promise<Array<HMSSmokeGeoJSON>> {
+//	const response: FetchHMSSmokeResponse["body"] = {
+//		data: [
+//			{
+//				id: "sM3kNpQrL1",
+//				date: "2026-04-13",
+//				satellite: "GOES-16",
+//				start: "2026-04-13T12:00:00Z",
+//				end: "2026-04-13T18:00:00Z",
+//				density: "light",
+//				geometry: {
+//					type: "MultiPolygon",
+//					coordinates: [
+//						[
+//							[
+//								[-122.5, 39.5],
+//								[-120.5, 39.5],
+//								[-120.5, 41.0],
+//								[-122.5, 41.0],
+//								[-122.5, 39.5]
+//							]
+//						]
+//					]
+//				}
+//			},
+//			{
+//				id: "sM3kNpQrL2",
+//				date: "2026-04-13",
+//				satellite: "GOES-16",
+//				start: "2026-04-13T12:00:00Z",
+//				end: "2026-04-13T18:00:00Z",
+//				density: "medium",
+//				geometry: {
+//					type: "MultiPolygon",
+//					coordinates: [
+//						[
+//							[
+//								[-121.0, 36.5],
+//								[-119.0, 36.5],
+//								[-119.0, 38.0],
+//								[-121.0, 38.0],
+//								[-121.0, 36.5]
+//							]
+//						]
+//					]
+//				}
+//			},
+//			{
+//				id: "sM3kNpQrL3",
+//				date: "2026-04-13",
+//				satellite: "GOES-16",
+//				start: "2026-04-13T12:00:00Z",
+//				end: "2026-04-13T18:00:00Z",
+//				density: "heavy",
+//				geometry: {
+//					type: "MultiPolygon",
+//					coordinates: [
+//						[
+//							[
+//								[-119.0, 33.5],
+//								[-116.5, 33.5],
+//								[-116.5, 35.0],
+//								[-119.0, 35.0],
+//								[-119.0, 33.5]
+//							]
+//						]
+//					]
+//				}
+//			}
+//		],
+//		page: 1,
+//		count: 3,
+//		pages: 1,
+//		has_next_page: false,
+//		has_previous_page: false
+//	};
+//	return Promise.resolve(response.data);
+//}
+export const hmsManager = new HmsManager();

package/dist/lib/index.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Usage in a host app:
+ *
+ * ```ts
+ * // router.ts
+ * import { createRouter } from "sv-router";
+ * import { monitorMapRoutes } from "@sjvair/monitor-map";
+ *
+ * export const { route, navigate, p, isActive, Router } = createRouter({
+ *   "/my-map": monitorMapRoutes
+ *   // ...the host app's own routes
+ * });
+ * ```
+ *
+ * ```svelte
+ * <!-- app root -->
+ * <script>
+ *   import { provideMonitorMapRouter } from "@sjvair/monitor-map";
+ *   import { route, navigate, p, isActive, Router } from "./router";
+ *
+ *   provideMonitorMapRouter({ route, navigate, p, isActive, basePath: "/my-map" });
+ * </script>
+ *
+ * <Router />
+ * ```
+ */
+export { monitorMapRoutes } from "./routes";
+export { ROUTER_KEY, provideMonitorMapRouter, useMonitorMapRouter, type MonitorMapRouterApi } from "./router-context";
+export { monitorsManager } from "./monitors/monitors.svelte";
+export type { MonitorsManager } from "./monitors/monitors.svelte";
+export { collocationSitesManager } from "./collocation-sites/collocations.svelte";
+export type { CollocationSitesManager } from "./collocation-sites/collocations.svelte";
+export { evStationsManager } from "./ev-stations/ev-stations.svelte";
+export type { EvStationsManager } from "./ev-stations/ev-stations.svelte";
+export { hmsManager } from "./hms/hms.svelte";
+export type { HMSManager } from "./hms/hms.svelte";
+export { mapManager, DefaultMapStyle, initializeMap } from "./map/map.svelte";
+export type { MapManager } from "./map/map.svelte";
+export { monitorsMapIntegration } from "./monitors/monitors-map-integration.svelte.ts";
+export { collocationSitesMapIntegration } from "./collocation-sites/collocations-map-integration.svelte.ts";
+export { evStationsMapIntegration } from "./ev-stations/ev-stations-map-integration.svelte.ts";
+export { windMapIntegration } from "./wind/wind.svelte";
+export { baseLayerSeperator } from "./map/integrations/base-layer-seperator";
+export { hmsFireMapIntegration } from "./hms/hms-fire-map-integration.svelte.ts";
+export { hmsSmokeMapIntegration } from "./hms/hms-smoke-map-integration.svelte.ts";
+export { default as Map } from "./map/Map.svelte";
+export { default as Menu } from "./map/Menu.svelte";
+export { default as LoadScreen, loadScreenState, enable as enableLoadScreen, disable as disableLoadScreen } from "./LoadScreen.svelte";
+export type { LoadScreenState } from "./LoadScreen.svelte";
+export { default as MonitorsDisplayOptions } from "./monitors/components/MonitorsDisplayOptions.svelte";
+export { default as EvStationsDisplayOptions } from "./ev-stations/components/EvStationsDisplayOptions.svelte";
+export { default as MapLayersDisplayOptions } from "./components/MapLayersDisplayOptions.svelte";
+export { default as MapStyleDisplayOptions } from "./map/MapStyleDisplayOptions.svelte";
+export { default as ToggleSwitch } from "./components/ToggleSwitch.svelte";
+export { default as SegmentedControl } from "./components/SegmentedControl.svelte";
+export { MapIntegration } from "./map/integrations/map-integration.svelte.ts";
+export { MapLayerIntegration } from "./map/integrations/map-layer-integration.svelte.ts";
+export { MapIconLayerIntegration as MapGeoJSONIntegration } from "./map/integrations/map-geojson-integration.svelte.ts";
+export type { SomeMapIntegration } from "./map/integrations/types";
+export type { MonitorsMapIntegration } from "./monitors/monitors-map-integration.svelte.ts";
+export type { WindMapIntegration } from "./wind/wind.svelte.ts";
+export type { EvStationsMapIntegration } from "./ev-stations/ev-stations-map-integration.svelte.ts";
+export type { HMSFireMapIntegration } from "./hms/hms-fire-map-integration.svelte.ts";
+export type { HMSSmokeMapIntegration } from "./hms/hms-smoke-map-integration.svelte.ts";
+export type { HMSFireGroup } from "./hms/hms.svelte.ts";
+export type { MonitorMapFeature, MonitorMarkerProperties, MonitorClusterMapFeature, MonitorClusterMarkerProperties } from "./monitors/types";
+export type { CollocationSiteMapFeature, CollocationSiteMarkerProperties } from "./collocation-sites/types";
+export type { EvStation, EvStationMarkerProperties, EvStationMapFeature, EvStationClusterMapFeature } from "./ev-stations/types";

package/dist/lib/index.js

@@ -1,21 +1,56 @@
-import e, { disable as t, enable as n, loadScreenState as r } from "./LoadScreen.js";
-import { DefaultMapStyle as i, initializeMap as a, mapManager as o } from "./map/map.svelte.js";
-import s from "./map/Map.js";
-import c from "./map/Menu.js";
-import l from "./components/SegmentedControl.js";
-import u from "./components/ToggleSwitch.js";
-import { monitorsManager as d } from "./monitors/monitors.svelte.js";
-import { MapIntegration as f } from "./map/integrations/map-integration.svelte.js";
-import { MapLayerIntegration as p } from "./map/integrations/map-layer-integration.svelte.js";
-import { MapIconLayerIntegration as m } from "./map/integrations/map-geojson-integration.svelte.js";
-import { monitorsMapIntegration as h } from "./monitors/monitors-map-integration.svelte.js";
-import g from "./monitors/components/MonitorsDisplayOptions.js";
-import { baseLayerSeperator as _ } from "./map/integrations/base-layer-seperator.js";
-import { windMapIntegration as v } from "./wind/wind.svelte.js";
-import { collocationSitesManager as y } from "./collocation-sites/collocations.svelte.js";
-import { collocationSitesMapIntegration as b } from "./collocation-sites/collocations-map-integration.svelte.js";
-import x from "./components/MapLayersDisplayOptions.js";
-import S from "./map/MapStyleDisplayOptions.js";
-import { ROUTER_KEY as C, provideMonitorMapRouter as w, useMonitorMapRouter as T } from "./router-context.js";
-import { monitorMapRoutes as E } from "./routes.js";
-export { i as DefaultMapStyle, e as LoadScreen, s as Map, m as MapGeoJSONIntegration, f as MapIntegration, p as MapLayerIntegration, x as MapLayersDisplayOptions, S as MapStyleDisplayOptions, c as Menu, g as MonitorsDisplayOptions, C as ROUTER_KEY, l as SegmentedControl, u as ToggleSwitch, _ as baseLayerSeperator, y as collocationSitesManager, b as collocationSitesMapIntegration, t as disableLoadScreen, n as enableLoadScreen, a as initializeMap, r as loadScreenState, o as mapManager, E as monitorMapRoutes, d as monitorsManager, h as monitorsMapIntegration, w as provideMonitorMapRouter, T as useMonitorMapRouter, v as windMapIntegration };
+/**
+ * Usage in a host app:
+ *
+ * ```ts
+ * // router.ts
+ * import { createRouter } from "sv-router";
+ * import { monitorMapRoutes } from "@sjvair/monitor-map";
+ *
+ * export const { route, navigate, p, isActive, Router } = createRouter({
+ *   "/my-map": monitorMapRoutes
+ *   // ...the host app's own routes
+ * });
+ * ```
+ *
+ * ```svelte
+ * <!-- app root -->
+ * <script>
+ *   import { provideMonitorMapRouter } from "@sjvair/monitor-map";
+ *   import { route, navigate, p, isActive, Router } from "./router";
+ *
+ *   provideMonitorMapRouter({ route, navigate, p, isActive, basePath: "/my-map" });
+ * </script>
+ *
+ * <Router />
+ * ```
+ */
+export { monitorMapRoutes } from "./routes";
+export { ROUTER_KEY, provideMonitorMapRouter, useMonitorMapRouter } from "./router-context";
+// State managers
+export { monitorsManager } from "./monitors/monitors.svelte";
+export { collocationSitesManager } from "./collocation-sites/collocations.svelte";
+export { evStationsManager } from "./ev-stations/ev-stations.svelte";
+export { hmsManager } from "./hms/hms.svelte";
+export { mapManager, DefaultMapStyle, initializeMap } from "./map/map.svelte";
+// Map integrations
+export { monitorsMapIntegration } from "./monitors/monitors-map-integration.svelte.ts";
+export { collocationSitesMapIntegration } from "./collocation-sites/collocations-map-integration.svelte.ts";
+export { evStationsMapIntegration } from "./ev-stations/ev-stations-map-integration.svelte.ts";
+export { windMapIntegration } from "./wind/wind.svelte";
+export { baseLayerSeperator } from "./map/integrations/base-layer-seperator";
+export { hmsFireMapIntegration } from "./hms/hms-fire-map-integration.svelte.ts";
+export { hmsSmokeMapIntegration } from "./hms/hms-smoke-map-integration.svelte.ts";
+// Components
+export { default as Map } from "./map/Map.svelte";
+export { default as Menu } from "./map/Menu.svelte";
+export { default as LoadScreen, loadScreenState, enable as enableLoadScreen, disable as disableLoadScreen } from "./LoadScreen.svelte";
+export { default as MonitorsDisplayOptions } from "./monitors/components/MonitorsDisplayOptions.svelte";
+export { default as EvStationsDisplayOptions } from "./ev-stations/components/EvStationsDisplayOptions.svelte";
+export { default as MapLayersDisplayOptions } from "./components/MapLayersDisplayOptions.svelte";
+export { default as MapStyleDisplayOptions } from "./map/MapStyleDisplayOptions.svelte";
+export { default as ToggleSwitch } from "./components/ToggleSwitch.svelte";
+export { default as SegmentedControl } from "./components/SegmentedControl.svelte";
+// Integration base classes (extend these to add custom map features)
+export { MapIntegration } from "./map/integrations/map-integration.svelte.ts";
+export { MapLayerIntegration } from "./map/integrations/map-layer-integration.svelte.ts";
+export { MapIconLayerIntegration as MapGeoJSONIntegration } from "./map/integrations/map-geojson-integration.svelte.ts";

package/dist/lib/map/Map.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import "@maptiler/sdk/dist/maptiler-sdk.css";
+	import { initializeMap } from "./map.svelte.ts";
+	import { integrationsManager } from "./integrations/integrations-manager";
+	import type { SomeMapIntegration } from "./integrations/types.ts";
+
+	const { integrations }: { integrations: Array<SomeMapIntegration> } = $props();
+
+	// svelte-ignore state_referenced_locally (we only need the initial reference)
+	integrationsManager.register(...integrations);
+</script>
+
+<div {@attach initializeMap} style="width: 100%; height: 100%;"></div>

package/dist/lib/map/Map.svelte.d.ts

@@ -0,0 +1,8 @@
+import "@maptiler/sdk/dist/maptiler-sdk.css";
+import type { SomeMapIntegration } from "./integrations/types.ts";
+type $$ComponentProps = {
+    integrations: Array<SomeMapIntegration>;
+};
+declare const Map: import("svelte").Component<$$ComponentProps, {}, "">;
+type Map = ReturnType<typeof Map>;
+export default Map;

package/dist/lib/map/MapStyleDisplayOptions.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { MapStyleVariant, ReferenceMapStyle } from "@maptiler/sdk";
+	import { mapManager, DefaultMapStyle } from "./map.svelte";
+	import { MAP_STYLE_OPTIONS } from "./utils.ts";
+	import { integrationsManager } from "./integrations/integrations-manager";
+	import DisplayOption from "../components/DisplayOption.svelte";
+
+	let currentMapStyle: MapStyleVariant = DefaultMapStyle;
+
+	let selectedReferenceStyle: ReferenceMapStyle = $state(DefaultMapStyle.getReferenceStyle());
+	let selectedVariant: MapStyleVariant = $state(DefaultMapStyle);
+
+	const selectedStyleVariants: Array<MapStyleVariant> = $derived(
+		selectedReferenceStyle.getVariants()
+	);
+
+	$effect(() => {
+		const referenceStyleChanged: boolean =
+			selectedReferenceStyle !== currentMapStyle.getReferenceStyle();
+		const variantChanged: boolean = selectedVariant !== currentMapStyle;
+
+		if (mapManager.map !== null) {
+			if (referenceStyleChanged && !variantChanged) {
+				selectedVariant = selectedReferenceStyle.getDefaultVariant();
+			} else if (variantChanged) {
+				mapManager.map.once("style.load", async () => {
+					currentMapStyle = selectedVariant;
+					integrationsManager.refresh();
+				});
+
+				mapManager.map.setStyle(selectedVariant);
+			}
+		}
+	});
+</script>
+
+<DisplayOption>
+	<p class="text-lg font-bold underline">Map Styles</p>
+	<label for="mapStyleType">Style</label>
+	<select
+		id="mapStyleType"
+		name="selectedOption"
+		bind:value={selectedReferenceStyle}
+		class="rounded border p-1"
+	>
+		{#each MAP_STYLE_OPTIONS as mapStyle, idx (idx)}
+			<option value={mapStyle}>{mapStyle.getName()}</option>
+		{/each}
+	</select>
+	<label for="mapStyleVariant">Variant</label>
+	<select
+		id="mapStyleType"
+		name="selectedOption"
+		bind:value={selectedVariant}
+		class="rounded border p-1"
+	>
+		{#each selectedStyleVariants as variant, idx (idx)}
+			<option value={variant}>{variant.getName()}</option>
+		{/each}
+	</select>
+</DisplayOption>

package/dist/lib/map/MapStyleDisplayOptions.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const MapStyleDisplayOptions: import("svelte").Component<Record<string, never>, {}, "">;
+type MapStyleDisplayOptions = ReturnType<typeof MapStyleDisplayOptions>;
+export default MapStyleDisplayOptions;

package/dist/lib/map/Menu.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import type { Attachment } from "svelte/attachments";
+	import { SlidersHorizontalIcon } from "@lucide/svelte";
+
+	let { children } = $props();
+	let isOpen: boolean = $state(false);
+
+	function open() {
+		if (!isOpen) {
+			isOpen = true;
+		}
+	}
+
+	function close() {
+		if (isOpen) {
+			isOpen = false;
+		}
+	}
+
+	const hasTarget = (target: EventTarget | null): target is HTMLElement => target !== null;
+
+	const displayOptionsToggle: Attachment<HTMLDivElement> = (target: HTMLDivElement) => {
+		function toggle(e: PointerEvent) {
+			if (hasTarget(e.target) && target.contains(e.target)) {
+				return "trigger" in e.target.dataset ? close() : open();
+			} else {
+				close();
+			}
+		}
+		document.body.addEventListener("click", toggle);
+
+		return () => document.body.removeEventListener("click", toggle);
+	};
+</script>
+
+<div
+	{@attach displayOptionsToggle}
+	data-trigger
+	class:rounded-full={!isOpen}
+	class:delay-100={!isOpen}
+	class="relative top-0 left-0 flex items-center justify-center overflow-hidden rounded bg-white p-1 shadow transition-all duration-0 select-none"
+>
+	<button
+		class:w-0={isOpen}
+		class:h-0={isOpen}
+		class:opacity-0={isOpen}
+		class="relative size-10 transition-all flex justify-center items-center"
+		aria-label="Display Options"
+	>
+		<SlidersHorizontalIcon size="24" />
+	</button>
+	<div
+		class:h-55={isOpen}
+		class:w-135={isOpen}
+		class="relative flex h-0 w-0 items-center justify-center overflow-x-hidden overflow-y-scroll transition-all duration-250"
+	>
+		<div
+			data-trigger
+			class="absolute top-0 left-0 flex h-fit w-full items-start justify-between gap-4 p-2 flex-wrap"
+		>
+			{@render children?.()}
+		</div>
+	</div>
+</div>

package/dist/lib/map/Menu.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const Menu: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/lib/map/icons.d.ts

@@ -0,0 +1,7 @@
+export declare function square(color: string, borderWidth: number, borderColor?: string): string;
+export declare function circle(color: string, borderWidth: number, borderColor?: string): string;
+export declare function triangle(color: string, borderWidth: number, borderColor?: string): string;
+export declare const CROSSHAIR_ICON_SIZE: number;
+export declare function withCrosshair(baseSvg: string, color?: string): string;
+export declare function asDataURI(svg: string): string;
+export declare function fireIcon(color: string, size: number): string;