Better_Map_Widget-Full.html

<!--
	Better Map Widget
	Developed by Kevin Ford

	Some of the ideas behind this project:
	* Support for thousands pins on the map, though be aware that Google Maps will start to struggle if too many pins.
	* Adjacent pins get grouped/clustered together for a cleaner map display.
	* Clusters use a donut chart to represent the severities of the grouped markers.
	* Easy toggling of weather layers.
	* Display more information when clicking a marker.
	* Quick & easy filtering of what's displayed on the map.
	* Provide a way to plot connections between resources (and eventually groups).

	Prerequisites:
	* The user needs "View" permissions to the dashboard plus any displayed groups and/or resources.
	* Group's or resources with valid addresses set in the usual 'location' property.

	TO USE:
	1. Create a new Text widget to the dashboard.
	2. On the Text widget's edit dialog, click the "Source" button and paste in the contents of this script, then save the widget.
	3. At this point the widget should be ready to use. You can customize the defaults for the widget either via dashboard tokens or by changing variables here within the script.
	   For instance, the script defaults to using "*" for the group filter. You can change the default by setting a "MapGroupPathFilter" dashboard token, or by hard-coding it in the script's "groupPathFilter" variable below.
	   NOTE: defaults set via dashboard tokens will take precedence over those hard-coded in the script.

	OPTIONAL DASHBOARD TOKENS:
	* 'MapGroupPathFilter': Allows setting a default group path to start. Default is "*".
	* 'MapLocationProperty': The property to use for the location of the items on the map. Default is "location".
	* 'MapMarkerStyle': The style of marker to use for the items on the map. Use "pins" (default pin markers) or "circles" (color-coded circles). Legacy values "default", "pin", "dot", "dots", and "circle" are also accepted. Default is "pins".
	* 'MapShowWeather': If weather should be shown by default. Options are "global", "nexrad", or "xweather". Default is "global".
	* 'MapOverlayOption': Which optional overlay to default to when weather is shown. Options are "wildfires", "us-wildfires", "outages", "us-poweroutages", "us-flooding" or "earthquakes". Default is "earthquakes".
	* 'HideMapOptions': If "true" then will hide the options bar by default. Default is "false".
	* 'ShowMapSidebar': If "true" then will show the sidebar by default. Default is "false".
	* 'MapSourceType': Whether to map "groups", "resources", or "services". Default is "groups".
	* 'MapIgnoreCleared': If "true" then will only show items currently alerting (useful for maps with thousands of markers). Default is "false".
	* 'MapIgnoreWarnings': If "true" then won't show items in "Warning" status. Default is "false".
	* 'MapIgnoreErrors': If "true" then won't show items in "Error" status. Default is "false".
	* 'MapIgnoreCriticals': If "true" then won't show items in "Critical" status. Default is "false".
	* 'MapIgnoreSDT': If "true" then won't show items in "SDT" status. Default is "false".
	* 'AutoResetMapOnRefresh': If "true" then the map will automatically zoom to encompass all items on timed refreshes. Default is "false".
	* 'MapShowTiltControls': If "true" then the tilt & rotation controls for the map will be shown. Default is "false".
	* 'MapDisableClustering': If "true" then clustering of adjacent markers on the map will be disabled. Might be desirable if showing connections between locations since clustering might hide markers at certain zoom levels. Default is "false".
	* 'MapDisplayProperties': An optional comma-delimited list of custom properties to show when viewing a group's/resource's details.
	* 'MapStyle': Allows one of the following available map style options: "silver", "standard", "dark", "aubergine", "satellite", or "silverblue". Default is "silverblue".
	* 'MapShowRoadLabels': If "true" then road labels will be shown on the map. Default is "false".
	* 'apiBearerToken', or 'apiID' + 'apiKey': Optional LogicMonitor API bearer token or API ID & key to use for the widget. If not specified then the widget will use integrated portal authentication.
	* 'XweatherAPIID' & 'XweatherAPIKey': Optional Xweather API ID & key to use for weather radar. If not specified then the widget will not show Xweather radar.

	LIMITATIONS:
	* This widget is currently unable to leverage LogicMonitor's native dashboard filters.
	* Being custom-developed, LogicMonitor's support teams will be limited in what they can assist with regarding questions/issues.
-->

<script>
	const version = "3.50";
	const releaseNotes = `
		<h2>Release Notes</h2>
		<p>Latest releases can be found at <a href="https://github.com/logicmonitor/custom_widgets" target="_blank">https://github.com/logicmonitor/custom_widgets</a></p>
		<h3>Version 3.50</h3>
		<ul>
			<li>Drop-down menu to select which type of map marker to use (pins or circles).</li>
			<li>Renamed the &quot;	dot&quot; option to &quot;circles&quot; for consistency. Legacy &quot;default&quot;, &quot;pin&quot;, &quot;dot&quot;, &quot;dots&quot;, and &quot;circle&quot; values are still accepted for the &quot;MapMarkerStyle&quot; dashboard token.</li>
			<li>When a user changes a toolbar option then the changes are saved to a cookie so that they persist across refreshes. Use the new &quot;Clear cache&quot; button to clear the cookie and reset the map to its default state.</li>
		</ul>
		<h3>Version 3.49</h3>
		<ul>
			<li>Added the ability to use dot-style markers instead of the default pin-style markers.</li>
			<li>Fixed issue with mouse wheel scrolling not working correctly within the map info popup window.</li>
		</ul>
		<h3>Version 3.47</h3>
		<ul>
			<li>Optimizations to weather data refreshing.</li>
			<li>Opacity of weather layers is now less jarring during zoom transitions.</li>
			<li>Enabled support for OpenWeather Radar (requires free API key available from https://openweathermap.org/api).</li>
			<li>Added LRU tile cache to reduce redundant network requests when the user zooms back to a previously-viewed level.</li>
			<li>Fixed issue with connecting lines not being clickable to drill down to the instance details.</li>
		</ul>
		<h3>Version 3.45</h3>
		<ul>
			<li>Improved refresh speed when there are a large number of items on the map.</li>
		</ul>
		<h3>Version 3.44</h3>
		<ul>
			<li>A number of small fixes & improvements.</li>
		</ul>
		<h3>Version 3.41</h3>
		<ul>
			<li>Added the ability to show Xweather Global Radar (requires API ID & key available from https://www.xweather.com/weather-api). Xweather is offers a great deal of optional details such as lightning strikes, hail, wind gusts, etc. Many personal weather stations such as Ecowitt provide free Xweather API access if you feed them your weather data.</li>
		</ul>
		<h3>Version 3.39</h3>
		<ul>
			<li>Made the width of the map sidebar adjustable via drag handle.</li>
		</ul>
		<h3>Version 3.38</h3>
		<ul>
			<li>Added options for sorting items in the map sidebar by severity or by address.</li>
			<li>If a value for the 'MapDisplayProperties' dashboard token is set, then those properties will be displayed in the map sidebar.</li>
		</ul>
		<h3>Version 3.36</h3>
		<ul>
			<li>Added the ability to show a map sidebar listing the status of all items on the map. It can be shown by default (or not) via a new dashboard token named "ShowMapSidebar".</li>
		</ul>
		<h3>Version 3.33</h3>
		<ul>
			<li>Improved the display of wildfire information.</li>
		</ul>
		<h3>Version 3.30</h3>
		<ul>
			<li>Added Catchpoint beacon for performance monitoring (no confidential data is collected).</li>
		</ul>
		<h3>Version 3.29</h3>
		<ul>
			<li>Fixed an infinite loop that could occur in certain situations.</li>
		</ul>
		<h3>Version 3.28</h3>
		<ul>
			<li>Optimized support for system & auto properties for location data.</li>
		</ul>
		<h3>Version 3.27</h3>
		<ul>
			<li>Added the ability to select the weather type and additional overlays from dropdowns instead of radio buttons.</li>
			<li>Shifted the few static HTML portions to Javascript to make the CDN version easier to update.</li>
			<li>Added a release notes button to the widget options.</li>
		</ul>
		<h3>Version 3.23</h3>
		<ul>
			<li>Re-added the option to specify credentials (bearer token or ID/key) for the widget's LM API calls.  If not specified then integrated portal authentication will be used.</li>
			<li>Fix for US wildfire data not plotting correctly.</li>
		</ul>
		<h3>Version 3.19</h3>
		<ul>
			<li>Added two new 'MapStyle' options: "satellite" and "satellite-light".</li>
			<li>Fix for US power outage data not plotting correctly.</li>
		</ul>
		<h3>Version 3.16</h3>
		<ul>
			<li>Added ability to specify a different location property (though use of the default 'location' property is still recommended).</li>
			<li>Optimized loading of power outage data.</li>
		</ul>
		<h3>Version 3.12</h3>
		<ul>
			<li>Added hyperlink to tsunami details.</li>
			<li>Added display of Australia bushfires.</li>
		</ul>`;

	// Optional: You can specify a LogicMonitor API bearer token or API ID & key to use for the widget...
	let apiBearerToken = "";
	let lmAPIID = "";
	let lmAPIKey = "";

	// Whether we're plotting "groups" or "resources" or "services" (strongly recommend staying with groups or services)...
	// You can either set it here or in a dashboard token named 'MapSourceType'...
	let mapSourceType = "groups";

	// The property to use for the location of the items on the map. Default is "location"...
	// You can either set it here or in a dashboard token named 'MapLocationProperty'...
	let mapLocationProperty = "location";

	// Preferred map style. Available options: "silver" (the default), "standard", "dark", "aubergine", "silverblue", "satellite", or "satellite-light"...
	let mapStyle = "silverblue";

	// Whether to ignore items with no active alerts (useful for maps with thousands of markers)...
	// You can either set it here or in a dashboard token named 'MapIgnoreCleared'...
	let showCleared = true;
	let showWarnings = true;
	let showErrors = true;
	let showCriticals = true;
	let showSDT = true;

	// Capture if a group filter...
	// You can set it here or in a dashboard token named "MapGroupPathFilter"...
	let groupPathFilter = "*";

	// Interval for updating group status data (in minutes)...
	let statusUpdateIntervalMinutes = 2;

	// Flag to disable marker clustering if needed...
	let disableClustering = false;

	// Marker style. Options: "pins" (pin with icon) or "circles" (color-coded circle)...
	let markerStyle = "pins";

	// Whether to show weather by default. Options are: "no", "global", "nexrad", "openweather", "xweather"...
	// You can set it here or in a dashboard token named "MapShowWeather"...
	let showWeatherDefault = "no";

	// If weather is shown, whether to show "wildfires" or "us-wildfires" or "outages" or "us-poweroutages" or "us-flooding" or "earthquakes"...
	// You can set it here or in a dashboard token named "MapOverlayOption"...
	let additionalOverlayOption = "earthquakes";

	// Whether to show or hide the map options along the top of the widget by default...
	// You can set it here or in a dashboard token named "HideMapOptions"...
	let hideMapOptionsByDefault = false;

	// Whether to show the sidebar by default...
	// You can set it here or in a dashboard token named "ShowMapSidebar"...
	let showMapSidebarByDefault = false;
	let sidebarDefaultWidth = 300;
	const sidebarMinWidth = 220;
	const sidebarMaxWidth = 40;

	// Whether to automatically center the map to encompass all items during timed refreshes...
	// You can set it here or in a dashboard token named "AutoResetMapOnRefresh"...
	let autoResetMapOnRefresh = false;

	// When true will not refresh the data on a timed interval (useful ONLY during development)...
	let developmentFlag = false;

	// Since we generally don't need to poll all properties every time, we can just grab them initially then occasionally every x number of polls based on the following variable (set to 0 to perform a full refresh every time)...
	const fullRefreshInterval = 0;

	// Optional angle & heading for the Google Map...
	let showMapTiltControls = false;
	let mapTilt = 0;
	let mapHeading = 0;

	// Whether to include inherited locations in addition to those directly set on resources and/or services (disabling this can greatly increase refresh speed)...
	const pollInheritedLocations = true;

	// Typically if both a 'latitude' & 'longitude' property are set, then we can assume the address is already geocoded. Set this to "true" to force geocoding the address instead...
	const ignoreLatLongProps = false;

	// Whether the Google Maps uses the "cooperative" gesture handling, or "greedy" that allows mouse-wheel zooming without having to hold a modifier key (Google's default is "cooperative")...
	const mapGestureHandling = "cooperative";
	// Whether to show road labels...
	let showRoadLabels = "off";

	// An optional comma-delimited list of custom properties to show when viewing a group's/resource's details...
	// You can set it here or in a dashboard token named "MapDisplayProperties"...
	let displayProps = "";

	// Property to look for connecting information in...
	const connectionInfoProp = "auto.custom_map_connection_data";
	// Stroke weight of connecting lines...
	const connectingLineWeight = 3;
	// Whether to use geodesic lines when connecting two locations (I recommend not so it just plots a straight line vs curve of the Earth)...
	const useGeodesicLines = false;

	// OpenWeather API key (required for OpenWeather radar)...
	// You can set it here or in a dashboard token named "OpenWeatherAPIKey"...
	let openWeatherAPIKey = "";

	// Xweather API credentials (required for Xweather radar)...
	// You can set them here or in dashboard tokens named "XweatherAPIID" and "XweatherAPIKey"...
	let xweatherAPIID = "";
	let xweatherAPIKey = "";

	// Default opacity for weather layers...
	let weatherOpacity = 0.35;
	const satelliteWeatherOpacity = 0.6;
	// Color scheme for the "global" weather option...
	// See https://rainviewer.com/api/color-schemes.html for color scheme options (values are 0-8)...
	const rvOptionColorScheme = 8;
	// Weather refresh interval in minutes...
	const weatherRefreshMinutes = 5;
	// Whether to display details about a wildfire on "click" or "mouseover"...
	const showWildfireInfoEvent = "click";
	// Whether the opacity of an earthquake's icon reflects "time" since the event, or "magnitude"...
	let quakeMode = "time";
</script>

<!-- We'll use FontAwesome icons to help pretty up things... -->
<!-- <script src="https://use.fontawesome.com/releases/v6.2.0/js/all.js"></script> -->


<!-- Our CSS styles... -->
<style type="text/css">
	body {
		margin-top: 0;
	}
	.customMapBody {
		display: flex;
		flex-direction: column;
	}
	.customMapBody, #mapContainer {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
	}
	.optionsHidden {
		max-height: 0 !important;
		opacity: 0;
		overflow: hidden !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		transition: max-height 0.25s ease-out, opacity 0.25s ease-out, padding 0.25s ease-out;
	}
	.optionsVisible {
		max-height: 100px;
		opacity: 1;
		transition: max-height 0.25s ease-out, opacity 0.25s ease-out, padding 0.25s ease-out;
	}
	.optionsVisibleToggle {
		rotate: 0;
		transition: all 1s ease-out;
	}
	.optionsHiddenToggle {
		rotate: 180deg;
		transition: all 1s ease-out;
	}
	.mapInfoPopupWindow {
		color: rgb(20, 29, 48);
		padding: 0 12px 12px 12px;
		min-width: 300px;
		max-height: 400px;
		overflow-y: auto;
		font-family: system-ui, -apple-system, sans-serif;
	}
	#optionsBar {
		width: 100%;
		/* min-height: 25px; */
		padding: 3px 0 0 0;
		margin: 0;
		font-size: small;
		color: #777;
		order: 1;
		display: flex;
		flex-wrap: nowrap;
		flex: none;
		align-items: center;
		justify-content: space-between;
	}
	#versionInfo {
		font-size: smaller;
		color: gray;
	}
	#mapContainer {
		display: flex;
		flex: 1;
		min-height: 0;
		order: 2;
	}
	#googleMap {
		flex: 1;
		min-width: 0;
		border: 1px solid #aaa;
		border-radius: 7px 0 0 7px;
		transition: border-radius 0.25s ease-out;
	}
	#sidebarArea {
		width: 300px;
		min-width: 220px;
		max-width: 40%;
		flex-shrink: 0;
		overflow-x: hidden;
		overflow-y: auto;
		border: 1px solid #aaa;
		border-left: none;
		border-radius: 0 7px 7px 0;
		background: #fff;
		font-family: system-ui, -apple-system, sans-serif;
		font-size: 13px;
		transition: width 0.25s ease-out, border-width 0.25s ease-out, opacity 0.25s ease-out;
	}
	#sidebarArea .sidebar-header {
		position: sticky;
		top: 0;
		background: #f5f5f5;
		padding: 6px 12px;
		font-weight: 600;
		font-size: 13px;
		color: #444;
		border-bottom: 1px solid #ddd;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	#sidebarArea .sidebar-sort-buttons {
		display: flex;
		gap: 3px;
	}
	#sidebarArea .sidebar-sort-btn {
		background: #e0e0e0;
		border: none;
		border-radius: 3px;
		padding: 2px 6px;
		font-size: 11px;
		cursor: pointer;
		color: #555;
		line-height: 1.4;
	}
	#sidebarArea .sidebar-sort-btn:hover {
		background: #d0d0d0;
	}
	#sidebarArea .sidebar-sort-btn.active {
		background: #1a73e8;
		color: #fff;
	}
	#sidebarArea .sidebar-item {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		padding: 7px 12px;
		cursor: pointer;
		border-bottom: 1px solid #eee;
		transition: background-color 0.15s;
		color: #333;
	}
	#sidebarArea .sidebar-item:hover {
		background-color: #e8f0fe;
	}
	#sidebarArea .sidebar-item.active {
		background-color: #d2e3fc;
	}
	#sidebarArea .sidebar-dot {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		flex-shrink: 0;
		margin-top: 3px;
	}
	#sidebarArea .sidebar-item-content {
		flex: 1;
		min-width: 0;
	}
	#sidebarArea .sidebar-item-name {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	#sidebarArea .sidebar-item-props {
		margin-top: 2px;
	}
	#sidebarArea .sidebar-item-prop {
		font-size: 11px;
		color: #888;
		line-height: 1.4;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	#sidebarArea .sidebar-item-prop-label {
		font-weight: 600;
		color: #999;
	}
	#sidebarArea .sidebar-group-header {
		padding: 5px 12px;
		font-size: 11px;
		font-weight: 600;
		color: #888;
		background: #f0f0f0;
		border-bottom: 1px solid #ddd;
		text-transform: uppercase;
		letter-spacing: 0.3px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	#sidebarArea.sidebar-hidden {
		width: 0;
		min-width: 0;
		border-width: 0;
		opacity: 0;
		overflow: hidden;
	}
	#sidebarResizeHandle {
		width: 5px;
		cursor: col-resize;
		background: #ddd;
		flex-shrink: 0;
		transition: background-color 0.15s, width 0.25s ease-out, opacity 0.25s ease-out;
	}
	#sidebarResizeHandle:hover,
	#sidebarResizeHandle.dragging {
		background: #aaa;
	}
	#sidebarResizeHandle.sidebar-hidden {
		width: 0;
		opacity: 0;
		overflow: hidden;
	}
	#googleMap.sidebar-hidden {
		border-radius: 7px;
		transition: border-radius 0.25s ease-out;
	}
	#customMapRefreshButton, #customMapResetZoom {
		margin-right: 5px;
	}
	#optionsBar input[type="radio" i], #optionsBar input[type="checkbox" i] {
		vertical-align: -0.09em;
	}
	#mapOptionsArea {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	#optionsToggleArea {
		display: none;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px;
	}
	#weatherOptionsArea, #autoZoomOptions {
		display: inline-flex;
		flex-wrap: nowrap;
		align-items: center;
		margin: 0 5px;
	}
	#sevFilterOptions {
		display: flex;
		border: 1px solid #ddd;
		margin: 3px 10px 3px 5px;
		padding: 0;
		align-content: center;
		align-items: center;
		height: 30px;
		border-radius: 5px;
	}
	#weatherOptions {
		display: inline-flex;
		gap: 6px;
		margin: 3px 0 3px 5px;
		align-items: center;
	}
	#optionsToggleArea select {
		height: 28px;
		border: 1px solid #ddd;
		border-radius: 5px;
		padding: 0 4px;
		font-size: 12px;
		background-color: #fff;
		cursor: pointer;
	}
	.sevFilterOption {
		display: inline-flex;
		align-items: center;
		padding: 0 3px;
	}
	#additionalOverlayOptions {
		display: inline-flex;
		align-items: center;
	}
	#markerStyleOptions {
		display: inline-flex;
		align-items: center;
		margin: 3px 0;
	}
	#customGroupFilterOptions {
		padding-right: 10px;
		font-weight: bold;
	}
	#customGroupFilterField {
		background-color: #eee;
		border: 1px solid silver;
		font-family: Tahoma, Verdana, Roboto, monospace;
		max-width: 150px;
	}
	#refreshStatusArea {
		/* font-weight: bold; */
		font-size: medium;
		/* font-size: smaller; */
		/* color: white; */
		color: darkblue;
		display: inline-flex;
		flex-wrap: nowrap;
		align-items: center;
		text-wrap: nowrap;
	}
	:root {
		--warning-color: #f5ca1d;
		/* --warning-color: #f1c40f; */
		--error-color: #ff8c00;
		/* --error-color: #f57200; */
		--critical-color: #e0351b;
		--clear-color: #85c25d;
		/* --clear-color: #85c25d; */
		--sdt-color: #00a1fe;
	}
	#optionsBar .svg-inline--fa {
		font-size: initial;
	}
	#gearIcon:hover {
		filter: brightness(50%);
	}
	#releaseNotesButton {
		height: 30px;
		width: auto;
		vertical-align: middle;
		background-color: white;
		border: 1px solid #ccc;
		border-radius: 3px;
		cursor: pointer;
		margin-right: 4px;
		padding: 0 5px;
	}
	#releaseNotesButton:hover {
		background-color: #f0f0f0;
	}
	#releaseNotesOverlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		z-index: 10000;
		justify-content: center;
		align-items: center;
	}
	#releaseNotesOverlay.visible {
		display: flex;
	}
	#releaseNotesPopup {
		background: white;
		border-radius: 8px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
		padding: 20px 24px;
		min-width: 320px;
		max-width: 600px;
		max-height: 80vh;
		overflow-y: auto;
		position: relative;
		font-size: 0.9em;
		color: rgb(20, 29, 48);
	}
	#releaseNotesCloseBtn {
		position: absolute;
		top: 8px;
		right: 12px;
		background: none;
		border: none;
		font-size: 20px;
		cursor: pointer;
		color: #888;
		line-height: 1;
	}
	#releaseNotesCloseBtn:hover {
		color: #333;
	}
	#clearCacheButton {
		height: 30px;
		width: auto;
		vertical-align: middle;
		background-color: white;
		border: 1px solid #ccc;
		border-radius: 3px;
		cursor: pointer;
	}
	#clearCacheButton:hover {
		background-color: #f0f0f0;
	}
	#recycleIcon {
		fill: gray;
	}
	.toolbarSevIcon {
		display: flex;
		max-width: 25px;
	}
	.disabled {
		opacity: 0.5 !important;
		cursor: not-allowed;
		pointer-events: none;
	}
	.noResultMessage {
		color: red;
		font-size: medium;
	}
	.sdtNote {
		font-size: 0.95em;
		font-style: italic;
		font-weight: 250;
	}
	.customItemArea {
		padding: 3px;
		margin-top: 3px;
		border-top: 1px solid #ddd;
		border-radius: 4px;
	}
	/* .customItem {
		padding-top: 3px;
	} */
	.customItem .customItemName {
		font-weight: bold;
	}
	.infoDialogIcon {
		height: 20px;
	}
	/*
	* group styles in unhighlighted state.
	*/
	.group {
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 50% 50% 50% 0;
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7), 0 2px 8px rgba(0, 0, 0, 0.5);
		color: #263238;
		display: flex;
		font-size: 14px;
		gap: 15px;
		height: 27px;
		width: 27px;
		justify-content: center;
		padding: 0px;
		position: relative;
		transform: rotate(-45deg);
		transition: all 0.3s ease-out;
	}
	.group:not(.highlight):hover {
		transform: rotate(-45deg) scale(1.15);
		cursor: pointer;
	}
	.group::before {
		display: none;
	}
	.group::after {
		border-left: 9px solid transparent;
		border-right: 9px solid transparent;
		border-top: 9px solid #FFFFFF;
		content: "";
		height: 0;
		left: 50%;
		position: absolute;
		top: 95%;
		transform: translate(-50%, 0);
		transition: all 0.3s ease-out;
		width: 0;
	}
	.group:not(.highlight):not(.dot-style)::after {
		display: none;
	}
	.group:not(.highlight):not(.dot-style) .icon {
		transform: rotate(45deg);
	}
	.group .icon {
		align-items: center;
		display: flex;
		justify-content: center;
		color: #FFFFFF;
	}
	.group .icon svg {
		height: 20px;
		width: auto;
	}
	.group .details {
		display: none;
		flex-direction: column;
		flex: 1;
		min-width: 250px;
	}
	.group .groupName {
		font-weight: 600;
		margin-bottom: 8px;
		font-size: medium;
	}
	.group .groupName a {
		color: #1a73e8;
		text-decoration: none;
	}
	.group .groupName a:hover {
		text-decoration: underline;
	}
	.group .description {
		color: #5f6368;
		font-size: 12px;
		line-height: 1.4;
		margin-bottom: 12px;
	}
	.group .features {
		align-items: center;
		display: flex;
		flex-direction: row;
		gap: 8px;
		flex-wrap: wrap;
	}
	.group .features > div {
		align-items: center;
		background: #f8f9fa;
		border-radius: 4px;
		border: 1px solid #e8eaed;
		display: flex;
		font-size: 12px;
		gap: 6px;
		padding: 4px 8px;
		color: #3c4043;
		font-size: 13px;
	}
	.group .features > div.drillDownButton {
		background-color: #1a73e8;
		border-color: #1a73e8;
		cursor: pointer;
	}
	.group .features > div.drillDownButton a {
		color: white;
	}
	.group .features > div.drillDownButton:hover {
		background-color: #1557b0;
	}
	.group .close-button {
		display: none;
		position: absolute;
		top: 12px;
		right: 12px;
		background: transparent;
		border: none;
		cursor: pointer;
		padding: 4px;
		border-radius: 4px;
		color: #666;
		transition: all 0.2s ease;
	}
	.group .close-button:hover {
		background: #f1f1f1;
		color: #333;
	}
	.group .close-button svg {
		width: 16px;
		height: 16px;
	}
	/*
	* group styles in highlighted state.
	*/
	.group.highlight {
		background-color: #FFFFFF;
		border-radius: 8px;
		box-shadow: none;
		height: fit-content;
		transform: none;
		width: auto;
		z-index: 10;
		max-width: 400px;
	}
	.group.highlight::before {
		display: none;
	}
	.group.highlight .details {
		display: flex;
		z-index: 10;
	}
	.group.highlight .icon svg {
		width: 50px;
		height: 50px;
	}
	.group .link {
		color: white;
	}
	.group .link:hover {
		/* color: -webkit-link; */
		color: lightcyan;
	}
	.group.highlight .close-button {
		display: block;
	}
	.indexText {
		z-index: 100;
	}
	/*
	* Cleared icon colors.
	*/
	.group.highlight:has(.clear) .icon {
		color: var(--clear-color);
	}
	.group:not(.highlight):has(.clear) {
		background-color: var(--clear-color);
	}
	.group:not(.highlight):has(.clear)::after {
		border-top: 9px solid var(--clear-color);
		top: 85%;
	}
	/*
	* Warning icon colors.
	*/
	.group.highlight:has(.warn) .icon {
		color: var(--warning-color);
	}
	.group:not(.highlight):has(.warn) {
		background-color: var(--warning-color);
	}
	.group:not(.highlight):has(.warn)::after {
		border-top: 9px solid var(--warning-color);
		top: 85%;
	}
	/*
	* Error icon colors.
	*/
	.group.highlight:has(.error) .icon {
		color: var(--error-color);
	}
	.group:not(.highlight):has(.error) {
		background-color: var(--error-color);
	}
	.group:not(.highlight):has(.error)::after {
		border-top: 9px solid var(--error-color);
		top: 85%;
	}
	/*
	* Critical icon colors.
	*/
	.group.highlight:has(.critical) .icon {
		color: var(--critical-color);
	}
	.group:not(.highlight):has(.critical) {
		background-color: var(--critical-color);
	}
	.group:not(.highlight):has(.critical)::after {
		border-top: 9px solid var(--critical-color);
		top: 85%;
	}
	/*
	* SDT icon colors.
	*/
	.group.highlight:has(.sdt) .icon {
		color: var(--sdt-color);
	}
	.group:not(.highlight):has(.sdt) {
		background-color: var(--sdt-color);
	}
	.group:not(.highlight):has(.sdt)::after {
		border-top: 9px solid var(--sdt-color);
		top: 85%;
	}

	/*
	* Dot-style marker overrides (enabled via markerStyle = "circles").
	*/
	.group.dot-style {
		border-radius: 50%;
		height: 22px;
		width: 22px;
		border: 2px solid rgba(255, 255, 255, 0.9);
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
		box-sizing: border-box;
		transform: translateY(50%);
	}
	.group.dot-style::before {
		display: none;
	}
	.group.dot-style::after {
		border: none;
		border-radius: 50%;
		height: auto;
		width: auto;
		left: auto;
		top: auto;
		transform: none;
		inset: -2px;
		opacity: 0;
		z-index: -1;
	}
	.group.dot-style:not(.highlight) {
		background-image: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 70%);
	}
	.group.dot-style:not(.highlight):hover {
		transform: translateY(50%) scale(1.25);
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
		cursor: pointer;
	}
	.group.dot-style:not(.highlight) .icon {
		display: none;
	}
	.group.dot-style.highlight {
		background-image: none;
		border: none;
		border-radius: 8px;
		box-shadow: none;
		height: fit-content;
		width: auto;
		transform: none;
	}
	.group.dot-style.highlight::after {
		display: none;
	}
	.group.dot-style:not(.highlight):has(.clear)::after,
	.group.dot-style:not(.highlight):has(.warn)::after,
	.group.dot-style:not(.highlight):has(.sdt)::after {
		border: none;
	}
	@keyframes pulse-ring {
		0% { transform: scale(1); opacity: 0.5; }
		100% { transform: scale(2.2); opacity: 0; }
	}
	.group.dot-style:not(.highlight):has(.error)::after {
		background-color: var(--error-color);
		border: none;
		inset: -2px;
		opacity: 1;
		animation: pulse-ring 2s ease-out infinite;
	}
	.group.dot-style:not(.highlight):has(.critical)::after {
		background-color: var(--critical-color);
		border: none;
		inset: -2px;
		opacity: 1;
		animation: pulse-ring 1.5s ease-out infinite;
	}

	/* Something about the Froala editor causes the default Gmap buttons to be shifted. This appears to fix that... */
	.gm-control-active {
		padding: 10px !important;
	}

	[data-title]:hover:after {
		opacity: 1;
		transition: all 0.1s ease 0.5s;
		visibility: visible;
	}
	[data-title]:after {
		font-weight: normal;
		content: attr(data-title);
		position: absolute;
		top: 2em;
		left: 50%;
		margin-left: -75px;
		padding: 4px;
		color: white;
		border-radius: 5px;
		opacity: 0;
		visibility: hidden;
		z-index: 999;
		background-color: black;
		width: 150px;
	}
	[data-title] {
		position: relative;
	}
	.gm-style-iw a:focus {
		outline: none;
	}
	.quakeMarker {
		filter: drop-shadow(0px 0px 3px white);
		position: absolute;
		top: 5px;
		width: 12px;
		height: 12px;
		background: #333;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid white;
	}

	/* Fix for Google's default control icons being off-center in Safari...  */
	@media screen and (-webkit-min-device-pixel-ratio:0) {
		.gm-control-active {
			display: flex !important;
		}
	}
</style>

<!-- Our main widget body... -->
<div class="customMapBody">&nbsp;</div>

<script>
	// Populate the widget body...
	document.querySelector(".customMapBody").innerHTML = `<!-- Create our options bar above the map... -->
		<div id="optionsBar" class="optionsVisible">
			<div id="mapOptionsArea">
				<span id="customGroupFilterOptions" data-title="Path to the items you'd like on the map. Examples:&quot;*&quot;, &quot;Locations/*&quot;">
					<label for="customGroupFilterField">Group filter:</label>
					<input type="text" id="customGroupFilterField" name="customGroupFilterField" value="*" onkeypress="groupkeyHandler(event);" />
				</span>

				<span id="sevFilterOptions">
					<span class="sevFilterOption">
						<input type="checkbox" id="showCleared" name="showCleared" value="showCleared" onclick="refreshGroupData();" data-title="Show/hide items with no active alerts" />
						<label for="showCleared"><div id="showClearedLabel" class="toolbarSevIcon">Cleared</div></label>
					</span>
					<span class="sevFilterOption">
						<input type="checkbox" id="showWarnings" name="showWarnings" value="showWarnings" onclick="refreshGroupData();" data-title="Show/hide items with active Warning alerts" />
						<label for="showWarnings"><div id="showWarningsLabel" class="toolbarSevIcon">Warnings</div></label>
					</span>
					<span class="sevFilterOption">
						<input type="checkbox" id="showErrors" name="showErrors" value="showErrors" onclick="refreshGroupData();" data-title="Show/hide items with active Error alerts" />
						<label for="showErrors"><div id="showErrorsLabel" class="toolbarSevIcon">Errors</div></label>
					</span>
					<span class="sevFilterOption">
						<input type="checkbox" id="showCriticals" name="showCriticals" value="showCriticals" onclick="refreshGroupData();" data-title="Show/hide items with active Critical alerts" />
						<label for="showCriticals"><div id="showCriticalsLabel" class="toolbarSevIcon">Criticals</div></label>
					</span>
					<span class="sevFilterOption">
						<input type="checkbox" id="showSDT" name="showSDT" value="showSDT" onclick="refreshGroupData();" data-title="Show/hide items in Scheduled Down Time (SDT)" />
						<label for="showSDT"><div id="showSDTLabel" class="toolbarSevIcon">SDT</div></label>
					</span>
				</span>

				<span data-title="Toggle visibility of additional options">
					<svg id="optionsToggleButton" onclick="toggleMiscOptions()" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="vertical-align: middle;"><path id="gearIcon" d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z" fill="#aaa"/></svg>
				</span>
				<svg id="gearIconChevron" style="display: none; margin-left: -3px;" width="10" height="15" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z" fill="#999"/></svg>

				<div id="optionsToggleArea">
					<span id="autoZoomOptions" data-title="Automatically reset the map's zoom to encompass all items after timed refreshes. You can also manually do so at any time using the 'Reset map zoom' button on the left of the map.">
						<input type="checkbox" id="autoZoom" name="autoZoom" value="autoZoom" onclick="enableWeather();" checked="true" />
						<label for="autoZoom">Auto-zoom</label>
					</span>

					<span id="weatherOptionsArea">
						<span data-title="Enables overlay of current weather radar and more">
							<input type="checkbox" id="weather" name="weather" value="weather" onclick="enableWeather();" />
							<label for="weather">Weather</label>
						</span>

						<span id="weatherOptions">
							<span data-title="Which source to use for weather information">
								<select id="weatherType" onchange="enableWeather();">
									<option value="radar" selected>Global Radar</option>
									<option value="nexrad-n0q-900913">US NEXRAD Radar</option>
									<option value="xweather">Xweather Global Radar</option>
									<option value="openweather">OpenWeather Radar</option>
								</select>
							</span>

							<span id="additionalOverlayOptions">
								<span data-title="Additional layer options to show on the map when weather is enabled">
									<select id="otherWeatherOverlays" onchange="enableWeather();">
										<option value="wildfires" selected>Wildfires</option>
										<option value="us-poweroutages">US Power Outages</option>
										<option value="earthquakes">Earthquakes (mag 6+, 7d)</option>
										<option value="us-flooding">US Flooding</option>
									</select>
								</span>
							</span>
						</span>
					</span>
					<span id="markerStyleOptions">
						<span data-title="Shape of map markers for monitored items">
							<select id="markerStyleSelect">
								<option value="pins">Pins</option>
								<option value="circles">Circles</option>
							</select>
						</span>
					</span>
					<button id="releaseNotesButton" type="button" data-title="View release notes" onclick="showReleaseNotes();">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" height="22" width="22"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM288 224C288 206.3 302.3 192 320 192C337.7 192 352 206.3 352 224C352 241.7 337.7 256 320 256C302.3 256 288 241.7 288 224zM280 288L328 288C341.3 288 352 298.7 352 312L352 400L360 400C373.3 400 384 410.7 384 424C384 437.3 373.3 448 360 448L280 448C266.7 448 256 437.3 256 424C256 410.7 266.7 400 280 400L304 400L304 336L280 336C266.7 336 256 325.3 256 312C256 298.7 266.7 288 280 288z"/></svg>
					</button>
					<button id="clearCacheButton" type="button" data-title="Clear geocode cache and saved toolbar options in this browser (use if the map misbehaves)" onclick="clearCache();">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" height="20" width="20" style="vertical-align: middle;"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path id="recycleIcon" d="M216.3 124C262.5 44 378 44 424.2 124L461.5 188.6L489.2 172.6C497.6 167.7 508.1 168.4 515.8 174.3C523.5 180.2 526.9 190.2 524.4 199.6L500.9 287C497.5 299.8 484.3 307.4 471.5 304L384.1 280.6C374.7 278.1 367.8 270.2 366.5 260.6C365.2 251 369.9 241.5 378.3 236.7L406 220.7L368.7 156.1C347.1 118.8 293.3 118.8 271.7 156.1L266.4 165.2C257.6 180.5 238 185.7 222.7 176.9C207.4 168.1 202.2 148.5 211 133.1L216.3 124zM513.7 343.1C529 334.3 548.6 339.5 557.4 354.8L562.7 363.9C608.9 443.9 551.2 543.9 458.8 543.9L384.2 543.9L384.2 575.9C384.2 585.6 378.4 594.4 369.4 598.1C360.4 601.8 350.1 599.8 343.2 592.9L279.2 528.9C269.8 519.5 269.8 504.3 279.2 495L343.2 431C350.1 424.1 360.4 422.1 369.4 425.8C378.4 429.5 384.2 438.3 384.2 448L384.2 480L458.8 480C501.9 480 528.9 433.3 507.3 396L502 386.9C493.2 371.6 498.4 352 513.7 343.2zM115 299.4L87.3 283.4C78.9 278.5 74.2 269.1 75.5 259.5C76.8 249.9 83.7 242 93.1 239.5L180.5 216C193.3 212.6 206.5 220.2 209.9 233L233.3 320.4C235.8 329.8 232.4 339.7 224.7 345.7C217 351.7 206.5 352.3 198.1 347.4L170.4 331.4L133.1 396C111.5 433.3 138.5 480 181.6 480L192.2 480C209.9 480 224.2 494.3 224.2 512C224.2 529.7 209.9 544 192.2 544L181.6 544C89.3 544 31.6 444 77.8 364L115 299.4z"/></svg>
					</button>
				</div>
			</div>

			<div id="versionInfo">v${version}</div>
		</div>

		<!-- Placeholder for our map... -->
		<div id="mapContainer">
			<div id="googleMap">&nbsp;</div>
			<div id="sidebarResizeHandle"></div>
			<div id="sidebarArea">&nbsp;</div>
		</div>

		<div id="releaseNotesOverlay" onclick="if(event.target===this)closeReleaseNotes();">
			<div id="releaseNotesPopup">
				<button id="releaseNotesCloseBtn" onclick="closeReleaseNotes();">&times;</button>
				<div id="releaseNotesContent">${releaseNotes}</div>
			</div>
		</div>`;
</script>
<!-- Catchpoint beacon for performance monitoring (no confidential data is collected!)... -->
<script defer src='https://g.3gl.net/jp/14586/latest/InitialLoadScript.js'></script>

<!-- Initialize Google Maps... -->
<script>
	// Fetch our map API key to use...
	let googleMapApiKey = parent.LMGlobalData.googleMapInfo.key.toString();

	(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
	({key: googleMapApiKey, v: "weekly"});
</script>

<!-- Google's Marker Clusterer extension for grouping adjacent markers... -->
<!-- <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script> -->

<script>
	// ------------------------------------------------------------
	// CSRF Token caching for performance optimization
	let _cachedCsrfToken = null;
	let _csrfTokenExpiry = 0;
	const CSRF_TOKEN_TTL = 5 * 60 * 1000; // Cache token for 5 minutes

	// AbortController for canceling in-progress refresh operations
	let _currentRefreshController = null;

	// Utility: Debounce function for rate-limiting user input handlers
	function debounce(fn, delay = 300) {
		let timeoutId;
		return (...args) => {
			clearTimeout(timeoutId);
			timeoutId = setTimeout(() => fn(...args), delay);
		}
	}

	const __LMBMW_MAPOPTS_COOKIE = "lm_bmw_mapOpts_v1";
	const __LMBMW_MAPOPTS_MAX_AGE = 60 * 60 * 24 * 400;
	const __LMBMW_ALLOWED_OVERLAY_VALUES = ["wildfires", "us-poweroutages", "earthquakes", "us-flooding"];
	const __LMBMW_ALLOWED_WEATHER_TYPES = ["radar", "nexrad-n0q-900913", "xweather", "openweather"];

	function readMapOptionsCookieObject() {
		try {
			const name = __LMBMW_MAPOPTS_COOKIE + "=";
			const parts = document.cookie.split(";");
			for (let i = 0; i < parts.length; i++) {
				const s = parts[i].trim();
				if (s.startsWith(name)) {
					const raw = decodeURIComponent(s.slice(name.length));
					const o = JSON.parse(raw);
					return o && typeof o === "object" ? o : null;
				}
			}
		} catch (e) {}
		return null;
	}
	function writeMapOptionsCookieObject(o) {
		try {
			document.cookie = `${__LMBMW_MAPOPTS_COOKIE}=${encodeURIComponent(JSON.stringify(o))};path=/;max-age=${__LMBMW_MAPOPTS_MAX_AGE};SameSite=Lax`;
		} catch (e) {}
	}
	function clearMapOptionsCookie() {
		try {
			document.cookie = `${__LMBMW_MAPOPTS_COOKIE}=;path=/;max-age=0`;
		} catch (e) {}
	}

	function ensureMapOptsWeatherTypeValid() {
		const sel = _dom.weatherType;
		const opt = sel.options[sel.selectedIndex];
		if (opt && opt.disabled) {
			for (let i = 0; i < sel.options.length; i++) {
				if (!sel.options[i].disabled) {
					sel.selectedIndex = i;
					break;
				}
			}
		}
	}

	function syncAdditionalOverlayVarFromSelect() {
		const v = _dom.otherWeatherOverlays.value;
		if (v === "wildfires") additionalOverlayOption = "wildfires";
		else if (v === "us-poweroutages") additionalOverlayOption = "us-poweroutages";
		else if (v === "earthquakes") additionalOverlayOption = "earthquakes";
		else if (v === "us-flooding") additionalOverlayOption = "us-flooding";
	}

	function applyPersistedMapOptionsFromCookie() {
		const o = readMapOptionsCookieObject();
		if (!o) return;

		if (typeof o.groupPathFilter === "string" && o.groupPathFilter.trim() !== "") {
			groupPathFilter = o.groupPathFilter.trim();
			initialGroupPathFilter = groupPathFilter;
		}
		if (typeof o.showCleared === "boolean") showCleared = o.showCleared;
		if (typeof o.showWarnings === "boolean") showWarnings = o.showWarnings;
		if (typeof o.showErrors === "boolean") showErrors = o.showErrors;
		if (typeof o.showCriticals === "boolean") showCriticals = o.showCriticals;
		if (typeof o.showSDT === "boolean") showSDT = o.showSDT;
		if (typeof o.autoResetMapOnRefresh === "boolean") autoResetMapOnRefresh = o.autoResetMapOnRefresh;

		if (o.markerStyle === "circles" || o.markerStyle === "pins") {
			markerStyle = o.markerStyle;
		}

		if (typeof o.otherWeatherOverlays === "string" && __LMBMW_ALLOWED_OVERLAY_VALUES.indexOf(o.otherWeatherOverlays) >= 0) {
			_dom.otherWeatherOverlays.value = o.otherWeatherOverlays;
			if (o.otherWeatherOverlays === "us-poweroutages") additionalOverlayOption = "us-poweroutages";
			else additionalOverlayOption = o.otherWeatherOverlays;
		}
		if (typeof o.weather === "boolean") {
			_dom.weather.checked = o.weather;
		}
		if (typeof o.weatherType === "string" && __LMBMW_ALLOWED_WEATHER_TYPES.indexOf(o.weatherType) >= 0) {
			_dom.weatherType.value = o.weatherType;
		}
		ensureMapOptsWeatherTypeValid();

		_dom.showCleared.checked = showCleared;
		_dom.showWarnings.checked = showWarnings;
		_dom.showErrors.checked = showErrors;
		_dom.showCriticals.checked = showCriticals;
		_dom.showSDT.checked = showSDT;
		_dom.autoZoom.checked = autoResetMapOnRefresh;
		_dom.markerStyleSelect.value = markerStyle === "circles" ? "circles" : "pins";
		_dom.customGroupFilterField.value = groupPathFilter;
	}

	function saveMapOptionsToCookie() {
		syncAdditionalOverlayVarFromSelect();
		const gp = (_dom.customGroupFilterField.value || "").trim();
		writeMapOptionsCookieObject({
			v: 1,
			groupPathFilter: gp || groupPathFilter,
			showCleared: _dom.showCleared.checked,
			showWarnings: _dom.showWarnings.checked,
			showErrors: _dom.showErrors.checked,
			showCriticals: _dom.showCriticals.checked,
			showSDT: _dom.showSDT.checked,
			autoResetMapOnRefresh: _dom.autoZoom.checked,
			weather: _dom.weather.checked,
			weatherType: _dom.weatherType.value,
			otherWeatherOverlays: _dom.otherWeatherOverlays.value,
			markerStyle: _dom.markerStyleSelect.value === "circles" ? "circles" : "pins",
		});
	}

	function showReleaseNotes() {
		document.getElementById('releaseNotesOverlay').classList.add('visible');
	}

	function closeReleaseNotes() {
		document.getElementById('releaseNotesOverlay').classList.remove('visible');
	}

	// Helper: Check if a token value represents a truthy boolean
	function isTruthyToken(tokenValue) {
		const lower = tokenValue.toLowerCase();
		return lower === "true" || lower === "yes" || lower === "1";
	}

	// Helper: Parse alert/SDT status into a normalized severity object
	const _severityMeta = {
		warn:     { icon: () => warningIcon,  pinBG: "#f5ca1d", pinBorder: "#967c14", pinIndex: 1 },
		error:    { icon: () => errorIcon,    pinBG: "#ff8c00", pinBorder: "#ac5101", pinIndex: 2 },
		critical: { icon: () => criticalIcon, pinBG: "#e0351b", pinBorder: "#9a2614", pinIndex: 3 },
		sdt:      { icon: () => sdtIcon,      pinBG: "#00a1fe", pinBorder: "#00a1fe", pinIndex: 4 },
		clear:    { icon: () => clearedIcon,  pinBG: undefined, pinBorder: undefined, pinIndex: 0 },
	};
	function parseSeverity(item) {
		let severity = "clear";
		const alertMatch = item.alertStatus && item.alertStatus.match(/([\w]+)-([\w]+)-([\w]+)/);
		if (alertMatch) {
			const sev = alertMatch[2];
			if (sev === "critical" || sev === "error" || sev === "warn") {
				severity = sev;
			}
		}
		const sdtMatch = item.sdtStatus && item.sdtStatus.match(/([\w]+)-([\w]+)-([\w]+)/);
		if (sdtMatch && (sdtMatch[1].toLowerCase() === "sdt" || sdtMatch[2].toLowerCase() === "sdt")) {
			severity = "sdt";
		}
		const meta = _severityMeta[severity];
		return {
			severity,
			sevIcon: meta.icon(),
			pinBG: meta.pinBG,
			pinBorder: meta.pinBorder,
			pinIndex: meta.pinIndex,
		};
	}

	/**
	* Fetches a Cross-Site Request Forgery (CSRF) token required for subsequent API calls.
	* Implements caching to avoid redundant network requests within the TTL period.
	*
	* This function makes a preliminary request to a dummy endpoint solely to retrieve
	* the CSRF token from the response headers.
	*
	* Credit for this function goes to Steven Villardi
	*
	* @async
	* @function fetchCsrfToken
	* @param {boolean} [forceRefresh=false] - Force a fresh token fetch, bypassing the cache.
	* @returns {Promise<string>} A promise that resolves with the CSRF token.
	* @throws {Error} If the fetch request fails or the token is not found in headers.
	*/
	async function fetchCsrfToken(forceRefresh = false) {
		// Return cached token if still valid and not forcing refresh
		if (!forceRefresh && _cachedCsrfToken && Date.now() < _csrfTokenExpiry) {
			// console.debug('Using cached CSRF token...');
			return _cachedCsrfToken;
		}

		// console.debug('Fetching fresh CSRF token...');
		const response = await fetch('/santaba/rest/functions/dummy', {
			method: 'GET',
			headers: {
				'X-Csrf-Token': 'Fetch', // Specific header to request the token
				'Accept': 'application/json',
				'X-Version': '3', // Specify API version if required by this endpoint
			},
			credentials: 'include', // Include cookies for session management/CSRF
		});

		if (!response.ok) {
			// Clear cache on failure
			_cachedCsrfToken = null;
			_csrfTokenExpiry = 0;
			throw new Error(`Failed to fetch CSRF token: ${response.status} ${response.statusText}`);
		}

		const token = response.headers.get('X-Csrf-Token');
		if (!token) {
			throw new Error('CSRF token not found in response headers.');
		}

		// Cache the token
		_cachedCsrfToken = token;
		_csrfTokenExpiry = Date.now() + CSRF_TOKEN_TTL;
		// console.debug('CSRF Token fetched and cached successfully.');

		return token;
	}

	/**
	* Generates an LMv1 HMAC-SHA256 authorization header for LogicMonitor API authentication.
	* Uses the Web Crypto API to compute the signature from the HTTP verb, epoch timestamp,
	* request body (if applicable), and resource path.
	*
	* @async
	* @function generateLMv1Auth
	* @param {string} httpVerb - The HTTP method (GET, POST, PUT, PATCH, DELETE).
	* @param {string} resourcePath - The API resource path (e.g., /device/devices).
	* @param {object|Array|undefined} postBody - The request body for POST/PUT/PATCH, or undefined.
	* @returns {Promise<string>} The complete LMv1 Authorization header value.
	*/
	async function generateLMv1Auth(httpVerb, resourcePath, postBody) {
		const epoch = new Date().getTime();
		const requestData = (postBody && ['POST', 'PUT', 'PATCH'].includes(httpVerb))
			? JSON.stringify(postBody)
			: '';
		const requestVars = httpVerb + epoch + requestData + resourcePath;

		const encoder = new TextEncoder();
		const keyData = encoder.encode(lmAPIKey);
		const messageData = encoder.encode(requestVars);

		const cryptoKey = await crypto.subtle.importKey(
			'raw', keyData, { name: 'HMAC', hash: 'SHA-256' }, false, ['sign']
		);
		const signatureBuffer = await crypto.subtle.sign('HMAC', cryptoKey, messageData);
		const base64Signature = btoa(String.fromCharCode(...new Uint8Array(signatureBuffer)));

		return `LMv1 ${lmAPIID}:${base64Signature}:${epoch}`;
	}

	/**
		* Performs an HTTP request to the LogicMonitor REST API.
		*
		* Authentication is determined automatically based on the configured credentials:
		*   1. Bearer token (apiBearerToken) - highest priority
		*   2. LMv1 HMAC (lmAPIID + lmAPIKey)
		*   3. CSRF token with session cookies - default integrated portal auth
		*
		* Credit for this function goes to Steven Villardi
		*
		* @async
		* @function LMClient
		* @param {object} options - The options for the API request.
		* @param {string} options.resourcePath - The specific API resource path (e.g., /device/devices).
		* @param {string} [options.queryParams=''] - Optional query parameters string (e.g., ?filter=name:value).
		* @param {'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'} options.httpVerb - The HTTP method to use.
		* @param {object | Array<unknown>} [options.postBody] - The JSON payload for POST/PUT/PATCH requests.
		* @param {string} [options.apiVersion='3'] - The API version to use. Default is "3".
		* @param {AbortSignal} [options.signal] - Optional AbortSignal for canceling the request.
		* @returns {Promise<object>} A promise that resolves with the JSON response body on success.
		* @throws {Error} Throws an Error on API errors (>=300 status), network issues,
		*                 token fetching problems, or JSON handling errors. The error object
		*                 may contain 'status' and 'statusText' properties for API errors.
	*/
	async function LMClient({
		resourcePath,
		queryParams = '', // Default queryParams to empty string
		httpVerb,
		postBody,
		apiVersion = '3',
		signal = null, // Optional AbortSignal for request cancellation
	}) {
		// console.debug('LMClient called with:', { resourcePath, queryParams, httpVerb, postBody, apiVersion });
		// Validate required parameters
		if (!resourcePath || !httpVerb) {
			throw new Error('Missing required parameters: resourcePath and httpVerb must be provided.');
		}
		const validVerbs = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];
		if (!validVerbs.includes(httpVerb)) {
			throw new Error(`Invalid httpVerb: ${httpVerb}. Must be one of ${validVerbs.join(', ')}`);
		}

		// console.debug(`Initiating LogicMonitor API call: ${httpVerb} ${resourcePath}${queryParams}`);

		try {
			// 1. Construct the API URL and base headers
			const apiUrl = `/santaba/rest${resourcePath}${queryParams}`;
			const headers = {
				'Content-Type': 'application/json',
				'Accept': 'application/json',
				'X-Version': apiVersion,
			};

			const requestOptions = {
				method: httpVerb,
				headers: headers,
			};

			// 2. Set auth headers: bearer token > API ID/key (LMv1) > CSRF session auth
			if (apiBearerToken) {
				headers['Authorization'] = `Bearer ${apiBearerToken}`;
			} else if (lmAPIID && lmAPIKey) {
				headers['Authorization'] = await generateLMv1Auth(httpVerb, resourcePath, postBody);
			} else {
				const csrfToken = await fetchCsrfToken();
				headers['X-Csrf-Token'] = csrfToken;
				requestOptions.credentials = 'include';
			}

			// Add AbortSignal if provided
			if (signal) {
				requestOptions.signal = signal;
			}

			// 3. Add body only for relevant methods
			if (postBody && (httpVerb === 'POST' || httpVerb === 'PUT' || httpVerb === 'PATCH')) {
				try {
					requestOptions.body = JSON.stringify(postBody);
					// console.debug('Request body included:', postBody);
				} catch (stringifyError) {
					console.error('Failed to stringify postBody:', stringifyError);
					// Add user-friendly message to the error
					stringifyError.message = `Invalid postBody provided. Could not stringify to JSON. Original error: ${stringifyError.message}`;
					throw stringifyError;
				}
			}

			// 4. Make the API call
			// console.debug(`Executing fetch to: ${apiUrl}`);
			const response = await fetch(apiUrl, requestOptions);
			// console.debug(`Received response status: ${response.status} ${response.statusText}`);

			// 5. Process the response
			if (response.ok) { // ok is true for statuses 200-299
				// Handle potential empty response body for certain success statuses (e.g., 204 No Content)
				if (response.status === 204) {
					console.debug('Received 204 No Content response.');
					return {}; // Return an empty object for 204
				}
				try {
					// Assume response is JSON if status is ok and not 204
					const data = await response.json();
					// console.debug('API call successful, response data received.'); // Avoid logging potentially sensitive data by default
					return data;
				} catch (jsonError) {
					console.error('Failed to parse JSON response:', jsonError);
					// Create a new error with more context
					const parseError = new Error(`Successfully received response (${response.status}), but failed to parse JSON body. Original error: ${jsonError.message}`);
					parseError.status = response.status; // Attach status for context
					parseError.statusText = response.statusText;
					throw parseError;
				}
			} else {
				// Handle API errors (status >= 300)
				const error = new Error(`API Error: ${response.status} ${response.statusText}`);
				error.status = response.status;
				error.statusText = response.statusText;

				// Attempt to get more details from the error response body
				try {
					const errorBody = await response.text(); // Use text first in case it's not JSON
					error.body = errorBody || 'No additional error details provided.'; // Attach body to error
					console.warn(`API Error Body: ${error.body}`); // Log the raw error body
				} catch (bodyError) {
					console.warn('Could not read error response body:', bodyError);
					error.body = 'Could not read error response body.';
				}
				console.error('LogicMonitor API Error:', { status: error.status, statusText: error.statusText });
				throw error; // Throw the augmented error object
			}
		} catch (error) {
			// Abort errors are intentional cancellations — rethrow silently
			if (error.name === 'AbortError') throw error;

			console.error('An error occurred in LMClient:', error.message || error);

			// Re-throw the error to be handled by the caller.
			// Ensure it's always an Error object.
			if (error instanceof Error) {
				throw error;
			} else {
				// If it's not an Error object (e.g., the thrown API error object), wrap it
				const wrappedError = new Error(error.message || 'An unexpected error occurred during the API call.');
				// Copy relevant properties if they exist
				if (error && typeof error === 'object') {
					if ('status' in error) wrappedError.status = error.status;
					if ('statusText' in error) wrappedError.statusText = error.statusText;
					if ('body' in error) wrappedError.body = error.body;
				}
				throw wrappedError;
			}
		}
	}

	// ------------------------------------------------------------
	// Capture information from specific dashboard tokens we'll be using...
	// (Like any token inserted into the Text widget, LogicMonitor automatically inserts these token values as the page is being rendered so Javascript is able to pick them as if the values were there originally. If a token isn't set then the variable's value will be literally what's shown below, including the double-hashtags.)

	// Capture from token whether to plot "groups" or "resources" or "services"...
	let mapSourceTypeToken = "##MapSourceType##";
	// If the token value wasn't set then use the values hard-coded above at the beginning of this script...
	if (mapSourceTypeToken != "\#\#MapSourceType\#\#") {
		mapSourceType = mapSourceTypeToken.toLowerCase();
	}

	// Capture from token whether to use a LogicMonitor API bearer token or API ID & key...
	let apiBearerTokenToken = "##apiBearerToken##";
	let apiIDToken = "##apiID##";
	let apiKeyToken = "##apiKey##";
	// If the token value wasn't set then use the values hard-coded above at the beginning of this script...
	if (apiBearerTokenToken != "\#\#apiBearerToken\#\#") {
		apiBearerToken = apiBearerTokenToken;
	}
	if (apiIDToken != "\#\#apiID\#\#") {
		lmAPIID = apiIDToken;
	}
	if (apiKeyToken != "\#\#apiKey\#\#") {
		lmAPIKey = apiKeyToken;
	}

	// Capture from token whether to override the map location property...
	let mapLocationPropertyToken = "##MapLocationProperty##";
	// If the token value wasn't set then use the values hard-coded above at the beginning of this script...
	if (mapLocationPropertyToken != "\#\#MapLocationProperty\#\#") {
		mapLocationProperty = mapLocationPropertyToken;
	}

	// Capture from token whether override the map theme...
	let mapStyleToken = "##MapStyle##";
	// If the token value wasn't set then use the values hard-coded above at the beginning of this script...
	if (mapStyleToken != "\#\#MapStyle\#\#") {
		mapStyle = mapStyleToken.toLowerCase();
	}

	// Capture from token whether to hide the map options...
	let hideMapOptionsByDefaultToken = "##HideMapOptions##";
	// If the token value wasn't set then use the value hard-coded above at the beginning of this script...
	if (isTruthyToken(hideMapOptionsByDefaultToken)) {
		hideMapOptionsByDefault = true;
	}

	// Capture from token whether to hide the map sidebar...
	let hideMapSidebarByDefaultToken = "##HideMapSidebar##";
	// If the token value wasn't set then use the value hard-coded above at the beginning of this script...
	if (!isTruthyToken(hideMapSidebarByDefaultToken)) {
		hideMapSidebarByDefault = false;
	}

	// Capture from token whether to hide items that don't have active alerts...
	let ignoreClearedToken = "##MapIgnoreCleared##";
	// If the token value wasn't set then use the value hard-coded above at the beginning of this script...
	if (isTruthyToken(ignoreClearedToken)) {
		showCleared = false;
	}
	// Capture from token whether to hide items that have "Warning" alerts...
	let ignoreWarningsToken = "##MapIgnoreWarnings##";
	// If the token value wasn't set then use the value hard-coded above at the beginning of this script...
	if (isTruthyToken(ignoreWarningsToken)) {
		showWarnings = false;
	}
	// Capture from token whether to hide items that have "Error" alerts...
	let ignoreErrorsToken = "##MapIgnoreErrors##";
	// If the token value wasn't set then use the value hard-coded above at the beginning of this script...
	if (isTruthyToken(ignoreErrorsToken)) {
		showErrors = false;
	}
	// Capture from token whether to hide items that have "Critical" alerts...
	let ignoreCriticalsToken = "##MapIgnoreCriticals##";
	// If the token value wasn't set then use the value hard-coded above at the beginning of this script...
	if (isTruthyToken(ignoreCriticalsToken)) {
		showCriticals = false;
	}
	// Capture from token whether to hide items that are in SDT...
	let ignoreSDTToken = "##MapIgnoreSDT##";
	// If the token value wasn't set then use the value hard-coded above at the beginning of this script...
	if (isTruthyToken(ignoreSDTToken)) {
		showSDT = false;
	}
	// Capture from token whether to show the map tilt/rotation controls...
	let showMapTiltControlsToken = "##MapShowTiltControls##";
	// If the token value wasn't set then use the value hard-coded above at the beginning of this script...
	if (isTruthyToken(showMapTiltControlsToken)) {
		showMapTiltControls = true;
	}

	// Capture from token whether to automatically reset the map's zoom to encompass all items on timed refreshes...
	let autoResetMapOnRefreshToken = "##AutoResetMapOnRefresh##";
	// If the token value wasn't set then use the value hard-coded above at the beginning of this script...
	if (isTruthyToken(autoResetMapOnRefreshToken)) {
		autoResetMapOnRefresh = true;
	}

	// Capture our group filter if defined as a token...
	let dashboardGroupPathToken = "##MapGroupPathFilter##";
	if (dashboardGroupPathToken != "\#\#MapGroupPathFilter\#\#") {
		groupPathFilter = dashboardGroupPathToken;
	}
	if (groupPathFilter == "") {
		// Default to "*" if no value was given...
		groupPathFilter = "*";
	}
	// Capture the current path filter to reset the form field if the user completely clears it out...
	let initialGroupPathFilter = groupPathFilter;

	// Capture our overlay defaults if defined as tokens...
	let dashboardShowWeatherToken = "##MapShowWeather##".toLowerCase();
	if (dashboardShowWeatherToken == "global" || dashboardShowWeatherToken == "nexrad" || dashboardShowWeatherToken == "xweather" || dashboardShowWeatherToken == "openweather" || dashboardShowWeatherToken == "true" || dashboardShowWeatherToken == "yes") {
		// If the token value is "true" or "yes" then default to "global"...
		if (dashboardShowWeatherToken == "true" || dashboardShowWeatherToken == "yes") {
			dashboardShowWeatherToken = "global";
		}
		showWeatherDefault = dashboardShowWeatherToken;
	}
	let openWeatherAPIKeyToken = "##OpenWeatherAPIKey##";
	if (openWeatherAPIKeyToken != "\#\#OpenWeatherAPIKey\#\#" && openWeatherAPIKeyToken.trim() !== "") {
		openWeatherAPIKey = openWeatherAPIKeyToken.trim();
	}
	let xweatherAPIIDToken = "##XweatherAPIID##";
	if (xweatherAPIIDToken != "\#\#XweatherAPIID\#\#" && xweatherAPIIDToken.trim() !== "") {
		xweatherAPIID = xweatherAPIIDToken.trim();
	}
	let xweatherAPIKeyToken = "##XweatherAPIKey##";
	if (xweatherAPIKeyToken != "\#\#XweatherAPIKey\#\#" && xweatherAPIKeyToken.trim() !== "") {
		xweatherAPIKey = xweatherAPIKeyToken.trim();
	}
	let dashboardAddlOverlayToken = "##MapOverlayOption##".toLowerCase();
	if (dashboardAddlOverlayToken == "wildfires" || dashboardAddlOverlayToken == "us-wildfires" || dashboardAddlOverlayToken == "outages" || dashboardAddlOverlayToken == "us-poweroutages" || dashboardAddlOverlayToken == "earthquakes" || dashboardAddlOverlayToken == "us-flooding") {
		additionalOverlayOption = dashboardAddlOverlayToken;
		if (additionalOverlayOption == "us-wildfires") {
			additionalOverlayOption = "wildfires";
		}
	}

	// Capture from token any custom properties to display when viewing an item's details...
	let displayPropsToken = "##MapDisplayProperties##";
	// If the token value wasn't set then use the value hard-coded above at the beginning of this script...
	if (displayPropsToken != "\#\#MapDisplayProperties\#\#") {
		displayProps = displayPropsToken;
	}

	// Capture from token whether to disable marker clustering...
	let disableClusteringToken = "##MapDisableClustering##";
	// If the token value wasn't set then use the value hard-coded above at the beginning of this script...
	if (isTruthyToken(disableClusteringToken)) {
		disableClustering = true;
	}

	// Whether to show road labels on the map...
	let showRoadLabelsToken = "##MapShowRoadLabels##";
	// If the token value wasn't set then use the value hard-coded above at the beginning of this script...
	if (isTruthyToken(showRoadLabelsToken)) {
		showRoadLabels = "yes";
	}

	// Check to see if user has specified a marker style via dashboard token...
	let markerStyleToken = "##MapMarkerStyle##";
	const markerStyleTokenNorm = String(markerStyleToken).trim().toLowerCase();
	if (markerStyleTokenNorm === "dot" || markerStyleTokenNorm === "dots" || markerStyleTokenNorm === "circle" || markerStyleTokenNorm === "circles") {
		markerStyle = "circles";
	} else if (markerStyleTokenNorm === "pins" || markerStyleTokenNorm === "default" || markerStyleTokenNorm === "pin") {
		markerStyle = "pins";
	}

	// Cache frequently accessed DOM elements for performance
	const _dom = {
		showCleared: document.getElementById("showCleared"),
		showWarnings: document.getElementById("showWarnings"),
		showErrors: document.getElementById("showErrors"),
		showCriticals: document.getElementById("showCriticals"),
		showSDT: document.getElementById("showSDT"),
		autoZoom: document.getElementById("autoZoom"),
		weather: document.getElementById("weather"),
		weatherType: document.getElementById("weatherType"),
		otherWeatherOverlays: document.getElementById("otherWeatherOverlays"),
		markerStyleSelect: document.getElementById("markerStyleSelect"),
		customGroupFilterField: document.getElementById("customGroupFilterField"),
		mapOptionsArea: document.getElementById("mapOptionsArea"),
		refreshStatusArea: null, // Set later after map init
		weatherRefreshButton: null, // Set later after map init
		showClearedLabel: document.getElementById("showClearedLabel"),
		showWarningsLabel: document.getElementById("showWarningsLabel"),
		showErrorsLabel: document.getElementById("showErrorsLabel"),
		showCriticalsLabel: document.getElementById("showCriticalsLabel"),
		showSDTLabel: document.getElementById("showSDTLabel"),
		sidebarArea: document.getElementById("sidebarArea"),
		sidebarResizeHandle: document.getElementById("sidebarResizeHandle"),
		weatherOptions: document.getElementById("weatherOptions"),
		optionsToggleArea: document.getElementById("optionsToggleArea"),
		gearIcon: document.getElementById("gearIcon"),
		gearIconChevron: document.getElementById("gearIconChevron"),
	}

	// Set the form fields as appropriate...
	_dom.showCleared.checked = showCleared;
	_dom.showWarnings.checked = showWarnings;
	_dom.showErrors.checked = showErrors;
	_dom.showCriticals.checked = showCriticals;
	_dom.showSDT.checked = showSDT;
	_dom.autoZoom.checked = autoResetMapOnRefresh;

	if (showWeatherDefault == "global") {
		_dom.weather.checked = true;
		_dom.weatherType.value = "radar";
	} else if (showWeatherDefault == "nexrad") {
		_dom.weather.checked = true;
		_dom.weatherType.value = "nexrad-n0q-900913";
	} else if (showWeatherDefault == "openweather") {
		_dom.weather.checked = true;
		_dom.weatherType.value = "openweather";
	} else if (showWeatherDefault == "xweather") {
		_dom.weather.checked = true;
		_dom.weatherType.value = "xweather";
	}

	// Disable the Xweather option if the XweatherAPIID or XweatherAPIKey is missing...
	const xweatherOption = _dom.weatherType.querySelector('option[value="xweather"]');
	if (xweatherOption && (!xweatherAPIID || !xweatherAPIKey)) {
		xweatherOption.disabled = true;
		xweatherOption.textContent += " (API key required)";
	}
	// Disable the OpenWeather option if the OpenWeatherAPIKey is missing...
	const openweatherOption = _dom.weatherType.querySelector('option[value="openweather"]');
	if (openweatherOption && !openWeatherAPIKey) {
		openweatherOption.disabled = true;
		openweatherOption.textContent += " (API key required)";
	}

	if (additionalOverlayOption == "wildfires") {
		_dom.otherWeatherOverlays.value = "wildfires";
	} else if (additionalOverlayOption == "outages" || additionalOverlayOption == "us-poweroutages") {
		_dom.otherWeatherOverlays.value = "us-poweroutages";
	} else if (additionalOverlayOption == "earthquakes") {
		_dom.otherWeatherOverlays.value = "earthquakes";
	} else if (additionalOverlayOption == "us-flooding") {
		_dom.otherWeatherOverlays.value = "us-flooding";
	}

	_dom.markerStyleSelect.value = markerStyle === "circles" ? "circles" : "pins";
	_dom.markerStyleSelect.addEventListener("change", applyMarkerStyleFromSelect);

	// Capture information about the current dashboard for use in subsequent REST calls...
	const hostName = parent.window.location.host;
	const locationHash = parent.window.location.hash; // example result: "#dashboard=21"
	const dashboardID = locationHash.replace("#dashboard=", "");
	const pathName = parent.window.location.pathname;

	// Note our original tilt & heading values...
	const defaultMapTilt = mapTilt;
	const defaultMapHeading = mapHeading;

	// SVG icon definitions for our different alert severities...
	const warningIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 1024 1024" data-tooltip="Warning"><path fill="#f5ca1d" d="M118.154 118.154h787.692c43.323 0 78.769 35.446 78.769 78.769v630.154c0 43.323-35.446 78.769-78.769 78.769h-787.692c-43.323 0-78.769-35.446-78.769-78.769v-630.154c0-43.323 35.446-78.769 78.769-78.769v0 0z"></path> <path fill="white" d="M866.462 669.538l-275.692-433.231c-43.323-70.892-114.215-70.892-157.538 0l-275.692 433.231c-43.323 70.892-3.938 157.538 78.769 157.538h551.385c82.708 0 122.092-86.646 78.769-157.538v0 0z"></path> <path fill="#f5ca1d" d="M551.385 748.308h-78.769v-78.769h78.769v78.769zM551.385 630.154h-78.769v-275.692h78.769v275.692z"></path> </svg>';
	const errorIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 1024 1024" data-tooltip="Error"><path fill="#ff8c00" d="M118.154 118.154h787.692c43.323 0 78.769 35.446 78.769 78.769v630.154c0 43.323-35.446 78.769-78.769 78.769h-787.692c-43.323 0-78.769-35.446-78.769-78.769v-630.154c0-43.323 35.446-78.769 78.769-78.769v0 0z"></path> <path fill="white" d="M866.462 669.538l-275.692-433.231c-43.323-70.892-114.215-70.892-157.538 0l-275.692 433.231c-43.323 70.892-3.938 157.538 78.769 157.538h551.385c82.708 0 122.092-86.646 78.769-157.538v0 0z"></path> <path fill="#ff8c00" d="M551.385 748.308h-78.769v-78.769h78.769v78.769zM551.385 630.154h-78.769v-275.692h78.769v275.692z"></path> </svg>';
	const criticalIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 1024 1024" data-tooltip="Critical"><path fill="#e0351b" d="M118.154 118.154h787.692c43.323 0 78.769 35.446 78.769 78.769v630.154c0 43.323-35.446 78.769-78.769 78.769h-787.692c-43.323 0-78.769-35.446-78.769-78.769v-630.154c0-43.323 35.446-78.769 78.769-78.769v0 0z"></path> <path fill="white" d="M827.077 590.769c-133.908-232.369-39.385-354.462-39.385-354.462s-173.292 43.323-157.538 157.538c-35.446-31.508-216.615-86.646-114.215-271.754v-3.938h-3.938c-3.938 0-55.138 23.631-94.523 74.831-39.385 47.262-110.277 106.338-63.015 240.246 31.508 74.831 39.385 94.523-39.385 157.538 3.938-15.754 11.815-51.2 0-78.769-27.569-63.015-78.769-78.769-78.769-78.769s43.323 66.954 0 118.154c-39.385 43.323-55.138 129.969-35.446 200.862 15.754 59.077 70.892 106.338 157.538 137.846-7.877-3.938 110.277 43.323 244.185 3.938 59.077-19.692 137.846-43.323 185.108-106.338 39.385-51.2 74.831-129.969 39.385-196.923v0 0z"></path> <path fill="#e0351b" d="M551.385 827.077h-78.769v-78.769h78.769v78.769zM551.385 708.923h-78.769v-275.692h78.769v275.692z"></path> </svg>';
	const clearedIcon = '<svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" data-tooltip="No alerts"><path id="Shape" fill="#ffffff" fill-rule="evenodd" stroke="none" d="M 43 25 C 43 15.61116 35.164986 8 25.5 8 C 15.835016 8 8 15.61116 8 25 C 8 34.38884 15.835016 42 25.5 42 C 35.164986 42 43 34.38884 43 25 Z"/><path id="Path" fill="#85c25d" stroke="none" d="M 25.5 4 C 37.374119 4 47 13.625877 47 25.5 C 47 37.374123 37.374119 47 25.5 47 C 13.625877 47 4 37.374123 4 25.5 C 4 13.625877 13.625877 4 25.5 4 Z M 17.975 17.974998 C 15.881312 17.974998 14.103745 18.670809 12.642242 20.062449 C 11.18074 21.45409 10.45 23.269981 10.45 25.510181 C 10.45 27.736805 11.18074 29.545912 12.642242 30.937551 C 14.103745 32.329193 15.881312 33.025002 17.975 33.025002 C 20.068687 33.025002 21.842855 32.329193 23.297562 30.937551 C 24.752264 29.545912 25.479607 27.736805 25.479607 25.510181 C 25.479607 23.283558 24.752264 21.471062 23.297562 20.072632 C 21.842855 18.674204 20.068687 17.974998 17.975 17.974998 Z M 31.006098 18.280481 L 27.784012 18.280481 L 27.784012 32.719521 L 31.006098 32.719521 L 31.006098 28.850101 L 32.637535 27.037582 L 36.532589 32.719521 L 40.549999 32.719521 L 34.901154 24.532646 L 40.529606 18.280481 L 36.287876 18.280481 L 31.006098 24.34936 L 31.006098 18.280481 Z M 17.975 21.111265 C 19.089819 21.111265 20.061874 21.48802 20.891193 22.241541 C 21.72051 22.995064 22.135162 24.07781 22.135162 25.489815 C 22.135162 26.901821 21.72051 27.981174 20.891193 28.727909 C 20.061874 29.474642 19.089819 29.848003 17.975 29.848003 C 16.86018 29.848003 15.884727 29.474642 15.048611 28.727909 C 14.212496 27.981174 13.794444 26.901821 13.794444 25.489815 C 13.794444 24.07781 14.209096 22.998459 15.038414 22.251724 C 15.881327 21.491413 16.86018 21.111265 17.975 21.111265 Z"/></svg>';
	const sdtIcon = '<svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" data-tooltip="SDT"><path id="Oval" fill="#00A1FE" fill-rule="evenodd" stroke="none" d="M 46 25 C 46 13.40202 36.59798 4 25 4 C 13.40202 4 4 13.40202 4 25 C 4 36.59798 13.40202 46 25 46 C 36.59798 46 46 36.59798 46 25 Z"/><g id="Group"><path id="Path" fill="#000000" fill-opacity="0.01" stroke="none" d="M 5 5 L 45 5 L 45 45 L 5 45 Z"/><path id="path1" fill="#ffffff" stroke="none" d="M 25 9.0625 C 16.19795 9.0625 9.0625 16.197948 9.0625 25 C 9.0625 33.801994 16.19795 40.9375 25 40.9375 C 33.801998 40.9375 40.9375 33.801994 40.9375 25 L 36.25 25 C 36.25 31.213245 31.213249 36.25 25 36.25 C 18.7868 36.25 13.75 31.213245 13.75 25 C 13.75 18.786802 18.7868 13.75 25 13.75 L 25 9.0625 Z"/><path id="path2" fill="#ffffff" stroke="none" d="M 33.75 12.5 C 33.75 13.880699 32.630753 15 31.25 15 C 29.869299 15 28.75 13.880699 28.75 12.5 C 28.75 11.119301 29.869299 10 31.25 10 C 32.630753 10 33.75 11.119301 33.75 12.5 Z"/><path id="path3" fill="#ffffff" stroke="none" d="M 40 18.75 C 40 20.130701 38.880753 21.25 37.5 21.25 C 36.119247 21.25 35 20.130701 35 18.75 C 35 17.369301 36.119247 16.25 37.5 16.25 C 38.880753 16.25 40 17.369301 40 18.75 Z"/><path id="path4" fill="#ffffff" fill-rule="evenodd" stroke="none" d="M 23.125 16.000004 L 26.880026 16.000004 L 26.880026 24.899998 L 33.125 28.647003 L 30.725 31.83075 L 23.125 27.066555 L 23.125 16.000004 Z"/></g></svg>';
	// Animated throbber for when we're updating data...
	const loadingSpinner = '<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_VpEe{animation:spinner_vXu6 1.2s cubic-bezier(0.52,.6,.25,.99) infinite}.spinner_eahp{animation-delay:.4s}.spinner_f7Y2{animation-delay:.8s}@keyframes spinner_vXu6{0%{r:0;opacity:1}100%{r:11px;opacity:0}}</style><circle class="spinner_VpEe" cx="12" cy="12" r="0" fill="red"/><circle class="spinner_VpEe spinner_eahp" cx="12" cy="12" r="0" fill="red"/><circle class="spinner_VpEe spinner_f7Y2" cx="12" cy="12" r="0" fill="red"/></svg>';
	// Icons for toggling visiiblity of the top toolbar...
	const optionsToggleVisibleIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="width: 25px; height: 25px;"><rect x="10" y="42" width="428" height="428" rx="54" ry="54" fill="none" stroke="#000000" stroke-width="20"/><path fill="#000000" d="M241.6 175.7C237.1 170.8 230.7 168 224 168S210.9 170.8 206.4 175.7l-96 104c-6.469 7-8.188 17.19-4.375 25.91C109.8 314.3 118.5 320 127.1 320h192c9.531 0 18.16-5.656 22-14.38c3.813-8.719 2.094-18.91-4.375-25.91L241.6 175.7z"/></svg>';
	const optionsToggleHiddenIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="width: 25px; height: 25px;"><rect x="10" y="42" width="428" height="428" rx="54" ry="54" fill="none" stroke="#000000" stroke-width="20"/><path fill="#000000" d="M320 192H128C118.5 192 109.8 197.7 105.1 206.4C102.2 215.1 103.9 225.3 110.4 232.3l96 104C210.9 341.2 217.3 344 224 344s13.09-2.812 17.62-7.719l96-104c6.469-7 8.188-17.19 4.375-25.91C338.2 197.7 329.5 192 320 192z"/></svg>';


	// Map color schemes created using Google's style editor (https://mapstyle.withgoogle.com/).
	// Wrapped in getters so only the selected style is allocated, and showRoadLabels is captured at call time.
	const mapStyles = {
		get standard() { return [ { "stylers": [ { "lightness": 60 } ] }, { "elementType": "labels", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative", "elementType": "geometry.fill", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative.land_parcel", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative.neighborhood", "stylers": [ { "visibility": "off" } ] }, { "featureType": "poi", "elementType": "labels.text", "stylers": [ { "visibility": "off" } ] }, { "featureType": "poi.business", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road", "elementType": "labels", "stylers": [ { "visibility": showRoadLabels } ] }, { "featureType": "road", "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "featureType": "transit", "stylers": [ { "visibility": "off" } ] } ]; },
		get silver() { return [ { "elementType": "geometry", "stylers": [ { "color": "#f5f5f5" } ] }, { "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" }, { "lightness": 70 } ] }, { "elementType": "labels.text.stroke", "stylers": [ { "color": "#f5f5f5" } ] }, { "featureType": "administrative", "elementType": "geometry.fill", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative.country", "elementType": "geometry.stroke", "stylers": [ { "color": "#000000" }, { "lightness": 85 } ] }, { "featureType": "administrative.land_parcel", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [ { "color": "#bdbdbd" } ] }, { "featureType": "administrative.neighborhood", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative.province", "elementType": "geometry.stroke", "stylers": [ { "color": "#000000" }, { "lightness": 80 } ] }, { "featureType": "poi", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "poi", "elementType": "labels.text", "stylers": [ { "visibility": "off" } ] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "road", "stylers": [ { "lightness": 45 } ] }, { "featureType": "road", "elementType": "geometry", "stylers": [ { "color": "#ffffff" }, { "lightness": 55 } ] }, { "featureType": "road", "elementType": "geometry.fill", "stylers": [ { "lightness": 55 } ] }, { "featureType": "road", "elementType": "geometry.stroke", "stylers": [ { "lightness": 55 } ] }, { "featureType": "road", "elementType": "labels", "stylers": [ { "lightness": -15 }, { "visibility": showRoadLabels } ] }, { "featureType": "road", "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road", "elementType": "labels.text.stroke", "stylers": [ { "color": "#ffffff" } ] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "color": "#dadada" }, { "lightness": 50 }, { "weight": 0.5 } ] }, { "featureType": "transit.line", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "transit.station", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#c9c9c9" }, { "lightness": 20 } ] }, { "featureType": "water", "elementType": "geometry.fill", "stylers": [ { "lightness": 35 } ] }, { "featureType": "water", "elementType": "labels.text", "stylers": [ { "visibility": "off" } ] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] } ]; },
		get silverblue() { return [ { "elementType": "geometry", "stylers": [{ "color": "#f5f5f5" }] }, { "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] }, { "elementType": "labels.text.fill", "stylers": [{ "color": "#616161" }, { "lightness": 70 }] }, { "elementType": "labels.text.stroke", "stylers": [{ "color": "#f5f5f5" }] }, { "featureType": "administrative", "elementType": "geometry.fill", "stylers": [{ "visibility": "off" }] }, { "featureType": "administrative.country", "elementType": "geometry.stroke", "stylers": [{ "color": "#000000" }, { "lightness": 85 }] }, { "featureType": "administrative.land_parcel", "stylers": [{ "visibility": "off" }] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [{ "color": "#bdbdbd" }] }, { "featureType": "administrative.neighborhood", "stylers": [{ "visibility": "off" }] }, { "featureType": "administrative.province", "elementType": "geometry.stroke", "stylers": [{ "color": "#000000" }, { "lightness": 80 }] }, { "featureType": "poi", "elementType": "geometry", "stylers": [{ "color": "#eeeeee" }] }, { "featureType": "poi", "elementType": "labels.text", "stylers": [{ "visibility": "off" }] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [{ "color": "#757575" }] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [{ "color": "#e5e5e5" }] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [{ "color": "#9e9e9e" }] }, { "featureType": "road", "stylers": [{ "lightness": 45 }] }, { "featureType": "road", "elementType": "geometry", "stylers": [{ "color": "#ffffff" }, { "lightness": 55 }] }, { "featureType": "road", "elementType": "geometry.fill", "stylers": [{ "lightness": 55 }] }, { "featureType": "road", "elementType": "geometry.stroke", "stylers": [{ "lightness": 55 }] }, { "featureType": "road", "elementType": "labels", "stylers": [{ "visibility": showRoadLabels, "lightness": -15 }] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [{ "color": "#dadada" }, { "lightness": 50 }, { "weight": 0.5 }] }, { "featureType": "transit.line", "elementType": "geometry", "stylers": [{ "color": "#e5e5e5" }] }, { "featureType": "transit.station", "elementType": "geometry", "stylers": [{ "color": "#eeeeee" }] }, { "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#c9c9c9" }, { "lightness": 20 }] }, { "featureType": "water", "elementType": "geometry.fill", "stylers": [{ "color": "#cad0d8" }, { "lightness": 35 }] }, { "featureType": "water", "elementType": "labels.text", "stylers": [{ "visibility": "off" }] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [{ "color": "#9e9e9e" }] } ]; },
		get dark() { return [ { "elementType": "geometry", "stylers": [ { "color": "#212121" } ] }, { "elementType": "geometry.fill", "stylers": [ { "lightness": 10 } ] }, { "elementType": "labels", "stylers": [ { "visibility": "off" } ] }, { "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "elementType": "labels.text.stroke", "stylers": [ { "color": "#212121" } ] }, { "featureType": "administrative", "elementType": "geometry", "stylers": [ { "color": "#757575" } ] }, { "featureType": "administrative", "elementType": "geometry.fill", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative.country", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "administrative.land_parcel", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative.locality", "elementType": "labels.text.fill", "stylers": [ { "color": "#bdbdbd" } ] }, { "featureType": "administrative.neighborhood", "stylers": [ { "visibility": "off" } ] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [ { "color": "#181818" } ] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" } ] }, { "featureType": "poi.park", "elementType": "labels.text.stroke", "stylers": [ { "color": "#1b1b1b" } ] }, { "featureType": "road", "elementType": "geometry.fill", "stylers": [ { "color": "#2c2c2c" } ] }, { "featureType": "road", "elementType": "labels", "stylers": [ { "visibility": showRoadLabels } ] }, { "featureType": "road", "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road", "elementType": "labels.text.fill", "stylers": [ { "color": "#8a8a8a" } ] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [ { "color": "#373737" } ] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "color": "#3c3c3c" } ] }, { "featureType": "road.highway.controlled_access", "elementType": "geometry", "stylers": [ { "color": "#4e4e4e" } ] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" } ] }, { "featureType": "transit", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#000000" } ] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "color": "#3d3d3d" } ] } ]; },
		get aubergine() { return [ { "elementType": "geometry", "stylers": [ { "color": "#1d2c4d" } ] }, { "elementType": "labels", "stylers": [ { "visibility": showRoadLabels } ] }, { "elementType": "labels.text.fill", "stylers": [ { "color": "#8ec3b9" } ] }, { "elementType": "labels.text.stroke", "stylers": [ { "color": "#1a3646" } ] }, { "featureType": "administrative", "elementType": "geometry.fill", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative.country", "elementType": "geometry.stroke", "stylers": [ { "color": "#4b6878" } ] }, { "featureType": "administrative.land_parcel", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [ { "color": "#64779e" } ] }, { "featureType": "administrative.neighborhood", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative.province", "elementType": "geometry.stroke", "stylers": [ { "color": "#4b6878" } ] }, { "featureType": "landscape.man_made", "elementType": "geometry.stroke", "stylers": [ { "color": "#334e87" } ] }, { "featureType": "landscape.natural", "elementType": "geometry", "stylers": [ { "color": "#023e58" } ] }, { "featureType": "poi", "stylers": [ { "visibility": "off" } ] }, { "featureType": "poi", "elementType": "geometry", "stylers": [ { "color": "#283d6a" } ] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [ { "color": "#6f9ba5" } ] }, { "featureType": "poi", "elementType": "labels.text.stroke", "stylers": [ { "color": "#1d2c4d" } ] }, { "featureType": "poi.park", "elementType": "geometry.fill", "stylers": [ { "color": "#023e58" } ] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [ { "color": "#3C7680" } ] }, { "featureType": "road", "elementType": "geometry", "stylers": [ { "color": "#304a7d" } ] }, { "featureType": "road", "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road", "elementType": "labels.text.fill", "stylers": [ { "color": "#98a5be" }, { "lightness": -30 } ] }, { "featureType": "road", "elementType": "labels.text.stroke", "stylers": [ { "color": "#1d2c4d" } ] }, { "featureType": "transit", "elementType": "labels.text.fill", "stylers": [ { "color": "#98a5be" } ] }, { "featureType": "transit", "elementType": "labels.text.stroke", "stylers": [ { "color": "#1d2c4d" } ] }, { "featureType": "transit.line", "elementType": "geometry.fill", "stylers": [ { "color": "#283d6a" } ] }, { "featureType": "transit.station", "elementType": "geometry", "stylers": [ { "color": "#3a4762" } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#0e1626" } ] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "color": "#4e6d70" } ] } ]; },
	};

	// RainViewer map options (feel free to change these to suit your taste)...
	const rvOptionKind = 'radar'; // can be 'radar' or 'satellite'
	const rvOptionSmoothData = 1; // 0 - not smooth, 1 - smooth
	const rvOptionSnowColors = 1; // 0 - do not show snow colors, 1 - show snow colors
	// Variables for holding RainViewer API data...
	let rvAPIData = {};
	let rvMapFrames = [];
	let rvLastPastFramePosition = -1;
	let weatherRefresher = null;
	let mapDataRefresher = null;

	// Number formatter for use in wildfire data...
	const numFormatOptions = {
		style: 'decimal',  // Other options: 'currency', 'percent', etc.
		minimumFractionDigits: 0,
		maximumFractionDigits: 0,
	}

	// Adding a top-level placeholder for our Google Map objects...
	let map = "";
	let clusterer = "";
	let bounds = "";

	// Fetch helper with timeout & AbortController...
	if (!window.fetchJson) {
		window.fetchJson = async function(url, { timeoutMs = 8000 } = {}) {
			const ac = new AbortController();
			const timer = setTimeout(() => ac.abort("timeout"), timeoutMs);
			try {
				const res = await fetch(url, { signal: ac.signal, credentials: "omit", cache: "no-store" });
				if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
				const ct = res.headers.get("content-type") || "";
				if (ct.includes("application/json")) return await res.json();
				return await res.text();
			} finally { clearTimeout(timer); }
		}
	}

	// Batch builder to avoid jank when (re)building many markers...
	if (!window.buildMarkersInBatches) {
		window.buildMarkersInBatches = async function(items, fn, batchSize = 1000) {
			for (let i = 0; i < items.length; i += batchSize) {
				const slice = items.slice(i, i + batchSize);
				for (const it of slice) { try { fn(it); } catch(e) {} }
				await new Promise(r => { if ('requestIdleCallback' in window) requestIdleCallback(()=>r()); else setTimeout(r,0); });
			}
		}
	}

	// Variable for holding our map markers...
	let markers = [];
	// Map for O(1) marker lookups by device ID (performance optimization)
	let markersByDeviceID = new Map();
	// For tracking if we've already established an initial center for our map based on markers...
	let centerCalculated = false;
	// For storing polyline references and their marker associations...
	let polylines = [];

	// Utility function to clear all markers from the map (consolidates repeated code)
	function clearAllMarkers() {
		markers.forEach(m => m.setMap(null));
		markers = [];
		markersByDeviceID.clear();
		if (clusterer && typeof clusterer === "object") {
			google.maps.event.clearInstanceListeners(clusterer);
			clusterer.setMap(null);
		}
	}

	// Clear all connecting polylines and their listeners
	function clearAllPolylines() {
		if (polylines.length === 0) return;
		// console.debug("Clearing " + polylines.length + " polylines");
		polylines.forEach(p => {
			if (p && p.polyline) {
				google.maps.event.clearInstanceListeners(p.polyline);
				p.polyline.setMap(null);
			}
		});
		polylines = [];
	}

	// Clear all overlay data, listeners, and InfoWindows before loading a new overlay
	function clearOverlayState() {
		map.data.forEach(function(feature) {
			map.data.remove(feature);
		});
		if (typeof parent.overlayInfoWindowListenerHandle == "object") {
			google.maps.event.removeListener(parent.overlayInfoWindowListenerHandle);
		}
		if (parent.overlayInfoWindow) {
			parent.overlayInfoWindow.close();
			parent.overlayInfoWindow = null;
		}
		parent.overlayInfoWindow = new CustomInfoWindow({ content: "", anchor: 'right', offset: 20 });
		if (parent.mmiContourLines) {
			parent.mmiContourLines.forEach(line => line.setMap(null));
			parent.mmiContourLines = [];
		}
	}

	// Close all open InfoWindows (cluster, marker, and overlay). Pass { skipMarker: true } to leave marker open.
	function closeAllInfoWindows(opts) {
		if (clusterInfoWindow) clusterInfoWindow.close();
		if (!opts?.skipMarker && markerInfoWindow) {
			markerInfoWindow.close();
			markerInfoWindow = null;
		}
		if (parent.overlayInfoWindow) parent.overlayInfoWindow.close();
	}

	// Find a named property from an item's property arrays in priority order
	function findItemProperty(item, propName, sources) {
		if (!sources) sources = ['customProperties', 'inheritedProperties', 'autoProperties'];
		for (const source of sources) {
			const props = item[source];
			if (!props) continue;
			const found = props.find(p => p.name === propName);
			if (found) return found;
		}
		return null;
	}

	// Find the location address and optional lat/lng from an item's properties
	function findLocationFromItem(item, locationProp) {
		const propSources = locationProp.match(/^auto\./)
			? ['autoProperties']
			: locationProp.match(/^system\./)
				? ['systemProperties']
				: ['customProperties', 'inheritedProperties'];

		let address = "";
		let alreadyGeocoded = false;
		let latProp = null;
		let lngProp = null;

		for (const source of propSources) {
			try {
				const props = item[source];
				if (!props) continue;
				const locationLower = locationProp.toLowerCase();
				const found = props.find(p => p.name.toLowerCase() === locationLower);
				if (!found) continue;
				address = found.value;
				if (!ignoreLatLongProps) {
					latProp = props.find(p => p.name.toLowerCase() === "latitude");
					lngProp = props.find(p => p.name.toLowerCase() === "longitude");
					if (latProp && lngProp) {
						let latVal = Number(latProp.value);
						let lngVal = Number(lngProp.value);
						if (latVal > -90 && latVal < 90 && lngVal > -180 && lngVal < 180) {
							alreadyGeocoded = true;
						}
					}
				}
				break;
			} catch(e) { continue; }
		}
		return { address, alreadyGeocoded, latProp, lngProp };
	}

	// Generate earthquake marker icon SVG with given opacity and color
	function buildEarthquakeIconUrl(iconOpacity, alertColor) {
		return `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' data-tooltip='Earthquake' viewBox='0 0 302.836 302.836'%3E%3Cpath d='M271 256a15 15 0 0 1-15 15 15 15 0 0 1-15-15 15 15 0 0 1 15-15 15 15 0 0 1 15 15z' style='opacity:${iconOpacity};fill:${alertColor};fill-opacity:${iconOpacity};stroke:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' transform='translate(-104.582 -104.582)'/%3E%3Cpath d='M256 139.29c-64.44 0-116.71 52.27-116.71 116.71S191.56 372.71 256 372.71 372.71 320.44 372.71 256 320.44 139.29 256 139.29zm0 3c62.818 0 113.71 50.892 113.71 113.71 0 62.818-50.892 113.71-113.71 113.71-62.818 0-113.71-50.892-113.71-113.71 0-62.818 50.892-113.71 113.71-113.71z' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:${iconOpacity};isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:${iconOpacity};fill:${alertColor};fill-opacity:.55474453;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:${iconOpacity};color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate' transform='translate(-104.582 -104.582)'/%3E%3Cpath d='M256 214.266c-22.996 0-41.734 18.738-41.734 41.734 0 22.996 18.738 41.734 41.734 41.734 22.996 0 41.734-18.738 41.734-41.734 0-22.996-18.738-41.734-41.734-41.734zm0 9c18.132 0 32.734 14.602 32.734 32.734S274.132 288.734 256 288.734 223.266 274.132 223.266 256s14.602-32.734 32.734-32.734z' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:${iconOpacity};isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:${iconOpacity};fill:${alertColor};fill-opacity:${iconOpacity};fill-rule:nonzero;stroke:${alertColor};stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:${iconOpacity};color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate' transform='translate(-104.582 -104.582)'/%3E%3Cpath d='M256 189.678c-36.594 0-66.322 29.728-66.322 66.322s29.728 66.322 66.322 66.322 66.322-29.728 66.322-66.322-29.728-66.322-66.322-66.322zm0 6c33.35 0 60.322 26.971 60.322 60.322 0 33.35-26.971 60.322-60.322 60.322-33.35 0-60.322-26.971-60.322-60.322 0-33.35 26.971-60.322 60.322-60.322z' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:${iconOpacity};isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:${iconOpacity};fill:${alertColor};fill-opacity:${iconOpacity};fill-rule:nonzero;stroke:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:${iconOpacity};color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate' transform='translate(-104.582 -104.582)'/%3E%3Cpath d='M256 166.164c-49.591 0-89.836 40.245-89.836 89.836S206.41 345.836 256 345.836 345.836 305.59 345.836 256 305.59 166.164 256 166.164zm0 4c47.43 0 85.836 38.406 85.836 85.836S303.43 341.836 256 341.836 170.164 303.43 170.164 256 208.57 170.164 256 170.164z' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:${iconOpacity};isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:${iconOpacity};fill:${alertColor};fill-opacity:${iconOpacity};fill-rule:nonzero;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:${iconOpacity};color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate' transform='translate(-104.582 -104.582)'/%3E%3Cpath d='M256 109.582c-80.853 0-146.418 65.565-146.418 146.418 0 80.853 65.565 146.418 146.418 146.418 80.853 0 146.418-65.565 146.418-146.418 0-80.853-65.565-146.418-146.418-146.418zm0 2c79.772 0 144.418 64.646 144.418 144.418S335.772 400.418 256 400.418 111.582 335.772 111.582 256 176.228 111.582 256 111.582z' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:${iconOpacity};isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:${iconOpacity};fill:${alertColor};fill-opacity:.35766422;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:${iconOpacity};color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate' transform='translate(-104.582 -104.582)'/%3E%3C/svg%3E`;
	}

	// Helper to create a styled map control button
	function createMapControlButton({ id, title, innerHTML, size = "40px", bgColor = "rgb(255 255 255 / 0%)", margin = "", onClick }) {
		const btn = document.createElement("button");
		btn.id = id;
		btn.style.backgroundColor = bgColor;
		btn.style.border = "0";
		btn.style.borderRadius = "3px";
		btn.style.cursor = "pointer";
		btn.style.fontSize = "x-large";
		btn.style.textAlign = "center";
		btn.style.height = size;
		btn.style.width = size;
		btn.style.verticalAlign = "middle";
		if (margin) btn.style.margin = margin;
		btn.title = title;
		btn.innerHTML = innerHTML;
		btn.type = "button";
		if (onClick) btn.addEventListener("click", onClick);
		return btn;
	}

	// Update polyline endpoints to follow clusters/markers
	function updatePolylineEndpoints() {
		if (!polylines.length) return;
		// console.debug("Updating " + polylines.length + " polyline endpoints");
		polylines.forEach(p => {
			if (!p || !p.polyline) return;
			const sourcePos = getMarkerOrClusterPosition(p.sourceDeviceID);
			const targetPos = getMarkerOrClusterPosition(p.targetDeviceID);
			if (sourcePos && targetPos) {
				p.polyline.setPath([sourcePos, targetPos]);
			}
		});
	}

	// Resolve a device's current visible position (cluster center or marker)
	function getMarkerOrClusterPosition(deviceID) {
		if (!deviceID) return null;
		// Use Map for O(1) lookup instead of array find
		const marker = markersByDeviceID.get(deviceID) || markersByDeviceID.get(String(deviceID));
		if (!marker) return null;

		// Check if clustering is enabled and marker is in a cluster
		if (clusterer) {
			// Get clusters - the MarkerClusterer library stores them in .clusters after rendering
			const clusters = clusterer.clusters || [];
			for (const cluster of clusters) {
				// Each cluster has a .markers array and a .marker (the rendered cluster marker)
				if (cluster.markers && cluster.markers.includes(marker)) {
					// Marker is in this cluster - get the cluster's rendered position
					if (cluster.marker && cluster.marker.position) {
						// The cluster's AdvancedMarkerElement position
						const pos = cluster.marker.position;
						if (pos instanceof google.maps.LatLng) return pos;
						if (typeof pos.lat === 'number' && typeof pos.lng === 'number') {
							return new google.maps.LatLng(pos.lat, pos.lng);
						}
					}
					// Fallback: calculate center from clustered markers
					const pts = cluster.markers.map(m => {
						if (!m.position) return null;
						const p = m.position;
						if (p instanceof google.maps.LatLng) return p;
						if (typeof p.lat === 'number' && typeof p.lng === 'number') {
							return new google.maps.LatLng(p.lat, p.lng);
						}
						return null;
					}).filter(Boolean);
					if (pts.length) {
						const avgLat = pts.reduce((s, p) => s + p.lat(), 0) / pts.length;
						const avgLng = pts.reduce((s, p) => s + p.lng(), 0) / pts.length;
						return new google.maps.LatLng(avgLat, avgLng);
					}
				}
			}
		}

		// Marker is not clustered - return its position
		if (marker.position) {
			const pos = marker.position;
			if (pos instanceof google.maps.LatLng) return pos;
			if (typeof pos.lat === 'number' && typeof pos.lng === 'number') {
				return new google.maps.LatLng(pos.lat, pos.lng);
			}
		}
		return null;
	}

	// For caching marker latitude/longitude information between refreshes...
	const __LMBMW_CACHE_KEY = "lm_bmw.cachedAddresses.v1";
	function loadCache() {
		try {
			const obj = JSON.parse(localStorage.getItem(__LMBMW_CACHE_KEY));
			return (obj && typeof obj === "object") ? obj : {};
		} catch (e) { return {}; }
	}
	function saveCache() {
		try { localStorage.setItem(__LMBMW_CACHE_KEY, JSON.stringify(cachedAddresses)); } catch (e) {}
	}
	// Debounced version to avoid excessive localStorage writes during batch operations
	const debouncedSaveCache = debounce(saveCache, 1000);
	function clearCache() {
		try {
			localStorage.removeItem(__LMBMW_CACHE_KEY);
			clearMapOptionsCookie();
			// Display our progress to the user (if status area is available)...
			if (!_dom.refreshStatusArea) {
				_dom.refreshStatusArea = document.getElementById("refreshStatusArea");
			}
			if (_dom.refreshStatusArea) {
				_dom.refreshStatusArea.innerHTML = "Local cache and saved map options were cleared";
				_dom.refreshStatusArea.style.display = "flex";
				// Add timer to remove message after 2 seconds...
				setTimeout(() => {
					_dom.refreshStatusArea.innerHTML = "";
					_dom.refreshStatusArea.style.display = "none";
				}, 2000);
			}
		} catch (e) {}
	}
	let cachedAddresses = loadCache();

	// For holding our LM group data...
	let groupData = [];
	// For timing our refreshes...
	let refreshStartTime = new Date();
	// For tracking when to do a full refresh...
	let pollCount = 0;
	let fullRefresh = true;

	// For holding our connection status data...
	let lineData = {};

	// Pre-populate the group path filter field...
	_dom.customGroupFilterField.value = groupPathFilter;

	applyPersistedMapOptionsFromCookie();
	const debouncedSaveMapOptionsCookie = debounce(saveMapOptionsToCookie, 300);
	_dom.mapOptionsArea.addEventListener("change", debouncedSaveMapOptionsCookie);
	_dom.customGroupFilterField.addEventListener("blur", saveMapOptionsToCookie);
	_dom.customGroupFilterField.addEventListener("change", saveMapOptionsToCookie);

	// Set toolbar icons...
	_dom.showClearedLabel.innerHTML = clearedIcon;
	_dom.showWarningsLabel.innerHTML = warningIcon;
	_dom.showErrorsLabel.innerHTML = errorIcon;
	_dom.showCriticalsLabel.innerHTML = criticalIcon;
	_dom.showSDTLabel.innerHTML = sdtIcon;

	// Placeholder for marker cluster info...
	let clusterInfoWindow = null;
	let markerInfoWindow = null;

	function applyMarkerStyleFromSelect() {
		const v = _dom.markerStyleSelect.value;
		markerStyle = v === "circles" ? "circles" : "pins";
		for (const m of markers) {
			if (m.content && m.content.classList) {
				m.content.classList.toggle("dot-style", markerStyle === "circles");
			}
		}
		if (clusterer && typeof clusterer === "object") {
			clusterer.render();
		}
		if (markerInfoWindow) {
			markerInfoWindow.close();
			markerInfoWindow = null;
		}
		debouncedSaveMapOptionsCookie();
	}

	// Track map initialization state...
	let mapInitialized = false;
	let _mapInitializing = false;
	let initAttempts = 0;
	const MAX_INIT_ATTEMPTS = 10;

	// Robust map initialization wrapper that handles timing issues in dashboard widgets...
	async function ensureMapInitialized() {
		if (mapInitialized || _mapInitializing) return;
		_mapInitializing = true;
		
		initAttempts++;
		console.log(`Map initialization attempt ${initAttempts}...`);
		
		try {
			// Check if Google Maps API is available...
			if (typeof google === 'undefined' || !google.maps || typeof google.maps.importLibrary !== 'function') {
				throw new Error('Google Maps API not yet available');
			}
			
			// Check if map container exists and has dimensions...
			const mapContainer = document.getElementById('googleMap');
			if (!mapContainer) {
				throw new Error('Map container element not found');
			}
			
			// Get computed dimensions - container may exist but have no size yet...
			const rect = mapContainer.getBoundingClientRect();
			if (rect.width === 0 || rect.height === 0) {
				throw new Error('Map container has no dimensions yet');
			}
			
			// All checks passed - initialize the map...
			await initMap();
			mapInitialized = true;
			if (typeof _visibilityObserver !== 'undefined') _visibilityObserver.disconnect();
			if (typeof _focusHandler !== 'undefined') window.removeEventListener('focus', _focusHandler);
			console.log('Map initialized successfully');
			
		} catch (error) {
			_mapInitializing = false;
			console.warn(`Map init attempt ${initAttempts} failed:`, error.message);
			
			if (initAttempts < MAX_INIT_ATTEMPTS) {
				// Exponential backoff: 100ms, 200ms, 400ms, etc. up to 2 seconds...
				const delay = Math.min(100 * Math.pow(2, initAttempts - 1), 2000);
				console.log(`Retrying in ${delay}ms...`);
				setTimeout(ensureMapInitialized, delay);
			} else {
				console.error('Max initialization attempts reached. Map failed to initialize.');
			}
		}
	}
	
	// Start initialization when DOM is ready...
	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', ensureMapInitialized);
	} else {
		// DOM already ready - use requestAnimationFrame to ensure rendering is complete...
		requestAnimationFrame(() => {
			requestAnimationFrame(ensureMapInitialized);
		});
	}
	
	// Also handle visibility changes (widget may be in a hidden tab initially)...
	let _visibilityObserver;
	const mapContainer = document.getElementById('googleMap');
	if (mapContainer && typeof IntersectionObserver !== 'undefined') {
		_visibilityObserver = new IntersectionObserver((entries) => {
			entries.forEach(entry => {
				if (entry.isIntersecting && !mapInitialized) {
					console.log('Map container became visible, attempting initialization...');
					ensureMapInitialized();
				}
			});
		}, { threshold: 0.1 });
		_visibilityObserver.observe(mapContainer);
	}
	
	// Fallback: Also try when window is focused (handles tab switching)...
	const _focusHandler = () => {
		if (!mapInitialized) {
			console.log('Window focused, checking map initialization...');
			setTimeout(ensureMapInitialized, 100);
		}
	};
	window.addEventListener('focus', _focusHandler);


	// ----- FUNCTIONS

	// Function to create our map...
	async function initMap() {
		// Load some libraries needed by Google Maps...
		const { Map, RenderingType, InfoWindow } = await google.maps.importLibrary("maps");
		const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
		const {ColorScheme} = await google.maps.importLibrary("core");

		// CustomInfoWindow class - allows positioning InfoWindows to left/right/top/bottom of a point
		// Defined here after Google Maps API is loaded so google.maps.OverlayView is available
		window.CustomInfoWindow = class extends google.maps.OverlayView {
			constructor(options = {}) {
				super();
				this.position = options.position || null;
				this.content = options.content || '';
				this.anchor = options.anchor || 'right'; // 'top', 'bottom', 'left', 'right'
				this.offset = options.offset || 20; // pixels from the point
				this.clickThrough = options.clickThrough || false;
				this.div = null;
				this.isOpen = false;
			}

			onAdd() {
				this.div = document.createElement('div');
				this.div.className = 'custom-info-window';
				this.div.style.cssText = `
					position: absolute;
					background: white;
					border-radius: 8px;
					box-shadow: 0 2px 10px rgba(0,0,0,0.3);
					padding: 12px 12px 12px 12px;
					min-width: 150px;
					max-width: 400px;
					z-index: 1000;
					font-family: Roboto, Arial, sans-serif;
					font-size: 13px;
					line-height: 1.4;
				`;
				
				if (this.clickThrough) {
					this.div.style.pointerEvents = 'none';
				} else {
					this.div.addEventListener('click', (e) => e.stopPropagation());
					this.div.addEventListener('mousedown', (e) => e.stopPropagation());
					this.div.addEventListener('mouseup', (e) => e.stopPropagation());
					this.div.addEventListener('dblclick', (e) => e.stopPropagation());
					this.div.addEventListener('wheel', (e) => {
						let el = e.target;
						while (el && el !== this.div) {
							if (el.scrollHeight > el.clientHeight) {
								e.stopPropagation();
								return;
							}
							el = el.parentElement;
						}
					});
				}

				// Add close button
				const closeBtn = document.createElement('div');
				closeBtn.innerHTML = '×';
				closeBtn.style.cssText = `
					position: absolute;
					top: 5px;
					right: 10px;
					cursor: pointer;
					font-size: 20px;
					color: #666;
					font-weight: bold;
					line-height: 1;
					z-index: 1001;
				`;
				closeBtn.onclick = (e) => {
					e.stopPropagation();
					this.close();
				};
				closeBtn.onmouseover = () => closeBtn.style.color = '#333';
				closeBtn.onmouseout = () => closeBtn.style.color = '#666';
				this.div.appendChild(closeBtn);
				
				// Add content container
				const contentDiv = document.createElement('div');
				contentDiv.className = 'custom-info-content';
				contentDiv.innerHTML = this.content;
				contentDiv.style.marginRight = '15px'; // Space for close button
				this.div.appendChild(contentDiv);
				
				// Add arrow/pointer
				this.arrow = document.createElement('div');
				this.arrow.style.cssText = `
					position: absolute;
					width: 0;
					height: 0;
					border: 10px solid transparent;
				`;
				this.updateArrowStyle();
				this.div.appendChild(this.arrow);
				
				this.getPanes().floatPane.appendChild(this.div);
			}

			updateArrowStyle() {
				if (!this.arrow) return;
				
				// Reset arrow styles
				this.arrow.style.borderTopColor = 'transparent';
				this.arrow.style.borderBottomColor = 'transparent';
				this.arrow.style.borderLeftColor = 'transparent';
				this.arrow.style.borderRightColor = 'transparent';
				this.arrow.style.top = 'auto';
				this.arrow.style.bottom = 'auto';
				this.arrow.style.left = 'auto';
				this.arrow.style.right = 'auto';
				this.arrow.style.transform = '';
				
				switch(this.anchor) {
					case 'left': // InfoWindow is to the LEFT of point, arrow points RIGHT
						this.arrow.style.borderLeftColor = 'white';
						this.arrow.style.right = '-20px';
						this.arrow.style.top = '50%';
						this.arrow.style.transform = 'translateY(-50%)';
						break;
					case 'right': // InfoWindow is to the RIGHT of point, arrow points LEFT
						this.arrow.style.borderRightColor = 'white';
						this.arrow.style.left = '-20px';
						this.arrow.style.top = '50%';
						this.arrow.style.transform = 'translateY(-50%)';
						break;
					case 'bottom': // InfoWindow is BELOW point, arrow points UP
						this.arrow.style.borderBottomColor = 'white';
						this.arrow.style.top = '-20px';
						this.arrow.style.left = '50%';
						this.arrow.style.transform = 'translateX(-50%)';
						break;
					case 'top': // InfoWindow is ABOVE point (default Google behavior), arrow points DOWN
					default:
						this.arrow.style.borderTopColor = 'white';
						this.arrow.style.bottom = '-20px';
						this.arrow.style.left = '50%';
						this.arrow.style.transform = 'translateX(-50%)';
						break;
				}
			}

			draw() {
				if (!this.div || !this.position) return;
				
				const projection = this.getProjection();
				if (!projection) return;
				
				const pos = projection.fromLatLngToDivPixel(this.position);
				if (!pos) return;

				// Get actual dimensions after content is rendered
				const width = this.div.offsetWidth;
				const height = this.div.offsetHeight;

				// Calculate and apply position based on anchor
				switch(this.anchor) {
					case 'left': // Position to the LEFT of the point
						this.div.style.left = (pos.x - width - this.offset) + 'px';
						this.div.style.top = (pos.y - height / 2) + 'px';
						break;
					case 'right': // Position to the RIGHT of the point
						this.div.style.left = (pos.x + this.offset) + 'px';
						this.div.style.top = (pos.y - height / 2) + 'px';
						break;
					case 'bottom': // Position BELOW the point
						this.div.style.left = (pos.x - width / 2) + 'px';
						this.div.style.top = (pos.y + this.offset) + 'px';
						break;
					case 'top': // Position ABOVE the point (like default InfoWindow)
					default:
						this.div.style.left = (pos.x - width / 2) + 'px';
						this.div.style.top = (pos.y - height - this.offset) + 'px';
						break;
				}
			}

			onRemove() {
				if (this.div && this.div.parentNode) {
					this.div.parentNode.removeChild(this.div);
					this.div = null;
				}
				this.isOpen = false;
			}

			setPosition(latLng) {
				this.position = latLng;
				this.draw();
			}

			setContent(content) {
				this.content = content;
				if (this.div) {
					const contentDiv = this.div.querySelector('.custom-info-content');
					if (contentDiv) contentDiv.innerHTML = content;
					this.draw(); // Redraw to adjust for new content size
				}
			}

			setAnchor(anchor) {
				this.anchor = anchor;
				this.updateArrowStyle();
				this.draw();
			}

			open(map) {
				this.setMap(map);
				this.isOpen = true;
				// Delay pan check to ensure content is fully rendered and dimensions are calculated
				requestAnimationFrame(() => {
					requestAnimationFrame(() => {
						this.autoPan();
					});
				});
			}

			autoPan() {
				if (!this.div || !this.position || !this.getMap()) return;
				
				const map = this.getMap();
				const mapDiv = map.getDiv();
				
				// Get the actual bounding rectangles to compare screen positions
				const mapRect = mapDiv.getBoundingClientRect();
				const infoRect = this.div.getBoundingClientRect();
				
				let panX = 0;
				let panY = 0;
				const padding = 10; // Small padding from edges after panning

				// Check if InfoWindow extends past right edge of map
				if (infoRect.right > mapRect.right) {
					panX = (infoRect.right - mapRect.right) + padding;
				}
				// Check if InfoWindow extends past left edge of map
				else if (infoRect.left < mapRect.left) {
					panX = (infoRect.left - mapRect.left) - padding;
				}
				
				// Check if InfoWindow extends past bottom edge of map
				if (infoRect.bottom > mapRect.bottom) {
					panY = (infoRect.bottom - mapRect.bottom) + padding;
				}
				// Check if InfoWindow extends past top edge of map
				else if (infoRect.top < mapRect.top) {
					panY = (infoRect.top - mapRect.top) - padding;
				}

				// Only pan if the InfoWindow actually extends outside the viewport
				if (panX !== 0 || panY !== 0) {
					map.panBy(panX, panY);
				}
			}

			close() {
				this.setMap(null);
				this.isOpen = false;
			}
		}

		// SatelliteLightOverlay class - creates a semi-transparent white overlay below markers to lighten satellite imagery
		window.SatelliteLightOverlay = class extends google.maps.OverlayView {
			constructor() {
				super();
				this.div = null;
			}

			onAdd() {
				this.div = document.createElement('div');
				this.div.style.position = 'absolute';
				this.div.style.backgroundColor = 'rgba(255, 255, 255, 0.25)';
				this.div.style.pointerEvents = 'none';
				// Add to the mapPane (lowest pane, below markers and overlays)
				const panes = this.getPanes();
				panes.mapPane.appendChild(this.div);
			}

			draw() {
				if (!this.div) return;
				const projection = this.getProjection();
				if (!projection) return;
				const bounds = this.getMap().getBounds();
				if (!bounds) return;

				const sw = projection.fromLatLngToDivPixel(bounds.getSouthWest());
				const ne = projection.fromLatLngToDivPixel(bounds.getNorthEast());

				// Extend beyond visible bounds to cover during panning
				const padding = 1000;
				this.div.style.left = (sw.x - padding) + 'px';
				this.div.style.top = (ne.y - padding) + 'px';
				this.div.style.width = (ne.x - sw.x + padding * 2) + 'px';
				this.div.style.height = (sw.y - ne.y + padding * 2) + 'px';
			}

			onRemove() {
				if (this.div && this.div.parentNode) {
					this.div.parentNode.removeChild(this.div);
					this.div = null;
				}
			}
		}

		// Create our Google Map...
		map = new google.maps.Map(document.getElementById("googleMap"), {
			zoom: 3,
			center: { lat: 0, lng: 0 },
			mapId: "DEMO_MAP_ID",
			// colorScheme: ColorScheme.DARK,
			colorScheme: ColorScheme.LIGHT,
			zoomControl: true,
			cameraControl: false,
			mapTypeControl: false,
			// scaleControl: boolean,
			streetViewControl: false,
			rotateControl: false,
			fullscreenControl: true,
			tilt: mapTilt,
			heading: mapHeading,
			gestureHandling: mapGestureHandling,
			renderingType: RenderingType.VECTOR,
			isFractionalZoomEnabled: true,
			minZoom: 2,
		});

		// Redraw polylines after zoom/pan/drag completes...
		map.addListener("idle", () => updatePolylineEndpoints());

		// Vector maps are nicer but sometimes don't load right away. Plus they're mainly useful if tilt controls are enabled, so use the normal raster map by default...
		// if (showMapTiltControls) {
		// 	map.setRenderingType(RenderingType.VECTOR);
		// };

		// Add some custom controls to the map...
		const weatherControlDiv = document.createElement("div");
		// Create a button to the map for toggling visibility of the options bar...
		const weatherControls = createWeatherToggleControl(map);
		weatherControlDiv.appendChild(weatherControls);

		// Create a div to hold our refresh & zoom reset buttons...
		const weatherControlButtonDiv = document.createElement("div");
		weatherControlButtonDiv.style.display = "flex";
		weatherControlButtonDiv.style.flexDirection = "column";
		weatherControlButtonDiv.style.backgroundColor = "rgb(255 255 255)";
		weatherControlButtonDiv.style.border = "0";
		weatherControlButtonDiv.style.borderRadius = "3px";
		weatherControlButtonDiv.style.boxShadow = "0 1px 4px rgba(0,0,0,0.3)";
		weatherControlButtonDiv.style.width = "40px";
		weatherControlButtonDiv.style.height = "81px";
		weatherControlButtonDiv.style.margin = "0 10px";
		// Create a button to force-refresh the map data...
		const weatherRefreshControl = createWeatherRefreshControl(map);
		weatherControlButtonDiv.appendChild(weatherRefreshControl);
		const weatherControlDivider = document.createElement("div");
		// Create a divider between the two buttons...
		weatherControlDivider.innerHTML = '<div style="position: relative; overflow: hidden; width: 30px; height: 1px; margin: 0px 5px; background-color: rgb(230, 230, 230); top: 0px;"></div>';
		weatherControlButtonDiv.appendChild(weatherControlDivider);
		// Create a button to reset the zoom on the map...
		const mapZoomResetControl = createZoomResetControl(map);
		weatherControlButtonDiv.appendChild(mapZoomResetControl);
		// Add our button div to our custom map controls...
		weatherControlDiv.appendChild(weatherControlButtonDiv);
		// Attach our controls to the map...
		map.controls[google.maps.ControlPosition.TOP_LEFT].push(weatherControlDiv);

		// Optionally create a div to hold our map tilt & heading buttons...
		if (showMapTiltControls) {
			const mapControlButtonDiv = document.createElement("div");
			mapControlButtonDiv.style.display = "flex";
			mapControlButtonDiv.style.flexDirection = "column";
			mapControlButtonDiv.style.backgroundColor = "rgb(255 255 255)";
			mapControlButtonDiv.style.border = "0";
			mapControlButtonDiv.style.borderRadius = "20px";
			mapControlButtonDiv.style.boxShadow = "0 1px 3px rgba(0,0,0,0.3)";
			mapControlButtonDiv.style.width = "40px";
			mapControlButtonDiv.style.margin = "0 10px";
			mapControlButtonDiv.style.alignItems = "center";
			mapControlButtonDiv.style.padding = "5px 0";
			// Create a button to tilt the map forward...
			const mapRotateForwardControl = createRotateForwardControl(map);
			mapControlButtonDiv.appendChild(mapRotateForwardControl);
			// Create a button to tilt the map backward...
			const mapRotateBackControl = createRotateBackControl(map);
			mapControlButtonDiv.appendChild(mapRotateBackControl);
			// Create a button to rotate the map right...
			const mapRotateRightControl = createRotateRightControl(map);
			mapControlButtonDiv.appendChild(mapRotateRightControl);
			// Create a button to rotate the map left...
			const mapRotateLeftControl = createRotateLeftControl(map);
			mapControlButtonDiv.appendChild(mapRotateLeftControl);
			// Attach our controls to the map...
			map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(mapControlButtonDiv);
		}

		// Create a button to toggle the sidebar...
		const sidebarToggle = createSidebarToggleControl(map);
		map.controls[google.maps.ControlPosition.INLINE_END_BLOCK_START].push(sidebarToggle);
		initSidebarResize();

		// Add an area to display when we're updating...
		const updateAreaDiv = await createUpdateArea(map);

		// *** MAP THEME ***
		// Set our map theme (can be set via default at beginning of this script or via a "MapStyle" dashboard token)...
		if (mapStyle == "satellite") {
			// Use Google Maps built-in satellite imagery...
			map.setMapTypeId("satellite");
			weatherOpacity = satelliteWeatherOpacity;
		} else if (mapStyle == "satellite-light") {
			// Use Google Maps built-in satellite imagery with lightened appearance for better icon/overlay visibility...
			map.setMapTypeId("satellite");
			const satelliteLightOverlay = new SatelliteLightOverlay();
			satelliteLightOverlay.setMap(map);
			weatherOpacity = satelliteWeatherOpacity;
		} else {
			const styleData = mapStyles[mapStyle] || mapStyles.silver;
			const styledMapType = new google.maps.StyledMapType(styleData);
			map.mapTypes.set("customMapStyle", styledMapType);
			map.setMapTypeId("customMapStyle");
		}

		// Toggle visibility of our weather options...
		enableWeather();

		// Toggle hiding the options bar if set as the default...
		if (hideMapOptionsByDefault) {
			document.getElementById("optionsBar").classList.remove("optionsVisible");
			document.getElementById("optionsBar").classList.add("optionsHidden");
		}

		// Load our LogicMonitor data only after we know our update area has been created...
		waitForElm('#refreshStatusArea').then((elm) => {
			// console.log('Element is ready');
			refreshGroupData();
		});

		// Refresh the map data at regular intervals (using the 'statusUpdateIntervalMinutes' variable set near the top of this script)...
		if (!developmentFlag) {
			clearInterval(mapDataRefresher);
			mapDataRefresher = setInterval(function() {
				refreshGroupData(timedRefresh = true);
				console.log("Map data refreshed.");
			}, statusUpdateIntervalMinutes*1000*60);
		}
	}

	// Function for creating & styling the map button for toggling the options bar...
	function createWeatherToggleControl(map) {
		const weatherToggle = document.createElement("button");

		weatherToggle.id = "weatherControlToggle";
		weatherToggle.style.backgroundColor = "rgb(255 255 255)";
		weatherToggle.style.border = "0";
		weatherToggle.style.borderRadius = "3px";
		weatherToggle.style.boxShadow = "0 1px 4px rgba(0,0,0,0.3)";
		// weatherToggle.style.boxShadow = "0 2px 6px rgba(0,0,0,0.3)";
		weatherToggle.style.cursor = "pointer";
		weatherToggle.style.fontSize = "x-large";
		weatherToggle.style.textAlign = "center";
		weatherToggle.style.margin = "10px";
		weatherToggle.style.height = "40px";
		weatherToggle.style.width = "40px";
		weatherToggle.style.verticalAlign = "middle";
		// weatherToggle.innerHTML = 'Toggle Controls';
		weatherToggle.title = "Toggle visibility of the map controls";
		if (hideMapOptionsByDefault) {
			weatherToggle.innerHTML = optionsToggleHiddenIcon;
		} else {
			weatherToggle.innerHTML = optionsToggleVisibleIcon;
		}
		weatherToggle.type = "button";

		weatherToggle.addEventListener("click", () => {
			const optionsBar = document.getElementById("optionsBar");
			if (optionsBar.classList.contains("optionsHidden")) {
				optionsBar.classList.remove("optionsHidden");
				optionsBar.classList.add("optionsVisible");
				weatherToggle.innerHTML = optionsToggleVisibleIcon;
			} else {
				optionsBar.classList.remove("optionsVisible");
				optionsBar.classList.add("optionsHidden");
				weatherToggle.innerHTML = optionsToggleHiddenIcon;
			}
		});

		return weatherToggle;
	}

	function createWeatherRefreshControl(map) {
		return createMapControlButton({
			id: "weatherRefreshButton",
			title: "Force refresh the map data",
			innerHTML: '<svg viewBox="-0.5 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.1998 10.8799L3.9998 14.0799L0.799805 10.8799" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17.72 6.77007C16.6086 5.63347 15.1839 4.85371 13.6275 4.53032C12.0711 4.20693 10.4536 4.35459 8.98145 4.95439C7.5093 5.5542 6.24924 6.57899 5.362 7.898C4.47476 9.21701 4.0006 10.7703 4 12.3599V14.0901" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.7998 13.96L19.9998 10.75L23.1998 13.96" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6.28027 18.0801C7.39163 19.2167 8.8164 19.9962 10.3728 20.3196C11.9292 20.643 13.5467 20.4956 15.0188 19.8958C16.491 19.2959 17.751 18.2712 18.6383 16.9521C19.5255 15.6331 19.9997 14.0796 20.0003 12.49V10.76" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
			onClick: refreshGroupData,
		});
	}

	function createZoomResetControl(map) {
		return createMapControlButton({
			id: "weatherZoomResetButton",
			title: "Reset map zoom",
			innerHTML: '<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="25px" height="25px" viewBox="0 0 400 400.00001" id="svg2" version="1.1" inkscape:version="0.91 r13725" sodipodi:docname="minimize.svg"> <defs id="defs4" /> <g transform="translate(0,-652.36216)"> <path style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" d="M 17.6035,652.36212 0,670.05352 l 108.5469,109.0918 -84.0235,0 0,25.0195 126.5235,0 0,-127.1563 -24.8965,0 0,84.4434 -108.5469,-109.0898 z m 364.793,0 -108.5469,109.0898 0,-84.4434 -24.8965,0 0,127.1563 126.5235,0 0,-25.0195 -84.0235,0 L 400,670.05352 382.3965,652.36212 Z M 24.5234,900.5593 l 0,25.0196 84.0235,0 L 0,1034.6708 l 17.6035,17.6914 108.5469,-109.09 0,84.4435 24.8965,0 0,-127.1564 -126.5235,0 z m 224.4297,0 0,127.1564 24.8965,0 0,-84.4435 108.5469,109.09 L 400,1034.6708 291.4531,925.5789 l 84.0235,0 0,-25.0196 -126.5235,0 z" id="minimize"> <title id="title23704">Reset map zoom</title></path></g></svg>',
			onClick: resetZoom,
		});
	}

	function createSidebarToggleControl(map) {
		const btn = document.createElement("button");
		btn.id = "sidebarToggleButton";
		btn.style.backgroundColor = "rgb(255 255 255)";
		btn.style.border = "0";
		btn.style.borderRadius = "3px";
		btn.style.boxShadow = "0 1px 4px rgba(0,0,0,0.3)";
		btn.style.cursor = "pointer";
		btn.style.textAlign = "center";
		btn.style.margin = "0 10px 10px 10px";
		btn.style.height = "40px";
		btn.style.width = "40px";
		btn.style.verticalAlign = "middle";
		btn.title = "Toggle sidebar";
		btn.type = "button";
		const sidebarStartsVisible = showMapSidebarByDefault;
		btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="width: 25px; height: 25px; transform: rotate(' + (sidebarStartsVisible ? '90' : '-90') + 'deg);"><rect x="10" y="42" width="428" height="428" rx="54" ry="54" fill="none" stroke="#000000" stroke-width="20"/><path fill="#000000" d="M241.6 175.7C237.1 170.8 230.7 168 224 168S210.9 170.8 206.4 175.7l-96 104c-6.469 7-8.188 17.19-4.375 25.91C109.8 314.3 118.5 320 127.1 320h192c9.531 0 18.16-5.656 22-14.38c3.813-8.719 2.094-18.91-4.375-25.91L241.6 175.7z"/></svg>';

		if (!sidebarStartsVisible) {
			const sidebar = _dom.sidebarArea;
			const mapEl = document.getElementById("googleMap");
			const handle = _dom.sidebarResizeHandle;
			if (sidebar) {
				sidebar.classList.add("sidebar-hidden");
				mapEl.classList.add("sidebar-hidden");
				if (handle) handle.classList.add("sidebar-hidden");
			}
		}

		btn.addEventListener("click", () => {
			const sidebar = _dom.sidebarArea;
			const mapEl = document.getElementById("googleMap");
			const handle = _dom.sidebarResizeHandle;
			if (!sidebar) return;
			const svg = btn.querySelector("svg");
			if (sidebar.classList.contains("sidebar-hidden")) {
				sidebar.classList.remove("sidebar-hidden");
				if (sidebarDefaultWidth) sidebar.style.width = sidebarDefaultWidth + "px";
				mapEl.classList.remove("sidebar-hidden");
				if (handle) handle.classList.remove("sidebar-hidden");
				svg.style.transform = "rotate(90deg)";
			} else {
				sidebar.style.width = "";
				sidebar.classList.add("sidebar-hidden");
				mapEl.classList.add("sidebar-hidden");
				if (handle) handle.classList.add("sidebar-hidden");
				svg.style.transform = "rotate(-90deg)";
			}
		});

		return btn;
	}

	// Sidebar resize drag logic
	function initSidebarResize() {
		const handle = _dom.sidebarResizeHandle;
		const sidebar = _dom.sidebarArea;
		const container = document.getElementById("mapContainer");
		if (!handle || !sidebar || !container) return;

		let startX, startWidth;

		handle.addEventListener("mousedown", (e) => {
			e.preventDefault();
			startX = e.clientX;
			startWidth = sidebar.getBoundingClientRect().width;
			handle.classList.add("dragging");
			document.body.style.cursor = "col-resize";
			document.body.style.userSelect = "none";
			document.addEventListener("mousemove", onMouseMove);
			document.addEventListener("mouseup", onMouseUp);
		});

		function onMouseMove(e) {
			const delta = startX - e.clientX;
			const newWidth = Math.max(220, Math.min(startWidth + delta, container.getBoundingClientRect().width * 0.4));
			sidebar.style.width = newWidth + "px";
		}

		function onMouseUp() {
			handle.classList.remove("dragging");
			document.body.style.cursor = "";
			document.body.style.userSelect = "";
			sidebarDefaultWidth = sidebar.getBoundingClientRect().width;
			document.removeEventListener("mousemove", onMouseMove);
			document.removeEventListener("mouseup", onMouseUp);
		}
	}

	function createRotateRightControl(map) {
		return createMapControlButton({
			id: "mapRotateRightButton",
			title: "Rotate Map Right",
			innerHTML: '<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> <path id="Path" fill="#000000" stroke="none" d="M 30.322001 21.322001 C 30.228001 21.277 30.118999 21.250999 30.003 21.250999 C 29.705 21.250999 29.448 21.423 29.323999 21.673 L 29.322001 21.677 C 27.145 26.191999 22.604 29.250999 17.348 29.250999 C 10.03 29.250999 4.097 23.318001 4.097 16 C 4.097 8.681999 10.029 2.75 17.347 2.749001 L 17.347 2.749001 C 17.358999 2.749001 17.374001 2.749001 17.389 2.749001 C 21.684999 2.749001 25.499001 4.813 27.893 8.003 L 27.917 8.036999 L 22.274 8.036999 C 21.860001 8.036999 21.524 8.373001 21.524 8.786999 C 21.524 9.201 21.860001 9.536999 22.274 9.536999 L 22.274 9.536999 L 29.346001 9.536999 C 29.365 9.536999 29.381001 9.527 29.4 9.526001 C 29.507 9.512001 29.603001 9.483 29.693001 9.442001 L 29.687 9.445 C 29.702 9.437 29.718 9.437 29.733 9.429001 C 29.754999 9.410999 29.775 9.393 29.792999 9.374001 L 29.792999 9.374001 C 29.837 9.341 29.875999 9.306 29.910999 9.265999 L 29.912001 9.264999 C 29.938999 9.232 29.965 9.195 29.986 9.156 L 29.988001 9.152 C 30.038 9.071999 30.07 8.977001 30.079 8.875 L 30.079 8.873001 C 30.086 8.848999 30.091999 8.82 30.096001 8.790001 L 30.096001 8.785999 L 30.096001 1.715 C 30.096001 1.301001 29.76 0.965 29.346001 0.965 C 28.931999 0.965 28.596001 1.301001 28.596001 1.715 L 28.596001 1.715 L 28.596001 6.485001 C 25.898001 3.275 21.881001 1.247999 17.391001 1.247999 C 17.375 1.247999 17.358999 1.247999 17.344 1.247999 L 17.346001 1.247999 C 9.201 1.25 2.6 7.853001 2.6 15.998001 C 2.6 24.143999 9.204 30.747999 17.35 30.747999 C 23.198999 30.747999 28.253 27.344 30.638 22.408001 L 30.676001 22.32 C 30.722 22.226 30.747999 22.115 30.747999 21.997999 C 30.747999 21.701 30.575001 21.444 30.325001 21.322001 L 30.320999 21.32 Z"/> </svg>',
			size: "30px",
			onClick: function() { adjustMap("rotate", -5); },
		});
	}

	function createRotateLeftControl(map) {
		return createMapControlButton({
			id: "mapRotateLeftButton",
			title: "Rotate Map Left",
			innerHTML: '<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> <path id="Path" fill="#000000" stroke="none" d="M 16 1.25 C 15.987 1.25 15.971 1.25 15.956 1.25 C 11.466 1.25 7.448 3.276001 4.769 6.464001 L 4.751 6.486 L 4.751 1.716999 C 4.751 1.302999 4.415 0.966999 4.001 0.966999 C 3.587 0.966999 3.251 1.302999 3.251 1.716999 L 3.251 1.716999 L 3.251 8.788 C 3.255 8.818001 3.261 8.845001 3.268 8.869999 L 3.267 8.865 C 3.275 8.970001 3.307 9.067001 3.358 9.15 L 3.356 9.146999 C 3.381 9.193001 3.408 9.232 3.438 9.269001 L 3.437 9.268 C 3.471 9.306 3.508 9.34 3.548 9.369999 L 3.55 9.371 C 3.57 9.390999 3.59 9.41 3.612 9.428001 L 3.613 9.429001 C 3.628 9.438 3.645 9.438 3.661 9.445999 C 3.703 9.466999 3.751 9.485001 3.802 9.497 L 3.807 9.498001 C 3.847 9.511 3.894 9.521 3.942 9.526001 L 3.945 9.526001 C 3.964 9.527 3.981 9.536999 4.001 9.536999 L 11.072 9.536999 C 11.486 9.536999 11.822 9.201 11.822 8.786999 C 11.822 8.373001 11.486 8.036999 11.072 8.036999 L 11.072 8.036999 L 5.429 8.036999 C 7.848 4.813 11.662 2.749001 15.958 2.749001 C 15.973 2.749001 15.988 2.749001 16.003 2.749001 L 16.000999 2.749001 C 23.318001 2.750999 29.247999 8.681999 29.247999 15.999001 C 29.247999 23.316 23.316 29.249001 15.998 29.249001 C 10.743 29.249001 6.203 26.190001 4.061 21.756001 L 4.027 21.677 C 3.903 21.423 3.647 21.250999 3.35 21.250999 C 2.936 21.250999 2.6 21.587 2.6 22.000999 C 2.6 22.117001 2.626 22.226999 2.674 22.325001 L 2.672 22.32 C 5.095 27.344999 10.15 30.750999 16.000999 30.750999 C 24.148001 30.750999 30.752001 24.146999 30.752001 16 C 30.752001 7.853001 24.148001 1.249001 16.002001 1.249001 L 16.002001 1.249001 Z"/> </svg>',
			size: "30px",
			onClick: function() { adjustMap("rotate", 5); },
		});
	}

	function createRotateForwardControl(map) {
		return createMapControlButton({
			id: "mapRotateForwardButton",
			title: "Rotate Map Up",
			innerHTML: '<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg"> <g id="Group"> <path id="Path" fill="#000000" stroke="#000000" stroke-width="2" d="M 55.341 31.229 C 54.884998 30.773998 54.144001 30.773998 53.689999 31.229 L 49.511002 35.408001 C 49.466999 26.040001 47.863998 17.225998 44.964001 10.553001 C 41.889999 3.484001 37.687 -0.410004 33.125 -0.410004 C 23.926001 -0.410004 16.725 15.494999 16.725 35.795002 C 16.725 56.097 23.929001 72 33.125 72 C 33.769001 72 34.292 71.475998 34.292 70.831993 C 34.292 70.188995 33.769001 69.663994 33.125 69.663994 C 25.5 69.663994 19.061001 54.153 19.061001 35.795002 C 19.061001 17.438 25.502001 1.926003 33.125 1.926003 C 36.651001 1.926003 40.181 5.411003 42.823002 11.486 C 45.598999 17.865997 47.136002 26.34 47.175999 35.389 L 43.02 31.229 C 42.566002 30.773998 41.825001 30.773998 41.368999 31.229 C 40.915001 31.685001 40.915001 32.424999 41.368999 32.880001 L 48.353001 39.868999 L 55.341999 32.880001 C 55.799 32.424999 55.799 31.685001 55.341 31.229 Z"/> </g> </svg>',
			size: "30px",
			onClick: function() { adjustMap("tilt", 5); },
		});
	}

	function createRotateBackControl(map) {
		return createMapControlButton({
			id: "mapRotateBackButton",
			title: "Rotate Map Down",
			innerHTML: '<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg"> <g id="Group-copy"> <path id="Path" fill="#000000" stroke="#000000" stroke-width="2" d="M 17.068624 40.361004 C 17.524626 40.816006 18.265623 40.816006 18.719625 40.361004 L 22.898623 36.182003 C 22.942625 45.550003 24.545628 54.364006 27.445625 61.037003 C 30.519627 68.106003 34.722626 72.000008 39.284626 72.000008 C 48.483627 72.000008 55.684624 56.095005 55.684624 35.795002 C 55.684624 15.493004 48.480625 -0.410004 39.284626 -0.410004 C 38.640625 -0.410004 38.117626 0.113998 38.117626 0.758003 C 38.117626 1.401001 38.640625 1.926003 39.284626 1.926003 C 46.909626 1.926003 53.348625 17.437004 53.348625 35.795002 C 53.348625 54.152004 46.907627 69.664001 39.284626 69.664001 C 35.758625 69.664001 32.228626 66.179001 29.586624 60.104004 C 26.810627 53.724007 25.273624 45.250004 25.233627 36.201004 L 29.389626 40.361004 C 29.843624 40.816006 30.584625 40.816006 31.040627 40.361004 C 31.494625 39.905003 31.494625 39.165005 31.040627 38.710003 L 24.056625 31.721004 L 17.067625 38.710003 C 16.610624 39.165005 16.610624 39.905003 17.068624 40.361004 Z"/> </g> </svg>',
			size: "30px",
			onClick: function() { adjustMap("tilt", -5); },
		});
	}

	function createUpdateArea(map) {
		const updateAreaDiv = document.createElement("div");
		updateAreaDiv.id = "refreshStatusArea";
		updateAreaDiv.style.display = "flex";
		updateAreaDiv.style.alignItems = "center";
		updateAreaDiv.style.width = "fit-content";
		updateAreaDiv.style.padding = "0 10px";
		updateAreaDiv.style.margin = "10px 0 0 0";
		updateAreaDiv.style.height = "40px";
		updateAreaDiv.style.backgroundColor = "rgb(255 255 255)";
		// updateAreaDiv.style.backgroundColor = "rgba(0, 0, 0,0.7)";
		// updateAreaDiv.style.border = "1px solid lightcoral";
		updateAreaDiv.style.border = "0";
		updateAreaDiv.style.boxShadow = "0 1px 4px rgba(0,0,0,0.3)";
		updateAreaDiv.innerHTML = "Updating...";
		// Attach to the map...
		map.controls[google.maps.ControlPosition.TOP_LEFT].push(updateAreaDiv);

		return updateAreaDiv;
	}

	function adjustMap(mode, amount) {
		switch (mode) {
			case "tilt":
				map.setTilt(map.getTilt() + amount);
				mapTilt = map.getTilt();
				break;
			case "rotate":
				map.setHeading(map.getHeading() + amount);
				mapHeading = map.getHeading();
				break;
			default:
				break;
		}
	}

	// Build LM API query params for a given property source and pagination offset.
	// propSource: "customProperties", "autoProperties", "systemProperties", or "inheritedProperties"
	function buildLocationQuery(offset, propSource, { fieldList, pathOperator, statusFilter, deviceFilter }) {
		const isGroupMode = mapSourceType === "groups";

		// Default: fullPath filter with field limiting (used for group queries, or non-group edge cases)
		let queryParams = `?v=3&size=1000&offset=${offset}&fields=${fieldList}&filter=${propSource}.name:"${mapLocationProperty}",fullPath${pathOperator}"${groupPathFilter}"${statusFilter}${deviceFilter}`;

		if (!isGroupMode) {
			if (groupPathFilter !== "*") {
				const tmpPathFilter = groupPathFilter.replace(/^\*/, "").replace(/\*$/, "");
				if (tmpPathFilter !== "") {
					queryParams = `?v=3&size=1000&offset=${offset}&filter=${propSource}.name:"${mapLocationProperty}",systemProperties~"{\\"name\\":\\"system.groups\\",\\"value\\":\\"*${tmpPathFilter}*\\"}"${statusFilter}${deviceFilter}`;
				}
			} else {
				queryParams = `?v=3&size=1000&offset=${offset}&filter=${propSource}.name:"${mapLocationProperty}"${statusFilter}${deviceFilter}`;
			}
		}

		return queryParams;
	}

	// Paginated LM API fetch - handles the while loop, API calls, and progress display
	async function fetchPaginatedLMItems({ resourcePath, buildQueryParams, signal, label }) {
		const items = [];
		let offset = 0;
		let total = 1000;

		while (offset < total) {
			const data = await LMClient({
				resourcePath,
				queryParams: buildQueryParams(offset),
				httpVerb: "GET",
				signal,
			});

			if (data.total === 0) {
				if (offset === 0) return { items: [], total: 0 };
				break;
			}

			if (data.total !== total) total = data.total;
			items.push(...data.items);
			offset = items.length;

			_dom.refreshStatusArea.innerHTML = `${loadingSpinner}&nbsp;${label}: ${offset} of ${total} (${Math.round(offset / total * 100)}%)`;
		}

		return { items, total };
	}

	// Function to load our LogicMonitor data and add pins to the map...
	async function refreshGroupData(timedRefresh = false) {
		// Cancel any in-progress refresh operation
		if (_currentRefreshController) {
			if (!_currentRefreshController.signal.aborted) {
				_currentRefreshController.abort();
				console.debug('Previous refresh operation cancelled.');
			}
		}
		_currentRefreshController = new AbortController();
		const refreshSignal = _currentRefreshController.signal;

		// Capture current time for tracking how long the total refresh takes...
		refreshStartTime = performance.now();

		// Get the current value of the group path filter field...
		const groupPathFilterFieldValue = _dom.customGroupFilterField.value;
		if (groupPathFilterFieldValue != "" && groupPathFilterFieldValue != groupPathFilter) {
			groupPathFilter = groupPathFilterFieldValue;

		// The filter changed so clear any previous markers from the map...
		clearAllMarkers();
		} else if (groupPathFilterFieldValue == "") {
			// The user cleared the field, so reset it back to the initial value...
			groupPathFilter = initialGroupPathFilter;
		}
		_dom.customGroupFilterField.value = groupPathFilter;

		// Get current state of the severity checkboxes on the toolbar...
		showCleared = _dom.showCleared.checked;
		showWarnings = _dom.showWarnings.checked;
		showErrors = _dom.showErrors.checked;
		showCriticals = _dom.showCriticals.checked;
		showSDT = _dom.showSDT.checked;
		// If the user unchecked all the severities it'd essentially query all severities, so re-check all the checkboxes if that happens...
		if (!showCleared && !showWarnings && !showErrors && !showCriticals && !showSDT) {
			_dom.showCleared.checked = true;
			_dom.showWarnings.checked = true;
			_dom.showErrors.checked = true;
			_dom.showCriticals.checked = true;
			_dom.showSDT.checked = true;
		}
		// Get current state of the auto-zoom checkbox on the toolbar...
		autoResetMapOnRefresh = _dom.autoZoom.checked;

		// If there was a wildcard in the group path then do a "like" search, otherwise search for an exact match...
		let pathOperator = ":";
		if (groupPathFilter.includes("*")) {
			pathOperator = "~";
		}

		// Temporarily disable the toolbar fields to prevent user from refreshing before previous refresh is complete...
		_dom.mapOptionsArea.classList.add("disabled");
		// Cache refresh button reference if not already cached
		if (!_dom.weatherRefreshButton) {
			_dom.weatherRefreshButton = document.getElementById("weatherRefreshButton");
		}
		if (_dom.weatherRefreshButton) {
			_dom.weatherRefreshButton.classList.add("disabled");
		}

		// Clear any previously fetched data...
		groupData = [];
		// For tracking how many groups to fetch & pagination...
		let totalGroups = 1000;
		let offset = 0;

		// Cache refresh status area reference if not already cached
		if (!_dom.refreshStatusArea) {
			_dom.refreshStatusArea = document.getElementById("refreshStatusArea");
		}
		// Display our progress to the user...
		_dom.refreshStatusArea.innerHTML = loadingSpinner + "&nbsp;Updating";
		_dom.refreshStatusArea.style.display = "flex";

		// Prepare to call the LogicMonitor API method...
		const httpVerb = "GET";

		// List of fields to fetch...
		let fieldList = "alertStatus,displayName,description,id,hostStatus,name,sdtStatus,numOfHosts,numOfAWSDevices,numOfAzureDevices,numOfGcpDevices,numOfKubernetesDevices,numOfDirectDevices,numOfSubGroups,customProperties,autoProperties";
		// Only fetch custom & inherited properties on full refreshes...
		if (Object.keys(cachedAddresses).length === 0 || pollCount > fullRefreshInterval) {
			fullRefresh = true;
			fieldList = fieldList + ",inheritedProperties,systemProperties";
			pollCount = 0;
		}

		// Determine whether to fetch groups or resources...
		let deviceFilter = "";
		let resourcePath = "/device/groups";
		if (mapSourceType != "groups") {
			resourcePath = "/device/devices";
			deviceFilter = ",deviceType:0|4|18|19";
			if (mapSourceType == "services") {
				deviceFilter = ",deviceType:6";
			}
		}

		// Set our severity filters to query...
		let statusFilter = "";
		let statusArray = [];
		// if (!showCleared && showWarnings && showErrors && showCriticals) {
		if (showCleared) {
			statusArray.push("none");
		}
		if (showWarnings) {
			statusArray.push("*warn*");
		}
		if (showErrors) {
			statusArray.push("*error*");
		}
		if (showCriticals) {
			statusArray.push("*critical*");
		}
		if (statusArray.length > 0) {
			statusFilter = ',alertStatus:' + '"' + statusArray.join("|") + '"';
		}
		if (!showSDT) {
			statusFilter = statusFilter + ',sdtStatus:"none-none-*"';
		}

		// Reset our zoom level when the filter options change...
		if (centerCalculated && autoZoom && !timedRefresh) {
			centerCalculated = false;
		}

		// Shared context for query builders
		const queryCtx = { fieldList, pathOperator, statusFilter, deviceFilter };

		// Determine the primary property source for this configuration
		const useAutoSysProp = mapSourceType !== "groups" && (mapLocationProperty.match(/^auto\./) || mapLocationProperty.match(/^system\./));
		const primaryPropSource = useAutoSysProp
			? (mapLocationProperty.match(/^auto\./) ? "autoProperties" : "systemProperties")
			: "customProperties";

		// Fetch primary location data (custom, auto, or system properties) with pagination...
		try {
			const primaryResult = await fetchPaginatedLMItems({
				resourcePath,
				buildQueryParams: (off) => buildLocationQuery(off, primaryPropSource, queryCtx),
				signal: refreshSignal,
				label: "Updating",
			});

			if (primaryResult.total === 0) {
				console.debug('No results found');
				_dom.refreshStatusArea.innerHTML = "<span class='noResultMessage'>No results</span>";
				_dom.mapOptionsArea.classList.remove("disabled");
				if (_dom.weatherRefreshButton) _dom.weatherRefreshButton.classList.remove("disabled");
				clearAllMarkers();
				bounds = new google.maps.LatLngBounds();
				resetZoom();
				centerCalculated = false;
				totalGroups = -1;
			} else {
				groupData = primaryResult.items;
				totalGroups = primaryResult.total;
				offset = groupData.length;
			}
		} catch (error) {
			if (error.name === 'AbortError') {
				console.debug('Refresh operation was cancelled.');
				_currentRefreshController = null;
				return;
			}
			console.error('Error fetching group data:', error);
			_dom.refreshStatusArea.innerHTML = `<span class='noResultMessage'>Error loading data: ${error.message || 'Unknown error'}</span>`;
			totalGroups = -1;
			_dom.mapOptionsArea.classList.remove("disabled");
			if (_dom.weatherRefreshButton) _dom.weatherRefreshButton.classList.remove("disabled");
		}

		// Fetch inherited location properties (only applicable for resources/services)...
		if (mapSourceType !== "groups" && pollInheritedLocations && totalGroups >= 0) {
			try {
				const inheritedResult = await fetchPaginatedLMItems({
					resourcePath,
					buildQueryParams: (off) => buildLocationQuery(off, "inheritedProperties", queryCtx),
					signal: refreshSignal,
					label: "Inherited locations",
				});

				if (inheritedResult.total > 0) {
					// Deduplicate: items from primary (custom/auto/system) properties take priority
					const seenIDs = new Set(groupData.map(item => item.id));
					let added = 0;
					for (const item of inheritedResult.items) {
						if (!seenIDs.has(item.id)) {
							groupData.push(item);
							seenIDs.add(item.id);
							added++;
						}
					}
					console.debug(`Inherited locations: ${inheritedResult.total} found, ${added} new (${inheritedResult.total - added} duplicates skipped)`);
					totalGroups = groupData.length;
					offset = totalGroups;
				}
			} catch (error) {
				if (error.name === 'AbortError') {
					console.debug('Refresh operation was cancelled.');
					_currentRefreshController = null;
					return;
				}
				console.error('Error fetching inherited locations:', error);
				_dom.refreshStatusArea.innerHTML = `<span class='noResultMessage'>Error loading data: ${error.message || 'Unknown error'}</span>`;
				_dom.mapOptionsArea.classList.remove("disabled");
				if (_dom.weatherRefreshButton) _dom.weatherRefreshButton.classList.remove("disabled");
			}
		}

		// If we've finished fetching all the group/resource data...
		if (totalGroups > 0 && offset == totalGroups) {
			// console.debug('Total groups processed: ' + totalGroups);
			// Reset our progress indicator...
			_dom.refreshStatusArea.innerHTML = "";
			_dom.refreshStatusArea.style.display = "none";
			// Re-enable the toolbar fields...
			_dom.mapOptionsArea.classList.remove("disabled");
			if (_dom.weatherRefreshButton) {
				_dom.weatherRefreshButton.classList.remove("disabled");
			}

			// Prepare Google geocoding for translating a street address to latitude & longitude...
			const geocoder = new google.maps.Geocoder();
			const parser = new DOMParser();

			let itemsProcessed = 0;

			// Determine if we can do a differential (in-place) update
			const isDiffUpdate = timedRefresh && markersByDeviceID.size > 0;
			let markersAddedOrRemoved = false;

			if (isDiffUpdate) {
				// Remove stale markers (items no longer in groupData)
				const newItemIDs = new Set(groupData.map(item => item.id));
				const staleMarkers = [];
				for (const [id, marker] of markersByDeviceID) {
					if (!newItemIDs.has(id)) {
						marker.setMap(null);
						staleMarkers.push(marker);
						markersByDeviceID.delete(id);
					}
				}
				if (staleMarkers.length > 0) {
					markers = markers.filter(m => !staleMarkers.includes(m));
					markersAddedOrRemoved = true;
				}
			} else {
				clearAllMarkers();
			}

			// For use in zooming the map to encompass all our markers on initial draw...
			bounds = new google.maps.LatLngBounds();

			// Shared completion handler called when all items have been processed
			async function onRefreshComplete() {
				if (!centerCalculated || (timedRefresh && autoResetMapOnRefresh)) {
					resetZoom();
					centerCalculated = true;
				}

				if (!disableClustering) {
					if (isDiffUpdate && !markersAddedOrRemoved && typeof clusterer == "object") {
						// Severity-only changes: re-render clusters to update donut charts
						clusterer.render();
					} else {
						if (typeof clusterer == "object") {
							google.maps.event.clearInstanceListeners(clusterer);
							clusterer.setMap(null);
						}
						const algorithm = new markerClusterer.SuperClusterAlgorithm({radius: 120});
						clusterer = new markerClusterer.MarkerClusterer({
							markers,
							map,
							renderer,
							algorithm,
							onClusterClick: () => {}
						});
						clusterer.addListener("clusteringend", () => {
							updatePolylineEndpoints();
						});
					}
				}

				if (mapSourceType == "resources") {
					clearAllPolylines();
					const connectionPromises = Object.values(lineData)
						.filter(c => cachedAddresses[c.deviceIDConnected])
						.map(c => plotConnection(c));
					await Promise.all(connectionPromises);
					updatePolylineEndpoints();
				}

				populateSidebar();

				let refreshEndTime = performance.now();
				console.debug(`Total map refresh time: ${refreshEndTime - refreshStartTime} milliseconds`);
				pollCount = pollCount + 1;
				if (fullRefresh) {
					fullRefresh = false;
				}

				map.setTilt(mapTilt);
				map.setHeading(mapHeading);

				_currentRefreshController = null;
			}

			// Process groups in batches to avoid UI jank with large datasets...
			await buildMarkersInBatches(groupData, (thisItem) => {
				let groupID = thisItem.id;
				const { severity: highestSeverity, sevIcon, pinBG, pinBorder, pinIndex } = parseSeverity(thisItem);

				// Differential update: update existing markers in-place instead of rebuilding
				if (isDiffUpdate) {
					const existingMarker = markersByDeviceID.get(thisItem.id);
					if (existingMarker) {
						bounds.extend(existingMarker.position);

						// Update severity if changed
						if (String(pinIndex) !== existingMarker.content?.dataset?.severity) {
							existingMarker.content.dataset.severity = String(pinIndex);
							existingMarker.zIndex = pinIndex;
							const iconDiv = existingMarker.content.querySelector('.icon');
							if (iconDiv) {
								iconDiv.className = `icon ${highestSeverity}`;
								iconDiv.innerHTML = sevIcon;
							}
						}

						itemsProcessed++;
						if (itemsProcessed == totalGroups) onRefreshComplete();
						return;
					}
					// Item not found in existing markers — fall through to create a new one
					markersAddedOrRemoved = true;
				}

				let address = "";
				let latProp = null;
				let lngProp = null;
				let alreadyGeocoded = false;
				
				if (fullRefresh) {
					const locationResult = findLocationFromItem(thisItem, mapLocationProperty);
					address = locationResult.address;
					alreadyGeocoded = locationResult.alreadyGeocoded;
					latProp = locationResult.latProp;
					lngProp = locationResult.lngProp;
				}

				// Remove any extraneous characters from the address...
				address = address.trim().replaceAll("\t", "").replaceAll("\n", ", ");

				resolveAddress(thisItem, address);

				// Resolve locations to latitude/longitude...
				async function resolveAddress(thisItem, address) {
					// console.debug('Resolving address for ' + thisItem.name + ': ' + address);
					// Check to see if we've already geocoded this group's address and that the address hasn't changed...
					if (cachedAddresses[thisItem.id] && cachedAddresses[thisItem.id].address == address) {
						// console.debug('Address already geocoded for ' + thisItem.name + ': ' + address);
						// Call the subfunction to add the group to the map...
						plotMarker(thisItem, cachedAddresses[thisItem.id].lat, cachedAddresses[thisItem.id].lng, cachedAddresses[thisItem.id].address);
					} else {
						if (alreadyGeocoded) {
							// console.debug('Address already geocoded as custom properties for ' + thisItem.name + ': ' + address);
							// Cache the address for reuse...
							cachedAddresses[thisItem.id] = {lat: Number(latProp.value), lng: Number(lngProp.value), address: address};
							debouncedSaveCache();
							// Call the subfunction to add the group to the map...
							plotMarker(thisItem, cachedAddresses[thisItem.id].lat, cachedAddresses[thisItem.id].lng, cachedAddresses[thisItem.id].address);
						} else {
							// See if the location is a latitude/longitude...
							const coodinateRE = /^([\-]*[\d]+[\.\d]+)[ ,]+([\-]*[\d]+[\.\d]+)$/;
							let match = coodinateRE.exec(address);
							let latVal = null;
							let lngVal = null;
							if (match && match.length == 3) {
								try {
									latVal = Number(match[1]);
									lngVal = Number(match[2]);
								} catch(e) {};
								// It appears we have a latitude & longitude. Cache them for reuse...
								latVal = Number(match[1]);
								lngVal = Number(match[2]);
							}
							// Ensure the latitude and longitude are valid...
							if (latVal && lngVal && latVal > -90 && latVal < 90 && lngVal > -180 && lngVal < 180 && latVal != 0 && lngVal != 0) {
								// console.debug('Latitude & longitude found for ' + thisItem.name + ': ' + match[1] + ', ' + match[2]);
								cachedAddresses[thisItem.id] = {lat: Number(match[1]), lng: Number(match[2]), address: address};
								debouncedSaveCache();
								// Call the subfunction to add the group to the map...
								plotMarker(thisItem, cachedAddresses[thisItem.id].lat, cachedAddresses[thisItem.id].lng, address);
							} else {
								// Attempt to geocode the address...
								geocoder.geocode( {'address': address}, function(results, status) {
									if (status == 'OK') {
										// Grab the longitude/latitude from the results...
										let geocodedLocation = results[0].geometry.location;

										// Cache these coordinates for reuse later...
										cachedAddresses[thisItem.id] = {lat: Number(geocodedLocation.lat()), lng: Number(geocodedLocation.lng()), address: address};
										debouncedSaveCache();
										// Call the subfunction to add the group to the map...
										plotMarker(thisItem, cachedAddresses[thisItem.id].lat, cachedAddresses[thisItem.id].lng, address);
									} else {
										// We weren't provided a resolvable address, so deduct this item from our overall count...
										totalGroups = totalGroups - 1;
										// We still call the `plotMarker` even though there's no marker to plot in case this was the last one to process...
										plotMarker(thisItem, null, null, null);
									}
								});
							}
						}
					}
				}

				// Subfunction to add markers to the map...
				async function plotMarker(thisItem, lat, lng, address) {
					if (address != null) {
						// Start creating content for the group's map pin...
						const content = document.createElement("div");
						let customContent = "";

						if (displayProps != "") {
							const propList = displayProps.split(",");
							propList.forEach(thisProp => {
								const found = findItemProperty(thisItem, thisProp.trim());
								if (found) {
									customContent = `${customContent}<div class="customItem"><span class="customItemName">${found.name}</span>: ${found.value}</div>`;
								}
							});
							if (customContent != "") {
								customContent = `<div class="customItemArea">${customContent}</div>`;
							}
						}


						// Look to see if connecting line info has been provided...
						if (thisItem.autoProperties) {
							let propArray = thisItem.autoProperties.filter(item => item.name == connectionInfoProp);
							if (propArray.length == 1) {
								// Multiple connections to an endpoint can be specifed by separating them with a semicolon...
								const connectionItems = propArray[0].value.split(";");

								// Loop through the connections...
								connectionItems.forEach(thisConnection => {
									// Split the comma-separated parameters...
									let params = thisConnection.split(",");

									if (params.length > 0) {
										let tmp = {};
										tmp.connectionName = params[0].trim();
										tmp.datasourceID = params[1].trim();
										tmp.instanceID = params[2].trim();
										tmp.deviceIDSource = thisItem.id;
										tmp.deviceIDConnected = params[3].trim();
										// TODO: Maybe add support for another parameter for the source device ID to support group connections.

										lineData[`${tmp.deviceIDSource}${tmp.deviceIDConnected}`] = tmp;
										// lineData[tmp.deviceIDSource + ":" + tmp.deviceIDConnected] = tmp;
									}
								});
							}
						}

						content.classList.add("group");
						if (markerStyle === "circles") content.classList.add("dot-style");
						// The pin's z-index gets overwritten when clicked to show details, so capture the original severity in the pin's metadata...
						content.dataset.severity = pinIndex;
						// Create the content shown when the pin is clicked...
						if (mapSourceType == "groups") {
							// Capture the group's description...
							let groupDescription = thisItem.description;
							// If the group doesn't have a description then fallback to showing the address...
							if (groupDescription == "") {
								groupDescription = address;
							}

							content.innerHTML = `
								<div class="icon ${highestSeverity}">
									${sevIcon}
								</div>
								<div class="details">
									<div class="groupName"><a href="/santaba/uiv4/resources/treeNodes/t-dg,id-${thisItem.id}?source=details" target="_blank">${thisItem.name}</a></div>
									<div class="description">${groupDescription}${customContent}</div>
									<div class="features">
										<div title="${thisItem.numOfHosts} Standard Devices">
											<svg xmlns="http://www.w3.org/2000/svg" class="infoDialogIcon" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M160 96C124.7 96 96 124.7 96 160L96 224C96 259.3 124.7 288 160 288L480 288C515.3 288 544 259.3 544 224L544 160C544 124.7 515.3 96 480 96L160 96zM376 168C389.3 168 400 178.7 400 192C400 205.3 389.3 216 376 216C362.7 216 352 205.3 352 192C352 178.7 362.7 168 376 168zM432 192C432 178.7 442.7 168 456 168C469.3 168 480 178.7 480 192C480 205.3 469.3 216 456 216C442.7 216 432 205.3 432 192zM160 352C124.7 352 96 380.7 96 416L96 480C96 515.3 124.7 544 160 544L480 544C515.3 544 544 515.3 544 480L544 416C544 380.7 515.3 352 480 352L160 352zM376 424C389.3 424 400 434.7 400 448C400 461.3 389.3 472 376 472C362.7 472 352 461.3 352 448C352 434.7 362.7 424 376 424zM432 448C432 434.7 442.7 424 456 424C469.3 424 480 434.7 480 448C480 461.3 469.3 472 456 472C442.7 472 432 461.3 432 448z"/></svg>

											<span>${thisItem.numOfHosts}</span>
										</div>
										<div title="${thisItem.numOfAWSDevices + thisItem.numOfAzureDevices + thisItem.numOfGcpDevices} Cloud Devices">
											<svg xmlns="http://www.w3.org/2000/svg" class="infoDialogIcon" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M32 400C32 479.5 96.5 544 176 544L480 544C550.7 544 608 486.7 608 416C608 364.4 577.5 319.9 533.5 299.7C540.2 286.6 544 271.7 544 256C544 203 501 160 448 160C430.3 160 413.8 164.8 399.6 173.1C375.5 127.3 327.4 96 272 96C192.5 96 128 160.5 128 240C128 248 128.7 255.9 129.9 263.5C73 282.7 32 336.6 32 400z"/></svg>
											<span>${thisItem.numOfAWSDevices + thisItem.numOfAzureDevices + thisItem.numOfGcpDevices}</span>
										</div>
										<div title="${thisItem.numOfKubernetesDevices} Kubernetes Devices">
											<svg xmlns="http://www.w3.org/2000/svg" class="infoDialogIcon" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M401.8 269.7L450.4 227.2C464.2 246.5 473.8 269.1 477.8 293.4L413.4 297.7C411 287.6 407 278.2 401.8 269.7zM541.9 289.2C536.6 250.4 521.3 214.7 498.7 184.9L499.5 184.2C513 172.4 513.7 151.6 501 139C488.3 126.4 467.6 127 455.8 140.5L455.1 141.3C425.3 118.7 389.6 103.4 350.8 98.1L350.9 97C352.1 79.1 337.9 64 320 64C302.1 64 287.9 79.2 289.1 97L289.2 98.1C250.4 103.4 214.7 118.7 184.9 141.3L184.2 140.5C172.4 127 151.6 126.3 139 139C126.4 151.7 127 172.4 140.5 184.2L141.3 184.9C118.7 214.7 103.4 250.4 98.1 289.2L97 289.1C79.1 287.9 64 302.1 64 320C64 337.9 79.2 352.1 97 350.9L98.1 350.8C103.4 389.6 118.7 425.3 141.3 455.1L140.5 455.8C127 467.6 126.3 488.4 139 501C151.7 513.6 172.4 513 184.2 499.5L184.9 498.7C214.7 521.3 250.4 536.6 289.2 541.9L289.1 543C287.9 560.9 302.1 576 320 576C337.9 576 352.1 560.8 350.9 543L350.8 541.9C389.6 536.6 425.3 521.3 455.1 498.7L455.8 499.5C467.6 513 488.3 513.7 501 501C513.7 488.3 513 467.6 499.5 455.8L498.7 455.1C521.3 425.3 536.6 389.6 541.9 350.8L543 350.9C560.9 352.1 576 337.9 576 320C576 302.1 560.8 287.9 543 289.1L541.9 289.2zM227.2 189.6C246.5 175.8 269.1 166.2 293.4 162.1L297.7 226.5C287.7 228.9 278.2 232.9 269.7 238.1L227.2 189.5zM162.2 293.4C166.3 269 175.9 246.5 189.7 227.2L238.3 269.7C233 278.2 229.1 287.7 226.7 297.7L162.3 293.4zM189.7 412.8C175.9 393.5 166.3 370.9 162.2 346.6L226.6 342.3C229 352.4 233 361.8 238.2 370.3L189.6 412.8zM293.5 477.8C269.1 473.7 246.6 464.1 227.3 450.4L269.8 401.8C278.3 407.1 287.8 411 297.8 413.4L293.5 477.8zM412.9 450.4C393.6 464.2 371 473.8 346.7 477.8L342.4 413.4C352.4 411 361.9 407 370.4 401.8L412.9 450.4zM477.9 346.6C473.8 371 464.2 393.5 450.5 412.8L401.9 370.3C407.2 361.7 411.1 352.3 413.5 342.3L477.9 346.6zM412.9 189.7L370.4 238.3C361.8 233 352.4 229.1 342.4 226.7L346.7 162.3C371.1 166.4 393.6 176 412.9 189.8zM320 288C337.7 288 352 302.3 352 320C352 337.7 337.7 352 320 352C302.3 352 288 337.7 288 320C288 302.3 302.3 288 320 288z"/></svg>
											<span>${thisItem.numOfKubernetesDevices}</span>
										</div>
										<div class="drillDownButton" title="Open group in new tab">
											<a href="/santaba/uiv4/resources/treeNodes/t-dg,id-${thisItem.id}?source=details" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" class="infoDialogIcon" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M384 64C366.3 64 352 78.3 352 96C352 113.7 366.3 128 384 128L466.7 128L265.3 329.4C252.8 341.9 252.8 362.2 265.3 374.7C277.8 387.2 298.1 387.2 310.6 374.7L512 173.3L512 256C512 273.7 526.3 288 544 288C561.7 288 576 273.7 576 256L576 96C576 78.3 561.7 64 544 64L384 64zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 416C480 398.3 465.7 384 448 384C430.3 384 416 398.3 416 416L416 496C416 504.8 408.8 512 400 512L144 512C135.2 512 128 504.8 128 496L128 240C128 231.2 135.2 224 144 224L224 224C241.7 224 256 209.7 256 192C256 174.3 241.7 160 224 160L144 160z"/></svg></a>
										</div>
									</div>
								</div>
							`;
						} else {
							// Capture the group's description...
							let groupDescription = thisItem.description;
							// If the group doesn't have a description then fallback to showing the address...
							if (groupDescription == "") {
								groupDescription = "Host:" + thisItem.name + "<br/>Address: " + cachedAddresses[groupID].address;
							}

							content.innerHTML = `
								<div class="icon ${highestSeverity}">
									${sevIcon}
								</div>
								<div class="details">
									<div class="groupName"><a href="/santaba/uiv4/resources/treeNodes/t-d,id-${thisItem.id}?source=details&tab=alert" target="_blank">${thisItem.displayName}</a></div>
									<div class="description">${groupDescription}${customContent}</div>
									<div class="features">
										<div class="drillDownButton" title="Open group in new tab">
											<a href="/santaba/uiv4/resources/treeNodes/t-d,id-${thisItem.id}?source=details&tab=alert" target="_blank" class="link"><svg xmlns="http://www.w3.org/2000/svg" class="infoDialogIcon" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M384 64C366.3 64 352 78.3 352 96C352 113.7 366.3 128 384 128L466.7 128L265.3 329.4C252.8 341.9 252.8 362.2 265.3 374.7C277.8 387.2 298.1 387.2 310.6 374.7L512 173.3L512 256C512 273.7 526.3 288 544 288C561.7 288 576 273.7 576 256L576 96C576 78.3 561.7 64 544 64L384 64zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 416C480 398.3 465.7 384 448 384C430.3 384 416 398.3 416 416L416 496C416 504.8 408.8 512 400 512L144 512C135.2 512 128 504.8 128 496L128 240C128 231.2 135.2 224 144 224L224 224C241.7 224 256 209.7 256 192C256 174.3 241.7 160 224 160L144 160z"/></svg></a>
										</div>
									</div>
								</div>
							`;
						}

					// Add this group's pin to the map...
					let marker = new google.maps.marker.AdvancedMarkerElement({
						position: { lat: cachedAddresses[groupID].lat, lng: cachedAddresses[groupID].lng },
						map: map,
						content: content,
						// content: glyphSvgPinElement.element,
						title: thisItem.name,
						zIndex: pinIndex,
					});
					// Store deviceID on marker for polyline lookups...
					marker.deviceID = thisItem.id;

					// Open info window when marker is clicked...
					marker.addListener("gmp-click", () => {
						toggleHighlight(marker, thisItem)
					});

					// Add reference to this pin for use by the clustering algorithm or if we need to modify them later...
					markers.push(marker);
					// Also add to Map for O(1) lookups by device ID
					markersByDeviceID.set(thisItem.id, marker);

					// Add this marker to map's bounding box (for initial zooming)...
					bounds.extend(marker.position);

					itemsProcessed = itemsProcessed + 1;
					}
					// console.log("itemsProcessed: " + itemsProcessed + " / totalGroups: " + totalGroups);

					if (itemsProcessed == totalGroups) {
						await onRefreshComplete();
					}
				}
			});
		}
	}

	// Function to fetch connection status & plot connecting lines on the map...
	async function plotConnection(connection) {
		// Establish coordinates of the line start and end...
		const tmpCoords = [
			{ lat: cachedAddresses[connection.deviceIDSource].lat, lng: cachedAddresses[connection.deviceIDSource].lng},
			{ lat: cachedAddresses[connection.deviceIDConnected].lat, lng: cachedAddresses[connection.deviceIDConnected].lng}
		];

		// Fetch the current alert status of the defined instance...
		let resourcePath = `/device/devices/${connection.deviceIDSource}/devicedatasources/${connection.datasourceID}/instances/${connection.instanceID}`;
		let httpVerb = "GET";
		const instanceData = await LMClient({
			resourcePath: resourcePath,
			queryParams: "",
			httpVerb: httpVerb,
			postBody: null,
			apiVersion: '3',
		});
		// console.debug('Instance status succeeded with JSON response', instanceData);

		// Process the data we received...
		if (instanceData) {
			let alertStatus = "OK";
			let alertSeverity = "clear";
			let sdtStatus = "";
			let connectionColor = "#85c25d";
			// Parse the alarm status...
			let alertStatusArray = instanceData.alertStatus.match(/([\w]+)-([\w]+)-([\w]+)/);
			if (alertStatusArray) {
				alertStatus = alertStatusArray[1];
				alertSeverity = alertStatusArray[2];
			}

			// Determine color by severity...
			if (alertSeverity != "") {
				if (alertSeverity == "warn") {
					connectionColor = "#f5ca1d";
					alertStatus = "Warning";
				} else if (alertSeverity == "error") {
					connectionColor = "#ff8c00";
					alertStatus = "Error";
				} else if (alertSeverity == "critical") {
					connectionColor = "#e0351b";
					alertStatus = "Critical";
				}
			}

			// Parse the SDT status...
			let sdtStatusArray = instanceData.sdtStatus.match(/([\w]+)-([\w]+)-([\w]+)/);
			if (sdtStatusArray[1].toLowerCase() == "sdt" || sdtStatusArray[2].toLowerCase() == "sdt") {
				sdtStatus = "sdt";
			}
			// If in SDT...
			if (sdtStatus == "sdt") {
				connectionColor = "#00a1fe";
			}

			// Plot the line on the map...
			const thisPath = new google.maps.Polyline({
				path: tmpCoords,
				geodesic: useGeodesicLines,
				strokeColor: connectionColor,
				strokeOpacity: 1.0,
				strokeWeight: connectingLineWeight,
			});
			thisPath.setMap(map);

			// Track polyline with source/target IDs so we can redraw to clusters
			polylines.push({
				polyline: thisPath,
				sourceDeviceID: connection.deviceIDSource,
				targetDeviceID: connection.deviceIDConnected,
				originalCoords: tmpCoords
			});

			// Show connection info on hover...
			let lineInfoWindow = new CustomInfoWindow({
				content: "",
				anchor: 'top',
				offset: 15,
				clickThrough: true
			});

			google.maps.event.addListener(thisPath, "mouseover", function(e) {
				lineInfoWindow.setPosition(e.latLng);
				lineInfoWindow.setContent(`<strong>${connection.connectionName}</strong><br/>Connection alert status: <a href="/santaba/uiv4/resources/treeNodes/t-i,id-${connection.instanceID}?source=details&tab=alert" target="_blank" title="Click to view alerts" style="border: 0;">${alertStatus}</a>`);
				lineInfoWindow.open(map);
			});
			google.maps.event.addListener(thisPath, "mouseout", function(e) {
				lineInfoWindow.close();
			});
			google.maps.event.addListener(thisPath, "click", function(e) {
				window.open("/santaba/uiv4/resources/treeNodes/t-i,id-" + connection.instanceID + "?source=details&tab=alert");
			});
			// Ensure new polylines handle clusters properly...
			updatePolylineEndpoints();
		}
	}

	// Function for showing/hiding a group's detail when clicked...
	function toggleHighlight(markerView, group) {
		closeAllInfoWindows({ skipMarker: true });
		
		// If clicking the same marker that's already open, close it
		if (markerInfoWindow && markerInfoWindow.markerId === markerView.deviceID) {
			markerInfoWindow.close();
			markerInfoWindow = null;
			return;
		}
		
		// Close any existing marker InfoWindow
		if (markerInfoWindow) {
			markerInfoWindow.close();
		}
		
		// Clone the marker content to use in the InfoWindow (preserves classes for CSS styling)
		const contentClone = markerView.content.cloneNode(true);
		// Add highlight class to apply the expanded styling
		contentClone.classList.add('highlight');
		// Make sure the details are visible
		const detailsEl = contentClone.querySelector('.details');
		if (detailsEl) {
			detailsEl.style.display = 'flex';
		}
		
		// Create and open the CustomInfoWindow
		markerInfoWindow = new CustomInfoWindow({
			position: markerView.position,
			content: contentClone.outerHTML,
			anchor: 'top',
			offset: markerStyle === "circles" ? 12 : 40
		});
		markerInfoWindow.markerId = markerView.deviceID; // Track which marker this is for
		markerInfoWindow.open(map);
	}

	let sidebarSortMode = "severity";
	let sidebarItems = [];

	// Build the sidebar item list from current groupData
	function buildSidebarItems() {
		const severityOrder = { critical: 0, error: 1, warn: 2, sdt: 3, clear: 4 };
		const propList = displayProps ? displayProps.split(",").map(p => p.trim()).filter(Boolean) : [];

		sidebarItems = groupData.map(item => {
			const { severity, pinIndex } = parseSeverity(item);
			const cached = cachedAddresses[item.id];

			const props = [];
			propList.forEach(propName => {
				const found = findItemProperty(item, propName);
				if (found) {
					props.push({ name: found.name, value: found.value });
				}
			});

			return {
				id: item.id,
				name: item.displayName || item.name,
				severity: severity,
				severityIndex: severityOrder[severity] ?? 99,
				location: (cached && cached.address) || "Unknown",
				props: props,
			};
		}).filter(item => {
			return markersByDeviceID.has(item.id) || markersByDeviceID.has(String(item.id));
		});
	}

	// Render the sidebar list based on the current sort mode
	function renderSidebarList() {
		const sidebar = _dom.sidebarArea;
		if (!sidebar) return;

		const severityColors = {
			critical: "#e0351b",
			error:    "#ff8c00",
			warn:     "#f5ca1d",
			sdt:      "#00a1fe",
			clear:    "#85c25d",
		};
		const severityLabels = {
			critical: "Critical",
			error:    "Error",
			warn:     "Warning",
			sdt:      "SDT",
			clear:    "OK",
		};

		const sorted = [...sidebarItems];
		if (sidebarSortMode === "severity") {
			sorted.sort((a, b) => a.severityIndex - b.severityIndex || a.name.localeCompare(b.name));
		} else {
			sorted.sort((a, b) => a.location.localeCompare(b.location) || a.severityIndex - b.severityIndex || a.name.localeCompare(b.name));
		}

		let html = `<div class="sidebar-header"><span>Items (${sorted.length})</span><span class="sidebar-sort-buttons"><button class="sidebar-sort-btn${sidebarSortMode === "severity" ? " active" : ""}" data-sort="severity" title="Group by severity">Severity</button><button class="sidebar-sort-btn${sidebarSortMode === "location" ? " active" : ""}" data-sort="location" title="Group by address">Address</button></span></div>`;

		let currentGroup = null;
		sorted.forEach(item => {
			const groupKey = sidebarSortMode === "severity" ? item.severity : item.location;
			if (groupKey !== currentGroup) {
				currentGroup = groupKey;
				const headerLabel = sidebarSortMode === "severity" ? (severityLabels[groupKey] || groupKey) : groupKey;
				html += `<div class="sidebar-group-header" title="${headerLabel}">${headerLabel}</div>`;
			}
			const color = severityColors[item.severity] || "#85c25d";
			const label = severityLabels[item.severity] || "OK";
			let propsHtml = "";
			if (item.props && item.props.length > 0) {
				propsHtml = `<div class="sidebar-item-props">${item.props.map(p => `<div class="sidebar-item-prop" title="${p.name}: ${p.value}"><span class="sidebar-item-prop-label">${p.name}:</span> ${p.value}</div>`).join("")}</div>`;
			}
			html += `<div class="sidebar-item" data-device-id="${item.id}" title="${item.name} — ${label}">
				<span class="sidebar-dot" style="background-color:${color};"></span>
				<span class="sidebar-item-content"><span class="sidebar-item-name">${item.name}</span>${propsHtml}</span>
			</div>`;
		});
		sidebar.innerHTML = html;
	}

	// Populate the sidebar with all plotted items
	function populateSidebar() {
		const sidebar = _dom.sidebarArea;
		if (!sidebar) return;

		buildSidebarItems();
		renderSidebarList();

		if (!sidebar._clickBound) {
			sidebar._clickBound = true;
			sidebar.addEventListener("click", (e) => {
				const sortBtn = e.target.closest(".sidebar-sort-btn");
				if (sortBtn) {
					sidebarSortMode = sortBtn.dataset.sort;
					renderSidebarList();
					return;
				}

				const row = e.target.closest(".sidebar-item");
				if (!row) return;
				const deviceId = row.dataset.deviceId;
				const marker = markersByDeviceID.get(Number(deviceId)) || markersByDeviceID.get(deviceId);
				if (!marker) return;

				sidebar.querySelectorAll(".sidebar-item.active").forEach(el => el.classList.remove("active"));
				row.classList.add("active");

				const pos = marker.position;
				if (pos) {
					if (map.getZoom() < 12) {
						map.setZoom(14);
					}
					map.panTo(pos);
				}

				const groupItem = groupData.find(g => String(g.id) === String(deviceId));
				if (groupItem) {
					toggleHighlight(marker, groupItem);
				}
			});
		}
	}

	// Our custom renderer for MarkerClusterer to create donut charts based on status of clustered items...
	const renderer = {
		render ({ markers, count, position }) {
			// Since Google Maps markers don't have direct support for metadata, I'm using the marker's z-index to capture the group's severity: 1=warning, 2=error, 3=critical.

			// Create objects to hold per-severity metrics...
			const severityCounts = new Map([["4",0],["3",0],["2",0],["1",0],["0",0]]);
			const severityPercents = new Map([["4",0],["3",0],["2",0],["1",0]]);
			const severityOffsets = new Map([["4",0],["3",0],["2",0],["1",0]]);

			// Get counts of clustered pins by severity...
			markers.forEach((value, key) => {
				const severity = value.zIndex > 0 ? value.zIndex.toString() : "0";
				severityCounts.set(severity, (severityCounts.get(severity) || 0) + 1);
			});

			// (Credit for the technique I'm using to create SVG donut charts goes to this site: https://heyoka.medium.com/scratch-made-svg-donut-pie-charts-in-html5-2c587e935d72 )

			// Calculate sizes & offsets for our chart...
			// First segment should always have an offset of 25 to have it start at 12:00 on the circle...
			const baseOffset = 25;
			let offsetSum = 0;
			// Calculate percentages for each severity...
			severityPercents.forEach((value, key) => {
				const percent = (severityCounts.get(key)/count) * 100;
				severityPercents.set(key, percent);

				// Calculate offsets needed per chart slice...
				if (percent > 0) {
					if (offsetSum == 0) {
						// This is our first item to chart, so it will establish the offset for subsequent chart slices...
						severityOffsets.set(key, baseOffset);
					} else {
						// Formula for calculating offset after first segment: 100-{sum of length of previous segments} + 25...
						const offset = (100 - offsetSum) + baseOffset;
						severityOffsets.set(key, offset);
					}
					offsetSum = offsetSum + percent;
				}
			});

			// Create an SVG donut chart representing severities of clustered pins...
			const svg = window.btoa(`
				<svg fill="#0000ff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42" class="donut">
					<filter id="gaussian-blur" x="-20%" y="-20%" width="140%" height="140%">
						<feDropShadow dx="0" dy="${mapTilt/100+0.7}" stdDeviation="1.3" flood-opacity="0.7" />
					</filter>
					<g filter="url(#gaussian-blur)">
						<!-- Defines the center of the donut... -->
						<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
						<!-- Our base circle, colored green by default... -->
						<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#85c25d" stroke-width="7"></circle>
						<!-- First segment should always have an offset of 25 to have it start at 12am on the circle... -->
						<!-- SDTs... -->
						<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#00a1fe" stroke-width="7" stroke-dasharray="${severityPercents.get("4")} ${100-severityPercents.get("4")}" stroke-dashoffset="${severityOffsets.get("4")}"></circle>
						<!-- Criticals... -->
						<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#e0351b" stroke-width="7" stroke-dasharray="${severityPercents.get("3")} ${100-severityPercents.get("3")}" stroke-dashoffset="${severityOffsets.get("3")}"></circle>
						<!-- Errors... -->
						<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#ff8c00" stroke-width="7" stroke-dasharray="${severityPercents.get("2")} ${100-severityPercents.get("2")}" stroke-dashoffset="${severityOffsets.get("2")}"></circle>
						<!-- Warnings... -->
						<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#f5ca1d" stroke-width="7" stroke-dasharray="${severityPercents.get("1")} ${100-severityPercents.get("1")}" stroke-dashoffset="${severityOffsets.get("1")}"></circle>
					</g>
				</svg>`);

			// Add the chart to the map...
			const marker = new google.maps.Marker({
				position,
				icon: {
					url: `data:image/svg+xml;base64,${svg}`,
					scaledSize: new google.maps.Size(45, 45),
				},
				label: {
					text: String(count),
					color: "rgba(0,0,0,0.9)",
					// color: "rgba(255,255,255,0.9)",
					fontSize: "12px",
				},
				// adjust zIndex to be above other markers
				zIndex: 1000 + count,
			});

			// Create hover content
			const getInfoContent = () => {
				// Get device details from markers
				const deviceDetails = markers.map(marker => {
					const content = marker.content;
					const iconDiv = content.querySelector('.icon');
					const nameLink = content.querySelector('.groupName a');
					let status = 'clear';
					let sdtStatus = '';
					let statusRank = 0;
					if (iconDiv.classList.contains('critical')) {
						status = 'critical';
						statusRank = 4;
					} else if (iconDiv.classList.contains('error')) {
						status = 'error';
						statusRank = 3;
					} else if (iconDiv.classList.contains('warn')) {
						status = 'warning';
						statusRank = 2;
					}
					if (iconDiv.classList.contains('sdt')) {
						sdtStatus = ' <span class="sdtNote">(in SDT)</span>';
						status = 'sdt';
						statusRank = 1;
					}

					return {
						name: nameLink.textContent,
						link: nameLink.href,
						status,
						sdtStatus,
						statusRank,
						position: marker.position
					}
				});

				// Sort the resources by status, then alphabetically by severity...
				deviceDetails.sort((a,b)=> (b.statusRank - a.statusRank || a.name.localeCompare(b.name)  ));

				// Calculate bounds for the cluster...
				const clusterBounds = new google.maps.LatLngBounds();
				deviceDetails.forEach(device => {
					clusterBounds.extend(device.position);
				});

				return `
					<div class="mapInfoPopupWindow">
						<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
							<div style="font-weight: 600; font-size: 14px;">Cluster Summary</div>
							<button onclick="if(clusterInfoWindow){clusterInfoWindow.close()};if(markerInfoWindow){markerInfoWindow.close();markerInfoWindow=null};if(parent.overlayInfoWindow){parent.overlayInfoWindow.close()};map.fitBounds(new google.maps.LatLngBounds(
								new google.maps.LatLng(${clusterBounds.getSouthWest().lat()}, ${clusterBounds.getSouthWest().lng()}),
								new google.maps.LatLng(${clusterBounds.getNorthEast().lat()}, ${clusterBounds.getNorthEast().lng()})
							), {top:70,right:70,bottom:70,left:70})" style="
								padding: 6px 12px;
								background: #1a73e8;
								color: white;
								border: none;
								border-radius: 4px;
								font-size: 13px;
								cursor: pointer;
								display: flex;
								align-items: center;
								gap: 6px;
								transition: background 0.2s;
							" onmouseover="this.style.background='#1557b0'" onmouseout="this.style.background='#1a73e8'">
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
									<circle cx="11" cy="11" r="8"/>
									<line x1="21" y1="21" x2="16.65" y2="16.65"/>
									<line x1="11" y1="8" x2="11" y2="14"/>
									<line x1="8" y1="11" x2="14" y2="11"/>
								</svg>
								Zoom into Cluster
							</button>
						</div>
						<div style="display: grid; gap: 8px; margin-bottom: 16px;">
							<div style="display: flex; align-items: center; gap: 8px;">
								<div style="width: 12px; height: 12px; border-radius: 50%; background: #e0351b;"></div>
								<span>Critical: ${severityCounts.get("3") || 0}</span>
							</div>
							<div style="display: flex; align-items: center; gap: 8px;">
								<div style="width: 12px; height: 12px; border-radius: 50%; background: #ff8c00;"></div>
								<span>Error: ${severityCounts.get("2") || 0}</span>
							</div>
							<div style="display: flex; align-items: center; gap: 8px;">
								<div style="width: 12px; height: 12px; border-radius: 50%; background: #f5ca1d;"></div>
								<span>Warning: ${severityCounts.get("1") || 0}</span>
							</div>
							<div style="display: flex; align-items: center; gap: 8px;">
								<div style="width: 12px; height: 12px; border-radius: 50%; background: #85c25d;"></div>
								<span>Clear: ${severityCounts.get("0") || 0}</span>
							</div>
							<div style="display: flex; align-items: center; gap: 8px;">
								<div style="width: 12px; height: 12px; border-radius: 50%; background: #00a1fe;"></div>
								<span>SDT: ${severityCounts.get("4") || 0}</span>
							</div>
						</div>
						<div style="border-top: 1px solid #eee; padding-top: 12px;">
							<div style="font-weight: 600; font-size: 14px; margin-bottom: 8px;">${mapSourceType.replace(/^./, char => char.toUpperCase())} (${count})</div>
							<div style="display: grid; gap: 4px;">
								${deviceDetails.map(device => `
									<div style="display: flex; align-items: center; padding: 4px 8px; background: color-mix(in srgb, var(--${device.status}-color) 10%, white 30%); border-radius: 4px; gap: 8px; max-height: 25px;">
										<div style="width: 8px; height: 8px; border-radius: 50%; background: var(--${device.status}-color); flex-shrink: 0;"></div>
										<a href="${device.link}"
										   target="_blank"
										   style="color: #1a73e8; text-decoration: none; flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
										   onmouseover="this.style.textDecoration='underline'"
										   onmouseout="this.style.textDecoration='none'">
											${device.name}${device.sdtStatus}
										</a>
										<div style="display: flex; align-items: center;">
											<a href="${device.link}"
											   target="_blank"
											   style="color: #1a73e8; display: flex; align-items: center; padding: 2px; border-radius: 4px; transition: background 0.2s;"
											   onmouseover="this.style.background='#e8f0fe'"
											   onmouseout="this.style.background='transparent'">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
													<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
													<polyline points="15 3 21 3 21 9"/>
													<line x1="10" y1="14" x2="21" y2="3"/>
												</svg>
											</a>
										</div>
									</div>
								`).join('')}
							</div>
						</div>
					</div>
				`;
			}

			// Add hover listener
			marker.addListener('click', () => {
				closeAllInfoWindows();
				clusterInfoWindow = new CustomInfoWindow({
					position: marker.position,
					content: getInfoContent(),
					anchor: 'top',
					offset: 50
				});
				clusterInfoWindow.open(map);
			});

			return marker;
		}
	}

	// Function to enable the weather overlays when the appropriate checkbox is selected...
	function enableWeather() {
		if (_dom.weather.checked) {
			_dom.weatherOptions.style.display = "inline-flex";
			initWeather();
		} else {
			clearInterval(weatherRefresher);
			weatherRefresher = null;
			map.overlayMapTypes.clear();
			clearOverlayState();
			_dom.weatherOptions.style.display = "none";
		}
		debouncedSaveMapOptionsCookie();
	}

	// Fetch the latest weather map data from RainViewer's API
	async function fetchRainViewerData() {
		const response = await fetch("https://api.rainviewer.com/public/weather-maps.json");
		if (!response.ok) throw new Error(`RainViewer API error: ${response.status} ${response.statusText}`);
		rvAPIData = await response.json();
	}

	// Initialize weather data and start refresh interval...
	async function initWeather() {
		if (_dom.weatherType.value === "radar") {
			try { await fetchRainViewerData(); } catch (error) {
				console.error("Failed to fetch RainViewer weather data:", error);
			}
		}

		addWeatherLayer();

		clearInterval(weatherRefresher);
		weatherRefresher = setInterval(async function() {
			if (_dom.weatherType.value === "radar") {
				try { await fetchRainViewerData(); } catch (error) {
					console.error("Failed to refresh weather data:", error);
				}
			}
			addWeatherLayer();
			console.log("Weather maps refreshed.");
		}, weatherRefreshMinutes*1000*60);
	}

	// Get the latest radar frame from RainViewer...
	function initRainViewerData() {
		rvMapFrames = rvAPIData.radar.past;
		if (rvAPIData.radar.nowcast) {
			rvMapFrames = rvMapFrames.concat(rvAPIData.radar.nowcast);
			rvLastPastFramePosition = rvAPIData.radar.past.length - 1;
		}
	}

	// Custom MapType implementation for weather tile overlays.
	// Uses a two-layer DOM structure: an outer container div (managed by
	// Google Maps for zoom/fade transitions) wrapping an inner <img> with
	// weatherOpacity applied directly. Because Google Maps only animates
	// the outer container, tiles never flash at full opacity during zooms.
	//
	// Includes an LRU tile cache keyed by URL to avoid redundant network
	// requests when the user zooms back to a previously-viewed level.
	const TILE_CACHE_MAX = 256;
	const _tileCache = new Map();

	function _cachedTileImg(url, ownerDocument) {
		if (_tileCache.has(url)) {
			const cached = _tileCache.get(url);
			_tileCache.delete(url);
			_tileCache.set(url, cached);
			const img = ownerDocument.createElement('img');
			img.src = cached;
			return img;
		}
		const img = ownerDocument.createElement('img');
		img.src = url;
		img.addEventListener('load', () => {
			if (_tileCache.size >= TILE_CACHE_MAX) {
				_tileCache.delete(_tileCache.keys().next().value);
			}
			_tileCache.set(url, url);
		}, { once: true });
		return img;
	}

	function clearTileCache() { _tileCache.clear(); }

	function createWeatherTileLayer(name, getTileUrl, opts = {}) {
		const tileSize = new google.maps.Size(256, 256);
		return {
			tileSize,
			maxZoom: opts.maxZoom,
			name,
			getTile(coord, zoom, ownerDocument) {
				const div = ownerDocument.createElement('div');
				div.style.width = tileSize.width + 'px';
				div.style.height = tileSize.height + 'px';
				if (opts.maxZoom && zoom > opts.maxZoom) return div;
				const url = getTileUrl(coord, zoom);
				if (!url) return div;
				const img = _cachedTileImg(url, ownerDocument);
				img.style.width = '100%';
				img.style.height = '100%';
				img.style.display = 'block';
				img.style.opacity = weatherOpacity;
				div.appendChild(img);
				return div;
			},
			releaseTile(tile) {
				const img = tile.querySelector('img');
				if (img) { img.src = ''; img.remove(); }
			},
		};
	}

	// Function to add weather & other optional overlays to the map...
	async function addWeatherLayer() {
		if (_dom.weather.checked) {
			const mapType = _dom.weatherType.value;
			const optionalMapType = _dom.otherWeatherOverlays.value;

			try {
				map.overlayMapTypes.clear();
				clearTileCache();

				if (mapType == "radar") {
					initRainViewerData();

					let colorScheme = rvOptionKind == 'satellite' ? 0 : rvOptionColorScheme;
					let smooth = rvOptionKind == 'satellite' ? 0 : rvOptionSmoothData;
					let snow = rvOptionKind == 'satellite' ? 0 : rvOptionSnowColors;

					map.overlayMapTypes.insertAt(0, createWeatherTileLayer(mapType, (tile, zoom) => {
						return [rvAPIData.host + rvMapFrames[rvLastPastFramePosition].path, 256, zoom, tile.x, tile.y, colorScheme, smooth + '_' + snow + '.png'].join('/');
					}, { maxZoom: 7 }));

				} else if (mapType.match(/(nexrad|q2)/g)) {
					const nexradCacheBuster = Math.floor(Date.now() / (weatherRefreshMinutes * 60000));
					map.overlayMapTypes.insertAt(0, createWeatherTileLayer(mapType, (tile, zoom) => {
						return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/" + mapType + "/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + nexradCacheBuster;
					}, { maxZoom: 12 }));

				} else if (mapType === "openweather") {
					if (!openWeatherAPIKey) {
						console.error("OpenWeather radar requires an API key. Set it via the 'OpenWeatherAPIKey' dashboard token or the 'openWeatherAPIKey' variable.");
					} else {
						map.overlayMapTypes.insertAt(0, createWeatherTileLayer("openweather", (tile, zoom) => {
							return "https://tile.openweathermap.org/map/precipitation_new/" + zoom + "/" + tile.x + "/" + tile.y + ".png?appid=" + openWeatherAPIKey;
						}, { maxZoom: 12 }));
					}

				} else if (mapType === "xweather") {
					if (!xweatherAPIID || !xweatherAPIKey) {
						console.error("Xweather radar requires an API ID and secret. Set them via the 'XweatherAPIID' and 'XweatherAPIKey' dashboard tokens or the 'xweatherAPIID' and 'xweatherAPIKey' variables.");
					} else {
						map.overlayMapTypes.insertAt(0, createWeatherTileLayer("xweather", (tile, zoom) => {
							return "https://maps.aerisapi.com/" + xweatherAPIID + "_" + xweatherAPIKey + "/radar/" + zoom + "/" + tile.x + "/" + tile.y + "/current.png";
						}, { maxZoom: 12 }));
					}
				}
			} catch (error) {
				console.error('Error adding weather layer:', error);
			}

			// Look to see if we should add wildfire into the map...
			if (optionalMapType == "wildfires") {
				clearOverlayState();

				// Load the wildfire data from the ArcGIS site...
				// More info about this source of active US wildfire data can be found at: https://www.arcgis.com/home/item.html?id=d957997ccee7408287a963600a77f61f
				// From that site, you can click "View" above the "URL" field on the right-hand side. From there, you'll see info on the two available layers. We're using layer "1" for perimeter data (denoted in the URL below with the "_1"), and pulling geojson data (per the suffix).
				//map.data.loadGeoJson("https://opendata.arcgis.com/datasets/d957997ccee7408287a963600a77f61f_1.geojson");
				const usWildfireUrl = `https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USA_Wildfires_v1/FeatureServer/1/query?where=CurrentDateAge+<%3D+7&outFields=*&f=geojson&ts=${Date.now()}`;
				
				// Australian bushfire data from ArcGIS (near real-time bushfire boundaries)...
				// More info: https://www.arcgis.com/home/item.html?id=8b28109ce26b43b8968a3c9baa608f43
				const auWildfireUrl = `https://services-ap1.arcgis.com/ypkPEy1AmwPKGNNv/arcgis/rest/services/Near_Real_Time_Bushfire_Boundaries_view/FeatureServer/3/query?where=0%3D0&geometryType=esriGeometryPolyline&units=esriSRUnit_Meter&outFields=*&returnGeometry=true&f=pgeojson&ts=${Date.now()}`;

				// Merge multiple GeoJSON FeatureCollections into a single FeatureCollection...
				function mergeGeoJson(...datasets) {
					const merged = { type: "FeatureCollection", features: [] };
					datasets.forEach(data => {
						if (data && data.features) {
							merged.features = merged.features.concat(data.features);
						}
					});
					return merged;
				}

				// Fetch both US and Australian wildfire data in parallel...
				Promise.all([
					fetch(usWildfireUrl).then(response => response.ok ? response.json() : null).catch(() => null),
					fetch(auWildfireUrl).then(response => response.ok ? response.json() : null).catch(() => null)
				]).then(([usData, auData]) => {
					// Tag features with source and namespace the IDs to prevent collisions when merged...
					if (usData && usData.features) {
						usData.features.forEach(feature => {
							feature.properties = feature.properties || {};
							feature.properties._fireSource = 'US';
							if (feature.id != null) feature.id = 'US_' + feature.id;
						});
						console.debug(`US wildfires loaded: ${usData.features.length} features`);
					}
					if (auData && auData.features) {
						auData.features.forEach(feature => {
							feature.properties = feature.properties || {};
							feature.properties._fireSource = 'AU';
							if (feature.id != null) feature.id = 'AU_' + feature.id;
						});
						console.debug(`Australian bushfires loaded: ${auData.features.length} features`);
					}

					// Merge all wildfire data into a single FeatureCollection and add to map...
					const combined = mergeGeoJson(usData, auData);
					if (combined.features.length > 0) {
						map.data.addGeoJson(combined);
						console.debug(`Total wildfire features plotted: ${combined.features.length}`);
					}
				}).catch(error => {
					console.error('Error loading wildfire data:', error);
				});

				// Color the wildfire areas as red...
				map.data.setStyle({ fillColor: 'red', strokeWeight: 1.0, strokeColor: 'salmon' });

				// Show wildfire info on either "click" or "mouseover" (refer to the 'showWildfireInfoEvent' variable set at the top of this script)...
				parent.overlayInfoWindowListenerHandle = map.data.addListener(showWildfireInfoEvent, function(event) {
					// Determine if this is a US or Australian fire based on the source property...
					const fireSource = event.feature.getProperty("_fireSource");
					let infoContent = '';
					
					if (fireSource === 'AU') {
						// Australian bushfire info display...
						let fireName = event.feature.getProperty("fire_name");
						if (fireName == null) {
							fireName = "(unknown)";
						}
						let fireType = event.feature.getProperty("fire_type");
						if (fireType == null) {
							fireType = "(not available)";
						}
						let ignitionDate = event.feature.getProperty("ignition_date");
						if (ignitionDate == null) {
							ignitionDate = "(not available)";
						} else {
							// Convert epoch timestamp to readable date if it's a number...
							if (typeof ignitionDate === 'number') {
								ignitionDate = new Date(ignitionDate).toLocaleDateString('en-AU');
							}
						}
						let perimKm = event.feature.getProperty("perim_km");
						if (perimKm == null) {
							perimKm = "(not available)";
						} else {
							perimKm = Number(perimKm).toLocaleString('en-AU', numFormatOptions) + ' km';
						}
						let state = event.feature.getProperty("state");
						if (state == null) {
							state = "(not available)";
						}
						let agency = event.feature.getProperty("agency");
						if (agency == null) {
							agency = "(not available)";
						}
						
						infoContent = `<div style="line-height:1.35;overflow:hidden;color:black;">
							<div style="display:flex;align-items:center;margin-bottom:4px;">
								<span style="color:#cc0000;font-size:28px;margin-right:8px;line-height:1;">&#128293;</span>
								<div>
									<span style="font-weight:700;font-size:1.2em;">Bushfire &quot;${fireName}&quot;</span>
								</div>
							</div>
							<br/><b>Fire Type:</b> ${fireType}
							<br/><b>Ignition Date:</b> ${ignitionDate}
							<br/><b>Perimeter:</b> ${perimKm}
							<div style="padding-top:8px;">
								<b>State:</b> ${state}
								<br/><b>Agency:</b> ${agency}
							</div>
							</div>`;
					} else {
						// US wildfire info display (original logic)...
						let comments = `<br/>${event.feature.getProperty("Comments")}`;
						if (event.feature.getProperty("Comments") == null) {
							comments = "";
						}
						let acres = event.feature.getProperty("GISAcres");
						if (acres == null) {
							acres = "(not available)";
						} else {
							acres = Number(acres).toLocaleString('en-US', numFormatOptions);
						}
						let fireCategory = event.feature.getProperty("FeatureCategory");
						if (fireCategory == null) {
							fireCategory = "(not available)";
						}
						
						infoContent = `<div style="line-height:1.35;overflow:hidden;white-space:nowrap;color:black;">
							<div style="display:flex;align-items:center;margin-bottom:8px;">
								<span style="color:#cc0000;font-size:28px;margin-right:8px;line-height:1;">&#128293;</span>
								<div>
									<span style="font-weight:700;font-size:1.2em;">Wildfire &quot;${event.feature.getProperty("IncidentName")}&quot;</span>
									${comments}
								</div>
							</div>
							<div style="padding-bottom:8px;">
								<b>Category:</b> ${fireCategory}<br/>
								<b>Calculated Acres:</b> ${acres}
							</div>
							<b>Days Since Last GIS Update:</b> ${event.feature.getProperty("CurrentDateAge")}<br/>
							<b>GIS Map Method:</b> ${event.feature.getProperty("MapMethod")}
							</div>`;
					}
					
					closeAllInfoWindows();
					parent.overlayInfoWindow.setContent(infoContent);
					parent.overlayInfoWindow.setPosition(event.latLng);
					parent.overlayInfoWindow.open(map);
				});
				if (showWildfireInfoEvent == "mouseover") {
					parent.overlayInfoWindowListenerHandle = map.data.addListener('mouseout', function(event) {
						parent.overlayInfoWindow.close();
					});
				}
			// Look to see if we should add power outages to the map...
			} else if (optionalMapType == "us-poweroutages") {
				// USA Today power outage data URL (fetched via CORS proxy)...
				const usaTodayDataURL = `https://data.usatoday.com/media/jsons/power/active/national_powerout_slider_data.js`;
				// Multiple CORS proxies for fallback (some may be blocked or rate-limited)...
				const corsProxies = [
					{ url: 'https://api.codetabs.com/v1/proxy?quest=', encode: false },
					{ url: 'https://api.allorigins.win/raw?url=', encode: true },
					{ url: 'https://corsproxy.io/?', encode: true }
				];
				// US Counties GeoJSON with FIPS codes (from plotly datasets)...
				const countiesGeoJsonURL = 'https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json';
				const usaTodayTotalCustomersURL = 'https://data.usatoday.com/media/jsons/power/active/national_powerout_slider_total.js';

				// Cache key for county GeoJSON - stored in localStorage since boundaries are static
				const COUNTIES_CACHE_KEY = 'lm_bmw.countiesGeoJson.v1';

				// Helper function to get cached county GeoJSON or fetch fresh...
				async function getCountiesGeoJson() {
					// Try localStorage cache first (county boundaries are static, persist across sessions)
					try {
						const cached = localStorage.getItem(COUNTIES_CACHE_KEY);
						if (cached) {
							console.debug('Using cached counties GeoJSON from localStorage');
							return JSON.parse(cached);
						}
					} catch (e) {
						console.debug('localStorage read failed:', e.message);
					}

					// Fetch fresh if not cached
					console.debug('Fetching fresh counties GeoJSON (will cache for future use)...');
					const response = await fetch(countiesGeoJsonURL);
					if (!response.ok) {
						throw new Error(`Counties GeoJSON fetch error: ${response.status}`);
					}
					const data = await response.json();

					// Cache in localStorage for future loads (boundaries don't change)
					try {
						localStorage.setItem(COUNTIES_CACHE_KEY, JSON.stringify(data));
						console.debug('Counties GeoJSON cached to localStorage');
					} catch (e) {
						console.debug('localStorage write failed (quota exceeded?):', e.message);
					}

					return data;
				}

				// Helper function to try fetching with fallback proxies...
				async function fetchWithCorsProxy(targetUrl) {
					const urlWithCacheBust = targetUrl + `?v=${Date.now()}`;
					for (let i = 0; i < corsProxies.length; i++) {
						const proxy = corsProxies[i];
						const proxyUrl = proxy.url + (proxy.encode ? encodeURIComponent(urlWithCacheBust) : urlWithCacheBust);
						try {
							const response = await fetch(proxyUrl);
							if (response.ok) {
								console.debug(`Power outage data fetched successfully using proxy ${i + 1}`);
								return response;
							}
							console.warn(`CORS proxy ${i + 1} returned ${response.status}, trying next...`);
						} catch (err) {
							console.warn(`CORS proxy ${i + 1} failed: ${err.message}, trying next...`);
						}
					}
					throw new Error(`All CORS proxies failed to fetch power outage data`);
				}

				// Helper to parse outage data in single pass (optimized from two-pass approach)
				function parseOutageData(outageText) {
					const allEntries = [];
					let maxTimeIndex = 0;
					const propsRegex = /"properties":\s*\{\s*"n"\s*:\s*"([^"]+)"\s*,\s*"o"\s*:\s*"([^"]+)"\s*,\s*"c"\s*:\s*([\d.]+)\s*,\s*"f"\s*:\s*"(\d+)"\s*,\s*"m"\s*:\s*(\d+)/g;
					let match;

					// Single pass: collect entries and track max time index simultaneously
					while ((match = propsRegex.exec(outageText)) !== null) {
						const [_, name, outageCount, percentage, fips, timeIndex] = match;
						const timeIdx = parseInt(timeIndex, 10) || 0;
						if (timeIdx > maxTimeIndex) maxTimeIndex = timeIdx;
						allEntries.push({ name, outageCount, percentage, fips, timeIdx });
					}

					// Filter for current time entries and build lookup
					const outageDataByFips = {};
					for (const entry of allEntries) {
						if (entry.timeIdx === maxTimeIndex) {
							outageDataByFips[entry.fips] = {
								name: entry.name,
								outageCount: parseInt(entry.outageCount.replace(/,/g, ''), 10) || 0,
								percentage: parseFloat(entry.percentage) || 0,
								fips: entry.fips
							};
						}
					}
					return { outageDataByFips, maxTimeIndex };
				}

				try {
					clearOverlayState();

					// Fetch both data sources in parallel (counties use cache, outages via proxy)
					const [countiesGeoJson, outageResponse] = await Promise.all([
						getCountiesGeoJson(),
						fetchWithCorsProxy(usaTodayDataURL)
					]);

					// Parse outage text in single pass (optimized)
					const outageText = await outageResponse.text();
					const { outageDataByFips, maxTimeIndex: CURRENT_TIME_INDEX } = parseOutageData(outageText);

					console.debug(`Detected maximum time index (m) value: ${CURRENT_TIME_INDEX}`);
					console.debug(`Parsed ${Object.keys(outageDataByFips).length} counties with current outage data (m=${CURRENT_TIME_INDEX}) from USA Today`);

					// Merge outage data into the counties GeoJSON by FIPS code...
					let countiesWithOutages = 0;
					countiesGeoJson.features.forEach(feature => {
						const fips = feature.id; // plotly dataset uses 'id' for FIPS code
						const outageData = outageDataByFips[fips];

						if (outageData) {
							feature.properties.OutageCount = outageData.outageCount;
							feature.properties.PercentAffected = outageData.percentage;
							feature.properties.CountyName = outageData.name;
							countiesWithOutages++;
						} else {
							feature.properties.OutageCount = 0;
							feature.properties.PercentAffected = 0;
							feature.properties.CountyName = feature.properties.NAME || 'Unknown County';
						}
					});

					console.debug(`US power outages loaded: ${countiesWithOutages} counties have active outages`);

					// Add the merged GeoJSON to the map...
					map.data.addGeoJson(countiesGeoJson);

					// Color the county borders dynamically based on outage percentage...
					map.data.setStyle(function(feature) {
						let percentAffected = feature.getProperty('PercentAffected') || 0;
						let strokeColor = "#0000002e";
						let strokeOpacity = 0.1;
						let fillColor = "transparent";
						let fillOpacity = 0.0;
						
						if (percentAffected > 0) {
							strokeColor = "salmon";
							fillColor = "red";
							// Scale the fill opacity based on percentage (cap at 50% for visibility)
							fillOpacity = Math.min(percentAffected / 100, 0.8);
						}

						return {
							fillColor: fillColor,
							fillOpacity: fillOpacity,
							strokeWeight: 1.0,
							strokeColor: strokeColor,
							strokeOpacity: strokeOpacity
						}
					});

					// Show county info on click...
					parent.overlayInfoWindowListenerHandle = map.data.addListener('click', function(event) {
						const countyName = event.feature.getProperty('CountyName') || 'Unknown County';
						const outageCount = event.feature.getProperty('OutageCount') || 0;
						const percentAffected = event.feature.getProperty('PercentAffected') || 0;

						// Calculate donut chart values (circumference = 2 * π * 35 ≈ 219.91)...
						const circumference = 219.91;
						const filledAmount = (percentAffected / 100) * circumference;
						const donutChart = `
							<svg width="100" height="100" viewBox="0 0 100 100" style="display:block;margin:10px auto;">
								<circle cx="50" cy="50" r="35" fill="none" stroke="#e0e0e0" stroke-width="12"/>
								<circle cx="50" cy="50" r="35" fill="none" stroke="#dc3545" stroke-width="12"
									stroke-dasharray="${filledAmount} ${circumference - filledAmount}"
									stroke-linecap="round"
									transform="rotate(-90 50 50)"/>
								<text x="50" y="50" text-anchor="middle" dominant-baseline="middle"
									font-size="16" font-weight="bold" fill="#333">${percentAffected.toFixed(1)}%</text>
							</svg>
						`;

						// Set the content of the info window...
						parent.overlayInfoWindow.setContent(`
							<div style="line-height:1.5;overflow:hidden;white-space:nowrap;color:#333;">
								<h3 style="margin:0;">${countyName} Power Outages</h3>
								${donutChart}
								<p style="padding:5px 0;">
									Customers Without Power: <strong>${outageCount.toLocaleString()}</strong> (${percentAffected.toFixed(1)}%)
								</p>
								<p style="font-size:11px; color:#777; margin: 0;">
									Data source: <a href="https://data.usatoday.com/national-power-outage-map-tracker/" target="_blank" style="color:#0085c4; text-decoration: none;">USA Today</a>
								</p>
							</div>
						`);

						closeAllInfoWindows();
						parent.overlayInfoWindow.setPosition(event.latLng);
						parent.overlayInfoWindow.open(map);
					});

					// Highlight counties on mouseover...
					map.data.addListener('mouseover', function(event) {
						map.data.revertStyle();
						map.data.overrideStyle(event.feature, {strokeWeight: 3, strokeOpacity: 0.5});
					});
					map.data.addListener('mouseout', function(event) {
						map.data.revertStyle();
					});

				} catch (error) {
					console.error("Failed to fetch power outage data:", error);
				}
			} else if (optionalMapType == "earthquakes") {
				clearOverlayState();

				try {
				// Load the earthquake data for the past day from the USGS site...
				// More info about this source of earthquake data can be found at: https://publicapis.io/usgs-earthquake-hazards-program-api
				if (quakeMode == "time") {
					await map.data.loadGeoJson(`https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_week.geojson?ts=${Date.now()}`);
				} else {
					await map.data.loadGeoJson(`https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_day.geojson?ts=${Date.now()}`);
				}
				// Other options for different timeframes and magnitudes...
				// map.data.loadGeoJson("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson");
				// await map.data.loadGeoJson("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson");
				// await map.data.loadGeoJson("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_day.geojson");
				// await map.data.loadGeoJson("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson");
				// await map.data.loadGeoJson("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_month.geojson");
				console.debug("Earthquake data loaded");

				// Style the earthquake markers...
				// map.data.setStyle({ fillColor: 'red', strokeWeight: 1.0, strokeColor: 'salmon', icon: {url: quakeIcon, scaledSize: { width: 40, height: 40}, anchor: { x: 20, y: 20 } } });
				map.data.setStyle(function(feature) {
					let alertColor = "crimson";
					let iconOpacity = 1.0;
					// Set our minimum opacity...
					iconOpacity = 0.5;

					// Leaving logic here commented out for color-coding the icons based on PAGER alert color...
					// alertColor = "gray";
					// if (feature.getProperty('alert') != null) {
					// 	alertColor = feature.getProperty('alert');
					// 	if (alertColor == "green") {
					// 		alertColor = "limegreen";
					// 	} else if (alertColor == "yellow") {
					// 		alertColor = "rgb(209 209 43)";
					// 	};
					// };

					if (quakeMode == "time") {
						// Leaving logic here commented out for changing the icon's opacity based on recency...
						// Calculate the icon's opacity based on how recent the quake occurred (newer = more opaque)...
						let now = new Date();
						let quakeTime = new Date(feature.getProperty('time'));
						// Calculate seconds since the quake occurred...
						let timeDiff = now - quakeTime;
						// Calculate a scale based on seconds in a day...
						let timeScale = (86400 * 12) / timeDiff * 100;
						// Change icon opacity based on age of the event...
						if (timeScale > iconOpacity) {
							iconOpacity = timeScale;
						}
					} else {
						let mag = feature.getProperty("mag");
						// We'll use magnitude 7 as a the top of our scale (i.e. mag 7 will be full opacity, with lesser being more faded)...
						let magScale = 1 - ((7 - mag) / 10);
						if (magScale > 0.5) {
							iconOpacity = magScale;
						}
					}
					// console.debug(`Opacity of ${feature.getProperty("place")} (mag ${feature.getProperty("mag")}): ${iconOpacity}`);

					return {
						icon: {url: buildEarthquakeIconUrl(iconOpacity, alertColor), scaledSize: { width: 40, height: 40}, anchor: { x: 20, y: 20 } },
					}
				});

				// Show earthquake info on click...
				parent.overlayInfoWindowListenerHandle = map.data.addListener('click', async function(event) {
					// Show an infowindow on click...
					let quakeTime = new Date(event.feature.getProperty("time"));
					let updated = new Date(event.feature.getProperty("updated"));
					let alertLabel = "(not available)";
					let alertLabelColor = "white";
					if (event.feature.getProperty("alert") != null) {
						alertLabelColor = event.feature.getProperty("alert");
						alertLabel = event.feature.getProperty("alert").toUpperCase();
						if (alertLabelColor == "green") {
							alertLabelColor = "lawngreen";
						}
					}
					let quakeAgeInDays = (new Date() - quakeTime) / (86400 * 1000);

					// Fetch detail data first to get impact-link info for tsunami warning...
					const detailUrl = event.feature.getProperty("detail");
					let tsunamiWarningHtml = 'Tsunami risk';
					let detailData = null;
					if (detailUrl) {
						try {
							const detailResponse = await fetch(detailUrl);
							detailData = await detailResponse.json();
							// Look for impact-link products...
							const impactLinks = detailData?.properties?.products?.["impact-link"];
							if (impactLinks && impactLinks.length > 0) {
								// Find the latest entry based on indexTime...
								const latestImpactLink = impactLinks.reduce((latest, current) => {
									const currentTime = current.properties?.indexTime || current.indexTime || 0;
									const latestTime = latest.properties?.indexTime || latest.indexTime || 0;
									return (currentTime > latestTime) ? current : latest;
								}, impactLinks[0]);
								// Get text and url from the latest impact-link...
								const impactText = latestImpactLink.properties?.text || latestImpactLink.text;
								const impactUrl = latestImpactLink.properties?.url || latestImpactLink.url;
								if (impactText && impactUrl) {
									// tsunamiWarningHtml = `<a href="${impactUrl}" target="_blank" style="color: #333; text-decoration: underline;">${impactText}</a>`;
									tsunamiWarningHtml = `<a href="${impactUrl}" title="View Tsunami details" target="_blank">Tsunami Risk</a>`;
								}
							}
						} catch (err) {
							console.debug("Could not load detail data for impact-link:", err.message);
						}
					}

					parent.overlayInfoWindow.setContent(`
						<div style="line-height:1.35;overflow:hidden;white-space:nowrap;color:black;width:250px;">
							<div>
								<div style="font-weight:700;font-size: 1.2em;">Earthquake: Magnitude ${event.feature.getProperty("mag")}</div>
								${event.feature.getProperty("place")}
							</div>
							<div style="margin: 12px 0; display: flex; flex-direction: column; gap: 12px; min-width: 220px;">
								<!-- Magnitude Gauge (0-8) -->
								<div style="display: flex; flex-direction: column; gap: 4px;">
									<div style="display: flex; justify-content: space-between; align-items: baseline;">
										<span style="font-size: 11px; font-weight: 600; color: #333; display: inline-flex; align-items: center; gap: 4px;">Magnitude<span title="Magnitude is a logarithmic measure of the size of an earthquake at its source." style="display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; background: #888; color: white; font-size: 9px; font-weight: 700; cursor: help; font-style: italic; font-family: Georgia, serif;">i</span></span>
										<span style="font-size: 14px; font-weight: 700; color: #333;">${event.feature.getProperty("mag").toFixed(1)}</span>
									</div>
									<div style="position: relative; height: 24px;">
										<svg width="100%" height="24" viewBox="0 0 220 24" preserveAspectRatio="none">
											<defs>
												<linearGradient id="barGradientMag" x1="0%" y1="0%" x2="100%" y2="0%">
													<stop offset="0%" style="stop-color:#c5e8eb"/>
													<stop offset="50%" style="stop-color:#FFF9C4"/>
													<stop offset="62.5%" style="stop-color:#FFEB3B"/>
													<stop offset="75%" style="stop-color:#FF9800"/>
													<stop offset="87.5%" style="stop-color:#FF5722"/>
													<stop offset="100%" style="stop-color:#F44336"/>
												</linearGradient>
											</defs>
											<!-- Background bar -->
											<rect x="0" y="6" width="220" height="12" rx="6" fill="url(#barGradientMag)"/>
										</svg>
										<!-- Marker (HTML element to avoid SVG stretching) -->
										<div class="quakeMarker" style="left: calc(${Math.min(100, Math.max(0, event.feature.getProperty("mag") / 8 * 100))}% - 14px);">
											<div style="width: 4px; height: 4px; background: white; border-radius: 50%;"></div>
										</div>
									</div>
									<div style="display: flex; justify-content: space-between; font-size: 9px; color: #666;">
										<span>0</span><span>2</span><span>4</span><span>6</span><span>8</span>
									</div>
								</div>
								<!-- Significance Gauge (0-1000) -->
								<div style="display: flex; flex-direction: column; gap: 4px;">
									<div style="display: flex; justify-content: space-between; align-items: baseline;">
										<span style="font-size: 11px; font-weight: 600; color: #333; display: inline-flex; align-items: center; gap: 4px;">Significance<span title="A quake's significance is determined on a number of factors, including: magnitude, maximum MMI, felt reports, and estimated impact." style="display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; background: #888; color: white; font-size: 9px; font-weight: 700; cursor: help; font-style: italic; font-family: Georgia, serif;">i</span></span>
										<span style="font-size: 14px; font-weight: 700; color: #333;">${(event.feature.getProperty("sig") || 0).toFixed(0)}</span>
									</div>
									<div style="position: relative; height: 24px;">
										<svg width="100%" height="24" viewBox="0 0 220 24" preserveAspectRatio="none">
											<defs>
												<linearGradient id="barGradientSig" x1="0%" y1="0%" x2="100%" y2="0%">
													<stop offset="0%" style="stop-color:#4CAF50"/>
													<stop offset="37.5%" style="stop-color:#FFEB3B"/>
													<stop offset="62.5%" style="stop-color:#FF9800"/>
													<stop offset="100%" style="stop-color:#F44336"/>
												</linearGradient>
											</defs>
											<!-- Background bar -->
											<rect x="0" y="6" width="220" height="12" rx="6" fill="url(#barGradientSig)"/>
										</svg>
										<!-- Marker (HTML element to avoid SVG stretching) -->
										<div class="quakeMarker" style="left: calc(${Math.min(100, Math.max(0, (event.feature.getProperty("sig") || 0) / 1000 * 100))}% - 14px);">
											<div style="width: 4px; height: 4px; background: white; border-radius: 50%;"></div>
										</div>
									</div>
									<div style="display: flex; justify-content: space-between; font-size: 9px; color: #666;">
										<span>0</span><span>250</span><span>500</span><span>750</span><span>1000</span>
									</div>
								</div>
								<!-- Intensity Gauge (0-10, CDI) -->
								<div style="display: flex; flex-direction: column; gap: 4px;">
									<div style="display: flex; justify-content: space-between; align-items: baseline;">
										<span style="font-size: 11px; font-weight: 600; color: #333; display: inline-flex; align-items: center; gap: 4px;">Intensity (MMI)<span title="This value is determined using the Modified Mercalli Intensity scale (MMI), which is a measure of the shaking intensity at a given location." style="display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; background: #888; color: white; font-size: 9px; font-weight: 700; cursor: help; font-style: italic; font-family: Georgia, serif;">i</span></span>
										<span style="font-size: 14px; font-weight: 700; color: #333;">${(event.feature.getProperty("cdi") || 0).toFixed(1)}</span>
									</div>
									<div style="position: relative; height: 24px;">
										<svg width="100%" height="24" viewBox="0 0 220 24" preserveAspectRatio="none">
											<defs>
												<linearGradient id="barGradientInt" x1="0%" y1="0%" x2="100%" y2="0%">
													<stop offset="0%" style="stop-color:#EEE"/>
													<stop offset="25%" style="stop-color:#ACD8E9"/>
													<stop offset="60%" style="stop-color:#FFEB3B"/>
													<stop offset="75%" style="stop-color:#FF9800"/>
													<stop offset="100%" style="stop-color:#F44336"/>
												</linearGradient>
											</defs>
											<!-- Background bar -->
											<rect x="0" y="6" width="220" height="12" rx="6" fill="url(#barGradientInt)"/>
										</svg>
										<!-- Marker (HTML element to avoid SVG stretching) -->
										<div class="quakeMarker" style="left: calc(${Math.min(100, Math.max(0, (event.feature.getProperty("cdi") || 0) / 10 * 100))}% - 14px);">
											<div style="width: 4px; height: 4px; background: white; border-radius: 50%;"></div>
										</div>
									</div>
									<div style="display: flex; justify-content: space-between; font-size: 9px; color: #666;">
										<span>0</span><span>2.5</span><span>5</span><span>7.5</span><span>10</span>
									</div>
								</div>
							</div>
							${event.feature.getProperty("tsunami") === 1 && quakeAgeInDays < 1 ? `
								<div style="display: flex; flex-wrap: wrap; text-wrap: auto; align-items: center; gap: 8px; justify-content: center;">
									<?xml version='1.0' encoding='UTF-8' standalone='no'?>
									<svg width="35px" height="35px" viewBox="0 0 60.601004 60.601004" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" version="1.1" xmlns="http://www.w3.org/2000/svg">
										<path d="m 57.316128,56.958628 c 1.125,0 2.225,-0.5825 2.825,-1.63125 0.6125,-1.04625 0.5625,-2.28875 0,-3.265 L 33.128628,5.2773777 c -0.5625,-0.97375 -1.6125,-1.635 -2.8375,-1.635 -1.2,0.0025 -2.25,0.66125 -2.8125,1.635 L 0.46612771,52.062378 c -0.575,0.97625 -0.6125,2.21875 -0.0125,3.265 0.61249999,1.04875 1.69999999,1.63125 2.83749999,1.63125 l 54.0250003,0" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
										<path d="m 30.291127,9.0848757 -13.85,23.9900003 c 14.9125,-7.8575 22.4375,-2.24875 24.7875,3.58875 l -0.4625,0.26625 c -0.3625,-0.3475 -0.775,-0.65625 -1.2375,-0.935 -3.1125,-1.86375 -6.9375,-1.21 -8.55,1.46625 -1.6125,2.685 -0.3875,6.37375 2.725,8.24125 6.1375,3.68625 13.975,2.81 18.725,1.71125 L 30.291127,9.0848757" style="fill:white;fill-opacity:1;fill-rule:evenodd;stroke:none"/>
									</svg>
								<span style="font-weight: bold;">${tsunamiWarningHtml}</span>
							</div>
						` : ''}
							<div style="margin: 15px 0; text-wrap: auto; line-height: 20px;">Current <a href="https://earthquake.usgs.gov/data/pager/onepager.php" target="_blank">USGS PAGER</a> Alert Level: <strong style="color: ${alertLabelColor}; background-color: black; padding: 5px; border-radius: 7px; font-size: 0.9em; white-space: nowrap;">${alertLabel}</strong></div>
							<div style="font-size: 0.9em;">
								<span style="font-weight: 500;">Detected:</span> ${quakeTime.toLocaleString()} <span style="font-size: 0.95em;">(${quakeAgeInDays.toFixed(1)} days ago)</span><br/>
								<span style="font-weight: 500;">Updated:</span> ${updated.toLocaleString()}
							</div>
							<div style="margin: 15px 0 5px 0;">
								<a href="${event.feature.getProperty("url")}" target="_blank" style="background-color: dodgerblue; padding: 3px 7px; border-radius: 5px; color: white; text-decoration: none; font-size: 1.15em; font-weight: 400; display: inline-flex; align-items: center; gap: 5px;">
									<svg xmlns="http://www.w3.org/2000/svg" width="22" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM288 224C288 206.3 302.3 192 320 192C337.7 192 352 206.3 352 224C352 241.7 337.7 256 320 256C302.3 256 288 241.7 288 224zM280 288L328 288C341.3 288 352 298.7 352 312L352 400L360 400C373.3 400 384 410.7 384 424C384 437.3 373.3 448 360 448L280 448C266.7 448 256 437.3 256 424C256 410.7 266.7 400 280 400L304 400L304 336L280 336C266.7 336 256 325.3 256 312C256 298.7 266.7 288 280 288z" fill="white"/></svg>
									Earthquake details
								</a>
							</div>
						</div>`
					);

					closeAllInfoWindows();
					parent.overlayInfoWindow.setPosition(event.latLng);
					parent.overlayInfoWindow.open(map);

					// Display ShakeMap MMI contour lines using the already-fetched detail data...
					// Clear any previous contour lines...
					if (parent.mmiContourLines) {
						parent.mmiContourLines.forEach(line => line.setMap(null));
						parent.mmiContourLines = [];
					}
					parent.mmiContourLines = [];

					// Use the already-fetched detailData for ShakeMap product...
					if (detailData) {
						try {
							// Look for ShakeMap product with cont_mmi.json...
							const shakemapProduct = detailData?.properties?.products?.shakemap?.[0];
							const contMmiUrl = shakemapProduct?.contents?.["download/cont_mmi.json"]?.url;
							
							if (contMmiUrl) {
								const contMmiResponse = await fetch(contMmiUrl);
								const contMmiData = await contMmiResponse.json();
								
								// Find max and min MMI values for color scaling...
								let maxMmi = 0;
								let minMmi = Infinity;
								contMmiData.features.forEach(feature => {
									const mmi = feature.properties.value || 0;
									if (mmi > maxMmi) maxMmi = mmi;
									if (mmi < minMmi) minMmi = mmi;
								});
								
								// Add each contour line to the map with color based on MMI value...
								contMmiData.features.forEach(feature => {
									if (feature.geometry && feature.geometry.type === "MultiLineString") {
										const mmi = feature.properties.value || 0;
										// Calculate red intensity: higher MMI = stronger red (scale from light to dark red)
										// MMI typically ranges from ~1 to 10
										const intensity = Math.min(1, Math.max(0, (mmi - minMmi) / (maxMmi - minMmi)));
										// Create gradient from light red (#ffcccc) to dark red (#8b0000)
										const red = 255;
										const green = Math.round(204 * (1 - intensity));
										const blue = Math.round(204 * (1 - intensity));
										const strokeColor = "rgb(" + red + ", " + green + ", " + blue + ")";
										// Higher MMI = thicker, more opaque lines
										const strokeWeight = 1 + intensity;
										const strokeOpacity = 0.2 + (intensity * 0.5);
										
										// MultiLineString has multiple line arrays
										feature.geometry.coordinates.forEach(lineCoords => {
											const path = lineCoords.map(coord => ({lat: coord[1], lng: coord[0]}));
											const polyline = new google.maps.Polyline({
												path: path,
												strokeColor: strokeColor,
												strokeOpacity: strokeOpacity,
												strokeWeight: strokeWeight,
												map: map
											});
											parent.mmiContourLines.push(polyline);
										});
									}
								});
								console.debug("Loaded " + parent.mmiContourLines.length + " MMI contour lines");
							}
						} catch (err) {
							console.debug("Could not load ShakeMap MMI data:", err.message);
						}
					}
				});
				} catch (error) {
					console.error("Failed to load earthquake data:", error);
				}
			} else if (optionalMapType == "us-flooding") {
				// const countiesGeoJsonURL = `https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json?v=${Date.now()}`;
				// const countyIDsJsonURL = `https://api.waterdata.usgs.gov/rtfi-api/counties?page=1&limit=4000&v=${Date.now()}`;
				const floodingDataURL = `https://api.waterdata.usgs.gov/rtfi-api/referencepoints/flooding?v=${Date.now()}`;

				clearOverlayState();

				try {
					// Fetch the flooding data from the USGS API...
					// See https://api.waterdata.usgs.gov/rtfi-api/docs for more information on the API.
					const floodingResponse = await fetch(floodingDataURL);
					if (!floodingResponse.ok) {
						throw new Error(`Flooding data fetch error: ${floodingResponse.status}`);
					}
					const floodingData = await floodingResponse.json();
					console.debug(`Flooding data loaded: ${floodingData.length} sites currently flooding`);

					// Convert flooding data to GeoJSON and add to the Data layer...
					let floodingFeatureCount = 0;
					floodingData.forEach(entry => {
						if (entry.latitude && entry.longitude) {
							map.data.addGeoJson({
								type: "Feature",
								geometry: {
									type: "Point",
									coordinates: [parseFloat(entry.longitude), parseFloat(entry.latitude)]
								},
								properties: entry  // Store all entry data as feature properties
							});
							floodingFeatureCount++;
						}
					});

					// Apply styling to the flooding Data layer...
					map.data.setStyle({
						icon: {
							path: google.maps.SymbolPath.CIRCLE,
							fillColor: '#87ceeb9c',
							fillOpacity: 0.9,
							strokeColor: '#4682b496',
							strokeWeight: 1.0,
							scale: 5
						}
					});

					parent.overlayInfoWindowListenerHandle = map.data.addListener('click', function(event) {
						const feature = event.feature;
						// Extract properties from the feature...
						const data = {
							site_name: feature.getProperty('site_name'),
							description: feature.getProperty('description'),
							gage_height: feature.getProperty('gage_height'),
							rp_elevation: feature.getProperty('rp_elevation'),
							nwis_id: feature.getProperty('nwis_id')
						}
						parent.overlayInfoWindow.setContent(`
							<div style="line-height:1.5;overflow:hidden;color:#333;max-width:300px;">
								<h3 style="margin:0 0 8px 0;color:#4682B4;">${data.site_name || 'Unknown Site'}</h3>
								<p style="margin:0;font-size:13px;">${data.description || 'No description available'}</p>
								<div style="margin-top:12px;">
									<div style="position:relative;width:100%;height:auto;">
										<!-- Flooding level (red) -->
										${data.gage_height && data.rp_elevation ? `
										<div style="position:relative;width:80%;margin:0 auto;">
											<svg style="position:absolute;top:-8px;left:0;width:100%;height:10px;" viewBox="0 0 100 10" preserveAspectRatio="none">
												<path d="M0,10 L0,5 Q12.5,0 25,5 T50,5 T75,5 T100,5 L100,10 Z" fill="#ffb3b3"/>
											</svg>
											<div style="
												background: linear-gradient(to bottom, #ffb3b3, #fe8787);
												height:${Math.max(20, Math.min(60, (parseFloat(data.gage_height) - parseFloat(data.rp_elevation)) * 5))}px;
												width:100%;
												border-radius:4px 4px 0 0;
												display:flex;
												align-items:center;
												justify-content:center;
												color:#8b0000;
												font-weight:bold;
												font-size:12px;
											">
												<span style="margin-top: -5px; filter: drop-shadow(0 0 4px white);">+${(parseFloat(data.gage_height) - parseFloat(data.rp_elevation)).toFixed(2)} ft</span>
											</div>
											<!-- Normal water level (blue) with wavy top -->
											<div style="position:relative;">
												<svg style="position:absolute;top:-8px;left:0;width:100%;height:10px;" viewBox="0 0 100 10" preserveAspectRatio="none">
													<path d="M0,10 L0,5 Q12.5,0 25,5 T50,5 T75,5 T100,5 L100,10 Z" fill="#87CEEB"/>
												</svg>
												<div style="
													background: linear-gradient(to bottom, #87CEEB, #8ea6ba);
													height:40px;
													width:100%;
													border-radius:0 0 4px 4px;
													display:flex;
													align-items:center;
													justify-content:center;
													color:#142d47;
													font-weight:bold;
													font-size:12px;
												">
													<span style="filter: drop-shadow(0 0 4px white);">Normal Elevation: ${parseFloat(data.rp_elevation).toFixed(2)} ft</span>
												</div>
											</div>
										</div>
										` : ''}
									</div>
								</div>
								<div style="margin: 30px 0 5px 0;">
									<a href="https://waterdata.usgs.gov/monitoring-location/USGS-${data.nwis_id}/all-graphs/#period=P7D" target="_blank" style="background-color: dodgerblue; padding: 3px 7px; border-radius: 5px; color: white; text-decoration: none; font-size: 1.05em; font-weight: 400; display: inline-flex; align-items: center; gap: 5px;" title="View USGS monitoring station details">
										<svg xmlns="http://www.w3.org/2000/svg" class="infoDialogIcon" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M384 64C366.3 64 352 78.3 352 96C352 113.7 366.3 128 384 128L466.7 128L265.3 329.4C252.8 341.9 252.8 362.2 265.3 374.7C277.8 387.2 298.1 387.2 310.6 374.7L512 173.3L512 256C512 273.7 526.3 288 544 288C561.7 288 576 273.7 576 256L576 96C576 78.3 561.7 64 544 64L384 64zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 416C480 398.3 465.7 384 448 384C430.3 384 416 398.3 416 416L416 496C416 504.8 408.8 512 400 512L144 512C135.2 512 128 504.8 128 496L128 240C128 231.2 135.2 224 144 224L224 224C241.7 224 256 209.7 256 192C256 174.3 241.7 160 224 160L144 160z"/></svg>
										USGS monitoring station details
									</a>
								</div>
							</div>
						`);
						closeAllInfoWindows();
						parent.overlayInfoWindow.setPosition(event.latLng);
						parent.overlayInfoWindow.open(map);
					});
				} catch (error) {
					console.error("Failed to fetch flooding data:", error);
				}
			}
		}
	}

	// Function called when the "Reset Zoom" button is pressed...
	function resetZoom() {
		// If there's only 1 marker, avoid zooming in super close (i.e. use the default zoom level 3)...
		if (markers.length > 0) {
			// Add padding to avoid markers appearing under the map's UI controls...
			map.fitBounds(bounds, {
				top: 70,
				right: 70,
				bottom: 70,
				left: 70
			});
		}
		// Reset the tilt & heading back to their original values...
		mapTilt = defaultMapTilt;
		mapHeading = defaultMapHeading;
		map.setTilt(mapTilt);
		map.setHeading(mapHeading);
	}

	// Function to capture presses of the Enter key in the 'Group Filter' field (without this the widget refreshes in an error)...
	function groupkeyHandler(e) {
		// Get the keycode of which key was pressed...
		let key = e.keyCode || e.which;
		// If the key was the Enter/Return key...
		if (key == 13) {
			// Stop the form from submitting...
			e.preventDefault();
			// Refresh the group data...
			refreshGroupData();
			saveMapOptionsToCookie();
		}
	}

	function toggleMiscOptions() {
		if (_dom.optionsToggleArea.style.display == "flex") {
			_dom.optionsToggleArea.style.display = "none";
			_dom.gearIcon.style.fill = "#aaa";
			_dom.gearIconChevron.style.display = "none";
		} else {
			_dom.optionsToggleArea.style.display = "flex";
			_dom.gearIcon.style.fill = "blue";
			_dom.gearIconChevron.style.display = "block";
		}
	}

	function waitForElm(selector) {
		return new Promise(resolve => {
			if (document.querySelector(selector)) {
				return resolve(document.querySelector(selector));
			}

			const observer = new MutationObserver(mutations => {
				if (document.querySelector(selector)) {
					observer.disconnect();
					resolve(document.querySelector(selector));
				}
			});

			// If you get "parameter 1 is not of type 'Node'" error, see https://stackoverflow.com/a/77855838/492336
			observer.observe(document.body, {
				childList: true,
				subtree: true
			});
		});
	}
</script>

<!-- If used as an embedded widget outside a normal LM dashboard then trying to load Google's marker clustering script or Font Awesome's CSS externally breaks due to XSS, so I'm embedding the entire script here. Normally we would load this from https://unpkg.com/@googlemaps/markerclusterer@2.5.3/dist/index.min.js and https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/svg-with-js.min.css respectively.-->
<script>
	const markerClusterer=function(t){"use strict";function e(t,e){var s={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(s[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(t);o<r.length;o++)e.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(t,r[o])&&(s[r[o]]=t[r[o]])}return s}class s{static isAdvancedMarkerAvailable(t){return google.maps.marker&&!0===t.getMapCapabilities().isAdvancedMarkersAvailable}static isAdvancedMarker(t){return google.maps.marker&&t instanceof google.maps.marker.AdvancedMarkerElement}static setMap(t,e){this.isAdvancedMarker(t)?t.map=e:t.setMap(e)}static getPosition(t){if(this.isAdvancedMarker(t)){if(t.position){if(t.position instanceof google.maps.LatLng)return t.position;if(t.position.lat&&t.position.lng)return new google.maps.LatLng(t.position.lat,t.position.lng)}return new google.maps.LatLng(null)}return t.getPosition()}static getVisible(t){return!!this.isAdvancedMarker(t)||t.getVisible()}}class r{constructor(t){let{markers:e,position:s}=t;this.markers=e,s&&(s instanceof google.maps.LatLng?this._position=s:this._position=new google.maps.LatLng(s))}get bounds(){if(0===this.markers.length&&!this._position)return;const t=new google.maps.LatLngBounds(this._position,this._position);for(const e of this.markers)t.extend(s.getPosition(e));return t}get position(){return this._position||this.bounds.getCenter()}get count(){return this.markers.filter((t=>s.getVisible(t))).length}push(t){this.markers.push(t)}delete(){this.marker&&(s.setMap(this.marker,null),this.marker=void 0),this.markers.length=0}}const o=(t,e,r,o)=>{const n=i(t.getBounds(),e,o);return r.filter((t=>n.contains(s.getPosition(t))))},i=(t,e,s)=>{const{northEast:r,southWest:o}=h(t,e),i=l({northEast:r,southWest:o},s);return c(i,e)},n=(t,e,s)=>{const r=i(t,e,s),o=r.getNorthEast(),n=r.getSouthWest();return[n.lng(),n.lat(),o.lng(),o.lat()]},a=(t,e)=>{const s=(e.lat-t.lat)*Math.PI/180,r=(e.lng-t.lng)*Math.PI/180,o=Math.sin(s/2),i=Math.sin(r/2),n=o*o+Math.cos(t.lat*Math.PI/180)*Math.cos(e.lat*Math.PI/180)*i*i;return 6371*(2*Math.atan2(Math.sqrt(n),Math.sqrt(1-n)))},h=(t,e)=>({northEast:e.fromLatLngToDivPixel(t.getNorthEast()),southWest:e.fromLatLngToDivPixel(t.getSouthWest())}),l=(t,e)=>{let{northEast:s,southWest:r}=t;return s.x+=e,s.y-=e,r.x-=e,r.y+=e,{northEast:s,southWest:r}},c=(t,e)=>{let{northEast:s,southWest:r}=t;const o=e.fromDivPixelToLatLng(r),i=e.fromDivPixelToLatLng(s);return new google.maps.LatLngBounds(o,i)};class u{constructor(t){let{maxZoom:e=16}=t;this.maxZoom=e}noop(t){let{markers:e}=t;return m(e)}}class p extends u{constructor(t){var{viewportPadding:s=60}=t;super(e(t,["viewportPadding"])),this.viewportPadding=60,this.viewportPadding=s}calculate(t){let{markers:e,map:s,mapCanvasProjection:r}=t;return s.getZoom()>=this.maxZoom?{clusters:this.noop({markers:e}),changed:!1}:{clusters:this.cluster({markers:o(s,r,e,this.viewportPadding),map:s,mapCanvasProjection:r})}}}const m=t=>t.map((t=>new r({position:s.getPosition(t),markers:[t]})));function d(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var g=function t(e,s){if(e===s)return!0;if(e&&s&&"object"==typeof e&&"object"==typeof s){if(e.constructor!==s.constructor)return!1;var r,o,i;if(Array.isArray(e)){if((r=e.length)!=s.length)return!1;for(o=r;0!=o--;)if(!t(e[o],s[o]))return!1;return!0}if(e.constructor===RegExp)return e.source===s.source&&e.flags===s.flags;if(e.valueOf!==Object.prototype.valueOf)return e.valueOf()===s.valueOf();if(e.toString!==Object.prototype.toString)return e.toString()===s.toString();if((r=(i=Object.keys(e)).length)!==Object.keys(s).length)return!1;for(o=r;0!=o--;)if(!Object.prototype.hasOwnProperty.call(s,i[o]))return!1;for(o=r;0!=o--;){var n=i[o];if(!t(e[n],s[n]))return!1}return!0}return e!=e&&s!=s},f=d(g);const k=[Int8Array,Uint8Array,Uint8ClampedArray,Int16Array,Uint16Array,Int32Array,Uint32Array,Float32Array,Float64Array];class w{static from(t){if(!(t instanceof ArrayBuffer))throw new Error("Data must be an instance of ArrayBuffer.");const[e,s]=new Uint8Array(t,0,2);if(219!==e)throw new Error("Data does not appear to be in a KDBush format.");const r=s>>4;if(1!==r)throw new Error(`Got v${r} data when expected v1.`);const o=k[15&s];if(!o)throw new Error("Unrecognized array type.");const[i]=new Uint16Array(t,2,1),[n]=new Uint32Array(t,4,1);return new w(n,i,o,t)}constructor(t,e=64,s=Float64Array,r){if(isNaN(t)||t<0)throw new Error(`Unpexpected numItems value: ${t}.`);this.numItems=+t,this.nodeSize=Math.min(Math.max(+e,2),65535),this.ArrayType=s,this.IndexArrayType=t<65536?Uint16Array:Uint32Array;const o=k.indexOf(this.ArrayType),i=2*t*this.ArrayType.BYTES_PER_ELEMENT,n=t*this.IndexArrayType.BYTES_PER_ELEMENT,a=(8-n%8)%8;if(o<0)throw new Error(`Unexpected typed array class: ${s}.`);r&&r instanceof ArrayBuffer?(this.data=r,this.ids=new this.IndexArrayType(this.data,8,t),this.coords=new this.ArrayType(this.data,8+n+a,2*t),this._pos=2*t,this._finished=!0):(this.data=new ArrayBuffer(8+i+n+a),this.ids=new this.IndexArrayType(this.data,8,t),this.coords=new this.ArrayType(this.data,8+n+a,2*t),this._pos=0,this._finished=!1,new Uint8Array(this.data,0,2).set([219,16+o]),new Uint16Array(this.data,2,1)[0]=e,new Uint32Array(this.data,4,1)[0]=t)}add(t,e){const s=this._pos>>1;return this.ids[s]=s,this.coords[this._pos++]=t,this.coords[this._pos++]=e,s}finish(){const t=this._pos>>1;if(t!==this.numItems)throw new Error(`Added ${t} items when expected ${this.numItems}.`);return y(this.ids,this.coords,this.nodeSize,0,this.numItems-1,0),this._finished=!0,this}range(t,e,s,r){if(!this._finished)throw new Error("Data not yet indexed - call index.finish().");const{ids:o,coords:i,nodeSize:n}=this,a=[0,o.length-1,0],h=[];for(;a.length;){const l=a.pop()||0,c=a.pop()||0,u=a.pop()||0;if(c-u<=n){for(let n=u;n<=c;n++){const a=i[2*n],l=i[2*n+1];a>=t&&a<=s&&l>=e&&l<=r&&h.push(o[n])}continue}const p=u+c>>1,m=i[2*p],d=i[2*p+1];m>=t&&m<=s&&d>=e&&d<=r&&h.push(o[p]),(0===l?t<=m:e<=d)&&(a.push(u),a.push(p-1),a.push(1-l)),(0===l?s>=m:r>=d)&&(a.push(p+1),a.push(c),a.push(1-l))}return h}within(t,e,s){if(!this._finished)throw new Error("Data not yet indexed - call index.finish().");const{ids:r,coords:o,nodeSize:i}=this,n=[0,r.length-1,0],a=[],h=s*s;for(;n.length;){const l=n.pop()||0,c=n.pop()||0,u=n.pop()||0;if(c-u<=i){for(let s=u;s<=c;s++)C(o[2*s],o[2*s+1],t,e)<=h&&a.push(r[s]);continue}const p=u+c>>1,m=o[2*p],d=o[2*p+1];C(m,d,t,e)<=h&&a.push(r[p]),(0===l?t-s<=m:e-s<=d)&&(n.push(u),n.push(p-1),n.push(1-l)),(0===l?t+s>=m:e+s>=d)&&(n.push(p+1),n.push(c),n.push(1-l))}return a}}function y(t,e,s,r,o,i){if(o-r<=s)return;const n=r+o>>1;M(t,e,n,r,o,i),y(t,e,s,r,n-1,1-i),y(t,e,s,n+1,o,1-i)}function M(t,e,s,r,o,i){for(;o>r;){if(o-r>600){const n=o-r+1,a=s-r+1,h=Math.log(n),l=.5*Math.exp(2*h/3),c=.5*Math.sqrt(h*l*(n-l)/n)*(a-n/2<0?-1:1);M(t,e,s,Math.max(r,Math.floor(s-a*l/n+c)),Math.min(o,Math.floor(s+(n-a)*l/n+c)),i)}const n=e[2*s+i];let a=r,h=o;for(v(t,e,r,s),e[2*o+i]>n&&v(t,e,r,o);a<h;){for(v(t,e,a,h),a++,h--;e[2*a+i]<n;)a++;for(;e[2*h+i]>n;)h--}e[2*r+i]===n?v(t,e,r,h):(h++,v(t,e,h,o)),h<=s&&(r=h+1),s<=h&&(o=h-1)}}function v(t,e,s,r){x(t,s,r),x(e,2*s,2*r),x(e,2*s+1,2*r+1)}function x(t,e,s){const r=t[e];t[e]=t[s],t[s]=r}function C(t,e,s,r){const o=t-s,i=e-r;return o*o+i*i}const P={minZoom:0,maxZoom:16,minPoints:2,radius:40,extent:512,nodeSize:64,log:!1,generateId:!1,reduce:null,map:t=>t},_=Math.fround||(E=new Float32Array(1),t=>(E[0]=+t,E[0]));var E;const A=3,b=5,L=6;class O{constructor(t){this.options=Object.assign(Object.create(P),t),this.trees=new Array(this.options.maxZoom+1),this.stride=this.options.reduce?7:6,this.clusterProps=[]}load(t){const{log:e,minZoom:s,maxZoom:r}=this.options;e&&console.time("total time");const o=`prepare ${t.length} points`;e&&console.time(o),this.points=t;const i=[];for(let e=0;e<t.length;e++){const s=t[e];if(!s.geometry)continue;const[r,o]=s.geometry.coordinates,n=_(T(r)),a=_(j(o));i.push(n,a,1/0,e,-1,1),this.options.reduce&&i.push(0)}let n=this.trees[r+1]=this._createTree(i);e&&console.timeEnd(o);for(let t=r;t>=s;t--){const s=+Date.now();n=this.trees[t]=this._createTree(this._cluster(n,t)),e&&console.log("z%d: %d clusters in %dms",t,n.numItems,+Date.now()-s)}return e&&console.timeEnd("total time"),this}getClusters(t,e){let s=((t[0]+180)%360+360)%360-180;const r=Math.max(-90,Math.min(90,t[1]));let o=180===t[2]?180:((t[2]+180)%360+360)%360-180;const i=Math.max(-90,Math.min(90,t[3]));if(t[2]-t[0]>=360)s=-180,o=180;else if(s>o){const t=this.getClusters([s,r,180,i],e),n=this.getClusters([-180,r,o,i],e);return t.concat(n)}const n=this.trees[this._limitZoom(e)],a=n.range(T(s),j(i),T(o),j(r)),h=n.data,l=[];for(const t of a){const e=this.stride*t;l.push(h[e+b]>1?Z(h,e,this.clusterProps):this.points[h[e+A]])}return l}getChildren(t){const e=this._getOriginId(t),s=this._getOriginZoom(t),r="No cluster with the specified id.",o=this.trees[s];if(!o)throw new Error(r);const i=o.data;if(e*this.stride>=i.length)throw new Error(r);const n=this.options.radius/(this.options.extent*Math.pow(2,s-1)),a=i[e*this.stride],h=i[e*this.stride+1],l=o.within(a,h,n),c=[];for(const e of l){const s=e*this.stride;i[s+4]===t&&c.push(i[s+b]>1?Z(i,s,this.clusterProps):this.points[i[s+A]])}if(0===c.length)throw new Error(r);return c}getLeaves(t,e,s){e=e||10,s=s||0;const r=[];return this._appendLeaves(r,t,e,s,0),r}getTile(t,e,s){const r=this.trees[this._limitZoom(t)],o=Math.pow(2,t),{extent:i,radius:n}=this.options,a=n/i,h=(s-a)/o,l=(s+1+a)/o,c={features:[]};return this._addTileFeatures(r.range((e-a)/o,h,(e+1+a)/o,l),r.data,e,s,o,c),0===e&&this._addTileFeatures(r.range(1-a/o,h,1,l),r.data,o,s,o,c),e===o-1&&this._addTileFeatures(r.range(0,h,a/o,l),r.data,-1,s,o,c),c.features.length?c:null}getClusterExpansionZoom(t){let e=this._getOriginZoom(t)-1;for(;e<=this.options.maxZoom;){const s=this.getChildren(t);if(e++,1!==s.length)break;t=s[0].properties.cluster_id}return e}_appendLeaves(t,e,s,r,o){const i=this.getChildren(e);for(const e of i){const i=e.properties;if(i&&i.cluster?o+i.point_count<=r?o+=i.point_count:o=this._appendLeaves(t,i.cluster_id,s,r,o):o<r?o++:t.push(e),t.length===s)break}return o}_createTree(t){const e=new w(t.length/this.stride|0,this.options.nodeSize,Float32Array);for(let s=0;s<t.length;s+=this.stride)e.add(t[s],t[s+1]);return e.finish(),e.data=t,e}_addTileFeatures(t,e,s,r,o,i){for(const n of t){const t=n*this.stride,a=e[t+b]>1;let h,l,c;if(a)h=I(e,t,this.clusterProps),l=e[t],c=e[t+1];else{const s=this.points[e[t+A]];h=s.properties;const[r,o]=s.geometry.coordinates;l=T(r),c=j(o)}const u={type:1,geometry:[[Math.round(this.options.extent*(l*o-s)),Math.round(this.options.extent*(c*o-r))]],tags:h};let p;p=a||this.options.generateId?e[t+A]:this.points[e[t+A]].id,void 0!==p&&(u.id=p),i.features.push(u)}}_limitZoom(t){return Math.max(this.options.minZoom,Math.min(Math.floor(+t),this.options.maxZoom+1))}_cluster(t,e){const{radius:s,extent:r,reduce:o,minPoints:i}=this.options,n=s/(r*Math.pow(2,e)),a=t.data,h=[],l=this.stride;for(let s=0;s<a.length;s+=l){if(a[s+2]<=e)continue;a[s+2]=e;const r=a[s],c=a[s+1],u=t.within(a[s],a[s+1],n),p=a[s+b];let m=p;for(const t of u){const s=t*l;a[s+2]>e&&(m+=a[s+b])}if(m>p&&m>=i){let t,i=r*p,n=c*p,d=-1;const g=((s/l|0)<<5)+(e+1)+this.points.length;for(const r of u){const h=r*l;if(a[h+2]<=e)continue;a[h+2]=e;const c=a[h+b];i+=a[h]*c,n+=a[h+1]*c,a[h+4]=g,o&&(t||(t=this._map(a,s,!0),d=this.clusterProps.length,this.clusterProps.push(t)),o(t,this._map(a,h)))}a[s+4]=g,h.push(i/m,n/m,1/0,g,-1,m),o&&h.push(d)}else{for(let t=0;t<l;t++)h.push(a[s+t]);if(m>1)for(const t of u){const s=t*l;if(!(a[s+2]<=e)){a[s+2]=e;for(let t=0;t<l;t++)h.push(a[s+t])}}}}return h}_getOriginId(t){return t-this.points.length>>5}_getOriginZoom(t){return(t-this.points.length)%32}_map(t,e,s){if(t[e+b]>1){const r=this.clusterProps[t[e+L]];return s?Object.assign({},r):r}const r=this.points[t[e+A]].properties,o=this.options.map(r);return s&&o===r?Object.assign({},o):o}}function Z(t,e,s){return{type:"Feature",id:t[e+A],properties:I(t,e,s),geometry:{type:"Point",coordinates:[(r=t[e],360*(r-.5)),S(t[e+1])]}};var r}function I(t,e,s){const r=t[e+b],o=r>=1e4?`${Math.round(r/1e3)}k`:r>=1e3?Math.round(r/100)/10+"k":r,i=t[e+L],n=-1===i?{}:Object.assign({},s[i]);return Object.assign(n,{cluster:!0,cluster_id:t[e+A],point_count:r,point_count_abbreviated:o})}function T(t){return t/360+.5}function j(t){const e=Math.sin(t*Math.PI/180),s=.5-.25*Math.log((1+e)/(1-e))/Math.PI;return s<0?0:s>1?1:s}function S(t){const e=(180-360*t)*Math.PI/180;return 360*Math.atan(Math.exp(e))/Math.PI-90}class z extends u{constructor(t){var{maxZoom:s,radius:r=60}=t,o=e(t,["maxZoom","radius"]);super({maxZoom:s}),this.state={zoom:-1},this.superCluster=new O(Object.assign({maxZoom:this.maxZoom,radius:r},o))}calculate(t){let e=!1;const r={zoom:t.map.getZoom()};if(!f(t.markers,this.markers)){e=!0,this.markers=[...t.markers];const r=this.markers.map((t=>{const e=s.getPosition(t);return{type:"Feature",geometry:{type:"Point",coordinates:[e.lng(),e.lat()]},properties:{marker:t}}}));this.superCluster.load(r)}return e||(this.state.zoom<=this.maxZoom||r.zoom<=this.maxZoom)&&(e=!f(this.state,r)),this.state=r,e&&(this.clusters=this.cluster(t)),{clusters:this.clusters,changed:e}}cluster(t){let{map:e}=t;return this.superCluster.getClusters([-180,-90,180,90],Math.round(e.getZoom())).map((t=>this.transformCluster(t)))}transformCluster(t){let{geometry:{coordinates:[e,o]},properties:i}=t;if(i.cluster)return new r({markers:this.superCluster.getLeaves(i.cluster_id,1/0).map((t=>t.properties.marker)),position:{lat:o,lng:e}});const n=i.marker;return new r({markers:[n],position:s.getPosition(n)})}}class U{constructor(t,e){this.markers={sum:t.length};const s=e.map((t=>t.count)),r=s.reduce(((t,e)=>t+e),0);this.clusters={count:e.length,markers:{mean:r/e.length,sum:r,min:Math.min(...s),max:Math.max(...s)}}}}class B{render(t,e,r){let{count:o,position:i}=t;const n=`<svg fill="${o>Math.max(10,e.clusters.markers.mean)?"#ff0000":"#0000ff"}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" width="50" height="50">\n<circle cx="120" cy="120" opacity=".6" r="70" />\n<circle cx="120" cy="120" opacity=".3" r="90" />\n<circle cx="120" cy="120" opacity=".2" r="110" />\n<text x="50%" y="50%" style="fill:#fff" text-anchor="middle" font-size="50" dominant-baseline="middle" font-family="roboto,arial,sans-serif">${o}</text>\n</svg>`,a=`Cluster of ${o} markers`,h=Number(google.maps.Marker.MAX_ZINDEX)+o;if(s.isAdvancedMarkerAvailable(r)){const t=(new DOMParser).parseFromString(n,"image/svg+xml").documentElement;t.setAttribute("transform","translate(0 25)");const e={map:r,position:i,zIndex:h,title:a,content:t};return new google.maps.marker.AdvancedMarkerElement(e)}const l={position:i,zIndex:h,title:a,icon:{url:`data:image/svg+xml;base64,${btoa(n)}`,anchor:new google.maps.Point(25,25)}};return new google.maps.Marker(l)}}class D{constructor(){!function(t,e){for(let s in e.prototype)t.prototype[s]=e.prototype[s]}(D,google.maps.OverlayView)}}var N;t.MarkerClustererEvents=void 0,(N=t.MarkerClustererEvents||(t.MarkerClustererEvents={})).CLUSTERING_BEGIN="clusteringbegin",N.CLUSTERING_END="clusteringend",N.CLUSTER_CLICK="click";const F=(t,e,s)=>{s.fitBounds(e.bounds)};return t.AbstractAlgorithm=u,t.AbstractViewportAlgorithm=p,t.Cluster=r,t.ClusterStats=U,t.DefaultRenderer=B,t.GridAlgorithm=class extends p{constructor(t){var{maxDistance:s=4e4,gridSize:r=40}=t;super(e(t,["maxDistance","gridSize"])),this.clusters=[],this.state={zoom:-1},this.maxDistance=s,this.gridSize=r}calculate(t){let{markers:e,map:s,mapCanvasProjection:r}=t;const i={zoom:s.getZoom()};let n=!1;return this.state.zoom>=this.maxZoom&&i.zoom>=this.maxZoom||(n=!f(this.state,i)),this.state=i,s.getZoom()>=this.maxZoom?{clusters:this.noop({markers:e}),changed:n}:{clusters:this.cluster({markers:o(s,r,e,this.viewportPadding),map:s,mapCanvasProjection:r})}}cluster(t){let{markers:e,map:s,mapCanvasProjection:r}=t;return this.clusters=[],e.forEach((t=>{this.addToClosestCluster(t,s,r)})),this.clusters}addToClosestCluster(t,e,o){let n=this.maxDistance,h=null;for(let e=0;e<this.clusters.length;e++){const r=this.clusters[e],o=a(r.bounds.getCenter().toJSON(),s.getPosition(t).toJSON());o<n&&(n=o,h=r)}if(h&&i(h.bounds,o,this.gridSize).contains(s.getPosition(t)))h.push(t);else{const e=new r({markers:[t]});this.clusters.push(e)}}},t.MarkerClusterer=class extends D{constructor(t){let{map:e,markers:s=[],algorithmOptions:r={},algorithm:o=new z(r),renderer:i=new B,onClusterClick:n=F}=t;super(),this.markers=[...s],this.clusters=[],this.algorithm=o,this.renderer=i,this.onClusterClick=n,e&&this.setMap(e)}addMarker(t,e){this.markers.includes(t)||(this.markers.push(t),e||this.render())}addMarkers(t,e){t.forEach((t=>{this.addMarker(t,!0)})),e||this.render()}removeMarker(t,e){const r=this.markers.indexOf(t);return-1!==r&&(s.setMap(t,null),this.markers.splice(r,1),e||this.render(),!0)}removeMarkers(t,e){let s=!1;return t.forEach((t=>{s=this.removeMarker(t,!0)||s})),s&&!e&&this.render(),s}clearMarkers(t){this.markers.length=0,t||this.render()}render(){const e=this.getMap();if(e instanceof google.maps.Map&&e.getProjection()){google.maps.event.trigger(this,t.MarkerClustererEvents.CLUSTERING_BEGIN,this);const{clusters:r,changed:o}=this.algorithm.calculate({markers:this.markers,map:e,mapCanvasProjection:this.getProjection()});if(o||null==o){const t=new Set;for(const e of r)1==e.markers.length&&t.add(e.markers[0]);const e=[];for(const r of this.clusters)null!=r.marker&&(1==r.markers.length?t.has(r.marker)||s.setMap(r.marker,null):e.push(r.marker));this.clusters=r,this.renderClusters(),requestAnimationFrame((()=>e.forEach((t=>s.setMap(t,null)))))}google.maps.event.trigger(this,t.MarkerClustererEvents.CLUSTERING_END,this)}}onAdd(){this.idleListener=this.getMap().addListener("idle",this.render.bind(this)),this.render()}onRemove(){google.maps.event.removeListener(this.idleListener),this.reset()}reset(){this.markers.forEach((t=>s.setMap(t,null))),this.clusters.forEach((t=>t.delete())),this.clusters=[]}renderClusters(){const e=new U(this.markers,this.clusters),r=this.getMap();this.clusters.forEach((o=>{1===o.markers.length?o.marker=o.markers[0]:(o.marker=this.renderer.render(o,e,r),o.markers.forEach((t=>s.setMap(t,null))),this.onClusterClick&&o.marker.addListener("click",(e=>{google.maps.event.trigger(this,t.MarkerClustererEvents.CLUSTER_CLICK,o),this.onClusterClick(e,o,r)}))),s.setMap(o.marker,r)}))}},t.MarkerUtils=s,t.NoopAlgorithm=class extends u{constructor(t){super(e(t,[]))}calculate(t){let{markers:e,map:s,mapCanvasProjection:r}=t;return{clusters:this.cluster({markers:e,map:s,mapCanvasProjection:r}),changed:!1}}cluster(t){return this.noop(t)}},t.SuperClusterAlgorithm=z,t.SuperClusterViewportAlgorithm=class extends p{constructor(t){var{maxZoom:s,radius:r=60,viewportPadding:o=60}=t,i=e(t,["maxZoom","radius","viewportPadding"]);super({maxZoom:s,viewportPadding:o}),this.superCluster=new O(Object.assign({maxZoom:this.maxZoom,radius:r},i)),this.state={zoom:-1,view:[0,0,0,0]}}calculate(t){const e={zoom:Math.round(t.map.getZoom()),view:n(t.map.getBounds(),t.mapCanvasProjection,this.viewportPadding)};let r=!f(this.state,e);if(!f(t.markers,this.markers)){r=!0,this.markers=[...t.markers];const e=this.markers.map((t=>{const e=s.getPosition(t);return{type:"Feature",geometry:{type:"Point",coordinates:[e.lng(),e.lat()]},properties:{marker:t}}}));this.superCluster.load(e)}return r&&(this.clusters=this.cluster(t),this.state=e),{clusters:this.clusters,changed:r}}cluster(t){let{map:e,mapCanvasProjection:s}=t;const r={zoom:Math.round(e.getZoom()),view:n(e.getBounds(),s,this.viewportPadding)};return this.superCluster.getClusters(r.view,r.zoom).map((t=>this.transformCluster(t)))}transformCluster(t){let{geometry:{coordinates:[e,o]},properties:i}=t;if(i.cluster)return new r({markers:this.superCluster.getLeaves(i.cluster_id,1/0).map((t=>t.properties.marker)),position:{lat:o,lng:e}});const n=i.marker;return new r({markers:[n],position:s.getPosition(n)})}},t.defaultOnClusterClickHandler=F,t.distanceBetweenPoints=a,t.extendBoundsToPaddedViewport=i,t.extendPixelBounds=l,t.filterMarkersToPaddedViewport=o,t.getPaddedViewport=n,t.noop=m,t.pixelBoundsToLatLngBounds=c,Object.defineProperty(t,"__esModule",{value:!0}),t}({});
//# sourceMappingURL=index.min.js.map
</script>