Add bikepacking routes layer

layers/bikepacking/get_data.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+
+# from https://ridewithgps.com/embeds?type=region&id=37
+# also https://ridewithgps.com/route_set_overviews/37.json?include_details=1
+curl --silent --output bikepacking-data.geojson https://ridewithgps.com/cos/route_set_overviews/simplified_route/37.json

layers/bikepacking/layer.js

@@ -0,0 +1,26 @@
+import VectorLayer from 'ol/layer/Vector';
+import {Vector as VectorSource} from 'ol/source.js';
+import GeoJSON from 'ol/format/GeoJSON.js';
+
+import {Style, Stroke} from 'ol/style.js';
+
+import url from '/data/bikepacking-data.geojson?url'; // TODO: remove `?url`?
+
+const colors = '0,0,0'; // from their website's cookie banner, and other places
+
+const vectorLayer = new VectorLayer({
+    source: new VectorSource({
+        url: url,
+        format: new GeoJSON,
+    }),
+    style: function(feature, resolution){
+        return new Style({
+            stroke: new Stroke({
+                color: `rgba(${colors},${Math.min(1, Math.pow(resolution/10, 1/4))})`,
+                width: 10/Math.pow(resolution, 1/4),
+            })
+        });
+    },
+});
+
+export default vectorLayer;

layers/index.js

@@ -11,6 +11,7 @@ import kwikTripLayer from './kwik-trip/layer.js';
 import waffleHouseLayer from './waffle-house/layer.js';
 import krispyKremeLayer from './krispy-kreme/layer.js';
 import milwaukeeBurgerCompanyLayer from './milwaukee-burger-company/layer.js';
+import bikepackingLayer from './bikepacking/layer.js';
 
 const layerCategories = [
     {
@@ -92,6 +93,10 @@ const layerCategories = [
                 name: "Milwaukee Burger Company",
                 layer: milwaukeeBurgerCompanyLayer,
             },
+            {
+                name: "Bikepacking.com Routes",
+                layer: bikepackingLayer,
+            },
         ]
     }
 ];