@sjvair/monitor-map 3.6.2 → 4.0.0

package/dist/lib/collocation-sites/collocation-utils.d.ts

@@ -1,3 +0,0 @@
-import type { MonitorData } from "@sjvair/sdk";
-export declare function getOrder(monitor: MonitorData): number;
-export declare function getTypeShape(type: string): string;

package/dist/lib/collocation-sites/collocation-utils.js

@@ -1,30 +0,0 @@
-export function getOrder(monitor) {
-    switch (monitor.type) {
-        case "airgradient":
-            return 5;
-        case "airnow":
-            return 2;
-        case "aqview":
-            return 3;
-        case "bam1022":
-            return 6;
-        case "purpleair":
-            return monitor.is_sjvair ? 4 : 1;
-        default:
-            throw new Error(`Map ordering for ${monitor.device} has not been set`);
-    }
-}
-export function getTypeShape(type) {
-    switch (type) {
-        case "airgradient":
-            return "circle";
-        case "airnow":
-        case "aqview":
-        case "bam1022":
-            return "triangle";
-        case "purpleair":
-            return "square";
-        default:
-            return "circle";
-    }
-}

package/dist/lib/components/DisplayOption.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-	let { children } = $props();
-</script>
-
-<div class="flex flex-col items-start justify-center rounded">
-	{@render children?.()}
-</div>

package/dist/lib/components/DisplayOption.svelte.d.ts

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

package/dist/lib/components/MapLayersDisplayOptions.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-	import { WindIcon, CrosshairIcon, WavesVerticalIcon } from "@lucide/svelte";
-	import DisplayOption from "./DisplayOption.svelte";
-	import ToggleSwitch from "./ToggleSwitch.svelte";
-	import { windMapIntegration } from "../wind/wind.svelte";
-	import { collocationSitesMapIntegration } from "../collocation-sites/collocations-map-integration.svelte";
-	import { monitorsManager } from "../monitors/monitors.svelte";
-	import { hmsFireMapIntegration } from "../hms/hms-fire-map-integration.svelte";
-	import { hmsSmokeMapIntegration } from "../hms/hms-smoke-map-integration.svelte";
-
-	const fireIcon = hmsFireMapIntegration.icons.get("hms-fire-xxl");
-</script>
-
-<DisplayOption>
-	<p class="text-lg font-bold whitespace-nowrap underline">Map Layers</p>
-	<div class="flex items-center gap-1">
-		<WindIcon size="16" />
-		<ToggleSwitch id="wind" label="Wind" bind:value={windMapIntegration.enabled}></ToggleSwitch>
-	</div>
-	{#if monitorsManager.pollutant === "pm25"}
-		<div class="flex items-center gap-1">
-			<CrosshairIcon size="16" color="#4A5FC6" />
-			<ToggleSwitch
-				id="collocation-sites"
-				label="Collocation Sites"
-				bind:value={collocationSitesMapIntegration.enabled}
-			></ToggleSwitch>
-		</div>
-	{/if}
-	<div class="flex items-center gap-1">
-		{#if fireIcon}
-			<img class="w-4" src={fireIcon.image.src} alt={fireIcon.image.alt} />
-		{/if}
-		<ToggleSwitch id="hms-fire" label="HMS Fire" bind:value={hmsFireMapIntegration.enabled}
-		></ToggleSwitch>
-	</div>
-	<div class="flex items-center gap-1">
-		<WavesVerticalIcon size="16" />
-		<ToggleSwitch id="hms-smoke" label="HMS Smoke" bind:value={hmsSmokeMapIntegration.enabled}
-		></ToggleSwitch>
-	</div>
-</DisplayOption>

package/dist/lib/components/MapLayersDisplayOptions.svelte.d.ts

@@ -1,18 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const MapLayersDisplayOptions: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type MapLayersDisplayOptions = InstanceType<typeof MapLayersDisplayOptions>;
-export default MapLayersDisplayOptions;

package/dist/lib/components/SegmentedControl.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-	interface SegmentedControlProps {
-		segmentLabel?: string;
-		options: Array<{ label: string; value: string }>;
-		group: string;
-	}
-
-	let { segmentLabel: label, options, group = $bindable() }: SegmentedControlProps = $props();
-
-	let inner: HTMLDivElement | undefined = $state();
-
-	$effect(() => {
-		void group;
-		if (!inner) return;
-
-		const checked = inner.querySelector<HTMLInputElement>("input:checked");
-		if (!checked) return;
-
-		const fontSize = parseFloat(getComputedStyle(inner).fontSize);
-		const padding = fontSize; // 1em
-		const label = checked.closest("label") as HTMLLabelElement;
-		const innerRect = inner.getBoundingClientRect();
-		const labelRect = label.getBoundingClientRect();
-
-		inner.style.setProperty("--highlight-width", `${labelRect.width + padding}px`);
-		inner.style.setProperty(
-			"--highlight-x-pos",
-			`${labelRect.left - innerRect.left - padding / 2}px`
-		);
-	});
-</script>
-
-<div class="relative">
-	{#if label}
-		<p>{label}</p>
-	{/if}
-	<div
-		bind:this={inner}
-		class="relative flex gap-4 px-[.5em] before:absolute before:top-[0.125em] before:bottom-[0.125em] before:left-0 before:z-0 before:w-(--highlight-width) before:translate-x-(--highlight-x-pos) before:rounded-md before:bg-[#5465FF] before:transition-transform before:duration-500 before:content-['']"
-	>
-		{#each options as { label, value } (value)}
-			{@const inputId = `${value}-segmented-control-option`}
-			<label
-				for={inputId}
-				class="relative z-1 cursor-pointer text-center transition-all duration-750 active:scale-95 has-checked:text-white"
-			>
-				<input type="radio" id={inputId} name={label} {value} bind:group class="hidden" />
-				{label}
-			</label>
-		{/each}
-	</div>
-</div>

package/dist/lib/components/SegmentedControl.svelte.d.ts

@@ -1,11 +0,0 @@
-interface SegmentedControlProps {
-    segmentLabel?: string;
-    options: Array<{
-        label: string;
-        value: string;
-    }>;
-    group: string;
-}
-declare const SegmentedControl: import("svelte").Component<SegmentedControlProps, {}, "group">;
-type SegmentedControl = ReturnType<typeof SegmentedControl>;
-export default SegmentedControl;

package/dist/lib/components/ToggleSwitch.svelte

@@ -1,93 +0,0 @@
-<script lang="ts">
-	interface ToggleSwitchProps {
-		id: string;
-		label: string;
-		reverse?: boolean;
-		value: boolean;
-	}
-
-	let { id, label, reverse, value = $bindable() }: ToggleSwitchProps = $props();
-</script>
-
-<label
-	for={id}
-	class={[
-		"flex cursor-pointer items-center justify-center gap-x-[0.25em] whitespace-nowrap select-none",
-		{ "flex-row-reverse": reverse }
-	]}
->
-	{label}
-	<div class="switch">
-		<input class="switch-input" type="checkbox" {id} name={id} bind:checked={value} />
-		<span class="slider round"></span>
-	</div>
-</label>
-
-<style>
-	.switch {
-		--animation-duration: 100ms;
-		--switch-diameter: 1.625em;
-		--switch-offset: 0.25em;
-		--track-width: 3.75em;
-		--track-height: 2.125em;
-
-		font-size: 0.5em;
-		position: relative;
-		display: inline-block;
-		width: var(--track-width);
-		height: var(--track-height);
-		transform: scale(0.8);
-
-		.switch-input {
-			opacity: 0;
-			width: 0;
-			height: 0;
-
-			&:checked + .slider {
-				background-color: #2196f3;
-			}
-
-			&:focus + .slider {
-				box-shadow: 0 0 1px #2196f3;
-			}
-
-			&:checked + .slider:before {
-				-webkit-transform: translateX(var(--switch-diameter));
-				-ms-transform: translateX(var(--switch-diameter));
-				transform: translateX(var(--switch-diameter));
-			}
-		}
-
-		.slider {
-			position: absolute;
-			cursor: pointer;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
-			background-color: #ccc;
-			-webkit-transition: var(--animation-duration);
-			transition: var(--animation-duration);
-
-			&:before {
-				position: absolute;
-				content: "";
-				height: var(--switch-diameter);
-				width: var(--switch-diameter);
-				left: var(--switch-offset);
-				bottom: var(--switch-offset);
-				background-color: white;
-				-webkit-transition: var(--animation-duration);
-				transition: var(--animation-duration);
-			}
-			/* Rounded sliders */
-			&.round {
-				border-radius: var(--track-height);
-			}
-
-			&.round:before {
-				border-radius: 50%;
-			}
-		}
-	}
-</style>

package/dist/lib/components/ToggleSwitch.svelte.d.ts

@@ -1,9 +0,0 @@
-interface ToggleSwitchProps {
-    id: string;
-    label: string;
-    reverse?: boolean;
-    value: boolean;
-}
-declare const ToggleSwitch: import("svelte").Component<ToggleSwitchProps, {}, "value">;
-type ToggleSwitch = ReturnType<typeof ToggleSwitch>;
-export default ToggleSwitch;

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

@@ -1,46 +0,0 @@
-<script lang="ts">
-	import DisplayOption from "../../components/DisplayOption.svelte";
-	import ToggleSwitch from "../../components/ToggleSwitch.svelte";
-	import { evStationsMapIntegration } from "../ev-stations-map-integration.svelte";
-
-	const { displayOptions } = evStationsMapIntegration;
-</script>
-
-<DisplayOption>
-	<p class="text-lg font-bold whitespace-nowrap underline">EV Stations</p>
-	<div class="mb-2 w-full text-xs">
-		<div class="w-fit">
-			<ToggleSwitch
-				id="ev-clusters"
-				label="Marker Clusters"
-				bind:value={evStationsMapIntegration.clustered}
-			/>
-		</div>
-	</div>
-	<label for="ev-lvl2" class="flex cursor-pointer gap-1 whitespace-nowrap select-none">
-		<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="flex cursor-pointer gap-1 whitespace-nowrap select-none">
-		<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/dist/lib/ev-stations/components/EvStationsDisplayOptions.svelte.d.ts

@@ -1,18 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const EvStationsDisplayOptions: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type EvStationsDisplayOptions = InstanceType<typeof EvStationsDisplayOptions>;
-export default EvStationsDisplayOptions;

package/dist/lib/hms/components/HMSFireLegend.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-	import { hmsFireMapIntegration } from "../hms-fire-map-integration.svelte";
-
-	const levels = ["<10", "10-49", "50-149", "150-349", "≥350"];
-</script>
-
-{#if hmsFireMapIntegration.enabled && hmsFireMapIntegration.features.length > 0}
-	<div class="flex w-fit flex-col rounded bg-white p-1 shadow">
-		<p class="text-center font-semibold whitespace-nowrap">Fire Points</p>
-		<div class="flex flex-col">
-			{#each hmsFireMapIntegration.icons.iter as [, icon], idx (idx)}
-				<div class="flex items-center gap-1">
-					<div class="flex size-9 items-center justify-center">
-						<img src={icon.image.src} alt={icon.image.alt} />
-					</div>
-					<span>{levels[idx]} MW</span>
-				</div>
-			{/each}
-		</div>
-	</div>
-{/if}

package/dist/lib/map/MapStyleDisplayOptions.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-	import { MapStyleVariant, ReferenceMapStyle } from "@maptiler/sdk";
-	import { mapManager, DefaultMapStyle } from "./map.svelte";
-	import { MAP_STYLE_OPTIONS } from "./utils";
-	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

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

package/dist/lib/map/Menu.svelte

@@ -1,65 +0,0 @@
-<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 flex size-10 items-center justify-center transition-all"
-		aria-label="Display Options"
-	>
-		<SlidersHorizontalIcon size="24" />
-	</button>
-	<div
-		class={[
-			"relative flex max-w-[90vw] items-center justify-center overflow-x-hidden overflow-y-scroll transition-all duration-250",
-			isOpen ? "h-55 w-135" : "h-0 w-0"
-		]}
-	>
-		<div
-			data-trigger
-			class="xs:justify-between absolute top-0 left-0 flex h-fit w-full flex-wrap items-start gap-2 p-2 sm:justify-evenly md:justify-between md:gap-4"
-		>
-			{@render children?.()}
-		</div>
-	</div>
-</div>

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

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

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

@@ -1,41 +0,0 @@
-<script lang="ts">
-	import { monitorsManager } from "../monitors.svelte";
-
-	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="flex min-w-50 flex-col rounded bg-white px-[1.5em] py-[0.5em] shadow">
-	<p class="text-center font-semibold whitespace-nowrap">
-		{label} Concentration
-	</p>
-	<div class="map-legend-bar inline-block h-[1.5em]">&nbsp;</div>
-	<div class="mb-[1.5em] flex">
-		<div class="h-[0.5em] w-1/5 shrink-0 border-l border-black">
-			<span class="relative top-[0.5em] right-[0.3em]">0</span>
-		</div>
-		{#each values as value, idx (idx)}
-			<div class="h-[0.5em] w-1/5 shrink-0 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

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

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

@@ -1,85 +0,0 @@
-<script lang="ts">
-	import type { MonitorsMeta } from "@sjvair/sdk";
-	import DisplayOption from "../../components/DisplayOption.svelte";
-	import SegmentedControl from "../../components/SegmentedControl.svelte";
-	import ToggleSwitch from "../../components/ToggleSwitch.svelte";
-	import { monitorsManager } from "../monitors.svelte";
-	import { monitorsMapIntegration } from "../monitors-map-integration.svelte";
-
-	interface PollutantDisplayOptions {
-		label: string;
-		value: MonitorsMeta["default_pollutant"];
-	}
-
-	const pollutants: Array<PollutantDisplayOptions> = [
-		{
-			label: "PM 2.5",
-			value: "pm25"
-		},
-		{
-			label: "Ozone",
-			value: "o3"
-		}
-	];
-
-	// "inside" is a location filter (indoor vs outdoor), not tied to a monitor type or
-	// pollutant, so it's always shown, like "inactive".
-	const uiOnlyDisplayOptions = new Set(["inactive", "inside"]);
-
-	// "sjvair" (SJVAir non-FEM) isn't its own backend monitor type — it groups is_sjvair-flagged
-	// purpleair devices with airgradient devices (see monitorsMapIntegration.filters/featuresByType),
-	// so its visibility follows whichever of those two types supports the current pollutant.
-	const sjvairUnderlyingTypes = ["purpleair", "airgradient"];
-
-	function pollutantSupportedByType(type: string): boolean {
-		const deviceMeta = monitorsManager.meta?.monitors[type];
-		return (
-			!!deviceMeta && !!monitorsManager.pollutant && monitorsManager.pollutant in deviceMeta.entries
-		);
-	}
-
-	const monitorDisplayOptions = $derived.by(() => {
-		return Object.entries(monitorsMapIntegration.displayOptions).filter(([key]) => {
-			if (uiOnlyDisplayOptions.has(key)) return true;
-			if (key === "sjvair") return sjvairUnderlyingTypes.some(pollutantSupportedByType);
-			return pollutantSupportedByType(key);
-		});
-	});
-
-	$effect(() => {
-		monitorsManager.list = [];
-		monitorsManager.latest = null;
-		monitorsManager.update();
-	});
-</script>
-
-<DisplayOption>
-	<p class="text-lg font-bold underline">Air Monitors</p>
-	<div class="mb-2 w-full text-xs">
-		<div class="w-fit">
-			<ToggleSwitch
-				id="monitor-clusters"
-				label="Marker Clusters"
-				bind:value={monitorsMapIntegration.clustered}
-			></ToggleSwitch>
-		</div>
-		{#if monitorsManager.pollutant}
-			<SegmentedControl
-				segmentLabel="Pollutant:"
-				options={pollutants}
-				bind:group={monitorsManager.pollutant}
-			/>
-		{/if}
-	</div>
-
-	{#each monitorDisplayOptions as [id, option] (option.label)}
-		{@const inputId = `${id}-monitor-display-option`}
-		<label for={inputId} class="flex cursor-pointer gap-1 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}
-</DisplayOption>

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

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

package/src/lib/MapLegend.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-	import MonitorMarkersLegend from "$lib/monitors/components/MonitorMarkersLegend.svelte";
-	import HMSFireLegend from "$lib/hms/components/HMSFireLegend.svelte";
-</script>
-
-<!--
-<div class="z-10 absolute bottom-6 left-6 w-1/2 lg:w-1/5">
-	<MonitorMarkersLegend />
-	<HMSFireLegend />
-</div>
--->
-<div class="pointer-events-none flex flex-col gap-1 pb-4 pl-4">
-	<HMSFireLegend />
-	<MonitorMarkersLegend />
-</div>