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

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

@@ -1,112 +0,0 @@
-<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-manager.svelte.js";
-	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

@@ -1,7 +0,0 @@
-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/MonitorTooltip.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-	import type { SJVAirEntryLevel } from "@sjvair/sdk";
-	import { format, formatDistanceToNow } from "date-fns";
-	import DataBox from "../../components/DataBox.svelte";
-	import { monitorsManager } from "../monitors.svelte";
-	import { getCurrentLevel } from "../monitor-utils";
-	import type { MonitorMapFeature } from "../types";
-
-	interface MonitorTooltipProps {
-		feature: MonitorMapFeature;
-	}
-
-	const { feature }: MonitorTooltipProps = $props();
-
-	const data = $derived.by(() => {
-		const monitor = monitorsManager.latest?.get(feature.properties.id);
-
-		if (!monitor || !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
-				})
-			},
-			subheading: `(${updateDuration} avg)`,
-			value: Math.round(parseInt(monitor.latest.value, 10)).toString()
-		};
-	});
-</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">
-			<p>{data.date.formatted}</p>
-			<h1 class="text-lg font-bold underline">{feature.properties.name}</h1>
-			<div class="mt-auto">
-				<p class="text-base leading-none">Last updated</p>
-				<p class="text-base leading-none">{data.date.diference}</p>
-			</div>
-		</div>
-	</div>
-{/if}

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

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

package/dist/lib/monitors/monitor-utils.d.ts

@@ -1,4 +0,0 @@
-import type { MonitorData, SJVAirEntryLevel } from "@sjvair/sdk";
-export declare function getCurrentLevel(value: string | number, levels: Array<SJVAirEntryLevel>): SJVAirEntryLevel | undefined;
-export declare function getOrder(monitor: MonitorData): number;
-export declare function getTypeShape(type: string): string;

package/dist/lib/monitors/monitor-utils.js

@@ -1,41 +0,0 @@
-export function getCurrentLevel(value, levels) {
-    value = typeof value === "string" ? parseInt(value, 10) : value;
-    return levels.find((lvl) => {
-        return value >= lvl.range[0] && value <= lvl.range[1];
-    });
-}
-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;
-        case "vozbox":
-            return 7;
-        case "aqlite":
-            return 8;
-        default:
-            throw new Error(`Map ordering for ${monitor.device} has not been set`);
-    }
-}
-export function getTypeShape(type) {
-    switch (type) {
-        case "airnow":
-        case "aqview":
-        case "bam1022":
-        case "aqlite":
-            return "triangle";
-        case "airgradient":
-        case "purpleair":
-        case "vozbox":
-            return "circle";
-        default:
-            return "circle";
-    }
-}

package/dist/lib/monitors/monitors-cluster-renderer.d.ts

@@ -1,33 +0,0 @@
-import type { FilterSpecification, MapLayerEventType, Popup } from "@maptiler/sdk";
-import type { SJVAirEntryLevel } from "@sjvair/sdk";
-import { type ClickHandler } from "../map/integrations/click-manager";
-import { TooltipManager } from "../map/integrations/tooltip.svelte";
-import type { MonitorMapFeature } from "./types";
-export declare function monitorTooltip(evt: MapLayerEventType["mousemove"] & object): Popup | void;
-export interface MonitorsClusterContext {
-    referenceId: string;
-    featuresByType: Record<string, MonitorMapFeature[]>;
-    filters: FilterSpecification;
-    clusterIconThresholds: SJVAirEntryLevel[];
-    beforeLayer?: string;
-    tooltipManager: TooltipManager;
-}
-export declare class MonitorsClusterRenderer {
-    private ctx;
-    private _clusterTypes;
-    constructor(ctx: MonitorsClusterContext);
-    apply(monitorClickHandler: ClickHandler): void;
-    remove(): void;
-    get unclusteredLayerIds(): string[];
-    syncFeatures(): void;
-    syncFilter(): void;
-    syncThresholds(): void;
-    private makeClusterClickHandler;
-    private clusterLayerIds;
-    private get clusterTextColorThreshold();
-    private clusterTextColorExpr;
-    private buildClusterIconExpression;
-    private monitorTypeIconsLayer;
-    private clusterCountLayer;
-    private unclusteredLayer;
-}

package/dist/lib/monitors/monitors-cluster-renderer.js

@@ -1,221 +0,0 @@
-import { mapManager } from "../map/map-manager.svelte.js";
-import { mountPopup } from "../map/utils";
-import { clickManager } from "../map/integrations/click-manager";
-import { getTypeShape } from "./monitor-utils";
-import MonitorTooltip from "./components/MonitorTooltip.svelte";
-import MonitorClusterTooltip from "./components/MonitorClusterTooltip.svelte";
-const AVG_EXPR = [
-    "/",
-    ["get", "sumValues"],
-    ["max", ["get", "point_count"], 1]
-];
-export function monitorTooltip(evt) {
-    const features = evt.features;
-    const feature = features?.sort((a, b) => b.properties.order - a.properties.order)[0];
-    if (!feature)
-        return;
-    return mountPopup(MonitorTooltip, { feature }, evt.lngLat);
-}
-function clusterTooltip(evt) {
-    const feature = evt.features?.[0];
-    if (!feature)
-        return;
-    return mountPopup(MonitorClusterTooltip, { feature }, evt.lngLat);
-}
-export class MonitorsClusterRenderer {
-    ctx;
-    _clusterTypes = [];
-    constructor(ctx) {
-        this.ctx = ctx;
-    }
-    apply(monitorClickHandler) {
-        if (!mapManager.map)
-            return;
-        const sortedEntries = Object.entries(this.ctx.featuresByType).sort(([, a], [, b]) => {
-            const maxOrder = (fs) => fs.reduce((m, f) => Math.max(m, f.properties.order), 0);
-            return maxOrder(a) - maxOrder(b);
-        });
-        for (const [[type, features], index] of sortedEntries.map((e, i) => [e, i])) {
-            const sourceId = `${this.ctx.referenceId}-${type}`;
-            mapManager.map.addSource(sourceId, {
-                type: "geojson",
-                promoteId: "id",
-                data: { type: "FeatureCollection", features },
-                cluster: true,
-                clusterRadius: 40,
-                clusterMaxZoom: 9,
-                clusterProperties: {
-                    sumValues: ["+", ["to-number", ["get", "value"]], 0]
-                }
-            });
-            this.monitorTypeIconsLayer(sourceId, AVG_EXPR, getTypeShape(type));
-            this.clusterCountLayer(sourceId, AVG_EXPR);
-            this.unclusteredLayer(sourceId);
-            const { icon, unclustered } = this.clusterLayerIds(sourceId);
-            if (!this.ctx.tooltipManager.has(icon)) {
-                this.ctx.tooltipManager.register(icon, clusterTooltip, index);
-            }
-            if (!this.ctx.tooltipManager.has(unclustered)) {
-                this.ctx.tooltipManager.register(unclustered, monitorTooltip, index);
-            }
-            clickManager.register([unclustered], monitorClickHandler);
-            clickManager.register([icon], this.makeClusterClickHandler(sourceId));
-            this._clusterTypes.push(type);
-        }
-    }
-    remove() {
-        if (!mapManager.map)
-            return;
-        for (const type of this._clusterTypes) {
-            const sourceId = `${this.ctx.referenceId}-${type}`;
-            const layers = this.clusterLayerIds(sourceId);
-            clickManager.unregister([layers.unclustered]);
-            clickManager.unregister([layers.icon]);
-            for (const layerId of Object.values(layers)) {
-                if (mapManager.map.getLayer(layerId)) {
-                    mapManager.map.removeLayer(layerId);
-                }
-            }
-            if (mapManager.map.getSource(sourceId)) {
-                mapManager.map.removeSource(sourceId);
-            }
-        }
-        this._clusterTypes = [];
-    }
-    get unclusteredLayerIds() {
-        return this._clusterTypes.map((type) => `${this.ctx.referenceId}-${type}-unclustered`);
-    }
-    syncFeatures() {
-        if (!mapManager.map)
-            return;
-        for (const type of this._clusterTypes) {
-            const sourceId = `${this.ctx.referenceId}-${type}`;
-            mapManager.setDataSource(sourceId, this.ctx.featuresByType[type] ?? []);
-        }
-    }
-    syncFilter() {
-        if (!mapManager.map)
-            return;
-        for (const type of this._clusterTypes) {
-            const sourceId = `${this.ctx.referenceId}-${type}`;
-            const { unclustered } = this.clusterLayerIds(sourceId);
-            if (mapManager.map.getLayer(unclustered)) {
-                mapManager.map.setFilter(unclustered, [
-                    "all",
-                    this.ctx.filters,
-                    ["!", ["has", "point_count"]]
-                ]);
-            }
-        }
-    }
-    syncThresholds() {
-        if (!mapManager.map)
-            return;
-        for (const type of this._clusterTypes) {
-            const sourceId = `${this.ctx.referenceId}-${type}`;
-            const { icon, average } = this.clusterLayerIds(sourceId);
-            if (mapManager.map.getLayer(icon)) {
-                mapManager.map.setLayoutProperty(icon, "icon-image", this.buildClusterIconExpression(AVG_EXPR, getTypeShape(type)));
-            }
-            if (mapManager.map.getLayer(average)) {
-                mapManager.map.setPaintProperty(average, "text-color", this.clusterTextColorExpr(AVG_EXPR));
-            }
-        }
-    }
-    makeClusterClickHandler(sourceId) {
-        return async (features) => {
-            try {
-                const feature = features[0];
-                if (!feature?.properties?.cluster_id)
-                    return;
-                const source = mapManager.map?.getSource(sourceId);
-                if (!source)
-                    return;
-                const zoom = await source.getClusterExpansionZoom(feature.properties.cluster_id);
-                const coords = feature.geometry.coordinates;
-                mapManager.map?.easeTo({ center: coords, zoom });
-            }
-            catch (err) {
-                console.error("ClickManager: cluster expansion zoom failed", err);
-            }
-        };
-    }
-    clusterLayerIds(sourceId) {
-        return {
-            icon: `${sourceId}-cluster-icon`,
-            average: `${sourceId}-cluster-average`,
-            unclustered: `${sourceId}-unclustered`
-        };
-    }
-    get clusterTextColorThreshold() {
-        // Use the max of the 3rd level (unhealthy_sensitive) so text flips to white at unhealthy+
-        return this.ctx.clusterIconThresholds[2]?.range[1] ?? 150.5;
-    }
-    clusterTextColorExpr(avgExpr) {
-        return ["case", ["<=", avgExpr, this.clusterTextColorThreshold], "#000000", "#FFFFFF"];
-    }
-    buildClusterIconExpression(avgExpr, shape) {
-        const thresholds = this.ctx.clusterIconThresholds;
-        if (!thresholds.length)
-            return `outside-default-${shape}`;
-        const expr = ["case"];
-        for (const level of thresholds.slice(0, -1)) {
-            expr.push(["<=", avgExpr, level.range[1]], `outside-${level.name}-${shape}`);
-        }
-        expr.push(`outside-${thresholds.at(-1).name}-${shape}`);
-        return expr;
-    }
-    monitorTypeIconsLayer(sourceId, avgExpr, shape) {
-        const { icon } = this.clusterLayerIds(sourceId);
-        mapManager.map?.addLayer({
-            id: icon,
-            type: "symbol",
-            source: sourceId,
-            filter: ["has", "point_count"],
-            layout: {
-                "icon-image": this.buildClusterIconExpression(avgExpr, shape),
-                "icon-size": ["step", ["get", "point_count"], 1.3, 10, 1.6, 25, 2.0],
-                "icon-ignore-placement": true,
-                "icon-allow-overlap": true
-            },
-            paint: {
-                "icon-opacity": 0.8
-            }
-        }, this.ctx.beforeLayer);
-    }
-    clusterCountLayer(sourceId, avgExpr) {
-        const { average } = this.clusterLayerIds(sourceId);
-        mapManager.map?.addLayer({
-            id: average,
-            type: "symbol",
-            source: sourceId,
-            filter: ["has", "point_count"],
-            layout: {
-                "text-field": ["to-string", ["round", avgExpr]],
-                "text-size": 12,
-                "text-ignore-placement": true,
-                "text-allow-overlap": true
-            },
-            paint: {
-                "text-color": this.clusterTextColorExpr(avgExpr)
-            }
-        }, this.ctx.beforeLayer);
-    }
-    unclusteredLayer(sourceId) {
-        const { unclustered } = this.clusterLayerIds(sourceId);
-        mapManager.map?.addLayer({
-            id: unclustered,
-            type: "symbol",
-            source: sourceId,
-            filter: ["all", this.ctx.filters, ["!", ["has", "point_count"]]],
-            layout: {
-                "symbol-sort-key": ["coalesce", ["get", "order"], 0],
-                "icon-allow-overlap": true,
-                "icon-ignore-placement": true,
-                "icon-image": ["get", "icon"],
-                "icon-size": 1
-            },
-            paint: {}
-        }, this.ctx.beforeLayer);
-    }
-}

package/dist/lib/monitors/monitors-icon-manager.svelte.d.ts

@@ -1,15 +0,0 @@
-import type { MonitorData, SJVAirEntryLevel } from "@sjvair/sdk";
-import { MapIconManager } from "../map/integrations/map-icon-manager";
-import type { MonitorsDataSource } from "./types";
-export declare function getIconId<T extends MonitorData>(monitor: T, level: SJVAirEntryLevel): string;
-export declare abstract class MonitorShapeIconManager extends MapIconManager {
-    private dataSource;
-    protected abstract get idPrefix(): string;
-    protected abstract transformSvg(svg: string): string;
-    protected get iconSize(): number;
-    constructor(dataSource: Pick<MonitorsDataSource, "levels">);
-}
-export declare class MonitorsIconManager extends MonitorShapeIconManager {
-    protected get idPrefix(): string;
-    protected transformSvg(svg: string): string;
-}

package/dist/lib/monitors/monitors-icon-manager.svelte.js

@@ -1,78 +0,0 @@
-import { asDataURI, circle, square, triangle } from "../map/icons";
-import { MapIconManager } from "../map/integrations/map-icon-manager";
-import { mapManager } from "../map/map-manager.svelte.js";
-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(monitor, level) {
-    const id = `${monitor.location}-${monitor.is_active ? level.name : "default"}`;
-    switch (monitor.type) {
-        case "airnow":
-        case "aqview":
-        case "bam1022":
-        case "aqlite":
-            return `${id}-triangle`;
-        case "airgradient":
-        case "purpleair":
-        case "vozbox":
-            return `${id}-circle`;
-        default:
-            throw new Error(`Map icon for ${monitor.device} has not been set`);
-    }
-}
-export class MonitorShapeIconManager extends MapIconManager {
-    dataSource;
-    get iconSize() {
-        return 24;
-    }
-    constructor(dataSource) {
-        super();
-        this.dataSource = dataSource;
-        $effect.root(() => {
-            $effect(() => {
-                if (this.dataSource.levels) {
-                    const iconLevels = [
-                        ...this.dataSource.levels,
-                        { name: "default", color: MONITOR_ICON_DEFAULT_COLOR },
-                        { name: "display", color: MONITOR_ICON_DISPLAY_COLOR }
-                    ];
-                    for (const location of ["inside", "outside"]) {
-                        for (const [shapeName, shape] of Object.entries(MONITOR_ICONS)) {
-                            for (const level of iconLevels) {
-                                const parts = [this.idPrefix, location, level.name, shapeName].filter(Boolean);
-                                const id = parts.join("-");
-                                const src = asDataURI(this.transformSvg(shape(level.color, MONITOR_ICON_BORDER_WIDTH, location === "inside" ? "#000000" : undefined)));
-                                if (this.icons.has(id)) {
-                                    const icon = this.icons.get(id);
-                                    if (icon.image.src !== src) {
-                                        icon.image.src = src;
-                                        if (mapManager.map?.hasImage(id)) {
-                                            this.updateImage(icon, mapManager.map);
-                                        }
-                                    }
-                                    continue;
-                                }
-                                else {
-                                    const icon = new Image();
-                                    icon.src = src;
-                                    icon.width = this.iconSize;
-                                    icon.height = this.iconSize;
-                                    this.register(id, icon);
-                                }
-                            }
-                        }
-                    }
-                }
-            });
-        });
-    }
-}
-export class MonitorsIconManager extends MonitorShapeIconManager {
-    get idPrefix() {
-        return "";
-    }
-    transformSvg(svg) {
-        return svg;
-    }
-}

package/dist/lib/monitors/monitors-map-integration.svelte.d.ts

@@ -1,43 +0,0 @@
-import { type FilterSpecification, type Map as MaptilerMap } from "@maptiler/sdk";
-import type { SJVAirEntryLevel } from "@sjvair/sdk";
-import { MapIconLayerIntegration } from "../map/integrations/map-geojson-integration.svelte";
-import { MonitorsIconManager } from "./monitors-icon-manager.svelte";
-import { TooltipManager } from "../map/integrations/tooltip.svelte";
-import { MapDisplayOption } from "../map/integrations/map-display-option.svelte";
-import type { MonitorMapFeature, MonitorMarkerProperties, MonitorsDataSource } from "./types";
-declare class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProperties> {
-    private dataSource;
-    referenceId: string;
-    enabled: boolean;
-    clustered: boolean;
-    icons: MonitorsIconManager;
-    tooltipManager: TooltipManager;
-    private renderer;
-    displayOptions: {
-        airnow: MapDisplayOption;
-        aqlite: MapDisplayOption;
-        aqview: MapDisplayOption;
-        bam1022: MapDisplayOption;
-        airgradient: MapDisplayOption;
-        purpleair: MapDisplayOption;
-        vozbox: MapDisplayOption;
-        inactive: MapDisplayOption;
-        inside: MapDisplayOption;
-    };
-    /** Set by the app to handle navigation when a monitor is clicked. Receives the monitor ID. */
-    onMonitorClick: ((id: string) => void) | null;
-    selectedMonitorId: string | null;
-    private handleMonitorClick;
-    features: Array<MonitorMapFeature>;
-    filters: FilterSpecification;
-    featuresByType: Record<string, MonitorMapFeature[]>;
-    clusterIconThresholds: Array<SJVAirEntryLevel>;
-    get mapLayer(): Parameters<MaptilerMap["addLayer"]>[0];
-    get mapSource(): Parameters<MaptilerMap["addSource"]>[1];
-    constructor(dataSource?: MonitorsDataSource);
-    apply(): void;
-    remove(): void;
-    private applySelectedState;
-}
-export declare const monitorsMapIntegration: MonitorsMapIntegration;
-export { MonitorsMapIntegration };