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

package/docs/examples/draw.mdx

@@ -0,0 +1,271 @@
+import DemoMapDraw from '../../demo/DemoMapDraw.js'
+import CodeTabs from '../../demo/js/codeTabs.js'
+
+# Draw tools
+
+Draw, edit, select and delete polygons and lines using the draw and interact plugins. A single "Draw tools" menu button groups all drawing actions together. The menu items update their enabled state based on whether a drawn feature is selected.
+
+:::note
+The draw plugin (`draw-ml`) is currently in beta.
+:::
+
+<DemoMapDraw />
+
+<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'
+      import createDrawPlugin from '@defra/interactive-map/plugins/draw-ml'
+
+      const DRAW_LAYERS = ['fill-inactive.cold', 'stroke-inactive.cold']
+
+      const interactPlugin = createInteractPlugin({
+        layers: [
+          { layerId: 'fill-inactive.cold', idProperty: 'id' },
+          { layerId: 'stroke-inactive.cold', idProperty: 'id' }
+        ],
+        interactionModes: ['selectFeature'],
+        multiSelect: true,
+        deselectOnClickOutside: true
+      })
+
+      const drawPlugin = createDrawPlugin()
+
+      const interactiveMap = new InteractiveMap('my-map', {
+        behaviour: 'inline',
+        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, drawPlugin]
+      })
+
+      let selectedFeatureIds = []
+
+      interactiveMap.on('map:ready', () => {
+        interactPlugin.enable()
+
+        interactiveMap.addButton('drawTools', {
+          label: 'Draw tools',
+          mobile: { slot: 'bottom-right' },
+          tablet: { slot: 'top-middle' },
+          desktop: { slot: 'top-middle' },
+          menuItems: [
+            {
+              id: 'drawPolygon',
+              label: 'Draw polygon',
+              iconSvgContent: '<path d="M19.5 7v10M4.5 7v10M7 19.5h10M7 4.5h10"/><path d="M22 18v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1zm0-15v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1zM7 18v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1zM7 3v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1z"/>',
+              onClick: () => {
+                interactiveMap.toggleButtonState('drawTools', 'hidden', true)
+                drawPlugin.newPolygon(crypto.randomUUID())
+              }
+            },
+            {
+              id: 'drawLine',
+              label: 'Draw line',
+              iconSvgContent: '<path d="M5.706 16.294L16.294 5.706"/><path d="M21 2v3c0 .549-.451 1-1 1h-3c-.549 0-1-.451-1-1V2c0-.549.451-1 1-1h3c.549 0 1 .451 1 1zM6 17v3c0 .549-.451 1-1 1H2c-.549 0-1-.451-1-1v-3c0-.549.451-1 1-1h3c.549 0 1 .451 1 1z"/>',
+              onClick: () => {
+                interactiveMap.toggleButtonState('drawTools', 'hidden', true)
+                drawPlugin.newLine(crypto.randomUUID())
+              }
+            },
+            {
+              id: 'editFeature',
+              label: 'Edit feature',
+              iconSvgContent: '<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/>',
+              isDisabled: true,
+              onClick: () => {
+                if (!drawPlugin.editFeature(selectedFeatureIds[0])) return
+                interactiveMap.toggleButtonState('drawTools', 'hidden', true)
+                interactPlugin.disable()
+              }
+            },
+            {
+              id: 'deleteFeature',
+              label: 'Delete feature',
+              iconSvgContent: '<path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>',
+              isDisabled: true,
+              onClick: () => {
+                drawPlugin.deleteFeature(selectedFeatureIds)
+                interactPlugin.clear()
+                interactiveMap.toggleButtonState('drawTools', 'hidden', false)
+                interactiveMap.toggleButtonState('drawPolygon', 'disabled', false)
+                interactiveMap.toggleButtonState('drawLine', 'disabled', false)
+                interactiveMap.toggleButtonState('editFeature', 'disabled', true)
+                interactiveMap.toggleButtonState('deleteFeature', 'disabled', true)
+              }
+            }
+          ]
+        })
+      })
+
+      interactiveMap.on('draw:started', () => {
+        interactPlugin.disable()
+      })
+
+      interactiveMap.on('draw:created', () => {
+        interactiveMap.toggleButtonState('drawTools', 'hidden', false)
+        interactPlugin.enable()
+      })
+
+      interactiveMap.on('draw:edited', () => {
+        interactiveMap.toggleButtonState('drawTools', 'hidden', false)
+        interactPlugin.enable()
+      })
+
+      interactiveMap.on('draw:cancelled', () => {
+        interactiveMap.toggleButtonState('drawTools', 'hidden', false)
+        interactPlugin.enable()
+      })
+
+      interactiveMap.on('interact:selectionchange', (e) => {
+        const singleFeature = e.selectedFeatures.length === 1
+        const anyFeature = e.selectedFeatures.length > 0
+        const isDrawFeature = singleFeature && DRAW_LAYERS.includes(e.selectedFeatures[0].layerId)
+        const allDrawFeatures = anyFeature && e.selectedFeatures.every(f => DRAW_LAYERS.includes(f.layerId))
+        selectedFeatureIds = e.selectedFeatures.map(f => f.featureId)
+        interactiveMap.toggleButtonState('drawPolygon', 'disabled', singleFeature)
+        interactiveMap.toggleButtonState('drawLine', 'disabled', singleFeature)
+        interactiveMap.toggleButtonState('editFeature', 'disabled', !isDrawFeature)
+        interactiveMap.toggleButtonState('deleteFeature', 'disabled', !allDrawFeatures)
+      })
+    `
+  },
+  {
+    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>
+      <script src="/your-assets-path/draw-ml-plugin/index.js"></script>
+
+      <script>
+      const DRAW_LAYERS = ['fill-inactive.cold', 'stroke-inactive.cold']
+
+      const interactPlugin = defra.interactPlugin({
+        layers: [
+          { layerId: 'fill-inactive.cold', idProperty: 'id' },
+          { layerId: 'stroke-inactive.cold', idProperty: 'id' }
+        ],
+        interactionModes: ['selectFeature'],
+        multiSelect: true,
+        deselectOnClickOutside: true
+      })
+
+      const drawPlugin = defra.drawMLPlugin()
+
+      const interactiveMap = new defra.InteractiveMap('my-map', {
+        behaviour: 'inline',
+        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, drawPlugin]
+      })
+
+      let selectedFeatureIds = []
+
+      interactiveMap.on('map:ready', function () {
+        interactPlugin.enable()
+
+        interactiveMap.addButton('drawTools', {
+          label: 'Draw tools',
+          mobile: { slot: 'bottom-right' },
+          tablet: { slot: 'top-middle' },
+          desktop: { slot: 'top-middle' },
+          menuItems: [
+            {
+              id: 'drawPolygon',
+              label: 'Draw polygon',
+              iconSvgContent: '<path d="M19.5 7v10M4.5 7v10M7 19.5h10M7 4.5h10"/><path d="M22 18v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1zm0-15v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1zM7 18v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1zM7 3v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1z"/>',
+              onClick: function () {
+                interactiveMap.toggleButtonState('drawTools', 'hidden', true)
+                drawPlugin.newPolygon(crypto.randomUUID())
+              }
+            },
+            {
+              id: 'drawLine',
+              label: 'Draw line',
+              iconSvgContent: '<path d="M5.706 16.294L16.294 5.706"/><path d="M21 2v3c0 .549-.451 1-1 1h-3c-.549 0-1-.451-1-1V2c0-.549.451-1 1-1h3c.549 0 1 .451 1 1zM6 17v3c0 .549-.451 1-1 1H2c-.549 0-1-.451-1-1v-3c0-.549.451-1 1-1h3c.549 0 1 .451 1 1z"/>',
+              onClick: function () {
+                interactiveMap.toggleButtonState('drawTools', 'hidden', true)
+                drawPlugin.newLine(crypto.randomUUID())
+              }
+            },
+            {
+              id: 'editFeature',
+              label: 'Edit feature',
+              iconSvgContent: '<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/>',
+              isDisabled: true,
+              onClick: function () {
+                if (!drawPlugin.editFeature(selectedFeatureIds[0])) return
+                interactiveMap.toggleButtonState('drawTools', 'hidden', true)
+                interactPlugin.disable()
+              }
+            },
+            {
+              id: 'deleteFeature',
+              label: 'Delete feature',
+              iconSvgContent: '<path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>',
+              isDisabled: true,
+              onClick: function () {
+                drawPlugin.deleteFeature(selectedFeatureIds)
+                interactPlugin.clear()
+                interactiveMap.toggleButtonState('drawTools', 'hidden', false)
+                interactiveMap.toggleButtonState('drawPolygon', 'disabled', false)
+                interactiveMap.toggleButtonState('drawLine', 'disabled', false)
+                interactiveMap.toggleButtonState('editFeature', 'disabled', true)
+                interactiveMap.toggleButtonState('deleteFeature', 'disabled', true)
+              }
+            }
+          ]
+        })
+      })
+
+      interactiveMap.on('draw:started', function () {
+        interactPlugin.disable()
+      })
+
+      interactiveMap.on('draw:created', function () {
+        interactiveMap.toggleButtonState('drawTools', 'hidden', false)
+        interactPlugin.enable()
+      })
+
+      interactiveMap.on('draw:edited', function () {
+        interactiveMap.toggleButtonState('drawTools', 'hidden', false)
+        interactPlugin.enable()
+      })
+
+      interactiveMap.on('draw:cancelled', function () {
+        interactiveMap.toggleButtonState('drawTools', 'hidden', false)
+        interactPlugin.enable()
+      })
+
+      interactiveMap.on('interact:selectionchange', function (e) {
+        var singleFeature = e.selectedFeatures.length === 1
+        var anyFeature = e.selectedFeatures.length > 0
+        var isDrawFeature = singleFeature && DRAW_LAYERS.includes(e.selectedFeatures[0].layerId)
+        var allDrawFeatures = anyFeature && e.selectedFeatures.every(function (f) { return DRAW_LAYERS.includes(f.layerId) })
+        selectedFeatureIds = e.selectedFeatures.map(function (f) { return f.featureId })
+        interactiveMap.toggleButtonState('drawPolygon', 'disabled', singleFeature)
+        interactiveMap.toggleButtonState('drawLine', 'disabled', singleFeature)
+        interactiveMap.toggleButtonState('editFeature', 'disabled', !isDrawFeature)
+        interactiveMap.toggleButtonState('deleteFeature', 'disabled', !allDrawFeatures)
+      })
+      </script>
+    `
+  }
+]} />

package/docs/examples/index.mdx

@@ -3,51 +3,99 @@ 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 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'
 
 export function ExampleCards() {
   const basicHref = useBaseUrl('/examples/basic-map')
   const buttonHref = useBaseUrl('/examples/button-map')
   const interactHref = useBaseUrl('/examples/add-marker-with-panel')
   const toggleMarkerLabelHref = useBaseUrl('/examples/toggle-marker-label')
+  const searchControlHref = useBaseUrl('/examples/search-control')
+  const selectFeatureHref = useBaseUrl('/examples/select-feature')
+  const styleSwitcherHref = useBaseUrl('/examples/style-switcher')
+  const drawHref = useBaseUrl('/examples/draw')
 
   return (
-    <div className='govuk-grid-row'>
-      <div className='govuk-grid-column-one-half'>
+    <div className='govuk-grid-row app-example-cards'>
+      <div className='govuk-grid-column-one-third'>
         <div className='app-example-card'>
           <img src={basicMapImg} alt='' />
           <div className='app-example-card__body'>
-            <h2 className='govuk-heading-m'>
+            <h2 className='govuk-heading-s'>
               <a href={basicHref}>Basic map</a>
             </h2>
           </div>
         </div>
       </div>
-      <div className='govuk-grid-column-one-half'>
+      <div className='govuk-grid-column-one-third'>
         <div className='app-example-card'>
           <img src={buttonFirstImg} alt='' />
           <div className='app-example-card__body'>
-            <h2 className='govuk-heading-m'>
+            <h2 className='govuk-heading-s'>
               <a href={buttonHref}>Button-triggered map</a>
             </h2>
           </div>
         </div>
       </div>
-      <div className='govuk-grid-column-one-half'>
+      <div className='govuk-grid-column-one-third'>
         <div className='app-example-card'>
           <img src={markerPanelImg} alt='' />
           <div className='app-example-card__body'>
-            <h2 className='govuk-heading-m'>
+            <h2 className='govuk-heading-s'>
               <a href={interactHref}>Add a marker with a panel</a>
             </h2>
           </div>
         </div>
       </div>
-      <div className='govuk-grid-column-one-half'>
+      <div className='govuk-grid-column-one-third'>
         <div className='app-example-card'>
           <img src={toggleMarkerLabelImg} alt='' />
           <div className='app-example-card__body'>
-            <h2 className='govuk-heading-m'>
-              <a href={toggleMarkerLabelHref}>Toggle marker label on click</a>
+            <h2 className='govuk-heading-s'>
+              <a href={toggleMarkerLabelHref}>Toggle marker label</a>
+            </h2>
+          </div>
+        </div>
+      </div>
+      <div className='govuk-grid-column-one-third'>
+        <div className='app-example-card'>
+          <img src={searchImg} alt='' />
+          <div className='app-example-card__body'>
+            <h2 className='govuk-heading-s'>
+              <a href={searchControlHref}>Add a search control</a>
+            </h2>
+          </div>
+        </div>
+      </div>
+      <div className='govuk-grid-column-one-third'>
+        <div className='app-example-card'>
+          <img src={selectFeatureImg} alt='' />
+          <div className='app-example-card__body'>
+            <h2 className='govuk-heading-s'>
+              <a href={selectFeatureHref}>Select a feature</a>
+            </h2>
+          </div>
+        </div>
+      </div>
+      <div className='govuk-grid-column-one-third'>
+        <div className='app-example-card'>
+          <img src={styleSwitcherImg} alt='' />
+          <div className='app-example-card__body'>
+            <h2 className='govuk-heading-s'>
+              <a href={styleSwitcherHref}>Change map style</a>
+            </h2>
+          </div>
+        </div>
+      </div>
+      <div className='govuk-grid-column-one-third'>
+        <div className='app-example-card'>
+          <img src={drawImg} alt='' />
+          <div className='app-example-card__body'>
+            <h2 className='govuk-heading-s'>
+              <a href={drawHref}>Draw tools</a>
             </h2>
           </div>
         </div>

package/docs/examples/search-control.mdx

@@ -0,0 +1,71 @@
+import DemoMapSearchNominatim from '../../demo/DemoMapSearchNominatim.js'
+import CodeTabs from '../../demo/js/codeTabs.js'
+
+# Add a search control
+
+Add a search control using the built-in OS Names API integration.
+
+:::note
+The live demo below uses Nominatim (no API key required) — the code example uses OS Names, so results may differ slightly. Embedding the key in the URL is the simplest approach for prototyping; for production, `transformRequest` can be used to inject auth headers, or you may need to route requests through your own server-side proxy.
+:::
+
+<DemoMapSearchNominatim />
+
+<CodeTabs tabs={[
+  {
+    label: 'ESM',
+    language: 'js',
+    code: `
+      import InteractiveMap from '@defra/interactive-map'
+      import maplibreProvider from '@defra/interactive-map/providers/maplibre'
+      import createSearchPlugin from '@defra/interactive-map/plugins/search'
+
+      const searchPlugin = createSearchPlugin({
+        osNamesURL: 'https://api.os.uk/search/names/v1/find?query={query}&key=YOUR_API_KEY',
+        width: '300px'
+      })
+
+      new InteractiveMap('my-map', {
+        behaviour: 'inline',
+        mapProvider: maplibreProvider(),
+        mapStyle: {
+          url: 'https://your-tile-url/style.json',
+          attribution: 'Your tile attribution'
+        },
+        center: [-1.6, 53.1],
+        zoom: 6,
+        containerHeight: '516px',
+        plugins: [searchPlugin]
+      })
+    `
+  },
+  {
+    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/search-plugin/index.js"></script>
+
+      <script>
+      const searchPlugin = defra.searchPlugin({
+        osNamesURL: 'https://api.os.uk/search/names/v1/find?query={query}&key=YOUR_API_KEY',
+        width: '300px'
+      })
+
+      new defra.InteractiveMap('my-map', {
+        behaviour: 'inline',
+        mapProvider: defra.maplibreProvider(),
+        mapStyle: {
+          url: 'https://your-tile-url/style.json',
+          attribution: 'Your tile attribution'
+        },
+        center: [-1.6, 53.1],
+        zoom: 6,
+        containerHeight: '516px',
+        plugins: [searchPlugin]
+      })
+      </script>
+    `
+  }
+]} />

package/docs/examples/select-feature.mdx

@@ -0,0 +1,146 @@
+import DemoMapSelectBuilding from '../../demo/DemoMapSelectBuilding.js'
+import CodeTabs from '../../demo/js/codeTabs.js'
+
+# Select a feature
+
+Use the interact plugin to add feature selection to your map. This example adds the ability to select a building from the OS Open Zoomstack `Buildings 3D` layer and display its properties in a panel. Selecting another building replaces the current selection; clicking outside clears it.
+
+:::note
+The layer ID used here (`buildings 3D`) is specific to the OS Open Zoomstack outdoor style. For other tile styles, set `debug: true` in the plugin options, open the browser console, and click the map to see which layer IDs are available at that point.
+:::
+
+<DemoMapSelectBuilding />
+
+<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 PANEL_ID = 'building-info'
+
+      const interactPlugin = createInteractPlugin({
+        interactionModes: ['selectFeature'],
+        deselectOnClickOutside: true,
+        layers: [
+          { layerId: 'buildings 3D', idProperty: 'uuid' }
+        ]
+      })
+
+      const map = new InteractiveMap('my-map', {
+        behaviour: 'inline',
+        mapProvider: maplibreProvider(),
+        mapStyle: {
+          url: 'https://your-tile-url/style.json',
+          attribution: 'Your tile attribution'
+        },
+        center: [-1.55, 53.80],
+        zoom: 14.5,
+        maxZoom: 14.5,
+        containerHeight: '516px',
+        plugins: [interactPlugin]
+      })
+
+      map.on('map:ready', () => {
+        interactPlugin.enable()
+
+        map.addPanel(PANEL_ID, {
+          focus: false,
+          label: 'Selected building',
+          html: '<div id="building-info-content"></div>',
+          mobile: { slot: 'drawer', dismissible: true },
+          tablet: { slot: 'left-top', dismissible: true, width: '300px' },
+          desktop: { slot: 'left-top', dismissible: true, width: '300px' }
+        })
+      })
+
+      map.on('interact:selectionchange', ({ selectedFeatures }) => {
+        if (selectedFeatures.length > 0) {
+          let html = ''
+          for (const [k, v] of Object.entries(selectedFeatures[0].properties)) {
+            html += '<p class="govuk-body govuk-!-margin-bottom-1"><strong>' + k + ':</strong> ' + v + '</p>'
+          }
+          document.getElementById('building-info-content').innerHTML = html
+          map.showPanel(PANEL_ID)
+        } else {
+          map.hidePanel(PANEL_ID)
+        }
+      })
+
+      map.on('app:panelclosed', ({ panelId }) => {
+        if (panelId === PANEL_ID) {
+          interactPlugin.clear()
+        }
+      })
+    `
+  },
+  {
+    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>
+
+      <script>
+      const PANEL_ID = 'building-info'
+
+      const interactPlugin = defra.interactPlugin({
+        interactionModes: ['selectFeature'],
+        deselectOnClickOutside: true,
+        layers: [
+          { layerId: 'buildings 3D', idProperty: 'uuid' }
+        ]
+      })
+
+      const map = new defra.InteractiveMap('my-map', {
+        behaviour: 'inline',
+        mapProvider: defra.maplibreProvider(),
+        mapStyle: {
+          url: 'https://your-tile-url/style.json',
+          attribution: 'Your tile attribution'
+        },
+        center: [-1.55, 53.80],
+        zoom: 17,
+        containerHeight: '516px',
+        plugins: [interactPlugin]
+      })
+
+      map.on('map:ready', () => {
+        interactPlugin.enable()
+
+        map.addPanel(PANEL_ID, {
+          focus: false,
+          label: 'Selected building',
+          html: '<div id="building-info-content"></div>',
+          mobile: { slot: 'drawer', dismissible: true },
+          tablet: { slot: 'left-top', dismissible: true, width: '300px' },
+          desktop: { slot: 'left-top', dismissible: true, width: '300px' }
+        })
+      })
+
+      map.on('interact:selectionchange', ({ selectedFeatures }) => {
+        if (selectedFeatures.length > 0) {
+          let html = ''
+          for (const [k, v] of Object.entries(selectedFeatures[0].properties)) {
+            html += '<p class="govuk-body govuk-!-margin-bottom-1"><strong>' + k + ':</strong> ' + v + '</p>'
+          }
+          document.getElementById('building-info-content').innerHTML = html
+          map.showPanel(PANEL_ID)
+        } else {
+          map.hidePanel(PANEL_ID)
+        }
+      })
+
+      map.on('app:panelclosed', ({ panelId }) => {
+        if (panelId === PANEL_ID) {
+          interactPlugin.clear()
+        }
+      })
+      </script>
+    `
+  }
+]} />