OpenLayers Web Components

While there are many great framework-specific OpenLayers wrappers, the goal of this project is to wrap OpenLayers in W3C Web Components, which are a web standard supported by all browsers currently and into the future.

This is a monorepo which contains:

• core OpenLayers elements (incl. map itself) (@openlayers-elements/core)
• common OpenLayers elements (layers, markers, etc) (@openlayers-elements/openlayers-elements)
• Swiss layers from geoadmin.ch (@openlayers-elements/swisstopo-elements)
• Package with bundles for quick and easy usage (@openlayers-elements/bundle)

Features

While extensive, human-friendly documentation is not yet available, be sure to check out the different features supported by the components live:

• Core map features
  • Zooming to layers and features
• OpenStreetMaps
  • DEMO
• Adding features to the map (aka. vector layers)
  • GeoJSON
  • WKT
  • Styling, actual code here
• XYZ Tile layers
  • DEMO
• Map markers
  • DEMO
• Map interactions
  • Select on click
• Adding custom map controls
  • Positioning and styling
• Adding overlays (popups, etc)
  • Basic example
  • Combine with selection
• Swiss layers
  • WMTS source
  • XYZ layers, reprojected to Mercator

API Docs

Storybook also include generated API documentation.

Running Storybook locally

Simply execute

npm install
npm run start

And open http://localhost:6006

You may also start a watch process to update the generated custom elements manifest automatically:

npm -w storybook run custom-elements-manifest:watch

Running tests

If the Chrome binary / driver is installed in your PATH, simply run:

npm run test

To run with a container-based Chrome driver, instead run:

docker compose -f contrib/docker/docker-compose.tests.yml \
  run --rm test