Basic map

Embed an interactive map directly on the page, allowing users to explore and interact with the map without leaving the current context.

The map requires JavaScript to be enabled.

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

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

<script src="/your-assets-path/interactive-map/index.js"></script>
<script src="/your-assets-path/maplibre-provider/index.js"></script>

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