Set loading status, improve road colours

src/api.ts

@@ -90,6 +90,7 @@ async function fetchAndDrawMarkers(
   addStreetLayers(map, geoJson);
   
 
+  setLoadingStatus("success");
   return;
   // removeMarkers(markers.current);
 
@@ -100,7 +101,6 @@ async function fetchAndDrawMarkers(
   //   .filter((item) => item.tags !== undefined);
 
   // markers.current = await drawMarkersAndCards(map, nodesAndWayCenters);
-  // setLoadingStatus("success");
 }
 
 type LoadingStatusType = "loading" | "success" | "429error" | "unknownerror";

src/drawing.ts

@@ -56,7 +56,7 @@ export function removeMarkers(markers: mapboxgl.Marker[]): void {
 }
 export function removeStreetLayers(map: mapboxgl.Map): void {
   try {
-    if(map.isSourceLoaded('greenRoads')) {
+    if (map.isSourceLoaded('greenRoads')) {
       console.log("Removing sources...");
       map.removeLayer('greenRoadsId');
       map.removeLayer('redRoadsId');
@@ -77,11 +77,20 @@ export function removeStreetLayers(map: mapboxgl.Map): void {
 }
 
 export function addStreetLayers(map: mapboxgl.Map, geoJson: FeatureCollection<Geometry, GeoJsonProperties>) {
-map.addSource('redRoads', {
+  map.addSource('redRoads', {
     type: 'geojson',
     data: {
       features: geoJson.features.filter(feature => feature.properties &&
-        feature.properties.maxspeed > 40),
+        (feature.properties.maxspeed > 40 || (feature.properties.highway === 'residential' && feature.properties.maxspeed === undefined))),
+      type: "FeatureCollection"
+    }
+  });
+  map.addSource('orangeRoads', {
+    type: 'geojson',
+    data: {
+      features: geoJson.features.filter(feature => feature.properties &&
+        (feature.properties.maxspeed <= 40 || feature.properties.cycleway === 'lane'))
+      ,
       type: "FeatureCollection"
     }
   });
@@ -90,16 +99,10 @@ map.addSource('redRoads', {
     type: 'geojson',
     data: {
       features: geoJson.features.filter(feature => feature.properties &&
-        (feature.properties.highway === 'cycleway' || feature.properties.highway === 'pedestrian'))
-      ,
-      type: "FeatureCollection"
-    }
-  });
-  map.addSource('orangeRoads', {
-    type: 'geojson',
-    data: {
-      features: geoJson.features.filter(feature => feature.properties &&
-        (feature.properties.maxspeed <= 40))
+        (feature.properties.maxspeed <= 30 || feature.properties.highway === 'cycleway' || feature.properties.highway === 'pedestrian'
+
+          || feature.properties.highway === 'living_street'
+        ))
       ,
       type: "FeatureCollection"
     }
@@ -119,6 +122,18 @@ map.addSource('redRoads', {
     },
   });
 
+  map.addLayer({
+    'id': 'orangeRoadsId',
+    'type': 'line',
+    'source': 'orangeRoads', // reference the data source
+    'layout': {},
+    'paint': {
+      "line-color": "orange",
+      "line-width": 3
+    },
+  });
+
+
 
   // Add a new layer to visualize the polygon.
   map.addLayer({
@@ -131,18 +146,6 @@ map.addSource('redRoads', {
       "line-width": 7
     },
   });
-  map.addLayer({
-    'id': 'orangeRoadsId',
-    'type': 'line',
-    'source': 'orangeRoads', // reference the data source
-    'layout': {},
-    'paint': {
-      "line-color": "orange",
-      "line-width": 5
-    },
-  });
-
-
 
 }
 

src/map.tsx

@@ -41,29 +41,7 @@ export function Map() {
       center: [lng, lat],
       zoom: zoom,
       hash: true,
-      style: {
-        version: 8,
-        sources: {
-          "raster-tiles": {
-            type: "raster",
-            tiles: [
-              "https://a.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png",
-            ],
-            tileSize: 256,
-            attribution:
-              '© <a target="_blank" href="https://www.cyclosm.org">CyclOSM</a>, <a target="_blank" href="https://github.com/a-b-street/osm2streets">osm2streets</a>, <a target="_blank" href="https://openstreetmap.org/">OpenStreetMap contributors</a>',
-          },
-        },
-        layers: [
-          {
-            id: "simple-tiles",
-            type: "raster",
-            source: "raster-tiles",
-            minzoom: 0,
-            maxzoom: 19,
-          },
-        ],
-      },
+      style: 'mapbox://styles/mapbox/dark-v11', 
     });
 
     const map = mapRef.current;

src/overpass-requests.ts

@@ -24,13 +24,14 @@ export const safeCycleways = (boundsStr: string) => `
 
 ( 
   way[highway]["highway"!~"cycleway|path|footway|pedestrian"]["bicycle"!~"no"][maxspeed](if:t["maxspeed"]<=50);
+  way["highway"="residential"];
   
   way[highway=cycleway];
   way["highway"~"cycleway|path|footway|pedestrian"]["bicycle"~"yes|designated"];
   way[highway=proposed][proposed=cycleway];
   way[highway=construction][construction=cycleway];
   way[proposed=cycleway];
-  
+  way[cycleway=lane];
 
 );