Add directions api

README.md

@@ -19,7 +19,7 @@ See instructions for setting up the backend tileserve at
 
 Install packages:
 `nvm install`
-`npm i`
+`npm i --legacy-peer-deps`
 
 Run dev server:
 `npm run start`

config/webpack.config.js

@@ -390,7 +390,9 @@ module.exports = function (webpackEnv) {
                 // See #6846 for context on why cacheCompression is disabled
                 cacheCompression: false,
                 compact: isEnvProduction,
-                ignore: ['./node_modules/maplibre-gl/dist/maplibre-gl.js']
+                ignore: ['./node_modules/mapbox-gl/dist/mapbox-gl.js',
+
+                  './node_modules/@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.js']
               },
             },
             // Process any JS outside of the app with Babel.
@@ -418,7 +420,9 @@ module.exports = function (webpackEnv) {
                 // show incorrect code and set breakpoints on the wrong lines.
                 sourceMaps: shouldUseSourceMap,
                 inputSourceMap: shouldUseSourceMap,
-                ignore: ['./node_modules/maplibre-gl/dist/maplibre-gl.js']
+                ignore: ['./node_modules/mapbox-gl/dist/mapbox-gl.js',
+              './node_modules/@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.js'
+              ]
               },
             },
             // "postcss" loader applies autoprefixer to our CSS.

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@babel/core": "7.9.0",
+    "@mapbox/mapbox-gl-directions": "^4.1.1",
     "@svgr/webpack": "4.3.3",
     "@typescript-eslint/eslint-plugin": "^2.10.0",
     "@typescript-eslint/parser": "^2.10.0",
@@ -33,7 +34,7 @@
     "jest-environment-jsdom-fourteen": "1.0.1",
     "jest-resolve": "24.9.0",
     "jest-watch-typeahead": "0.4.2",
-    "maplibre-gl": "^2.4.0",
+    "mapbox-gl": "^2.9.2",
     "mini-css-extract-plugin": "0.9.0",
     "optimize-css-assets-webpack-plugin": "5.0.3",
     "pnp-webpack-plugin": "1.6.4",
@@ -65,7 +66,7 @@
     "start": "PORT=5000 node scripts/start.js",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js",
-    "deploy": "npm run build && rsync -r --progress build/ ../deploy-safe-cycling-map/"
+    "deploy": "npm run build && rsync -r --progress build/ ../deploy-safe-cycling-map/ && pushd ../deploy-safe-cycling-map/ && git add -A && git commit -m \"Update\" && git push && popd && echo \"Deploy done\""
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -77,6 +78,7 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "@types/jest": "^24.0.0",
+    "@types/mapbox-gl": "^2.7.10",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",

public/index.html

@@ -9,10 +9,7 @@
       content="A map of safe cycling infrastructure. Uses OpenStreetMap data."
     />
     <title>Safe Cycling Map</title>
-    <link
-      href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css"
-      rel="stylesheet"
-    />
+    <link href='https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css' rel='stylesheet' />
     <style>
       #search_overlay {
         border-radius: 3px;

src/App.css

@@ -42,7 +42,7 @@
 }
 
 #right {
-  width:70vw;
+  width: 70vw;
   overflow: hidden;
   position: absolute;
   top: 0;
@@ -75,9 +75,9 @@ h1 {
   z-index: 10;
 
   min-width: 400px;
-  
+
   padding: 5px 10px;
-  
+
   background-color: rgba(255, 255, 255, 0.8);
   border: 3px solid gray;
   border-radius: 5px;
@@ -99,7 +99,10 @@ h1 {
   font-size: 20px;
 }
 .mapboxgl-ctrl-bottom-left {
-  right:0;
+  right: 0;
   left: initial;
   bottom: 15px;
-}
+}
+.mapboxgl-ctrl-top-left {
+  margin-top: 50px;
+}

src/layers.ts

@@ -2,7 +2,7 @@
 const layerToAddAfter = undefined;
 
 function addLayer(
-  map: maplibregl.Map,
+  map: mapboxgl.Map,
   type:
     | "Driving"
     | "Parking"
@@ -15,7 +15,7 @@ function addLayer(
     | "LightRail"
     | "Footway"
     | "SharedUse",
-  paint: any // TODO: fix this. used to be maplibregl.FillPaint | undefined
+  paint: any // TODO: fix this. used to be mapboxgl.FillPaint | undefined
 ): void {
   map.addLayer({
     id: type,
@@ -50,7 +50,7 @@ const colours = {
   SharedUse: "#E5E1BB",
 };
 
-export const mapOnLoad = (map: maplibregl.Map) => () => {
+export const mapOnLoad = (map: mapboxgl.Map) => () => {
   const layers = map.getStyle().layers;
   // Find the index of the first symbol layer in the map style.
   let firstSymbolId;

src/map.tsx

@@ -1,12 +1,19 @@
 import React, { useEffect, useState } from "react";
-import maplibregl from 'maplibre-gl'; 
+import mapboxgl from "mapbox-gl";
 import "./App.css";
 import { mapOnLoad } from "./layers";
 
+// @ts-ignore
+import MapboxDirections from "@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions";
+import "@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.css";
 
+const MAPBOX_TOKEN =
+  "pk.eyJ1IjoiamFrZWMiLCJhIjoiY2tkaHplNGhjMDAyMDJybW4ybmRqbTBmMyJ9.AR_fnEuka8-cFb4Snp3upw";
+
+mapboxgl.accessToken = MAPBOX_TOKEN;
 export function Map() {
   const mapContainer = React.useRef<HTMLDivElement>(null);
-  const mapRef = React.useRef<maplibregl.Map | null>(null);
+  const mapRef = React.useRef<mapboxgl.Map | null>(null);
 
   const [lng, setLng] = useState(151.2160755932166);
   const [lat, setLat] = useState(-33.88056647217827);
@@ -21,21 +28,49 @@ export function Map() {
       return;
     }
 
-    mapRef.current = new maplibregl.Map({
+    mapRef.current = new mapboxgl.Map({
       container: mapContainer.current,
       center: [lng, lat],
       zoom: zoom,
-      style: "./style.json",
+      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: 22,
+          },
+        ],
+      },
     });
 
     const map = mapRef.current;
     map.on("load", mapOnLoad(map));
 
-    // TO FIX
-    // map.addControl(new maplibregl.NavigationControl());
-    // map.addControl(new maplibregl.FullscreenControl());
+    map.addControl(new mapboxgl.NavigationControl());
+    map.addControl(new mapboxgl.FullscreenControl());
     map.addControl(
-      new maplibregl.GeolocateControl({
+      new MapboxDirections({
+        accessToken: mapboxgl.accessToken,
+      }),
+      "top-left"
+    );
+    map.addControl(
+      new mapboxgl.GeolocateControl({
         positionOptions: {
           enableHighAccuracy: true,
         },