Initial commit

2024-11-26 20:41:37 -06:00 · 2024-11-26 20:41:37 -06:00 · 73ea6a9413
commit 73ea6a9413
26 changed files with 58556 additions and 0 deletions
--- a/map.html
+++ b/map.html
@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lawrence Deer Club Maps</title>
+    <link rel="stylesheet" href="/leaflet/leaflet.css" />
+    <script src="/leaflet/leaflet.js"></script>
+    <style>
+        html, body {
+            margin: 0;
+            padding: 0;
+        }
+        #map {
+            height: 100vh;
+            width: 100vw;
+        }
+
+        div.popup dt {
+            font-weight: bold;
+        }
+
+    </style>
+</head>
+<body>
+    <div id="map"></div>
+    <script>
+        (async function() {
+            const map = L.map('map').setView([94.505, -0.09], 13);
+            // L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            //     maxZoom: 19,
+            //     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+            // }).addTo(map);
+
+            // Make these requests in parallel
+            const track_req_promise = fetch('data/track.geojson');
+            const plats_req_promise = fetch('data/plats.geojson');
+            const data_req_promise = fetch('data/data.json');
+            const track_req = await track_req_promise;
+            const plats_req = await plats_req_promise;
+            const data_req = await data_req_promise;
+            const track = await track_req.json();
+            const plats = await plats_req.json();
+            const data = await data_req.json();
+
+            L.geoJSON(track, {
+            }).bindPopup(function (layer) {
+                return layer.feature.properties.description;
+            }).addTo(map);
+
+            L.geoJSON(plats, {
+            }).bindPopup(function (layer) {
+                return layer.feature.properties.TAO_NAME;
+            }).addTo(map);
+
+            for (let stand of data.stands) {
+                if (stand.location) {
+                    const marker = L.marker(stand.location).addTo(map);
+                    const popupContentWrapper = document.createElement('div');
+                    popupContentWrapper.classList.add('popup');
+                    let attributesString = '<dl>';
+                    for (let [attribute, value] of Object.entries(stand.attributes)) {
+                        attributesString += `<dt>${attribute}</dt><dd>${value}</dd>`;
+                    }
+                    attributesString += '</dl>';
+                    popupContentWrapper.innerHTML = `
+                        <h2>${stand.name}</h2>
+                        <img style="width: min(80vw, 300px);" src="images/${stand.image}">
+                        ${attributesString}
+                    `;
+                    marker.bindPopup(popupContentWrapper);
+                }
+            }
+
+            map.fitBounds([
+                [47.4865,-93.4068],
+                [47.4992,-93.3746],
+            ]);
+        })();
+    </script>
+</body>
+</html>