@defra/interactive-map 0.0.31-alpha → 0.0.32-alpha

package/docs/examples/add-symbols.mdx

@@ -0,0 +1,177 @@
+import DemoMapSymbols from '../../demo/DemoMapSymbols.js'
+import CodeTabs from '../../demo/js/codeTabs.js'
+
+# Add symbols
+
+Use the datasets plugin to overlay GeoJSON data on your map. Each dataset can contain sublayers with independent filters and styles. This example shows historic monument points categorised by period, each styled with a distinct symbol and colour.
+
+<DemoMapSymbols />
+
+<CodeTabs tabs={[
+  {
+    label: 'ESM',
+    language: 'js',
+    code: `
+      import InteractiveMap from '@defra/interactive-map'
+      import maplibreProvider from '@defra/interactive-map/providers/maplibre'
+      import createDatasetsPlugin from '@defra/interactive-map/plugins/datasets'
+
+      const symbolGraphic = 'M3 15H1V1h2v2h2V1h2v5h2V4h2v2h2V4h2v11H6V9H3v6z'
+
+      // GeoJSON can also be loaded from a URL; use the tiles property for vector tile sources
+      const geojson = {
+        type: 'FeatureCollection',
+        features: [{
+          type: 'Feature',
+          properties: { category: 'prehistoric', name: 'Prehistoric feature' },
+          geometry: { type: 'Point', coordinates: [-2.4615, 54.5616] }
+        }, {
+          type: 'Feature',
+          properties: { category: 'roman', name: 'Roman feature' },
+          geometry: { type: 'Point', coordinates: [-2.4628, 54.5541] }
+        }, {
+          type: 'Feature',
+          properties: { category: 'medieval', name: 'Medieval feature' },
+          geometry: { type: 'Point', coordinates: [-2.4578, 54.5569] }
+        }]
+      }
+
+      const datasetsPlugin = createDatasetsPlugin({
+        datasets: [{
+          id: 'historic-monuments',
+          label: 'Historic monuments',
+          geojson: geojson,
+          minZoom: 10,
+          maxZoom: 24,
+          showInKey: true,
+          showInMenu: true,
+          sublayers: [{
+            id: 'prehistoric',
+            label: 'Prehistoric',
+            filter: ['in', ['get', 'category'], 'prehistoric'],
+            style: {
+              symbol: 'square',
+              symbolGraphic,
+              symbolBackgroundColor: '#00897B'
+            }
+          }, {
+            id: 'roman',
+            label: 'Roman',
+            filter: ['in', ['get', 'category'], 'roman'],
+            style: {
+              symbol: 'square',
+              symbolGraphic,
+              symbolBackgroundColor: '#ca3535'
+            }
+          }, {
+            id: 'medieval',
+            label: 'Medieval',
+            filter: ['in', ['get', 'category'], 'medieval'],
+            style: {
+              symbol: 'square',
+              symbolGraphic,
+              symbolBackgroundColor: '#1565C0'
+            }
+          }]
+        }]
+      })
+
+      new InteractiveMap('my-map', {
+        behaviour: 'inline',
+        mapProvider: maplibreProvider(),
+        mapStyle: {
+          url: 'https://your-tile-url/style.json',
+          attribution: 'Your tile attribution'
+        },
+        center: [-2.4608, 54.5574],
+        zoom: 14,
+        containerHeight: '516px',
+        plugins: [datasetsPlugin]
+      })
+    `
+  },
+  {
+    label: 'UMD',
+    language: 'html',
+    code: `
+      <script src="/your-assets-path/interactive-map/index.js"></script>
+      <script src="/your-assets-path/maplibre-provider/index.js"></script>
+      <script src="/your-assets-path/datasets-plugin/index.js"></script>
+
+      <script>
+      const symbolGraphic = 'M3 15H1V1h2v2h2V1h2v5h2V4h2v2h2V4h2v11H6V9H3v6z'
+
+      // GeoJSON can also be loaded from a URL; use the tiles property for vector tile sources
+      const geojson = {
+        type: 'FeatureCollection',
+        features: [{
+          type: 'Feature',
+          properties: { category: 'prehistoric', name: 'Prehistoric feature' },
+          geometry: { type: 'Point', coordinates: [-2.4615, 54.5616] }
+        }, {
+          type: 'Feature',
+          properties: { category: 'roman', name: 'Roman feature' },
+          geometry: { type: 'Point', coordinates: [-2.4628, 54.5541] }
+        }, {
+          type: 'Feature',
+          properties: { category: 'medieval', name: 'Medieval feature' },
+          geometry: { type: 'Point', coordinates: [-2.4578, 54.5569] }
+        }]
+      }
+
+      const datasetsPlugin = defra.datasetsPlugin({
+        datasets: [{
+          id: 'historic-monuments',
+          label: 'Historic monuments',
+          geojson: geojson,
+          minZoom: 10,
+          maxZoom: 24,
+          showInKey: true,
+          showInMenu: true,
+          sublayers: [{
+            id: 'prehistoric',
+            label: 'Prehistoric',
+            filter: ['in', ['get', 'category'], 'prehistoric'],
+            style: {
+              symbol: 'square',
+              symbolGraphic,
+              symbolBackgroundColor: '#00897B'
+            }
+          }, {
+            id: 'roman',
+            label: 'Roman',
+            filter: ['in', ['get', 'category'], 'roman'],
+            style: {
+              symbol: 'square',
+              symbolGraphic,
+              symbolBackgroundColor: '#ca3535'
+            }
+          }, {
+            id: 'medieval',
+            label: 'Medieval',
+            filter: ['in', ['get', 'category'], 'medieval'],
+            style: {
+              symbol: 'square',
+              symbolGraphic,
+              symbolBackgroundColor: '#1565C0'
+            }
+          }]
+        }]
+      })
+
+      new defra.InteractiveMap('my-map', {
+        behaviour: 'inline',
+        mapProvider: defra.maplibreProvider(),
+        mapStyle: {
+          url: 'https://your-tile-url/style.json',
+          attribution: 'Your tile attribution'
+        },
+        center: [-2.4608, 54.5574],
+        zoom: 14,
+        containerHeight: '516px',
+        plugins: [datasetsPlugin]
+      })
+      </script>
+    `
+  }
+]} />

package/docs/examples/{draw.mdx → draw-tools.mdx}

@@ -1,4 +1,4 @@
-import DemoMapDraw from '../../demo/DemoMapDraw.js'
+import DemoMapDrawTools from '../../demo/DemoMapDrawTools.js'
 import CodeTabs from '../../demo/js/codeTabs.js'
 
 # Draw tools
@@ -9,7 +9,7 @@ Draw, edit, select and delete polygons and lines using the draw and interact plu
 The draw plugin (`draw-ml`) is currently in beta.
 :::
 
-<DemoMapDraw />
+<DemoMapDrawTools />
 
 <CodeTabs tabs={[
   {

package/docs/examples/index.mdx

@@ -2,11 +2,14 @@ import useBaseUrl from '@docusaurus/useBaseUrl'
 import basicMapImg from '../assets/images/basic-map.jpg'
 import buttonFirstImg from '../assets/images/button-first.jpg'
 import markerPanelImg from '../assets/images/marker-panel.jpg'
+import placeMarkerImg from '../assets/images/place-marker.jpg'
 import toggleMarkerLabelImg from '../assets/images/toggle-marker-label.jpg'
 import searchImg from '../assets/images/search.jpg'
 import selectFeatureImg from '../assets/images/select-feature.jpg'
 import styleSwitcherImg from '../assets/images/style-switcher.jpg'
 import drawImg from '../assets/images/draw.jpg'
+import addSymbolsImg from '../assets/images/add-symbols.jpg'
+import addPolygonsImg from '../assets/images/add-polygons.jpg'
 
 export function ExampleCards() {
   const basicHref = useBaseUrl('/examples/basic-map')
@@ -16,7 +19,10 @@ export function ExampleCards() {
   const searchControlHref = useBaseUrl('/examples/search-control')
   const selectFeatureHref = useBaseUrl('/examples/select-feature')
   const styleSwitcherHref = useBaseUrl('/examples/style-switcher')
-  const drawHref = useBaseUrl('/examples/draw')
+  const drawHref = useBaseUrl('/examples/draw-tools')
+  const placeMarkerHref = useBaseUrl('/examples/place-marker')
+  const datasetsHref = useBaseUrl('/examples/add-symbols')
+  const polygonsHref = useBaseUrl('/examples/add-polygons')
 
   return (
     <div className='govuk-grid-row app-example-cards'>
@@ -45,7 +51,7 @@ export function ExampleCards() {
           <img src={markerPanelImg} alt='' />
           <div className='app-example-card__body'>
             <h2 className='govuk-heading-s'>
-              <a href={interactHref}>Add a marker with a panel</a>
+              <a href={interactHref}>Map with marker and panel</a>
             </h2>
           </div>
         </div>
@@ -60,6 +66,16 @@ export function ExampleCards() {
           </div>
         </div>
       </div>
+      <div className='govuk-grid-column-one-third'>
+        <div className='app-example-card'>
+          <img src={placeMarkerImg} alt='' />
+          <div className='app-example-card__body'>
+            <h2 className='govuk-heading-s'>
+              <a href={placeMarkerHref}>Place a marker to continue</a>
+            </h2>
+          </div>
+        </div>
+      </div>
       <div className='govuk-grid-column-one-third'>
         <div className='app-example-card'>
           <img src={searchImg} alt='' />
@@ -100,6 +116,26 @@ export function ExampleCards() {
           </div>
         </div>
       </div>
+      <div className='govuk-grid-column-one-third'>
+        <div className='app-example-card'>
+          <img src={addSymbolsImg} alt='' />
+          <div className='app-example-card__body'>
+            <h2 className='govuk-heading-s'>
+              <a href={datasetsHref}>Add symbols</a>
+            </h2>
+          </div>
+        </div>
+      </div>
+      <div className='govuk-grid-column-one-third'>
+        <div className='app-example-card'>
+          <img src={addPolygonsImg} alt='' />
+          <div className='app-example-card__body'>
+            <h2 className='govuk-heading-s'>
+              <a href={polygonsHref}>Add polygons</a>
+            </h2>
+          </div>
+        </div>
+      </div>
     </div>
   )
 }

package/docs/examples/place-marker.mdx

@@ -0,0 +1,151 @@
+import DemoMapPlaceMarker from '../../demo/DemoMapPlaceMarker.js'
+import CodeTabs from '../../demo/js/codeTabs.js'
+
+# Place a marker to continue
+
+Use the interact plugin's `placeMarker` mode to let users drop a location pin on the map before continuing a journey.
+
+Two patterns work together in this example:
+
+- **Hybrid behaviour with built-in back and continue** — on mobile the map opens fullscreen and the `backAndContinue` option renders Back and Continue buttons inside the map. The Continue button is enabled declaratively via `continueEnabledWhen` once a marker has been placed.
+- **External Continue button for inline** — when the map is inline (tablet/desktop), a Continue button sits outside the map container. It uses `app:opened`, `app:closed`, and `app:fullscreenchange` to show and hide in sync with the map's display mode, and `interact:markerchange` to enable once a marker is placed.
+
+<DemoMapPlaceMarker />
+
+<CodeTabs tabs={[
+  {
+    label: 'ESM',
+    language: 'js',
+    code: `
+      import InteractiveMap from '@defra/interactive-map'
+      import maplibreProvider from '@defra/interactive-map/providers/maplibre'
+      import createInteractPlugin from '@defra/interactive-map/plugins/interact'
+
+      const interactPlugin = createInteractPlugin({
+        interactionModes: ['placeMarker']
+      })
+
+      const map = new InteractiveMap('my-map', {
+        behaviour: 'hybrid',
+        mapProvider: maplibreProvider(),
+        mapStyle: {
+          url: 'https://your-tile-url/style.json',
+          attribution: 'Your tile attribution'
+        },
+        center: [-0.1276, 51.5074],
+        zoom: 12,
+        containerHeight: '516px',
+        plugins: [interactPlugin],
+        // Back and Continue buttons shown inside the map when fullscreen (mobile)
+        backAndContinue: {
+          backLabel: 'Back',
+          continueLabel: 'Continue',
+          continueEnabledWhen: ({ mapState }) =>
+            mapState.markers.items.some(m => m.id === 'location')
+        }
+      })
+
+      map.on('map:ready', () => {
+        interactPlugin.enable()
+      })
+
+      // Fired when the built-in Continue button is clicked (mobile/fullscreen)
+      map.on('app:continue', ({ mapState }) => {
+        const marker = mapState.markers.items.find(m => m.id === 'location')
+        // navigate to next step with marker.coords
+      })
+
+      // --- External Continue button for inline (tablet/desktop) ---
+
+      const continueBtn = document.getElementById('continue-btn')
+      const externalButtons = document.getElementById('external-buttons')
+
+      // Show/hide external buttons based on whether the map is inline or fullscreen.
+      // app:opened fires on first load and when the map is shown after being hidden.
+      // app:fullscreenchange fires when the viewport resizes while the map is already visible.
+      const setInline = (isFullscreen) => {
+        externalButtons.hidden = isFullscreen
+      }
+
+      map.on('app:opened', ({ isFullscreen }) => { setInline(isFullscreen) })
+      map.on('app:closed', () => { externalButtons.hidden = true })
+      map.on('app:fullscreenchange', ({ isFullscreen }) => { setInline(isFullscreen) })
+
+      map.on('interact:markerchange', () => {
+        continueBtn.disabled = false
+      })
+
+      continueBtn.addEventListener('click', () => {
+        // navigate to next step
+      })
+    `
+  },
+  {
+    label: 'UMD',
+    language: 'html',
+    code: `
+      <script src="/your-assets-path/interactive-map/index.js"></script>
+      <script src="/your-assets-path/maplibre-provider/index.js"></script>
+      <script src="/your-assets-path/interact-plugin/index.js"></script>
+
+      <div id="my-map"></div>
+      <div id="external-buttons" hidden>
+        <button class="govuk-button" id="continue-btn" disabled>Continue</button>
+      </div>
+
+      <script>
+      var interactPlugin = defra.interactPlugin({
+        interactionModes: ['placeMarker']
+      })
+
+      var map = new defra.InteractiveMap('my-map', {
+        behaviour: 'hybrid',
+        mapProvider: defra.maplibreProvider(),
+        mapStyle: {
+          url: 'https://your-tile-url/style.json',
+          attribution: 'Your tile attribution'
+        },
+        center: [-0.1276, 51.5074],
+        zoom: 12,
+        containerHeight: '516px',
+        plugins: [interactPlugin],
+        backAndContinue: {
+          backLabel: 'Back',
+          continueLabel: 'Continue',
+          continueEnabledWhen: function (context) {
+            return context.mapState.markers.items.some(function (m) { return m.id === 'location' })
+          }
+        }
+      })
+
+      map.on('map:ready', function () {
+        interactPlugin.enable()
+      })
+
+      map.on('app:continue', function (context) {
+        var marker = context.mapState.markers.items.find(function (m) { return m.id === 'location' })
+        // navigate to next step with marker.coords
+      })
+
+      var continueBtn = document.getElementById('continue-btn')
+      var externalButtons = document.getElementById('external-buttons')
+
+      function setInline(isFullscreen) {
+        externalButtons.hidden = isFullscreen
+      }
+
+      map.on('app:opened', function (e) { setInline(e.isFullscreen) })
+      map.on('app:closed', function () { externalButtons.hidden = true })
+      map.on('app:fullscreenchange', function (e) { setInline(e.isFullscreen) })
+
+      map.on('interact:markerchange', function () {
+        continueBtn.disabled = false
+      })
+
+      continueBtn.addEventListener('click', function () {
+        // navigate to next step
+      })
+      </script>
+    `
+  }
+]} />