@sjvair/monitor-map 3.0.3 → 3.0.5

package/dist/lib/map/integrations/tooltip.svelte.js

@@ -1,81 +1,123 @@
-import { mapManager as e } from "../map.svelte.js";
-import "svelte/internal/client";
-import { XMap as t } from "@tstk/builtin-extensions";
-//#region src/lib/map/integrations/tooltip.svelte.ts
-function n() {
-	a.activeHandle?.clearTooltip();
+import { mapManager } from "../map.svelte";
+import { XMap } from "@tstk/builtin-extensions";
+function handleZoom() {
+    TooltipManager.activeHandle?.clearTooltip();
 }
-function r() {
-	e.map.getCanvas().style.cursor = "pointer";
+function setCursorPointer() {
+    mapManager.map.getCanvas().style.cursor = "pointer";
 }
-function i() {
-	e.map.getCanvas().style.cursor = "";
+function setCursorDefault() {
+    mapManager.map.getCanvas().style.cursor = "";
+}
+export class TooltipManager {
+    static activeHandle = null;
+    isEnabled = false;
+    _tooltips = new XMap();
+    get tooltips() {
+        return this._tooltips.values();
+    }
+    enable(layerId) {
+        if (!mapManager.map || this.isEnabled)
+            return;
+        mapManager.map.on("zoom", handleZoom);
+        this.forEachHandle(layerId, (h) => h.enable());
+        this.isEnabled = true;
+    }
+    disable(layerId) {
+        if (!mapManager.map || !this.isEnabled)
+            return;
+        mapManager.map.off("zoom", handleZoom);
+        this.forEachHandle(layerId, (h) => h.disable());
+        this.isEnabled = false;
+    }
+    get(layerId) {
+        return this._tooltips.get(layerId);
+    }
+    has(layerId) {
+        return this._tooltips.has(layerId);
+    }
+    register(layerId, builder, priority = 0) {
+        const tooltipHandle = new TooltipHandle(layerId, builder, priority);
+        this._tooltips.set(layerId, tooltipHandle);
+        return tooltipHandle;
+    }
+    with(layerId, cb) {
+        const ids = Array.isArray(layerId) ? layerId : [layerId];
+        for (const id of ids) {
+            const tooltip = this._tooltips.get(id);
+            if (tooltip)
+                cb(tooltip);
+        }
+    }
+    forEachHandle(layerId, cb) {
+        if (layerId !== undefined && this._tooltips.has(layerId)) {
+            cb(this._tooltips.get(layerId));
+        }
+        else {
+            for (const h of this.tooltips)
+                cb(h);
+        }
+    }
+}
+class TooltipHandle {
+    layerId;
+    priority;
+    tooltip = null;
+    activeFeatureId = undefined;
+    isEnabled = false;
+    clearTooltip = () => {
+        if (TooltipManager.activeHandle !== this)
+            return;
+        this.tooltip?.remove();
+        this.tooltip = null;
+        TooltipManager.activeHandle = null;
+        this.activeFeatureId = undefined;
+    };
+    setTooltip;
+    constructor(layerId, builder, priority = 0) {
+        this.layerId = layerId;
+        this.priority = priority;
+        this.setTooltip = (evt) => {
+            if (!mapManager.map || !evt.features)
+                return;
+            const featureId = evt.features[0]?.id;
+            const isOwner = TooltipManager.activeHandle === this;
+            const sameFeature = featureId === this.activeFeatureId;
+            if (isOwner && this.tooltip && sameFeature) {
+                this.tooltip.setLngLat(evt.lngLat);
+                return;
+            }
+            const activeHandle = TooltipManager.activeHandle;
+            if (activeHandle !== null && activeHandle !== this && activeHandle.priority >= this.priority)
+                return;
+            activeHandle?.clearTooltip();
+            this.activeFeatureId = undefined;
+            const tooltip = builder(evt);
+            if (tooltip) {
+                this.tooltip = tooltip;
+                TooltipManager.activeHandle = this;
+                this.activeFeatureId = featureId;
+                tooltip.addTo(mapManager.map);
+            }
+        };
+    }
+    enable() {
+        if (!mapManager.map || this.isEnabled)
+            return;
+        mapManager.map.on("mousemove", this.layerId, setCursorPointer);
+        mapManager.map.on("mouseleave", this.layerId, setCursorDefault);
+        mapManager.map.on("mousemove", this.layerId, this.setTooltip);
+        mapManager.map.on("mouseleave", this.layerId, this.clearTooltip);
+        this.isEnabled = true;
+    }
+    disable() {
+        if (!mapManager.map || !this.isEnabled)
+            return;
+        this.clearTooltip();
+        mapManager.map.off("mousemove", this.layerId, setCursorPointer);
+        mapManager.map.off("mouseleave", this.layerId, setCursorDefault);
+        mapManager.map.off("mousemove", this.layerId, this.setTooltip);
+        mapManager.map.off("mouseleave", this.layerId, this.clearTooltip);
+        this.isEnabled = false;
+    }
 }
-var a = class {
-	static activeHandle = null;
-	isEnabled = !1;
-	_tooltips = new t();
-	get tooltips() {
-		return this._tooltips.values();
-	}
-	enable(t) {
-		!e.map || this.isEnabled || (e.map.on("zoom", n), this.forEachHandle(t, (e) => e.enable()), this.isEnabled = !0);
-	}
-	disable(t) {
-		!e.map || !this.isEnabled || (e.map.off("zoom", n), this.forEachHandle(t, (e) => e.disable()), this.isEnabled = !1);
-	}
-	get(e) {
-		return this._tooltips.get(e);
-	}
-	has(e) {
-		return this._tooltips.has(e);
-	}
-	register(e, t, n = 0) {
-		let r = new o(e, t, n);
-		return this._tooltips.set(e, r), r;
-	}
-	with(e, t) {
-		let n = Array.isArray(e) ? e : [e];
-		for (let e of n) {
-			let n = this._tooltips.get(e);
-			n && t(n);
-		}
-	}
-	forEachHandle(e, t) {
-		if (e !== void 0 && this._tooltips.has(e)) t(this._tooltips.get(e));
-		else for (let e of this.tooltips) t(e);
-	}
-}, o = class {
-	layerId;
-	priority;
-	tooltip = null;
-	activeFeatureId = void 0;
-	isEnabled = !1;
-	clearTooltip = () => {
-		a.activeHandle === this && (this.tooltip?.remove(), this.tooltip = null, a.activeHandle = null, this.activeFeatureId = void 0);
-	};
-	setTooltip;
-	constructor(t, n, r = 0) {
-		this.layerId = t, this.priority = r, this.setTooltip = (t) => {
-			if (!e.map || !t.features) return;
-			let r = t.features[0]?.id, i = a.activeHandle === this, o = r === this.activeFeatureId;
-			if (i && this.tooltip && o) {
-				this.tooltip.setLngLat(t.lngLat);
-				return;
-			}
-			let s = a.activeHandle;
-			if (s !== null && s !== this && s.priority >= this.priority) return;
-			s?.clearTooltip(), this.activeFeatureId = void 0;
-			let c = n(t);
-			c && (this.tooltip = c, a.activeHandle = this, this.activeFeatureId = r, c.addTo(e.map));
-		};
-	}
-	enable() {
-		!e.map || this.isEnabled || (e.map.on("mousemove", this.layerId, r), e.map.on("mouseleave", this.layerId, i), e.map.on("mousemove", this.layerId, this.setTooltip), e.map.on("mouseleave", this.layerId, this.clearTooltip), this.isEnabled = !0);
-	}
-	disable() {
-		!e.map || !this.isEnabled || (this.clearTooltip(), e.map.off("mousemove", this.layerId, r), e.map.off("mouseleave", this.layerId, i), e.map.off("mousemove", this.layerId, this.setTooltip), e.map.off("mouseleave", this.layerId, this.clearTooltip), this.isEnabled = !1);
-	}
-};
-//#endregion
-export { a as TooltipManager };

package/dist/lib/map/integrations/types.d.ts

@@ -0,0 +1,14 @@
+import type { MapLayerEventType, Map as MaptilerMap, Popup } from "@maptiler/sdk";
+import type { MapIntegration } from "./map-integration.svelte";
+import type { MapGeoJSONIntegration, MapIconLayerIntegration } from "./map-geojson-integration.svelte";
+export type TooltipPopup = <T extends TooltipController>(mapCtrl: T) => (evt: MapLayerEventType["mousemove"] & object) => void;
+export type SomeMapIntegration = MapIntegration | MapGeoJSONIntegration<Record<string, unknown>> | MapIconLayerIntegration<Record<string, unknown>>;
+interface TooltipController {
+    tooltip: Popup | null;
+    map?: MaptilerMap;
+}
+export interface MapImageIcon {
+    id: string;
+    image: HTMLImageElement;
+}
+export {};

package/dist/lib/map/integrations/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,14 @@
+import { MapStyleVariant, Map as MaptilerMap } from "@maptiler/sdk";
+import type { Attachment } from "svelte/attachments";
+import type { Feature, GeoJsonProperties, Geometry } from "geojson";
+export declare const DefaultMapStyle: MapStyleVariant;
+declare class MapManager {
+    map: MaptilerMap | null;
+    setDataSource(sourceId: string, features: Array<Feature<Geometry, GeoJsonProperties>>): void;
+    refreshMap(): void;
+    removeExcludedLayers(): void;
+    removeMap(): void;
+}
+export declare const mapManager: MapManager;
+export type { MapManager };
+export declare const initializeMap: Attachment<HTMLDivElement>;

package/dist/lib/map/map.svelte.js

@@ -1,51 +1,49 @@
-import { isGeoJSONSource as e } from "./utils.js";
-import * as t from "svelte/internal/client";
-import { Map as n, MapStyle as r, config as i } from "@maptiler/sdk";
-//#region src/lib/map/map.svelte.ts
-i.apiKey = "1ZwL7YJSSN42A678HHPn";
-var a = r.STREETS_V4.DEFAULT, o = [
-	"Sport",
-	"Tourism",
-	"Culture",
-	"Shopping",
-	"Food",
-	"Transport"
-], s = new class {
-	#e = t.state(null);
-	get map() {
-		return t.get(this.#e);
-	}
-	set map(e) {
-		t.set(this.#e, e, !0);
-	}
-	setDataSource(t, n) {
-		let r = s.map?.getSource(t);
-		e(r) && r.setData({
-			type: "FeatureCollection",
-			features: n
-		});
-	}
-	refreshMap() {
-		s.map && this.removeExcludedLayers();
-	}
-	removeExcludedLayers() {
-		for (let e of o) s.map?.getLayer(e) && s.map.removeLayer(e);
-	}
-	removeMap() {
-		return s.map?.remove();
-	}
-}(), c = (e) => {
-	let t = new n({
-		container: e,
-		center: [-119.7987626619462, 36.76272050981146],
-		zoom: 7,
-		style: a,
-		projection: "globe",
-		space: { preset: "milkyway" }
-	});
-	return t.once("idle", () => {
-		s.map = t;
-	}), () => t.remove();
+import { MapStyle, config as MaptilerConfig, Map as MaptilerMap } from "@maptiler/sdk";
+import { isGeoJSONSource } from "./utils";
+MaptilerConfig.apiKey = import.meta.env.VITE_MAPTILER_KEY;
+export const DefaultMapStyle = MapStyle.STREETS_V4.DEFAULT;
+const excludeLayers = ["Sport", "Tourism", "Culture", "Shopping", "Food", "Transport"];
+class MapManager {
+    map = $state(null);
+    setDataSource(sourceId, features) {
+        const source = mapManager.map?.getSource(sourceId);
+        if (isGeoJSONSource(source)) {
+            source.setData({
+                type: "FeatureCollection",
+                features
+            });
+        }
+    }
+    refreshMap() {
+        if (mapManager.map) {
+            this.removeExcludedLayers();
+        }
+    }
+    removeExcludedLayers() {
+        for (const toExclude of excludeLayers) {
+            if (mapManager.map?.getLayer(toExclude)) {
+                mapManager.map.removeLayer(toExclude);
+            }
+        }
+    }
+    removeMap() {
+        return mapManager.map?.remove();
+    }
+}
+export const mapManager = new MapManager();
+export const initializeMap = (container) => {
+    const map = new MaptilerMap({
+        container: container,
+        center: [-119.7987626619462, 36.76272050981146],
+        zoom: 7,
+        style: DefaultMapStyle,
+        projection: "globe",
+        space: {
+            preset: "milkyway"
+        }
+    });
+    map.once("idle", () => {
+        mapManager.map = map;
+    });
+    return () => map.remove();
 };
-//#endregion
-export { a as DefaultMapStyle, c as initializeMap, s as mapManager };

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

@@ -0,0 +1,7 @@
+import type { Component } from "svelte";
+import { Popup } from "@maptiler/sdk";
+import type { ReferenceMapStyle, GeoJSONSource, LngLat } from "@maptiler/sdk";
+export declare const MAP_STYLE_OPTIONS: ReferenceMapStyle[];
+export declare function isGeoJSONSource(source: unknown): source is GeoJSONSource;
+export declare function mountPopup<P extends Record<string, unknown>>(component: Component<P>, props: P, lngLat: LngLat, closeButton?: boolean): Popup;
+export declare function mountClickPopup<P extends Record<string, unknown>>(component: Component<P>, props: P, lngLat: LngLat): Popup;

package/dist/lib/map/utils.js

@@ -1,33 +1,36 @@
-import { mount as e, unmount as t } from "svelte";
-import { MapStyle as n, Popup as r } from "@maptiler/sdk";
-//#region src/lib/map/utils.ts
-var i = (() => {
-	let e = /* @__PURE__ */ new Map();
-	for (let t of Object.values(n)) {
-		let n = t.getId(), r = n.match(/^(.+?)_V(\d+)$/i), i = r ? r[1] : n, a = r ? parseInt(r[2], 10) : 0, o = e.get(i);
-		(!o || a > o.version) && e.set(i, {
-			version: a,
-			style: t
-		});
-	}
-	return Array.from(e.values()).map((e) => e.style).sort((e, t) => e.getName().localeCompare(t.getName()));
+import { mount, unmount } from "svelte";
+import { MapStyle, Popup } from "@maptiler/sdk";
+export const MAP_STYLE_OPTIONS = (() => {
+    const latest = new Map();
+    for (const style of Object.values(MapStyle)) {
+        const id = style.getId();
+        const match = id.match(/^(.+?)_V(\d+)$/i);
+        const baseName = match ? match[1] : id;
+        const version = match ? parseInt(match[2], 10) : 0;
+        const existing = latest.get(baseName);
+        if (!existing || version > existing.version) {
+            latest.set(baseName, { version, style });
+        }
+    }
+    return Array.from(latest.values())
+        .map((e) => e.style)
+        .sort((a, b) => a.getName().localeCompare(b.getName()));
 })();
-function a(e) {
-	return typeof e == "object" && !!e && "type" in e && e.type === "geojson";
+export function isGeoJSONSource(source) {
+    return (typeof source === "object" &&
+        source !== null &&
+        "type" in source &&
+        source.type === "geojson");
 }
-function o(n, i, a, o = !1) {
-	let s = document.createElement("div"), c = e(n, {
-		target: s,
-		props: i
-	}), l = new r({
-		closeButton: o,
-		closeOnClick: !1,
-		maxWidth: "none"
-	}).setLngLat(a).setDOMContent(s);
-	return l.on("close", () => t(c)), l;
+export function mountPopup(component, props, lngLat, closeButton = false) {
+    const container = document.createElement("div");
+    const instance = mount(component, { target: container, props });
+    const popup = new Popup({ closeButton, closeOnClick: false, maxWidth: "none" })
+        .setLngLat(lngLat)
+        .setDOMContent(container);
+    popup.on("close", () => unmount(instance));
+    return popup;
 }
-function s(e, t, n) {
-	return o(e, t, n, !0);
+export function mountClickPopup(component, props, lngLat) {
+    return mountPopup(component, props, lngLat, true);
 }
-//#endregion
-export { i as MAP_STYLE_OPTIONS, a as isGeoJSONSource, s as mountClickPopup, o as mountPopup };

package/dist/lib/monitors/components/MonitorClusterTooltip.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import type { Geometry } from "geojson";
+	import { GeoJSONSource } from "@maptiler/sdk";
+	import type { SJVAirEntryLevel } from "@sjvair/sdk";
+	import type { ComponentProps } from "svelte";
+	import { area } from "@turf/area";
+	import { convertArea } from "@turf/helpers";
+	import DataBox from "../../components/DataBox.svelte";
+	import { mapManager } from "../../map/map.svelte";
+	import type { MonitorClusterMapFeature, MonitorMapFeature } from "../types";
+	import { monitorsManager } from "../monitors.svelte";
+	import { getCurrentLevel } from "../monitor-utils";
+
+	interface MonitorClusterTooltipProps {
+		feature: MonitorClusterMapFeature;
+	}
+
+	interface MonitorClusterTooltipData extends ComponentProps<typeof DataBox> {
+		clusterType: string;
+		count: number;
+		coverage?: string;
+		max: number;
+		min: number;
+	}
+
+	const { feature }: MonitorClusterTooltipProps = $props();
+
+	let data: MonitorClusterTooltipData | undefined = $state();
+
+	$effect(() => {
+		const source = mapManager.map!.getSource(feature.source)! as GeoJSONSource;
+		const latest = monitorsManager.latest;
+		const meta = monitorsManager.meta;
+
+		source
+			.getClusterLeaves(feature.properties.cluster_id, feature.properties.point_count, 0)
+			.then((features) => {
+				//const monitor = monitorsManager.latest?.get(feature.properties.id);
+
+				if (!features.length || !meta || !latest) return;
+				const monitors = (features as Array<MonitorMapFeature>).map((f) =>
+					latest?.get(f.properties.id)
+				);
+
+				const firstMonitor = monitors[0];
+				if (!firstMonitor) return;
+
+				const entryType = meta.entryType(firstMonitor.latest.entry_type);
+				const monitorType = meta.monitorType(firstMonitor.type);
+
+				const coords = monitors.map((m) => m!.position!.coordinates);
+				const values = monitors.map((m) => parseFloat(m?.latest.value ?? "0"));
+
+				const avg = Math.round(values.reduce((sum, value) => sum + value, 0) / monitors.length);
+
+				const level: SJVAirEntryLevel | undefined = getCurrentLevel(avg, entryType.asIter.levels!);
+
+				data = {
+					color: level?.color || "#d3d3d3",
+					count: feature.properties.point_count,
+					coverage: calculateArea(coords),
+					header: entryType.label,
+					clusterType: `${firstMonitor.is_sjvair ? "SJVAir " : ""}${monitorType.label} Monitors`,
+					subheading: "(cluster avg)",
+					max: values.reduce((prev, current) => (prev > current ? prev : current)),
+					min: values.reduce((prev, current) => (prev < current ? prev : current)),
+					value: avg.toString()
+				};
+			});
+
+		function calculateArea(coords: Array<Array<number>>) {
+			// TODO: update to handle lines as well as area (only 2 in cluster)
+			if (coords.length === 3) {
+				coords.push(coords[0]);
+			}
+
+			const coverage = area({
+				type: "Feature",
+				geometry: {
+					type: "Polygon",
+					coordinates: [coords]
+				}
+			} as unknown as Geometry);
+
+			return coverage > 0 ? convertArea(coverage, "meters", "miles").toFixed(3) : undefined;
+		}
+	});
+</script>
+
+{#if data}
+	<div class="flex gap-2">
+		<DataBox
+			color={data.color}
+			header={data.header}
+			subheading={data.subheading}
+			value={data.value}
+		/>
+		<div class="flex flex-col">
+			<h1 class="text-lg font-bold">{data.clusterType}</h1>
+			<p>
+				{data.count} monitors
+				{#if data.coverage}
+					<span>covering {data.coverage}mi²</span>
+				{/if}
+			</p>
+			<div class="mt-auto">
+				<p class="text-base">Max: {data.max}µg/m³</p>
+				<p class="text-base leading-none">Min: {data.min}µg/m³</p>
+			</div>
+		</div>
+	</div>
+{/if}

package/dist/lib/monitors/components/MonitorClusterTooltip.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { MonitorClusterMapFeature } from "../types";
+interface MonitorClusterTooltipProps {
+    feature: MonitorClusterMapFeature;
+}
+declare const MonitorClusterTooltip: import("svelte").Component<MonitorClusterTooltipProps, {}, "">;
+type MonitorClusterTooltip = ReturnType<typeof MonitorClusterTooltip>;
+export default MonitorClusterTooltip;

package/dist/lib/monitors/components/MonitorMarkersLegend.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { monitorsManager } from "../monitors.svelte.ts";
+
+	const label = $derived(monitorsManager.pollutant === "pm25" ? "PM 2.5" : "Ozone");
+	const values = $derived(
+		monitorsManager.pollutant === "pm25" ? [12, 35, 55, 150, 250] : [55, 71, 86, 106, 201]
+	);
+</script>
+
+<div class="min-w-50 flex flex-col bg-white rounded shadow py-[0.5em] px-[1.5em]">
+	<p class="text-center whitespace-nowrap font-semibold">
+		{label} Concentration
+	</p>
+	<div class="map-legend-bar inline-block h-[1.5em]">&nbsp;</div>
+	<div class="flex mb-[1.5em]">
+		<div class="w-1/5 shrink-0 h-[0.5em] border-l border-black">
+			<span class="relative top-[0.5em] right-[0.3em]">0</span>
+		</div>
+		{#each values as value, idx (idx)}
+			<div class="w-1/5 shrink-0 h-[0.5em] border-l border-black last:relative last:right-px">
+				<span class="relative top-[0.5em] {idx >= 3 ? 'right-[0.8em]' : 'right-[0.5em]'}"
+					>{value}</span
+				>
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.map-legend-bar {
+		background: linear-gradient(
+			90deg,
+			#00e400 0%,
+			#ffff00 20%,
+			#ff7e00 40%,
+			#ff0000 60%,
+			#8f3f97 80%,
+			#7e0023 100%
+		);
+	}
+</style>

package/dist/lib/monitors/components/MonitorMarkersLegend.svelte.d.ts

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