Micosite updated with OS basemaps

.github/workflows/deploy-docs.yml

@@ -46,6 +46,8 @@ jobs:
 
       - name: Build Docusaurus + LikeC4
         run: npm run docs:build:all
+        env:
+          OS_API_KEY: ${{ secrets.OS_API_KEY }}
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3

demo/DemoMapBasic.js

@@ -1,14 +1,16 @@
 import { useEffect, useRef } from 'react'
 import BrowserOnly from '@docusaurus/BrowserOnly'
+import { OS_VTS_STYLE_URLS, OS_ATTRIBUTION, useOsTransformRequest } from './osMapStyle.js'
 
 const MAP_STYLE = {
-  url: 'https://labs.os.uk/tiles/styles/open-zoomstack-outdoor/style.json',
-  attribution: `Contains OS data © Crown copyright and database rights ${new Date().getFullYear()}`,
+  url: OS_VTS_STYLE_URLS.outdoor,
+  attribution: OS_ATTRIBUTION,
   backgroundColor: '#f5f5f0'
 }
 
 function MapInner () {
   const initialised = useRef(false)
+  const transformRequest = useOsTransformRequest()
 
   useEffect(() => {
     if (initialised.current) {
@@ -28,6 +30,7 @@ function MapInner () {
         behaviour: 'inline',
         mapProvider: maplibreProvider(),
         mapStyle: MAP_STYLE,
+        transformRequest,
         center: [-2.9631008,54.432306],
         zoom: 15,
         containerHeight: '516px'

demo/DemoMapButton.js

@@ -1,16 +1,18 @@
 import { useEffect, useRef } from 'react'
 import BrowserOnly from '@docusaurus/BrowserOnly'
+import { OS_VTS_STYLE_URLS, OS_ATTRIBUTION, useOsTransformRequest } from './osMapStyle.js'
 
 const CENTER = [-2.9631008, 54.432306]
 
 const MAP_STYLE = {
-  url: 'https://labs.os.uk/tiles/styles/open-zoomstack-outdoor/style.json',
-  attribution: `Contains OS data © Crown copyright and database rights ${new Date().getFullYear()}`,
+  url: OS_VTS_STYLE_URLS.outdoor,
+  attribution: OS_ATTRIBUTION,
   backgroundColor: '#f5f5f0'
 }
 
 function MapInner () {
   const initialised = useRef(false)
+  const transformRequest = useOsTransformRequest()
 
   useEffect(() => {
     if (!initialised.current) {
@@ -28,6 +30,7 @@ function MapInner () {
           behaviour: 'buttonFirst',
           mapProvider: maplibreProvider(),
           mapStyle: MAP_STYLE,
+          transformRequest,
           center: CENTER,
           zoom: 15,
           hasExitButton: true

demo/DemoMapDrawTools.js

@@ -1,10 +1,11 @@
 import { useEffect, useRef } from 'react'
 import BrowserOnly from '@docusaurus/BrowserOnly'
+import { OS_VTS_STYLE_URLS, OS_ATTRIBUTION, useOsTransformRequest } from './osMapStyle.js'
 
 const MAP_STYLE = {
   id: 'outdoor',
-  url: 'https://labs.os.uk/tiles/styles/open-zoomstack-outdoor/style.json',
-  attribution: `Contains OS data © Crown copyright and database rights ${new Date().getFullYear()}`,
+  url: OS_VTS_STYLE_URLS.outdoor,
+  attribution: OS_ATTRIBUTION,
   backgroundColor: '#f5f5f0'
 }
 
@@ -16,6 +17,7 @@ const ICON_DELETE = '<path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2
 
 function MapInner () {
   const initialised = useRef(false)
+  const transformRequest = useOsTransformRequest()
 
   useEffect(() => {
     if (initialised.current) {
@@ -44,16 +46,18 @@ function MapInner () {
         deselectOnClickOutside: true
       })
 
+      // Open VTS style has no 3D buildings layer — snap to woodland polygons instead
       const drawPlugin = createDrawPlugin({
-        snapLayers: ['buildings 3D']
+        snapLayers: ['OS/Woodland:3/Local/1']
       })
 
       const interactiveMap = new InteractiveMap('demo-map-draw', {
         behaviour: 'hybrid',
         mapProvider: maplibreProvider(),
         mapStyle: MAP_STYLE,
-        center: [-0.1276, 51.5074],
-        zoom: 12,
+        transformRequest,
+        center: [-2.9631008, 54.432306],
+        zoom: 15,
         containerHeight: '516px',
         plugins: [interactPlugin, drawPlugin],
         hasExitButton: true

demo/DemoMapMarkerPanel.js

@@ -1,9 +1,10 @@
 import { useEffect, useRef } from 'react'
 import BrowserOnly from '@docusaurus/BrowserOnly'
+import { OS_VTS_STYLE_URLS, OS_ATTRIBUTION, useOsTransformRequest } from './osMapStyle.js'
 
 const MAP_STYLE = {
-  url: 'https://labs.os.uk/tiles/styles/open-zoomstack-outdoor/style.json',
-  attribution: `Contains OS data © Crown copyright and database rights ${new Date().getFullYear()}`,
+  url: OS_VTS_STYLE_URLS.outdoor,
+  attribution: OS_ATTRIBUTION,
   backgroundColor: '#f5f5f0'
 }
 
@@ -13,6 +14,7 @@ const PANEL_ID = 'marker-info'
 
 function MapInner () {
   const initialised = useRef(false)
+  const transformRequest = useOsTransformRequest()
 
   useEffect(() => {
     if (initialised.current) {
@@ -37,6 +39,7 @@ function MapInner () {
         behaviour: 'inline',
         mapProvider: maplibreProvider(),
         mapStyle: MAP_STYLE,
+        transformRequest,
         center: MARKER_COORDS,
         zoom: 15,
         containerHeight: '516px',

demo/DemoMapPlaceMarker.js

@@ -1,17 +1,19 @@
 import { useEffect, useRef, useState } from 'react'
 import BrowserOnly from '@docusaurus/BrowserOnly'
+import { OS_VTS_STYLE_URLS, OS_ATTRIBUTION, useOsTransformRequest } from './osMapStyle.js'
 
-const CENTER = [-0.1276, 51.5074]
-const ZOOM = 12
+const CENTER = [-2.9631008, 54.432306]
+const ZOOM = 15
 
 const MAP_STYLE = {
-  url: 'https://labs.os.uk/tiles/styles/open-zoomstack-outdoor/style.json',
-  attribution: `Contains OS data © Crown copyright and database rights ${new Date().getFullYear()}`,
+  url: OS_VTS_STYLE_URLS.outdoor,
+  attribution: OS_ATTRIBUTION,
   backgroundColor: '#f5f5f0'
 }
 
 function MapInner () {
   const initialised = useRef(false)
+  const transformRequest = useOsTransformRequest()
   const [mapReady, setMapReady] = useState(false)
   const [isInline, setIsInline] = useState(false)
   const [markerCoords, setMarkerCoords] = useState(null)
@@ -39,6 +41,7 @@ function MapInner () {
         behaviour: 'hybrid',
         mapProvider: maplibreProvider(),
         mapStyle: MAP_STYLE,
+        transformRequest,
         center: CENTER,
         zoom: ZOOM,
         containerHeight: '516px',

demo/DemoMapPolygons.js

@@ -1,50 +1,52 @@
 import { useEffect, useRef } from 'react'
 import BrowserOnly from '@docusaurus/BrowserOnly'
+import { OS_VTS_STYLE_URLS, OS_ATTRIBUTION, useOsTransformRequest } from './osMapStyle.js'
 
 const MAP_STYLE = {
   id: 'outdoor',
-  url: 'https://labs.os.uk/tiles/styles/open-zoomstack-outdoor/style.json',
-  attribution: `Contains OS data © Crown copyright and database rights ${new Date().getFullYear()}`,
+  url: OS_VTS_STYLE_URLS.outdoor,
+  attribution: OS_ATTRIBUTION,
   backgroundColor: '#f5f5f0'
 }
 
 // GeoJSON can also be loaded from a URL; use the tiles property for vector tile sources
-const geojson = {
+// Exported for reuse by DemoMapSelectFeature.js (same field parcels, plain styling)
+export const geojson = {
   type: 'FeatureCollection',
   features: [{
     type: 'Feature',
     id: 1,
-    properties: { name: 'Feature 1', land_use: 'Permanent grassland' },
+    properties: { name: 'Bottom meadow', land_use: 'Permanent grassland' },
     geometry: { type: 'Polygon', coordinates: [[[-2.4691585,54.5552164],[-2.4692202,54.5553906],[-2.4690646,54.5554155],[-2.4690002,54.5555088],[-2.4690297,54.5556690],[-2.4690995,54.5557919],[-2.4669269,54.5566971],[-2.4662375,54.5562819],[-2.4637780,54.5574391],[-2.4628580,54.5568169],[-2.4607612,54.5560985],[-2.4608248,54.5560719],[-2.4611789,54.5558914],[-2.4613774,54.5558168],[-2.4615973,54.5557577],[-2.4617475,54.5557297],[-2.4618816,54.5556519],[-2.4620104,54.5556115],[-2.4624771,54.5555275],[-2.4627131,54.5555150],[-2.4628741,54.5554839],[-2.4630082,54.5554404],[-2.4632335,54.5553346],[-2.4633944,54.5552164],[-2.4634749,54.5551106],[-2.4635178,54.5550235],[-2.4635285,54.5548213],[-2.4635768,54.5546346],[-2.4635875,54.5544884],[-2.4636090,54.5544075],[-2.4636465,54.5543515],[-2.4636573,54.5542769],[-2.4636358,54.5541804],[-2.4637377,54.5540155],[-2.4639094,54.5538724],[-2.4643493,54.5535831],[-2.4645370,54.5535084],[-2.4647141,54.5534804],[-2.4648052,54.5534836],[-2.4648213,54.5535116],[-2.4648750,54.5535396],[-2.4650842,54.5535893],[-2.4652451,54.5536516],[-2.4652719,54.5536796],[-2.4653900,54.5537355],[-2.4655455,54.5537853],[-2.4658459,54.5539502],[-2.4663556,54.5542738],[-2.4668008,54.5545164],[-2.4668330,54.5545506],[-2.4668437,54.5546782],[-2.4668598,54.5547031],[-2.4670798,54.5548306],[-2.4671817,54.5549053],[-2.4674177,54.5549364],[-2.4677664,54.5550484],[-2.4681956,54.5551448],[-2.4684101,54.5551759],[-2.4691129,54.5552195],[-2.4691585,54.5552164]]]}
   },{
     type: 'Feature',
     id: 2,
-    properties: { name: 'Feature 2', land_use: 'Arable' },
+    properties: { name: 'Stoney Flatt', land_use: 'Arable' },
     geometry: { type: 'Polygon', coordinates: [[[-2.4611682,54.5562375],[-2.4628580,54.5568161],[-2.4636841,54.5573753],[-2.4637793,54.5574398],[-2.4641401,54.5576751],[-2.4642567,54.5577999],[-2.4641307,54.5578823],[-2.4636841,54.5582502],[-2.4624221,54.5592884],[-2.4623376,54.5592534],[-2.4615370,54.5586429],[-2.4611869,54.5582852],[-2.4605258,54.5581071],[-2.4598472,54.5578186],[-2.4611682,54.5562375]]]}
   },{
     type: 'Feature',
     id: 3,
-    properties: { name: 'Feature 3', land_use: 'Arable' },
+    properties: { name: 'Small hay field', land_use: 'Arable' },
     geometry: { type: 'Polygon', coordinates: [[[-2.4598472,54.5578186],[-2.4605258,54.5581067],[-2.4611869,54.5582852],[-2.4615376,54.5586433],[-2.4623108,54.5592332],[-2.4623376,54.5592534],[-2.4624221,54.5592884],[-2.4623108,54.5594120],[-2.4616731,54.5601189],[-2.4586053,54.5601189],[-2.4584410,54.5600299],[-2.4580038,54.5596574],[-2.4581815,54.5593953],[-2.4585778,54.5590702],[-2.4587287,54.5589353],[-2.4589198,54.5586736],[-2.4591116,54.5582136],[-2.4598472,54.5578186]]]}
   },{
     type: 'Feature',
     id: 4,
-    properties: { name: 'Feature 4', land_use: 'Permanent grassland' },
+    properties: { name: 'The pasture', land_use: 'Permanent grassland' },
     geometry: { type: 'Polygon', coordinates: [[[-2.4633756,54.5612877],[-2.4613908,54.5604315],[-2.4624221,54.5592884],[-2.4641307,54.5578823],[-2.4642567,54.5577999],[-2.4653631,54.5591733],[-2.4659613,54.5597013],[-2.4633756,54.5612877]]]}
   },{
     type: 'Feature',
     id: 5,
-    properties: { name: 'Feature 5', land_use: 'Arable' },
+    properties: { name: 'Brake Field', land_use: 'Arable' },
     geometry: { type: 'Polygon', coordinates: [[[-2.4678040,54.5590679],[-2.4661879,54.5595952],[-2.4659613,54.5597013],[-2.4653638,54.5591737],[-2.4642567,54.5577999],[-2.4641401,54.5576751],[-2.4637793,54.5574398],[-2.4662369,54.5562822],[-2.4669282,54.5566975],[-2.4678040,54.5563320],[-2.4678040,54.5590679]]]}
   },{
     type: 'Feature',
     id: 6,
-    properties: { name: 'Feature 6', land_use: 'Permanent grassland' },
+    properties: { name: "Herdwick Croft", land_use: 'Permanent grassland' },
     geometry: { type: 'Polygon', coordinates: [[[-2.4669316,54.5603767],[-2.4676430,54.5613102],[-2.4673292,54.5614556],[-2.4671616,54.5617468],[-2.4658446,54.5625528],[-2.4651546,54.5621528],[-2.4639215,54.5633040],[-2.4633146,54.5633040],[-2.4628372,54.5630921],[-2.4631195,54.5628195],[-2.4643741,54.5618374],[-2.4665071,54.5604793],[-2.4667056,54.5604187],[-2.4669316,54.5603767]]]}
   },{
     type: 'Feature',
     id: 7,
-    properties: { name: 'Feature 7', land_use: 'Woodland' },
+    properties: { name: 'Badger Sett Copse', land_use: 'Woodland' },
     geometry: { type: 'Polygon', coordinates: [[[-2.4599129,54.5564203],[-2.4599773,54.5565478],[-2.4599773,54.5565852],[-2.4599344,54.5566256],[-2.4596876,54.5566069],[-2.4594945,54.5566132],[-2.4593657,54.5566505],[-2.4592584,54.5567158],[-2.4592048,54.5567780],[-2.4591780,54.5568496],[-2.4591887,54.5569616],[-2.4591297,54.5570829],[-2.4590009,54.5572726],[-2.4589419,54.5573162],[-2.4588561,54.5574686],[-2.4587435,54.5575588],[-2.4586684,54.5575837],[-2.4585879,54.5575962],[-2.4584001,54.5575837],[-2.4583304,54.5575899],[-2.4580836,54.5576397],[-2.4579817,54.5576895],[-2.4579227,54.5576988],[-2.4578154,54.5576988],[-2.4576384,54.5576739],[-2.4574614,54.5576739],[-2.4573044,54.5577050],[-2.4563093,54.5573092],[-2.4563871,54.5569849],[-2.4564891,54.5560664],[-2.4565601,54.5559039],[-2.4567747,54.5559412],[-2.4571985,54.5559817],[-2.4573219,54.5560097],[-2.4576116,54.5560936],[-2.4582446,54.5562181],[-2.4584913,54.5562959],[-2.4590331,54.5563705],[-2.4599129,54.5564203]]]}
   }]
 }
@@ -92,6 +94,7 @@ const parcelsDataset = {
 
 function MapInner () {
   const initialised = useRef(false)
+  const transformRequest = useOsTransformRequest()
 
   useEffect(() => {
     if (initialised.current) {
@@ -116,7 +119,8 @@ function MapInner () {
         behaviour: 'inline',
         mapProvider: maplibreProvider(),
         mapStyle: MAP_STYLE,
-        center: [-2.464, 54.558],
+        transformRequest,
+        center: [-2.464,54.5585475],
         zoom: 14,
         containerHeight: '516px',
         plugins: [datasetsPlugin]

demo/DemoMapSearch.js

@@ -0,0 +1,61 @@
+import { useEffect, useRef } from 'react'
+import BrowserOnly from '@docusaurus/BrowserOnly'
+import { OS_VTS_STYLE_URLS, OS_ATTRIBUTION, OS_NAMES_URL, useOsTransformRequest, useOsGeocodeTransformRequest } from './osMapStyle.js'
+
+const MAP_STYLE = {
+  url: OS_VTS_STYLE_URLS.outdoor,
+  attribution: OS_ATTRIBUTION,
+  backgroundColor: '#f5f5f0'
+}
+
+function MapInner () {
+  const initialised = useRef(false)
+  const transformRequest = useOsTransformRequest()
+  const geocodeTransformRequest = useOsGeocodeTransformRequest()
+
+  useEffect(() => {
+    if (initialised.current) {
+      return
+    }
+    initialised.current = true
+
+    Promise.all([
+      import('../src/index.js'),
+      import('../providers/maplibre/src/index.js'),
+      import('../plugins/search/src/index.js')
+    ]).then(([
+      { default: InteractiveMap },
+      { default: maplibreProvider },
+      { default: createSearchPlugin }
+    ]) => {
+      const searchPlugin = createSearchPlugin({
+        osNamesURL: OS_NAMES_URL,
+        transformRequest: geocodeTransformRequest,
+        width: '300px'
+      })
+
+      new InteractiveMap('demo-map-search', {
+        behaviour: 'inline',
+        mapProvider: maplibreProvider(),
+        mapStyle: MAP_STYLE,
+        transformRequest,
+        center: [-2.9631008, 54.432306],
+        zoom: 6,
+        containerHeight: '516px',
+        plugins: [searchPlugin]
+      })
+    })
+  }, [])
+
+  return <div id='demo-map-search' className='app-no-prose app-example'></div>
+}
+
+export default function DemoMapSearch () {
+  return (
+    <BrowserOnly
+      fallback={<div className='govuk-inset-text'>The map requires JavaScript to be enabled.</div>}
+    >
+      {() => <MapInner />}
+    </BrowserOnly>
+  )
+}