From f3f7a2164501ecb7fb6c992dbbcf3f6686bacb31 Mon Sep 17 00:00:00 2001
From: Chandler Swift <chandler@chandlerswift.com>
Date: Tue, 25 Jul 2023 17:42:31 -0500
Subject: [PATCH] Add bikepacking routes layer

---
 layers/bikepacking/get_data.sh |  5 +++++
 layers/bikepacking/layer.js    | 26 ++++++++++++++++++++++++++
 layers/index.js                |  5 +++++
 3 files changed, 36 insertions(+)
 create mode 100755 layers/bikepacking/get_data.sh
 create mode 100644 layers/bikepacking/layer.js

diff --git a/layers/bikepacking/get_data.sh b/layers/bikepacking/get_data.sh
new file mode 100755
index 0000000..4dbaf10
--- /dev/null
+++ b/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
diff --git a/layers/bikepacking/layer.js b/layers/bikepacking/layer.js
new file mode 100644
index 0000000..0d2feda
--- /dev/null
+++ b/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;
diff --git a/layers/index.js b/layers/index.js
index 0e66a63..f98614e 100644
--- a/layers/index.js
+++ b/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,
+            },
         ]
     }
 ];