From 9acea828f513b34c0fc0e902af375392795db3bf Mon Sep 17 00:00:00 2001
From: Tom Hughes <tom@compton.nu>
Date: Fri, 13 Mar 2026 23:01:42 +0000
Subject: [PATCH] Switch transport layer to vector style

---
 app/assets/javascripts/application.js         |  1 +
 .../javascripts/leaflet.thunderforest.js      | 24 +++++++++++++++++++
 config/layers.yml                             | 12 +++++-----
 3 files changed, 31 insertions(+), 6 deletions(-)
 create mode 100644 app/assets/javascripts/leaflet.thunderforest.js

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 03fd908ee..94aec3eaa 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -10,6 +10,7 @@
 //= require maplibre-gl/dist/maplibre-gl
 //= require leaflet.maplibre
 //= require leaflet.shortbread
+//= require leaflet.thunderforest
 //= require i18n
 //= require leaflet.maptiler
 //= require leaflet.map
diff --git a/app/assets/javascripts/leaflet.thunderforest.js b/app/assets/javascripts/leaflet.thunderforest.js
new file mode 100644
index 000000000..4f3c14088
--- /dev/null
+++ b/app/assets/javascripts/leaflet.thunderforest.js
@@ -0,0 +1,24 @@
+//= require maplibre/i18n
+
+L.OSM.ThunderforestVector = L.OSM.MaplibreGL.extend({
+  onAdd: function (map) {
+    L.OSM.MaplibreGL.prototype.onAdd.call(this, map);
+    const styleURL = "https://api.thunderforest.com/styles/" + this.options.styleName + "/style.json?key=" + this.options.apikey;
+    this.getMaplibreMap().setStyle(styleURL);
+  },
+  onRemove: function (map) {
+    L.OSM.MaplibreGL.prototype.onRemove.call(this, map);
+  }
+});
+
+L.OSM.TransportMapVector = L.OSM.ThunderforestVector.extend({
+  options: {
+    styleName: "transport"
+  }
+});
+
+L.OSM.TransportDarkMapVector = L.OSM.ThunderforestVector.extend({
+  options: {
+    styleName: "transport-dark"
+  }
+});
diff --git a/config/layers.yml b/config/layers.yml
index d39947968..9220925f8 100644
--- a/config/layers.yml
+++ b/config/layers.yml
@@ -48,18 +48,18 @@
         id: "andy_allan"
         href: "https://www.thunderforest.com/"
 
-- leafletOsmId: "TransportMap"
-  leafletOsmDarkId: "TransportDarkMap"
+- leafletOsmId: "TransportMapVector"
+  leafletOsmDarkId: "TransportDarkMapVector"
   code: "T"
   layerId: "transportmap"
   nameId: "transport_map"
   wiki: "https://wiki.openstreetmap.org/wiki/Transport_Map"
   apiKeyId: "thunderforest_key"
-  canEmbed: true
   canDownloadImage: true
-  maxZoom: 21
-  tileUrl: "https://api.thunderforest.com/transport/{z}/{x}/{y}{ratio}.png?apikey={apikey}"
-  tileUrlDark: "https://api.thunderforest.com/transport-dark/{z}/{x}/{y}{ratio}.png?apikey={apikey}"
+  maxZoom: 23
+  isVectorStyle: true
+  styleUrl: "https://api.thunderforest.com/styles/transport/style.json?apikey={apikey}"
+  styleUrlDark: "https://api.thunderforest.com/styles/transport-dark/style.json?apikey={apikey}"
   credit:
     id: "thunderforest_credit"
     children:
-- 
2.39.5