Visualise routable tiles as GeoJSON layers

Author: tuukka

.eslintignore

@@ -8,3 +8,7 @@ src/react-app-env.d.ts
 # This file was created by Create React App so let's not lint it until we need
 # to touch it.
 src/serviceWorker.ts
+
+# Modules from external sources
+src/minimal-xyz-viewer.js
+src/RoutableTilesToGeoJSON.js

src/App.tsx

@@ -19,10 +19,13 @@ import {
   routePointLayer,
   routePointSymbolLayer,
   routeLineLayer,
+  routableTilesLayer,
 } from "./map-style";
 import PinMarker from "./components/PinMarker";
 import calculatePlan, { geometryToGeoJSON } from "./planner";
 import { queryEntrances, ElementWithCoordinates } from "./overpass";
+import routableTilesToGeoJSON from "./RoutableTilesToGeoJSON";
+import { getVisibleTiles } from "./minimal-xyz-viewer";
 import "./App.css";
 
 interface State {
@@ -31,6 +34,7 @@ interface State {
   destination: ElementWithCoordinates;
   entrances: Array<ElementWithCoordinates>;
   route: FeatureCollection;
+  routableTiles: Map<string, FeatureCollection | null>;
 }
 
 const latLngToDestination = (
@@ -59,6 +63,7 @@ const initialState: State = {
     bearing: 0,
     pitch: 0,
   },
+  routableTiles: new Map(),
 };
 
 const transformRequest = (originalURL?: string): MapRequest => {
@@ -115,6 +120,69 @@ const App: React.FC = () => {
 
   const [state, setState] = useState(initialState);
 
+  useEffect(() => {
+    if (
+      !state.viewport.zoom ||
+      !state.viewport.width ||
+      !state.viewport.height
+    ) {
+      return; // Nothing to do yet
+    }
+    if (state.viewport.zoom < 12) return; // minzoom
+
+    const zoomOffset = 1;
+    const zoomMultiplier = 2 ** (14 - zoomOffset) - state.viewport.zoom;
+    const visibleTiles = getVisibleTiles(
+      zoomMultiplier * state.viewport.width,
+      zoomMultiplier * state.viewport.height,
+      [state.viewport.longitude, state.viewport.latitude],
+      14
+    );
+
+    // Initialise the new Map with nulls and available tiles from previous
+    const routableTiles = new Map();
+    visibleTiles.forEach(({ x, y }) => {
+      const key = `${x}-${y}`;
+      routableTiles.set(key, state.routableTiles.get(key) || null);
+    });
+
+    setState(
+      (prevState: State): State => {
+        return {
+          ...prevState,
+          routableTiles,
+        };
+      }
+    );
+
+    visibleTiles.map(async ({ x, y }) => {
+      const key = `${x}-${y}`;
+      if (routableTiles.get(key) !== null) return; // We already have the tile
+      // fetch tile
+      const response = await fetch(
+        `https://tile.olmap.org/routable-tiles/14/${x}/${y}`
+      );
+      const body = await response.json();
+      // convert to geojson
+      const geoJSON = routableTilesToGeoJSON(body) as FeatureCollection;
+      // add to tiles if still needed based on latest state
+      setState(
+        (prevState: State): State => {
+          if (prevState.routableTiles.get(key) !== null) {
+            return prevState; // This tile is not needed anymore
+          }
+          const newRoutableTiles = new Map(prevState.routableTiles);
+          newRoutableTiles.set(key, geoJSON);
+          return {
+            ...prevState,
+            routableTiles: newRoutableTiles,
+          };
+        }
+      );
+    });
+  }, [state.viewport]); // eslint-disable-line react-hooks/exhaustive-deps
+  // XXX: state.routableTiles is missing above as we only use it as a cache here
+
   useEffect(() => {
     if (urlMatch) {
       const origin = parseLatLng(urlMatch.params.from);
@@ -313,6 +381,24 @@ const App: React.FC = () => {
             }
           }}
         />
+        {Array.from(
+          state.routableTiles.entries(),
+          ([coords, tile]) =>
+            tile && (
+              <Source
+                key={coords}
+                id={`source-${coords}`}
+                type="geojson"
+                data={tile}
+              >
+                <Layer
+                  // eslint-disable-next-line react/jsx-props-no-spreading
+                  {...routableTilesLayer}
+                  id={coords}
+                />
+              </Source>
+            )
+        )}
         <Source type="geojson" data={state.route}>
           <Layer
             // eslint-disable-next-line react/jsx-props-no-spreading
@@ -327,6 +413,7 @@ const App: React.FC = () => {
             {...routePointSymbolLayer}
           />
         </Source>
+
         <PinMarker
           marker={{
             draggable: true,

src/RoutableTilesToGeoJSON.js

@@ -0,0 +1,57 @@
+var extractWays = function (json, nodes) {
+  return json["@graph"]
+    .filter((item) => {
+      return item["@type"] === "osm:Way";
+    })
+    .map((item) => {
+      //Transform osm:hasNodes to a linestring style thing
+      if (!item["osm:hasNodes"]) {
+        item["osm:hasNodes"] = [];
+      } else if (typeof item["osm:hasNodes"] === "string") {
+        item["osm:hasNodes"] = [item["osm:hasNodes"]];
+      }
+      item["osm:hasNodes"] = item["osm:hasNodes"].map((node) => {
+        return nodes[node];
+      });
+      let geometry = {
+        type: "LineString",
+        coordinates: item["osm:hasNodes"],
+      };
+      return {
+        id: item["@id"],
+        //layer: item['osm:highway'],
+        type: "Feature",
+        properties: {
+          highway: item["osm:highway"],
+          name: item["rdfs:label"] ? item["rdfs:label"] : "",
+        },
+        geometry: geometry,
+      };
+    });
+};
+
+module.exports = function (json) {
+  // Normalize feature getters into actual instanced features
+  var feats = [];
+  var nodes = {};
+  for (var i = 0; i < json["@graph"].length; i++) {
+    let o = json["@graph"][i];
+    if (o["geo:lat"] && o["geo:long"]) {
+      nodes[o["@id"]] = [o["geo:long"], o["geo:lat"]];
+      let feature = {
+        id: o["@id"],
+        type: "Feature",
+        geometry: {
+          type: "Point",
+          coordinates: [o["geo:long"], o["geo:lat"]],
+        },
+      };
+      feats.push(feature);
+    }
+  }
+  let ways = extractWays(json, nodes);
+  return {
+    type: "FeatureCollection",
+    features: ways,
+  };
+};

src/map-style.ts

@@ -10,6 +10,15 @@ export const routeLineLayer = {
     "line-color": ["get", "color"] as Expression,
   },
 };
+export const routableTilesLayer = {
+  id: "routable-tiles-line",
+  type: "line",
+  paint: {
+    "line-opacity": ["coalesce", ["get", "opacity"], 0.5] as Expression,
+    "line-width": 2,
+    "line-color": "black",
+  },
+};
 
 export const routePointLayer = {
   id: "route-point",

src/minimal-xyz-viewer.js

@@ -0,0 +1,40 @@
+const TILE_SIZE = 256;
+const WEBMERCATOR_R = 6378137.0;
+const DIAMETER = WEBMERCATOR_R * 2 * Math.PI;
+
+function mercatorProject(lonlat) {
+  var x = (DIAMETER * lonlat[0]) / 360.0;
+  var sinlat = Math.sin((lonlat[1] * Math.PI) / 180.0);
+  var y = (DIAMETER * Math.log((1 + sinlat) / (1 - sinlat))) / (4 * Math.PI);
+  return [DIAMETER / 2 + x, DIAMETER - (DIAMETER / 2 + y)];
+}
+// console.log(Mercator.project([-3,41]))
+
+export function getVisibleTiles(clientWidth, clientHeight, center, zoom) {
+  var centerm = mercatorProject(center);
+  // zoom + centerm -> centerpx
+  var centerpx = [
+    (centerm[0] * TILE_SIZE * Math.pow(2, zoom)) / DIAMETER,
+    (centerm[1] * TILE_SIZE * Math.pow(2, zoom)) / DIAMETER,
+  ];
+
+  // xmin, ymin, xmax, ymax
+  var bbox = [
+    Math.floor((centerpx[0] - clientWidth / 2) / TILE_SIZE),
+    Math.floor((centerpx[1] - clientHeight / 2) / TILE_SIZE),
+    Math.ceil((centerpx[0] + clientWidth / 2) / TILE_SIZE),
+    Math.ceil((centerpx[1] + clientHeight / 2) / TILE_SIZE),
+  ];
+  var tiles = [];
+  //xmin, ymin, xmax, ymax
+  for (let x = bbox[0]; x < bbox[2]; ++x) {
+    for (let y = bbox[1]; y < bbox[3]; ++y) {
+      var [px, py] = [
+        x * TILE_SIZE - centerpx[0] + clientWidth / 2,
+        y * TILE_SIZE - centerpx[1] + clientHeight / 2,
+      ];
+      tiles.push({ x, y, zoom, px, py });
+    }
+  }
+  return tiles;
+}