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: ^9.1.0
• ol-contextmenu: ^5.4.0
• ol-ext: ^4.0.15
• 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

9.0.0 (2024-05-12)

Bug Fixes

• ol-overlay: set correct default values as described in the docs (2e9e2a6), closes #346
• ol-source-wmts: add missing optional tileGrid prop (1237fe1)
• ol-vector-layer: watch opacity / visible changes (e9ae6fa), closes #347

Code Refactoring

• ol-layer-*: push layer to correct collection based on parent component injection (ee46969), closes #344 #344

BREAKING CHANGES

• ol-layer-*: These changes may not affect you directly. Previously, for some layer types, a layer was always added to the map, even if the layer component was used within a LayerGroup. This resulted in layers existing multiple times (in the LayerGroup and at the top level (Reported in #344)). Due to the refactoring, all layers are now treated the same (with onMounted and when changing layer properties). 1.) If the layer component is within an ol-layer-group, it is added to the group. 2.) If the layer component is inside an ol-overviewmap-control, it is added to the OverviewMap 3.) If 1) and 2) do not apply, the layer component is added directly to the map