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

package/src/lib/search/Search.svelte

@@ -1,19 +1,24 @@
 <script lang="ts">
-	import { onDestroy } from "svelte";
-	import { Marker } from "@maptiler/sdk";
 	import { MapPinIcon, SearchIcon } from "@lucide/svelte";
+	import type { MapContext } from "@sjvair/map-sdk";
 	import { useMonitorMapRouter } from "../router-context";
-	import { mapManager } from "$lib/map/map-manager.svelte.js";
 	import { debounce } from "$lib/utils";
+	import { searchPin } from "./search-pin.svelte.js";
 	import { monitorSearch, geocode, type SearchResult } from "./service";
-	import { monitorsMapIntegration } from "$lib/monitors/monitors-map-integration.svelte";
 
+	interface SearchProps {
+		map: MapContext;
+	}
+
+	const { map }: SearchProps = $props();
 	const { navigate, basePath } = useMonitorMapRouter();
 
 	let collapsed = $state(true);
 	let searchText = $state("");
 	let results: SearchResult[] = $state([]);
-	let marker: Marker | null = $state.raw(null);
+	// The layout passes one MapContext for the widget's lifetime.
+	// svelte-ignore state_referenced_locally
+	const pin = searchPin(map);
 	let inputEl: HTMLInputElement | null = $state(null);
 
 	function clickOutside(node: HTMLElement) {
@@ -42,16 +47,14 @@
 	function clearSearch() {
 		searchText = "";
 		results = [];
-		marker?.remove();
-		marker = null;
+		pin.clear();
 	}
 
 	async function handleInput() {
 		const query = searchText;
 		if (!query) {
 			results = [];
-			marker?.remove();
-			marker = null;
+			pin.clear();
 			return;
 		}
 		const monitorResults = await monitorSearch(query);
@@ -73,40 +76,24 @@
 		collapsed = true;
 		searchText = "";
 		results = [];
-		marker?.remove();
-		marker = null;
-		if (mapManager.map && result.monitor.position) {
+		pin.clear();
+		if (result.monitor.position) {
 			const { coordinates } = result.monitor.position;
-			const center: [number, number] = [coordinates[0], coordinates[1]];
-			mapManager.map.flyTo({
-				center,
-				zoom: 12
-			});
+			map.flyTo({ center: [coordinates[0], coordinates[1]], zoom: 12 });
 		}
 		await navigate(`${basePath}/monitor/:id`, { params: { id: result.monitor.id } });
-		monitorsMapIntegration.selectedMonitorId = result.monitor.id;
 	}
 
 	function selectGeocode(result: Extract<SearchResult, { type: "geocode" }>) {
 		const { feature } = result;
-		marker?.remove();
-		marker = null;
-		if (mapManager.map) {
-			const center: [number, number] = [feature.center[0], feature.center[1]];
-			marker = new Marker().setLngLat(center).addTo(mapManager.map);
-			const isAddress = feature.place_type?.[0] === "address";
-			mapManager.map.flyTo({
-				center,
-				...(isAddress && { zoom: 16 })
-			});
-		}
+		pin.clear();
+		const center: [number, number] = [feature.center[0], feature.center[1]];
+		pin.place(center);
+		const isAddress = feature.place_type?.[0] === "address";
+		map.flyTo({ center, ...(isAddress && { zoom: 16 }) });
 		results = [];
 		collapsed = true;
 	}
-
-	onDestroy(() => {
-		marker?.remove();
-	});
 </script>
 
 <div

package/src/lib/search/search-pin.svelte.ts

@@ -0,0 +1,35 @@
+import { Marker } from "@maptiler/sdk";
+import { maptilerMap, type MapContext } from "@sjvair/map-sdk";
+
+export interface SearchPin {
+	place(center: [number, number]): void;
+	clear(): void;
+}
+
+/**
+ * The pin a geocoded place leaves on the map. It follows the map: when the GL map is replaced
+ * (a basemap or style rebuild), the pin leaves the old one and is added to the new one. Call it
+ * during component init; the pin is removed when the component is destroyed.
+ */
+export function searchPin(map: MapContext): SearchPin {
+	let center = $state.raw<[number, number] | null>(null);
+
+	$effect(() => {
+		const gl = maptilerMap(map);
+		const at = center;
+		if (!gl || !at) return;
+		const marker = new Marker().setLngLat(at).addTo(gl);
+		return () => {
+			marker.remove();
+		};
+	});
+
+	return {
+		place(next) {
+			center = next;
+		},
+		clear() {
+			center = null;
+		}
+	};
+}

package/src/lib/search/service.ts

@@ -1,6 +1,7 @@
 import { geocoding, type GeocodingFeature } from "@maptiler/sdk";
-import type { MonitorLatestType } from "@sjvair/sdk";
-import { monitorsManager } from "$lib/monitors/monitors.svelte";
+import type { MonitorData } from "@sjvair/sdk";
+import { monitorMapConfig } from "$lib/config.svelte.js";
+import { monitorsStore } from "$lib/stores.svelte.js";
 import AirGradientLogo from "../assets/logos/airgradient-blue.svg";
 import AirNowLogo from "../assets/logos/airnow-compact.jpg";
 import CarbLogo from "../assets/logos/carb-compact.jpg";
@@ -9,7 +10,7 @@ import SJVAirLogo from "../assets/logos/sjvair.svg";
 
 export type MonitorResult = {
 	type: "monitor";
-	monitor: MonitorLatestType<"pm25" | "o3">;
+	monitor: MonitorData;
 	logo: { url: string; alt: string };
 };
 
@@ -22,7 +23,7 @@ export type SearchResult = MonitorResult | GeocodeResult;
 
 const SJV_CENTER: [number, number] = [-119.8, 36.76];
 
-function getMonitorLogo(monitor: MonitorLatestType<"pm25" | "o3">): { url: string; alt: string } {
+function getMonitorLogo(monitor: MonitorData): { url: string; alt: string } {
 	switch (monitor.data_source.name) {
 		case "AQview":
 			return { url: CarbLogo, alt: "AQview" };
@@ -66,29 +67,43 @@ function resolveProximity(): Promise<[number, number]> {
 	});
 }
 
-export async function monitorSearch(query: string): Promise<SearchResult[]> {
-	if (!monitorsManager.latest) return [];
+/** Monitors whose name matches `query`: exact, then prefix, then substring; at most 4. */
+export function searchMonitors(
+	query: string,
+	monitors: Iterable<MonitorData>,
+	latest: ReadonlyMap<string, { value: number | null }>
+): MonitorData[] {
 	const normalized = query.toLowerCase();
-	const exact: MonitorLatestType<"pm25" | "o3">[] = [];
-	const prefix: MonitorLatestType<"pm25" | "o3">[] = [];
-	const substr: MonitorLatestType<"pm25" | "o3">[] = [];
+	const exact: MonitorData[] = [];
+	const prefix: MonitorData[] = [];
+	const substr: MonitorData[] = [];
 
-	for (const monitor of monitorsManager.latest.values()) {
+	// Only monitors with a reading for the current pollutant, as the map shows them.
+	for (const monitor of monitors) {
+		if (latest.get(monitor.id)?.value == null) continue;
 		const name = monitor.name.toLowerCase();
 		if (name === normalized) exact.push(monitor);
 		else if (name.startsWith(normalized)) prefix.push(monitor);
 		else if (name.includes(normalized)) substr.push(monitor);
 	}
 
-	return [...exact, ...prefix, ...substr]
-		.slice(0, 4)
-		.map((monitor) => ({ type: "monitor" as const, monitor, logo: getMonitorLogo(monitor) }));
+	return [...exact, ...prefix, ...substr].slice(0, 4);
 }
 
-export async function geocode(query: string): Promise<SearchResult[]> {
-	const proximity = await getProximity();
+export async function monitorSearch(query: string): Promise<SearchResult[]> {
+	return searchMonitors(query, monitorsStore.monitors.values(), monitorsStore.latest).map(
+		(monitor) => ({ type: "monitor" as const, monitor, logo: getMonitorLogo(monitor) })
+	);
+}
+
+export async function geocodeQuery(
+	query: string,
+	proximity: [number, number],
+	key: string
+): Promise<SearchResult[]> {
 	try {
 		const result = await geocoding.forward(query, {
+			apiKey: key,
 			country: ["us"],
 			fuzzyMatch: true,
 			limit: 4,
@@ -99,3 +114,7 @@ export async function geocode(query: string): Promise<SearchResult[]> {
 		return [];
 	}
 }
+
+export async function geocode(query: string): Promise<SearchResult[]> {
+	return geocodeQuery(query, await getProximity(), monitorMapConfig().maptilerKey);
+}

package/src/lib/stores.svelte.ts

@@ -0,0 +1,15 @@
+import {
+	createCollocationSitesStore,
+	createHmsFireStore,
+	createHmsSmokeStore,
+	createMonitorsStore
+} from "@sjvair/map-sdk/stores";
+
+/**
+ * The app-wide data stores, created once. This module imports only `@sjvair/map-sdk/stores`, so
+ * the light `/core` entry can reach it without loading the map engine.
+ */
+export const monitorsStore = createMonitorsStore();
+export const hmsSmokeStore = createHmsSmokeStore();
+export const hmsFireStore = createHmsFireStore();
+export const collocationSitesStore = createCollocationSitesStore({ monitors: monitorsStore });

package/src/lib/wind/wind-plugin.ts

@@ -0,0 +1,33 @@
+import { config, type CustomLayerInterface } from "@maptiler/sdk";
+import { WindLayer } from "@maptiler/weather";
+import type { MapPlugin } from "@sjvair/map-sdk";
+import { monitorMapConfig } from "../config.svelte.js";
+
+export interface WindPluginOptions {
+	/** Builds the layer; runs again on each restyle. Defaults to a `@maptiler/weather` WindLayer. */
+	createLayer?: (id: string) => CustomLayerInterface;
+}
+
+// The weather layer fetches its data with the SDK's global key, which map-sdk (it passes the key
+// to the map only) never sets.
+const defaultCreateLayer = (id: string) => {
+	config.apiKey = monitorMapConfig().maptilerKey;
+	return new WindLayer({ id, opacity: 0.5 }) as unknown as CustomLayerInterface;
+};
+
+/**
+ * Wind particles as a map-sdk custom layer. `@maptiler/weather` can't be a map-sdk dependency, so
+ * the host adds it here; only the layout chunk reaches this module.
+ */
+export function windPlugin(options: WindPluginOptions = {}): MapPlugin {
+	const createLayer = options.createLayer ?? defaultCreateLayer;
+	return {
+		id: "wind",
+		label: "Wind",
+		selectable: false,
+		setup(ctx) {
+			ctx.addCustomLayer("wind", createLayer);
+			return () => {};
+		}
+	};
+}

package/dist/lib/collocation-sites/CollocationTooltip.svelte

@@ -1,98 +0,0 @@
-<script lang="ts">
-	import { format, formatDistanceToNow } from "date-fns";
-	import DataBox from "../components/DataBox.svelte";
-	import type { CollocationSiteMapFeature } from "./types";
-	import { monitorsManager } from "../monitors/monitors.svelte";
-	import { getCurrentLevel } from "../monitors/monitor-utils";
-	import type { MonitorLatest, SJVAirEntryLevel } from "@sjvair/sdk";
-
-	interface CollocationTooltipProps {
-		feature: CollocationSiteMapFeature;
-	}
-
-	const { feature }: CollocationTooltipProps = $props();
-
-	const data = $derived.by(() => {
-		const collocated = monitorsManager.latest?.get(feature.properties.colocated_id);
-		const reference = monitorsManager.latest?.get(feature.properties.reference_id);
-
-		return {
-			collocated: getMonitorData(collocated),
-			reference: getMonitorData(reference)
-		};
-	});
-
-	function getMonitorData(monitor: MonitorLatest | undefined) {
-		if (!monitor || !("value" in monitor.latest) || !monitorsManager.meta) return;
-
-		const entryType = monitorsManager.meta.entryType(monitor.latest.entry_type);
-		const level: SJVAirEntryLevel | undefined = getCurrentLevel(
-			monitor.latest.value,
-			entryType.asIter.levels!
-		);
-
-		const updateDuration = monitorsManager.meta.monitorType(monitor.type).expected_interval;
-
-		return {
-			color: level?.color ?? "",
-			header: entryType.label,
-			date: {
-				formatted: format(monitor.latest.timestamp, "h:mm:aaa EEEE MMM dd, yyyy"),
-				diference: formatDistanceToNow(monitor.latest.timestamp, {
-					addSuffix: true,
-					includeSeconds: true
-				})
-			},
-			monitorName: monitor.name,
-			subheading: `(${updateDuration} avg)`,
-			value: Math.round(parseInt(monitor.latest.value, 10)).toString()
-		};
-	}
-</script>
-
-{#if data}
-	<div class="flex flex-col gap-4">
-		{#if data.reference}
-			<div class="flex gap-2">
-				<DataBox
-					color={data.reference.color}
-					header={data.reference.header}
-					subheading={data.reference.subheading}
-					value={data.reference.value}
-				/>
-				<div class="flex flex-col">
-					<p class="leading-none">{data.reference.date.formatted}</p>
-					<h1 class="text-lg font-bold underline">{data.reference.monitorName}</h1>
-					<p class="leading-none">Reference monitor</p>
-					<div class="mt-auto">
-						<p class="text-base leading-none">Last updated</p>
-						<p class="text-base leading-none">{data.reference.date.diference}</p>
-					</div>
-				</div>
-			</div>
-		{:else}
-			<h1>Reference monitor disabled</h1>
-		{/if}
-		{#if data.collocated}
-			<div class="flex flex-row-reverse gap-2">
-				<DataBox
-					color={data.collocated.color}
-					header={data.collocated.header}
-					subheading={data.collocated.subheading}
-					value={data.collocated.value}
-				/>
-				<div class="flex flex-col">
-					<p class="leading-none">{data.collocated.date.formatted}</p>
-					<h1 class="text-lg font-bold underline">{data.collocated.monitorName}</h1>
-					<p class="leading-none">Collocated monitor</p>
-					<div class="mt-auto">
-						<p class="text-base leading-none">Last updated</p>
-						<p class="text-base leading-none">{data.collocated.date.diference}</p>
-					</div>
-				</div>
-			</div>
-		{:else}
-			<h1>Collocated monitor disabled</h1>
-		{/if}
-	</div>
-{/if}

package/dist/lib/collocation-sites/CollocationTooltip.svelte.d.ts

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

package/dist/lib/collocation-sites/collocations-icon-manager.svelte.d.ts

@@ -1,7 +0,0 @@
-import { MonitorShapeIconManager } from "../monitors/monitors-icon-manager.svelte";
-export declare function getCollocationIconId(baseIconId: string): string;
-export declare class CollocationIconManager extends MonitorShapeIconManager {
-    protected get idPrefix(): string;
-    protected get iconSize(): number;
-    protected transformSvg(svg: string): string;
-}

package/dist/lib/collocation-sites/collocations-icon-manager.svelte.js

@@ -1,18 +0,0 @@
-import { CROSSHAIR_ICON_SIZE, withCrosshair } from "../map/icons";
-import { MonitorShapeIconManager } from "../monitors/monitors-icon-manager.svelte";
-const COLLOCATION_ICON_PREFIX = "collocation";
-const CROSSHAIR_COLOR = "#4A5FC6";
-export function getCollocationIconId(baseIconId) {
-    return `${COLLOCATION_ICON_PREFIX}-${baseIconId}`;
-}
-export class CollocationIconManager extends MonitorShapeIconManager {
-    get idPrefix() {
-        return COLLOCATION_ICON_PREFIX;
-    }
-    get iconSize() {
-        return CROSSHAIR_ICON_SIZE;
-    }
-    transformSvg(svg) {
-        return withCrosshair(svg, CROSSHAIR_COLOR);
-    }
-}

package/dist/lib/collocation-sites/collocations-map-integration.svelte.d.ts

@@ -1,21 +0,0 @@
-import { type Map as MaptilerMap } from "@maptiler/sdk";
-import { MapIconLayerIntegration } from "../map/integrations/map-geojson-integration.svelte";
-import { CollocationIconManager } from "./collocations-icon-manager.svelte";
-import { TooltipManager } from "../map/integrations/tooltip.svelte";
-import type { CollocationSiteMapFeature, CollocationSiteMarkerProperties } from "./types";
-declare class CollocationSitesMapIntegration extends MapIconLayerIntegration<CollocationSiteMarkerProperties> {
-    referenceId: string;
-    enabled: boolean;
-    icons: CollocationIconManager;
-    tooltipManager: TooltipManager;
-    /** The option only applies while monitors are shown with PM2.5. */
-    get available(): boolean;
-    features: Array<CollocationSiteMapFeature>;
-    mapLayer: Parameters<MaptilerMap["addLayer"]>[0];
-    get mapSource(): Parameters<MaptilerMap["addSource"]>[1];
-    constructor();
-    apply(): void;
-    remove(): void;
-}
-export declare const collocationSitesMapIntegration: CollocationSitesMapIntegration;
-export type { CollocationSitesMapIntegration as MonitorsMapIntegration };

package/dist/lib/collocation-sites/collocations-map-integration.svelte.js

@@ -1,113 +0,0 @@
-import { mapManager } from "../map/map-manager.svelte.js";
-import { MapIconLayerIntegration } from "../map/integrations/map-geojson-integration.svelte";
-import { CollocationIconManager, getCollocationIconId } from "./collocations-icon-manager.svelte";
-import { TooltipManager } from "../map/integrations/tooltip.svelte";
-import { collocationSitesManager } from "./collocations.svelte";
-import { monitorsManager } from "../monitors/monitors.svelte";
-import { monitorsMapIntegration } from "../monitors/monitors-map-integration.svelte";
-import { untrack } from "svelte";
-import CollocationTooltip from "./CollocationTooltip.svelte";
-import { mountPopup } from "../map/utils";
-function collocationTooltip(evt) {
-    const feature = evt.features?.[0];
-    if (!feature)
-        return;
-    return mountPopup(CollocationTooltip, { feature }, evt.lngLat);
-}
-class CollocationSitesMapIntegration extends MapIconLayerIntegration {
-    referenceId = "collocation-sites";
-    enabled = $state(false);
-    icons = new CollocationIconManager(monitorsManager);
-    tooltipManager = new TooltipManager();
-    /** The option only applies while monitors are shown with PM2.5. */
-    get available() {
-        return monitorsMapIntegration.enabled && monitorsManager.pollutant === "pm25";
-    }
-    features = $derived.by(() => {
-        if (!monitorsManager.meta ||
-            !monitorsManager.pollutant ||
-            !collocationSitesManager.collocationSites ||
-            monitorsMapIntegration.features.length === 0) {
-            return [];
-        }
-        return collocationSitesManager.collocationSites
-            .map((c) => {
-            const referenceMonitorFeature = monitorsMapIntegration.features.find((m) => m.properties.id === c.reference_id);
-            if (!referenceMonitorFeature)
-                return;
-            const feature = {
-                type: "Feature",
-                properties: {
-                    icon: getCollocationIconId(referenceMonitorFeature.properties.icon),
-                    colocated_id: c.colocated_id,
-                    reference_id: c.reference_id,
-                    name: c.name
-                },
-                geometry: c.position
-            };
-            return feature;
-        })
-            .filter((f) => f !== undefined);
-    });
-    mapLayer = {
-        id: this.referenceId,
-        type: "symbol",
-        source: this.referenceId,
-        layout: {
-            "icon-allow-overlap": true,
-            "icon-ignore-placement": true,
-            "icon-image": ["get", "icon"],
-            "icon-size": 1
-        },
-        paint: {}
-    };
-    get mapSource() {
-        return {
-            type: "geojson",
-            promoteId: "id",
-            data: {
-                type: "FeatureCollection",
-                features: this.features
-            }
-        };
-    }
-    constructor() {
-        super();
-        $effect.root(() => {
-            $effect(() => {
-                const features = this.features;
-                if (!mapManager.map || !this.enabled)
-                    return;
-                mapManager.setDataSource(this.referenceId, features);
-            });
-            // Remove the layer while the option is unavailable (Ozone or Pollutant = None); restore
-            // it when it becomes available again if the user still has it checked.
-            $effect(() => {
-                if (!this.available) {
-                    untrack(() => this.remove());
-                }
-                else if (untrack(() => this.enabled)) {
-                    untrack(() => this.apply());
-                }
-            });
-        });
-    }
-    apply() {
-        if (!this.available) {
-            this.remove();
-            return;
-        }
-        if (!mapManager.map)
-            return;
-        if (!this.tooltipManager.has(this.referenceId)) {
-            this.tooltipManager.register(this.referenceId, collocationTooltip, Number.MAX_SAFE_INTEGER);
-        }
-        this.tooltipManager.enable();
-        super.apply();
-    }
-    remove() {
-        this.tooltipManager.disable();
-        super.remove();
-    }
-}
-export const collocationSitesMapIntegration = new CollocationSitesMapIntegration();

package/dist/lib/collocation-sites/collocations.svelte.d.ts

@@ -1,9 +0,0 @@
-import { type CollocationSite } from "@sjvair/sdk";
-declare class CollocationSitesManager {
-    initialized: boolean;
-    collocationSites: Array<CollocationSite> | null;
-    init(): Promise<void>;
-    update(): Promise<void>;
-}
-export declare const collocationSitesManager: CollocationSitesManager;
-export type { CollocationSitesManager };

package/dist/lib/collocation-sites/collocations.svelte.js

@@ -1,17 +0,0 @@
-import { getCollocationSites } from "@sjvair/sdk";
-class CollocationSitesManager {
-    initialized = $state(false);
-    collocationSites = $state(null);
-    async init() {
-        if (this.initialized)
-            return;
-        this.collocationSites = await getCollocationSites();
-        this.initialized = true;
-    }
-    async update() {
-        if (!this.initialized)
-            return;
-        this.collocationSites = await getCollocationSites();
-    }
-}
-export const collocationSitesManager = new CollocationSitesManager();

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

@@ -1,8 +0,0 @@
-import type { Feature, Geometry } from "geojson";
-export type CollocationSiteMapFeature = Feature<Geometry, CollocationSiteMarkerProperties>;
-export interface CollocationSiteMarkerProperties {
-    icon: string;
-    colocated_id: string;
-    reference_id: string;
-    name: string;
-}

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

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

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

@@ -1,16 +0,0 @@
-<script lang="ts">
-	import type { EvStationClusterMapFeature } from "../types";
-
-	interface Props {
-		feature: EvStationClusterMapFeature;
-	}
-
-	const { feature }: Props = $props();
-
-	const levelLabel = $derived(feature.source.includes("lvl2") ? "Level 2" : "Level 3");
-</script>
-
-<div class="flex flex-col gap-1 p-1">
-	<p class="font-semibold">{levelLabel} Chargers</p>
-	<p class="text-sm">{feature.properties.point_count} stations</p>
-</div>

package/dist/lib/ev-stations/components/EvStationClusterTooltip.svelte.d.ts

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

package/dist/lib/ev-stations/components/EvStationTooltip.svelte.d.ts

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

package/dist/lib/ev-stations/ev-stations-cluster-renderer.d.ts

@@ -1,19 +0,0 @@
-import { type ClickHandler } from "../map/integrations/click-manager";
-import { TooltipManager } from "../map/integrations/tooltip.svelte";
-import type { EvStationMapFeature } from "./types";
-export interface EvStationsClusterContext {
-    referenceId: string;
-    featuresByLevel: Record<string, EvStationMapFeature[]>;
-    beforeLayer?: string;
-    tooltipManager: TooltipManager;
-}
-export declare class EvStationsClusterRenderer {
-    private ctx;
-    private _levels;
-    constructor(ctx: EvStationsClusterContext);
-    apply(stationClickHandler: ClickHandler): void;
-    remove(): void;
-    get unclusteredLayerIds(): string[];
-    syncFeatures(): void;
-    private makeClusterClickHandler;
-}