Add a search control

Add a search control using the built-in OS Names API integration.

NOTE

The live demo below uses Nominatim (no API key required) — the code example uses OS Names, so results may differ slightly. Embedding the key in the URL is the simplest approach for prototyping; for production, transformRequest can be used to inject auth headers, or you may need to route requests through your own server-side proxy.

The map requires JavaScript to be enabled.

import InteractiveMap from '@defra/interactive-map'
import maplibreProvider from '@defra/interactive-map/providers/maplibre'
import createSearchPlugin from '@defra/interactive-map/plugins/search'

const searchPlugin = createSearchPlugin({
  osNamesURL: 'https://api.os.uk/search/names/v1/find?query={query}&key=YOUR_API_KEY',
  width: '300px'
})

new InteractiveMap('my-map', {
  behaviour: 'inline',
  mapProvider: maplibreProvider(),
  mapStyle: {
    url: 'https://your-tile-url/style.json',
    attribution: 'Your tile attribution'
  },
  center: [-1.6, 53.1],
  zoom: 6,
  containerHeight: '516px',
  plugins: [searchPlugin]
})

<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/search-plugin/index.js"></script>

<script>
const searchPlugin = defra.searchPlugin({
  osNamesURL: 'https://api.os.uk/search/names/v1/find?query={query}&key=YOUR_API_KEY',
  width: '300px'
})

new defra.InteractiveMap('my-map', {
  behaviour: 'inline',
  mapProvider: defra.maplibreProvider(),
  mapStyle: {
    url: 'https://your-tile-url/style.json',
    attribution: 'Your tile attribution'
  },
  center: [-1.6, 53.1],
  zoom: 6,
  containerHeight: '516px',
  plugins: [searchPlugin]
})
</script>