https://github.com/MelihAltintas/vue3-openlayers
Web map Vue 3.x components with the power of OpenLayers
https://github.com/MelihAltintas/vue3-openlayers
hacktoberfest javascript ol openlayers openlayers-maps openlayers-plugins openlayers3 openlayers4 openlayers5 openlayers6 vue vue3 vuejs vuejs-components vuejs3 vuelayers vuemap
Last synced: 6 months ago
JSON representation
Web map Vue 3.x components with the power of OpenLayers
- Host: GitHub
- URL: https://github.com/MelihAltintas/vue3-openlayers
- Owner: MelihAltintas
- License: mit
- Created: 2021-06-12T10:18:16.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-05-05T05:20:35.000Z (7 months ago)
- Last Synced: 2025-05-14T04:10:15.494Z (6 months ago)
- Topics: hacktoberfest, javascript, ol, openlayers, openlayers-maps, openlayers-plugins, openlayers3, openlayers4, openlayers5, openlayers6, vue, vue3, vuejs, vuejs-components, vuejs3, vuelayers, vuemap
- Language: Vue
- Homepage: https://vue3openlayers.netlify.app/
- Size: 67.7 MB
- Stars: 757
- Watchers: 11
- Forks: 142
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-vue-3 - vue3-openlayers - 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. [Live Demo](https://vue3openlayers.netlify.app/demo/) (Packages)
- awesome-vue - vue3-openlayers
- awesome-vue - vue3-openlayers - Vue 3 components to work with OpenLayers. (Components & Libraries / UI Components)
- fucking-awesome-vue - vue3-openlayers - Vue 3 components to work with OpenLayers. (Components & Libraries / UI Components)
- awesome-vue - vue3-openlayers - Vue 3 components to work with OpenLayers. (Components & Libraries / UI Components)
- awesome-openlayers - vue3-openlayers - 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. Docs at https://vue3openlayers.netlify.app/ (External plugins and projects using OpenLayers / Frameworks on top of OpenLayers)
README
# vue3-openlayers
> Web map [Vue](https://vuejs.org/ "Vue Homepage") components with the power of [OpenLayers](https://openlayers.org/ "OpenLayers Homepage")
OpenLayers Useful 3rd party libraries https://openlayers.org/3rd-party/
[](https://app.netlify.com/sites/vue3openlayers/deploys)
[](https://www.npmjs.com/package/vue3-openlayers)
[](https://www.npmjs.com/package/vue3-openlayers)
[](https://www.npmjs.com/package/vue3-openlayers)
[](https://npmcharts.com/compare/vue3-openlayers?minimal=true)
[]()
[]()
[]()
[]()
[](https://stackblitz.com/edit/vue3-openlayers-template)
## Links
6 hours of debugging can save you 5 minutes of reading documentation :) please read the doc :)
## - [Documentation Netlify](https://vue3openlayers.netlify.app)
## Install
```bash
# install current vue3-openlayers version
npm install vue3-openlayers
or
yarn add vue3-openlayers
```
[](https://github.com/MelihAltintas/vue3-openlayers/stargazers)
## 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](https://openlayers.org/)**: `^10.0.0`
- **[ol-contextmenu](https://github.com/jonataswalker/ol-contextmenu)**: `^5.4.0`
- **[ol-ext](https://github.com/Viglino/ol-ext#,)**: `^4.0.21`
- **[vue](https://github.com/vuejs/core/tree/main/packages/vue#readme)**: `^3.4.0`
## Run End-to-End Tests with [Playwright](https://playwright.dev)
```bash
# 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.
```bash
docker compose run screenshot-update
```
## License
**MIT** (c) Melih Altıntaş