Package detail

vue3-openlayers

MelihAltintas18.7kMIT11.6.2

OpenLayers Wrapper for Vue3

front-end, web, vue, vuejs

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 :)

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.

Alt Text

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.6.1 (2025-05-05)

Bug Fixes

ol-*-layer: support missing preview option (1c3e85c), closes #423
ol-interaction-transform: ol-interaction-transform not working (f027dca)

11.6.0 (2025-05-03)

Bug Fixes

import correctly (9c6fa3d)
ol-layer-*: handle undefined layer opacity correctly (#425) (84943c8)

Features

ol-style-text: support all ol props (c1d050f), closes #411

11.5.0 (2025-02-26)

Features

export all types (8a9819c)

11.4.0 (2025-02-26)

Features

export utility functions and types LayersCommonProps, layersCommonDefaultProps and useLayerDefaults for layers (ae1f2f1)

11.3.5 (2025-02-26)

Bug Fixes

ol-*-layer: make displayInLayerSwitcher prop optional (#415) (2298ed8)

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

11.3.3 (2025-02-18)

11.3.2 (2025-02-14)

Bug Fixes

ol-layerswitcher-control: support layer properties needed by ol-ext/control/LayerSwitcher (9e4da28), closes #405

11.3.1 (2025-02-11)

Bug Fixes

TS typing issues (#400) (198effc), closes #399

11.3.0 (2024-12-17)

Bug Fixes

console warnings (#397) (82aff4c)

Features

OlScalelineControl: support maxWidth option (#390) (d92a7fd)
OlScalelineControl: support all props with defaults from OpenLayers (9451194)

11.2.1 (2024-10-02)

Bug Fixes

apply URL changes on XYZ source (aba4eb6), closes #383
ensure onMounted and inject is only called in setup context (256dd87), closes #385 #382

11.2.0 (2024-09-04)

Bug Fixes

ol-interaction-modify: fix if-clause (58b7006), closes #371

Features

ol-style-fill: add fill color gradient (#375) (dd2aebd)
ol-style-fill: correctly setup conic gradient (#375) (580591b)
ol-style-fill: prevent re-calculation of gradient on watched changes (#375) (f2a740e)

11.1.0 (2024-08-09)

Features

ol-interaction-mouse-wheel-zoom: provide new interaction to disable / customize mouse zoom behavior (8846176), closes #356

11.0.1 (2024-08-07)

Bug Fixes

ol-interaction-modify: correctly check for source/features (91a07ca), closes #370

11.0.0 (2024-08-04)

Features

support OpenLayers@10 (c29a966)

BREAKING CHANGES

A minimum version of OpenLayers 10 is now required.

10.3.1 (2024-08-04)

Reverts

Revert "docs(ol-source-*): drop opaque option since it has been removed with OpenLayers 10" (9e6dc68)
Revert "feat: support OpenLayers@10" (7726424)
Revert "chore(deps): update dependencies" (d6199da)

10.3.0 (2024-08-04)

Features

support OpenLayers@10 (129b5e7)

10.2.0 (2024-08-04)

Features

support OpenLayers@10 (3d9201d)

10.1.0 (2024-08-01)

Features

ol-interaction-modify: make source injection optional (30fbcf7), closes #368
ol-interaction-select: use original FilterFunction type from OpenLayers (8226b16), closes #363

10.0.4 (2024-08-01)

Bug Fixes

ol-source-*: re-use existing source on update to bind interactions correctly (7dfd962), closes #364

10.0.3 (2024-08-01)

Bug Fixes

ol-source-*: correctly handle events (7c4bfe0), closes #365

10.0.2 (2024-07-07)

Bug Fixes

ol-interaction-draw: emit events on changed geometry (0363578), closes #361
ol-source-vector: handle correct event addfeature (777d4ab), closes #362
ol-source-xyz: watch for changed props (a9a1c99), closes #359

10.0.1 (2024-06-10)

Bug Fixes

ol-source-vector: call refresh() after url changes (479d765), closes #357
ol-webgl-vector-layer: call make properties reactive (3e77dfe), closes #355

10.0.0 (2024-05-22)

Bug Fixes

update falsy values "0", "false" and "null" (b39d0c6)

Code Refactoring

composables: rename composable useLayerInMapOrLayerGroup into useLayer (3a7835c)
ol-source-*: move common setup into useSource composable (56b386d), closes #354

Features

ol-layer-*: support common events on components (69b37c9)

BREAKING CHANGES

composables: The composable useLayerInMapOrLayerGroup was renamed to useLayer
ol-source-*: The created Source class from the corresponding OpenLayers source isn't wrapped in a computed anymore but in a shallowRef. This will improve the performance and prevent unneeded re-computations. Also, the provided imageLayer references is now wrapped in a Ref which will make it reactive: In case the layer changes, the source is updated and applied to the changed layers reference. This behavior was already default for all layer types:
```
-const layer = inject<ImageLayer<Static> | null>("imageLayer");
+const layer = inject<Ref<ImageLayer<Static>> | null>("imageLayer");
```

9.0.3 (2024-05-19)

Bug Fixes

ensure modified properties are always reactive (e221148), closes #349 #349

9.0.2 (2024-05-19)

Bug Fixes

ol-overlay: set correct default classNames ol-overlay-container ol-selectable (e2ea186), closes #352

9.0.1 (2024-05-17)

Bug Fixes

ol-style: apply style correctly to ol-interaction-* (5408ae3), closes #351

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

8.1.0 (2024-04-27)

Bug Fixes

add missing types for FlatStyleLike (e930496), closes #332
ol-contextmenu-control: use partial options (cbc13da)
prevent providing ol-options multiple times (0f138d1), closes #338

Features

export composables (73c442f)
ol-interaction-pointer: add new pointer interaction (ab675b2), closes #339
ol-style-icon: allow to place icon content in slot (65d970a), closes #295

8.0.0 (2024-04-18)

Code Refactoring

rename components (ea85a6e)

Features

support PascalCase component usage for global plugin installations (861f3ea)

BREAKING CHANGES

Several components have been renamed. Adjustments are only necessary when not consuming these components as a plugin but directly. When using a plugin for global component availability, nothing has been changed. This change was necessary to align the names of directly importable and usable components with the global names provided by the plugins.
<Animations.OLAnimationDrop> was renamed to <Animations.OlAnimationDrop>
<Interaction.OlClusterSelectInteraction> was renamed to <Interaction.OlInteractionClusterselect>
<Interaction.OlDragBoxInteraction> was renamed to <Interaction.OlInteractionDragbox>
<Interaction.OlDragRotateInteraction> was renamed to <Interaction.OlInteractionDragrotate>
<Interaction.OlDragRotateZoomInteraction> was renamed to <Interaction.OlInteractionDragrotatezoom>
<Interaction.OlLinktInteraction> was renamed to <Interaction.OlInteractionLink>
<Interaction.OlSelectInteraction> was renamed to <Interaction.OlInteractionSelect>
<Interaction.OlDrawInteraction> was renamed to <Interaction.OlInteractionDraw>
<Interaction.OlModifyInteraction> was renamed to <Interaction.OlInteractionModify>
<Interaction.OlSnapInteraction> was renamed to <Interaction.OlInteractionSnap>
<Interaction.OlTransformInteraction> was renamed to <Interaction.OlInteractionTransform>
<Layers.OlAnimatedClusterLayer> was renamed to <Layers.OlAnimatedClusterlayer>
<Map.OlGeoLocation> was renamed to <Map.OlGeolocation>
<MapControls.OlFullScreenControl> was renamed to <MapControls.OlFullscreenControl>
<MapControls.OlMousePositionControl> was renamed to <MapControls.OlMousepositionControl>
<MapControls.OlOverviewMapControl> was renamed to <MapControls.OlOverviewmapControl>
<MapControls.OlScaleLineControl> was renamed to <MapControls.OlScalelineControl>
<MapControls.OlZoomSliderControl> was renamed to <MapControls.OlZoomsliderControl>
<MapControls.OlZoomToExtentControl> was renamed to <MapControls.OlZoomtoextentControl>
<MapControls.OlPrintDialogControl> was renamed to <MapControls.OlPrintdialogControl>
<MapControls.OlVideoRecorderControl> was renamed to <MapControls.OlVideorecorderControl>
<MapControls.OlLayerSwitcherControl> was renamed to <MapControls.OlLayerswitcherControl>
<MapControls.OlLayerSwitcherImageControl> was renamed to <MapControls.OlLayerswitcherimageControl>
<Sources.OlSourceBingMaps> was renamed to <Sources.OlSourceBingmaps>
<Sources.OlSourceImageWMS> was renamed to <Sources.OlSourceImageWms>
<Sources.OlSourceOSM> was renamed to <Sources.OlSourceOsm>
<Sources.OlSourceTileArcGISRest> was renamed to <Sources.OlSourceTileArcgisRest>
<Sources.OlSourceGeoTIFF> was renamed to <Sources.OlSourceGeoTiff>
<Sources.OlSourceTileJSON> was renamed to <Sources.OlSourceTileJson>
<Sources.OlSourceTileWMS> was renamed to <Sources.OlSourceTileWms>
<Sources.OlSourceXYZ> was renamed to <Sources.OlSourceXyz>
<Sources.OlSourceWMTS> was renamed to <Sources.OlSourceWmts>

7.0.0 (2024-04-13)

Bug Fixes

ol-*-control: make sure control is updated on property changes (507220d)
ol-map: use correct typings for exposed function forEachFeatureAtPixel (8db77a0)
ol-webgl-vector-layer: pass internal style prop to styles (e3baa82)

chore

set minimum peerDependency of OpenLayers to version 9.1.0 (77e022b)
set minimum peerDependency of vue to version 3.4.15 (cc35ae8)

Code Refactoring

ol-animation-feature: remove unused exported component ol-animation-feature (4190325)

Features

allow to define global options for child plugins and via provide (55f4c1f)

Performance Improvements

prevent watching reactive props continously (7e13440)

BREAKING CHANGES

ol-animation-feature: The component ol-animation-feature was simply exposing the map, vectorLayer and it's passed properties. There was no need to use this component at all and therefore it has been removed. However, when the component was used in the past, make sure to remove it from your template and move the ref's for map and the layer to the correct components.
The minimum version of Vue is now 3.4.15 (npm i vue@^3.4.15)
The minimum version of OpenLayers is now 9.1.0 (npm i ol@^9.1.0)
the composable usePropsAsObjectProperties which is used as foundation in all components has been refactored. Props were watched always deeply and for lot's of components this was done multiple times since the components implement watchers by themselves. However, even if not expected, this may cause some side effects with reactive changes which must be applied for individual components when not implemented and therefore considered as a breaking change. Please check your app carefully when updating to the new major version.

7.0.0-1 (2024-04-12)

chore

set minimum peerDependency of OpenLayers to version 9.1.0 (8ae195c)
set minimum peerDependency of vue to version 3.4.15 (158f00e)

Code Refactoring

ol-animation-feature: remove unused exported component ol-animation-feature (90f082a)

Performance Improvements

prevent watching reactive props continously (45f9326)

BREAKING CHANGES

ol-animation-feature: The component ol-animation-feature was simply exposing the map, vectorLayer and it's passed properties. There was no need to use this component at all and therefore it has been removed. However, when the component was used in the past, make sure to remove it from your template and move the ref's for map and the layer to the correct components.
The minimum version of Vue is now 3.4.15 (npm i vue@^3.4.15)
The minimum version of OpenLayers is now 9.1.0 (npm i ol@^9.1.0)
the composable usePropsAsObjectProperties which is used as foundation in all components has been refactored. Props were watched always deeply and for lot's of components this was done multiple times since the components implement watchers by themselves. However, even if not expected, this may cause some side effects with reactive changes which must be applied for individual components when not implemented and therefore considered as a breaking change. Please check your app carefully when updating to the new major version.

7.0.0-0 (2024-04-11)

Performance Improvements

prevent watching reactive props continously (14af7e0)

BREAKING CHANGES

the composable usePropsAsObjectProperties which is used as foundation in all components has been refactored. Props were watched always deeply and for lot's of components this was done multiple times since the components implement watchers by themselves. However, even if not expected, this may cause some side effects with reactive changes which must be applied for individual components when not implemented and therefore considered as a breaking change. Please check your app carefully when updating to the new major version.

6.5.0 (2024-04-05)

Features

add loading class and document how to show loading spinner (0ada740)
ol-interaction-link: add interaction for sync with URL query params (4fdd742)

6.4.1 (2024-04-03)

Bug Fixes

ol-source-vector: watch for features changes and update source (4125541), closes #312

6.4.0 (2024-04-03)

Features

ol-context-menu-control: propagate events (7c1dd70), closes #325

6.3.2 (2024-03-31)

Bug Fixes

ol-animated-cluster-layer: prevent re-computation of cluster and layer in property changes (c00d992)
ol-source-vector: make property changes reactive (b476468)

6.3.1 (2024-03-30)

Bug Fixes

ol-heatmap-layer: handle property updates correctly (e5bb81e)
ol-layer-group: handle property updates correctly (50462ec)

6.3.0 (2024-03-25)

Bug Fixes

ol-overlay: prevent re-compute overlay, use shallowRef instead and watch property changes (b1bb37e), closes #257

Features

ol-interaction-dragbox: add DragBox component wrapper (3eb1fff), closes #307
ol-vector-layer: add background property (f51cd25)

6.2.1 (2024-03-25)

Bug Fixes

ol-webgl-tile-layer: react on property changes (bdfcab6), closes #319

6.2.0 (2024-03-22)

Bug Fixes

deps: use compatible dependencies for vitest and coverage (69221e7)

Features

ol-profile-control: add control for ol-ext/controls/Profile (#318) (be78e90), closes #269

6.1.2 (2024-03-16)

Bug Fixes

ol-webgl-tile-layer: make TileLayer a computed (974f155), closes #310

6.1.1 (2024-03-14)

Bug Fixes

upgrade ol-contextmenu to v5.4.0 (#311) (c9b7858)

6.1.0 (2024-03-07)

Features

ol-search-control: add search control (#309) (4f529f7), closes #306

6.0.1 (2024-03-07)

Bug Fixes

demo: use valid TileJSON URL (df53716)
ol-source-vector: prevent frequent source re-creation (9bb8777), closes #297
return style in overrideStyleFunction (838d5e3)

6.0.0 (2024-03-06)

Code Refactoring

remove ol-source-webglvector component (0930c70)

BREAKING CHANGES

ol-source-webglvector has been removed in favor of ol-source-vector component. Use ol-source-vector from now on.

5.0.0 (2024-03-06)

chore

update to OpenLayers@v9 (d440029)

Features

remove ol-webgl-points-layer and ol-source-webglpoints components (61950aa)

BREAKING CHANGES

a peerDependency of ol@^9.0.0 and ol-ext@^4.0.15 is now required
components ol-webgl-points-layer and ol-source-webglpoints are removed. Please use ol-webgl-vector-layer and ol-source-vector to display points using WebGL

4.1.0 (2024-03-06)

Bug Fixes

ol-style: add missing return statement in OlStyle (#305) (f87ead7)

Features

provide ol-webgl-points-layer and ol-source-webglpoints components (7c14476), closes #300

4.0.2 (2024-01-23)

Bug Fixes

vite: styles export (8eb3559)

4.0.1 (2023-12-18)

Bug Fixes

ol-image-layer: correctly access and provide layer (3e509db)
ol-webgl-tile-layer: pass correct defaults (994d1b0)

4.0.0 (2023-12-17)

Bug Fixes

ol-style-icon: allow to pass either scale or width/height property (0f3f889), closes #288

chore

update dependencies and peerDependency list (3e9b311)

Code Refactoring

OlSourceTianditu: rename OlSourceTianDiTu to OlSourceTianditu (71beec4), closes #281

BREAKING CHANGES

- Drop support for Node.js Versions 16
requires a peer dependency of ol@^8.2.0
requires a peer dependency of ol-ext@^4.0.13
ol-style-icon: ol-style-icon: the property scale has no longer a default of 1. Please pass a value of one explicitly if needed. The change was needed since the underlying OpenLayers lib want's to either have a scale defined or width/height. Before it wasn't possible to define an icon by width/height since the scale was set by default.
OlSourceTianditu: - renamed OlSourceTianDiTu to OlSourceTianditu

3.2.1 (2023-12-17)

Bug Fixes

handle visibility and opacity changes (733fde8), closes #277

3.2.0 (2023-12-03)

Features

ol-style-text: fill and stroke properties for the text (#283) (111be7c)

3.1.0 (2023-11-08)

Bug Fixes

ol-source-vector-tile: listen to / pass correct events (abe37e9), closes #271

Features

ol-interaction-transform: relay events (350c4e3), closes #270

3.0.0 (2023-10-26)

Bug Fixes

add provided for external module for GeoTIFF and OverviewMap (ac39fb2)
ol-view: re-enable rotation (57c9a95)
demo: use scoped styles and cleanup unused styles (3d7fba4)

Code Refactoring

ol-overviewmap-control: adopt OpenLayers API and fix layers rendering (fd82d1a)
ol-webgl-tile-layer: adopt OpenLayers API and fix layers rendering (4d44b21)

Features

ol-vector-tile-layers: add support for renderMode property (116b576), closes #263
ol-source-geo-tiff: add new source for GeoTIFF (78dc2c6)
ol-animated-clusterlayer: emit all Cluster events (0867d4b)
ol-videorecorder-control: pass-through all props and events from ol-ext (fb99807)
ol-map: feat(ol-map) support all Map events from OpenLayers on component. Newly supported events are:
- change:size
- change:target
- change:view
- rendercomplete Please refer to the OpenLayers docs
ol-videorecorder-control: pass-through all props and events from ol-ext
- if not downloadName is set, the file will not be downloaded but the stop event is fired with the blob data/url.
- all events are now fired. In addition to the already existing start and stop event, you can now also react to the pause and resume event
- docs has been updated

BREAKING CHANGES

ol-webgl-tile-layer: use props and default values from openlayers directly
ol-overviewmap-control: use props and default values from openlayers directly. render component from slot in overview map
ol-overlay all properties are now passed-trough from OpenLayers directly. Their types and default values can be checked-out in the official OpenLayers docs. Potentially this hasn't changed anything yet, but it can in the future, if OpenLayers changes it's API
ol-overlay all events are now fired at component level as defined in OpenLayers. Details:
- elementChanged is now emitted as change:element
- offsetChanged is now emitted as change:offset
- positionChanged is now emitted as change:position
- positioningChanged is now emitted as change:positioning
ol-view: property center's default value has been removed (it was set [0, 0]) before. Now all default values from OpenLayers are used directly
ol-view: All Events from OpenLayers are emitted as component events directly now. Please change:
- resolutionChanged to change:resolution
- rotationChanged to change:rotation
- rotationChanged to change:rotation
- centerChanged to change:center
- zoomChanged event has been dropped. Please use change:center or change:resolution instead
ol-map: properties with default values are now aligned with all default values from OpenLayers

3.0.0-3 (2023-09-24)

Code Refactoring

ol-overviewmap-control: adopt OpenLayers API and fix layers rendering (fd82d1a)
ol-webgl-tile-layer: adopt OpenLayers API and fix layers rendering (4d44b21)

Features

ol-source-geo-tiff: add new source for GeoTIFF (78dc2c6)

BREAKING CHANGES

ol-webgl-tile-layer: use props and default values from openlayers directly
ol-overviewmap-control: use props and default values from openlayers directly. render component from slot in overview map

3.0.0-2 (2023-09-22)

Bug Fixes

ol-view: re-enable rotation (57c9a95)

3.0.0-1 (2023-09-20)

Features

ol-animated-clusterlayer: emit all Cluster events (0867d4b)

3.0.0-0 (2023-09-20)

Bug Fixes

demo: use scoped styles and cleanup unused styles (3d7fba4)

Features

ol-videorecorder-control: pass-through all props and events from ol-ext (fb99807)
ol-map: feat(ol-map) support all Map events from OpenLayers on component. Newly supported events are:
- change:size
- change:target
- change:view
- rendercomplete Please refer to the OpenLayers docs
ol-videorecorder-control: pass-through all props and events from ol-ext
- if not downloadName is set, the file will not be downloaded but the stop event is fired with the blob data/url.
- all events are now fired. In addition to the already existing start and stop event, you can now also react to the pause and resume event
- docs has been updated

BREAKING CHANGES

ol-overlay all properties are now passed-trough from OpenLayers directly. Their types and default values can be checked-out in the official OpenLayers docs. Potentially this hasn't changed anything yet, but it can in the future, if OpenLayers changes it's API
ol-overlay all events are now fired at component level as defined in OpenLayers. Details:
- elementChanged is now emitted as change:element
- offsetChanged is now emitted as change:offset
- positionChanged is now emitted as change:position
- positioningChanged is now emitted as change:positioning
ol-view: property center's default value has been removed (it was set [0, 0]) before. Now all default values from OpenLayers are used directly
ol-view: All Events from OpenLayers are emitted as component events directly now. Please change:
- resolutionChanged to change:resolution
- rotationChanged to change:rotation
- rotationChanged to change:rotation
- centerChanged to change:center
- zoomChanged event has been dropped. Please use change:center or change:resolution instead
ol-map: properties with default values are now aligned with all default values from OpenLayers

2.0.0 (2023-09-14)

Bug Fixes

allow multiple plugin installation (#247) (9a3b133)
allow using controls as childs of bar (#248) (8d59c76)
correctly remove controls onUnmounted (3756fbb), closes #246

chore

update dependency to openlayers 8.0.0 (a76dd57)

Code Refactoring

ol-source-stadia-maps: replace old ol-stamen component (ff9e373)
ol-style-icon: pass-through properties from OpenLayers (84232e9)
ol-webgl-points-layer: use new flat style format (02b8d1f)

BREAKING CHANGES

ol-webgl-points-layer: use the new introduced flat format from OpenLayers 8
ol-style-icon: properties are passed-through from OpenLayers directly and property imgSize has been removed since it's removed from OpenLayers 8
ol-source-stadia-maps: The new component ol-source-stadia-maps replaced the old ol-source-stamen component. Please checkout the official OpenLayers 8 release notes for further information.
You need to have a peerDependency of ol >= 8.0.0 installed

Features

ol-source-tile-debug: provide new component for TileDebug (b009f7b), closes #250

1.3.0 (2023-09-14)

Bug Fixes

allow multiple plugin installation (#247) (edbbdc3)
allow using controls as childs of bar (#248) (9bc69cd)

Features

ol-source-tile-debug: provide new component for TileDebug (943cc29), closes #250

2.0.0-1 (2023-09-08)

Bug Fixes

correctly remove controls onUnmounted (3756fbb), closes #246

2.0.0-0 (2023-09-04)

chore

update dependency to openlayers 8.0.0 (a76dd57)

Code Refactoring

ol-source-stadia-maps: replace old ol-stamen component (ff9e373)
ol-style-icon: pass-through properties from OpenLayers (84232e9)
ol-webgl-points-layer: use new flat style format (02b8d1f)

BREAKING CHANGES

ol-webgl-points-layer: use the new introduced flat format from OpenLayers 8
ol-style-icon: properties are passed-through from OpenLayers directly and property imgSize has been removed since it's removed from OpenLayers 8
ol-source-stadia-maps: The new component ol-source-stadia-maps replaced the old ol-source-stamen component. Please checkout the official OpenLayers 8 release notes for further information.
You need to have a peerDependency of ol >= 8.0.0 installed

1.2.1 (2023-09-01)

Bug Fixes

remove exported non-existing function forEachLayerAtPixel (27da611)
remove incompatible props and exposed functions (81c6d00), closes #231

1.2.0 (2023-07-26)

Features

add ol-vector-tile-layer and ol-source-vector components (#229) (d7b4c0d), closes #228

1.1.0 (2023-07-25)

chore(maintenance): update dependencies (258e396)
docs(ol-map): add documentation for prop (b54312c)
fix(ol-feature): prevent unresponsive map lag (989bc90)
fix(ol-zone-control): define props with default values as optional (8275202)
docs(ol-interaction-snap): add demo case for draw interaction (e588a5f)
Update animatedclusterlayer, improve wording and fluency of explanation (#226) (3191963)
docs(ol-geolocation): display icon position correctly (6ae205b)
feat(ol-style-text): added backgroundFill and backgroundStroke props (#223) (6f521c9)

1.0.1 (2023-07-18)

chore: disable eslint for process access in version script (78455b0)
docs: add note for output.globals (c4c6d0f)
fix(build): update vite-plugin-dts and configure output.globals (#218) (fe739c4)
refactor(ol-view): use ViewOptions interface and remove unneeded composable (5d139eb)
refactor: remove unused useLayerControl (3ea0a99)
fix(ol-geolocation): prevent Extraneous non-emits event listeners warning (11c14f1)
docs: describe how to access ol/Map (5ab6231)
docs: updated contribution guidelines (0c38dc3)
docs: update getting started (65fed43)
chore: update ISSUE_TEMPLATE (a0cf678)
docs: update requirements automatically (cdbd12f)
docs: replace 'Openlayers' with 'OpenLayers' (bd59efc)

1.0.0 (2023-07-11)

Version 1.0.0 was completely refactored and aligned with the features and also BREAKING CHANGES from OpenLayers 7.x.x. Please be sure to checkout the Changelog of OpenLayers as well. Properties are mostly reflected 1:1 from OpenLayers as Component Properties for the related vue3-openlayers components. The same applies for the default values. Deviating properties with their values and description are listed in the documentation for each component.

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 🙌🏼

Package detail

readme

vue3-openlayers

Links

- Documentation Netlify

Install

Overview

Requirements

Run End-to-End Tests with Playwright

Screenshots

License

changelog

11.6.1 (2025-05-05)

Bug Fixes

11.6.0 (2025-05-03)

Bug Fixes

Features

11.5.0 (2025-02-26)

Features

11.4.0 (2025-02-26)

Features

11.3.5 (2025-02-26)

Bug Fixes

11.3.4 (2025-02-24)

Bug Fixes

11.3.3 (2025-02-18)

11.3.2 (2025-02-14)

Bug Fixes

11.3.1 (2025-02-11)

Bug Fixes

11.3.0 (2024-12-17)

Bug Fixes

Features

11.2.1 (2024-10-02)

Bug Fixes

11.2.0 (2024-09-04)

Bug Fixes

Features

11.1.0 (2024-08-09)

Features

11.0.1 (2024-08-07)

Bug Fixes

11.0.0 (2024-08-04)

Features

BREAKING CHANGES

10.3.1 (2024-08-04)

Reverts

10.3.0 (2024-08-04)

Features

10.2.0 (2024-08-04)

Features

10.1.0 (2024-08-01)

Features

10.0.4 (2024-08-01)

Bug Fixes

10.0.3 (2024-08-01)

Bug Fixes

10.0.2 (2024-07-07)

Bug Fixes

10.0.1 (2024-06-10)

Bug Fixes

10.0.0 (2024-05-22)

Bug Fixes

Code Refactoring

Features

BREAKING CHANGES

9.0.3 (2024-05-19)

Bug Fixes

9.0.2 (2024-05-19)

Bug Fixes

9.0.1 (2024-05-17)

Bug Fixes

9.0.0 (2024-05-12)

Bug Fixes

Code Refactoring

BREAKING CHANGES

8.1.0 (2024-04-27)

Bug Fixes

Features

8.0.0 (2024-04-18)