Increase colors/weights at Robin's request

main.go

@@ -57,6 +57,7 @@ func main() {
 	})
 
 	http.HandleFunc("GET /api/sidewalks", func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Content-Type", "application/json")
 		json.NewEncoder(w).Encode(sidewalks)
 	})
 

static/index.html

@@ -14,6 +14,9 @@
       width: 100%;
       background-color: black;
     }
+    .grayscale {
+      filter: saturate(0.4);
+    }
   </style>
   <!-- TODO: self-host -->
   <link rel="stylesheet" href="https://mfhsieh.github.io/leaflet-simple-locate/examples/demo.css" />
@@ -31,13 +34,14 @@
   // Set up the OpenStreetMap tile layer
   L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
     opacity: 0.6,
+    className: 'grayscale',
     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: "Unknown", color: "#444"},
+    {name: "Clear", color: "#04591b"},
+    {name: "Partially Covered", color: "yellow"},
     {name: "Covered", color: "red"},
   ];
 
@@ -49,19 +53,19 @@
       for (let [i, way] of osmData.entries()) {
         const polyline = L.polyline(way.Geometry, {
           color: CONDITIONS[way.Condition].color,
-          weight: 5,
+          weight: 10,
           opacity: 0.7
         }).addTo(map);
 
         polyline.on('mouseover', function(e) {
             e.target.setStyle({
-                weight: 10,
+                weight: 20,
                 opacity: 1,
             });
         });
         polyline.on('mouseout', function(e){
             e.target.setStyle({
-                weight: 5,
+                weight: 10,
                 opacity: 0.7,
             });
         });