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

package/README.md

@@ -14,10 +14,10 @@ See [examples of InteractiveMap](https://google.co.uk).
 
 See [getting started](./docs/getting-started.md) developer guide.
 
-**⚠️ This project is currently in beta and is not yet stable. Documentation and support are not yet available.**
+**⚠️ This project is currently in beta and is not yet stable.**
 
 <p align="center">
-  <img src="docs/assets/images/screens-white.jpg" alt="Screenshots of map component">
+  <img src="docs/assets/images/screenshot.jpg" alt="Screenshot of map component">
 </p>
 
 ## Documentation

package/assets/templates/add-polygons.njk

@@ -0,0 +1,143 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  Add polygons – GOV.UK Prototype Kit
+{% endblock %}
+
+{% block head %}
+  <link href="/public/stylesheets/application.css" rel="stylesheet" type="text/css">
+  <link href="/plugin-assets/%40defra%2Finteractive-map/dist/css/index.css" rel="stylesheet" type="text/css">
+  <link href="/plugin-assets/%40defra%2Finteractive-map/plugins/beta/datasets/dist/css/index.css" rel="stylesheet" type="text/css">
+{% endblock %}
+
+{% block bodyStart %}
+  <script>document.body.classList.add('im-is-loading')</script>
+{% endblock %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+    text: "Back",
+    href: "javascript:window.history.back()"
+  }) }}
+{% endblock %}
+
+{% block content %}
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+
+    <h1 class="govuk-heading-l">
+      Add polygons
+    </h1>
+
+    <div id="map"></div>
+
+  </div>
+</div>
+{% endblock %}
+
+{% block pageScripts %}
+  <!-- Defra library scripts -->
+  <script src="/plugin-assets/%40defra%2Finteractive-map/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map/providers/maplibre/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map/plugins/beta/datasets/dist/umd/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-geojson',
+        label: 'Field geojson',
+        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('map', {
+      behaviour: 'inline',
+      mapProvider: defra.maplibreProvider(),
+      mapStyle: {
+        url: 'https://labs.os.uk/tiles/styles/open-zoomstack-outdoor/style.json',
+        attribution: `Contains OS data © Crown copyright and database rights ${new Date().getFullYear()}`,
+        backgroundColor: '#f5f5f0'
+      },
+      center: [-2.464, 54.558],
+      zoom: 14,
+      containerHeight: '516px',
+      plugins: [datasetsPlugin]
+    })
+  </script>
+{% endblock %}

package/assets/templates/add-symbols.njk

@@ -0,0 +1,119 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  Add symbols – GOV.UK Prototype Kit
+{% endblock %}
+
+{% block head %}
+  <link href="/public/stylesheets/application.css" rel="stylesheet" type="text/css">
+  <link href="/plugin-assets/%40defra%2Finteractive-map/dist/css/index.css" rel="stylesheet" type="text/css">
+  <link href="/plugin-assets/%40defra%2Finteractive-map/plugins/beta/datasets/dist/css/index.css" rel="stylesheet" type="text/css">
+{% endblock %}
+
+{% block bodyStart %}
+  <script>document.body.classList.add('im-is-loading')</script>
+{% endblock %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+    text: "Back",
+    href: "javascript:window.history.back()"
+  }) }}
+{% endblock %}
+
+{% block content %}
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+
+    <h1 class="govuk-heading-l">
+      Add symbols
+    </h1>
+
+    <div id="map"></div>
+
+  </div>
+</div>
+{% endblock %}
+
+{% block pageScripts %}
+  <!-- Defra library scripts -->
+  <script src="/plugin-assets/%40defra%2Finteractive-map/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map/providers/maplibre/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map/plugins/beta/datasets/dist/umd/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('map', {
+      behaviour: 'inline',
+      mapProvider: defra.maplibreProvider(),
+      mapStyle: {
+        url: 'https://labs.os.uk/tiles/styles/open-zoomstack-outdoor/style.json',
+        attribution: `Contains OS data © Crown copyright and database rights ${new Date().getFullYear()}`,
+        backgroundColor: '#f5f5f0'
+      },
+      center: [-2.4608, 54.5574],
+      zoom: 14,
+      containerHeight: '516px',
+      plugins: [datasetsPlugin]
+    })
+  </script>
+{% endblock %}

package/assets/templates/{map.njk → basic-map.njk}

@@ -1,13 +1,12 @@
 {% extends "layouts/main.html" %}
 
 {% block pageTitle %}
-  InteractiveMap page template – GOV.UK Prototype Kit
+  Basic map – GOV.UK Prototype Kit
 {% endblock %}
 
 {% block head %}
   <link href="/public/stylesheets/application.css" rel="stylesheet" type="text/css">
   <link href="/plugin-assets/%40defra%2Finteractive-map/dist/css/index.css" rel="stylesheet" type="text/css">
-  <link href="/plugin-assets/%40defra%2Finteractive-map/plugins/beta/scale-bar/dist/css/index.css" rel="stylesheet" type="text/css">
 {% endblock %}
 
 {% block bodyStart %}
@@ -29,7 +28,7 @@
       Basic map
     </h1>
 
-    <div id="map" data-zoom="12" data-center="[-2.968, 54.425]"></div>
+    <div id="map"></div>
 
   </div>
 </div>
@@ -39,26 +38,19 @@
   <!-- Defra library scripts -->
   <script src="/plugin-assets/%40defra%2Finteractive-map/dist/umd/index.js"></script>
   <script src="/plugin-assets/%40defra%2Finteractive-map/providers/maplibre/dist/umd/index.js"></script>
-  <script src="/plugin-assets/%40defra%2Finteractive-map/plugins/beta/scale-bar/dist/umd/index.js"></script>
-  
+
   <script>
-    const interactiveMap = new defra.InteractiveMap('map', {
+    new defra.InteractiveMap('map', {
+      behaviour: 'inline',
       mapProvider: defra.maplibreProvider(),
-      behaviour: 'hybrid',
-      mapLabel: 'Ambleside',
-      minZoom: 6,
-      maxZoom: 18,
-      containerHeight: '650px',
       mapStyle: {
         url: 'https://tiles.openfreemap.org/styles/liberty',
         attribution: 'OpenFreeMap © OpenMapTiles Data from OpenStreetMap',
         backgroundColor: '#f5f5f0'
       },
-      plugins: [
-        defra.scaleBarPlugin({
-          units: 'metric'
-        })
-      ]
+      center: [-1.6, 53.1],
+      zoom: 6,
+      containerHeight: '516px'
     })
   </script>
-{% endblock %}
+{% endblock %}

package/assets/templates/button-map.njk

@@ -0,0 +1,56 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  Button-triggered map – GOV.UK Prototype Kit
+{% endblock %}
+
+{% block head %}
+  <link href="/public/stylesheets/application.css" rel="stylesheet" type="text/css">
+  <link href="/plugin-assets/%40defra%2Finteractive-map/dist/css/index.css" rel="stylesheet" type="text/css">
+{% endblock %}
+
+{% block bodyStart %}
+  <script>document.body.classList.add('im-is-loading')</script>
+{% endblock %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+    text: "Back",
+    href: "javascript:window.history.back()"
+  }) }}
+{% endblock %}
+
+{% block content %}
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+
+    <h1 class="govuk-heading-l">
+      Button-triggered map
+    </h1>
+
+    <div id="map"></div>
+
+  </div>
+</div>
+{% endblock %}
+
+{% block pageScripts %}
+  <!-- Defra library scripts -->
+  <script src="/plugin-assets/%40defra%2Finteractive-map/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map/providers/maplibre/dist/umd/index.js"></script>
+
+  <script>
+    new defra.InteractiveMap('map', {
+      behaviour: 'buttonFirst',
+      mapProvider: defra.maplibreProvider(),
+      mapStyle: {
+        url: 'https://tiles.openfreemap.org/styles/liberty',
+        attribution: 'OpenFreeMap © OpenMapTiles Data from OpenStreetMap',
+        backgroundColor: '#f5f5f0'
+      },
+      center: [-1.6, 53.1],
+      zoom: 6,
+      hasExitButton: true
+    })
+  </script>
+{% endblock %}

package/assets/templates/draw-tools.njk

@@ -0,0 +1,161 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  Draw tools – GOV.UK Prototype Kit
+{% endblock %}
+
+{% block head %}
+  <link href="/public/stylesheets/application.css" rel="stylesheet" type="text/css">
+  <link href="/plugin-assets/%40defra%2Finteractive-map/dist/css/index.css" rel="stylesheet" type="text/css">
+{% endblock %}
+
+{% block bodyStart %}
+  <script>document.body.classList.add('im-is-loading')</script>
+{% endblock %}
+
+
+{% block content %}
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+
+    <h1 class="govuk-heading-l">
+      Draw tools
+    </h1>
+
+    <div id="map"></div>
+
+  </div>
+</div>
+{% endblock %}
+
+{% block pageScripts %}
+  <!-- Defra library scripts -->
+  <script src="/plugin-assets/%40defra%2Finteractive-map/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map/providers/maplibre/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map/plugins/interact/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map/plugins/beta/draw-ml/dist/umd/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({
+      snapLayers: ['building-3d']
+    })
+
+    const interactiveMap = new defra.InteractiveMap('map', {
+      behaviour: 'hybrid',
+      mapProvider: defra.maplibreProvider(),
+      mapStyle: {
+        id: 'default',
+        url: 'https://tiles.openfreemap.org/styles/liberty',
+        attribution: 'OpenFreeMap © OpenMapTiles Data from OpenStreetMap',
+        backgroundColor: '#f5f5f0'
+      },
+      center: [-0.1276, 51.5074],
+      zoom: 12,
+      containerHeight: '516px',
+      plugins: [interactPlugin, drawPlugin],
+      hasExitButton: true
+    })
+
+    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>
+{% endblock %}

package/assets/templates/marker-panel.njk

@@ -0,0 +1,91 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  Map with marker and panel – GOV.UK Prototype Kit
+{% endblock %}
+
+{% block head %}
+  <link href="/public/stylesheets/application.css" rel="stylesheet" type="text/css">
+  <link href="/plugin-assets/%40defra%2Finteractive-map/dist/css/index.css" rel="stylesheet" type="text/css">
+{% endblock %}
+
+{% block bodyStart %}
+  <script>document.body.classList.add('im-is-loading')</script>
+{% endblock %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+    text: "Back",
+    href: "javascript:window.history.back()"
+  }) }}
+{% endblock %}
+
+{% block content %}
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+
+    <h1 class="govuk-heading-l">
+      Map with marker and panel
+    </h1>
+
+    <div id="map" data-zoom="15" data-center="[-2.968, 54.425]"></div>
+
+  </div>
+</div>
+{% endblock %}
+
+{% block pageScripts %}
+  <!-- Defra library scripts -->
+  <script src="/plugin-assets/%40defra%2Finteractive-map/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map/providers/maplibre/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map/plugins/interact/dist/umd/index.js"></script>
+
+  <script>
+    const interactPlugin = defra.interactPlugin({
+      deselectOnClickOutside: true
+    })
+
+    const map = new defra.InteractiveMap('map', {
+      behaviour: 'inline',
+      mapProvider: defra.maplibreProvider(),
+      mapStyle: {
+        url: 'https://tiles.openfreemap.org/styles/liberty',
+        attribution: 'OpenFreeMap © OpenMapTiles Data from OpenStreetMap',
+        backgroundColor: '#f5f5f0'
+      },
+      center: [-2.968, 54.425],
+      zoom: 15,
+      containerHeight: '516px',
+      plugins: [interactPlugin]
+    })
+
+    map.on('map:ready', () => {
+      map.addMarker('my-marker', [-2.968, 54.425])
+      interactPlugin.enable()
+      interactPlugin.selectMarker('my-marker')
+
+      map.addPanel('marker-info', {
+        focus: false,
+        label: 'Marker',
+        html: '<p class="govuk-body">Information about the selected marker</p>',
+        mobile: { slot: 'drawer', dismissible: true },
+        tablet: { slot: 'left-top', dismissible: true, width: '280px' },
+        desktop: { slot: 'left-top', dismissible: true, width: '280px' }
+      })
+    })
+
+    map.on('interact:selectionchange', ({ selectedMarkers }) => {
+      if (selectedMarkers.length > 0) {
+        map.showPanel('marker-info')
+      } else {
+        map.hidePanel('marker-info')
+      }
+    })
+
+    map.on('app:panelclosed', ({ panelId }) => {
+      if (panelId === 'marker-info') {
+        interactPlugin.unselectMarker('my-marker')
+      }
+    })
+  </script>
+{% endblock %}