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".
	* 'MapOnlyShowConnectedItems': If "true" then will only show items that participate in active map connections. Default is "false".
	* 'MapShowConnectingLines': If "false" then will hide status lines between connected endpoints. Default is "true".
	* '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".
	* 'MapConnectionCurvature': Screen-pixel offset used to separate parallel connection lines between the same endpoints. Set to 0 for straight lines. Default is 18.
	* 'MapUseGeodesicLines': If "false" then connection lines are drawn as straight Mercator lines instead of great circles. Default is "true".
	* '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.

	CODING CONSTRAINTS (LogicMonitor HTML sanitizer):
	* Use plain ASCII only in widget source (printable 0x20-0x7E plus tab/newline).
	* Do not use em dashes, en dashes, curly quotes, ellipsis, or other non-ASCII punctuation.
	* Use hyphen-minus (-) instead of em/en dashes, straight ' and " for quotes, and ... for ellipsis.
-->

<script data-better-map-defaults>
	(function(script) {
		var registry = window.__betterMapWidgetRegistry = window.__betterMapWidgetRegistry || { instances: Object.create(null) };
		registry.pendingDefaults = registry.pendingDefaults || [];
		var defaults = {};

	defaults.version = "3.59";
	defaults.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.59</h3>
		<ul>
			<li>Added the ability to use geodesic (great circle) connection lines instead of Mercator lines. This is useful for long-distance connections where the Mercator lines might take non-optimal paths. Changeable via a new dashboard token named "MapUseGeodesicLines" set to either true or false (default is true).</li>
			<li>Replaced use of some non-ASCII characters with their ASCII equivalents.</li>
			<li>Changed some portions of code that LogicMonitor's HTML sanitizer kept breaking.</li>
			<li>Added the ability to only show items with active connections. Changeable via a new dashboard token named &quot;MapOnlyShowConnectedItems&quot; set to either true or false (default is false).</li>
			<li>Added ability to show/hide status lines between items on the map. Changeable via a new dashboard token named &quot;MapShowConnectingLines&quot; set to either true or false (default is true).</li>
		</ul>
		<h3>Version 3.58</h3>
		<ul>
			<li>Overlapping connection lines are now displayed as parallel lines with a specified curvature. (Thank you ES & CH for your feedback!)</li>
		</ul>
		<h3>Version 3.57</h3>
		<ul>
			<li>Map toolbar option cookies are now scoped per widget instance (dashboard ID + widget ID). Existing dashboard-only cookies are still read and are migrated to the new format on the next save.</li>
			<li>Fix for Google Maps trying to reinitialize when commiting code changes to an existing widget instance.</li>
			<li>Updated to use MarkerClusterer v2.6.2.</li>
		</ul>
		<h3>Version 3.56</h3>
		<ul>
			<li>Fixed all toolbar options being saved to cookie whenever any toolbar option was changed.</li>
			<li>Fixed path reset button not appearing on initial load when the value saved to cookie was different from the default value.</li>
		</ul>
		<h3>Version 3.55</h3>
		<ul>
			<li>Migrated the lingering reference to Google's legacy Marker class to the newer AdvancedMarkerElement.</li>
		</ul>
		<h3>Version 3.54</h3>
		<ul>
			<li>Improved display of wildfire information.</li>
			<li>Fixed issue with variable scoping when multiple instances of the widget are used on the same page.</li>
			<li>Fixed Google Maps' confusing default behavior of showing popups when clicking state/territory names.</li>
		</ul>
		<h3>Version 3.53</h3>
		<ul>
			<li>Added a button to reset the group filter if different from the default value.</li>
			<li>Fixed issue with variable scoping when multiple instances of the widget are used on the same page.</li>
			<li>Added some missing comments to the code.</li>
		</ul>
		<h3>Version 3.51</h3>
		<ul>
			<li>Cookies are now specific to each dashboard.</li>
		</ul>
		<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...
	defaults.apiBearerToken = "";
	defaults.lmAPIID = "";
	defaults.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'...
	defaults.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'...
	defaults.mapLocationProperty = "location";

	// Preferred map style. Available options: "silver" (the default), "standard", "dark", "aubergine", "silverblue", "satellite", or "satellite-light"...
	defaults.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'...
	defaults.showCleared = true;
	defaults.showWarnings = true;
	defaults.showErrors = true;
	defaults.showCriticals = true;
	defaults.showSDT = true;
	defaults.showOnlyConnected = false;
	defaults.showConnections = true;

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

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

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

	// Marker style. Options: "pins" (pin with icon) or "circles" (color-coded circle)...
	defaults.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"...
	defaults.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"...
	defaults.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"...
	defaults.hideMapOptionsByDefault = false;

	// Whether to show the sidebar by default...
	// You can set it here or in a dashboard token named "ShowMapSidebar"...
	defaults.showMapSidebarByDefault = false;
	defaults.sidebarDefaultWidth = 300;
	defaults.sidebarMinWidth = 220;
	defaults.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"...
	defaults.autoResetMapOnRefresh = false;

	// When true will not refresh the data on a timed interval (useful ONLY during development)...
	defaults.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)...
	defaults.fullRefreshInterval = 0;

	// Optional angle & heading for the Google Map...
	defaults.showMapTiltControls = false;
	defaults.mapTilt = 0;
	defaults.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)...
	defaults.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...
	defaults.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")...
	defaults.mapGestureHandling = "cooperative";
	// Whether to show road labels...
	defaults.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"...
	defaults.displayProps = "";

	// Property to look for connecting information in...
	defaults.connectionInfoProp = "auto.custom_map_connection_data";
	// Stroke weight of connecting lines...
	defaults.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)...
	// You can set it here or in a dashboard token named "MapUseGeodesicLines"...
	defaults.useGeodesicLines = true;
	// Screen-pixel offset used to separate parallel connection lines between the same endpoints...
	// You can set it here or in a dashboard token named "MapConnectionCurvature"...
	defaults.parallelConnectionCurvature = 18;

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

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

	// Default opacity for weather layers...
	defaults.weatherOpacity = 0.35;
	defaults.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)...
	defaults.rvOptionColorScheme = 8;
	// Weather refresh interval in minutes...
	defaults.weatherRefreshMinutes = 5;
	// Whether to display details about a wildfire on "click" or "mouseover"...
	defaults.showWildfireInfoEvent = "click";
	// Whether the opacity of an earthquake's icon reflects "time" since the event, or "magnitude"...
	defaults.quakeMode = "time";
	// Always queue defaults so bootstrap can pair via shift() even when
	// document.currentScript is not the same node found by sibling walk.
	registry.pendingDefaults.push(defaults);
	if (script) {
		script.__betterMapDefaults = defaults;
	}
	})(document.currentScript);
</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;
		display: inline-flex;
		align-items: center;
		gap: 5px;
	}
	#customGroupFilterField {
		background-color: #eee;
		border: 1px solid silver;
		font-family: Tahoma, Verdana, Roboto, monospace;
		max-width: 150px;
	}
	#resetGroupFilterButton {
		display: none;
	}
	#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>
	(function(widgetScript) {
		var registry = window.__betterMapWidgetRegistry = window.__betterMapWidgetRegistry || { instances: Object.create(null) };
		if (!registry.instances) {
			registry.instances = Object.create(null);
		}

		// Function to find a previous sibling element matching the supplied test...
		function previousElementMatching(start, predicate) {
			if (!start) {
				return null;
			}
			var element = start.previousElementSibling;
			while (element) {
				if (predicate(element)) {
					return element;
				}
				element = element.previousElementSibling;
			}
			return null;
		}

		// Function to find or create the map container for this widget instance...
		function ensureBetterMapRoot(referenceNode) {
			var root = previousElementMatching(referenceNode, function(element) {
				return element.classList && element.classList.contains("customMapBody");
			}) || document.querySelector(".customMapBody:not([data-better-map-instance-id])") || document.querySelector(".customMapBody");
			if (root) {
				return root;
			}
			root = document.createElement("div");
			root.className = "customMapBody";
			root.innerHTML = "&nbsp;";
			if (referenceNode && referenceNode.parentNode) {
				referenceNode.parentNode.insertBefore(root, referenceNode);
			} else {
				(document.body || document.documentElement).appendChild(root);
			}
			return root;
		}

		// Function to create a unique ID for this widget instance...
		function makeInstanceId() {
			if (window.crypto && typeof window.crypto.randomUUID === "function") {
				return window.crypto.randomUUID();
			}
			return "better-map-" + Date.now() + "-" + Math.random().toString(36).slice(2);
		}

		var defaultsScript = previousElementMatching(widgetScript, function(element) {
			return element.tagName === "SCRIPT" && element.hasAttribute("data-better-map-defaults");
		}) || document.querySelector("script[data-better-map-defaults]");
		var betterMapRoot = ensureBetterMapRoot(widgetScript);

		var previousInstanceId = betterMapRoot.getAttribute("data-better-map-instance-id");
		var previousInstance = previousInstanceId && registry.instances[previousInstanceId];
		if (previousInstance && typeof previousInstance.cleanup === "function") {
			previousInstance.cleanup();
		}
		if (previousInstanceId) {
			delete registry.instances[previousInstanceId];
		}

		registry.reloadGeneration = (registry.reloadGeneration || 0) + 1;

		var betterMapInstanceId = makeInstanceId();
		var betterMapDefaults = (registry.pendingDefaults && registry.pendingDefaults.length && registry.pendingDefaults.shift())
			|| (defaultsScript && defaultsScript.__betterMapDefaults)
			|| {};
		betterMapRoot.setAttribute("data-better-map-instance-id", betterMapInstanceId);
		registry.instances[betterMapInstanceId] = {
			createdAt: Date.now(),
			reloadGeneration: registry.reloadGeneration,
			defaults: betterMapDefaults,
			root: betterMapRoot
		};

		Object.keys(registry.instances).forEach(function(id) {
			var instance = registry.instances[id];
			if (instance && instance.root && !instance.root.isConnected) {
				if (typeof instance.cleanup === "function") {
					instance.cleanup();
				}
				delete registry.instances[id];
			}
		});

		var version = betterMapDefaults.version || "";
		var releaseNotes = betterMapDefaults.releaseNotes || "";

	// Populate the widget body...
	betterMapRoot.innerHTML = `<!-- Create our options bar above the map... -->
		<div id="optionsBar" class="optionsVisible">
			<div id="mapOptionsArea">
				<span id="customGroupFilterOptions">
					<span 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" data-title="Path to the items you'd like on the map. Examples:&quot;*&quot;, &quot;Locations/*&quot;" id="customGroupFilterField" name="customGroupFilterField" value="*" onkeypress="betterMapWidgetCall('${betterMapInstanceId}', 'groupkeyHandler', event);" />
					</span>
				</span>
				<button id="resetGroupFilterButton" type="button" data-title="Reset the group filter to the default value" onclick="betterMapWidgetCall('${betterMapInstanceId}', 'resetGroupFilter');"><svg width="15" height="15" 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></button>

				<span id="sevFilterOptions">
					<span class="sevFilterOption">
						<input type="checkbox" id="showCleared" name="showCleared" value="showCleared" onclick="betterMapWidgetCall('${betterMapInstanceId}', '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="betterMapWidgetCall('${betterMapInstanceId}', '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="betterMapWidgetCall('${betterMapInstanceId}', '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="betterMapWidgetCall('${betterMapInstanceId}', '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="betterMapWidgetCall('${betterMapInstanceId}', 'refreshGroupData');" data-title="Show/hide items in Scheduled Down Time (SDT)" />
						<label for="showSDT"><div id="showSDTLabel" class="toolbarSevIcon">SDT</div></label>
					</span>
					<span class="sevFilterOption">
						<input type="checkbox" id="showConnections" name="showConnections" value="showConnections" checked="true" onclick="betterMapWidgetCall('${betterMapInstanceId}', 'refreshGroupData');" data-title="Show/hide status lines">
						<label for="showConnections"><div id="showConnectionsLabel" class="toolbarSevIcon">Connections</div></label>
					</span>
					<span class="sevFilterOption">
						<input type="checkbox" id="showConnected" name="showConnected" value="showConnected" onclick="betterMapWidgetCall('${betterMapInstanceId}', 'refreshGroupData');" data-title="When checked, show only items with status lines">
						<label for="showConnected"><div id="showConnectedLabel" class="toolbarSevIcon">Connected</div></label>
					</span>
				</span>

				<span data-title="Toggle visibility of additional options">
					<svg id="optionsToggleButton" onclick="betterMapWidgetCall('${betterMapInstanceId}', '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="betterMapWidgetCall('${betterMapInstanceId}', '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="betterMapWidgetCall('${betterMapInstanceId}', 'enableWeather');" />
							<label for="weather">Weather</label>
						</span>

						<span id="weatherOptions">
							<span data-title="Which source to use for weather information">
								<select id="weatherType" onchange="betterMapWidgetCall('${betterMapInstanceId}', '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="betterMapWidgetCall('${betterMapInstanceId}', '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="betterMapWidgetCall('${betterMapInstanceId}', '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="betterMapWidgetCall('${betterMapInstanceId}', '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)betterMapWidgetCall('${betterMapInstanceId}', 'closeReleaseNotes');">
			<div id="releaseNotesPopup">
				<button id="releaseNotesCloseBtn" onclick="betterMapWidgetCall('${betterMapInstanceId}', 'closeReleaseNotes');">&times;</button>
				<div id="releaseNotesContent">${releaseNotes}</div>
			</div>
		</div>`;
	})(document.currentScript);
</script>
<!-- Catchpoint beacon for performance monitoring (no confidential data is collected!)... -->
<script defer src='https://g.3gl.net/jp/14586/latest/InitialLoadScript.js'></script>

<!-- The following code changes the beacon from unload/beforeunload to pageHide -->
<!-- <script language="javascript" type="text/javascript">
if (window.RProfiler) {
    window.RProfiler.usePageHide();
} else {
    window.addEventListener('GlimpseLoaded', () => window.RProfiler.usePageHide());
}
</script> -->

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

	// Skip bootstrap when Maps is already on the page (e.g. widget reload during dev).
	if (typeof google === 'undefined' || !google.maps || typeof google.maps.importLibrary !== 'function') {
		(g=>{var h,a,k,s,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=(s=m.querySelector("script[nonce]"))&&s.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>
	(function() {
	var betterMapScript = document.currentScript;

	// Function to find a previous sibling element matching the supplied test...
	function previousElementMatching(start, predicate) {
		if (!start) {
			return null;
		}
		var element = start.previousElementSibling;
		while (element) {
			if (predicate(element)) {
				return element;
			}
			element = element.previousElementSibling;
		}
		return null;
	}

	// Function to find the map container for this widget instance...
	function findBetterMapRoot() {
		var root = previousElementMatching(betterMapScript, function(element) {
			return element.classList && element.classList.contains("customMapBody");
		}) || document.querySelector(".customMapBody:not([data-better-map-instance-id])");
		if (root) {
			return root;
		}
		var registry = window.__betterMapWidgetRegistry;
		if (registry && registry.instances) {
			var ids = Object.keys(registry.instances);
			for (var i = ids.length - 1; i >= 0; i--) {
				var instanceRoot = registry.instances[ids[i]] && registry.instances[ids[i]].root;
				if (instanceRoot && instanceRoot.isConnected) {
					return instanceRoot;
				}
			}
		}
		return document.querySelector(".customMapBody");
	}

	var betterMapRoot = findBetterMapRoot();
	var betterMapInstanceId = (betterMapRoot && betterMapRoot.getAttribute("data-better-map-instance-id")) || "";
	var betterMapRegistry = window.__betterMapWidgetRegistry || { instances: Object.create(null) };
	var betterMapInstance = (betterMapRegistry.instances && betterMapRegistry.instances[betterMapInstanceId]) || {};
	var betterMapDefaults = betterMapInstance.defaults || {};
	var betterMapReloadGeneration = betterMapInstance.reloadGeneration || 0;

	// LogicMonitor is a single-page app, so saving a widget re-runs this script without
	// reloading the page or the Google Maps API. Tear down any stale instance still
	// registered against this widget root before rebuilding the DOM.
	if (betterMapRoot && betterMapRegistry.instances) {
		Object.keys(betterMapRegistry.instances).forEach(function(id) {
			if (id === betterMapInstanceId) return;
			var staleInstance = betterMapRegistry.instances[id];
			if (staleInstance && staleInstance.root === betterMapRoot && typeof staleInstance.cleanup === "function") {
				staleInstance.cleanup();
				delete betterMapRegistry.instances[id];
			}
		});
	}

	// Function to route inline actions to the correct widget instance...
	if (!window.betterMapWidgetCall) {
		window.betterMapWidgetCall = function(instanceId, methodName) {
			var args = Array.prototype.slice.call(arguments, 2);
			var registry = window.__betterMapWidgetRegistry;
			var instance = registry && registry.instances && registry.instances[instanceId];
			if (instance && instance.api && typeof instance.api[methodName] === "function") {
				return instance.api[methodName].apply(null, args);
			}
			if (typeof window[methodName] === "function") {
				return window[methodName].apply(null, args);
			}
		};
	}

	// Function to retrieve a widget default without relying on global variables...
	function getBetterMapGlobal(name, fallback) {
		if (Object.prototype.hasOwnProperty.call(betterMapDefaults, name)) {
			return betterMapDefaults[name];
		}
		return typeof window[name] === "undefined" ? fallback : window[name];
	}

	// Function to find an element inside this widget instance first...
	function getBetterMapElementById(id) {
		var selector = "#" + id;
		var element = null;
		if (betterMapRoot && typeof betterMapRoot.querySelector === "function") {
			element = betterMapRoot.querySelector(selector);
		}
		return element || document.getElementById(id);
	}

	// Function to find a selector inside this widget instance first...
	function getBetterMapScopedQuery(selector) {
		if (betterMapRoot && typeof betterMapRoot.querySelector === "function") {
			var element = betterMapRoot.querySelector(selector);
			if (element) {
				return element;
			}
		}
		return document.querySelector(selector);
	}

	var apiBearerToken = getBetterMapGlobal("apiBearerToken", "");
	var lmAPIID = getBetterMapGlobal("lmAPIID", "");
	var lmAPIKey = getBetterMapGlobal("lmAPIKey", "");
	var mapSourceType = getBetterMapGlobal("mapSourceType", "groups");
	var mapLocationProperty = getBetterMapGlobal("mapLocationProperty", "location");
	var mapStyle = getBetterMapGlobal("mapStyle", "silverblue");
	var showCleared = getBetterMapGlobal("showCleared", true);
	var showWarnings = getBetterMapGlobal("showWarnings", true);
	var showErrors = getBetterMapGlobal("showErrors", true);
	var showCriticals = getBetterMapGlobal("showCriticals", true);
	var showSDT = getBetterMapGlobal("showSDT", true);
	var showOnlyConnected = getBetterMapGlobal("showOnlyConnected", false);
	var showConnections = getBetterMapGlobal("showConnections", true);
	var groupPathFilter = getBetterMapGlobal("groupPathFilter", "*");
	var statusUpdateIntervalMinutes = getBetterMapGlobal("statusUpdateIntervalMinutes", 2);
	var disableClustering = getBetterMapGlobal("disableClustering", false);
	var markerStyle = getBetterMapGlobal("markerStyle", "pins");
	var showWeatherDefault = getBetterMapGlobal("showWeatherDefault", "no");
	var additionalOverlayOption = getBetterMapGlobal("additionalOverlayOption", "earthquakes");
	var hideMapOptionsByDefault = getBetterMapGlobal("hideMapOptionsByDefault", false);
	var showMapSidebarByDefault = getBetterMapGlobal("showMapSidebarByDefault", false);
	var sidebarDefaultWidth = getBetterMapGlobal("sidebarDefaultWidth", 300);
	var sidebarMinWidth = getBetterMapGlobal("sidebarMinWidth", 220);
	var sidebarMaxWidth = getBetterMapGlobal("sidebarMaxWidth", 40);
	var autoResetMapOnRefresh = getBetterMapGlobal("autoResetMapOnRefresh", false);
	var developmentFlag = getBetterMapGlobal("developmentFlag", false);
	var fullRefreshInterval = getBetterMapGlobal("fullRefreshInterval", 0);
	var showMapTiltControls = getBetterMapGlobal("showMapTiltControls", false);
	var mapTilt = getBetterMapGlobal("mapTilt", 0);
	var mapHeading = getBetterMapGlobal("mapHeading", 0);
	var pollInheritedLocations = getBetterMapGlobal("pollInheritedLocations", true);
	var ignoreLatLongProps = getBetterMapGlobal("ignoreLatLongProps", false);
	var mapGestureHandling = getBetterMapGlobal("mapGestureHandling", "cooperative");
	var showRoadLabels = getBetterMapGlobal("showRoadLabels", "off");
	var displayProps = getBetterMapGlobal("displayProps", "");
	var connectionInfoProp = getBetterMapGlobal("connectionInfoProp", "auto.custom_map_connection_data");
	var connectingLineWeight = getBetterMapGlobal("connectingLineWeight", 3);
	var useGeodesicLines = getBetterMapGlobal("useGeodesicLines", true);
	var parallelConnectionCurvature = getBetterMapGlobal("parallelConnectionCurvature", 18);
	var openWeatherAPIKey = getBetterMapGlobal("openWeatherAPIKey", "");
	var xweatherAPIID = getBetterMapGlobal("xweatherAPIID", "");
	var xweatherAPIKey = getBetterMapGlobal("xweatherAPIKey", "");
	var weatherOpacity = getBetterMapGlobal("weatherOpacity", 0.35);
	var satelliteWeatherOpacity = getBetterMapGlobal("satelliteWeatherOpacity", 0.6);
	var rvOptionColorScheme = getBetterMapGlobal("rvOptionColorScheme", 8);
	var weatherRefreshMinutes = getBetterMapGlobal("weatherRefreshMinutes", 5);
	var showWildfireInfoEvent = getBetterMapGlobal("showWildfireInfoEvent", "click");
	var quakeMode = getBetterMapGlobal("quakeMode", "time");

	// ------------------------------------------------------------
	// 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;

	// Function to debounce handlers when user input changes quickly...
	function debounce(fn, delay = 300) {
		let timeoutId;
		return (...args) => {
			clearTimeout(timeoutId);
			timeoutId = setTimeout(() => fn(...args), delay);
		}
	}

	const __LMBMW_MAPOPTS_COOKIE_BASE = "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"];
	const __LMBMW_MAPOPTS_ELEMENT_TO_KEY = {
		customGroupFilterField: "groupPathFilter",
		showCleared: "showCleared",
		showWarnings: "showWarnings",
		showErrors: "showErrors",
		showCriticals: "showCriticals",
		showSDT: "showSDT",
		showConnections: "showConnections",
		showConnected: "showOnlyConnected",
		autoZoom: "autoResetMapOnRefresh",
		weather: "weather",
		weatherType: "weatherType",
		otherWeatherOverlays: "otherWeatherOverlays",
		markerStyleSelect: "markerStyle",
	};

	// Function to return the ID of the LogicMonitor widget containing this iframe...
	function getContainingWidgetId() {
		try {
			const parentDoc = window.parent.document;
			const iframe = Array.from(parentDoc.querySelectorAll("iframe"))
				.find(frame => frame.contentWindow === window);
			return (iframe && iframe.closest("[id]") && iframe.closest("[id]").id) || null;
		} catch (e) {
			return null;
		}
	}

	// Function to sanitize a widget ID for use in a cookie name...
	function sanitizeWidgetIdForCookie(id) {
		return String(id).replace(/[^A-Za-z0-9_-]/g, "_");
	}

	// Function to build the legacy per-dashboard cookie name for saved map options...
	function getLegacyMapOptionsCookieName() {
		const id = dashboardID || "default";
		return `${__LMBMW_MAPOPTS_COOKIE_BASE}_${id}`;
	}

	// Function to build a per-widget cookie name for saved map options...
	function getMapOptionsCookieName() {
		const id = dashboardID || "default";
		if (widgetID) {
			return `${__LMBMW_MAPOPTS_COOKIE_BASE}_${id}_${sanitizeWidgetIdForCookie(widgetID)}`;
		}
		return getLegacyMapOptionsCookieName();
	}

	// Function to read a JSON object from a named cookie...
	function readCookieObjectByName(cookieName) {
		try {
			const name = cookieName + "=";
			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 to expire a named cookie...
	function clearCookieByName(cookieName) {
		try {
			document.cookie = `${cookieName}=;path=/;max-age=0`;
		} catch (e) {}
	}

	// Function to read saved map options from the widget- or dashboard-specific cookie...
	function readMapOptionsCookieObject() {
		const widgetScoped = readCookieObjectByName(getMapOptionsCookieName());
		if (widgetScoped) return widgetScoped;
		if (widgetID) {
			return readCookieObjectByName(getLegacyMapOptionsCookieName());
		}
		return null;
	}

	// Function to write saved map options to the widget-specific cookie...
	function writeMapOptionsCookieObject(o) {
		try {
			document.cookie = `${getMapOptionsCookieName()}=${encodeURIComponent(JSON.stringify(o))};path=/;max-age=${__LMBMW_MAPOPTS_MAX_AGE};SameSite=Lax`;
		} catch (e) {}
	}

	// Function to clear saved map options for the current widget and legacy dashboard cookie...
	function clearMapOptionsCookie() {
		try {
			clearCookieByName(getLegacyMapOptionsCookieName());
			if (widgetID) {
				clearCookieByName(getMapOptionsCookieName());
			}
		} catch (e) {}
	}

	// Function to make sure the selected weather type is still valid...
	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 to sync the selected overlay back to the overlay variable...
	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 to apply saved toolbar options from the dashboard cookie...
	function applyPersistedMapOptionsFromCookie() {
		const o = readMapOptionsCookieObject();
		if (!o) return;

		if (typeof o.groupPathFilter === "string" && o.groupPathFilter.trim() !== "") {
			groupPathFilter = o.groupPathFilter.trim();
		}
		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.showOnlyConnected === "boolean") showOnlyConnected = o.showOnlyConnected;
		else if (typeof o.showConnected === "boolean") showOnlyConnected = o.showConnected;
		if (typeof o.showConnections === "boolean") showConnections = o.showConnections;
		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.showConnections.checked = showConnections;
		_dom.showOnlyConnected.checked = showOnlyConnected;
		_dom.autoZoom.checked = autoResetMapOnRefresh;
		_dom.markerStyleSelect.value = markerStyle === "circles" ? "circles" : "pins";
		_dom.customGroupFilterField.value = groupPathFilter;
		updateResetGroupFilterButtonVisibility();
	}

	// Function to show or hide the group filter reset button...
	function updateResetGroupFilterButtonVisibility() {
		if (!_dom.resetGroupFilterButton) return;
		const fieldValue = (_dom.customGroupFilterField.value || "").trim();
		const initialValue = (initialGroupPathFilter || "").trim();
		_dom.resetGroupFilterButton.style.display = fieldValue !== initialValue ? "inline-flex" : "none";
	}

	// Function to read the cookie value for a single toolbar control...
	function getMapOptionValueForElement(el) {
		if (!el || !el.id) return undefined;
		if (el.id === "customGroupFilterField") {
			const gp = (el.value || "").trim();
			return gp || groupPathFilter;
		}
		if (el.id === "markerStyleSelect") {
			return el.value === "circles" ? "circles" : "pins";
		}
		if (el.id === "otherWeatherOverlays") {
			syncAdditionalOverlayVarFromSelect();
			return el.value;
		}
		if (el.type === "checkbox") return el.checked;
		if (el.tagName === "SELECT") return el.value;
		return undefined;
	}

	// Function to build a partial cookie update from a toolbar control...
	function buildMapOptionPartialFromElement(el) {
		const key = el && el.id && __LMBMW_MAPOPTS_ELEMENT_TO_KEY[el.id];
		if (!key) return null;
		const value = getMapOptionValueForElement(el);
		if (value === undefined) return null;
		return { [key]: value };
	}

	// Function to save one or more toolbar options to the dashboard cookie...
	function saveMapOptionsToCookie(partial) {
		if (!partial || typeof partial !== "object") return;
		const existing = readMapOptionsCookieObject() || {};
		writeMapOptionsCookieObject(Object.assign({}, existing, { v: 1 }, partial));
	}

	// Function to persist a toolbar change event to the dashboard cookie...
	function handleMapOptionsAreaChange(e) {
		const partial = buildMapOptionPartialFromElement(e && e.target);
		if (partial) saveMapOptionsToCookie(partial);
	}

	// Function to persist the group filter field to the dashboard cookie...
	function saveGroupFilterToCookie() {
		const gp = (_dom.customGroupFilterField.value || "").trim();
		saveMapOptionsToCookie({ groupPathFilter: gp || groupPathFilter });
	}

	// Function to show the release notes overlay...
	function showReleaseNotes() {
		getBetterMapElementById('releaseNotesOverlay').classList.add('visible');
	}

	// Function to close the release notes overlay...
	function closeReleaseNotes() {
		getBetterMapElementById('releaseNotesOverlay').classList.remove('visible');
	}

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

	// Severity metadata used when parsing alert/SDT status...
	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 to parse alert/SDT status into a normalized severity object...
	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,
		};
	}

	// Function to reset the group filter to its initial value...
	function resetGroupFilter() {
		groupPathFilter = initialGroupPathFilter;
		_dom.customGroupFilterField.value = groupPathFilter;
		updateResetGroupFilterButtonVisibility();
		refreshGroupData();
		saveMapOptionsToCookie({ groupPathFilter: groupPathFilter });
	}

	/**
	* 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 show the map sidebar by default...
	let showMapSidebarByDefaultToken = "##ShowMapSidebar##";
	// If the token value wasn't set then use the value hard-coded above at the beginning of this script...
	if (isTruthyToken(showMapSidebarByDefaultToken)) {
		showMapSidebarByDefault = true;
	}

	// 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 only show items with active connections...
	let onlyShowConnectedToken = "##MapOnlyShowConnectedItems##";
	if (isTruthyToken(onlyShowConnectedToken)) {
		showOnlyConnected = true;
	}
	// Capture from token whether to show connecting lines between endpoints...
	let showConnectingLinesToken = "##MapShowConnectingLines##";
	if (showConnectingLinesToken != "\#\#MapShowConnectingLines\#\#") {
		showConnections = isTruthyToken(showConnectingLinesToken);
	}
	// 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";
	}

	// Capture from token whether to use geodesic (great circle) connection lines...
	let useGeodesicLinesToken = "##MapUseGeodesicLines##";
	if (useGeodesicLinesToken != "\#\#MapUseGeodesicLines\#\#") {
		useGeodesicLines = isTruthyToken(useGeodesicLinesToken);
	}

	// Capture from token how much curvature to use for parallel connection lines...
	let connectionCurvatureToken = "##MapConnectionCurvature##";
	if (connectionCurvatureToken != "\#\#MapConnectionCurvature\#\#" && connectionCurvatureToken.trim() !== "") {
		parallelConnectionCurvature = connectionCurvatureToken;
	}

	// Cache frequently accessed DOM elements for performance
	const _dom = {
		showCleared: getBetterMapElementById("showCleared"),
		showWarnings: getBetterMapElementById("showWarnings"),
		showErrors: getBetterMapElementById("showErrors"),
		showCriticals: getBetterMapElementById("showCriticals"),
		showSDT: getBetterMapElementById("showSDT"),
		showConnections: getBetterMapElementById("showConnections"),
		showOnlyConnected: getBetterMapElementById("showConnected"),
		autoZoom: getBetterMapElementById("autoZoom"),
		weather: getBetterMapElementById("weather"),
		weatherType: getBetterMapElementById("weatherType"),
		otherWeatherOverlays: getBetterMapElementById("otherWeatherOverlays"),
		markerStyleSelect: getBetterMapElementById("markerStyleSelect"),
		customGroupFilterField: getBetterMapElementById("customGroupFilterField"),
		resetGroupFilterButton: getBetterMapElementById("resetGroupFilterButton"),
		mapOptionsArea: getBetterMapElementById("mapOptionsArea"),
		refreshStatusArea: null, // Set later after map init
		weatherRefreshButton: null, // Set later after map init
		showClearedLabel: getBetterMapElementById("showClearedLabel"),
		showWarningsLabel: getBetterMapElementById("showWarningsLabel"),
		showErrorsLabel: getBetterMapElementById("showErrorsLabel"),
		showCriticalsLabel: getBetterMapElementById("showCriticalsLabel"),
		showSDTLabel: getBetterMapElementById("showSDTLabel"),
		showConnectionsLabel: getBetterMapElementById("showConnectionsLabel"),
		showConnectedLabel: getBetterMapElementById("showConnectedLabel"),
		sidebarArea: getBetterMapElementById("sidebarArea"),
		sidebarResizeHandle: getBetterMapElementById("sidebarResizeHandle"),
		weatherOptions: getBetterMapElementById("weatherOptions"),
		optionsToggleArea: getBetterMapElementById("optionsToggleArea"),
		gearIcon: getBetterMapElementById("gearIcon"),
		gearIconChevron: getBetterMapElementById("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.showConnections.checked = showConnections;
	_dom.showOnlyConnected.checked = showOnlyConnected;
	_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;
	const pathName = parent.window.location.pathname; // example: "/santaba/uiv4/dashboards/dashboards-2338"
	// Extract the numeric dashboard ID from the path (e.g. "dashboards-2338" -> "2338").
	const __LMBMW_DASHBOARD_ID_MATCH = pathName.match(/\/dashboards-(\d+)/i);
	const dashboardID = __LMBMW_DASHBOARD_ID_MATCH ? __LMBMW_DASHBOARD_ID_MATCH[1] : "";
	const widgetID = getContainingWidgetId();

	// 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>';
	const connectedIcon = '<svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" data-tooltip="Connected"><path d="M 12 28 Q 25 17 38 13" fill="none" stroke="#e0351b" stroke-width="3" stroke-linecap="round"/><path d="M 12 28 L 38 40" fill="none" stroke="#85c25d" stroke-width="3" stroke-linecap="round"/><circle cx="12" cy="28" r="7" fill="#85c25d"/><circle cx="38" cy="13" r="7" fill="#85c25d"/><circle cx="38" cy="40" r="7" fill="#85c25d"/></svg>';
	const showConnectionsIcon = '<svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" data-tooltip="Show connections"><path d="M 12 28 Q 25 17 38 13" fill="none" stroke="#e0351b" stroke-width="4" stroke-linecap="round" stroke-dasharray="4 4"/><path d="M 12 28 L 38 40" fill="none" stroke="#85c25d" stroke-width="4" stroke-linecap="round" stroke-dasharray="4 4"/><circle cx="12" cy="28" r="5" fill="#85c25d" fill-opacity="0.5"/><circle cx="38" cy="13" r="5" fill="#85c25d" fill-opacity="0.5"/><circle cx="38" cy="40" r="5" fill="#85c25d" fill-opacity="0.5"/></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();
	// Function to look up a marker by device ID, tolerating string/number ID mismatches...
	function getMarkerByDeviceID(deviceID) {
		if (markersByDeviceID.has(deviceID)) return markersByDeviceID.get(deviceID);
		const stringID = String(deviceID);
		if (markersByDeviceID.has(stringID)) return markersByDeviceID.get(stringID);
		const numberID = Number(deviceID);
		if (!Number.isNaN(numberID) && markersByDeviceID.has(numberID)) return markersByDeviceID.get(numberID);
		return null;
	}
	// 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 = [];
	// Incremented for each refresh so old async connection draws cannot redraw stale lines.
	let refreshGeneration = 0;
	// Curvature is measured in screen pixels per parallel-link offset.
	// This keeps redundant interface links visible without changing marker placement.
	const parallelConnectionCurveSteps = 8;

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

	// Function to 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 = [];
	}

	// Function to clamp connection-line curvature to a valid screen-pixel offset (0-120, default 18)...
	function normalizeConnectionCurvature(value) {
		const parsed = Number(value);
		if (!Number.isFinite(parsed)) return 18;
		return Math.max(0, Math.min(parsed, 120));
	}
	parallelConnectionCurvature = normalizeConnectionCurvature(parallelConnectionCurvature);

	// Function to build an unordered endpoint-pair key so A->B and B->A links group together...
	function getConnectionEndpointPairKey(sourceID, targetID) {
		const a = String(sourceID);
		const b = String(targetID);
		return a.localeCompare(b) <= 0 ? `${a}:${b}` : `${b}:${a}`;
	}

	// Function to pick a consistent curve side (+1 or -1) based on endpoint ID ordering...
	function getConnectionDirectionSign(sourceID, targetID) {
		return String(sourceID).localeCompare(String(targetID)) <= 0 ? 1 : -1;
	}

	// Function to assign symmetric parallelOffsetIndex values to links sharing the same endpoints...
	function assignParallelConnectionOffsets() {
		const groupedConnections = new Map();
		Object.values(lineData).forEach(connection => {
			const pairKey = getConnectionEndpointPairKey(connection.deviceIDSource, connection.deviceIDConnected);
			if (!groupedConnections.has(pairKey)) groupedConnections.set(pairKey, []);
			groupedConnections.get(pairKey).push(connection);
		});

		groupedConnections.forEach(connections => {
			// Stable ordering prevents the same links from swapping sides between refreshes.
			connections.sort((a, b) =>
				String(a.instanceID).localeCompare(String(b.instanceID)) ||
				String(a.datasourceID).localeCompare(String(b.datasourceID)) ||
				String(a.connectionName).localeCompare(String(b.connectionName))
			);
			const midpointIndex = (connections.length - 1) / 2;
			connections.forEach((connection, index) => {
				connection.parallelOffsetIndex = index - midpointIndex;
				connection.parallelConnectionCount = connections.length;
			});
		});
	}

	// Function to determine how far off-center a connection line should be curved...
	function getConnectionPathOffsetIndex(connection) {
		let offsetIndex = Number((connection && connection.parallelOffsetIndex) || 0);
		if (!offsetIndex && Number((connection && connection.parallelConnectionCount) || 0) <= 1 && parallelConnectionCurvature > 0) {
			offsetIndex = 1;
		}
		return offsetIndex;
	}

	// Function to estimate ground meters per screen pixel at a latitude and zoom level...
	function getMetersPerPixel(latLng, zoom) {
		const lat = typeof latLng.lat === "function" ? latLng.lat() : latLng.lat;
		return 156543.03392 * Math.cos(lat * Math.PI / 180) / Math.pow(2, zoom);
	}

	// Function to build a curved LatLng path for a connection, offset in screen pixels for parallel links...
	function buildMercatorConnectionPath(sourcePos, targetPos, connection, offsetIndex) {
		const projection = (map && map.getProjection && map.getProjection());
		const zoom = (map && map.getZoom && map.getZoom());
		if (!projection || typeof zoom !== "number") return [sourcePos, targetPos];

		const sourcePoint = projection.fromLatLngToPoint(sourcePos);
		const targetPoint = projection.fromLatLngToPoint(targetPos);
		const scale = Math.pow(2, zoom);
		const dxPixels = (targetPoint.x - sourcePoint.x) * scale;
		const dyPixels = (targetPoint.y - sourcePoint.y) * scale;
		const lengthPixels = Math.hypot(dxPixels, dyPixels);
		if (!lengthPixels) return [sourcePos, targetPos];

		// Offset in screen-pixel space, then convert back to LatLng. This keeps the
		// visual separation consistent across zoom levels and latitude.
		const directionSign = getConnectionDirectionSign(connection.deviceIDSource, connection.deviceIDConnected);
		const offsetPixels = offsetIndex * parallelConnectionCurvature * directionSign;
		const perpendicularX = -dyPixels / lengthPixels;
		const perpendicularY = dxPixels / lengthPixels;
		const midpointX = (sourcePoint.x + targetPoint.x) / 2;
		const midpointY = (sourcePoint.y + targetPoint.y) / 2;
		const controlPoint = new google.maps.Point(
			midpointX + (perpendicularX * offsetPixels) / scale,
			midpointY + (perpendicularY * offsetPixels) / scale
		);

		const path = [];
		for (let i = 0; i <= parallelConnectionCurveSteps; i++) {
			const t = i / parallelConnectionCurveSteps;
			const inv = 1 - t;
			const x = (inv * inv * sourcePoint.x) + (2 * inv * t * controlPoint.x) + (t * t * targetPoint.x);
			const y = (inv * inv * sourcePoint.y) + (2 * inv * t * controlPoint.y) + (t * t * targetPoint.y);
			path.push(projection.fromPointToLatLng(new google.maps.Point(x, y)));
		}
		return path;
	}

	// Function to build a curved great-circle path, offset perpendicular to the geodesic for parallel links...
	function buildGeodesicConnectionPath(sourcePos, targetPos, connection, offsetIndex) {
		const spherical = (google.maps.geometry && google.maps.geometry.spherical);
		if (!spherical) return buildMercatorConnectionPath(sourcePos, targetPos, connection, offsetIndex);

		const source = sourcePos instanceof google.maps.LatLng
			? sourcePos
			: new google.maps.LatLng(sourcePos.lat, sourcePos.lng);
		const target = targetPos instanceof google.maps.LatLng
			? targetPos
			: new google.maps.LatLng(targetPos.lat, targetPos.lng);
		if (!spherical.computeDistanceBetween(source, target)) return [sourcePos, targetPos];

		const zoom = (map && map.getZoom && map.getZoom());
		if (typeof zoom !== "number") return [source, target];

		const directionSign = getConnectionDirectionSign(connection.deviceIDSource, connection.deviceIDConnected);
		const offsetPixels = offsetIndex * parallelConnectionCurvature * directionSign;
		const midpoint = spherical.interpolate(source, target, 0.5);
		const offsetMetersMax = offsetPixels * getMetersPerPixel(midpoint, zoom);
		const headingEpsilon = 0.01;
		const path = [];

		for (let i = 0; i <= parallelConnectionCurveSteps; i++) {
			const t = i / parallelConnectionCurveSteps;
			const greatCirclePoint = spherical.interpolate(source, target, t);
			// Match the Mercator Bezier by peaking offset at the midpoint and tapering to zero at endpoints.
			const bulge = 4 * t * (1 - t);
			const offsetMeters = offsetMetersMax * bulge;
			if (!offsetMeters) {
				path.push(greatCirclePoint);
				continue;
			}

			const pointBefore = spherical.interpolate(source, target, Math.max(0, t - headingEpsilon));
			const pointAfter = spherical.interpolate(source, target, Math.min(1, t + headingEpsilon));
			let heading = spherical.computeHeading(pointBefore, pointAfter);
			if (!Number.isFinite(heading)) {
				heading = spherical.computeHeading(source, target);
			}
			const perpHeading = heading + (offsetMeters >= 0 ? 90 : -90);
			path.push(spherical.computeOffset(greatCirclePoint, Math.abs(offsetMeters), perpHeading));
		}
		return path;
	}

	// Function to build a curved LatLng path for a connection...
	// TY ES & CH for your feedback!
	function buildConnectionPath(sourcePos, targetPos, connection) {
		const offsetIndex = getConnectionPathOffsetIndex(connection);
		if (!offsetIndex) return [sourcePos, targetPos];
		if (useGeodesicLines) {
			return buildGeodesicConnectionPath(sourcePos, targetPos, connection, offsetIndex);
		}
		return buildMercatorConnectionPath(sourcePos, targetPos, connection, offsetIndex);
	}

	function isConnectionInCurrentFilter(connection) {
		return Boolean(
			getMarkerByDeviceID(connection.deviceIDSource) &&
			getMarkerByDeviceID(connection.deviceIDConnected)
		);
	}

	// Function to parse connection metadata from resource items into lineData and connectedDeviceIDs...
	function buildConnectionDataFromItems(items) {
		const connectedDeviceIDs = new Set();
		const newLineData = {};
		if (mapSourceType !== "resources" || (!showOnlyConnected && !showConnections)) {
			return { connectedDeviceIDs, lineData: newLineData };
		}
		items.forEach(thisItem => {
			if (!thisItem.autoProperties) return;
			const propArray = thisItem.autoProperties.filter(item => item.name == connectionInfoProp);
			if (propArray.length !== 1 || !propArray[0].value) return;
			const connectionItems = String(propArray[0].value).split(";");
			connectionItems.forEach(thisConnection => {
				const params = thisConnection.split(",").map(param => param.trim());
				if (params.length < 4 || !params[1] || !params[2] || !params[3]) {
					if (thisConnection.trim() !== "") {
						console.debug("Skipping malformed map connection data", {
							deviceID: thisItem.id,
							connectionData: thisConnection,
						});
					}
					return;
				}
				if (showOnlyConnected) {
					connectedDeviceIDs.add(String(thisItem.id));
					connectedDeviceIDs.add(String(params[3]));
				}
				if (showConnections) {
					const connection = {
						connectionName: params[0] || "Connection",
						datasourceID: params[1],
						instanceID: params[2],
						deviceIDSource: thisItem.id,
						deviceIDConnected: params[3],
					};
					newLineData[`${connection.deviceIDSource}:${connection.deviceIDConnected}:${connection.datasourceID}:${connection.instanceID}`] = connection;
				}
			});
		});
		return { connectedDeviceIDs, lineData: newLineData };
	}

	// Function to determine whether an item should be shown based on the connected filter...
	function passesConnectionFilter(itemId, connectedDeviceIDs) {
		if (!showOnlyConnected) return true;
		return connectedDeviceIDs.has(String(itemId));
	}

	// Function to 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 = [];
		}
	}

	// Function to close all open InfoWindows...
	function closeAllInfoWindows(opts) {
		if (clusterInfoWindow) clusterInfoWindow.close();
		if (!(opts && opts.skipMarker) && markerInfoWindow) {
			markerInfoWindow.close();
			markerInfoWindow = null;
		}
		if (parent.overlayInfoWindow) parent.overlayInfoWindow.close();
	}

	// Function to 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;
	}

	// Function to 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 };
	}

	// Function to generate an earthquake marker icon SVG URL with the 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`;
	}

	// Function 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;
	}

	// Function to update polyline endpoints to follow clusters and markers, rebuilding curved paths...
	function updatePolylineEndpoints() {
		if (!polylines.length) return;
		// console.debug("Updating " + polylines.length + " polyline endpoints");
		polylines.forEach(p => {
			if (!p || !p.polyline) return;
			if (!isConnectionInCurrentFilter(p.connection)) {
				p.polyline.setMap(null);
				return;
			}
			const sourcePos = getMarkerOrClusterPosition(p.sourceDeviceID);
			const targetPos = getMarkerOrClusterPosition(p.targetDeviceID);
			if (sourcePos && targetPos) {
				if (!p.polyline.getMap()) {
					p.polyline.setMap(map);
				}
				p.polyline.setPath(buildConnectionPath(sourcePos, targetPos, p.connection));
			} else {
				p.polyline.setMap(null);
			}
		});
	}

	// Function to resolve a device's current visible position...
	function getMarkerOrClusterPosition(deviceID) {
		if (!deviceID) return null;
		const marker = getMarkerByDeviceID(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 to load the cached marker latitude/longitude information...
	function loadCache() {
		try {
			const obj = JSON.parse(localStorage.getItem(__LMBMW_CACHE_KEY));
			return (obj && typeof obj === "object") ? obj : {};
		} catch (e) { return {}; }
	}
	// Function to save the cached marker latitude/longitude information...
	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 to clear cached marker locations and saved map options...
	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 = getBetterMapElementById("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();
	updateResetGroupFilterButtonVisibility();
	const debouncedHandleMapOptionsAreaChange = debounce(handleMapOptionsAreaChange, 300);
	_dom.mapOptionsArea.addEventListener("change", debouncedHandleMapOptionsAreaChange);
	_dom.customGroupFilterField.addEventListener("blur", saveGroupFilterToCookie);
	_dom.customGroupFilterField.addEventListener("change", saveGroupFilterToCookie);

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

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

	// Function to apply the selected marker style to existing markers...
	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;
		}
	}

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

	// Function to check whether this script execution is still the active widget instance...
	function isBetterMapInstanceActive() {
		if (!betterMapInstanceId) return true;
		const inst = betterMapRegistry.instances && betterMapRegistry.instances[betterMapInstanceId];
		if (!inst) return false;
		// Older CDN loaders register instances without reloadGeneration; treat them as active.
		if (typeof inst.reloadGeneration !== "number") return true;
		return inst.reloadGeneration === betterMapReloadGeneration;
	}

	// Function to check whether map operations are safe in the current SPA lifecycle...
	function isMapReady() {
		return Boolean(map && isBetterMapInstanceActive());
	}

	// Function to cancel pending map initialization retries...
	function cancelPendingMapInitialization() {
		if (_mapInitRetryTimeout) {
			clearTimeout(_mapInitRetryTimeout);
			_mapInitRetryTimeout = null;
		}
		_mapInitializing = false;
	}

	// Function to tear down the Google Map instance before a widget reload...
	function destroyMapInstance() {
		if (map) {
			try {
				google.maps.event.clearInstanceListeners(map);
			} catch (error) {}
			map = null;
		}
		mapInitialized = false;
		initAttempts = 0;
	}

	// Function to nudge Google Maps to recalculate its size after the widget DOM is rebuilt...
	function scheduleMapResize() {
		if (!map) return;
		const trigger = () => {
			if (map) google.maps.event.trigger(map, "resize");
		};
		trigger();
		requestAnimationFrame(trigger);
		setTimeout(trigger, 100);
		setTimeout(trigger, 500);
	}

	// Function to initialize the map once Google Maps is available...
	async function ensureMapInitialized() {
		if (mapInitialized || _mapInitializing) return;
		if (!isBetterMapInstanceActive()) 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 = getBetterMapElementById('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();
			if (!isBetterMapInstanceActive()) {
				_mapInitializing = false;
				return;
			}
			mapInitialized = true;
			_mapInitializing = false;
			if (typeof _visibilityObserver !== 'undefined') _visibilityObserver.disconnect();
			if (typeof _focusHandler !== 'undefined') window.removeEventListener('focus', _focusHandler);
			console.log('Map initialized successfully');
			
		} catch (error) {
			if (!isBetterMapInstanceActive()) {
				_mapInitializing = false;
				return;
			}
			_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...`);
				_mapInitRetryTimeout = 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 = getBetterMapElementById('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");
		await google.maps.importLibrary("geometry");

		// 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 = '&times;';
				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(getBetterMapElementById("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: showMapTiltControls ? RenderingType.VECTOR : RenderingType.RASTER,
			isFractionalZoomEnabled: true,
			minZoom: 2,
			clickableIcons: false,
		});

		// 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) {
			getBetterMapElementById("optionsBar").classList.remove("optionsVisible");
			getBetterMapElementById("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);
		}

		scheduleMapResize();
	}

	// 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 = getBetterMapElementById("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 to create the refresh button control...
	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 to create the reset zoom button control...
	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 to create the sidebar toggle button control...
	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 = getBetterMapElementById("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 = getBetterMapElementById("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;
	}

	// Function to initialize sidebar resize drag handling...
	function initSidebarResize() {
		const handle = _dom.sidebarResizeHandle;
		const sidebar = _dom.sidebarArea;
		const container = getBetterMapElementById("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 to resize the sidebar while dragging...
		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 to stop sidebar resizing after dragging...
		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 to create the rotate-right control...
	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 to create the rotate-left control...
	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 to create the tilt-forward control...
	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 to create the tilt-back control...
	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 to create the map update status area...
	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 to adjust the map tilt or heading...
	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;
		}
	}

	// Function to build LM API query params for a given property source and pagination offset...
	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;
	}

	// Function to fetch paginated LogicMonitor API results...
	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;
		const thisRefreshGeneration = ++refreshGeneration;

		// 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();
			clearAllPolylines();
		} else if (groupPathFilterFieldValue == "") {
			// The user cleared the field, so reset it back to the initial value...
			groupPathFilter = initialGroupPathFilter;
		}
		_dom.customGroupFilterField.value = groupPathFilter;
		updateResetGroupFilterButtonVisibility();

		// 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;
		showConnections = _dom.showConnections.checked;
		showOnlyConnected = _dom.showOnlyConnected.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 = getBetterMapElementById("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 = getBetterMapElementById("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');
				if (!isBetterMapInstanceActive() || refreshSignal.aborted) return;
				_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) {
			if (!isBetterMapInstanceActive() || refreshSignal.aborted) return;
			// 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();
			const connectionData = buildConnectionDataFromItems(groupData);
			lineData = connectionData.lineData;
			const connectedDeviceIDs = connectionData.connectedDeviceIDs;

			// Function called when all items have been processed...
			async function onRefreshComplete() {
				if (!isBetterMapInstanceActive() || refreshSignal.aborted || !map) return;
				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: null
						});
						clusterer.addListener("clusteringend", () => {
							updatePolylineEndpoints();
						});
					}
				}

				clearAllPolylines();
				if (mapSourceType == "resources" && showConnections) {
					assignParallelConnectionOffsets();
					const connectionPromises = Object.values(lineData)
						.filter(c => isConnectionInCurrentFilter(c))
						.map(c => plotConnection(c, thisRefreshGeneration));
					const connectionResults = await Promise.allSettled(connectionPromises);
					const failedConnections = connectionResults.filter(result => result.status === "rejected");
					if (failedConnections.length > 0) {
						console.warn(`Failed to draw ${failedConnections.length} map connection line(s).`, failedConnections);
					}
					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);

				if (!passesConnectionFilter(thisItem.id, connectedDeviceIDs)) {
					if (isDiffUpdate) {
						const existingMarker = markersByDeviceID.get(thisItem.id);
						if (existingMarker) {
							existingMarker.setMap(null);
							markers = markers.filter(m => m !== existingMarker);
							markersByDeviceID.delete(thisItem.id);
							markersAddedOrRemoved = true;
						}
					}
					itemsProcessed++;
					if (itemsProcessed == totalGroups) onRefreshComplete();
					return;
				}

				// 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 && existingMarker.content.dataset && 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);

				// Function to 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);
									}
								});
							}
						}
					}
				}

				// Function 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>`;
							}
						}

						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, requestedRefreshGeneration = refreshGeneration) {
		if (requestedRefreshGeneration !== refreshGeneration || !isConnectionInCurrentFilter(connection)) {
			console.debug("Skipping map connection outside the current filter", connection);
			return false;
		}

		// Fetch the current alert status of the defined instance...
		let resourcePath = `/device/devices/${connection.deviceIDSource}/devicedatasources/${connection.datasourceID}/instances/${connection.instanceID}`;
		let httpVerb = "GET";
		let instanceData = null;
		let alertStatus = "OK";
		let alertSeverity = "clear";
		let sdtStatus = "";
		let connectionColor = "#85c25d";

		try {
			instanceData = await LMClient({
				resourcePath: resourcePath,
				queryParams: "",
				httpVerb: httpVerb,
				postBody: null,
				apiVersion: '3',
			});
			// console.debug('Instance status succeeded with JSON response', instanceData);
		} catch (error) {
			alertStatus = "Unknown";
			connectionColor = "#999999";
			console.warn("Unable to fetch map connection status; drawing line with unknown status.", {
				connection,
				error,
			});
		}

		if (requestedRefreshGeneration !== refreshGeneration || !isConnectionInCurrentFilter(connection)) {
			console.debug("Skipping stale map connection after status lookup", connection);
			return false;
		}

		// Establish coordinates of the line start and end from the currently visible marker/cluster set.
		const sourcePos = getMarkerOrClusterPosition(connection.deviceIDSource);
		const targetPos = getMarkerOrClusterPosition(connection.deviceIDConnected);
		if (!sourcePos || !targetPos) {
			console.debug("Skipping map connection with endpoint outside the current marker set", connection);
			return false;
		}
		const tmpCoords = buildConnectionPath(sourcePos, targetPos, connection);

		// Process the data we received...
		if (instanceData) {
			// Parse the alarm status...
			let alertStatusArray = String(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 = String(instanceData.sdtStatus || "").match(/([\w]+)-([\w]+)-([\w]+)/);
			if (sdtStatusArray && (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,
			connection: connection,
			originalCoords: [sourcePos, targetPos],
		});

		// 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");
		});
		return true;
	}

	// 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 = [];

	// LogicMonitor's widget sanitizer breaks nested template literals and ternary HTML fragments.
	function buildSidebarPropsHtml(props) {
		if (!props || !props.length) return "";
		var inner = props.map(function(p) {
			var title = (p.name + ": " + p.value).replace(/"/g, "&quot;");
			return '\x3cdiv class="sidebar-item-prop" title="' + title + '"\x3e' +
				'\x3cspan class="sidebar-item-prop-label"\x3e' + p.name + ':\x3c/span\x3e ' + p.value +
				'\x3c/div\x3e';
		}).join("");
		return '\x3cdiv class="sidebar-item-props"\x3e' + inner + '\x3c/div\x3e';
	}

	function buildClusterDeviceRowHtml(device) {
		return '\x3cdiv 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;"\x3e' +
			'\x3cdiv style="width: 8px; height: 8px; border-radius: 50%; background: var(--' + device.status + '-color); flex-shrink: 0;"\x3e\x3c/div\x3e' +
			'\x3ca 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\'"\x3e' +
				device.name + device.sdtStatus +
			'\x3c/a\x3e' +
			'\x3cdiv style="display: flex; align-items: center;"\x3e' +
				'\x3ca 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\'"\x3e' +
					'\x3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"\x3e' +
						'\x3cpath d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/\x3e' +
						'\x3cpolyline points="15 3 21 3 21 9"/\x3e' +
						'\x3cline x1="10" y1="14" x2="21" y2="3"/\x3e' +
					'\x3c/svg\x3e' +
				'\x3c/a\x3e' +
			'\x3c/div\x3e' +
		'\x3c/div\x3e';
	}

	function buildWildfireHighlightBlock(highlightValueHtml, highlightUnitHtml) {
		if (!highlightValueHtml) return "";
		var unitLine = highlightUnitHtml
			? '\x3cdiv style="font-size:12px;color:#666;margin-top:2px;"\x3e' + highlightUnitHtml + '\x3c/div\x3e'
			: "";
		return '\x3cdiv style="text-align:center;margin:12px 0;padding:12px 8px;background:#fff5f5;border-radius:6px;"\x3e' +
			'\x3cdiv style="font-size:22px;font-weight:700;color:#b91c1c;line-height:1.2;"\x3e' + highlightValueHtml + '\x3c/div\x3e' +
			unitLine +
		'\x3c/div\x3e';
	}

	function buildTsunamiWarningBannerHtml(tsunamiWarningHtml) {
		var svg = '\x3csvg width="35px" height="35px" viewBox="0 0 60.601004 60.601004" xmlns="http://www.w3.org/2000/svg"\x3e' +
			'\x3cpath 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"/\x3e' +
			'\x3cpath 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"/\x3e' +
		'\x3c/svg\x3e';
		return '\x3cdiv style="display: flex; flex-wrap: wrap; text-wrap: auto; align-items: center; gap: 8px; justify-content: center;"\x3e' +
			svg +
			'\x3cspan style="font-weight: bold;"\x3e' + tsunamiWarningHtml + '\x3c/span\x3e' +
		'\x3c/div\x3e';
	}

	function buildFloodingLevelChartHtml(data) {
		if (!data.gage_height || !data.rp_elevation) return "";
		var floodHeight = Math.max(20, Math.min(60, (parseFloat(data.gage_height) - parseFloat(data.rp_elevation)) * 5));
		var floodDelta = (parseFloat(data.gage_height) - parseFloat(data.rp_elevation)).toFixed(2);
		var normalElev = parseFloat(data.rp_elevation).toFixed(2);
		var wavePath = "M0,10 L0,5 Q12.5,0 25,5 T50,5 T75,5 T100,5 L100,10 Z";
		return '\x3cdiv style="position:relative;width:80%;margin:0 auto;"\x3e' +
			'\x3csvg style="position:absolute;top:-8px;left:0;width:100%;height:10px;" viewBox="0 0 100 10" preserveAspectRatio="none"\x3e' +
				'\x3cpath d="' + wavePath + '" fill="#ffb3b3"/\x3e' +
			'\x3c/svg\x3e' +
			'\x3cdiv style="background: linear-gradient(to bottom, #ffb3b3, #fe8787); height:' + floodHeight + '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;"\x3e' +
				'\x3cspan style="margin-top: -5px; filter: drop-shadow(0 0 4px white);"\x3e+' + floodDelta + ' ft\x3c/span\x3e' +
			'\x3c/div\x3e' +
			'\x3cdiv style="position:relative;"\x3e' +
				'\x3csvg style="position:absolute;top:-8px;left:0;width:100%;height:10px;" viewBox="0 0 100 10" preserveAspectRatio="none"\x3e' +
					'\x3cpath d="' + wavePath + '" fill="#87CEEB"/\x3e' +
				'\x3c/svg\x3e' +
				'\x3cdiv 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;"\x3e' +
					'\x3cspan style="filter: drop-shadow(0 0 4px white);"\x3eNormal Elevation: ' + normalElev + ' ft\x3c/span\x3e' +
				'\x3c/div\x3e' +
			'\x3c/div\x3e' +
		'\x3c/div\x3e';
	}

	// Function to 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: (severity in severityOrder) ? severityOrder[severity] : 99,
				location: (cached && cached.address) || "Unknown",
				props: props,
			};
		}).filter(item => {
			return markersByDeviceID.has(item.id) || markersByDeviceID.has(String(item.id));
		});
	}

	// Function to 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";
			const propsHtml = buildSidebarPropsHtml(item.props);
			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;
	}

	// Function to 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 clusterContent = document.createElement("div");
			clusterContent.style.cssText = "position:relative;width:45px;height:45px;cursor:pointer;";
			const chartImg = document.createElement("img");
			chartImg.src = `data:image/svg+xml;base64,${svg}`;
			chartImg.width = 45;
			chartImg.height = 45;
			chartImg.alt = `${count} items`;
			clusterContent.appendChild(chartImg);
			const countLabel = document.createElement("div");
			countLabel.textContent = String(count);
			countLabel.style.cssText = "position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(0,0,0,0.9);font-size:12px;font-weight:500;pointer-events:none;";
			clusterContent.appendChild(countLabel);

			const marker = new google.maps.marker.AdvancedMarkerElement({
				position,
				content: clusterContent,
				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="betterMapWidgetCall('${betterMapInstanceId}', 'fitClusterBounds', ${clusterBounds.getSouthWest().lat()}, ${clusterBounds.getSouthWest().lng()}, ${clusterBounds.getNorthEast().lat()}, ${clusterBounds.getNorthEast().lng()})" 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 => buildClusterDeviceRowHtml(device)).join('')}
							</div>
						</div>
					</div>
				`;
			}

			// Add click listener
			marker.addListener('gmp-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";
		}
	}

	// Function to 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();
	}

	// Function to initialize weather data and start the 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);
	}

	// Function to 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 to create a weather tile image with LRU caching...
	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 to clear the cached weather tiles...
	function clearTileCache() { _tileCache.clear(); }

	// Function to create a weather tile overlay layer...
	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()}`;

				// Function to 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' });

				// Wildfire info popup helpers...
				const WILDFIRE_FLAME_SVG = `<svg width="36" height="40" viewBox="0 0 36 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="flex-shrink:0;" role="img" aria-label="Wildfire with smoke">
					<defs>
						<linearGradient id="smokeGrad" x1="18" y1="1" x2="18" y2="23" gradientUnits="userSpaceOnUse">
							<stop offset="0" stop-color="#8A8F92" stop-opacity="0.18"/>
							<stop offset="0.45" stop-color="#62686D" stop-opacity="0.36"/>
							<stop offset="1" stop-color="#2F363B" stop-opacity="0.62"/>
						</linearGradient>
						<radialGradient id="emberGlow" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(18 29) rotate(90) scale(11 10)">
							<stop offset="0" stop-color="#FFD166"/>
							<stop offset="0.55" stop-color="#FF8C1A"/>
							<stop offset="1" stop-color="#B92C17"/>
						</radialGradient>
					</defs>
					<path d="M14.7 22.4C10.7 21 8.5 18.5 8.8 15.6C9 13.1 10.9 11.5 13.6 11.1C10.8 9.7 9.5 7.8 10.1 6C10.8 3.9 13.2 2.9 15.6 3.5C17.1 3.9 18.2 4.8 18.9 6C20 3.9 22.6 3.1 24.9 3.9C27.4 4.8 28.4 7.1 27.3 9.2C30 9.6 31.8 11.4 31.8 13.7C31.7 16.4 29.4 18.3 25.7 19C25.2 22 20.8 24.2 14.7 22.4Z" fill="url(#smokeGrad)"/>
					<path d="M12.8 19.1C10.7 18 9.8 16.5 10.3 14.9C10.9 13.1 13 12.4 15.2 13.1C14.1 11.4 14.2 9.8 15.5 8.7C16.8 7.6 19 8 20.2 9.5C21.1 7.9 23.1 7.4 24.8 8.3C26.5 9.2 27 10.9 26 12.4C28.1 12.7 29.4 13.9 29.2 15.5C29 17.6 26.5 18.8 23.4 18.8C21.7 20.9 16.8 21.2 12.8 19.1Z" fill="#252B2F" opacity="0.28"/>
					<path d="M18 37C10.8 37 6 32.2 6 25.8C6 20.3 9.8 16.7 12.6 12.9C14.9 9.7 15.4 6.4 14.8 3C20.7 6.4 24.7 11.8 24.2 17C26.4 15.5 27.5 13.1 27.9 10.8C31.2 14.3 33 19.5 33 24.9C33 32 27.2 37 18 37Z" fill="#B92C17"/>
					<path d="M18.2 36.8C13.4 36.8 10.5 33.7 10.5 29.6C10.5 26 13.2 23.5 15.1 20.8C16.6 18.7 16.9 16.7 16.5 14.4C20.4 16.6 22.6 20.1 22.1 23.4C23.6 22.5 24.6 21 25.1 19.3C27.1 21.8 28.2 25 28.2 28.1C28.2 33.2 24.1 36.8 18.2 36.8Z" fill="url(#emberGlow)"/>
					<path d="M18.1 36.7C15.4 36.7 13.7 35 13.7 32.7C13.7 30.6 15.4 29.1 16.5 27.5C17.4 26.1 17.6 24.9 17.3 23.4C20 25 21.4 27.1 21.1 29.2C22 28.7 22.7 27.8 23.1 26.8C24.2 28.2 24.8 30 24.8 31.7C24.8 34.8 22.2 36.7 18.1 36.7Z" fill="#FFE08A"/>
				</svg>`;
				function escapeWildfireHtml(str) {
					if (str == null) return '';
					return String(str)
						.replace(/&/g, '&amp;')
						.replace(/</g, '&lt;')
						.replace(/>/g, '&gt;')
						.replace(/"/g, '&quot;');
				}

				function formatWildfireAgeDays(ageDays, locale) {
					if (ageDays == null) {
						return { display: '(not available)', badge: null };
					}
					if (ageDays === 0) {
						return { display: 'Today', badge: 0 };
					}
					const days = Number(ageDays);
					return {
						display: days.toLocaleString(locale, numFormatOptions) + ' days ago',
						badge: days
					};
				}

				function wildfireAgeBadgeHtml(displayText, ageDays) {
					if (displayText == null || displayText === '(not available)') {
						return `<span style="font-size:13px;font-weight:600;color:rgb(20,29,48);">${escapeWildfireHtml(displayText)}</span>`;
					}
					let bg = '#f0f0f0';
					let color = '#555';
					if (ageDays === 0 || displayText === 'Today') {
						bg = '#e8f5e9';
						color = '#2e7d32';
					} else if (typeof ageDays === 'number' && ageDays <= 3) {
						bg = '#fff8e1';
						color = '#f57c00';
					}
					return `<span style="display:inline-block;padding:2px 8px;border-radius:12px;font-size:12px;font-weight:600;background:${bg};color:${color};">${escapeWildfireHtml(displayText)}</span>`;
				}

				function buildWildfireInfoHtml(options) {
					const {
						title,
						category,
						comments,
						highlightValue,
						highlightUnit,
						stats
					} = options;

					const categoryChip = category
						? `<span style="display:inline-block;margin-top:4px;padding:2px 10px;border-radius:12px;font-size:11px;font-weight:600;background:#fff3f3;color:#b91c1c;">${escapeWildfireHtml(category)}</span>`
						: '';

					const commentsBlock = comments
						? `<p style="margin:10px 0 0 0;padding:8px 10px;border-left:3px solid #e0351b;background:#fafafa;border-radius:0 4px 4px 0;font-size:12px;color:#555;line-height:1.4;white-space:normal;word-break:break-word;">${escapeWildfireHtml(comments)}</p>`
						: '';

					const highlightBlock = buildWildfireHighlightBlock(
						highlightValue ? escapeWildfireHtml(highlightValue) : "",
						highlightUnit ? escapeWildfireHtml(highlightUnit) : ""
					);

					const statRows = (stats || []).map(stat => {
						const valueHtml = stat.badge != null
							? wildfireAgeBadgeHtml(stat.value, stat.badge)
							: `<span style="font-size:13px;font-weight:600;color:rgb(20,29,48);text-align:right;max-width:60%;word-break:break-word;">${escapeWildfireHtml(stat.value)}</span>`;
						return `<div style="display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 8px;background:#f5f5f5;border-radius:4px;">
							<span style="font-size:12px;color:#666;flex-shrink:0;">${escapeWildfireHtml(stat.label)}</span>
							${valueHtml}
						</div>`;
					}).join('');

					return `<div class="mapInfoPopupWindow" style="line-height:1.4;color:rgb(20,29,48);max-width:320px;white-space:normal;word-break:break-word;">
						<div style="display:flex;align-items:flex-start;gap:10px;">
							${WILDFIRE_FLAME_SVG}
							<div style="min-width:0;flex:1;">
								<div style="font-weight:600;font-size:16px;line-height:1.3;">${escapeWildfireHtml(title || 'Unknown')}</div>
								${categoryChip}
							</div>
						</div>
						${commentsBlock}
						${highlightBlock}
						<div style="display:grid;gap:6px;margin-top:${highlightBlock ? '0' : '12px'};">
							${statRows}
						</div>
					</div>`;
				}

				// 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) {
					const fireSource = event.feature.getProperty("_fireSource");
					let infoContent = '';

					if (fireSource === 'AU') {
						const fireName = event.feature.getProperty("fire_name");
						const fireType = event.feature.getProperty("fire_type");
						let ignitionDate = event.feature.getProperty("ignition_date");
						if (ignitionDate != null && typeof ignitionDate === 'number') {
							ignitionDate = new Date(ignitionDate).toLocaleDateString('en-AU');
						} else if (ignitionDate == null) {
							ignitionDate = '(not available)';
						}
						const areaHaRaw = event.feature.getProperty("area_ha");
						const perimRaw = event.feature.getProperty("perim_km");
						const state = event.feature.getProperty("state") || '(not available)';
						const agency = event.feature.getProperty("agency") || '(not available)';

						infoContent = buildWildfireInfoHtml({
							title: fireName || 'Unknown',
							category: fireType,
							highlightValue: areaHaRaw != null
								? Number(areaHaRaw).toLocaleString('en-AU', numFormatOptions)
								: null,
							highlightUnit: areaHaRaw != null ? 'hectares' : null,
							stats: [
								{ label: 'Ignition date', value: ignitionDate },
								{ label: 'Perimeter', value: perimRaw != null ? Number(perimRaw).toLocaleString('en-AU', numFormatOptions) + ' km' : '(not available)' },
								{ label: 'State', value: state },
								{ label: 'Agency', value: agency }
							]
						});
					} else {
						const incidentName = event.feature.getProperty("IncidentName");
						let comments = event.feature.getProperty("Comments");
						if (comments != null) {
							comments = String(comments).trim();
							if (!comments) comments = null;
						}
						const acresRaw = event.feature.getProperty("GISAcres");
						const fireCategory = event.feature.getProperty("FeatureCategory");
						const createAge = formatWildfireAgeDays(event.feature.getProperty("CreateDateAge"), 'en-US');
						const currentAge = formatWildfireAgeDays(event.feature.getProperty("CurrentDateAge"), 'en-US');

						infoContent = buildWildfireInfoHtml({
							title: incidentName || 'Unknown',
							category: fireCategory,
							comments: comments,
							highlightValue: acresRaw != null
								? Number(acresRaw).toLocaleString('en-US', numFormatOptions)
								: null,
							highlightUnit: acresRaw != null ? 'calculated acres' : null,
							stats: [
								{ label: 'First reported', value: createAge.display, badge: createAge.badge },
								{ label: 'Last GIS update', value: currentAge.display, badge: currentAge.badge }
							]
						});
					}

					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';

				// 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;
				}

				// 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`);
				}

				// Function to parse outage data in a single pass...
				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 * pi * 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 && detailData.properties && detailData.properties.products && 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 && current.properties.indexTime) || current.indexTime || 0;
									const latestTime = (latest.properties && 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 && latestImpactLink.properties.text) || latestImpactLink.text;
								const impactUrl = (latestImpactLink.properties && 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 ? buildTsunamiWarningBannerHtml(tsunamiWarningHtml) : ''}
							<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 && detailData.properties && detailData.properties.products && detailData.properties.products.shakemap && detailData.properties.products.shakemap[0]);
							const contMmiUrl = (shakemapProduct && shakemapProduct.contents && shakemapProduct.contents["download/cont_mmi.json"] && 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;">
										${buildFloodingLevelChartHtml(data)}
									</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 to fit the map around a cluster's bounds...
	function fitClusterBounds(south, west, north, east) {
		if (!isMapReady()) return;
		closeAllInfoWindows();
		map.fitBounds(new google.maps.LatLngBounds(
			new google.maps.LatLng(south, west),
			new google.maps.LatLng(north, east)
		), {
			top: 70,
			right: 70,
			bottom: 70,
			left: 70
		});
	}

	// Function called when the "Reset Zoom" button is pressed...
	function resetZoom() {
		if (!isMapReady()) return;
		// 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) {
		updateResetGroupFilterButtonVisibility();
		// 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();
			saveGroupFilterToCookie();
		}
	}

	// Function to show or hide the extra options row...
	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 to wait until an element exists in this widget instance...
	function waitForElm(selector) {
		return new Promise(resolve => {
			if (getBetterMapScopedQuery(selector)) {
				return resolve(getBetterMapScopedQuery(selector));
			}

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

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

	// Function to expose selected widget state for legacy integrations...
	function exposeBetterMapState(name, getValue, setValue) {
		Object.defineProperty(window, name, {
			configurable: true,
			get: getValue,
			set: setValue
		});
	}

	// Function to clean up timers, markers, and event listeners before the widget is reloaded...
	function cleanupBetterMapInstance() {
		clearInterval(weatherRefresher);
		clearInterval(mapDataRefresher);
		cancelPendingMapInitialization();
		if (_currentRefreshController && !_currentRefreshController.signal.aborted) {
			_currentRefreshController.abort();
		}
		_currentRefreshController = null;
		try {
			clearAllMarkers();
			clearAllPolylines();
			if (markerInfoWindow) {
				markerInfoWindow.close();
				markerInfoWindow = null;
			}
			if (clusterInfoWindow) {
				clusterInfoWindow.close();
				clusterInfoWindow = null;
			}
			if (map && map.data) {
				clearOverlayState();
			}
		} catch (error) {
			console.warn("Better Map Widget cleanup skipped some state:", error);
		}
		destroyMapInstance();
		if (typeof _visibilityObserver !== "undefined" && _visibilityObserver) {
			_visibilityObserver.disconnect();
		}
		if (typeof _focusHandler !== "undefined") {
			window.removeEventListener("focus", _focusHandler);
		}
	}

	var betterMapApi = {
		clearCache,
		closeReleaseNotes,
		enableWeather,
		fitClusterBounds,
		groupkeyHandler,
		refreshGroupData,
		resetGroupFilter,
		resetZoom,
		showReleaseNotes,
		toggleMiscOptions
	};

	if (betterMapInstance) {
		betterMapInstance.api = betterMapApi;
		betterMapInstance.cleanup = cleanupBetterMapInstance;
	}

	Object.assign(window, betterMapApi);
	exposeBetterMapState("clusterInfoWindow", function() { return clusterInfoWindow; }, function(value) { clusterInfoWindow = value; });
	exposeBetterMapState("map", function() { return map; }, function(value) { map = value; });
	exposeBetterMapState("markerInfoWindow", function() { return markerInfoWindow; }, function(value) { markerInfoWindow = value; });
	})();
</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.6.2/dist/index.min.js and https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/svg-with-js.min.css respectively.-->
<script>
	window.markerClusterer = window.markerClusterer || function(t){"use strict";var r,e,n="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},o={};function i(){if(e)return r;e=1;var t=function(t){return t&&t.Math===Math&&t};return r=t("object"==typeof globalThis&&globalThis)||t("object"==typeof window&&window)||t("object"==typeof self&&self)||t("object"==typeof n&&n)||t("object"==typeof r&&r)||function(){return this}()||Function("return this")()}var s,a,u,c,f,l,h,p,m={};function d(){return a?s:(a=1,s=function(t){try{return!!t()}catch(t){return!0}})}function g(){if(c)return u;c=1;var t=d();return u=!t(function(){return 7!==Object.defineProperty({},1,{get:function(){return 7}})[1]})}function v(){if(l)return f;l=1;var t=d();return f=!t(function(){var t=function(){}.bind();return"function"!=typeof t||t.hasOwnProperty("prototype")})}function y(){if(p)return h;p=1;var t=v(),r=Function.prototype.call;return h=t?r.bind(r):function(){return r.apply(r,arguments)},h}var w,b,E,k,x,M,O,P,C,S,j,A,I,_,T,L,q,R,Z,z,D,F,N,U,B,W,$,V,G,H,K,Y,X,J,Q,tt,rt,et,nt,ot,it,st={};function at(){return E?b:(E=1,b=function(t,r){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:r}})}function ut(){if(x)return k;x=1;var t=v(),r=Function.prototype,e=r.call,n=t&&r.bind.bind(e,e);return k=t?n:function(t){return function(){return e.apply(t,arguments)}},k}function ct(){if(O)return M;O=1;var t=ut(),r=t({}.toString),e=t("".slice);return M=function(t){return e(r(t),8,-1)}}function ft(){return j?S:(j=1,S=function(t){return null==t})}function lt(){if(I)return A;I=1;var t=ft(),r=TypeError;return A=function(e){if(t(e))throw new r("Can't call method on "+e);return e}}function ht(){if(T)return _;T=1;var t=function(){if(C)return P;C=1;var t=ut(),r=d(),e=ct(),n=Object,o=t("".split);return P=r(function(){return!n("z").propertyIsEnumerable(0)})?function(t){return"String"===e(t)?o(t,""):n(t)}:n}(),r=lt();return _=function(e){return t(r(e))}}function pt(){if(q)return L;q=1;var t="object"==typeof document&&document.all;return L=void 0===t&&void 0!==t?function(r){return"function"==typeof r||r===t}:function(t){return"function"==typeof t}}function mt(){if(Z)return R;Z=1;var t=pt();return R=function(r){return"object"==typeof r?null!==r:t(r)}}function dt(){if(D)return z;D=1;var t=i(),r=pt();return z=function(e,n){return arguments.length<2?(o=t[e],r(o)?o:void 0):t[e]&&t[e][n];var o},z}function gt(){if(N)return F;N=1;var t=ut();return F=t({}.isPrototypeOf)}function vt(){if($)return W;$=1;var t,r,e=i(),n=function(){if(B)return U;B=1;var t=i().navigator,r=t&&t.userAgent;return U=r?String(r):""}(),o=e.process,s=e.Deno,a=o&&o.versions||s&&s.version,u=a&&a.v8;return u&&(r=(t=u.split("."))[0]>0&&t[0]<4?1:+(t[0]+t[1])),!r&&n&&(!(t=n.match(/Edge\/(\d+)/))||t[1]>=74)&&(t=n.match(/Chrome\/(\d+)/))&&(r=+t[1]),W=r}function yt(){if(G)return V;G=1;var t=vt(),r=d(),e=i().String;return V=!!Object.getOwnPropertySymbols&&!r(function(){var r=Symbol("symbol detection");return!e(r)||!(Object(r)instanceof Symbol)||!Symbol.sham&&t&&t<41})}function wt(){if(K)return H;K=1;var t=yt();return H=t&&!Symbol.sham&&"symbol"==typeof Symbol.iterator}function bt(){if(X)return Y;X=1;var t=dt(),r=pt(),e=gt(),n=wt(),o=Object;return Y=n?function(t){return"symbol"==typeof t}:function(n){var i=t("Symbol");return r(i)&&e(i.prototype,o(n))}}function Et(){if(Q)return J;Q=1;var t=String;return J=function(r){try{return t(r)}catch(t){return"Object"}}}function kt(){if(rt)return tt;rt=1;var t=pt(),r=Et(),e=TypeError;return tt=function(n){if(t(n))return n;throw new e(r(n)+" is not a function")}}function xt(){if(nt)return et;nt=1;var t=kt(),r=ft();return et=function(e,n){var o=e[n];return r(o)?void 0:t(o)}}function Mt(){if(it)return ot;it=1;var t=y(),r=pt(),e=mt(),n=TypeError;return ot=function(o,i){var s,a;if("string"===i&&r(s=o.toString)&&!e(a=t(s,o)))return a;if(r(s=o.valueOf)&&!e(a=t(s,o)))return a;if("string"!==i&&r(s=o.toString)&&!e(a=t(s,o)))return a;throw new n("Can't convert object to primitive value")}}var Ot,Pt,Ct,St,jt,At,It,_t,Tt,Lt,qt,Rt,Zt,zt,Dt,Ft,Nt,Ut,Bt,Wt,$t,Vt,Gt,Ht,Kt={exports:{}};function Yt(){return Pt?Ot:(Pt=1,Ot=!1)}function Xt(){if(St)return Ct;St=1;var t=i(),r=Object.defineProperty;return Ct=function(e,n){try{r(t,e,{value:n,configurable:!0,writable:!0})}catch(r){t[e]=n}return n}}function Jt(){if(jt)return Kt.exports;jt=1;var t=Yt(),r=i(),e=Xt(),n="__core-js_shared__",o=Kt.exports=r[n]||e(n,{});return(o.versions||(o.versions=[])).push({version:"3.44.0",mode:t?"pure":"global",copyright:"(c) 2014-2025 Denis Pushkarev (zloirock.ru)",license:"https://github.com/zloirock/core-js/blob/v3.44.0/LICENSE",source:"https://github.com/zloirock/core-js"}),Kt.exports}function Qt(){if(It)return At;It=1;var t=Jt();return At=function(r,e){return t[r]||(t[r]=e||{})}}function tr(){if(Tt)return _t;Tt=1;var t=lt(),r=Object;return _t=function(e){return r(t(e))}}function rr(){if(qt)return Lt;qt=1;var t=ut(),r=tr(),e=t({}.hasOwnProperty);return Lt=Object.hasOwn||function(t,n){return e(r(t),n)}}function er(){if(Zt)return Rt;Zt=1;var t=ut(),r=0,e=Math.random(),n=t(1.1.toString);return Rt=function(t){return"Symbol("+(void 0===t?"":t)+")_"+n(++r+e,36)}}function nr(){if(Dt)return zt;Dt=1;var t=i(),r=Qt(),e=rr(),n=er(),o=yt(),s=wt(),a=t.Symbol,u=r("wks"),c=s?a.for||a:a&&a.withoutSetter||n;return zt=function(t){return e(u,t)||(u[t]=o&&e(a,t)?a[t]:c("Symbol."+t)),u[t]}}function or(){if(Nt)return Ft;Nt=1;var t=y(),r=mt(),e=bt(),n=xt(),o=Mt(),i=nr(),s=TypeError,a=i("toPrimitive");return Ft=function(i,u){if(!r(i)||e(i))return i;var c,f=n(i,a);if(f){if(void 0===u&&(u="default"),c=t(f,i,u),!r(c)||e(c))return c;throw new s("Can't convert object to primitive value")}return void 0===u&&(u="number"),o(i,u)}}function ir(){if(Bt)return Ut;Bt=1;var t=or(),r=bt();return Ut=function(e){var n=t(e,"string");return r(n)?n:n+""}}function sr(){if($t)return Wt;$t=1;var t=i(),r=mt(),e=t.document,n=r(e)&&r(e.createElement);return Wt=function(t){return n?e.createElement(t):{}}}function ar(){if(Gt)return Vt;Gt=1;var t=g(),r=d(),e=sr();return Vt=!t&&!r(function(){return 7!==Object.defineProperty(e("div"),"a",{get:function(){return 7}}).a})}function ur(){if(Ht)return m;Ht=1;var t=g(),r=y(),e=function(){if(w)return st;w=1;var t={}.propertyIsEnumerable,r=Object.getOwnPropertyDescriptor,e=r&&!t.call({1:2},1);return st.f=e?function(t){var e=r(this,t);return!!e&&e.enumerable}:t,st}(),n=at(),o=ht(),i=ir(),s=rr(),a=ar(),u=Object.getOwnPropertyDescriptor;return m.f=t?u:function(t,c){if(t=o(t),c=i(c),a)try{return u(t,c)}catch(t){}if(s(t,c))return n(!r(e.f,t,c),t[c])},m}var cr,fr,lr,hr,pr,mr,dr,gr={};function vr(){if(fr)return cr;fr=1;var t=g(),r=d();return cr=t&&r(function(){return 42!==Object.defineProperty(function(){},"prototype",{value:42,writable:!1}).prototype})}function yr(){if(hr)return lr;hr=1;var t=mt(),r=String,e=TypeError;return lr=function(n){if(t(n))return n;throw new e(r(n)+" is not an object")}}function wr(){if(pr)return gr;pr=1;var t=g(),r=ar(),e=vr(),n=yr(),o=ir(),i=TypeError,s=Object.defineProperty,a=Object.getOwnPropertyDescriptor,u="enumerable",c="configurable",f="writable";return gr.f=t?e?function(t,r,e){if(n(t),r=o(r),n(e),"function"==typeof t&&"prototype"===r&&"value"in e&&f in e&&!e[f]){var i=a(t,r);i&&i[f]&&(t[r]=e.value,e={configurable:c in e?e[c]:i[c],enumerable:u in e?e[u]:i[u],writable:!1})}return s(t,r,e)}:s:function(t,e,a){if(n(t),e=o(e),n(a),r)try{return s(t,e,a)}catch(t){}if("get"in a||"set"in a)throw new i("Accessors not supported");return"value"in a&&(t[e]=a.value),t},gr}function br(){if(dr)return mr;dr=1;var t=g(),r=wr(),e=at();return mr=t?function(t,n,o){return r.f(t,n,e(1,o))}:function(t,r,e){return t[r]=e,t}}var Er,kr,xr,Mr,Or,Pr,Cr,Sr,jr,Ar,Ir,_r,Tr,Lr,qr,Rr={exports:{}};function Zr(){if(Mr)return xr;Mr=1;var t=ut(),r=pt(),e=Jt(),n=t(Function.toString);return r(e.inspectSource)||(e.inspectSource=function(t){return n(t)}),xr=e.inspectSource}function zr(){if(Sr)return Cr;Sr=1;var t=Qt(),r=er(),e=t("keys");return Cr=function(t){return e[t]||(e[t]=r(t))}}function Dr(){return Ar?jr:(Ar=1,jr={})}function Fr(){if(_r)return Ir;_r=1;var t,r,e,n=function(){if(Pr)return Or;Pr=1;var t=i(),r=pt(),e=t.WeakMap;return Or=r(e)&&/native code/.test(String(e))}(),o=i(),s=mt(),a=br(),u=rr(),c=Jt(),f=zr(),l=Dr(),h="Object already initialized",p=o.TypeError,m=o.WeakMap;if(n||c.state){var d=c.state||(c.state=new m);d.get=d.get,d.has=d.has,d.set=d.set,t=function(t,r){if(d.has(t))throw new p(h);return r.facade=t,d.set(t,r),r},r=function(t){return d.get(t)||{}},e=function(t){return d.has(t)}}else{var g=f("state");l[g]=!0,t=function(t,r){if(u(t,g))throw new p(h);return r.facade=t,a(t,g,r),r},r=function(t){return u(t,g)?t[g]:{}},e=function(t){return u(t,g)}}return Ir={set:t,get:r,has:e,enforce:function(n){return e(n)?r(n):t(n,{})},getterFor:function(t){return function(e){var n;if(!s(e)||(n=r(e)).type!==t)throw new p("Incompatible receiver, "+t+" required");return n}}}}function Nr(){if(Tr)return Rr.exports;Tr=1;var t=ut(),r=d(),e=pt(),n=rr(),o=g(),i=function(){if(kr)return Er;kr=1;var t=g(),r=rr(),e=Function.prototype,n=t&&Object.getOwnPropertyDescriptor,o=r(e,"name"),i=o&&"something"===function(){}.name,s=o&&(!t||t&&n(e,"name").configurable);return Er={EXISTS:o,PROPER:i,CONFIGURABLE:s}}().CONFIGURABLE,s=Zr(),a=Fr(),u=a.enforce,c=a.get,f=String,l=Object.defineProperty,h=t("".slice),p=t("".replace),m=t([].join),v=o&&!r(function(){return 8!==l(function(){},"length",{value:8}).length}),y=String(String).split("String"),w=Rr.exports=function(t,r,e){"Symbol("===h(f(r),0,7)&&(r="["+p(f(r),/^Symbol\(([^)]*)\).*$/,"$1")+"]"),e&&e.getter&&(r="get "+r),e&&e.setter&&(r="set "+r),(!n(t,"name")||i&&t.name!==r)&&(o?l(t,"name",{value:r,configurable:!0}):t.name=r),v&&e&&n(e,"arity")&&t.length!==e.arity&&l(t,"length",{value:e.arity});try{e&&n(e,"constructor")&&e.constructor?o&&l(t,"prototype",{writable:!1}):t.prototype&&(t.prototype=void 0)}catch(t){}var s=u(t);return n(s,"source")||(s.source=m(y,"string"==typeof r?r:"")),t};return Function.prototype.toString=w(function(){return e(this)&&c(this).source||s(this)},"toString"),Rr.exports}function Ur(){if(qr)return Lr;qr=1;var t=pt(),r=wr(),e=Nr(),n=Xt();return Lr=function(o,i,s,a){a||(a={});var u=a.enumerable,c=void 0!==a.name?a.name:i;if(t(s)&&e(s,c,a),a.global)u?o[i]=s:n(i,s);else{try{a.unsafe?o[i]&&(u=!0):delete o[i]}catch(t){}u?o[i]=s:r.f(o,i,{value:s,enumerable:!1,configurable:!a.nonConfigurable,writable:!a.nonWritable})}return o}}var Br,Wr,$r,Vr,Gr,Hr,Kr,Yr,Xr,Jr,Qr,te,re,ee,ne,oe,ie,se={};function ae(){if(Vr)return $r;Vr=1;var t=function(){if(Wr)return Br;Wr=1;var t=Math.ceil,r=Math.floor;return Br=Math.trunc||function(e){var n=+e;return(n>0?r:t)(n)}}();return $r=function(r){var e=+r;return e!=e||0===e?0:t(e)}}function ue(){if(Hr)return Gr;Hr=1;var t=ae(),r=Math.max,e=Math.min;return Gr=function(n,o){var i=t(n);return i<0?r(i+o,0):e(i,o)}}function ce(){if(Yr)return Kr;Yr=1;var t=ae(),r=Math.min;return Kr=function(e){var n=t(e);return n>0?r(n,9007199254740991):0}}function fe(){if(Jr)return Xr;Jr=1;var t=ce();return Xr=function(r){return t(r.length)}}function le(){if(ee)return re;ee=1;var t=ut(),r=rr(),e=ht(),n=function(){if(te)return Qr;te=1;var t=ht(),r=ue(),e=fe(),n=function(n){return function(o,i,s){var a=t(o),u=e(a);if(0===u)return!n&&-1;var c,f=r(s,u);if(n&&i!=i){for(;u>f;)if((c=a[f++])!=c)return!0}else for(;u>f;f++)if((n||f in a)&&a[f]===i)return n||f||0;return!n&&-1}};return Qr={includes:n(!0),indexOf:n(!1)}}().indexOf,o=Dr(),i=t([].push);return re=function(t,s){var a,u=e(t),c=0,f=[];for(a in u)!r(o,a)&&r(u,a)&&i(f,a);for(;s.length>c;)r(u,a=s[c++])&&(~n(f,a)||i(f,a));return f}}function he(){return oe?ne:(oe=1,ne=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"])}var pe,me,de,ge,ve,ye,we,be,Ee,ke,xe,Me,Oe,Pe,Ce,Se,je,Ae,Ie,_e={};function Te(){if(de)return me;de=1;var t=dt(),r=ut(),e=function(){if(ie)return se;ie=1;var t=le(),r=he().concat("length","prototype");return se.f=Object.getOwnPropertyNames||function(e){return t(e,r)},se}(),n=(pe||(pe=1,_e.f=Object.getOwnPropertySymbols),_e),o=yr(),i=r([].concat);return me=t("Reflect","ownKeys")||function(t){var r=e.f(o(t)),s=n.f;return s?i(r,s(t)):r},me}function Le(){if(ve)return ge;ve=1;var t=rr(),r=Te(),e=ur(),n=wr();return ge=function(o,i,s){for(var a=r(i),u=n.f,c=e.f,f=0;f<a.length;f++){var l=a[f];t(o,l)||s&&t(s,l)||u(o,l,c(i,l))}},ge}function qe(){if(Ee)return be;Ee=1;var t=i(),r=ur().f,e=br(),n=Ur(),o=Xt(),s=Le(),a=function(){if(we)return ye;we=1;var t=d(),r=pt(),e=/#|\.prototype\./,n=function(e,n){var u=i[o(e)];return u===a||u!==s&&(r(n)?t(n):!!n)},o=n.normalize=function(t){return String(t).replace(e,".").toLowerCase()},i=n.data={},s=n.NATIVE="N",a=n.POLYFILL="P";return ye=n}();return be=function(i,u){var c,f,l,h,p,m=i.target,d=i.global,g=i.stat;if(c=d?t:g?t[m]||o(m,{}):t[m]&&t[m].prototype)for(f in u){if(h=u[f],l=i.dontCallGetSet?(p=r(c,f))&&p.value:c[f],!a(d?f:m+(g?".":"#")+f,i.forced)&&void 0!==l){if(typeof h==typeof l)continue;s(h,l)}(i.sham||l&&l.sham)&&e(h,"sham",!0),n(c,f,h,i)}}}function Re(){if(xe)return ke;xe=1;var t=gt(),r=TypeError;return ke=function(e,n){if(t(n,e))return e;throw new r("Incorrect invocation")}}function Ze(){if(Ce)return Pe;Ce=1;var t=rr(),r=pt(),e=tr(),n=zr(),o=function(){if(Oe)return Me;Oe=1;var t=d();return Me=!t(function(){function t(){}return t.prototype.constructor=null,Object.getPrototypeOf(new t)!==t.prototype})}(),i=n("IE_PROTO"),s=Object,a=s.prototype;return Pe=o?s.getPrototypeOf:function(n){var o=e(n);if(t(o,i))return o[i];var u=o.constructor;return r(u)&&o instanceof u?u.prototype:o instanceof s?a:null}}function ze(){if(je)return Se;je=1;var t=Nr(),r=wr();return Se=function(e,n,o){return o.get&&t(o.get,n,{getter:!0}),o.set&&t(o.set,n,{setter:!0}),r.f(e,n,o)}}function De(){if(Ie)return Ae;Ie=1;var t=g(),r=wr(),e=at();return Ae=function(n,o,i){t?r.f(n,o,e(0,i)):n[o]=i}}var Fe,Ne,Ue,Be,We,$e,Ve,Ge,He,Ke,Ye,Xe={};function Je(){if(Ne)return Fe;Ne=1;var t=le(),r=he();return Fe=Object.keys||function(e){return t(e,r)}}function Qe(){if(We)return Be;We=1;var t=dt();return Be=t("document","documentElement")}function tn(){if(Ve)return $e;Ve=1;var t,r=yr(),e=function(){if(Ue)return Xe;Ue=1;var t=g(),r=vr(),e=wr(),n=yr(),o=ht(),i=Je();return Xe.f=t&&!r?Object.defineProperties:function(t,r){n(t);for(var s,a=o(r),u=i(r),c=u.length,f=0;c>f;)e.f(t,s=u[f++],a[s]);return t},Xe}(),n=he(),o=Dr(),i=Qe(),s=sr(),a=zr(),u="prototype",c="script",f=a("IE_PROTO"),l=function(){},h=function(t){return"<"+c+">"+t+"</"+c+">"},p=function(t){t.write(h("")),t.close();var r=t.parentWindow.Object;return t=null,r},m=function(){try{t=new ActiveXObject("htmlfile")}catch(t){}var r,e,o;m="undefined"!=typeof document?document.domain&&t?p(t):(e=s("iframe"),o="java"+c+":",e.style.display="none",i.appendChild(e),e.src=String(o),(r=e.contentWindow.document).open(),r.write(h("document.F=Object")),r.close(),r.F):p(t);for(var a=n.length;a--;)delete m[u][n[a]];return m()};return o[f]=!0,$e=Object.create||function(t,n){var o;return null!==t?(l[u]=r(t),o=new l,l[u]=null,o[f]=t):o=m(),void 0===n?o:e.f(o,n)}}function rn(){if(He)return Ge;He=1;var t,r,e,n=d(),o=pt(),i=mt(),s=tn(),a=Ze(),u=Ur(),c=nr(),f=Yt(),l=c("iterator"),h=!1;return[].keys&&("next"in(e=[].keys())?(r=a(a(e)))!==Object.prototype&&(t=r):h=!0),!i(t)||n(function(){var r={};return t[l].call(r)!==r})?t={}:f&&(t=s(t)),o(t[l])||u(t,l,function(){return this}),Ge={IteratorPrototype:t,BUGGY_SAFARI_ITERATORS:h}}Ye||(Ye=1,function(){if(Ke)return o;Ke=1;var t=qe(),r=i(),e=Re(),n=yr(),s=pt(),a=Ze(),u=ze(),c=De(),f=d(),l=rr(),h=nr(),p=rn().IteratorPrototype,m=g(),v=Yt(),y="constructor",w="Iterator",b=h("toStringTag"),E=TypeError,k=r[w],x=v||!s(k)||k.prototype!==p||!f(function(){k({})}),M=function(){if(e(this,p),a(this)===p)throw new E("Abstract class Iterator not directly constructable")},O=function(t,r){m?u(p,t,{configurable:!0,get:function(){return r},set:function(r){if(n(this),this===p)throw new E("You can't redefine this property");l(this,t)?this[t]=r:c(this,t,r)}}):p[t]=r};l(p,b)||O(b,w),!x&&l(p,y)&&p[y]!==Object||O(y,M),M.prototype=p,t({global:!0,constructor:!0,forced:x},{Iterator:M})}());var en,nn,on,sn,an,un,cn,fn,ln,hn,pn,mn,dn,gn,vn,yn,wn,bn,En,kn,xn={};function Mn(){return nn?en:(nn=1,en=function(t){return{iterator:t,next:t.next,done:!1}})}function On(){if(sn)return on;sn=1;var t=Ur();return on=function(r,e,n){for(var o in e)t(r,o,e[o],n);return r}}function Pn(){return un?an:(un=1,an=function(t,r){return{value:t,done:r}})}function Cn(){if(fn)return cn;fn=1;var t=y(),r=yr(),e=xt();return cn=function(n,o,i){var s,a;r(n);try{if(!(s=e(n,"return"))){if("throw"===o)throw i;return i}s=t(s,n)}catch(t){a=!0,s=t}if("throw"===o)throw i;if(a)throw s;return r(s),i}}function Sn(){if(hn)return ln;hn=1;var t=Cn();return ln=function(r,e,n){for(var o=r.length-1;o>=0;o--)if(void 0!==r[o])try{n=t(r[o].iterator,e,n)}catch(t){e="throw",n=t}if("throw"===e)throw n;return n}}function jn(){if(mn)return pn;mn=1;var t=y(),r=tn(),e=br(),n=On(),o=nr(),i=Fr(),s=xt(),a=rn().IteratorPrototype,u=Pn(),c=Cn(),f=Sn(),l=o("toStringTag"),h="IteratorHelper",p="WrapForValidIterator",m="normal",d="throw",g=i.set,v=function(e){var o=i.getterFor(e?p:h);return n(r(a),{next:function(){var t=o(this);if(e)return t.nextHandler();if(t.done)return u(void 0,!0);try{var r=t.nextHandler();return t.returnHandlerResult?r:u(r,t.done)}catch(r){throw t.done=!0,r}},return:function(){var r=o(this),n=r.iterator;if(r.done=!0,e){var i=s(n,"return");return i?t(i,n):u(void 0,!0)}if(r.inner)try{c(r.inner.iterator,m)}catch(t){return c(n,d,t)}if(r.openIters)try{f(r.openIters,m)}catch(t){return c(n,d,t)}return n&&c(n,m),u(void 0,!0)}})},w=v(!0),b=v(!1);return e(b,l,"Iterator Helper"),pn=function(t,r,e){var n=function(n,o){o?(o.iterator=n.iterator,o.next=n.next):o=n,o.type=r?p:h,o.returnHandlerResult=!!e,o.nextHandler=t,o.counter=0,o.done=!1,g(this,o)};return n.prototype=r?w:b,n}}function An(){if(gn)return dn;gn=1;var t=yr(),r=Cn();return dn=function(e,n,o,i){try{return i?n(t(o)[0],o[1]):n(o)}catch(t){r(e,"throw",t)}}}function In(){return yn?vn:(yn=1,vn=function(t,r){var e="function"==typeof Iterator&&Iterator.prototype[t];if(e)try{e.call({next:null},r).next()}catch(t){return!0}})}function _n(){if(bn)return wn;bn=1;var t=i();return wn=function(r,e){var n=t.Iterator,o=n&&n.prototype,i=o&&o[r],s=!1;if(i)try{i.call({next:function(){return{done:!0}},return:function(){s=!0}},-1)}catch(t){t instanceof e||(s=!1)}if(!s)return i}}function Tn(t,r){var e={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&r.indexOf(n)<0&&(e[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(t);o<n.length;o++)r.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(t,n[o])&&(e[n[o]]=t[n[o]])}return e}kn||(kn=1,function(){if(En)return xn;En=1;var t=qe(),r=y(),e=kt(),n=yr(),o=Mn(),i=jn(),s=An(),a=Cn(),u=In(),c=_n(),f=Yt(),l=!f&&!u("map",function(){}),h=!f&&!l&&c("map",TypeError),p=f||l||h,m=i(function(){var t=this.iterator,e=n(r(this.next,t));if(!(this.done=!!e.done))return s(t,this.mapper,[e.value,this.counter++],!0)});t({target:"Iterator",proto:!0,real:!0,forced:p},{map:function(t){n(this);try{e(t)}catch(t){a(this,"throw",t)}return h?r(h,this,t):new m(o(this),{mapper:t})}})}()),"function"==typeof SuppressedError&&SuppressedError;var Ln,qn,Rn={};qn||(qn=1,function(){if(Ln)return Rn;Ln=1;var t=qe(),r=y(),e=kt(),n=yr(),o=Mn(),i=jn(),s=An(),a=Yt(),u=Cn(),c=In(),f=_n(),l=!a&&!c("filter",function(){}),h=!a&&!l&&f("filter",TypeError),p=a||l||h,m=i(function(){for(var t,e,o=this.iterator,i=this.predicate,a=this.next;;){if(t=n(r(a,o)),this.done=!!t.done)return;if(e=t.value,s(o,i,[e,this.counter++],!0))return e}});t({target:"Iterator",proto:!0,real:!0,forced:p},{filter:function(t){n(this);try{e(t)}catch(t){u(this,"throw",t)}return h?r(h,this,t):new m(o(this),{predicate:t})}})}());class Zn{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,r){this.isAdvancedMarker(t)?t.map=r:t.setMap(r)}static getPosition(t){if(this.isAdvancedMarker(t)){if(t.position){if(t.position instanceof google.maps.LatLng)return t.position;if(Number.isFinite(t.position.lat)&&Number.isFinite(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 zn{constructor(t){let{markers:r,position:e}=t;this.markers=[],r&&(this.markers=r),e&&(e instanceof google.maps.LatLng?this._position=e:this._position=new google.maps.LatLng(e))}get bounds(){if(0===this.markers.length&&!this._position)return;const t=new google.maps.LatLngBounds(this._position,this._position);for(const r of this.markers)t.extend(Zn.getPosition(r));return t}get position(){return this._position||this.bounds.getCenter()}get count(){return this.markers.filter(t=>Zn.getVisible(t)).length}push(t){this.markers.push(t)}delete(){this.marker&&(Zn.setMap(this.marker,null),this.marker=void 0),this.markers.length=0}}function Dn(t){if(null==t)throw Error(arguments.length>1&&void 0!==arguments[1]?arguments[1]:"assertion failed")}const Fn=(t,r,e,n)=>{const o=t.getBounds();Dn(o);const i=Nn(o,r,n);return e.filter(t=>i.contains(Zn.getPosition(t)))},Nn=(t,r,e)=>{const{northEast:n,southWest:o}=Wn(t,r),i=$n({northEast:n,southWest:o},e);return Vn(i,r)},Un=(t,r,e)=>{const n=Nn(t,r,e),o=n.getNorthEast(),i=n.getSouthWest();return[i.lng(),i.lat(),o.lng(),o.lat()]},Bn=(t,r)=>{const e=(r.lat-t.lat)*Math.PI/180,n=(r.lng-t.lng)*Math.PI/180,o=Math.sin(e/2),i=Math.sin(n/2),s=o*o+Math.cos(t.lat*Math.PI/180)*Math.cos(r.lat*Math.PI/180)*i*i;return 6371*(2*Math.atan2(Math.sqrt(s),Math.sqrt(1-s)))},Wn=(t,r)=>{const e=r.fromLatLngToDivPixel(t.getNorthEast()),n=r.fromLatLngToDivPixel(t.getSouthWest());return Dn(e),Dn(n),{northEast:e,southWest:n}},$n=(t,r)=>{let{northEast:e,southWest:n}=t;return e.x+=r,e.y-=r,n.x-=r,n.y+=r,{northEast:e,southWest:n}},Vn=(t,r)=>{let{northEast:e,southWest:n}=t;const o=r.fromDivPixelToLatLng(n),i=r.fromDivPixelToLatLng(e);return new google.maps.LatLngBounds(o,i)};class Gn{constructor(t){let{maxZoom:r=16}=t;this.maxZoom=r}noop(t){let{markers:r}=t;return Kn(r)}}class Hn extends Gn{constructor(t){var{viewportPadding:r=60}=t;super(Tn(t,["viewportPadding"])),this.viewportPadding=60,this.viewportPadding=r}calculate(t){let{markers:r,map:e,mapCanvasProjection:n}=t;const o=e.getZoom();return Dn(o),o>=this.maxZoom?{clusters:this.noop({markers:r}),changed:!1}:{clusters:this.cluster({markers:Fn(e,n,r,this.viewportPadding),map:e,mapCanvasProjection:n})}}}const Kn=t=>t.map(t=>new zn({position:Zn.getPosition(t),markers:[t]}));var Yn,Xn,Jn,Qn,to,ro,eo,no,oo,io,so,ao,uo,co,fo,lo,ho,po,mo,go,vo={};function yo(){if(Qn)return Jn;Qn=1;var t=function(){if(Xn)return Yn;Xn=1;var t=ct(),r=ut();return Yn=function(e){if("Function"===t(e))return r(e)}}(),r=kt(),e=v(),n=t(t.bind);return Jn=function(t,o){return r(t),void 0===o?t:e?n(t,o):function(){return t.apply(o,arguments)}},Jn}function wo(){return ro?to:(ro=1,to={})}function bo(){if(no)return eo;no=1;var t=nr(),r=wo(),e=t("iterator"),n=Array.prototype;return eo=function(t){return void 0!==t&&(r.Array===t||n[e]===t)}}function Eo(){if(ao)return so;ao=1;var t=function(){if(io)return oo;io=1;var t={};return t[nr()("toStringTag")]="z",oo="[object z]"===String(t)}(),r=pt(),e=ct(),n=nr()("toStringTag"),o=Object,i="Arguments"===e(function(){return arguments}());return so=t?e:function(t){var s,a,u;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(a=function(t,r){try{return t[r]}catch(t){}}(s=o(t),n))?a:i?e(s):"Object"===(u=e(s))&&r(s.callee)?"Arguments":u}}function ko(){if(co)return uo;co=1;var t=Eo(),r=xt(),e=ft(),n=wo(),o=nr()("iterator");return uo=function(i){if(!e(i))return r(i,o)||r(i,"@@iterator")||n[t(i)]}}function xo(){if(lo)return fo;lo=1;var t=y(),r=kt(),e=yr(),n=Et(),o=ko(),i=TypeError;return fo=function(s,a){var u=arguments.length<2?o(s):a;if(r(u))return e(t(u,s));throw new i(n(s)+" is not iterable")},fo}function Mo(){if(po)return ho;po=1;var t=yo(),r=y(),e=yr(),n=Et(),o=bo(),i=fe(),s=gt(),a=xo(),u=ko(),c=Cn(),f=TypeError,l=function(t,r){this.stopped=t,this.result=r},h=l.prototype;return ho=function(p,m,d){var g,v,y,w,b,E,k,x=d&&d.that,M=!(!d||!d.AS_ENTRIES),O=!(!d||!d.IS_RECORD),P=!(!d||!d.IS_ITERATOR),C=!(!d||!d.INTERRUPTED),S=t(m,x),j=function(t){return g&&c(g,"normal"),new l(!0,t)},A=function(t){return M?(e(t),C?S(t[0],t[1],j):S(t[0],t[1])):C?S(t,j):S(t)};if(O)g=p.iterator;else if(P)g=p;else{if(!(v=u(p)))throw new f(n(p)+" is not iterable");if(o(v)){for(y=0,w=i(p);w>y;y++)if((b=A(p[y]))&&s(h,b))return b;return new l(!1)}g=a(p,v)}for(E=O?p.next:g.next;!(k=r(E,g)).done;){try{b=A(k.value)}catch(t){c(g,"throw",t)}if("object"==typeof b&&b&&s(h,b))return b}return new l(!1)}}go||(go=1,function(){if(mo)return vo;mo=1;var t=qe(),r=y(),e=Mo(),n=kt(),o=yr(),i=Mn(),s=Cn(),a=_n()("forEach",TypeError);t({target:"Iterator",proto:!0,real:!0,forced:a},{forEach:function(t){o(this);try{n(t)}catch(t){s(this,"throw",t)}if(a)return r(a,this,t);var u=i(this),c=0;e(u,function(r){t(r,c++)},{IS_RECORD:!0})}})}());var Oo=Object.getOwnPropertyNames,Po=Object.getOwnPropertySymbols,Co=Object.prototype.hasOwnProperty;function So(t,r){return function(e,n,o){return t(e,n,o)&&r(e,n,o)}}function jo(t){return function(r,e,n){if(!r||!e||"object"!=typeof r||"object"!=typeof e)return t(r,e,n);var o=n.cache,i=o.get(r),s=o.get(e);if(i&&s)return i===e&&s===r;o.set(r,e),o.set(e,r);var a=t(r,e,n);return o.delete(r),o.delete(e),a}}function Ao(t){return Oo(t).concat(Po(t))}var Io=Object.hasOwn||function(t,r){return Co.call(t,r)};function _o(t,r){return t===r||!t&&!r&&t!=t&&r!=r}var To=Object.getOwnPropertyDescriptor,Lo=Object.keys;function qo(t,r,e){var n=t.length;if(r.length!==n)return!1;for(;n-- >0;)if(!e.equals(t[n],r[n],n,n,t,r,e))return!1;return!0}function Ro(t,r){return _o(t.getTime(),r.getTime())}function Zo(t,r){return t.name===r.name&&t.message===r.message&&t.cause===r.cause&&t.stack===r.stack}function zo(t,r){return t===r}function Do(t,r,e){var n=t.size;if(n!==r.size)return!1;if(!n)return!0;for(var o,i,s=new Array(n),a=t.entries(),u=0;(o=a.next())&&!o.done;){for(var c=r.entries(),f=!1,l=0;(i=c.next())&&!i.done;)if(s[l])l++;else{var h=o.value,p=i.value;if(e.equals(h[0],p[0],u,l,t,r,e)&&e.equals(h[1],p[1],h[0],p[0],t,r,e)){f=s[l]=!0;break}l++}if(!f)return!1;u++}return!0}var Fo=_o;function No(t,r,e){var n=Lo(t),o=n.length;if(Lo(r).length!==o)return!1;for(;o-- >0;)if(!Ho(t,r,e,n[o]))return!1;return!0}function Uo(t,r,e){var n,o,i,s=Ao(t),a=s.length;if(Ao(r).length!==a)return!1;for(;a-- >0;){if(!Ho(t,r,e,n=s[a]))return!1;if(o=To(t,n),i=To(r,n),(o||i)&&(!o||!i||o.configurable!==i.configurable||o.enumerable!==i.enumerable||o.writable!==i.writable))return!1}return!0}function Bo(t,r){return _o(t.valueOf(),r.valueOf())}function Wo(t,r){return t.source===r.source&&t.flags===r.flags}function $o(t,r,e){var n=t.size;if(n!==r.size)return!1;if(!n)return!0;for(var o,i,s=new Array(n),a=t.values();(o=a.next())&&!o.done;){for(var u=r.values(),c=!1,f=0;(i=u.next())&&!i.done;){if(!s[f]&&e.equals(o.value,i.value,o.value,i.value,t,r,e)){c=s[f]=!0;break}f++}if(!c)return!1}return!0}function Vo(t,r){var e=t.length;if(r.length!==e)return!1;for(;e-- >0;)if(t[e]!==r[e])return!1;return!0}function Go(t,r){return t.hostname===r.hostname&&t.pathname===r.pathname&&t.protocol===r.protocol&&t.port===r.port&&t.hash===r.hash&&t.username===r.username&&t.password===r.password}function Ho(t,r,e,n){return!("_owner"!==n&&"__o"!==n&&"__v"!==n||!t.$typeof&&!r.$typeof)||Io(r,n)&&e.equals(t[n],r[n],n,n,t,r,e)}var Ko=Array.isArray,Yo="function"==typeof ArrayBuffer&&ArrayBuffer.isView?ArrayBuffer.isView:null,Xo=Object.assign,Jo=Object.prototype.toString.call.bind(Object.prototype.toString);var Qo=ti();function ti(t){void 0===t&&(t={});var r,e=t.circular,n=void 0!==e&&e,o=t.createInternalComparator,i=t.createState,s=t.strict,a=void 0!==s&&s,u=function(t){var r=t.circular,e=t.createCustomConfig,n=t.strict,o={areArraysEqual:n?Uo:qo,areDatesEqual:Ro,areErrorsEqual:Zo,areFunctionsEqual:zo,areMapsEqual:n?So(Do,Uo):Do,areNumbersEqual:Fo,areObjectsEqual:n?Uo:No,arePrimitiveWrappersEqual:Bo,areRegExpsEqual:Wo,areSetsEqual:n?So($o,Uo):$o,areTypedArraysEqual:n?Uo:Vo,areUrlsEqual:Go};if(e&&(o=Xo({},o,e(o))),r){var i=jo(o.areArraysEqual),s=jo(o.areMapsEqual),a=jo(o.areObjectsEqual),u=jo(o.areSetsEqual);o=Xo({},o,{areArraysEqual:i,areMapsEqual:s,areObjectsEqual:a,areSetsEqual:u})}return o}(t),c=function(t){var r=t.areArraysEqual,e=t.areDatesEqual,n=t.areErrorsEqual,o=t.areFunctionsEqual,i=t.areMapsEqual,s=t.areNumbersEqual,a=t.areObjectsEqual,u=t.arePrimitiveWrappersEqual,c=t.areRegExpsEqual,f=t.areSetsEqual,l=t.areTypedArraysEqual,h=t.areUrlsEqual;return function(t,p,m){if(t===p)return!0;if(null==t||null==p)return!1;var d=typeof t;if(d!==typeof p)return!1;if("object"!==d)return"number"===d?s(t,p,m):"function"===d&&o(t,p,m);var g=t.constructor;if(g!==p.constructor)return!1;if(g===Object)return a(t,p,m);if(Ko(t))return r(t,p,m);if(null!=Yo&&Yo(t))return l(t,p,m);if(g===Date)return e(t,p,m);if(g===RegExp)return c(t,p,m);if(g===Map)return i(t,p,m);if(g===Set)return f(t,p,m);var v=Jo(t);return"[object Date]"===v?e(t,p,m):"[object RegExp]"===v?c(t,p,m):"[object Map]"===v?i(t,p,m):"[object Set]"===v?f(t,p,m):"[object Object]"===v?"function"!=typeof t.then&&"function"!=typeof p.then&&a(t,p,m):"[object URL]"===v?h(t,p,m):"[object Error]"===v?n(t,p,m):"[object Arguments]"===v?a(t,p,m):("[object Boolean]"===v||"[object Number]"===v||"[object String]"===v)&&u(t,p,m)}}(u);return function(t){var r=t.circular,e=t.comparator,n=t.createState,o=t.equals,i=t.strict;if(n)return function(t,s){var a=n(),u=a.cache,c=void 0===u?r?new WeakMap:void 0:u,f=a.meta;return e(t,s,{cache:c,equals:o,meta:f,strict:i})};if(r)return function(t,r){return e(t,r,{cache:new WeakMap,equals:o,meta:void 0,strict:i})};var s={cache:void 0,equals:o,meta:void 0,strict:i};return function(t,r){return e(t,r,s)}}({circular:n,comparator:c,createState:i,equals:o?o(c):(r=c,function(t,e,n,o,i,s,a){return r(t,e,a)}),strict:a})}ti({strict:!0}),ti({circular:!0}),ti({circular:!0,strict:!0}),ti({createInternalComparator:function(){return _o}}),ti({strict:!0,createInternalComparator:function(){return _o}}),ti({circular:!0,createInternalComparator:function(){return _o}}),ti({circular:!0,createInternalComparator:function(){return _o},strict:!0});const ri=[Int8Array,Uint8Array,Uint8ClampedArray,Int16Array,Uint16Array,Int32Array,Uint32Array,Float32Array,Float64Array];class ei{static from(t){if(!(t instanceof ArrayBuffer))throw new Error("Data must be an instance of ArrayBuffer.");const[r,e]=new Uint8Array(t,0,2);if(219!==r)throw new Error("Data does not appear to be in a KDBush format.");const n=e>>4;if(1!==n)throw new Error(`Got v${n} data when expected v1.`);const o=ri[15&e];if(!o)throw new Error("Unrecognized array type.");const[i]=new Uint16Array(t,2,1),[s]=new Uint32Array(t,4,1);return new ei(s,i,o,t)}constructor(t,r=64,e=Float64Array,n){if(isNaN(t)||t<0)throw new Error(`Unpexpected numItems value: ${t}.`);this.numItems=+t,this.nodeSize=Math.min(Math.max(+r,2),65535),this.ArrayType=e,this.IndexArrayType=t<65536?Uint16Array:Uint32Array;const o=ri.indexOf(this.ArrayType),i=2*t*this.ArrayType.BYTES_PER_ELEMENT,s=t*this.IndexArrayType.BYTES_PER_ELEMENT,a=(8-s%8)%8;if(o<0)throw new Error(`Unexpected typed array class: ${e}.`);n&&n instanceof ArrayBuffer?(this.data=n,this.ids=new this.IndexArrayType(this.data,8,t),this.coords=new this.ArrayType(this.data,8+s+a,2*t),this._pos=2*t,this._finished=!0):(this.data=new ArrayBuffer(8+i+s+a),this.ids=new this.IndexArrayType(this.data,8,t),this.coords=new this.ArrayType(this.data,8+s+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]=r,new Uint32Array(this.data,4,1)[0]=t)}add(t,r){const e=this._pos>>1;return this.ids[e]=e,this.coords[this._pos++]=t,this.coords[this._pos++]=r,e}finish(){const t=this._pos>>1;if(t!==this.numItems)throw new Error(`Added ${t} items when expected ${this.numItems}.`);return ni(this.ids,this.coords,this.nodeSize,0,this.numItems-1,0),this._finished=!0,this}range(t,r,e,n){if(!this._finished)throw new Error("Data not yet indexed - call index.finish().");const{ids:o,coords:i,nodeSize:s}=this,a=[0,o.length-1,0],u=[];for(;a.length;){const c=a.pop()||0,f=a.pop()||0,l=a.pop()||0;if(f-l<=s){for(let s=l;s<=f;s++){const a=i[2*s],c=i[2*s+1];a>=t&&a<=e&&c>=r&&c<=n&&u.push(o[s])}continue}const h=l+f>>1,p=i[2*h],m=i[2*h+1];p>=t&&p<=e&&m>=r&&m<=n&&u.push(o[h]),(0===c?t<=p:r<=m)&&(a.push(l),a.push(h-1),a.push(1-c)),(0===c?e>=p:n>=m)&&(a.push(h+1),a.push(f),a.push(1-c))}return u}within(t,r,e){if(!this._finished)throw new Error("Data not yet indexed - call index.finish().");const{ids:n,coords:o,nodeSize:i}=this,s=[0,n.length-1,0],a=[],u=e*e;for(;s.length;){const c=s.pop()||0,f=s.pop()||0,l=s.pop()||0;if(f-l<=i){for(let e=l;e<=f;e++)ai(o[2*e],o[2*e+1],t,r)<=u&&a.push(n[e]);continue}const h=l+f>>1,p=o[2*h],m=o[2*h+1];ai(p,m,t,r)<=u&&a.push(n[h]),(0===c?t-e<=p:r-e<=m)&&(s.push(l),s.push(h-1),s.push(1-c)),(0===c?t+e>=p:r+e>=m)&&(s.push(h+1),s.push(f),s.push(1-c))}return a}}function ni(t,r,e,n,o,i){if(o-n<=e)return;const s=n+o>>1;oi(t,r,s,n,o,i),ni(t,r,e,n,s-1,1-i),ni(t,r,e,s+1,o,1-i)}function oi(t,r,e,n,o,i){for(;o>n;){if(o-n>600){const s=o-n+1,a=e-n+1,u=Math.log(s),c=.5*Math.exp(2*u/3),f=.5*Math.sqrt(u*c*(s-c)/s)*(a-s/2<0?-1:1);oi(t,r,e,Math.max(n,Math.floor(e-a*c/s+f)),Math.min(o,Math.floor(e+(s-a)*c/s+f)),i)}const s=r[2*e+i];let a=n,u=o;for(ii(t,r,n,e),r[2*o+i]>s&&ii(t,r,n,o);a<u;){for(ii(t,r,a,u),a++,u--;r[2*a+i]<s;)a++;for(;r[2*u+i]>s;)u--}r[2*n+i]===s?ii(t,r,n,u):(u++,ii(t,r,u,o)),u<=e&&(n=u+1),e<=u&&(o=u-1)}}function ii(t,r,e,n){si(t,e,n),si(r,2*e,2*n),si(r,2*e+1,2*n+1)}function si(t,r,e){const n=t[r];t[r]=t[e],t[e]=n}function ai(t,r,e,n){const o=t-e,i=r-n;return o*o+i*i}const ui={minZoom:0,maxZoom:16,minPoints:2,radius:40,extent:512,nodeSize:64,log:!1,generateId:!1,reduce:null,map:t=>t},ci=Math.fround||(fi=new Float32Array(1),t=>(fi[0]=+t,fi[0]));var fi;class li{constructor(t){this.options=Object.assign(Object.create(ui),t),this.trees=new Array(this.options.maxZoom+1),this.stride=this.options.reduce?7:6,this.clusterProps=[]}load(t){const{log:r,minZoom:e,maxZoom:n}=this.options;r&&console.time("total time");const o=`prepare ${t.length} points`;r&&console.time(o),this.points=t;const i=[];for(let r=0;r<t.length;r++){const e=t[r];if(!e.geometry)continue;const[n,o]=e.geometry.coordinates,s=ci(mi(n)),a=ci(di(o));i.push(s,a,1/0,r,-1,1),this.options.reduce&&i.push(0)}let s=this.trees[n+1]=this._createTree(i);r&&console.timeEnd(o);for(let t=n;t>=e;t--){const e=+Date.now();s=this.trees[t]=this._createTree(this._cluster(s,t)),r&&console.log("z%d: %d clusters in %dms",t,s.numItems,+Date.now()-e)}return r&&console.timeEnd("total time"),this}getClusters(t,r){let e=((t[0]+180)%360+360)%360-180;const n=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)e=-180,o=180;else if(e>o){const t=this.getClusters([e,n,180,i],r),s=this.getClusters([-180,n,o,i],r);return t.concat(s)}const s=this.trees[this._limitZoom(r)],a=s.range(mi(e),di(i),mi(o),di(n)),u=s.data,c=[];for(const t of a){const r=this.stride*t;c.push(u[r+5]>1?hi(u,r,this.clusterProps):this.points[u[r+3]])}return c}getChildren(t){const r=this._getOriginId(t),e=this._getOriginZoom(t),n="No cluster with the specified id.",o=this.trees[e];if(!o)throw new Error(n);const i=o.data;if(r*this.stride>=i.length)throw new Error(n);const s=this.options.radius/(this.options.extent*Math.pow(2,e-1)),a=i[r*this.stride],u=i[r*this.stride+1],c=o.within(a,u,s),f=[];for(const r of c){const e=r*this.stride;i[e+4]===t&&f.push(i[e+5]>1?hi(i,e,this.clusterProps):this.points[i[e+3]])}if(0===f.length)throw new Error(n);return f}getLeaves(t,r,e){r=r||10,e=e||0;const n=[];return this._appendLeaves(n,t,r,e,0),n}getTile(t,r,e){const n=this.trees[this._limitZoom(t)],o=Math.pow(2,t),{extent:i,radius:s}=this.options,a=s/i,u=(e-a)/o,c=(e+1+a)/o,f={features:[]};return this._addTileFeatures(n.range((r-a)/o,u,(r+1+a)/o,c),n.data,r,e,o,f),0===r&&this._addTileFeatures(n.range(1-a/o,u,1,c),n.data,o,e,o,f),r===o-1&&this._addTileFeatures(n.range(0,u,a/o,c),n.data,-1,e,o,f),f.features.length?f:null}getClusterExpansionZoom(t){let r=this._getOriginZoom(t)-1;for(;r<=this.options.maxZoom;){const e=this.getChildren(t);if(r++,1!==e.length)break;t=e[0].properties.cluster_id}return r}_appendLeaves(t,r,e,n,o){const i=this.getChildren(r);for(const r of i){const i=r.properties;if(i&&i.cluster?o+i.point_count<=n?o+=i.point_count:o=this._appendLeaves(t,i.cluster_id,e,n,o):o<n?o++:t.push(r),t.length===e)break}return o}_createTree(t){const r=new ei(t.length/this.stride|0,this.options.nodeSize,Float32Array);for(let e=0;e<t.length;e+=this.stride)r.add(t[e],t[e+1]);return r.finish(),r.data=t,r}_addTileFeatures(t,r,e,n,o,i){for(const s of t){const t=s*this.stride,a=r[t+5]>1;let u,c,f;if(a)u=pi(r,t,this.clusterProps),c=r[t],f=r[t+1];else{const e=this.points[r[t+3]];u=e.properties;const[n,o]=e.geometry.coordinates;c=mi(n),f=di(o)}const l={type:1,geometry:[[Math.round(this.options.extent*(c*o-e)),Math.round(this.options.extent*(f*o-n))]],tags:u};let h;h=a||this.options.generateId?r[t+3]:this.points[r[t+3]].id,void 0!==h&&(l.id=h),i.features.push(l)}}_limitZoom(t){return Math.max(this.options.minZoom,Math.min(Math.floor(+t),this.options.maxZoom+1))}_cluster(t,r){const{radius:e,extent:n,reduce:o,minPoints:i}=this.options,s=e/(n*Math.pow(2,r)),a=t.data,u=[],c=this.stride;for(let e=0;e<a.length;e+=c){if(a[e+2]<=r)continue;a[e+2]=r;const n=a[e],f=a[e+1],l=t.within(a[e],a[e+1],s),h=a[e+5];let p=h;for(const t of l){const e=t*c;a[e+2]>r&&(p+=a[e+5])}if(p>h&&p>=i){let t,i=n*h,s=f*h,m=-1;const d=(e/c<<5)+(r+1)+this.points.length;for(const n of l){const u=n*c;if(a[u+2]<=r)continue;a[u+2]=r;const f=a[u+5];i+=a[u]*f,s+=a[u+1]*f,a[u+4]=d,o&&(t||(t=this._map(a,e,!0),m=this.clusterProps.length,this.clusterProps.push(t)),o(t,this._map(a,u)))}a[e+4]=d,u.push(i/p,s/p,1/0,d,-1,p),o&&u.push(m)}else{for(let t=0;t<c;t++)u.push(a[e+t]);if(p>1)for(const t of l){const e=t*c;if(!(a[e+2]<=r)){a[e+2]=r;for(let t=0;t<c;t++)u.push(a[e+t])}}}}return u}_getOriginId(t){return t-this.points.length>>5}_getOriginZoom(t){return(t-this.points.length)%32}_map(t,r,e){if(t[r+5]>1){const n=this.clusterProps[t[r+6]];return e?Object.assign({},n):n}const n=this.points[t[r+3]].properties,o=this.options.map(n);return e&&o===n?Object.assign({},o):o}}function hi(t,r,e){return{type:"Feature",id:t[r+3],properties:pi(t,r,e),geometry:{type:"Point",coordinates:[(n=t[r],360*(n-.5)),gi(t[r+1])]}};var n}function pi(t,r,e){const n=t[r+5],o=n>=1e4?`${Math.round(n/1e3)}k`:n>=1e3?Math.round(n/100)/10+"k":n,i=t[r+6],s=-1===i?{}:Object.assign({},e[i]);return Object.assign(s,{cluster:!0,cluster_id:t[r+3],point_count:n,point_count_abbreviated:o})}function mi(t){return t/360+.5}function di(t){const r=Math.sin(t*Math.PI/180),e=.5-.25*Math.log((1+r)/(1-r))/Math.PI;return e<0?0:e>1?1:e}function gi(t){const r=(180-360*t)*Math.PI/180;return 360*Math.atan(Math.exp(r))/Math.PI-90}class vi extends Gn{constructor(t){var{maxZoom:r,radius:e=60}=t,n=Tn(t,["maxZoom","radius"]);super({maxZoom:r}),this.markers=[],this.clusters=[],this.state={zoom:-1},this.superCluster=new li(Object.assign({maxZoom:this.maxZoom,radius:e},n))}calculate(t){let r=!1,e=t.map.getZoom();Dn(e),e=Math.round(e);const n={zoom:e};if(!Qo(t.markers,this.markers)){r=!0,this.markers=[...t.markers];const e=this.markers.map(t=>{const r=Zn.getPosition(t);return{type:"Feature",geometry:{type:"Point",coordinates:[r.lng(),r.lat()]},properties:{marker:t}}});this.superCluster.load(e)}return r||(this.state.zoom<=this.maxZoom||n.zoom<=this.maxZoom)&&(r=!Qo(this.state,n)),this.state=n,0===t.markers.length?(this.clusters=[],{clusters:this.clusters,changed:r}):(r&&(this.clusters=this.cluster(t)),{clusters:this.clusters,changed:r})}cluster(t){let{map:r}=t;const e=r.getZoom();return Dn(e),this.superCluster.getClusters([-180,-90,180,90],Math.round(e)).map(t=>this.transformCluster(t))}transformCluster(t){let{geometry:{coordinates:[r,e]},properties:n}=t;if(n.cluster)return new zn({markers:this.superCluster.getLeaves(n.cluster_id,1/0).map(t=>t.properties.marker),position:{lat:e,lng:r}});const o=n.marker;return new zn({markers:[o],position:Zn.getPosition(o)})}}var yi,wi,bi,Ei,ki,xi={};function Mi(){if(bi)return xi;bi=1;var t=qe(),r=Mo(),e=kt(),n=yr(),o=Mn(),i=Cn(),s=_n(),a=function(){if(wi)return yi;wi=1;var t=v(),r=Function.prototype,e=r.apply,n=r.call;return yi="object"==typeof Reflect&&Reflect.apply||(t?n.bind(e):function(){return n.apply(e,arguments)}),yi}(),u=d(),c=TypeError,f=u(function(){[].keys().reduce(function(){},void 0)}),l=!f&&s("reduce",c);return t({target:"Iterator",proto:!0,real:!0,forced:f||l},{reduce:function(t){n(this);try{e(t)}catch(t){i(this,"throw",t)}var s=arguments.length<2,u=s?void 0:arguments[1];if(l)return a(l,this,s?[t]:[t,u]);var f=o(this),h=0;if(r(f,function(r){s?(s=!1,u=r):u=t(u,r,h),h++},{IS_RECORD:!0}),s)throw new c("Reduce of empty iterator with no initial value");return u}}),xi}Ei||(Ei=1,Mi());class Oi{constructor(t,r){this.markers={sum:t.length};const e=r.map(t=>t.count),n=e.reduce((t,r)=>t+r,0);this.clusters={count:r.length,markers:{mean:n/r.length,sum:n,min:Math.min(...e),max:Math.max(...e)}}}}class Pi{render(t,r,e){let{count:n,position:o}=t;const i=`<svg fill="${n>Math.max(10,r.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">${n}</text>\n</svg>`,s=`Cluster of ${n} markers`,a=Number(google.maps.Marker.MAX_ZINDEX)+n;if(Zn.isAdvancedMarkerAvailable(e)){const t=(new DOMParser).parseFromString(i,"image/svg+xml").documentElement;t.setAttribute("transform","translate(0 25)");const r={map:e,position:o,zIndex:a,title:s,content:t};return new google.maps.marker.AdvancedMarkerElement(r)}const u={position:o,zIndex:a,title:s,icon:{url:`data:image/svg+xml;base64,${btoa(i)}`,anchor:new google.maps.Point(25,25)}};return new google.maps.Marker(u)}}class Ci{constructor(){!function(t,r){for(let e in r.prototype)t.prototype[e]=r.prototype[e]}(Ci,google.maps.OverlayView)}}t.MarkerClustererEvents=void 0,(ki=t.MarkerClustererEvents||(t.MarkerClustererEvents={})).CLUSTERING_BEGIN="clusteringbegin",ki.CLUSTERING_END="clusteringend",ki.CLUSTER_CLICK="click",ki.GMP_CLICK="gmp-click";const Si=(t,r,e)=>{r.bounds&&e.fitBounds(r.bounds)};return t.AbstractAlgorithm=Gn,t.AbstractViewportAlgorithm=Hn,t.Cluster=zn,t.ClusterStats=Oi,t.DefaultRenderer=Pi,t.GridAlgorithm=class extends Hn{constructor(t){var{maxDistance:r=4e4,gridSize:e=40}=t;super(Tn(t,["maxDistance","gridSize"])),this.clusters=[],this.state={zoom:-1},this.maxDistance=r,this.gridSize=e}calculate(t){let{markers:r,map:e,mapCanvasProjection:n}=t;const o=e.getZoom();Dn(o);const i={zoom:o};let s=!1;return this.state.zoom>=this.maxZoom&&i.zoom>=this.maxZoom||(s=!Qo(this.state,i)),this.state=i,o>=this.maxZoom?{clusters:this.noop({markers:r}),changed:s}:{clusters:this.cluster({markers:Fn(e,n,r,this.viewportPadding),map:e,mapCanvasProjection:n})}}cluster(t){let{markers:r,map:e,mapCanvasProjection:n}=t;return this.clusters=[],r.forEach(t=>{this.addToClosestCluster(t,e,n)}),this.clusters}addToClosestCluster(t,r,e){let n=this.maxDistance,o=null;for(let r=0;r<this.clusters.length;r++){const e=this.clusters[r];Dn(e.bounds);const i=Bn(e.bounds.getCenter().toJSON(),Zn.getPosition(t).toJSON());i<n&&(n=i,o=e)}if(o)if(Dn(o.bounds),Nn(o.bounds,e,this.gridSize).contains(Zn.getPosition(t)))o.push(t);else{const r=new zn({markers:[t]});this.clusters.push(r)}else{const r=new zn({markers:[t]});this.clusters.push(r)}}},t.MarkerClusterer=class extends Ci{constructor(t){let{map:r,markers:e=[],algorithmOptions:n={},algorithm:o=new vi(n),renderer:i=new Pi,onClusterClick:s=Si}=t;super(),this.map=null,this.idleListener=null,this.markers=[...e],this.clusters=[],this.algorithm=o,this.renderer=i,this.onClusterClick=s,r&&this.setMap(r)}addMarker(t,r){this.markers.includes(t)||(this.markers.push(t),r||this.render())}addMarkers(t,r){t.forEach(t=>{this.addMarker(t,!0)}),r||this.render()}removeMarker(t,r){const e=this.markers.indexOf(t);return-1!==e&&(Zn.setMap(t,null),this.markers.splice(e,1),r||this.render(),!0)}removeMarkers(t,r){let e=!1;return t.forEach(t=>{e=this.removeMarker(t,!0)||e}),e&&!r&&this.render(),e}clearMarkers(t){this.markers.length=0,t||this.render()}render(){const r=this.getMap();if(r instanceof google.maps.Map&&r.getProjection()){google.maps.event.trigger(this,t.MarkerClustererEvents.CLUSTERING_BEGIN,this);const{clusters:e,changed:n}=this.algorithm.calculate({markers:this.markers,map:r,mapCanvasProjection:this.getProjection()});if(n||null==n){const t=new Set;for(const r of e)1==r.markers.length&&t.add(r.markers[0]);const r=[];for(const e of this.clusters)null!=e.marker&&(1==e.markers.length?t.has(e.marker)||Zn.setMap(e.marker,null):r.push(e.marker));this.clusters=e,this.renderClusters(),requestAnimationFrame(()=>r.forEach(t=>Zn.setMap(t,null)))}google.maps.event.trigger(this,t.MarkerClustererEvents.CLUSTERING_END,this)}}onAdd(){const t=this.getMap();Dn(t),this.idleListener=t.addListener("idle",this.render.bind(this)),this.render()}onRemove(){this.idleListener&&google.maps.event.removeListener(this.idleListener),this.reset()}reset(){this.markers.forEach(t=>Zn.setMap(t,null)),this.clusters.forEach(t=>t.delete()),this.clusters=[]}renderClusters(){const r=new Oi(this.markers,this.clusters),e=this.getMap();this.clusters.forEach(n=>{if(1===n.markers.length)n.marker=n.markers[0];else if(n.marker=this.renderer.render(n,r,e),n.markers.forEach(t=>Zn.setMap(t,null)),this.onClusterClick){const r=Zn.isAdvancedMarker(n.marker)?t.MarkerClustererEvents.GMP_CLICK:t.MarkerClustererEvents.CLUSTER_CLICK;n.marker.addListener(r,r=>{google.maps.event.trigger(this,t.MarkerClustererEvents.CLUSTER_CLICK,n),this.onClusterClick(r,n,e)})}Zn.setMap(n.marker,e)})}},t.MarkerUtils=Zn,t.NoopAlgorithm=class extends Gn{constructor(t){super(Tn(t,[]))}calculate(t){let{markers:r,map:e,mapCanvasProjection:n}=t;return{clusters:this.cluster({markers:r,map:e,mapCanvasProjection:n}),changed:!1}}cluster(t){return this.noop(t)}},t.SuperClusterAlgorithm=vi,t.SuperClusterViewportAlgorithm=class extends Hn{constructor(t){var{maxZoom:r,radius:e=60,viewportPadding:n=60}=t,o=Tn(t,["maxZoom","radius","viewportPadding"]);super({maxZoom:r,viewportPadding:n}),this.markers=[],this.clusters=[],this.superCluster=new li(Object.assign({maxZoom:this.maxZoom,radius:e},o)),this.state={zoom:-1,view:[0,0,0,0]}}calculate(t){const r=this.getViewportState(t);let e=!Qo(this.state,r);if(!Qo(t.markers,this.markers)){e=!0,this.markers=[...t.markers];const r=this.markers.map(t=>{const r=Zn.getPosition(t);return{type:"Feature",geometry:{type:"Point",coordinates:[r.lng(),r.lat()]},properties:{marker:t}}});this.superCluster.load(r)}return e&&(this.clusters=this.cluster(t),this.state=r),{clusters:this.clusters,changed:e}}cluster(t){const r=this.getViewportState(t);return this.superCluster.getClusters(r.view,r.zoom).map(t=>this.transformCluster(t))}transformCluster(t){let{geometry:{coordinates:[r,e]},properties:n}=t;if(n.cluster)return new zn({markers:this.superCluster.getLeaves(n.cluster_id,1/0).map(t=>t.properties.marker),position:{lat:e,lng:r}});const o=n.marker;return new zn({markers:[o],position:Zn.getPosition(o)})}getViewportState(t){const r=t.map.getZoom(),e=t.map.getBounds();return Dn(r),Dn(e),{zoom:Math.round(r),view:Un(e,t.mapCanvasProjection,this.viewportPadding)}}},t.defaultOnClusterClickHandler=Si,t.distanceBetweenPoints=Bn,t.extendBoundsToPaddedViewport=Nn,t.extendPixelBounds=$n,t.filterMarkersToPaddedViewport=Fn,t.getPaddedViewport=Un,t.noop=Kn,t.pixelBoundsToLatLngBounds=Vn,t}({});
</script>