First night hacking

2025-02-10 19:46:31 -06:00 · 2025-02-10 19:46:31 -06:00 · 754a0c425c
commit 754a0c425c
parent 73f023d269
8 changed files with 209 additions and 0 deletions
--- a/test.html
+++ b/test.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>Leaflet OSM Ways</title>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+  <style>
+    #map {
+      height: 100vh;
+      width: 100%;
+    }
+  </style>
+</head>
+<body>
+
+<div id="map"></div>
+
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+<script>
+  // Initialize the map
+  const map = L.map('map').setView([35.1927479, -111.6538784], 15);
+
+  // Set up the OpenStreetMap tile layer
+  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+  }).addTo(map);
+
+  // Function to generate a random color
+  function getRandomColor() {
+    const letters = '0123456789ABCDEF';
+    let color = '#';
+    for (let i = 0; i < 6; i++) {
+      color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+  }
+
+  // Fetch OSM data
+  fetch('data/sidewalks.min.json')
+    .then(response => response.json())
+    .then(osmData => {
+      
+      // Function to create the polyline and popup for each OSM way
+      osmData.forEach(way => {
+        const latlngs = way.nodes.map(node => [node.lat, node.lon]);
+        const color = getRandomColor(); // Generate a random color
+
+        const polyline = L.polyline(latlngs, {
+          color: color,
+          weight: 5,
+          opacity: 0.7
+        }).addTo(map);
+
+        polyline.on('mouseover', function(e) {
+            e.target.setStyle({
+                weight: 10,
+                opacity: 1,
+            });
+        });
+        polyline.on('mouseout', function(e){
+            e.target.setStyle({
+                weight: 5,
+                opacity: 0.7,
+            });
+        });
+
+        // Create a popup with the tags when clicking on the polyline
+        const tagsContent = Object.entries(way.tags).map(([key, value]) => {
+          return `<b>${key}:</b> ${value}`;
+        }).join('<br>');
+
+        polyline.bindPopup(tagsContent);
+      });
+    })
+    .catch(error => {
+      console.error('Error loading OSM data:', error);
+    });
+</script>
+
+</body>
+</html>