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

• Vue version ^3.0.0
• OpenLayers version ^7.3.0

License

MIT (c) Melih Altıntaş

Changelog

Summary (compared to version 0.5.1)

• 🛠️ migrated all components and features to TypeScript
• 👩🏻‍🔧 migrated all components to use <script setup> syntax
• 🗺️ aligned API with OpenLayers 7.4.0
• 📘 updated & restructured the whole documentation
• 🧩 added new components: ol-layer-group, ol-source-tile-json, ol-source-stadia-maps and ol-vector-image-layer
• 🚀 expose all interactions to be able to call access them via ref in templates
• 🐞 lot's of bug fixes
• 📖 improved the documentation
• ✨ better types for improved developer experience

Compability

Please be sure to install the following peerDependencies in your project:

"ol": "^7.4.0",
"ol-contextmenu": "^5.2.1",
"ol-ext": "^4.0.8"

Breaking Changes

general: dropped support for Openlayers 6 and below. Please use Openlayers 7.x.x

general: lot's of property types have been updated to match with the types in Openlayers. This may lead to TypeScript issues that must be fixed. Please have a look at all Changelog notes from the alpha and next releases before.

ol-geolocation: pass-through original events from Openlayers directly and remove legacy events The following events are not emitted anymore and replaced with the events from Openlayers. All new events receive a generic ObjectEvent. This means, changing only the event name in your templates isn't enough, you must adopt the implementations of the handler functions, so the will receive an ObjectEvent as first parameter.

• positionChanged -> change:position
• speedChanged -> change:speed
• headingChanged -> change:heading
• altitudeChanged -> change:altitude
• altitudeAccuracyChanged -> change:altitudeAccuracy
• accuracyGeometryChanged -> change:accuracyGeometry

Please refer to the official Openlayers docs for Geolocation for details of the emitted event data format.

Special Thanks 👏🏼

Special thanks goes to:

• @MelihAltintas for creating this awesome project, making it open source and enable other maintainers (like @d-koppenhagen) to improve it
• @mathiash98 for digging deep into the code and fixing tricky issues like #128 and #175
• @209, for the time invested and the laborious migration of the code base (PR https://github.com/MelihAltintas/vue3-openlayers/pull/149 was the basis for all the related commits)
• @lukas-zaugg and @pjreed for other important bug fixes and new features
• all other people who were not mentioned here but who also contributed to version 1.0.0 with their questions and issues 🙌🏼