<my-map /> is an OpenLayers-powered map to support drawing and modifying red-line boundaries. Other supported modes include: highlighting an OS Feature that intersects with a given address point; clicking to select and merge multiple OS Features into a single boundary; and displaying static point or polygon data. Events are dispatched with the calculated area and geojson representation when you change your drawing.
<address-autocomplete /> fetches addresses in a given UK postcode using the OS Places API and displays them using GOV.UK's accessible-autocomplete component. An event is dispatched with the OS record when you select an address.
These web components can be used independently or together following GOV.UK's Address lookup design pattern.
Documentation & examples
- Interactive web component docs oslmap.netlify.app
- CodeSandbox (note: update the CDN script with a version number for new features)
Find these components in the wild, including what we're learning through public beta user-testing, at https://www.ripa.digital/.
.env.localand replace the values - or simply provide your API keys as props
- Install pnpm globally if you don't have it already
npm i pnpm -g
- Install dependencies
- Start development server
vitestin watch mode
pnpm test:uiopens Vitest's UI in the browser to interactively explore logs https://vitest.dev/guide/ui.html
We use Pitsby for documenting our web components. It's simple to configure (
pitsby.config.js plus a
*.doc.js per component), has good support for vanilla web components, and an interactive playground.
pnpm run docsstarts Pitsby in watch mode for local development
pnpm run docsPublishbuilds the site so Netlify can serve it from
This repository is licensed under the Open Government License v3.