Interact Plugin

Select features or place markers on the map. The interact plugin provides a unified way to handle user interactions for selecting map features or placing location markers.

Usage

Copy
import createInteractPlugin from '@defra/interactive-map/plugins/interact'

const interactPlugin = createInteractPlugin()

const interactiveMap = new InteractiveMap({
  plugins: [interactPlugin]
})

Options

Options are passed to the factory function when creating the plugin.

includeModes

Type: string[]

Array of mode identifiers. When set, the plugin only renders when the app is in one of these modes.

excludeModes

Type: string[]

Array of mode identifiers. When set, the plugin does not render when the app is in one of these modes.

Methods

Methods are called on the plugin instance after the map is ready.

enable()

Enable interaction mode. Shows action buttons and enables feature selection or marker placement.

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

disable()

Disable interaction mode. Hides action buttons and disables interactions.

Copy
interactPlugin.disable()

clear()

Clear the current selection or marker.

Copy
interactPlugin.clear()

selectFeature(feature)

Programmatically select a feature.

Copy
interactPlugin.selectFeature({ id: 'feature-1', bounds: [...] })

unselectFeature()

Clear the currently selected feature.

Copy
interactPlugin.unselectFeature()

Events

Subscribe to events using interactiveMap.on().

interact:done

Emitted when the user confirms their selection (clicks "Done").

Payload:

Copy
{
  marker: { coords: [lng, lat] } | null,
  selection: { bounds: [...], feature: {...} } | null
}

Copy
interactiveMap.on('interact:done', ({ marker, selection }) => {
  if (marker) {
    console.log('Location selected:', marker.coords)
  }
  if (selection) {
    console.log('Feature selected:', selection.feature)
  }
})

interact:cancel

Emitted when the user cancels the interaction.

Payload: None

Copy
interactiveMap.on('interact:cancel', () => {
  console.log('Interaction cancelled')
})

interact:markerchange

Emitted when the marker position changes.

Payload:

Copy
{
  coords: [lng, lat]
}

Copy
interactiveMap.on('interact:markerchange', ({ coords }) => {
  console.log('Marker moved to:', coords)
})

interact:selectionchange

Emitted when the feature selection changes.

Payload:

Copy
{
  bounds: [west, south, east, north],
  feature: { ... }
}

Copy
interactiveMap.on('interact:selectionchange', ({ bounds, feature }) => {
  console.log('Selection changed:', feature)
})

interact:selectFeature

Emitted when a feature is programmatically selected via the API.

Payload:

Copy
{
  feature: { ... }
}

interact:unselectFeature

Emitted when a feature is programmatically unselected via the API.

Payload:

Copy
{
  feature: { ... }
}