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

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>
+    `
+  }
+]} />

package/docs/examples/style-switcher.mdx

@@ -0,0 +1,135 @@
+import DemoMapStyleSwitcher from '../../demo/DemoMapStyleSwitcher.js'
+import CodeTabs from '../../demo/js/codeTabs.js'
+
+# Change map style
+
+Provide alternative basemaps using the map styles plugin to support different use cases — such as dark or high contrast styles for accessibility needs, or aerial views for specific mapping tasks. You can also scale the map to enlarge text and features for users with visual impairment. The plugin accepts any vector tile style — in production you would typically use the [OS Vector Tile API](https://osdatahub.os.uk/docs/vts/overview) or [OS NGD Tiles API](https://osdatahub.os.uk/docs/ngd/overview).
+
+:::note
+The live demo uses OS Open Zoomstack tiles from OS Labs, which do not require an API key. This is only suitable for the demo — it is not intended for production use.
+:::
+
+<DemoMapStyleSwitcher />
+
+<CodeTabs tabs={[
+  {
+    label: 'ESM',
+    language: 'js',
+    code: `
+      import InteractiveMap from '@defra/interactive-map'
+      import maplibreProvider from '@defra/interactive-map/providers/maplibre'
+      import createMapStylesPlugin from '@defra/interactive-map/plugins/map-styles'
+
+      const attribution = 'Contains OS data © Crown copyright and database rights 2025'
+
+      const mapStyles = [
+        {
+          id: 'outdoor',
+          label: 'Outdoor',
+          url: 'https://labs.os.uk/tiles/styles/open-zoomstack-outdoor/style.json',
+          thumbnail: '/path/to/outdoor-thumbnail.jpg',
+          attribution,
+          backgroundColor: '#f5f5f0'
+        },
+        {
+          id: 'night',
+          label: 'Night',
+          url: 'https://labs.os.uk/tiles/styles/open-zoomstack-night/style.json',
+          thumbnail: '/path/to/night-thumbnail.jpg',
+          attribution,
+          mapColorScheme: 'dark',
+          appColorScheme: 'dark'
+        },
+        {
+          id: 'deuteranopia',
+          label: 'Deuteranopia',
+          url: 'https://labs.os.uk/tiles/styles/open-zoomstack-deuteranopia/style.json',
+          thumbnail: '/path/to/deuteranopia-thumbnail.jpg',
+          attribution,
+          backgroundColor: '#f5f5f0'
+        },
+        {
+          id: 'tritanopia',
+          label: 'Tritanopia',
+          url: 'https://labs.os.uk/tiles/styles/open-zoomstack-tritanopia/style.json',
+          thumbnail: '/path/to/tritanopia-thumbnail.jpg',
+          attribution,
+          backgroundColor: '#f5f5f0'
+        }
+      ]
+
+      const mapStylesPlugin = createMapStylesPlugin({ mapStyles })
+
+      new InteractiveMap('my-map', {
+        behaviour: 'inline',
+        mapProvider: maplibreProvider(),
+        mapStyle: mapStyles[0],
+        center: [-0.1276, 51.5074],
+        zoom: 12,
+        containerHeight: '516px',
+        plugins: [mapStylesPlugin]
+      })
+    `
+  },
+  {
+    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/map-styles-plugin/index.js"></script>
+
+      <script>
+      const attribution = 'Contains OS data © Crown copyright and database rights 2025'
+
+      const mapStyles = [
+        {
+          id: 'outdoor',
+          label: 'Outdoor',
+          url: 'https://labs.os.uk/tiles/styles/open-zoomstack-outdoor/style.json',
+          thumbnail: '/path/to/outdoor-thumbnail.jpg',
+          attribution,
+          backgroundColor: '#f5f5f0'
+        },
+        {
+          id: 'night',
+          label: 'Night',
+          url: 'https://labs.os.uk/tiles/styles/open-zoomstack-night/style.json',
+          thumbnail: '/path/to/night-thumbnail.jpg',
+          attribution,
+          mapColorScheme: 'dark',
+          appColorScheme: 'dark'
+        },
+        {
+          id: 'deuteranopia',
+          label: 'Deuteranopia',
+          url: 'https://labs.os.uk/tiles/styles/open-zoomstack-deuteranopia/style.json',
+          thumbnail: '/path/to/deuteranopia-thumbnail.jpg',
+          attribution,
+          backgroundColor: '#f5f5f0'
+        },
+        {
+          id: 'tritanopia',
+          label: 'Tritanopia',
+          url: 'https://labs.os.uk/tiles/styles/open-zoomstack-tritanopia/style.json',
+          thumbnail: '/path/to/tritanopia-thumbnail.jpg',
+          attribution,
+          backgroundColor: '#f5f5f0'
+        }
+      ]
+
+      const mapStylesPlugin = defra.mapStylesPlugin({ mapStyles })
+
+      new defra.InteractiveMap('my-map', {
+        behaviour: 'inline',
+        mapProvider: defra.maplibreProvider(),
+        mapStyle: mapStyles[0],
+        center: [-0.1276, 51.5074],
+        zoom: 12,
+        containerHeight: '516px',
+        plugins: [mapStylesPlugin]
+      })
+      </script>
+    `
+  }
+]} />

package/docs/examples/toggle-marker-label.mdx

@@ -1,7 +1,7 @@
 import DemoMapToggleMarkerLabel from '../../demo/DemoMapToggleMarkerLabel.js'
 import CodeTabs from '../../demo/js/codeTabs.js'
 
-# Toggle marker label on click
+# Toggle marker label
 
 Add a marker with a hidden label, then use the interact plugin to show the label when the marker is selected and hide it when the user clicks elsewhere.
 
@@ -29,7 +29,7 @@ Add a marker with a hidden label, then use the interact plugin to show the label
         },
         center: [-2.96, 54.43],
         zoom: 15,
-        containerHeight: '500px',
+        containerHeight: '516px',
         plugins: [interactPlugin]
       })
 
@@ -68,7 +68,7 @@ Add a marker with a hidden label, then use the interact plugin to show the label
         },
         center: [-2.96, 54.43],
         zoom: 15,
-        containerHeight: '500px',
+        containerHeight: '516px',
         plugins: [interactPlugin]
       })