diff --git a/.env.example b/.env.example
index c360dfb4..d7df3f83 100644
--- a/.env.example
+++ b/.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
diff --git a/README.md b/README.md
index f1843c7d..b75ff7f8 100644
--- a/README.md
+++ b/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
 
diff --git a/app/controllers/styled_forecasts_controller.rb b/app/controllers/styled_forecasts_controller.rb
index e9ce4361..8c69ff56 100644
--- a/app/controllers/styled_forecasts_controller.rb
+++ b/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)
diff --git a/app/javascript/maps.js b/app/javascript/maps.js
index 4d0162f2..25f2eb01 100644
--- a/app/javascript/maps.js
+++ b/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);
   }
 });
diff --git a/app/views/styled_forecasts/_forecast_tabs.html.erb b/app/views/styled_forecasts/_forecast_tabs.html.erb
index db9cd0c4..b15ff8ea 100644
--- a/app/views/styled_forecasts/_forecast_tabs.html.erb
+++ b/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>
diff --git a/spec/controllers/styled_forecasts_controller_spec.rb b/spec/controllers/styled_forecasts_controller_spec.rb
index ff9cbd30..39b0079e 100644
--- a/spec/controllers/styled_forecasts_controller_spec.rb
+++ b/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") }
 
diff --git a/spec/features/visitors/view_styled_forecasts_spec.rb b/spec/features/visitors/view_styled_forecasts_spec.rb
index ef456ff4..fc6c0fb6 100644
--- a/spec/features/visitors/view_styled_forecasts_spec.rb
+++ b/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