vue3-openlayers

vue3-openlayers

Web map Vue components with the power of OpenLayers

OpenLayers Useful 3rd party libraries https://openlayers.org/3rd-party/

Links

6 hours of debugging can save you 5 minutes of reading documentation :) please read the doc :)

- Documentation Netlify

Install

# install current vue3-openlayers version
npm install vue3-openlayers
or
yarn add vue3-openlayers

Overview

vue3-openlayers is components library that brings the powerful OpenLayers API to the Vue3 reactive world. It can display maps with tiled, raster or vector layers loaded from different sources.

Requirements

• ol: ^10.0.0
• ol-contextmenu: ^5.4.0
• ol-ext: ^4.0.21
• vue: ^3.4.0

Run End-to-End Tests with Playwright

# Install browsers for the first run
npx playwright install

# Runs the end-to-end tests
npm run test:e2e

# Runs the end-to-end tests in interactive UI mode (for local development)
npm run test:e2e:ui

# Runs the tests in debug mode
npm run test:e2e:debug

# Runs the tests in trace mode (to time-travel between actions)
npm run test:e2e:trace

# Serve test report (and inspect trace when)
npm run test:e2e:report

# Runs the tests only on Chromium
npm run test:e2e -- --project=chromium
# Runs the tests of a specific file
npm run test:e2e -- tests/example.spec.ts

# Run tests and record new screenshots locally using the same image as in CI env
docker compose run screenshot-update

Screenshots

Please note, when recording screenshots locally the may differ from the platform (linux) in CI. This results in:

• a: a different file name
• b: a slightly different screenshot

So tackle this issue, please always record screenshots locally using the docker compose file which will use the same image/platform as in CI.

docker compose run screenshot-update

License

MIT (c) Melih Altıntaş

Changelog

11.3.4 (2025-02-24)

Bug Fixes

• ol-*-layer: add missing prop displayInLayerSwitcher (ff83346), closes #412
• ol-tile-layer: do not spread props into toRefs (5dae1c3), closes #410