Merge pull request #72 from dxw/101-style-map

101 Restyle map for a more muted appearance using vector tiles from Maptile

.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

@@ -1,4 +1,5 @@
 import L from "leaflet";
+import "@maptiler/leaflet-maptilersdk";
 
 document.addEventListener("turbo:load", function () {
   const mapEle = document.querySelector("#map");
@@ -8,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
     };
 
@@ -32,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>

config/initializers/content_security_policy.rb

@@ -12,6 +12,7 @@
   policy.img_src :self, :https, :data
   policy.object_src :none
   policy.script_src :self, :https
+  policy.worker_src :self, :blob
 
   # allow styling for the Turbo progress bar
   policy.style_src("'sha256-WAyOw4V+FqDc35lQPyRADLBWbuNK8ahvYEaQIYF1+Ps='", :self, :https)

package.json

@@ -14,6 +14,7 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.11.1",
+    "@maptiler/leaflet-maptilersdk": "^2.0.0",
     "esbuild": "^0.24.0",
     "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.0.0",

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