@sjvair/monitor-map 4.3.0 → 5.0.0-beta.0

package/src/lib/map/basemap.ts

@@ -1,24 +0,0 @@
-/** The slices of MapTiler's MapStyleVariant / ReferenceMapStyle this module needs. */
-export interface StyleVariantLike {
-	getType(): string;
-}
-
-export interface ReferenceStyleLike<V extends StyleVariantLike> {
-	hasVariant(type: string): boolean;
-	getVariant(type: string): V;
-	getDefaultVariant(): V;
-}
-
-/**
- * Variant to show after switching basemaps: the same variant type (e.g. "DARK") when the new
- * basemap offers it, otherwise the new basemap's default.
- */
-export function variantForStyle<V extends StyleVariantLike>(
-	style: ReferenceStyleLike<V>,
-	previous: StyleVariantLike | null
-): V {
-	if (previous && style.hasVariant(previous.getType())) {
-		return style.getVariant(previous.getType());
-	}
-	return style.getDefaultVariant();
-}

package/src/lib/map/icons.ts

@@ -1,42 +0,0 @@
-import { darken } from "color2k";
-
-export function square(color: string, borderWidth: number, borderColor?: string) {
-	return `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <rect x="${borderWidth / 2}" y="${borderWidth / 2}" width="${24 - borderWidth}" height="${24 - borderWidth}"
-      fill="${color}" stroke="${darken(borderColor ?? color, 0.1)}" stroke-width="${borderWidth}"/>
-  </svg>`;
-}
-
-export function circle(color: string, borderWidth: number, borderColor?: string) {
-	return `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="12" cy="12" r="${12 - borderWidth}" fill="${color}" stroke="${darken(borderColor ?? color, 0.1)}" stroke-width="${borderWidth}"/>
-  </svg>`;
-}
-
-export function triangle(color: string, borderWidth: number, borderColor?: string) {
-	const points = `${12},${borderWidth} ${24 - borderWidth},${24 - borderWidth} ${borderWidth},${24 - borderWidth}`;
-	return `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="${points}"
-      fill="${color}" stroke="${darken(borderColor ?? color, 0.1)}" stroke-width="${borderWidth}"/>
-  </svg>`;
-}
-
-const CROSSHAIR_PATH =
-	"M495.9 248H392c-4.4 0-8 3.6-8 8s3.6 8 8 8H495.9C491.7 390.2 390.2 491.7 264 495.9V392c0-4.4-3.6-8-8-8s-8 3.6-8 8V495.9C121.8 491.7 20.3 390.2 16.1 264H120c4.4 0 8-3.6 8-8s-3.6-8-8-8H16.1C20.3 121.8 121.8 20.3 248 16.1V120c0 4.4 3.6 8 8 8s8-3.6 8-8V16.1C390.2 20.3 491.7 121.8 495.9 248zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256z";
-
-const CROSSHAIR_PADDING = 16;
-export const CROSSHAIR_ICON_SIZE = 24 + CROSSHAIR_PADDING * 2;
-
-export function withCrosshair(baseSvg: string, color: string = "#ffffff"): string {
-	const size = CROSSHAIR_ICON_SIZE;
-	const inner = baseSvg.replace("<svg ", `<svg x="${CROSSHAIR_PADDING}" y="${CROSSHAIR_PADDING}" `);
-	return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">${inner}<svg x="0" y="0" width="${size}" height="${size}" viewBox="-8 -8 528 528"><path d="${CROSSHAIR_PATH}" fill="${color}" stroke="${color}" stroke-width="5"/></svg></svg>`;
-}
-
-export function asDataURI(svg: string): string {
-	return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
-}
-
-export function fireIcon(color: string, size: number): string {
-	return `<svg width="${size}" height="${size}" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg" fill="${color}"><path d="M200-400q0 52 21 98.5t60 81.5q-1-5-1-9v-9q0-32 12-60t35-51l113-111 113 111q23 23 35 51t12 60v9q0 4-1 9 39-35 60-81.5t21-98.5q0-50-18.5-94.5T608-574q-20 13-42 19.5t-45 6.5q-62 0-107.5-41T361-690q-39 33-69 68.5t-50.5 72Q221-513 210.5-475T200-400Zm240 52-57 56q-11 11-17 25t-6 29q0 32 23.5 55t56.5 23q33 0 56.5-23t23.5-55q0-16-6-29.5T497-292l-57-56Zm0-492v132q0 34 23.5 57t57.5 23q18 0 33.5-7.5T582-658l18-22q74 42 117 117t43 163q0 134-93 227T440-80q-134 0-227-93t-93-227q0-129 86.5-245T440-840Zm400 320q-17 0-28.5-11.5T800-560q0-17 11.5-28.5T840-600q17 0 28.5 11.5T880-560q0 17-11.5 28.5T840-520Zm-40-120v-200h80v200h-80Z"/></svg>`;
-}

package/src/lib/map/integrations/base-layer-seperator.ts

@@ -1,17 +0,0 @@
-import { Map as MaptilerMap } from "@maptiler/sdk";
-import { MapLayerIntegration } from "./map-layer-integration.svelte";
-
-class BaseLayerSeperator extends MapLayerIntegration {
-	referenceId: string = "Base Layer Seperator";
-
-	enabled: boolean = true;
-
-	mapLayer: Parameters<MaptilerMap["addLayer"]>[0] = {
-		id: this.referenceId,
-		type: "custom",
-		render: function () {}
-	};
-}
-
-export const baseLayerSeperator = new BaseLayerSeperator();
-export type { BaseLayerSeperator };

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

@@ -1,64 +0,0 @@
-import type { MapGeoJSONFeature, MapMouseEvent } from "@maptiler/sdk";
-import { mapManager } from "../map-manager.svelte.js";
-
-export type ClickHandler = (features: MapGeoJSONFeature[], evt: MapMouseEvent & object) => void;
-
-interface ClickRegistration {
-	layerIds: string[];
-	handler: ClickHandler;
-}
-
-class ClickManager {
-	private registrations: ClickRegistration[] = [];
-	private isListening = false;
-
-	/** Must be called after `mapManager.map` is initialized (i.e. from within `apply()`). */
-	register(layerIds: string[], handler: ClickHandler): void {
-		const incomingSet = new Set(layerIds);
-		const existing = this.registrations.find((r) => r.layerIds.some((id) => incomingSet.has(id)));
-		if (existing) {
-			existing.layerIds = layerIds;
-			existing.handler = handler;
-		} else {
-			this.registrations.push({ layerIds, handler });
-		}
-		this.ensureListener();
-	}
-
-	unregister(layerIds: string[]): void {
-		const set = new Set(layerIds);
-		this.registrations = this.registrations.filter((r) => !r.layerIds.some((id) => set.has(id)));
-		if (this.registrations.length === 0) {
-			this.removeListener();
-		}
-	}
-
-	private ensureListener(): void {
-		if (this.isListening || !mapManager.map) return;
-		mapManager.map.on("click", this.handleClick);
-		this.isListening = true;
-	}
-
-	private removeListener(): void {
-		if (!this.isListening) return;
-		mapManager.map?.off("click", this.handleClick);
-		this.isListening = false;
-	}
-
-	private handleClick = (evt: MapMouseEvent & object): void => {
-		if (!mapManager.map) return;
-		const allLayerIds = this.registrations.flatMap((r) => r.layerIds);
-		const features = mapManager.map.queryRenderedFeatures(evt.point, { layers: allLayerIds });
-		if (!features.length) return;
-
-		const winningLayerId = features[0].layer.id;
-		const registration = this.registrations.find((r) => r.layerIds.includes(winningLayerId));
-		if (!registration) return;
-
-		const ownFeatures = features.filter((f) => registration.layerIds.includes(f.layer.id));
-		registration.handler(ownFeatures, evt);
-	};
-}
-
-export const clickManager = new ClickManager();
-export type { ClickManager };

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

@@ -1,25 +0,0 @@
-import { XMap } from "@tstk/builtin-extensions";
-import type { SomeMapIntegration } from "./types";
-
-class IntegrationsManager {
-	private integrations: XMap<string, SomeMapIntegration> = new XMap();
-
-	register(...integrations: Array<SomeMapIntegration>): void {
-		for (const integration of integrations) {
-			this.integrations.set(integration.referenceId, integration);
-		}
-	}
-
-	refresh(): void {
-		for (const integration of this.integrations.values()) {
-			if (integration.enabled) {
-				integration.apply();
-			} else if (integration.remove) {
-				integration.remove();
-			}
-		}
-	}
-}
-
-export const integrationsManager = new IntegrationsManager();
-export type { IntegrationsManager };

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

@@ -1,13 +0,0 @@
-import { MapImageIcon } from "./types";
-
-export class MapDisplayOption {
-	icon?: MapImageIcon;
-	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-geojson-integration.svelte.ts

@@ -1,77 +0,0 @@
-import type { Map as MaptilerMap } from "@maptiler/sdk";
-import type { Feature, Geometry } from "geojson";
-import type { MapIconManager } from "./map-icon-manager";
-import { MapLayerIntegration } from "./map-layer-integration.svelte";
-import { mapManager } from "../map-manager.svelte.js";
-
-export abstract class MapGeoJSONIntegration<
-	T = Record<string, unknown>
-> extends MapLayerIntegration {
-	abstract features: Array<Feature<Geometry, T>>;
-	abstract mapSource: Parameters<MaptilerMap["addSource"]>[1];
-
-	remove() {
-		this.removeLayerAndSource();
-	}
-
-	/**
-	 * Removes only this integration's own layer and source. Non-virtual on purpose: `apply()`
-	 * paths call it to clear stale map state before re-adding, without triggering a subclass's
-	 * `remove()` override (which also tears down tooltips/click handlers that apply just set up).
-	 */
-	protected removeLayerAndSource(): void {
-		if (mapManager.map?.getLayer(this.referenceId)) {
-			mapManager.map.removeLayer(this.referenceId);
-		}
-		if (mapManager.map?.getSource(this.referenceId)) {
-			mapManager.map.removeSource(this.referenceId);
-		}
-	}
-}
-
-export abstract class MapIconLayerIntegration<
-	T = Record<string, unknown>
-> extends MapGeoJSONIntegration<T> {
-	abstract icons: MapIconManager;
-	private generation = 0;
-
-	/**
-	 * Drops every callback still waiting on icons. `apply()` and `remove()` call it, so a
-	 * subclass overriding `apply()` without calling `super.apply()` first must call it itself.
-	 */
-	protected supersedePending(): void {
-		this.generation++;
-	}
-
-	/**
-	 * Runs `run` once the icons have loaded, unless an `apply()` or `remove()` has happened
-	 * since (the state it was scheduled for is gone) or a basemap change is in flight (the
-	 * refresh on "style.load" re-applies).
-	 */
-	protected whenIconsLoad(run: () => void): void {
-		const generation = this.generation;
-		this.icons
-			.loadIcons()
-			.then(() => {
-				if (generation !== this.generation || mapManager.styleLoading) return;
-				run();
-			})
-			.catch(console.error);
-	}
-
-	apply() {
-		if (!mapManager.map) return;
-
-		this.supersedePending();
-		this.whenIconsLoad(() => {
-			this.removeLayerAndSource();
-			mapManager.map?.addSource(this.referenceId, this.mapSource);
-			super.apply();
-		});
-	}
-
-	remove() {
-		this.supersedePending();
-		super.remove();
-	}
-}

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

@@ -1,67 +0,0 @@
-import type { Map as MaptilerMap } from "@maptiler/sdk";
-import { mapManager } from "../map-manager.svelte.js";
-import type { MapImageIcon } from "./types";
-import { SvelteMap } from "svelte/reactivity";
-
-export class MapIconManager {
-	protected icons: SvelteMap<string, MapImageIcon> = new SvelteMap();
-
-	constructor(iconMap?: SvelteMap<string, MapImageIcon>) {
-		if (iconMap) {
-			this.icons = iconMap;
-		}
-	}
-
-	get iter(): MapIterator<[string, MapImageIcon]> {
-		return this.icons.entries();
-	}
-
-	get(id: string): MapImageIcon | undefined {
-		return this.icons.get(id);
-	}
-
-	has(id: string): boolean {
-		return this.icons.has(id);
-	}
-
-	async loadIcons(): Promise<void> {
-		if (!mapManager.map) return;
-		await Promise.all(this.icons.values().map((icon) => this.loadImage(icon, mapManager.map!)));
-	}
-
-	register(id: string, icon: HTMLImageElement) {
-		const imageIcon: MapImageIcon = { id, image: icon };
-		this.icons.set(id, imageIcon);
-	}
-
-	protected loadImage(icon: MapImageIcon, map: MaptilerMap): Promise<void> {
-		return this.applyImage("add", icon, map);
-	}
-
-	protected updateImage(icon: MapImageIcon, map: MaptilerMap): Promise<void> {
-		return this.applyImage("update", icon, map);
-	}
-
-	private applyImage(
-		action: "add" | "update",
-		icon: MapImageIcon,
-		map: MaptilerMap
-	): Promise<void> {
-		const apply = () =>
-			action === "add" ? map.addImage(icon.id, icon.image) : map.updateImage(icon.id, icon.image);
-		if (!icon.image.complete) {
-			return new Promise((resolve, reject) => {
-				icon.image.onload = () => {
-					apply();
-					resolve();
-				};
-				icon.image.onerror = (err) => {
-					reject(new Error(`Failed to load image ${icon.id}: ${err}`, { cause: err }));
-				};
-			});
-		} else {
-			apply();
-			return Promise.resolve();
-		}
-	}
-}

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

@@ -1,8 +0,0 @@
-export abstract class MapIntegration {
-	abstract referenceId: string;
-	abstract enabled: boolean;
-
-	abstract apply(): void;
-
-	remove?(): void;
-}

package/src/lib/map/integrations/map-layer-integration.svelte.ts

@@ -1,49 +0,0 @@
-import type { Map as MaptilerMap } from "@maptiler/sdk";
-import { untrack } from "svelte";
-import { mapManager } from "../map-manager.svelte.js";
-import { MapIntegration } from "./map-integration.svelte";
-
-export abstract class MapLayerIntegration extends MapIntegration {
-	abstract referenceId: string;
-	abstract mapLayer: Parameters<MaptilerMap["addLayer"]>[0];
-	abstract enabled: boolean;
-	beforeLayer?: string;
-
-	constructor() {
-		super();
-		// Each integration manages its own lifecycle. Tracking both mapManager.map and
-		// this.enabled means apply/remove fire automatically on map load and on enabled
-		// changes. untrack on the call itself prevents reactive reads inside apply/remove
-		// from leaking back into this effect's dependency graph. While a new basemap style is
-		// loading nothing is applied or removed: the refresh on "style.load" does both.
-		$effect.root(() => {
-			$effect(() => {
-				const enabled = this.enabled;
-				if (!mapManager.map || mapManager.styleLoading) return;
-				if (enabled) {
-					untrack(() => this.apply());
-				} else {
-					untrack(() => this.remove());
-				}
-			});
-		});
-	}
-
-	apply() {
-		if (!mapManager.map) return;
-		if (!mapManager.map.getLayer(this.referenceId)) {
-			mapManager.map.addLayer(this.mapLayer, this.beforeLayer);
-		}
-		mapManager.map.setLayoutProperty(
-			this.referenceId,
-			"visibility",
-			this.enabled ? "visible" : "none"
-		);
-	}
-
-	remove() {
-		if (mapManager.map?.getLayer(this.referenceId)) {
-			mapManager.map.removeLayer(this.referenceId);
-		}
-	}
-}

package/src/lib/map/integrations/tooltip.svelte.ts

@@ -1,153 +0,0 @@
-import type { MapLayerEventType, Popup } from "@maptiler/sdk";
-import { mapManager } from "../map-manager.svelte.js";
-import { XMap } from "@tstk/builtin-extensions";
-
-export type TooltipBuilder = (evt: MapLayerEventType["mousemove"] & object) => Popup | void;
-
-function handleZoom() {
-	TooltipManager.activeHandle?.clearTooltip();
-}
-
-function setCursorPointer() {
-	mapManager.map!.getCanvas().style.cursor = "pointer";
-}
-
-function setCursorDefault() {
-	mapManager.map!.getCanvas().style.cursor = "";
-}
-
-export class TooltipManager {
-	static activeHandle: TooltipHandle | null = null;
-
-	/**
-	 * Host-controlled master switch. When false, enable() is a no-op
-	 * regardless of how many times or when internal code (e.g. a map
-	 * integration's apply()) calls it -- unlike isEnabled below, this is
-	 * checked fresh on every enable() call, so it can't be raced by an
-	 * apply() invocation that fires before a host sets this to false.
-	 */
-	enabled: boolean = true;
-
-	private isEnabled: boolean = false;
-	private _tooltips: XMap<string, TooltipHandle> = new XMap();
-
-	get tooltips(): MapIterator<TooltipHandle> {
-		return this._tooltips.values();
-	}
-
-	enable(layerId?: string) {
-		if (!this.enabled || !mapManager.map || this.isEnabled) return;
-		mapManager.map.on("zoom", handleZoom);
-		this.forEachHandle(layerId, (h) => h.enable());
-		this.isEnabled = true;
-	}
-
-	disable(layerId?: string) {
-		if (!mapManager.map || !this.isEnabled) return;
-		mapManager.map.off("zoom", handleZoom);
-		this.forEachHandle(layerId, (h) => h.disable());
-		this.isEnabled = false;
-	}
-
-	get(layerId: string) {
-		return this._tooltips.get(layerId);
-	}
-
-	has(layerId: string) {
-		return this._tooltips.has(layerId);
-	}
-
-	register(layerId: string, builder: TooltipBuilder, priority: number = 0) {
-		const tooltipHandle = new TooltipHandle(layerId, builder, priority);
-		this._tooltips.set(layerId, tooltipHandle);
-		return tooltipHandle;
-	}
-
-	with(layerId: string | Array<string>, cb: (tooltip: TooltipHandle) => void) {
-		const ids = Array.isArray(layerId) ? layerId : [layerId];
-		for (const id of ids) {
-			const tooltip = this._tooltips.get(id);
-			if (tooltip) cb(tooltip);
-		}
-	}
-
-	private forEachHandle(layerId: string | undefined, cb: (h: TooltipHandle) => void) {
-		if (layerId !== undefined && this._tooltips.has(layerId)) {
-			cb(this._tooltips.get(layerId)!);
-		} else {
-			for (const h of this.tooltips) cb(h);
-		}
-	}
-}
-
-class TooltipHandle {
-	layerId: string;
-	priority: number;
-	tooltip: Popup | null = null;
-
-	private activeFeatureId: string | number | undefined = undefined;
-	private isEnabled: boolean = false;
-
-	clearTooltip = () => {
-		if (TooltipManager.activeHandle !== this) return;
-		this.tooltip?.remove();
-		this.tooltip = null;
-		TooltipManager.activeHandle = null;
-		this.activeFeatureId = undefined;
-	};
-
-	private setTooltip: (evt: MapLayerEventType["mousemove"] & object) => void;
-
-	constructor(layerId: string, builder: TooltipBuilder, priority: number = 0) {
-		this.layerId = layerId;
-		this.priority = priority;
-
-		this.setTooltip = (evt: MapLayerEventType["mousemove"] & object) => {
-			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;
-	}
-}

package/src/lib/map/integrations/types.ts

@@ -1,24 +0,0 @@
-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;
-}

package/src/lib/map/map-manager.svelte.ts

@@ -1,83 +0,0 @@
-import {
-	MapStyle,
-	MapStyleVariant,
-	config as MaptilerConfig,
-	Map as MaptilerMap
-} from "@maptiler/sdk";
-import type { Attachment } from "svelte/attachments";
-import { isGeoJSONSource } from "./utils";
-import type { Feature, GeoJsonProperties, Geometry } from "geojson";
-
-MaptilerConfig.apiKey = import.meta.env.VITE_MAPTILER_KEY;
-
-export const DefaultMapStyle: MapStyleVariant = MapStyle.STREETS_V4.DEFAULT;
-const excludeLayers = ["Sport", "Tourism", "Culture", "Shopping", "Food", "Transport"];
-
-class MapManager {
-	map: MaptilerMap | null = $state(null);
-	/**
-	 * True between `setStyle()` and the new style's "style.load". Plain (non-reactive) on purpose:
-	 * integrations skip touching the style while it's set, and the `integrationsManager.refresh()`
-	 * that runs on "style.load" applies/removes every integration afterwards.
-	 */
-	styleLoading: boolean = false;
-
-	setDataSource(sourceId: string, features: Array<Feature<Geometry, GeoJsonProperties>>): void {
-		const source = mapManager.map?.getSource(sourceId);
-
-		if (isGeoJSONSource(source)) {
-			source.setData({
-				type: "FeatureCollection",
-				features
-			});
-		}
-	}
-
-	refreshMap(): void {
-		if (mapManager.map) {
-			this.removeExcludedLayers();
-		}
-	}
-
-	removeExcludedLayers(): void {
-		for (const toExclude of excludeLayers) {
-			if (mapManager.map?.getLayer(toExclude)) {
-				mapManager.map.removeLayer(toExclude);
-			}
-		}
-	}
-
-	removeMap(): void {
-		return mapManager.map?.remove();
-	}
-}
-
-export const mapManager = new MapManager();
-export type { MapManager };
-
-export const initializeMap: Attachment<HTMLDivElement> = (container: string | HTMLElement) => {
-	const map = new MaptilerMap({
-		container: container,
-		center: [-119.7987626619462, 36.76272050981146],
-		zoom: 7,
-		style: DefaultMapStyle,
-		projection: "globe",
-		space: {
-			preset: "milkyway"
-		}
-	});
-
-	// "load" fires once the style and initial viewport tiles have loaded --
-	// in practice this can hang indefinitely (observed: never fires, even
-	// after 20+s, despite the style/tiles being independently fetchable) for
-	// reasons that don't affect "idle", which fires once the map has
-	// finished rendering after becoming idle. MapShell's own effect no
-	// longer waits for a *second* idle event to hide the load screen (see
-	// its comment), so listening for "idle" here doesn't reintroduce the
-	// hang that change was fixing.
-	map.once("idle", () => {
-		mapManager.map = map;
-	});
-
-	return () => map.remove();
-};