Improve description in top right

docs/about.md

@@ -0,0 +1,23 @@
+Safe Cycling Map
+================
+Zoom in to see individual lanes, zoom out a little to see street safety.
+
+
+# Key
+## Safe streets - green
+- Speed is less than or equal to 30kph
+- Is a [living street](https://wiki.openstreetmap.org/wiki/Tag:highway%3Dliving_street)
+- Is a separated cycleway
+- Is a cycle lane separated from the road
+- Is a shared path (bikes + pedestrians allowed)
+
+## More dangerous streets
+- Road has a speed limit less than 40kph and greater than 30kmh
+- Has an on road, painted (non-separated) bike lane
+
+## Dangerous streets
+- Speed is higher than 40kmh
+- Road is a residental street with default speed limit (50kph)
+
+## TODO: Banned streets
+Currently banned streets (eg. motorways/Sydney Harbour Bridge) are displayed as red.

src/App.css

@@ -104,7 +104,7 @@ h1 {
   bottom: 15px;
 }
 .mapboxgl-ctrl-top-left {
-  margin-top: 70px;
+  margin-top: 90px;
 }
 
 .mapboxgl-ctrl-geocoder--icon.mapboxgl-ctrl-geocoder--icon-search {

src/drawing.ts

@@ -57,20 +57,20 @@ export function removeMarkers(markers: mapboxgl.Marker[]): void {
 }
 export function removeStreetLayers(map: mapboxgl.Map): void {
   try {
-    if (map.isSourceLoaded('greenRoads')) {
-      console.log("Removing sources...");
-      map.removeLayer('greenRoadsId');
-      map.removeLayer('redRoadsId');
-      map.removeLayer('orangeRoadsId');
+    // if (map.isSourceLoaded('greenRoads')) {
+    console.log("Removing sources...");
+    map.removeLayer('greenRoadsId');
+    map.removeLayer('redRoadsId');
+    map.removeLayer('orangeRoadsId');
 
-      map.removeSource('greenRoads');
-      map.removeSource('redRoads');
-      map.removeSource('orangeRoads');
+    map.removeSource('greenRoads');
+    map.removeSource('redRoads');
+    map.removeSource('orangeRoads');
 
-    } else {
+    // } else {
 
-      console.log("NOT Removing sources.");
-    }
+    //   console.log("NOT Removing sources.");
+    // }
 
   } catch (e) {
 
@@ -144,7 +144,7 @@ export function addStreetLayers(map: mapboxgl.Map, geoJson: FeatureCollection<Ge
       "line-width": 7,
       'line-opacity': 0.8
     },
-  },layerToAddBefore);
+  }, layerToAddBefore);
 
 }
 

src/map.tsx

@@ -60,12 +60,12 @@ export function Map() {
       }),
       "top-left"
     );
-    map.addControl(
-      new MapboxDirections({
-        accessToken: mapboxgl.accessToken,
-      }),
-      "top-left"
-    );
+    // map.addControl(
+    //   new MapboxDirections({
+    //     accessToken: mapboxgl.accessToken,
+    //   }),
+    //   "top-left"
+    // );
     map.addControl(
       new mapboxgl.GeolocateControl({
         positionOptions: {
@@ -84,7 +84,7 @@ export function Map() {
       if (zoom < min_overpass_turbo_zoom) {
         setLoadingStatus("too_zoomed_out");
       } else {
-        setLoadingStatus('ready_to_load');
+        setLoadingStatus("ready_to_load");
       }
       console.log(lng, lat, zoom);
 
@@ -124,15 +124,24 @@ export function Map() {
       <div className="sidebar">
         <label>
           {" "}
-          {statusText}<br></br> A work in progress side project by{" "}
+          {statusText}
+          <br></br>
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://github.com/jakecoppinger/safe-cycling-map/blob/main/about.md"
+          >
+            View map key and how safety is calculated
+          </a>
+          <br></br>A work in progress side project by{" "}
           <a
             target="_blank"
             rel="noopener noreferrer"
             href="https://jakecoppinger.com/"
           >
             Jake Coppinger
-          </a>{" "}
-          | Open source on{" "}
+          </a>
+          <br></br>Open source on{" "}
           <a
             target="_blank"
             rel="noopener noreferrer"