1(function ($, olExtents, olFixedLayers, olMaps, olStyles) { 2 let tribalStyle; 3 (function main() { 4 if (!document.querySelector("#c--umrb-region")) { 5 return; 6 } 7 initialUMRBLegend(); 8 bindUMRBEvents(); 9 getUpdateDates(); 10 window.umrbStyle = umrbStyle; 11 window.umrbFAWStyle = umrbFAWStyle; 12 })(); 13 14 /** 15 * Creates custom style for UMRB points. 16 * 17 * Bound to the global object to keep the general feature style function as clean as possible. 18 * @param {string} color - Hex color for feature. 19 * @param {{}} properties - Object of properties of feature. 20 * @param {Metadata} metadata - Metadata of map. 21 * @return {ol.style.Style} - The style. 22 */ 23 function umrbStyle(color, properties, metadata) { 24 let radius = 7; 25 if (color === "#cccccc") { 26 // https://docs.google.com/document/d/1j1ZFFB0pOS40UpWx39ZIk6bQ-RRk6XlvrIV9Ty0F-qU/ for 08.07.2024 27 radius = 4.25; 28 } 29 if (color === "transparent") { 30 return olStyles.makeCachedStyle("point", { radius: 0, fillColor: color, strokeColor: color, strokeWidth: 0 }); 31 } 32 const classes = metadata.classes; 33 if ( 34 (classes.includes("-topsoil") && !properties.topsoil_shift) || 35 (classes.includes("-subsoil") && !properties.subsoil_shift) || 36 (classes.includes("-column") && !properties.tcolumn_shift) 37 ) { 38 return olStyles.makeCachedStyle("point", { radius, fillColor: color, strokeColor: "#000", strokeWidth: 0.5 }); 39 } 40 return olStyles.makeCachedStyle("shape", { points: 3, radius, fillColor: color }); 41 } 42 43 /** 44 * Creates custom style for UMRB FAW points. 45 * 46 * Bound to the global object to keep the general feature style function as clean as possible. 47 * @param {string} color - Hex color for feature. No data is #ccc and points are rendered smaller. 48 * @return {ol.style.Style} - The style. 49 */ 50 function umrbFAWStyle(color) { 51 let radius = 7; 52 if (color === "#cccccc") { 53 radius = 4.25; 54 } 55 return olStyles.makeCachedStyle("point", { radius, fillColor: color, strokeColor: "#000", strokeWidth: 0.5 }); 56 } 57 58 function bindUMRBEvents() { 59 document.querySelector("#c--umrb-region").addEventListener("change", handleUMRBRegionChange); 60 document.querySelector("#c--umrb-underlay").addEventListener("change", handleUMRBUnderlayChange); 61 document.addEventListener("click", handleUMRBOpenScreenshot); 62 document.addEventListener("change", delegateUMRBScreenshotLegend); 63 //document.querySelector("#map-screenshot-usdm-selector").addEventListener("change", delegateUMRBScreenshotLegend); 64 } 65 66 function handleUMRBRegionChange() { 67 const newArea = document.querySelector("#c--umrb-region").selectedOptions[0].getAttribute("data-region"); 68 const maps = document.querySelectorAll(".interactive-map-panel .interactive-map"); 69 const tabs = document.querySelectorAll(".map-tab"); 70 handleUnderlayLegend(); 71 let i, ii, l, ll, map, classes; 72 for (i = 0, l = tabs.length; i < l; i++) { 73 map = tabs[i]; 74 classes = map.getAttribute("data-class").split(" "); 75 for (ii = 0, ll = classes.length; ii < ll; ii++) { 76 if (classes[ii].indexOf("aoi--") !== -1) { 77 classes.splice(ii, 1, "aoi--" + newArea); 78 break; 79 } 80 } 81 map.setAttribute("data-class", classes.join(" ")); 82 } 83 for (i = 0, l = maps.length; i < l; i++) { 84 map = $(maps[i]).data("map"); 85 if (!map || !map.metadata) { 86 continue; 87 } 88 map.metadata.abv = newArea; 89 classes = map.metadata.classes.split(" "); 90 for (ii = 0, ll = classes.length; ii < ll; ii++) { 91 if (classes[ii].indexOf("aoi--") !== -1) { 92 classes.splice(ii, 1, "aoi--" + newArea); 93 break; 94 } 95 } 96 map.metadata.classes = classes.join(" "); 97 olMaps.recenterOLMap(map); 98 if (newArea === "umrb-tribal") { 99 map.tribal.setOpacity(1); 100 map.tribal.getLayers().push(olFixedLayers.tribal(olStyles.makeCachedStyle("basic", {"fillColor": null, "strokeColor": "#000", "strokeWidth": 1.75}))); 101 if (document.querySelector("#map-screenshot-tribal-lines").checked === false) { 102 $("#map-screenshot-tribal-lines").trigger("click"); 103 } 104 } else { 105 map.tribal.setOpacity(0); 106 map.tribal.getLayers().clear(); 107 if (document.querySelector("#map-screenshot-tribal-lines").checked === true) { 108 $("#map-screenshot-tribal-lines").trigger("click"); 109 } 110 } 111 } 112 } 113 114 function handleUMRBUnderlayChange() { 115 const newLayer = document.querySelector("#c--umrb-underlay").value; 116 const maps = document.querySelectorAll(".interactive-map-panel .interactive-map"); 117 const tabs = document.querySelectorAll(".c--tab.map-tab"); 118 let i, l, map; 119 for (i = 0, l = maps.length; i < l; i++) { 120 map = $(maps[i]).data("map"); 121 if (!map || !map.metadata) { 122 continue; 123 } 124 map.metadata.usdm = newLayer;
125 olMaps.handleUnderlay(map, map.metadata); 126 } 127 for (i = 0, l = tabs.length; i < l; i++) { 128 tabs[i].setAttribute("data-usdm", newLayer); 129 } 130 handleUnderlayScreenshot(newLayer); 131 handleUnderlayLegend(); 132 } 133 134 function handleUnderlayScreenshot(type) { 135 if (!document.querySelector("#map-screenshot-usdm-selector")) { 136 return; 137 } 138 _addSnodasSweOption(); 139 document.querySelector("#map-screenshot-usdm-selector").value = type; 140 document.querySelectorAll(".map-screenshot-map-wrappers .interactive-map").forEach(function (mapElem) { 141 const map = $(mapElem).data("map"); 142 if (!map || map.metadata) { 143 return; 144 } 145 map.metadata.usdm = type; 146 olMaps.handleUnderlay(map, map.metadata); 147 }); 148 window.reprocessMetadata(); 149 handleUMRBScreenshotLegend(); 150 } 151 152 function _addSnodasSweOption() { 153 if (!document.querySelector("#map-screenshot-usdm-selector")) { 154 return; 155 } 156 if (document.querySelector("#map-screenshot-usdm-selector option[value='snodasswe']")) { 157 return; 158 } 159 document.querySelector("label[for='map-screenshot-usdm-selector']").textContent = "Over/Underlay layer"; 160 document.querySelector("label[for='map-screenshot-usdm-transparency']").textContent = "Over/Underlay Transparency"; 161 const select = document.querySelector("#map-screenshot-usdm-selector"); 162 const val = select.value; 163 select.replaceChildren( 164 _makeOption("Do not display", "hidden", false), 165 _makeOption("U.S. Drought Monitor (above)", "above", false), 166 _makeOption("U.S. Drought Monitor (below)", "below", false), 167 _makeOption("U.S. Drought Monitor (Categorical border lines)", "abovelines", false), 168 _makeOption("U.S. Drought Monitor (Categorical border lines with light fill)", "abovelinesfill", false), 169 _makeOption("SNODAS % of Avg. SWE", "snodasswe", false), 170 _makeOption("SNODAS % of Avg. Snow Depth", "snodassnowdepth", false) 171 ); 172 select.value = val; 173 } 174 175 function handleUMRBOpenScreenshot(e) { 176 if (e.target.classList.contains("screenshot-expand-button") || e.target.closest(".screenshot-expand-button") || e.target.closest(".custom-menu")) { 177 _addSnodasSweOption(); 178 handleUMRBScreenshotLegend(); 179 } 180 } 181 182 function _makeOption(label, value, disabled) { 183 const elem = document.createElement("option"); 184 elem.textContent = label; 185 elem.setAttribute("value", value); 186 if (disabled) { 187 elem.setAttribute("disabled", "disabled"); 188 } 189 return elem; 190 } 191 192 function delegateUMRBScreenshotLegend(e) { 193 if (e.target.id !== "map-screenshot-usdm-selector") { 194 return; 195 } 196 handleUMRBScreenshotLegend(); 197 } 198 199 function handleUMRBScreenshotLegend() { 200 const wrapper = document.querySelector(".map-screenshot-map-legend"); 201 const value = document.querySelector("#map-screenshot-usdm-selector").value; 202 const usdmLegends = _findUSDMLegendItem(wrapper); 203 const sweLegends = _findSWELegend(wrapper); 204 const snowDepthLegends = _findSnowDepthLegend(wrapper); 205 const tribalLegend = wrapper.querySelectorAll(".tribal-template"); 206 let i, l; 207 for (i = 0, l = usdmLegends.length; i < l; i++) { 208 usdmLegends[i].remove(); 209 } 210 for (i = 0, l = sweLegends.length; i < l; i++) { 211 sweLegends[i].remove(); 212 } 213 for (i = 0, l = snowDepthLegends.length; i < l; i++) { 214 snowDepthLegends[i].remove(); 215 } 216 for (i = 0, l = tribalLegend.length; i < l; i++) { 217 tribalLegend[i].remove(); 218 } 219 if (value === "hidden") { 220 // no-op 221 } else if (value === "snodasswe") { 222 document.querySelector(".map-screenshot-map-legend .map-toggle-item").appendChild($(_makeSNODASSWELegend())[0]); 223 } else if (value === "snodassnowdepth") { 224 document.querySelector(".map-screenshot-map-legend .map-toggle-item").appendChild($(_makeSNODASSnowDepthLegend())[0]); 225 } else { 226 document.querySelector(".map-screenshot-map-legend .map-toggle-item").appendChild($(_makeUSDMLegend())[0]); 227 } 228 const tribalSet = document.querySelector("#map-screenshot-tribal-lines").checked; 229 if (tribalSet) { 230 document.querySelector(".map-screenshot-map-legend .map-toggle-item").appendChild($(_buildTribalLegendBase())[0]); 231 } 232 } 233 234 /** 235 * Scans through the legend for the screenshot and attempts to find a legend 236 * for the USDM, based on text patterns used throughout the site. 237 * 238 * @param {Element} legend - Legend in the screenshot widget. Selector: ".map-screenshot-map-legend". 239 * @return {Element|null} - USDM legend if it exists. 240 * @private 241 */ 242 function _findUSDMLegendItem(legend) { 243 const items = []; 244 const labels = legend.querySelectorAll(".legend-label h5"); 245 let searchString, i, l; 246 for (i = 0, l = labels.length; i < l; i++) { 247 searchString = labels[i].textContent.toLowerCase().trim().replace("u.s.", "us"); 248 if (searchString.indexOf("us drought monitor") !== -1) { 249 items.push(labels[i].closest(".paragraph--type--legend-ramp")); 250 } 251 } 252 return items; 253 } 254 255 function _findSWELegend(legend) { 256 return legend.querySelectorAll(".c--snodas-swe-helper"); 257 } 258 259 function _findSnowDepthLegend(legend) { 260 return legend.querySelectorAll(".c--snodas-snow-depth-helper"); 261 } 262 263 function handleUMRBTimeChange() { 264 const val = document.querySelector("#c--umrb-slider").value; 265 const maps = document.querySelectorAll(".interactive-map-panel .interactive-map"); 266 let newUrl; 267 let i, l, map; 268 for (i = 0, l = maps.length; i < l; i++) { 269 map = $(maps[i]).data("map"); 270 newUrl = map.metadata.layer; 271 if (newUrl.indexOf("--") !== -1) { 272 newUrl = newUrl.replace(/--\d+/, "--" + val.toString()); 273 map.metadata.layer = newUrl; 274 olMaps.drawOLDataLayer(map, map.metadata, maps[i]); 275 } 276 } 277 const tabs = document.querySelectorAll(".c--tab.map-tab"); 278 let tab; 279 for (i = 0, l = tabs.length; i < l; i++) { 280 tab = tabs[i]; 281 newUrl = tab.getAttribute("data-layer"); 282 if (newUrl.indexOf("--") !== -1) { 283 newUrl = newUrl.replace(/--\d+/, "--" + val.toString()); 284 tab.setAttribute("data-layer", newUrl); 285 } 286 } 287 const popup = document.querySelector(".c--umrb-popup"); 288 if (val.toString() === "10") { 289 popup.textContent = "Example Live Data"; 290 } else { 291 popup.textContent = "Random Data Set - " + val.toString(); 292 } 293 } 294 295 function initialUMRBLegend() { 296 const legends = getAllLegendWrappers(); 297 let legend, newWrap, i, l; 298 for (i = 0, l = legends.length; i < l; i++) { 299 legend = legends[i]; 300 newWrap = makeWrap(); 301 legend.appendChild(newWrap); 302 } 303 handleUnderlayLegend(); 304 } 305 306 function getAllLegendWrappers() { 307 return document.querySelectorAll(".legend-wrapper .map-toggle-item"); 308 } 309 310 function handleUnderlayLegend() { 311 const underlay = document.querySelector("#c--umrb-underlay").value; 312 const toggles = document.querySelectorAll(".legend-wrapper .c--umrb-legend-toggle"); 313 const tribalActive = document.querySelector("#c--umrb-region").selectedOptions[0].getAttribute("data-region") === "umrb-tribal"; 314 let i, ii, l, ll, child, wrapper, usdmLegends, sweLegends, tribalLegend; 315 if (!toggles.length) { 316 return; 317 } 318 for (i = 0, l = toggles.length; i < l; i++) { 319 wrapper = toggles[i].closest(".map-toggle-item"); 320 usdmLegends = _findUSDMLegendItem(wrapper); 321 sweLegends = _findSWELegend(wrapper); 322 tribalLegend = wrapper.querySelectorAll(".tribal-template"); 323 for (ii = 0, ll = usdmLegends.length; ii < ll; ii++) { 324 usdmLegends[ii].remove(); 325 } 326 for (ii = 0, ll = sweLegends.length; ii < ll; ii++) { 327 sweLegends[ii].remove(); 328 } 329 for (ii = 0, ll = tribalLegend.length; ii < ll; ii++) { 330 tribalLegend[ii].remove(); 331 } 332 child = ""; 333 if (underlay === "below") { 334 child = _makeUSDMLegend(); 335 } 336 if (underlay === "snodasswe") { 337 child = _makeSNODASSWELegend(); 338 } 339 if (underlay === "snodassnowdepth") { 340 child = _makeSNODASSnowDepthLegend(); 341 } 342 if (tribalActive) { 343 child += _buildTribalLegendBase(); 344 } 345 toggles[i].innerHTML = child; 346 } 347 } 348 349 function makeWrap() { 350 const div = document.createElement("div"); 351 div.classList.add("c--umrb-legend-toggle"); 352 return div; 353 } 354 355 function _makeUSDMLegend() { 356 const rand = Math.floor(Math.random() * 30000); 357 return `<div class="field field--name-field-paragraph-references field--type-entity-reference-revisions field--label-hidden"> 358 <div> 359 <div class="paragraph paragraph--type--legend-ramp paragraph--view-mode--default position-relative"> 360 <div class="legend-label position-relative grid-row"> 361 <h5 class="h4 margin-top-0 margin-bottom-1 grid-col">U.S. Drought Monitor</h5> 362 </div> 363 <div class="legend-ramp c--legend c--legend-horizontal" role="table" aria-label="Map legend - U.S. Drought Monitor"> 364 <div role="row"> 365 <div role="cell"> 366 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-15479-1" data-legend="${rand}-15479-1" tabindex="0">
367 <span class="legend-color" style="background-color:#ffff00;"></span> 368 <span class="legend-label" id="legend-label-${rand}-15479-1">D0</span> 369 </button> 370 </div> 371 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 30px;"> 372 <div class="" id="legend-details-${rand}-15479-1" data-popover="${rand}-15479-1" aria-modal="true" tabindex="-1"> 373 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 374 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-15479-1">D0 - Abnormally Dry</h6> 375 <div class="font-body-2xs" id="legend-content-${rand}-15479-1"><p>Abnormally Dry (D0) indicates a region that is going into or coming out of drought, according to the U.S. Drought Monitor. <a href="https://www.drought.gov/impacts#impacts-table">View typical impacts by state.</a></p></div> 376 </div> 377 </div> 378 </div> 379 <div role="row"> 380 <div role="cell"> 381 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-15479-2" data-legend="${rand}-15479-2" tabindex="0"> 382 <span class="legend-color" style="background-color:#fcd37f;"></span> 383 <span class="legend-label" id="legend-label-${rand}-15479-2">D1</span> 384 </button> 385 </div> 386 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 108px;"> 387 <div class="" id="legend-details-${rand}-15479-2" data-popover="${rand}-15479-2" aria-modal="true" tabindex="-1"> 388 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 389 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-15479-2">D1 â Moderate Drought</h6> 390 <div class="font-body-2xs" id="legend-content-${rand}-15479-2"><p>Moderate Drought (D1) is the first of four drought categories (D1âD4), according to the U.S. Drought Monitor. <a href="https://www.drought.gov/impacts#impacts-table">View typical impacts by state.</a></p></div> 391 </div> 392 </div> 393 </div> 394 <div role="row"> 395 <div role="cell"> 396 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-15479-3" data-legend="${rand}-15479-3" tabindex="0"> 397 <span class="legend-color" style="background-color:#fa0;"></span> 398 <span class="legend-label" id="legend-label-${rand}-15479-3">D2</span> 399 </button> 400 </div> 401 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 186px;"> 402 <div class="" id="legend-details-${rand}-15479-3" data-popover="${rand}-15479-3" aria-modal="true" tabindex="-1"> 403 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 404 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-15479-3">D2 â Severe Drought</h6> 405 <div class="font-body-2xs" id="legend-content-${rand}-15479-3"><p>Severe Drought (D2) is the second of four drought categories (D1âD4), according to the U.S. Drought Monitor. <a href="https://www.drought.gov/impacts#impacts-table">View typical impacts by state.</a></p></div> 406 </div> 407 </div> 408 </div> 409 <div role="row"> 410 <div role="cell"> 411 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-15479-4" data-legend="${rand}-15479-4" tabindex="0"> 412 <span class="legend-color" style="background-color:#e60000;"></span> 413 <span class="legend-label" id="legend-label-${rand}-15479-4">D3</span> 414 </button> 415 </div> 416 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 264px;"> 417 <div class="" id="legend-details-${rand}-15479-4" data-popover="${rand}-15479-4" aria-modal="true" tabindex="-1"> 418 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 419 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-15479-4">D3 â Extreme Drought</h6> 420 <div class="font-body-2xs" id="legend-content-${rand}-15479-4"><p>
420Extreme Drought (D3) is the third of four drought categories (D1âD4), according to the U.S. Drought Monitor. <a href="https://www.drought.gov/impacts#impacts-table">View typical impacts by state.</a></p></div> 421 </div> 422 </div> 423 </div> 424 <div role="row"> 425 <div role="cell"> 426 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-15479-5" data-legend="${rand}-15479-5" tabindex="0"> 427 <span class="legend-color" style="background-color:#730000;"></span> 428 <span class="legend-label" id="legend-label-${rand}-15479-5">D4</span> 429 </button> 430 </div> 431 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 342px;"> 432 <div class="" id="legend-details-${rand}-15479-5" data-popover="${rand}-15479-5" aria-modal="true" tabindex="-1"> 433 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 434 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-15479-5">D4 â Exceptional Drought</h6> 435 <div class="font-body-2xs" id="legend-content-${rand}-15479-5"><p>
435Exceptional Drought (D4) is the most intense drought category, according to the U.S. Drought Monitor. <a href="https://www.drought.gov/impacts#impacts-table">View typical impacts by state.</a></p></div> 436 </div> 437 </div> 438 </div> 439 </div> 440 <span class="c--legend-status" role="status"></span> 441 </div> 442 </div> 443 </div>`; 444 } 445 446 function _makeSNODASSWELegend() { 447 const rand = Math.floor(Math.random() * 30000); 448 return `<div class="field field--name-field-paragraph-references field--type-entity-reference-revisions field--label-hidden c--snodas-swe-helper"> 449 <div><div class="paragraph paragraph--type--legend-ramp paragraph--view-mode--default position-relative"> 450 <div class="legend-label position-relative grid-row"> 451 <h5 class="h4 margin-top-0 margin-bottom-1 grid-col">SWE Percent of 2004â2024 Average</h5> 452 </div> 453 <div class="legend-ramp c--legend c--legend-horizontal c--legend-offset" role="table" aria-label="Map legend - SWE Percent of 2004â2024 Average"> 454 <div role="row"> 455 <div role="cell"> 456 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-31340-1" data-legend="31340-1" tabindex="0"> 457 <span class="legend-color" style="background-color:#ffffff;"></span> 458 <span class="legend-label" id="legend-label-${rand}-31340-1">0%</span> 459 </button> 460 </div> 461 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 11.65%;"> 462 <div class="" id="legend-details-${rand}-31340-1" data-popover="31340-1" aria-modal="true" tabindex="-1"> 463 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 464 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-31340-1">Trace or No Snow</h6> 465 <div class="font-body-2xs" id="legend-content-${rand}-31340-1"><p>Current snow water equivalent (SWE) is less than 0.01% of the average SWE value for this two-day period, compared to historical conditions from 2004â2024.</p></div> 466 </div> 467 </div> 468 </div> 469 <div role="row"> 470 <div role="cell"> 471 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-31340-2" data-legend="31340-2" tabindex="0"> 472 <span class="legend-color" style="background-color:#543005;"></span> 473 <span class="legend-label" id="legend-label-${rand}-31340-2">0.01%</span> 474 </button> 475 </div> 476 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 25.96%;"> 477 <div class="" id="legend-details-${rand}-31340-2" data-popover="31340-2" aria-modal="true" tabindex="-1"> 478 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 479 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-31340-2">0.01%â5% of Average SWE</h6> 480 <div class="font-body-2xs" id="legend-content-${rand}-31340-2"><p>Current snow water equivalent (SWE) is between 0.01%â5% of the average SWE value for this two-day period, compared to historical conditions from 2004â2024.</p></div> 481 </div> 482 </div> 483 </div> 484 <div role="row"> 485 <div role="cell"> 486 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-31340-3" data-legend="31340-3" tabindex="0"> 487 <span class="legend-color" style="background-color:#8c510a;"></span> 488 <span class="legend-label" id="legend-label-${rand}-31340-3">5%</span> 489 </button> 490 </div> 491 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 40.24%;"> 492 <div class="" id="legend-details-${rand}-31340-3" data-popover="31340-3" aria-modal="true" tabindex="-1"> 493 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 494 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-31340-3">5%â25% of Average SWE</h6> 495 <div class="font-body-2xs" id="legend-content-${rand}-31340-3"><p>Current snow water equivalent (SWE) is between 5%â25% of the average SWE value for this two-day period, compared to historical conditions from 2004â2024.</p></div> 496 </div> 497 </div> 498 </div> 499 <div role="row"> 500 <div role="cell"> 501 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-31340-4" data-legend="31340-4" tabindex="0">
502 <span class="legend-color" style="background-color:#bf812d;"></span> 503 <span class="legend-label" id="legend-label-${rand}-31340-4">25%</span> 504 </button> 505 </div> 506 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 54.52%;"> 507 <div class="" id="legend-details-${rand}-31340-4" data-popover="31340-4" aria-modal="true" tabindex="-1"> 508 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 509 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-31340-4">25%â50% of Average SWE</h6> 510 <div class="font-body-2xs" id="legend-content-${rand}-31340-4"><p>Current snow water equivalent (SWE) is between 25%â50% of the average SWE value for this two-day period, compared to historical conditions from 2004â2024.</p></div> 511 </div> 512 </div> 513 </div> 514 <div role="row"> 515 <div role="cell"> 516 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-31340-5" data-legend="31340-5" tabindex="0"> 517 <span class="legend-color" style=" background-color:#dfc27d; "></span> 518 <span class="legend-label" id="legend-label-${rand}-31340-5">50%</span> 519 </button> 520 </div> 521 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 68.81%;"> 522 <div class="" id="legend-details-${rand}-31340-5" data-popover="31340-5" aria-modal="true" tabindex="-1"> 523 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 524 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-31340-5">50%â70% of Average SWE</h6> 525 <div class="font-body-2xs" id="legend-content-${rand}-31340-5"><p>Current snow water equivalent (SWE) is between 50%â70% of the average SWE value for this two-day period, compared to historical conditions from 2004â2024.</p></div> 526 </div> 527 </div> 528 </div> 529 <div role="row"> 530 <div role="cell"> 531 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-31340-6" data-legend="31340-6" tabindex="0"> 532 <span class="legend-color" style="background-color:#f6e8c3;"></span> 533 <span class="legend-label" id="legend-label-${rand}-31340-6">70%</span> 534 </button> 535 </div> 536 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 83.09%;"> 537 <div class="" id="legend-details-${rand}-31340-6" data-popover="31340-6" aria-modal="true" tabindex="-1"> 538 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 539 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-31340-6">70%â90% of Average SWE</h6> 540 <div class="font-body-2xs" id="legend-content-${rand}-31340-6"><p>Current snow water equivalent (SWE) is between 70%â90% of the average SWE value for this two-day period, compared to historical conditions from 2004â2024.</p></div> 541 </div> 542 </div> 543 </div> 544 <div role="row"> 545 <div role="cell"> 546 <div class="c--legend-offset-cell legend-item"> 547 <div class="legend-label">90%</div> 548 </div> 549 </div> 550 </div> 551 </div> 552 <span class="c--legend-status" role="status"></span> 553 </div> 554</div> 555 <div> <div class="paragraph paragraph--type--legend-ramp paragraph--view-mode--default position-relative"> 556 <div class="legend-ramp c--legend c--legend-horizontal c--legend-offset" role="table" aria-label="Map legend" style="--pop-top: 54px;"> 557 <div role="row"> 558 <div role="cell"> 559 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-31342-1" data-legend="31342-1" tabindex="0">
560 <span class="legend-color" style=" background-color:#8a8a8a; "> 561 </span> 562 <span class="legend-label" id="legend-label-${rand}-31342-1">90%</span> 563 </button> 564 </div> 565 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 11.65%;"> 566 <div class="" id="legend-details-${rand}-31342-1" data-popover="31342-1" aria-modal="true" tabindex="-1"> 567 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 568 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-31342-1">90%â110% of Average SWE</h6> 569 <div class="font-body-2xs" id="legend-content-${rand}-31342-1"><p>Current snow water equivalent (SWE) is between 90%â110% of the average SWE value for this two-day period, compared to historical conditions from 2004â2024.</p></div> 570 </div> 571 </div> 572 </div> 573 <div role="row"> 574 <div role="cell"> 575 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-31342-2" data-legend="31342-2" tabindex="0"> 576 <span class="legend-color" style=" background-color:#c7eae5; "></span> 577 <span class="legend-label" id="legend-label-${rand}-31342-2">110%</span> 578 </button> 579 </div> 580 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 25.96%;"> 581 <div class="" id="legend-details-${rand}-31342-2" data-popover="31342-2" aria-modal="true" tabindex="-1"> 582 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 583 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-31342-2">110%â130% of Average SWE</h6> 584 <div class="font-body-2xs" id="legend-content-${rand}-31342-2"><p>Current snow water equivalent (SWE) is between 110%â130% of the average SWE value for this two-day period, compared to historical conditions from 2004â2024.</p></div> 585 </div> 586 </div> 587 </div> 588 <div role="row"> 589 <div role="cell"> 590 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-31342-3" data-legend="31342-3" tabindex="0"> 591 <span class="legend-color" style=" background-color:#80cdc1; "></span> 592 <span class="legend-label" id="legend-label-${rand}-31342-3">130%</span> 593 </button> 594 </div> 595 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 40.24%;"> 596 <div class="" id="legend-details-${rand}-31342-3" data-popover="31342-3" aria-modal="true" tabindex="-1"> 597 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 598 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-31342-3">130%â150% of Average SWE</h6> 599 <div class="font-body-2xs" id="legend-content-${rand}-31342-3"><p>Current snow water equivalent (SWE) is between 130%â150% of the average SWE value for this two-day period, compared to historical conditions from 2004â2024.</p></div> 600 </div> 601 </div> 602 </div> 603 <div role="row"> 604 <div role="cell"> 605 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-31342-4" data-legend="31342-4" tabindex="0"> 606 <span class="legend-color" style=" background-color:#35978f; "> 607 </span> 608 <span class="legend-label" id="legend-label-${rand}-31342-4">150%</span> 609 </button> 610 </div> 611 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 54.52%;"> 612 <div class="" id="legend-details-${rand}-31342-4" data-popover="31342-4" aria-modal="true" tabindex="-1"> 613 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 614 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-31342-4">150%â200% of Average SWE</h6> 615 <div class="font-body-2xs" id="legend-content-${rand}-31342-4"><p>Current snow water equivalent (SWE) is between 150%â200% of the average SWE value for this two-day period, compared to historical conditions from 2004â2024.</p></div> 616 </div> 617 </div> 618 </div> 619 <div role="row"> 620 <div role="cell"> 621 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-31342-5" data-legend="31342-5" tabindex="0">
622 <span class="legend-color" style=" background-color:#01665e; "></span> 623 <span class="legend-label" id="legend-label-${rand}-31342-5">200%</span> 624 </button> 625 </div> 626 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 68.81%;"> 627 <div class="" id="legend-details-${rand}-31342-5" data-popover="31342-5" aria-modal="true" tabindex="-1"> 628 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 629 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-31342-5">200%â400% of Average SWE</h6> 630 <div class="font-body-2xs" id="legend-content-${rand}-31342-5"><p>Current snow water equivalent (SWE) is between 200%â400% of the average SWE value for this two-day period, compared to historical conditions from 2004â2024.</p></div> 631 </div> 632 </div> 633 </div> 634 <div role="row"> 635 <div role="cell"> 636 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-31342-6" data-legend="31342-6" tabindex="0"> 637 <span class="legend-color" style=" background-color:#003c30; "></span> 638 <span class="legend-label" id="legend-label-${rand}-31342-6">400%</span> 639 </button> 640 </div> 641 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 83.09%;"> 642 <div class="" id="legend-details-${rand}-31342-6" data-popover="31342-6" aria-modal="true" tabindex="-1"> 643 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 644 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-31342-6">400%â800% of Average SWE</h6> 645 <div class="font-body-2xs" id="legend-content-${rand}-31342-6"><p>Current snow water equivalent (SWE) is between 400%â800% of the average SWE value for this two-day period, compared to historical conditions from 2004â2024.</p></div> 646 </div> 647 </div> 648 </div> 649 <div role="row"> 650 <div role="cell"> 651 <div class="c--legend-offset-cell legend-item"> 652 <div class="legend-label">800%</div> 653 </div> 654 </div> 655 </div> 656 </div> 657 <span class="c--legend-status" role="status"></span> 658 </div> 659</div> 660 </div>`; 661 } 662 663 function _makeSNODASSnowDepthLegend() { 664 const rand = Math.floor(Math.random() * 30000); 665 return `<div class="field field--name-field-paragraph-references field--type-entity-reference-revisions field--label-hidden c--snodas-snow-depth-helper"> 666 <div><div class="paragraph paragraph--type--legend-ramp paragraph--view-mode--default position-relative"> 667 <div class="legend-label position-relative grid-row"> 668 <h5 class="h4 margin-top-0 margin-bottom-1 grid-col">Snow Depth Percent of 2004â2024 Average</h5> 669 </div> 670 <div class="legend-ramp c--legend c--legend-horizontal c--legend-offset" role="table" aria-label="Map legend - Snow Depth Percent of 2004â2024 Average"> 671 <div role="row"> 672 <div role="cell"> 673 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-31340-1" data-legend="31340-1" tabindex="0"> 674 <span class="legend-color" style="background-color:#ffffff;"></span> 675 <span class="legend-label" id="legend-label-${rand}-31340-1">0%</span> 676 </button> 677 </div> 678 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 11.65%;"> 679 <div class="" id="legend-details-${rand}-31340-1" data-popover="31340-1" aria-modal="true" tabindex="-1"> 680 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 681 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-31340-1">Trace or No Snow</h6> 682 <div class="font-body-2xs" id="legend-content-${rand}-31340-1"><p>Current snow depth is less than 0.01% of the snow depth value for this two-day period, compared to historical conditions from 2004â2024.</p></div> 683 </div> 684 </div> 685 </div> 686 <div role="row"> 687 <div role="cell"> 688 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-31340-2" data-legend="31340-2" tabindex="0">
689 <span class="legend-color" style="background-color:#543005;"></span> 690 <span class="legend-label" id="legend-label-${rand}-31340-2">0.01%</span> 691 </button> 692 </div> 693 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 25.96%;"> 694 <div class="" id="legend-details-${rand}-31340-2" data-popover="31340-2" aria-modal="true" tabindex="-1"> 695 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 696 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-31340-2">0.01%â5% of Snow Depth</h6> 697 <div class="font-body-2xs" id="legend-content-${rand}-31340-2"><p>Current snow depth is between 0.01%â5% of the snow depth value for this two-day period, compared to historical conditions from 2004â2024.</p></div> 698 </div> 699 </div> 700 </div> 701 <div role="row"> 702 <div role="cell"> 703 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-31340-3" data-legend="31340-3" tabindex="0"> 704 <span class="legend-color" style="background-color:#8c510a;"></span> 705 <span class="legend-label" id="legend-label-${rand}-31340-3">5%</span> 706 </button> 707 </div> 708 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 40.24%;"> 709 <div class="" id="legend-details-${rand}-31340-3" data-popover="31340-3" aria-modal="true" tabindex="-1"> 710 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 711 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-31340-3">5%â25% of Snow Depth</h6> 712 <div class="font-body-2xs" id="legend-content-${rand}-31340-3"><p>Current snow depth is between 5%â25% of the snow depth value for this two-day period, compared to historical conditions from 2004â2024.</p></div> 713 </div> 714 </div> 715 </div> 716 <div role="row"> 717 <div role="cell"> 718 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-31340-4" data-legend="31340-4" tabindex="0"> 719 <span class="legend-color" style="background-color:#bf812d;"></span> 720 <span class="legend-label" id="legend-label-${rand}-31340-4">25%</span> 721 </button> 722 </div> 723 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 54.52%;"> 724 <div class="" id="legend-details-${rand}-31340-4" data-popover="31340-4" aria-modal="true" tabindex="-1"> 725 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 726 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-31340-4">25%â50% of Snow Depth</h6> 727 <div class="font-body-2xs" id="legend-content-${rand}-31340-4"><p>Current snow depth is between 25%â50% of the snow depth value for this two-day period, compared to historical conditions from 2004â2024.</p></div> 728 </div> 729 </div> 730 </div> 731 <div role="row"> 732 <div role="cell"> 733 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-31340-5" data-legend="31340-5" tabindex="0"> 734 <span class="legend-color" style=" background-color:#dfc27d; "></span> 735 <span class="legend-label" id="legend-label-${rand}-31340-5">50%</span> 736 </button> 737 </div> 738 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 68.81%;"> 739 <div class="" id="legend-details-${rand}-31340-5" data-popover="31340-5" aria-modal="true" tabindex="-1"> 740 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 741 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-31340-5">50%â70% of Snow Depth</h6> 742 <div class="font-body-2xs" id="legend-content-${rand}-31340-5"><p>Current snow depth is between 50%â70% of the snow depth value for this two-day period, compared to historical conditions from 2004â2024.</p></div> 743 </div> 744 </div> 745 </div> 746 <div role="row"> 747 <div role="cell"> 748 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-31340-6" data-legend="31340-6" tabindex="0">
749 <span class="legend-color" style="background-color:#f6e8c3;"></span> 750 <span class="legend-label" id="legend-label-${rand}-31340-6">70%</span> 751 </button> 752 </div> 753 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 83.09%;"> 754 <div class="" id="legend-details-${rand}-31340-6" data-popover="31340-6" aria-modal="true" tabindex="-1"> 755 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 756 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-31340-6">70%â90% of Snow Depth</h6> 757 <div class="font-body-2xs" id="legend-content-${rand}-31340-6"><p>Current snow depth is between 70%â90% of the snow depth value for this two-day period, compared to historical conditions from 2004â2024.</p></div> 758 </div> 759 </div> 760 </div> 761 <div role="row"> 762 <div role="cell"> 763 <div class="c--legend-offset-cell legend-item"> 764 <div class="legend-label">90%</div> 765 </div> 766 </div> 767 </div> 768 </div> 769 <span class="c--legend-status" role="status"></span> 770 </div> 771</div> 772 <div> <div class="paragraph paragraph--type--legend-ramp paragraph--view-mode--default position-relative"> 773 <div class="legend-ramp c--legend c--legend-horizontal c--legend-offset" role="table" aria-label="Map legend" style="--pop-top: 54px;"> 774 <div role="row"> 775 <div role="cell"> 776 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-31342-1" data-legend="31342-1" tabindex="0"> 777 <span class="legend-color" style=" background-color:#8a8a8a; "> 778 </span> 779 <span class="legend-label" id="legend-label-${rand}-31342-1">90%</span> 780 </button> 781 </div> 782 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 11.65%;"> 783 <div class="" id="legend-details-${rand}-31342-1" data-popover="31342-1" aria-modal="true" tabindex="-1"> 784 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 785 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-31342-1">90%â110% of Snow Depth</h6> 786 <div class="font-body-2xs" id="legend-content-${rand}-31342-1"><p>Current snow depth is between 90%â110% of the snow depth value for this two-day period, compared to historical conditions from 2004â2024.</p></div> 787 </div> 788 </div> 789 </div> 790 <div role="row"> 791 <div role="cell"> 792 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-31342-2" data-legend="31342-2" tabindex="0"> 793 <span class="legend-color" style=" background-color:#c7eae5; "></span> 794 <span class="legend-label" id="legend-label-${rand}-31342-2">110%</span> 795 </button> 796 </div> 797 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 25.96%;"> 798 <div class="" id="legend-details-${rand}-31342-2" data-popover="31342-2" aria-modal="true" tabindex="-1"> 799 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 800 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-31342-2">110%â130% of Snow Depth</h6> 801 <div class="font-body-2xs" id="legend-content-${rand}-31342-2"><p>Current snow depth is between 110%â130% of the snow depth value for this two-day period, compared to historical conditions from 2004â2024.</p></div> 802 </div> 803 </div> 804 </div> 805 <div role="row"> 806 <div role="cell"> 807 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-31342-3" data-legend="31342-3" tabindex="0">
808 <span class="legend-color" style=" background-color:#80cdc1; "></span> 809 <span class="legend-label" id="legend-label-${rand}-31342-3">130%</span> 810 </button> 811 </div> 812 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 40.24%;"> 813 <div class="" id="legend-details-${rand}-31342-3" data-popover="31342-3" aria-modal="true" tabindex="-1"> 814 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 815 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-31342-3">130%â150% of Snow Depth</h6> 816 <div class="font-body-2xs" id="legend-content-${rand}-31342-3"><p>Current snow depth is between 130%â150% of the snow depth value for this two-day period, compared to historical conditions from 2004â2024.</p></div> 817 </div> 818 </div> 819 </div> 820 <div role="row"> 821 <div role="cell"> 822 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-31342-4" data-legend="31342-4" tabindex="0"> 823 <span class="legend-color" style=" background-color:#35978f; "> 824 </span> 825 <span class="legend-label" id="legend-label-${rand}-31342-4">150%</span> 826 </button> 827 </div> 828 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 54.52%;"> 829 <div class="" id="legend-details-${rand}-31342-4" data-popover="31342-4" aria-modal="true" tabindex="-1"> 830 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 831 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-31342-4">150%â200% of Snow Depth</h6> 832 <div class="font-body-2xs" id="legend-content-${rand}-31342-4"><p>Current snow depth is between 150%â200% of the snow depth value for this two-day period, compared to historical conditions from 2004â2024.</p></div> 833 </div> 834 </div> 835 </div> 836 <div role="row"> 837 <div role="cell"> 838 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-31342-5" data-legend="31342-5" tabindex="0"> 839 <span class="legend-color" style=" background-color:#01665e; "></span> 840 <span class="legend-label" id="legend-label-${rand}-31342-5">200%</span> 841 </button> 842 </div> 843 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 68.81%;"> 844 <div class="" id="legend-details-${rand}-31342-5" data-popover="31342-5" aria-modal="true" tabindex="-1"> 845 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 846 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-31342-5">200%â400% of Snow Depth</h6> 847 <div class="font-body-2xs" id="legend-content-${rand}-31342-5"><p>Current snow depth is between 200%â400% of the snow depth value for this two-day period, compared to historical conditions from 2004â2024.</p></div> 848 </div> 849 </div> 850 </div> 851 <div role="row"> 852 <div role="cell"> 853 <button class="c--legend-cell legend-item" aria-labelledby="legend-title-${rand}-31342-6" data-legend="31342-6" tabindex="0"> 854 <span class="legend-color" style=" background-color:#003c30; "></span> 855 <span class="legend-label" id="legend-label-${rand}-31342-6">400%</span> 856 </button> 857 </div> 858 <div class="c--legend-pop display-none" role="dialog" aria-label="legend item details" style="--pop-left: 83.09%;"> 859 <div class="" id="legend-details-${rand}-31342-6" data-popover="31342-6" aria-modal="true" tabindex="-1"> 860 <button class="dialog-close font-body-3xs text-uppercase">Close</button> 861 <h6 class="h4 margin-top-3 margin-bottom-1" id="legend-title-${rand}-31342-6">400%â800% of Snow Depth</h6> 862 <div class="font-body-2xs" id="legend-content-${rand}-31342-6"><p>Current snow depth is between 400%â800% of the snow depth value for this two-day period, compared to historical conditions from 2004â2024.</p></div> 863 </div> 864 </div> 865 </div> 866 <div role="row"> 867 <div role="cell"> 868 <div class="c--legend-offset-cell legend-item"> 869 <div class="legend-label">800%</div> 870 </div> 871 </div> 872 </div> 873 </div> 874 <span class="c--legend-status" role="status"></span> 875 </div> 876</div> 877 </div>`; 878 } 879 880 /** 881 * Utility to create a Tribal legend with hatchmarks. 882 * 883 * @return {string} - Premade Tribal legend. 884 * @private 885 */ 886 function _buildTribalLegendBase() { 887 const legend = 888 '<div class="paragraph paragraph--type--legend-ramp paragraph--view-mode--default tribal-template" aria-hidden="true">' + 889 ' <div class="legend-label position-relative"><h5 class="h4 margin-top-0 margin-bottom-1">Tribal Nations</h5></div>' + 890 ' <div class="legend-ramp c--legend c--legend-vertical" role="table">' + 891 ' <div role="row">' + 892 ' <div role="cell">' + 893 ' <button class="c--legend-cell legend-item" aria-labelledby="" data-legend="" tabindex="0">' +
894 ' <span class="legend-color" style="background-color: #000;"> </span>' + 895 ' <span class="legend-label display-inline-block text-middle">Tribal Nation Boundaries</span>' + 896 ' </button>' + 897 " </div>" + 898 " </div>" + 899 " </div>" + 900 "</div>"; 901 902 return legend; 903 } 904 905 function getUpdateDates() { 906 handleRemoteFileContents( 907 "https://storage.googleapis.com/noaa-nidis-drought-gov-data/current-conditions/json/v1/us/usdm/USDM-current.json?t=" + (new Date()).getTime(), 908 insertUSDMDate 909 ); 910 handleRemoteFileContents( 911 "https://storage.googleapis.com/noaa-nidis-drought-gov-data/current-conditions/tile/v1/ce-wrcc-snodas-swe-prcntanom/info.json?t=" + (new Date()).getTime(), 912 insertSNODASSWEDate 913 ); 914 handleRemoteFileContents( 915 "https://storage.googleapis.com/noaa-nidis-drought-gov-data/current-conditions/tile/v1/ce-wrcc-snodas-depth-prcntanom/info.json?t=" + (new Date()).getTime(), 916 insertSNODASSnowDepthDate 917 ); 918 } 919 920 function handleRemoteFileContents(url, callback) { 921 fetch(url) 922 .then(function (res) { 923 return res.json(); 924 }) 925 .then(callback); 926 } 927 928 function insertUSDMDate(res) { 929 const elem = document.querySelector("#c--umrb-underlay [value='below']"); 930 if (!elem) { 931 return; 932 } 933 elem.textContent = elem.textContent + getRemoteDate(res); 934 } 935 936 function insertSNODASSWEDate(res) { 937 const elem = document.querySelector("#c--umrb-underlay [value='snodasswe']"); 938 if (!elem) { 939 return; 940 } 941 elem.textContent = elem.textContent + getRemoteDate(res); 942 } 943 944 function insertSNODASSnowDepthDate(res) { 945 const elem = document.querySelector("#c--umrb-underlay [value='snodassnowdepth']"); 946 if (!elem) { 947 return; 948 } 949 elem.textContent = elem.textContent + getRemoteDate(res); 950 } 951 952 function getRemoteDate(res) { 953 if (!res.date || typeof res.date !== "string") { 954 return ""; 955 } 956 res.date = res.date.replaceAll("-", "").replaceAll("/", "").replaceAll(" ", ""); 957 return ` - ${res.date.substr(4, 2)}/${res.date.substr(6, 2)}/${res.date.substr(0, 4)}`; 958 } 959})(window.jQuery, window.olExtents, window.olFixedLayers, window.olMaps, window.olStyles);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.