add wwa map

weather-gov · Nov 7, 2024 · 66860c3 · 66860c3
1 parent 36cf5aa
commit 66860c3
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -12,6 +12,9 @@
       <li>
         <a href="point-lookup/index.html">Point lookup</a>
       </li>
+      <li>
+        <a href="wa-wa/index.html">WWA map</a>
+      </li>
     </ul>
   </body>
 </html>
diff --git a/wa-wa/index.html b/wa-wa/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <title>Wa Wa</title>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+      type="text/css"
+    />
+    <style type="text/css">
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      #switcher {
+        position: fixed;
+        top: 0;
+        right: 0;
+        padding: 8px;
+        background: white;
+        border-radius: 0 0 0 10px;
+        z-index: 1000;
+      }
+
+      #map {
+        height: 100vh;
+        width: 100vw;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="switcher">
+      <button data-product="wwa">WWA</button> |
+      <button data-product="radar">Radar</button>
+    </div>
+    <div id="map"></div>
+    <script type="module" src="main.js"></script>
+  </body>
+</html>
diff --git a/wa-wa/main.js b/wa-wa/main.js
@@ -0,0 +1,74 @@
+import * as leaflet from "https://unpkg.com/leaflet@1.9.4/dist/leaflet-src.esm.js";
+
+var map = leaflet.map("map").setView([39.8282, -98.5696], 5);
+
+leaflet
+  .tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
+    maxZoom: 19,
+    attribution:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+  })
+  .addTo(map);
+
+const layers = new Map([
+  [
+    "wwa",
+    leaflet.tileLayer.wms(
+      "https://mapservices.weather.noaa.gov/eventdriven/services/WWA/watch_warn_adv/MapServer/WMSServer",
+      {
+        layers: "0,1",
+        format: "image/png",
+        transparent: true,
+      },
+    ),
+  ],
+  [
+    "radar",
+    leaflet.tileLayer.wms(
+      "https://opengeo.ncep.noaa.gov/geoserver/conus/conus_bref_qcd/ows",
+      {
+        layers: "conus_bref_qcd",
+        format: "image/png",
+        transparent: true,
+      },
+    ),
+  ],
+]);
+
+let activeLayer = layers.get("wwa");
+activeLayer.addTo(map);
+
+map.on("click", (e) => {
+  const { latlng } = e;
+
+  const lat = Math.round(latlng.lat * 10_000) / 10_000;
+  const lng = Math.round(latlng.lng * 10_000) / 10_000;
+
+  leaflet
+    .popup(latlng, {
+      content: `<a href="https://beta.weather.gov/point/${lat}/${lng}">Open on beta</a><br><a href="https://weathergov-staging.app.cloud.gov/point/${lat}/${lng}">Open on staging</a>`,
+    })
+    .openOn(map);
+});
+
+Array.from(document.querySelectorAll("button[data-product]")).forEach(
+  (button) => {
+    button.addEventListener(
+      "click",
+      ({
+        target: {
+          dataset: { product },
+        },
+      }) => {
+        const layer = layers.get(product);
+        if (layer) {
+          if (activeLayer) {
+            activeLayer.remove(map);
+          }
+          activeLayer = layer;
+          layer.addTo(map);
+        }
+      },
+    );
+  },
+);