Display OSM using Maptiler vector tiles rather than raster tiles

We use the "positron" style:

https://www.maptiler.com/maps/#style=positron&mode=2d&position=10.44/51.5031/-0.0756

We introduce a new `MAPTILER_API_KEY` environment variable
for our Maptiler service. The production key for Heroku will
only work for request originating from our host:

`air-text-3e4548b53179.herokuapp.com`

The development key is in 1Password

.env.example

@@ -22,3 +22,4 @@ ADDITIONAL_HOSTNAMES=
 CERC_API_HOST_URL=https://cerc.example.com
 CERC_API_KEY=SECRET-API-KEY
 CERC_API_CACHE_LIMIT_MINS=30
+MAPTILER_API_KEY=SECRET-DEV-KEY-FROM-MAPTILER # or prod key limited to Heroku origin

README.md

@@ -91,6 +91,8 @@ To manage sensitive environment variables:
 - `CERC_API_HOST_URL`: find the URL of the CERC API host in the 1Password vault
 - `CERC_API_KEY`: find the API key in the 1Password vault
 - `CERC_API_CACHE_LIMIT_MINS`: how often we expire our cached forecasts
+- `MAPTILER_API_KEY`: used for vector tiles display within Leaflet. Dev and prod
+  keys are in the 1Password vault
 
 ## Access
 

app/controllers/styled_forecasts_controller.rb

@@ -1,10 +1,12 @@
 class StyledForecastsController < ApplicationController
   layout "tailwind_layout"
   def show
+    @maptiler_api_key = ENV.fetch("MAPTILER_API_KEY")
     @forecasts = CercForecastService.latest_forecasts_for(zone).data
   end
 
   def update
+    @maptiler_api_key = ENV.fetch("MAPTILER_API_KEY")
     forecasts = CercForecastService.latest_forecasts_for(zone).data
 
     day_forecast = forecast_for_day(params.fetch("day"), forecasts)

app/javascript/maps.js

@@ -9,13 +9,15 @@ document.addEventListener("turbo:load", function () {
 
     const bigBenLatLng = [51.510357, -0.116773];
 
-    const osmBaseUrl = "https://ows.mundialis.de/services/service?";
     const airTextBaseUrl = "https://airtext.info/geoserver/wms?";
+    const todaysDate = new Date().toJSON().slice(0, 10);
+    const maptilerApiKey = mapEle.getAttribute("data-maptiler-api-key");
 
     const airTextOptions = {
       layers: "london:Total",
-      time: "2024-10-09",
+      time: todaysDate,
       format: "image/png",
+      opacity: 0.6,
       transparency: true, // term used by CERC
     };
 
@@ -33,28 +35,27 @@ document.addEventListener("turbo:load", function () {
       mergeAirTextOptions({ styles: "daqiTotal_linear" })
     );
 
-    const osm = L.tileLayer.wms(osmBaseUrl, {
-      layers: "OSM-Overlay-WMS",
-      format: "image/png",
-      transparent: true, // standard term (?) used by Leaflet and OSM
+    const mtLayer = new L.MaptilerLayer({
+      apiKey: maptilerApiKey,
+      style: "positron",
+      transparent: false,
     });
 
-    const baseMaps = {
+    const overlayMaps = {
       Discrete: discreteAir,
       Linear: linearAir,
     };
-    const overlayMaps = {
-      OSM: osm,
+    const baseMaps = {
+      MapTiler: mtLayer,
     };
 
     const map = L.map("map", {
       center: bigBenLatLng,
-      zoom: 10,
-      layers: [discreteAir, osm],
+      zoom: 8,
+      layers: [discreteAir],
     });
+    map.addLayer(mtLayer);
 
-    baseMaps.Discrete.addTo(map);
-    overlayMaps.OSM.addTo(map);
-    L.control.layers(baseMaps, overlayMaps, { collapsed: false }).addTo(map);
+    L.control.layers(overlayMaps, baseMaps, { collapsed: false }).addTo(map);
   }
 });

app/views/styled_forecasts/_forecast_tabs.html.erb

@@ -11,7 +11,6 @@
     <%= render "day_tab", forecast: @forecasts.third, day: :day_after_tomorrow %>
   </div>
   <%= render partial: "map_selector" %>
-  <div id="map" class="map w-full bg-green-200 h-80">
-    map
+  <div id="map" class="map w-full bg-green-200 h-80" data-maptiler-api-key="<%= @maptiler_api_key %>">
   </div>
 </div>

spec/controllers/styled_forecasts_controller_spec.rb

@@ -1,4 +1,11 @@
 RSpec.describe StyledForecastsController do
+  around do |example|
+    env_vars = {
+      MAPTILER_API_KEY: "TOPSECRET"
+    }
+    ClimateControl.modify(env_vars) { example.run }
+  end
+
   let(:southwark) { double("Southwark") }
   let(:barnet) { double("Barnet") }
 

spec/features/visitors/view_styled_forecasts_spec.rb

@@ -9,7 +9,8 @@
     env_vars = {
       CERC_API_HOST_URL: "https://cerc.example.com",
       CERC_API_KEY: "SECRET-API-KEY",
-      CERC_API_CACHE_LIMIT_MINS: "60"
+      CERC_API_CACHE_LIMIT_MINS: "60",
+      MAPTILER_API_KEY: "TOPSECRET"
     }
     ClimateControl.modify(env_vars) { example.run }
   end