vue3 openlayers

Web map Vue 3.x components with the power of OpenLayers

266
28
Vue

vue3-openlayers

Web map Vue components with the power of OpenLayers

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

Netlify Status
NPM version
NPM Minified Size
NPM Minzipped Size

Downloads
Github Open Issiues
Github Closed Issiues
GitHub forks
GitHub Stars

Stackblitz Starter Template


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

Stargazers repo roster for @MelihAltintas/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.

Alt Text

Requirements

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 © Melih Altıntaş