First complete backend

.gitignore

@@ -1 +1,3 @@
 data/
+static/leaflet
+leaflet.zip

Makefile

@@ -13,5 +13,12 @@ data/sidewalks.unmin.json: data/raw.osm.pbf ./scripts/parse_sidewalks.py
 data/sidewalks.json: data scripts/fetch_sidewalk_data.sh
 	./scripts/fetch_sidewalk_data.sh
 
+static/leaflet: leaflet.zip
+	mkdir -p static/leaflet
+	unzip ./leaflet.zip -d static/leaflet
+
+leaflet.zip:
+	curl -Lo leaflet.zip https://leafletjs-cdn.s3.amazonaws.com/content/leaflet/v1.9.4/leaflet.zip
+
 data:
-	mkdir -p data
+	mkdir -p data leaflet.zip

go.mod

@@ -0,0 +1,3 @@
+module git.chandlerswift.com/chandlerswift/nau-sidewalks
+
+go 1.23.4

main.go

@@ -0,0 +1,112 @@
+package main
+
+import (
+	"embed"
+	"encoding/json"
+	"flag"
+	"fmt"
+	"io/fs"
+	"log"
+	"math/rand/v2"
+	"net/http"
+	"runtime/debug"
+	"strconv"
+	"time"
+
+	"git.chandlerswift.com/chandlerswift/nau-sidewalks/sidewalk"
+)
+
+//go:embed static
+var embeddedFiles embed.FS
+
+//go:embed data/sidewalks.json
+var sidewalk_data []byte
+
+var buildInfoJSON []byte
+
+const DEVEL = false // serve files from dev dir, not embedded, so I don't have to rebuild the app every time
+
+func main() {
+	port := flag.Int("port", 8000, "Port to listen on")
+	flag.Parse()
+
+	if DEVEL {
+		http.Handle("GET /", http.FileServer(http.Dir("./static")))
+	} else {
+		frontend, err := fs.Sub(embeddedFiles, "static")
+		if err != nil {
+			panic(err)
+		}
+		http.Handle("GET /", http.FileServer(http.FS(frontend)))
+	}
+
+	// Decode the JSON data
+	var sidewalks []sidewalk.Sidewalk
+	if err := json.Unmarshal(sidewalk_data, &sidewalks); err != nil {
+		log.Fatalf("Error decoding JSON: %v", err)
+	}
+
+	for i := range sidewalks {
+		sidewalks[i].Condition = sidewalk.Condition(rand.IntN(4))
+	}
+
+	initializeBuildInfoJSON()
+	http.HandleFunc("GET /api/version", func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Content-Type", "application/json")
+		w.Write(buildInfoJSON)
+	})
+
+	http.HandleFunc("GET /api/sidewalks", func(w http.ResponseWriter, r *http.Request) {
+		json.NewEncoder(w).Encode(sidewalks)
+	})
+
+	http.HandleFunc("POST /api/sidewalks/{id}", func(w http.ResponseWriter, r *http.Request) {
+		err := r.ParseForm()
+		if err != nil {
+			http.Error(w, "Could not parse form", http.StatusInternalServerError)
+		}
+		sidewalkID, err := strconv.Atoi(r.PathValue("id"))
+		if err != nil {
+			http.Error(w, "Invalid id", http.StatusBadRequest)
+			return
+		}
+		condition, err := strconv.Atoi(r.Form.Get("condition"))
+		if err != nil {
+			http.Error(w, "Invalid condition", http.StatusBadRequest)
+		}
+		sidewalks[sidewalkID].Condition = sidewalk.Condition(condition)
+		sidewalks[sidewalkID].LastUpdated = time.Now()
+		http.Redirect(w, r, "/", http.StatusSeeOther)
+	})
+
+	fmt.Printf("Serving on :%v\n", *port)
+	panic(http.ListenAndServe(fmt.Sprintf(":%v", *port), nil))
+}
+
+func initializeBuildInfoJSON() {
+	rawBuildInfo, _ := debug.ReadBuildInfo()
+	var revision, time string
+	var dirty bool
+	for _, buildSetting := range rawBuildInfo.Settings {
+		if buildSetting.Key == "vcs.revision" {
+			revision = buildSetting.Value
+		} else if buildSetting.Key == "vcs.time" {
+			time = buildSetting.Value
+		} else if buildSetting.Key == "vcs.modified" {
+			dirty = buildSetting.Value == "true"
+		}
+	}
+	buildInfo := map[string]interface{}{
+		"GitRev":       revision,
+		"GitDirty":     dirty,
+		"GitTime":      time,
+		"GoVersion":    rawBuildInfo.GoVersion,
+		"AllBuildInfo": rawBuildInfo.String(),
+	}
+
+	var err error
+	buildInfoJSON, err = json.Marshal(buildInfo)
+	if err != nil {
+		panic(err)
+	}
+}

scripts/fetch_osm_data.sh

@@ -1,41 +0,0 @@
-#!/usr/bin/env nix-shell
-#! nix-shell -i bash --pure
-#! nix-shell -p bash curl cacert jq
-
-if [ $# -eq 2 ]; then
-    OUTPUT=$1
-else
-    OUTPUT=data/raw.osm.pbf
-fi
-
-WAY_DATA=$(curl -s https://overpass-api.de/api/interpreter --data-urlencode 'data=[out:json];way["name"="Northern Arizona University"];out geom;')
-
-# Extract coordinates from the response
-COORDINATES=$(echo "$WAY_DATA" | jq '[.elements[] | select(.type == "way") | .geometry[] | [.lon, .lat]]')
-
-echo $COORDINATES
-
-# Ensure we have coordinates
-if [ -z "$COORDINATES" ]; then
-  echo "Error: Could not find coordinates for NAU"
-  exit 1
-fi
-
-# Construct the GeoJSON payload
-PAYLOAD=$(jq -n --argjson coords "$COORDINATES" '{
-  "Name": "none",
-  "RegionType": "geojson",
-  "RegionData": {
-    "type": "Polygon",
-    "coordinates": [$coords]
-  }
-}')
-
-# Send the request to the Slice API
-UUID=$(curl -X POST https://slice.openstreetmap.us/api/ -H "Content-Type: application/json" -d "$PAYLOAD")
-
-while ! [ $(curl https://slice.openstreetmap.us/api/$UUID | jq -r '.Complete') = 'true' ]; do
-    sleep 1
-done
-
-curl https://slice.openstreetmap.us/files/$UUID.osm.pbf -o $OUTPUT

scripts/fetch_sidewalk_data.sh

@@ -1,7 +1,16 @@
 #!/usr/bin/env nix-shell
 #! nix-shell -i bash --pure
-#! nix-shell -p bash curl cacert
+#! nix-shell -p bash curl cacert jq
 
 # TODO: process out extraneous data
 
-curl -s https://overpass-api.de/api/interpreter --data-urlencode 'data=[out:json];{{geocodeArea:Northern Arizona University}}->.searchArea;(way["highway"="footway"](area.searchArea);way["highway"="cycleway"](area.searchArea););out geom;' -o data/sidewalks.json
+# curl -s https://overpass-api.de/api/interpreter --data-urlencode 'data=[out:json];area[name="Northern Arizona University"]->.searchArea;(way["highway"="footway"](area.searchArea);way["highway"="cycleway"](area.searchArea););out geom;' -o data/sidewalks.json
+curl -s "https://overpass-api.de/api/interpreter" --data '
+    [out:json];
+    area[name="Northern Arizona University"]->.searchArea;
+    (
+        way["highway"="footway"](area.searchArea);
+        way["highway"="cycleway"](area.searchArea);
+    );
+    out geom;' \
+| jq '[ .elements[] | { OSMID: .id, Geometry: [ .geometry[] | [ .lat, .lon ] ], Tags: .tags } ]' > data/sidewalks.json

scripts/parse_sidewalks.py

@@ -1,52 +0,0 @@
-#!/usr/bin/env nix-shell
-#! nix-shell -i python
-#! nix-shell -p python3 python3Packages.pyosmium python3Packages.requests
-import osmium
-import json
-import sys
-
-class SidewalkHandler(osmium.SimpleHandler):
-    def __init__(self):
-        super(SidewalkHandler, self).__init__()
-        self.sidewalks = []
-
-    def way(self, w):
-        # Convert OSM tags to a normal dict for easier use
-        tags = dict(w.tags)
-        is_sidewalk = False
-
-        # Check for a dedicated footway sidewalk
-        if tags.get('highway') == 'footway':
-            is_sidewalk = True
-        # # Alternatively, check if the 'sidewalk' tag is present and not set to no/none
-        # elif 'sidewalk' in tags and tags['sidewalk'].lower() not in ['no', 'none']:
-        #     is_sidewalk = True
-
-        if is_sidewalk:
-            sidewalk = {
-                "id": w.id,
-                "nodes": [],
-                "tags": tags
-            }
-            # Gather node coordinates if available
-            for n in w.nodes:
-                # Ensure the node location is valid
-                if n.location.valid():
-                    sidewalk["nodes"].append({
-                        "lat": n.location.lat,
-                        "lon": n.location.lon
-                    })
-            self.sidewalks.append(sidewalk)
-
-if __name__ == "__main__":
-    if len(sys.argv) < 2:
-        sys.stderr.write("Usage: python script.py <path-to-osm-pbf-file>\n")
-        sys.exit(1)
-
-    pbf_file = sys.argv[1]
-    handler = SidewalkHandler()
-    # The locations=True flag makes sure node coordinates are available.
-    handler.apply_file(pbf_file, locations=True)
-
-    # Output the results as an indented JSON list
-    print(json.dumps(handler.sidewalks, indent=2))

shell.nix

@@ -4,5 +4,6 @@ in
 pkgs.mkShellNoCC {
   packages = with pkgs; [
     gnumake
+    go
   ];
 }

sidewalk/sidewalk.go

@@ -0,0 +1,23 @@
+package sidewalk
+
+import "time"
+
+type Condition int
+
+const (
+	Unknown Condition = iota
+	Clear
+	PartiallyCovered
+	Covered
+)
+
+type Location []float64
+
+type Sidewalk struct {
+	OSMID       int               // The sidewalk's identifier in OSM
+	Geometry    []Location        // List of lat/lon pairs
+	Tags        map[string]string // OSM tags on the sidewalk
+	Description string            // A human-readable description of the chunk of sidewalk
+	Condition   Condition
+	LastUpdated time.Time
+}

static/index.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>NAU Sidewalk Map</title>
+  <link rel="stylesheet" href="/leaflet/leaflet.css" />
+  <style>
+    body {
+        margin: 0;
+    }
+    #map {
+      height: 100vh;
+      width: 100%;
+      background-color: black;
+    }
+  </style>
+  <!-- TODO: self-host -->
+  <link rel="stylesheet" href="https://mfhsieh.github.io/leaflet-simple-locate/examples/demo.css" />
+</head>
+<body>
+
+<div id="map"></div>
+
+<script src="/leaflet/leaflet.js"></script>
+<!-- TODO: self-host -->
+<script src="https://mfhsieh.github.io/leaflet-simple-locate/dist/leaflet-simple-locate.min.js"></script>
+<script>
+  const map = L.map('map').fitBounds([[35.171563,-111.661606],[35.195695,-111.647701]]);
+
+  // Set up the OpenStreetMap tile layer
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    opacity: 0.6,
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+  }).addTo(map);
+
+  const CONDITIONS = [
+    {name: "Unknown", color: "gray"},
+    {name: "Clear", color: "green"},
+    {name: "PartiallyCovered", color: "yellow"},
+    {name: "Covered", color: "red"},
+  ];
+
+  fetch('api/sidewalks')
+    .then(response => response.json())
+    .then(osmData => {
+      
+      // Function to create the polyline and popup for each OSM way
+      for (let [i, way] of osmData.entries()) {
+        const polyline = L.polyline(way.Geometry, {
+          color: CONDITIONS[way.Condition].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 extraContent = {
+          Condition: CONDITIONS[way.Condition].name,
+          Description: way.Description,
+          LastUpdated: way.LastUpdated,
+        };
+        const tagsContent = Object.entries({...extraContent/*, ...way.Tags*/}).map(([key, value]) => {
+          return `<b>${key}:</b> ${value}`;
+        }).join('<br>');
+
+        let buttons = "";
+        for (let [val, condition] of CONDITIONS.slice(1).entries()) {
+          buttons += `
+          <form method="POST" action="/api/sidewalks/${i}">
+            <input type="hidden" name="condition" value="${val+1}">
+            <button type="submit">${condition.name}</button>
+          </form>
+          `;
+        }
+
+        polyline.bindPopup(tagsContent+"<br>"+buttons);
+
+        // // Listen for popup open to attach event listeners
+        // polyline.on('popupopen', function(e) {
+        //   document.querySelectorAll(".popup-btn").forEach(button => {
+        //     button.addEventListener("click", async function(event) {
+        //       const value = event.target.getAttribute("data-value");
+              
+        //       await fetch("/api/foo", {
+        //         method: "POST",
+        //         body: value
+        //       });
+        //     });
+        //   });
+        // });
+      }
+    })
+    .catch(error => {
+      console.error('Error loading OSM data:', error);
+    });
+
+    const control = new L.Control.SimpleLocate({
+      position: "topleft",
+      className: "button-locate",
+      afterClick: (result) => {
+          console.log("afterClick", result);
+          if (!result.geolocation) console.log("Geolocation Error");
+          if (!result.orientation) console.log("Orientation Error");
+      },
+  }).addTo(map);
+    
+</script>
+</body>
+</html>

static/leaflet/leaflet.css

@@ -0,0 +1,661 @@
+/* required styles */
+
+.leaflet-pane,
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-tile-container,
+.leaflet-pane > svg,
+.leaflet-pane > canvas,
+.leaflet-zoom-box,
+.leaflet-image-layer,
+.leaflet-layer {
+	position: absolute;
+	left: 0;
+	top: 0;
+	}
+.leaflet-container {
+	overflow: hidden;
+	}
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	        user-select: none;
+	  -webkit-user-drag: none;
+	}
+/* Prevents IE11 from highlighting tiles in blue */
+.leaflet-tile::selection {
+	background: transparent;
+}
+/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
+.leaflet-safari .leaflet-tile {
+	image-rendering: -webkit-optimize-contrast;
+	}
+/* hack that prevents hw layers "stretching" when loading new tiles */
+.leaflet-safari .leaflet-tile-container {
+	width: 1600px;
+	height: 1600px;
+	-webkit-transform-origin: 0 0;
+	}
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	display: block;
+	}
+/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
+/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
+.leaflet-container .leaflet-overlay-pane svg {
+	max-width: none !important;
+	max-height: none !important;
+	}
+.leaflet-container .leaflet-marker-pane img,
+.leaflet-container .leaflet-shadow-pane img,
+.leaflet-container .leaflet-tile-pane img,
+.leaflet-container img.leaflet-image-layer,
+.leaflet-container .leaflet-tile {
+	max-width: none !important;
+	max-height: none !important;
+	width: auto;
+	padding: 0;
+	}
+
+.leaflet-container img.leaflet-tile {
+	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
+	mix-blend-mode: plus-lighter;
+}
+
+.leaflet-container.leaflet-touch-zoom {
+	-ms-touch-action: pan-x pan-y;
+	touch-action: pan-x pan-y;
+	}
+.leaflet-container.leaflet-touch-drag {
+	-ms-touch-action: pinch-zoom;
+	/* Fallback for FF which doesn't support pinch-zoom */
+	touch-action: none;
+	touch-action: pinch-zoom;
+}
+.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.leaflet-container {
+	-webkit-tap-highlight-color: transparent;
+}
+.leaflet-container a {
+	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
+}
+.leaflet-tile {
+	filter: inherit;
+	visibility: hidden;
+	}
+.leaflet-tile-loaded {
+	visibility: inherit;
+	}
+.leaflet-zoom-box {
+	width: 0;
+	height: 0;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+	z-index: 800;
+	}
+/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
+.leaflet-overlay-pane svg {
+	-moz-user-select: none;
+	}
+
+.leaflet-pane         { z-index: 400; }
+
+.leaflet-tile-pane    { z-index: 200; }
+.leaflet-overlay-pane { z-index: 400; }
+.leaflet-shadow-pane  { z-index: 500; }
+.leaflet-marker-pane  { z-index: 600; }
+.leaflet-tooltip-pane   { z-index: 650; }
+.leaflet-popup-pane   { z-index: 700; }
+
+.leaflet-map-pane canvas { z-index: 100; }
+.leaflet-map-pane svg    { z-index: 200; }
+
+.leaflet-vml-shape {
+	width: 1px;
+	height: 1px;
+	}
+.lvml {
+	behavior: url(#default#VML);
+	display: inline-block;
+	position: absolute;
+	}
+
+
+/* control positioning */
+
+.leaflet-control {
+	position: relative;
+	z-index: 800;
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+.leaflet-top,
+.leaflet-bottom {
+	position: absolute;
+	z-index: 1000;
+	pointer-events: none;
+	}
+.leaflet-top {
+	top: 0;
+	}
+.leaflet-right {
+	right: 0;
+	}
+.leaflet-bottom {
+	bottom: 0;
+	}
+.leaflet-left {
+	left: 0;
+	}
+.leaflet-control {
+	float: left;
+	clear: both;
+	}
+.leaflet-right .leaflet-control {
+	float: right;
+	}
+.leaflet-top .leaflet-control {
+	margin-top: 10px;
+	}
+.leaflet-bottom .leaflet-control {
+	margin-bottom: 10px;
+	}
+.leaflet-left .leaflet-control {
+	margin-left: 10px;
+	}
+.leaflet-right .leaflet-control {
+	margin-right: 10px;
+	}
+
+
+/* zoom and fade animations */
+
+.leaflet-fade-anim .leaflet-popup {
+	opacity: 0;
+	-webkit-transition: opacity 0.2s linear;
+	   -moz-transition: opacity 0.2s linear;
+	        transition: opacity 0.2s linear;
+	}
+.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
+	opacity: 1;
+	}
+.leaflet-zoom-animated {
+	-webkit-transform-origin: 0 0;
+	    -ms-transform-origin: 0 0;
+	        transform-origin: 0 0;
+	}
+svg.leaflet-zoom-animated {
+	will-change: transform;
+}
+
+.leaflet-zoom-anim .leaflet-zoom-animated {
+	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
+	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
+	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
+	}
+.leaflet-zoom-anim .leaflet-tile,
+.leaflet-pan-anim .leaflet-tile {
+	-webkit-transition: none;
+	   -moz-transition: none;
+	        transition: none;
+	}
+
+.leaflet-zoom-anim .leaflet-zoom-hide {
+	visibility: hidden;
+	}
+
+
+/* cursors */
+
+.leaflet-interactive {
+	cursor: pointer;
+	}
+.leaflet-grab {
+	cursor: -webkit-grab;
+	cursor:    -moz-grab;
+	cursor:         grab;
+	}
+.leaflet-crosshair,
+.leaflet-crosshair .leaflet-interactive {
+	cursor: crosshair;
+	}
+.leaflet-popup-pane,
+.leaflet-control {
+	cursor: auto;
+	}
+.leaflet-dragging .leaflet-grab,
+.leaflet-dragging .leaflet-grab .leaflet-interactive,
+.leaflet-dragging .leaflet-marker-draggable {
+	cursor: move;
+	cursor: -webkit-grabbing;
+	cursor:    -moz-grabbing;
+	cursor:         grabbing;
+	}
+
+/* marker & overlays interactivity */
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-image-layer,
+.leaflet-pane > svg path,
+.leaflet-tile-container {
+	pointer-events: none;
+	}
+
+.leaflet-marker-icon.leaflet-interactive,
+.leaflet-image-layer.leaflet-interactive,
+.leaflet-pane > svg path.leaflet-interactive,
+svg.leaflet-image-layer.leaflet-interactive path {
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+
+/* visual tweaks */
+
+.leaflet-container {
+	background: #ddd;
+	outline-offset: 1px;
+	}
+.leaflet-container a {
+	color: #0078A8;
+	}
+.leaflet-zoom-box {
+	border: 2px dotted #38f;
+	background: rgba(255,255,255,0.5);
+	}
+
+
+/* general typography */
+.leaflet-container {
+	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+	font-size: 0.75rem;
+	line-height: 1.5;
+	}
+
+
+/* general toolbar styles */
+
+.leaflet-bar {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+	border-radius: 4px;
+	}
+.leaflet-bar a {
+	background-color: #fff;
+	border-bottom: 1px solid #ccc;
+	width: 26px;
+	height: 26px;
+	line-height: 26px;
+	display: block;
+	text-align: center;
+	text-decoration: none;
+	color: black;
+	}
+.leaflet-bar a,
+.leaflet-control-layers-toggle {
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	display: block;
+	}
+.leaflet-bar a:hover,
+.leaflet-bar a:focus {
+	background-color: #f4f4f4;
+	}
+.leaflet-bar a:first-child {
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+	}
+.leaflet-bar a:last-child {
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+	border-bottom: none;
+	}
+.leaflet-bar a.leaflet-disabled {
+	cursor: default;
+	background-color: #f4f4f4;
+	color: #bbb;
+	}
+
+.leaflet-touch .leaflet-bar a {
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	}
+.leaflet-touch .leaflet-bar a:first-child {
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+	}
+.leaflet-touch .leaflet-bar a:last-child {
+	border-bottom-left-radius: 2px;
+	border-bottom-right-radius: 2px;
+	}
+
+/* zoom control */
+
+.leaflet-control-zoom-in,
+.leaflet-control-zoom-out {
+	font: bold 18px 'Lucida Console', Monaco, monospace;
+	text-indent: 1px;
+	}
+
+.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
+	font-size: 22px;
+	}
+
+
+/* layers control */
+
+.leaflet-control-layers {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+	background: #fff;
+	border-radius: 5px;
+	}
+.leaflet-control-layers-toggle {
+	background-image: url(images/layers.png);
+	width: 36px;
+	height: 36px;
+	}
+.leaflet-retina .leaflet-control-layers-toggle {
+	background-image: url(images/layers-2x.png);
+	background-size: 26px 26px;
+	}
+.leaflet-touch .leaflet-control-layers-toggle {
+	width: 44px;
+	height: 44px;
+	}
+.leaflet-control-layers .leaflet-control-layers-list,
+.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
+	display: none;
+	}
+.leaflet-control-layers-expanded .leaflet-control-layers-list {
+	display: block;
+	position: relative;
+	}
+.leaflet-control-layers-expanded {
+	padding: 6px 10px 6px 6px;
+	color: #333;
+	background: #fff;
+	}
+.leaflet-control-layers-scrollbar {
+	overflow-y: scroll;
+	overflow-x: hidden;
+	padding-right: 5px;
+	}
+.leaflet-control-layers-selector {
+	margin-top: 2px;
+	position: relative;
+	top: 1px;
+	}
+.leaflet-control-layers label {
+	display: block;
+	font-size: 13px;
+	font-size: 1.08333em;
+	}
+.leaflet-control-layers-separator {
+	height: 0;
+	border-top: 1px solid #ddd;
+	margin: 5px -10px 5px -6px;
+	}
+
+/* Default icon URLs */
+.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
+	background-image: url(images/marker-icon.png);
+	}
+
+
+/* attribution and scale controls */
+
+.leaflet-container .leaflet-control-attribution {
+	background: #fff;
+	background: rgba(255, 255, 255, 0.8);
+	margin: 0;
+	}
+.leaflet-control-attribution,
+.leaflet-control-scale-line {
+	padding: 0 5px;
+	color: #333;
+	line-height: 1.4;
+	}
+.leaflet-control-attribution a {
+	text-decoration: none;
+	}
+.leaflet-control-attribution a:hover,
+.leaflet-control-attribution a:focus {
+	text-decoration: underline;
+	}
+.leaflet-attribution-flag {
+	display: inline !important;
+	vertical-align: baseline !important;
+	width: 1em;
+	height: 0.6669em;
+	}
+.leaflet-left .leaflet-control-scale {
+	margin-left: 5px;
+	}
+.leaflet-bottom .leaflet-control-scale {
+	margin-bottom: 5px;
+	}
+.leaflet-control-scale-line {
+	border: 2px solid #777;
+	border-top: none;
+	line-height: 1.1;
+	padding: 2px 5px 1px;
+	white-space: nowrap;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+	background: rgba(255, 255, 255, 0.8);
+	text-shadow: 1px 1px #fff;
+	}
+.leaflet-control-scale-line:not(:first-child) {
+	border-top: 2px solid #777;
+	border-bottom: none;
+	margin-top: -2px;
+	}
+.leaflet-control-scale-line:not(:first-child):not(:last-child) {
+	border-bottom: 2px solid #777;
+	}
+
+.leaflet-touch .leaflet-control-attribution,
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	box-shadow: none;
+	}
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	border: 2px solid rgba(0,0,0,0.2);
+	background-clip: padding-box;
+	}
+
+
+/* popup */
+
+.leaflet-popup {
+	position: absolute;
+	text-align: center;
+	margin-bottom: 20px;
+	}
+.leaflet-popup-content-wrapper {
+	padding: 1px;
+	text-align: left;
+	border-radius: 12px;
+	}
+.leaflet-popup-content {
+	margin: 13px 24px 13px 20px;
+	line-height: 1.3;
+	font-size: 13px;
+	font-size: 1.08333em;
+	min-height: 1px;
+	}
+.leaflet-popup-content p {
+	margin: 17px 0;
+	margin: 1.3em 0;
+	}
+.leaflet-popup-tip-container {
+	width: 40px;
+	height: 20px;
+	position: absolute;
+	left: 50%;
+	margin-top: -1px;
+	margin-left: -20px;
+	overflow: hidden;
+	pointer-events: none;
+	}
+.leaflet-popup-tip {
+	width: 17px;
+	height: 17px;
+	padding: 1px;
+
+	margin: -10px auto 0;
+	pointer-events: auto;
+
+	-webkit-transform: rotate(45deg);
+	   -moz-transform: rotate(45deg);
+	    -ms-transform: rotate(45deg);
+	        transform: rotate(45deg);
+	}
+.leaflet-popup-content-wrapper,
+.leaflet-popup-tip {
+	background: white;
+	color: #333;
+	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+	}
+.leaflet-container a.leaflet-popup-close-button {
+	position: absolute;
+	top: 0;
+	right: 0;
+	border: none;
+	text-align: center;
+	width: 24px;
+	height: 24px;
+	font: 16px/24px Tahoma, Verdana, sans-serif;
+	color: #757575;
+	text-decoration: none;
+	background: transparent;
+	}
+.leaflet-container a.leaflet-popup-close-button:hover,
+.leaflet-container a.leaflet-popup-close-button:focus {
+	color: #585858;
+	}
+.leaflet-popup-scrolled {
+	overflow: auto;
+	}
+
+.leaflet-oldie .leaflet-popup-content-wrapper {
+	-ms-zoom: 1;
+	}
+.leaflet-oldie .leaflet-popup-tip {
+	width: 24px;
+	margin: 0 auto;
+
+	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
+	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+	}
+
+.leaflet-oldie .leaflet-control-zoom,
+.leaflet-oldie .leaflet-control-layers,
+.leaflet-oldie .leaflet-popup-content-wrapper,
+.leaflet-oldie .leaflet-popup-tip {
+	border: 1px solid #999;
+	}
+
+
+/* div icon */
+
+.leaflet-div-icon {
+	background: #fff;
+	border: 1px solid #666;
+	}
+
+
+/* Tooltip */
+/* Base styles for the element that has a tooltip */
+.leaflet-tooltip {
+	position: absolute;
+	padding: 6px;
+	background-color: #fff;
+	border: 1px solid #fff;
+	border-radius: 3px;
+	color: #222;
+	white-space: nowrap;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	pointer-events: none;
+	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
+	}
+.leaflet-tooltip.leaflet-interactive {
+	cursor: pointer;
+	pointer-events: auto;
+	}
+.leaflet-tooltip-top:before,
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+	position: absolute;
+	pointer-events: none;
+	border: 6px solid transparent;
+	background: transparent;
+	content: "";
+	}
+
+/* Directions */
+
+.leaflet-tooltip-bottom {
+	margin-top: 6px;
+}
+.leaflet-tooltip-top {
+	margin-top: -6px;
+}
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-top:before {
+	left: 50%;
+	margin-left: -6px;
+	}
+.leaflet-tooltip-top:before {
+	bottom: 0;
+	margin-bottom: -12px;
+	border-top-color: #fff;
+	}
+.leaflet-tooltip-bottom:before {
+	top: 0;
+	margin-top: -12px;
+	margin-left: -6px;
+	border-bottom-color: #fff;
+	}
+.leaflet-tooltip-left {
+	margin-left: -6px;
+}
+.leaflet-tooltip-right {
+	margin-left: 6px;
+}
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+	top: 50%;
+	margin-top: -6px;
+	}
+.leaflet-tooltip-left:before {
+	right: 0;
+	margin-right: -12px;
+	border-left-color: #fff;
+	}
+.leaflet-tooltip-right:before {
+	left: 0;
+	margin-left: -12px;
+	border-right-color: #fff;
+	}
+
+/* Printing */
+
+@media print {
+	/* Prevent printers from removing background-images of controls. */
+	.leaflet-control {
+		-webkit-print-color-adjust: exact;
+		print-color-adjust: exact;
+		}
+	}

test.html

@@ -1,82 +0,0 @@
-<!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>