From 3f4c4adc11f11f30b633899bd28dafccc8289315 Mon Sep 17 00:00:00 2001
From: ssp6904 <shoffer@ttnrtsite.me>
Date: Sat, 17 Aug 2024 01:02:19 -0400
Subject: [PATCH] updated layout

---
 index.html | 38 +++++++++++++++++++++++++++-----------
 1 file changed, 27 insertions(+), 11 deletions(-)
diff --git a/index.html b/index.html
index ba675a4..aa4140f 100644
--- a/index.html
+++ b/index.html
@@ -8,20 +8,32 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
 <script src="//files.shaunhoffer.cc/states.js"></script>
 <script src="//files.shaunhoffer.cc/counties.js"></script>
+<meta content="#e8e8e8" name="theme-color"/>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
-<style>
-* {
-    margin: 0;
+<link href="https://cdn.jsdelivr.net/npm/halfmoon@2.0.1/css/halfmoon.min.css" rel="stylesheet">
+<script>
+// Set theme to the user's preferred color scheme
+function updateTheme() {
+    const colorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ?
+      "dark" :
+      "light";
+    document.querySelector("html").setAttribute("data-bs-theme", colorMode);
 }
-html, body {
-    height: 100%;
-}
-</style>
-</head>
-<body>
-<div id="app" style="height: 100%;">
 
+updateTheme()
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
+</script>
+</head>
+<body style="min-height: 100vh">
+<div class="container-fluid p-2">
+<div class="card">
+  <div class="card-header">Simple map with leaflet</div>
+  <div class="card-body p-0">
+    <div id="app" style="height: 600px;"></div>
+  </div>
+</div>
 </div>
 <script>
 var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -37,6 +49,10 @@ var arcgissatellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/s
     maxZoom: 19
 });
 
+var radaroverlay = L.tileLayer('https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/ridge::USCOMP-N0Q-0/{z}/{x}/{y}.png', {
+    maxZoom: 19
+});
+
 var google = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
     maxZoom: 19,
     subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
@@ -58,7 +74,7 @@ var defaultStyle = {
 var countiesL = L.geoJson(counties, {style: defaultStyle});
 var statesL = L.geoJson(statesData, {style: defaultStyle});
 var baseMaps = {"OpenStreetMap": osm,"Arcgis Satellite": arcgissatellite,"Topo": topo};
-var overlayMaps = {"Counties": countiesL,"States": statesL};
+var overlayMaps = {"Counties": countiesL,"States": statesL, "Radar overlay": radaroverlay};
 
 var layerControl = L.control.layers(baseMaps, overlayMaps, {collapsed: false});
 layerControl.addTo(map);
