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

package/docs/examples/add-marker-with-panel.mdx

@@ -1,7 +1,7 @@
 import DemoMapMarkerPanel from '../../demo/DemoMapMarkerPanel.js'
 import CodeTabs from '../../demo/js/codeTabs.js'
 
-# Add a marker with a panel
+# Map with marker and panel
 
 Add markers to the map and allow users to select them. Selecting a marker fires the `interact:selectionchange` event, which can be used to show a panel with relevant information.
 
@@ -29,7 +29,7 @@ Add markers to the map and allow users to select them. Selecting a marker fires
         },
         center: [-2.96, 54.43],
         zoom: 15,
-        containerHeight: '500px',
+        containerHeight: '516px',
         plugins: [interactPlugin]
       })
 
@@ -85,7 +85,7 @@ Add markers to the map and allow users to select them. Selecting a marker fires
         },
         center: [-2.96, 54.43],
         zoom: 15,
-        containerHeight: '500px',
+        containerHeight: '516px',
         plugins: [interactPlugin]
       })
 

package/docs/examples/add-polygons.mdx

@@ -0,0 +1,225 @@
+import DemoMapPolygons from '../../demo/DemoMapPolygons.js'
+import CodeTabs from '../../demo/js/codeTabs.js'
+
+# Add polygons
+
+Use the datasets plugin to overlay GeoJSON polygon data on your map. This example shows a set of field parcels styled with a fill colour and border.
+
+<DemoMapPolygons />
+
+<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'
+
+      // GeoJSON can also be loaded from a URL; use the tiles property for vector tile sources
+      const geojson = {
+        type: 'FeatureCollection',
+        features: [{
+          type: 'Feature',
+          id: 1,
+          properties: { name: 'Feature 1', 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' },
+          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' },
+          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' },
+          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' },
+          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' },
+          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' },
+          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]]] }
+        }]
+      }
+
+      const datasetsPlugin = createDatasetsPlugin({
+        datasets: [{
+          id: 'field-parcels',
+          label: 'Field parcels',
+          geojson: geojson,
+          minZoom: 10,
+          maxZoom: 24,
+          showInKey: true,
+          showInMenu: true,
+          sublayers: [{
+            id: 'arable',
+            label: 'Arable',
+            filter: ['==', ['get', 'land_use'], 'Arable'],
+            style: {
+              stroke: '#6D4C41',
+              fillPattern: 'horizontal-hatch',
+              fillPatternForegroundColor: '#6D4C41',
+              fillPatternBackgroundColor: 'transparent'
+            }
+          }, {
+            id: 'permanent-grassland',
+            label: 'Permanent grassland',
+            filter: ['==', ['get', 'land_use'], 'Permanent grassland'],
+            style: {
+              stroke: '#00897B',
+              fillPattern: 'diagonal-cross-hatch',
+              fillPatternForegroundColor: '#00897B',
+              fillPatternBackgroundColor: 'transparent'
+            }
+          }, {
+            id: 'woodland',
+            label: 'Woodland',
+            filter: ['==', ['get', 'land_use'], 'Woodland'],
+            style: {
+              stroke: '#2E7D32',
+              fillPattern: 'dot',
+              fillPatternForegroundColor: '#2E7D32',
+              fillPatternBackgroundColor: 'transparent'
+            }
+          }]
+        }]
+      })
+
+      new InteractiveMap('my-map', {
+        behaviour: 'inline',
+        mapProvider: maplibreProvider(),
+        mapStyle: {
+          url: 'https://your-tile-url/style.json',
+          attribution: 'Your tile attribution'
+        },
+        center: [-2.464, 54.558],
+        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>
+      // GeoJSON can also be loaded from a URL; use the tiles property for vector tile sources
+      const geojson = {
+        type: 'FeatureCollection',
+        features: [{
+          type: 'Feature',
+          id: 1,
+          properties: { name: 'Feature 1', 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' },
+          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' },
+          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' },
+          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' },
+          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' },
+          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' },
+          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]]] }
+        }]
+      }
+
+      const datasetsPlugin = defra.datasetsPlugin({
+        datasets: [{
+          id: 'field-parcels',
+          label: 'Field parcels',
+          geojson: geojson,
+          minZoom: 10,
+          maxZoom: 24,
+          showInKey: true,
+          showInMenu: true,
+          sublayers: [{
+            id: 'arable',
+            label: 'Arable',
+            filter: ['==', ['get', 'land_use'], 'Arable'],
+            style: {
+              stroke: '#6D4C41',
+              fillPattern: 'horizontal-hatch',
+              fillPatternForegroundColor: '#6D4C41',
+              fillPatternBackgroundColor: 'transparent'
+            }
+          }, {
+            id: 'permanent-grassland',
+            label: 'Permanent grassland',
+            filter: ['==', ['get', 'land_use'], 'Permanent grassland'],
+            style: {
+              stroke: '#00897B',
+              fillPattern: 'diagonal-cross-hatch',
+              fillPatternForegroundColor: '#00897B',
+              fillPatternBackgroundColor: 'transparent'
+            }
+          }, {
+            id: 'woodland',
+            label: 'Woodland',
+            filter: ['==', ['get', 'land_use'], 'Woodland'],
+            style: {
+              stroke: '#2E7D32',
+              fillPattern: 'dot',
+              fillPatternForegroundColor: '#2E7D32',
+              fillPatternBackgroundColor: 'transparent'
+            }
+          }]
+        }]
+      })
+
+      new defra.InteractiveMap('my-map', {
+        behaviour: 'inline',
+        mapProvider: defra.maplibreProvider(),
+        mapStyle: {
+          url: 'https://your-tile-url/style.json',
+          attribution: 'Your tile attribution'
+        },
+        center: [-2.464, 54.558],
+        zoom: 14,
+        containerHeight: '516px',
+        plugins: [datasetsPlugin]
+      })
+      </script>
+    `
+  }
+]} />

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/basic-map.mdx

@@ -24,7 +24,7 @@ Embed an interactive map directly on the page, allowing users to explore and int
         },
         center: [-1.6, 53.1],
         zoom: 6,
-        containerHeight: '500px'
+        containerHeight: '516px'
       })
     `
   },
@@ -45,7 +45,7 @@ Embed an interactive map directly on the page, allowing users to explore and int
         },
         center: [-1.6, 53.1],
         zoom: 6,
-        containerHeight: '500px'
+        containerHeight: '516px'
       })
       </script>
     `