Improve loading notifications

src/App.css

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

src/api.ts

@@ -1,5 +1,5 @@
 import debounce from "debounce";
-import { OverpassResponse, RawOverpassNode } from "./interfaces";
+import { LoadingStatusType, OverpassResponse, RawOverpassNode } from "./interfaces";
 
 import * as http from "https";
 import { addStreetLayers, drawMarkersAndCards, removeMarkers, removeStreetLayers } from "./drawing";
@@ -14,8 +14,10 @@ import osmtogeojson from 'osmtogeojson';
  * @returns 
  */
 export async function getOSMData(overpassQuery: string): Promise<OverpassResponse> {
+  // overpass.kumi.systems
+    // hostname: "overpass-api.de",
   const options = {
-    hostname: "overpass-api.de",
+    hostname: "overpass.kumi.systems",
     port: 443,
     path: "/api/interpreter",
     method: "POST",
@@ -102,5 +104,3 @@ async function fetchAndDrawMarkers(
 
   // markers.current = await drawMarkersAndCards(map, nodesAndWayCenters);
 }
-
-type LoadingStatusType = "loading" | "success" | "429error" | "unknownerror";

src/drawing.ts

@@ -113,7 +113,8 @@ export function addStreetLayers(map: mapboxgl.Map, geoJson: FeatureCollection<Ge
     'layout': {},
     'paint': {
       "line-color": "red",
-      "line-width": 3
+      "line-width": 3,
+      'line-opacity': 0.3
     },
   });
 
@@ -124,12 +125,12 @@ export function addStreetLayers(map: mapboxgl.Map, geoJson: FeatureCollection<Ge
     'layout': {},
     'paint': {
       "line-color": "orange",
-      "line-width": 3
+      "line-width": 3,
+      'line-opacity': 0.5
     },
   });
 
 
-
   // Add a new layer to visualize the polygon.
   map.addLayer({
     'id': 'greenRoadsId',
@@ -137,8 +138,9 @@ export function addStreetLayers(map: mapboxgl.Map, geoJson: FeatureCollection<Ge
     'source': 'greenRoads', // reference the data source
     'layout': {},
     'paint': {
-      "line-color": "green",
-      "line-width": 7
+      "line-color": "#00FF00",
+      "line-width": 7,
+      'line-opacity': 0.8
     },
   });
 

src/interfaces.ts

@@ -33,4 +33,4 @@ export type OverpassResponse = {
 };
 
 
-export type LoadingStatusType = "loading" | "success" | "429error" | "unknownerror";
+export type LoadingStatusType = "loading" | "success" | "429error" | "unknownerror" | "too_zoomed_out" | "ready_to_load"

src/map.tsx

@@ -15,13 +15,17 @@ import { LoadingStatusType } from "./interfaces";
 const MAPBOX_TOKEN =
   "pk.eyJ1IjoiamFrZWMiLCJhIjoiY2tkaHplNGhjMDAyMDJybW4ybmRqbTBmMyJ9.AR_fnEuka8-cFb4Snp3upw";
 
+const min_overpass_turbo_zoom = 15;
+/** Also the min zoom of the vector tileserver */
+// const max_overpass_turbo_zoom = 15;
+
 mapboxgl.accessToken = MAPBOX_TOKEN;
 export function Map() {
   const mapContainer = React.useRef<HTMLDivElement>(null);
   const mapRef = React.useRef<mapboxgl.Map | null>(null);
   const markers = React.useRef<mapboxgl.Marker[]>([]);
   const [loadingStatus, setLoadingStatus] =
-    useState<LoadingStatusType>("success");
+    useState<LoadingStatusType>("ready_to_load");
 
   const [lng, setLng] = useState(151.2160755932166);
   const [lat, setLat] = useState(-33.88056647217827);
@@ -41,7 +45,7 @@ export function Map() {
       center: [lng, lat],
       zoom: zoom,
       hash: true,
-      style: 'mapbox://styles/mapbox/dark-v11', 
+      style: "mapbox://styles/mapbox/dark-v11",
     });
 
     const map = mapRef.current;
@@ -77,40 +81,50 @@ export function Map() {
       }
       const { lng, lat } = map.getCenter();
       const zoom = map.getZoom();
+      if (zoom < min_overpass_turbo_zoom) {
+        setLoadingStatus("too_zoomed_out");
+      } else {
+        setLoadingStatus('ready_to_load');
+      }
       console.log(lng, lat, zoom);
 
       setLng(map.getCenter().lng);
       setLat(map.getCenter().lat);
       setZoom(map.getZoom());
     });
-    debouncedFetchAndDrawMarkers(map, markers, setLoadingStatus);
 
+    if (zoom < min_overpass_turbo_zoom) {
+      setLoadingStatus("too_zoomed_out");
+    } else {
+      debouncedFetchAndDrawMarkers(map, markers, setLoadingStatus);
+    }
 
     map.on("moveend", async () => {
       if (map === null) {
         return;
       }
-      debouncedFetchAndDrawMarkers(map, markers, setLoadingStatus);
+      const zoom = map.getZoom();
+      if (zoom > min_overpass_turbo_zoom) {
+        debouncedFetchAndDrawMarkers(map, markers, setLoadingStatus);
+      }
     });
-
-
   });
   const statusMessages = {
     loading: "Loading from OpenStreetMap...",
     success: "Done loading",
-    unknownerror: "Error loading data. Please wait a bit",
+    ready_to_load: "About to load...",
+    too_zoomed_out: "Zoom in to see street safety",
+    unknownerror: "Error loading. Please wait a bit",
     "429error": "Too many requests, please try in a bit",
   };
 
-
   const statusText = statusMessages[loadingStatus];
   return (
     <div>
       <div className="sidebar">
         <label>
-        {" "}
-          {statusText} |{" "}
-          A work in progress side project by{" "}
+          {" "}
+          {statusText}<br></br> A work in progress side project by{" "}
           <a
             target="_blank"
             rel="noopener noreferrer"

src/overpass-requests.ts

@@ -23,7 +23,7 @@ export const safeCycleways = (boundsStr: string) => `
 /* Select road types to display */ 
 
 ( 
-  way[highway]["highway"!~"cycleway|path|footway|pedestrian"]["bicycle"!~"no"];
+  way[highway];
   way["highway"="residential"];
   
   way[highway=cycleway];