Skip to main content
Interactive Map

alphaThis is a new frontend component. Help us improve it and give your feedback on Slack.

Select a feature

Use the interact plugin to add feature selection to your map. This example adds a plain dataset of field parcels (see Add polygons) and the ability to select one to display its properties in a panel. Selecting another parcel replaces the current selection; clicking outside clears it.

NOTE

The layer ID used here (field-parcels) comes from the datasets plugin — a dataset with no sublayers gets a layer ID matching its own id. For other layers, including ones from your base map style, 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.

The map requires JavaScript to be enabled.
import InteractiveMap from '@defra/interactive-map'
import maplibreProvider from '@defra/interactive-map/providers/maplibre'
import createDatasetsPlugin from '@defra/interactive-map/plugins/datasets'
import createInteractPlugin from '@defra/interactive-map/plugins/interact'


// 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: 'Large meadow', 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: 'Lamb field', 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: 'Small hay field', 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: 'The pasture', 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: 'Herdwick Croft', 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: "Wainwright's Rest", 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: 'Badger Sett Copse', 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',
    geojson: geojson,
    minZoom: 10,
    maxZoom: 24,
    style: {
      fill: '#1d70b8',
      opacity: 0.4,
      stroke: '#1d70b8',
      strokeWidth: 2
    }
  }]
})


const PANEL_ID = 'parcel-info'


const interactPlugin = createInteractPlugin({
  interactionModes: ['selectFeature'],
  deselectOnClickOutside: true,
  layers: [
    { layerId: 'field-parcels', idProperty: 'name' }
  ]
})


const map = 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, interactPlugin]
})


map.on('map:ready', () => {
  interactPlugin.enable()


  map.addPanel(PANEL_ID, {
    focus: false,
    label: 'Selected parcel',
    html: '<div id="parcel-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) {
    const name = selectedFeatures[0].properties.name
    document.getElementById('parcel-info-content').innerHTML =
      '<p class="govuk-body govuk-!-margin-bottom-1">' + name + '</p>'
    map.showPanel(PANEL_ID)
  } else {
    map.hidePanel(PANEL_ID)
  }
})


map.on('app:panelclosed', ({ panelId }) => {
  if (panelId === PANEL_ID) {
    interactPlugin.clear()
  }
})