feat: support Mapbox satellite styles

.env.example

@@ -1,3 +1,4 @@
 VITE_APP_OS_VECTOR_TILES_API_KEY=👻
 VITE_APP_OS_FEATURES_API_KEY=👻
 VITE_APP_OS_PLACES_API_KEY=👻
+VITE_APP_MAPBOX_ACCESS_TOKEN=👻

README.md

@@ -29,6 +29,24 @@ These web components can be used independently or together following GOV.UK's [A
 
 Find these components in the wild, including what we're learning through public beta user-testing, at [https://www.ripa.digital/](https://www.ripa.digital/).
 
+## Bring your own API keys
+
+Different features rely on different APIs - namely from Ordnance Survey and Mapbox. 
+
+Address autocomplete utilises OS Places API.
+
+For the map:
+- We'll attempt to render the map using the OS Vector Tiles API
+  - You can pass `disableVectorTiles` to render a raster basemap instead which uses the default OS Maps API
+  - If you don't have an OS API key at all, it defaults to OpenStreetMap
+- `clickFeatures` requires the OS Features API
+- `applySatelliteStyle` requires a Mapbox Access Token with the scope `style:read`
+
+When using Ordnance Survey APIs:
+- Update the `osCopyright` attribution with your license number
+- Configure `osProxyEndpoint` to avoid exposing your keys
+  - ** We are not currently supporting a similar proxy for Mapbox because access tokens can be restricted to specific URLs via your account
+
 ## Running locally
 
 - Rename `.env.example` to `.env.local` and replace the values - or simply provide your API keys as props

index.html

@@ -44,7 +44,7 @@
     <h1 style="color:red;font-size:16px;">*** This is a testing sandbox - these components are unaware of each other!
       ***</h1>
     <div style="margin-bottom:1em">
-      <my-map zoom="20" maxZoom="23" id="example-map" drawMode drawMany drawType="Polygon" useScaleBarStyle showScale showNorthArrow showPrint
+      <my-map zoom="20" maxZoom="23" id="example-map" drawMode drawMany drawType="Polygon" applySatelliteStyle useScaleBarStyle showScale showNorthArrow showPrint
         osProxyEndpoint="https://api.editor.planx.dev/proxy/ordnance-survey" ariaLabelOlFixedOverlay="Interactive example map" />
     </div>
     <div style="margin-bottom:1em">

src/components/my-map/index.ts

@@ -1,5 +1,6 @@
 import { html, LitElement, unsafeCSS } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import apply from "ol-mapbox-style";
 import { defaults as defaultControls, ScaleLine } from "ol/control";
 import { GeoJSON } from "ol/format";
 import { GeoJSONFeature } from "ol/format/GeoJSON";
@@ -191,6 +192,12 @@ export class MyMap extends LitElement {
   @property({ type: String })
   osProxyEndpoint = "";
 
+  @property({ type: Boolean })
+  applySatelliteStyle = false;
+
+  @property({ type: String })
+  mapboxAccessToken = import.meta.env.VITE_APP_MAPBOX_ACCESS_TOKEN || "";
+
   @property({ type: Boolean })
   hideResetControl = false;
 
@@ -308,6 +315,23 @@ export class MyMap extends LitElement {
 
     this.map = map;
 
+    if (this.mapboxAccessToken && this.applySatelliteStyle) {
+      if (osVectorTileBaseMap) map.removeLayer(osVectorTileBaseMap);
+      if (rasterBaseMap) map.removeLayer(rasterBaseMap);
+
+      apply(
+        map,
+        `https://api.mapbox.com/styles/v1/mapbox/satellite-v9?access_token=${this.mapboxAccessToken}`,
+      );
+
+      const satelliteAttribution =
+        '<a href="https://www.mapbox.com/about/maps/" target="_blank" rel="noopener noreferrer">© Mapbox</a> <a href="http://www.openstreetmap.org/about/" target="_blank" rel="noopener noreferrer">© OpenStreetMap</a> <a href="https://labs.mapbox.com/contribute/#/-74@site/src/10" target="_blank" rel="noopener noreferrer"><strong>Improve this map</strong></a>';
+      const satelliteLayer = new VectorLayer({
+        source: new VectorSource({ attributions: satelliteAttribution }), // empty besides attribution
+      });
+      map.addLayer(satelliteLayer);
+    }
+
     // Append to global window for reference in tests
     window.olMap = import.meta.env.VITEST ? this.map : undefined;
 

src/vite-env.d.ts

@@ -4,6 +4,7 @@ interface ImportMetaEnv {
   VITE_APP_OS_VECTOR_TILES_API_KEY: string;
   VITE_APP_OS_FEATURES_API_KEY: string;
   VITE_APP_OS_PLACES_API_KEY: string;
+  VITE_APP_MAPBOX_ACCESS_TOKEN: string;
 }
 
 declare module "ol-mapbox-style/dist/stylefunction";