@sjvair/monitor-map 3.0.0 → 3.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@sjvair/monitor-map",
 	"description": "SJVAir's interactive monitor map",
-	"version": "3.0.0",
+	"version": "3.0.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",

package/src/lib/components/MapLayersDisplayOptions.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { WindIcon, CrosshairIcon, FlameIcon, WavesVerticalIcon } from "@lucide/svelte";
 	import DisplayOption from "$lib/components/DisplayOption.svelte";
 	import ToggleSwitch from "$lib/components/ToggleSwitch.svelte";
 	import { windMapIntegration } from "$lib/wind/wind.svelte";
@@ -10,16 +11,28 @@
 
 <DisplayOption>
 	<p class="text-lg font-bold whitespace-nowrap underline">Map Layers</p>
-	<ToggleSwitch id="wind" label="Wind" bind:value={windMapIntegration.enabled}></ToggleSwitch>
+	<div class="flex gap-1 items-center">
+		<WindIcon size="16" />
+		<ToggleSwitch id="wind" label="Wind" bind:value={windMapIntegration.enabled}></ToggleSwitch>
+	</div>
 	{#if monitorsManager.pollutant === "pm25"}
-		<ToggleSwitch
-			id="collocation-sites"
-			label="Collocation Sites"
-			bind:value={collocationSitesMapIntegration.enabled}
-		></ToggleSwitch>
+		<div class="flex gap-1 items-center">
+			<CrosshairIcon size="16" color="#4A5FC6" />
+			<ToggleSwitch
+				id="collocation-sites"
+				label="Collocation Sites"
+				bind:value={collocationSitesMapIntegration.enabled}
+			></ToggleSwitch>
+		</div>
 	{/if}
-	<ToggleSwitch id="hms-fire" label="HMS Fire" bind:value={hmsFireMapIntegration.enabled}
-	></ToggleSwitch>
-	<ToggleSwitch id="hms-smoke" label="HMS Smoke" bind:value={hmsSmokeMapIntegration.enabled}
-	></ToggleSwitch>
+	<div class="flex gap-1 items-center">
+		<FlameIcon size="16" />
+		<ToggleSwitch id="hms-fire" label="HMS Fire" bind:value={hmsFireMapIntegration.enabled}
+		></ToggleSwitch>
+	</div>
+	<div class="flex gap-1 items-center">
+		<WavesVerticalIcon size="16" />
+		<ToggleSwitch id="hms-smoke" label="HMS Smoke" bind:value={hmsSmokeMapIntegration.enabled}
+		></ToggleSwitch>
+	</div>
 </DisplayOption>

package/src/lib/ev-stations/components/EvStationsDisplayOptions.svelte

@@ -2,6 +2,8 @@
 	import DisplayOption from "$lib/components/DisplayOption.svelte";
 	import ToggleSwitch from "$lib/components/ToggleSwitch.svelte";
 	import { evStationsMapIntegration } from "../ev-stations-map-integration.svelte";
+
+	const { displayOptions } = evStationsMapIntegration;
 </script>
 
 <DisplayOption>
@@ -15,20 +17,30 @@
 			/>
 		</div>
 	</div>
-	<label for="ev-lvl2" class="cursor-pointer select-none whitespace-nowrap">
+	<label for="ev-lvl2" class="flex gap-1 cursor-pointer select-none whitespace-nowrap">
 		<input
 			type="checkbox"
 			id="ev-lvl2"
 			bind:checked={evStationsMapIntegration.displayOptions.lvl2.value}
 		/>
+		<img
+			class="w-5"
+			src={displayOptions.lvl2.icon!.image.src}
+			alt={displayOptions.lvl2.icon!.image.alt}
+		/>
 		Level 2
 	</label>
-	<label for="ev-lvl3" class="cursor-pointer select-none whitespace-nowrap">
+	<label for="ev-lvl3" class="flex gap-1 cursor-pointer select-none whitespace-nowrap">
 		<input
 			type="checkbox"
 			id="ev-lvl3"
 			bind:checked={evStationsMapIntegration.displayOptions.lvl3.value}
 		/>
+		<img
+			class="w-5"
+			src={displayOptions.lvl3.icon!.image.src}
+			alt={displayOptions.lvl3.icon!.image.alt}
+		/>
 		Level 3
 	</label>
 </DisplayOption>

package/src/lib/ev-stations/ev-stations-map-integration.svelte.ts

@@ -34,10 +34,10 @@ class EvStationsMapIntegration
 	private renderer: EvStationsClusterRenderer = new EvStationsClusterRenderer(this);
 	private currentPopup: Popup | null = null;
 
-	displayOptions = {
-		lvl2: new MapDisplayOption("Level 2", false),
-		lvl3: new MapDisplayOption("Level 3", false)
-	};
+	displayOptions = $derived.by(() => ({
+		lvl2: new MapDisplayOption("Level 2", false, this.icons.get("ev-station-lvl2")!),
+		lvl3: new MapDisplayOption("Level 3", false, this.icons.get("ev-station-lvl3")!)
+	}));
 
 	features: Array<EvStationMapFeature> = $derived.by(() => {
 		const result: EvStationMapFeature[] = [];

package/src/lib/map/integrations/map-display-option.svelte.ts

@@ -1,8 +1,12 @@
+import { MapImageIcon } from "./types";
+
 export class MapDisplayOption {
+	icon?: MapImageIcon;
 	label: string;
 	value: boolean;
 
-	constructor(label: string, value: boolean) {
+	constructor(label: string, value: boolean, icon?: MapImageIcon) {
+		this.icon = icon;
 		this.label = label;
 		this.value = $state(value);
 	}

package/src/lib/map/integrations/map-icon-manager.ts

@@ -1,12 +1,13 @@
 import type { Map as MaptilerMap } from "@maptiler/sdk";
-import { XMap } from "@tstk/builtin-extensions";
+//import { XMap } from "@tstk/builtin-extensions";
 import { mapManager } from "../map.svelte.ts";
 import type { MapImageIcon } from "./types";
+import { SvelteMap } from "svelte/reactivity";
 
 export class MapIconManager {
-	protected icons: XMap<string, MapImageIcon> = new XMap();
+	protected icons: SvelteMap<string, MapImageIcon> = new SvelteMap();
 
-	constructor(iconMap?: XMap<string, MapImageIcon>) {
+	constructor(iconMap?: SvelteMap<string, MapImageIcon>) {
 		if (iconMap) {
 			this.icons = iconMap;
 		}

package/src/lib/monitors/components/MonitorsDisplayOptions.svelte

@@ -68,8 +68,11 @@
 
 	{#each monitorDisplayOptions as [id, option] (option.label)}
 		{@const inputId = `${id}-monitor-display-option`}
-		<label for={inputId} class="cursor-pointer whitespace-nowrap select-none">
+		<label for={inputId} class="flex gap-1 cursor-pointer whitespace-nowrap select-none">
 			<input type="checkbox" id={inputId} name={option.label} bind:checked={option.value} />
+			{#if option.icon}
+				<img class="w-3" src={option.icon.image.src} alt={option.icon.image.alt} />
+			{/if}
 			{option.label}
 		</label>
 	{/each}

package/src/lib/monitors/monitors-icon-manager.svelte.ts

@@ -7,6 +7,7 @@ import { monitorsManager } from "./monitors.svelte.ts";
 const MONITOR_ICONS = { circle, square, triangle };
 const MONITOR_ICON_BORDER_WIDTH = 2;
 const MONITOR_ICON_DEFAULT_COLOR = "#969696"; // light gray
+const MONITOR_ICON_DISPLAY_COLOR = "#48c78e"; // light gray
 
 export function getIconId<T extends MonitorData>(monitor: T, level: SJVAirEntryLevel): string {
 	const id = `${monitor.location}-${monitor.is_active ? level.name : "default"}`;
@@ -43,7 +44,8 @@ export abstract class MonitorShapeIconManager extends MapIconManager {
 				if (monitorsManager.levels) {
 					const iconLevels = [
 						...monitorsManager.levels,
-						{ name: "default", color: MONITOR_ICON_DEFAULT_COLOR }
+						{ name: "default", color: MONITOR_ICON_DEFAULT_COLOR },
+						{ name: "display", color: MONITOR_ICON_DISPLAY_COLOR }
 					];
 
 					for (const location of ["inside", "outside"]) {

package/src/lib/monitors/monitors-map-integration.svelte.ts

@@ -38,15 +38,15 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 	tooltipManager: TooltipManager = new TooltipManager();
 	private renderer: MonitorsClusterRenderer = new MonitorsClusterRenderer(this);
 
-	displayOptions = {
-		purpleair: new MapDisplayOption("PurpleAir", true),
-		sjvair: new MapDisplayOption("SJVAir non-FEM", true),
-		aqview: new MapDisplayOption("AQview", true),
-		bam1022: new MapDisplayOption("SJVAir FEM", true),
-		airnow: new MapDisplayOption("AirNow", true),
-		inactive: new MapDisplayOption("Inactive", false),
-		inside: new MapDisplayOption("Inside", false)
-	};
+	displayOptions = $derived.by(() => ({
+		purpleair: new MapDisplayOption("PurpleAir", true, this.icons.get("outside-display-square")),
+		sjvair: new MapDisplayOption("SJVAir non-FEM", true, this.icons.get("outside-display-circle")),
+		aqview: new MapDisplayOption("AQview", true, this.icons.get("outside-display-triangle")),
+		bam1022: new MapDisplayOption("SJVAir FEM", true, this.icons.get("outside-display-triangle")),
+		airnow: new MapDisplayOption("AirNow", true, this.icons.get("outside-display-triangle")),
+		inactive: new MapDisplayOption("Inactive", false, this.icons.get("outside-default-square")),
+		inside: new MapDisplayOption("Inside", false, this.icons.get("inside-display-square"))
+	}));
 
 	/** Set by the app to handle navigation when a monitor is clicked. Receives the monitor ID. */
 	onMonitorClick: ((id: string) => void) | null = null;