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

package/assets/templates/place-marker.njk

@@ -0,0 +1,104 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  Place a marker to continue – 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">
+      Place a marker to continue
+    </h1>
+
+    <div id="map"></div>
+
+    <div id="external-buttons" hidden>
+      <button class="govuk-button govuk-!-margin-top-4" id="continue-btn" disabled>Continue</button>
+    </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>
+    var interactPlugin = defra.interactPlugin({
+      interactionModes: ['placeMarker']
+    })
+
+    var map = new defra.InteractiveMap('map', {
+      behaviour: 'hybrid',
+      mapProvider: defra.maplibreProvider(),
+      mapStyle: {
+        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],
+      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
+      if (marker) {
+        console.log('Continuing with marker at:', 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>
+{% endblock %}

package/assets/templates/search-control.njk

@@ -0,0 +1,98 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  Add a search control – 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/search/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 a search control
+    </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/search/dist/umd/index.js"></script>
+
+  <script>
+    const SETTLEMENT_TYPES = new Set(['city', 'town', 'village', 'hamlet', 'suburb', 'quarter', 'neighbourhood', 'municipality', 'borough', 'district', 'county'])
+
+    const nominatimDataset = {
+      name: 'nominatim',
+      buildRequest: function (query) {
+        const params = new URLSearchParams({
+          q: query,
+          format: 'json',
+          limit: '8',
+          countrycodes: 'gb'
+        })
+        return new Request('https://nominatim.openstreetmap.org/search?' + params, {
+          headers: { 'Accept-Language': 'en' }
+        })
+      },
+      parseResults: function (json, query) {
+        if (!Array.isArray(json)) return []
+        const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+        const results = json
+          .filter(function (item) { return SETTLEMENT_TYPES.has(item.addresstype) })
+          .map(function (item) {
+            const bb = item.boundingbox.map(Number)
+            return {
+              id: String(item.place_id),
+              text: item.display_name,
+              marked: item.display_name.replace(new RegExp('(' + escaped + ')', 'i'), '<mark>$1</mark>'),
+              point: [Number(item.lon), Number(item.lat)],
+              bounds: [bb[2], bb[0], bb[3], bb[1]]
+            }
+          })
+        return Array.from(new Map(results.map(function (r) { return [r.text, r] })).values())
+      }
+    }
+
+    const searchPlugin = defra.searchPlugin({
+      customDatasets: [nominatimDataset],
+      width: '300px'
+    })
+
+    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: [-1.6, 53.1],
+      zoom: 6,
+      containerHeight: '516px',
+      plugins: [searchPlugin]
+    })
+  </script>
+{% endblock %}

package/assets/templates/select-feature.njk

@@ -0,0 +1,101 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  Select a feature – 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">
+      Select a feature
+    </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>
+    const PANEL_ID = 'building-info'
+
+    const interactPlugin = defra.interactPlugin({
+      interactionModes: ['selectFeature'],
+      deselectOnClickOutside: true,
+      layers: [
+        { layerId: 'buildings 3D', idProperty: 'uuid' }
+      ]
+    })
+
+    const map = 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: [-1.5491, 53.8008],
+      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, open: false },
+        tablet: { slot: 'left-top', dismissible: true, width: '300px', open: false },
+        desktop: { slot: 'left-top', dismissible: true, width: '300px', open: false }
+      })
+    })
+
+    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>
+{% endblock %}

package/assets/templates/style-switcher.njk

@@ -0,0 +1,87 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  Change map style – 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/map-styles/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">
+      Change map style
+    </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/map-styles/dist/umd/index.js"></script>
+
+  <script>
+    const attribution = 'OpenFreeMap © OpenMapTiles Data from OpenStreetMap'
+
+    const mapStyles = [
+      {
+        id: 'road',
+        label: 'Road',
+        url: 'https://tiles.openfreemap.org/styles/liberty',
+        thumbnail: '/plugin-assets/%40defra%2Finteractive-map/assets/images/road-ofm-thumb.jpg',
+        attribution,
+        backgroundColor: '#f5f5f0'
+      },
+      {
+        id: 'bright',
+        label: 'Bright',
+        url: 'https://tiles.openfreemap.org/styles/bright',
+        thumbnail: '/plugin-assets/%40defra%2Finteractive-map/assets/images/bright-ofm-thumb.jpg',
+        attribution,
+        backgroundColor: '#f5f5f0'
+      },
+      {
+        id: 'dark',
+        label: 'Dark',
+        url: 'https://tiles.openfreemap.org/styles/fiord',
+        thumbnail: '/plugin-assets/%40defra%2Finteractive-map/assets/images/dark-ofm-thumb.jpg',
+        attribution,
+        mapColorScheme: 'dark',
+        appColorScheme: 'dark'
+      }
+    ]
+
+    const mapStylesPlugin = defra.mapStylesPlugin({ mapStyles })
+
+    new defra.InteractiveMap('map', {
+      behaviour: 'inline',
+      mapProvider: defra.maplibreProvider(),
+      mapStyle: mapStyles[0],
+      center: [-0.1276, 51.5074],
+      zoom: 12,
+      containerHeight: '516px',
+      plugins: [mapStylesPlugin]
+    })
+  </script>
+{% endblock %}

package/assets/templates/toggle-marker-label.njk

@@ -0,0 +1,74 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  Toggle marker label – 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">
+      Toggle marker label
+    </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>
+    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.96, 54.43],
+      zoom: 15,
+      containerHeight: '516px',
+      plugins: [interactPlugin]
+    })
+
+    map.on('map:ready', () => {
+      map.addMarker('my-marker', [-2.96, 54.43], {
+        label: 'My location',
+        showLabel: false
+      })
+      interactPlugin.enable()
+    })
+
+    map.on('interact:selectionchange', ({ selectedMarkers }) => {
+      map.updateMarker('my-marker', { showLabel: selectedMarkers.includes('my-marker') })
+    })
+  </script>
+{% endblock %}