Releases: MelihAltintas/vue3-openlayers
Release 12.1.1
Release 12.1.0
Release 12.0.2
Release 12.0.1
Release 12.0.0
12.0.0 (2025-08-30)
🚨 Breaking Changes
peer dependencies
The project uses now a minimum node version of 22.0.0.
Also the following minimum peerDependencies are required:
- ol@^10.6.0
- ol-contextmenu@^5.5.0
- ol-ext@^4.0.34
- vue@3.5.0
fix(ol-swipe-control): explicitly set layers and rightLayers
Before, only the second passed layer was added to the right side. Now you can explicitly pass (multiple) layers for the left (or top) using layers and for the right (bottom) using rightLayers.
With this version ol-swipe-control:
property layerList has been removed and splitted into layers and rightLayers.
Please pass explicitly layers for the left side (or top, depending on the orientation) and rightLayers for the right side (or bottom, depending on the orientation)
Tree-Shaking Support & New Import Structure
- Full tree-shaking support: You can now import only the modules you need, significantly reducing bundle size.
- New modular import syntax: Import components from specific subpaths instead of the main package.
Migration Examples:
// ❌ Old import syntax (v11 and below)
import { OlMap, OlTileLayer, OlSourceOSM } from "vue3-openlayers";
// ✅ New import syntax (v12+)
import { OlMap } from "vue3-openlayers/map";
import { OlTileLayer } from "vue3-openlayers/layers";
import { OlSourceOSM } from "vue3-openlayers/sources";
import { OlFullScreenControl } from "vue3-openlayers/controls";
import { OlStyle } from "vue3-openlayers/styles";
import { OlInteractionSelect } from "vue3-openlayers/interactions";Component Renaming for Consistency
All components now use consistent PascalCase naming. Duplicate files with inconsistent casing have been removed.
Source Components:
- OlSourceOsm➡️ renamed to- OlSourceOSM
- OlSourceBingmaps➡️ renamed to- OlSourceBingMaps
- OlSourceGeoTiff➡️ renamed to- OlSourceGeoTIFF
- OlSourceImageWms➡️ renamed to- OlSourceImageWMS
- OlSourceTileArcgisRest➡️ renamed to- OlSourceTileArcGISRest
- OlSourceTileJson➡️ renamed to- OlSourceTileJSON
- OlSourceTileWms➡️ renamed to- OlSourceTileWMS
- OlSourceWmts➡️ renamed to- OlSourceWMTS
- OlSourceXyz➡️ renamed to- OlSourceXYZ
Map Controls:
- OlFullscreenControl➡️ renamed to- OlFullScreenControl
- OlLayerswitcherControl➡️ renamed to- OlLayerSwitcherControl
- OlLayerswitcherimageControl➡️ renamed to- OlLayerSwitcherImageControl
- OlMousepositionControl➡️ renamed to- OlMousePositionControl
- OlOverviewmapControl➡️ renamed to- OlOverviewMapControl
- OlPrintdialogControl➡️ renamed to- OlPrintDialogControl
- OlScalelineControl➡️ renamed to- OlScaleLineControl
- OlVideorecorderControl➡️ renamed to- OlVideoRecorderControl
- OlZoomsliderControl➡️ renamed to- OlZoomSliderControl
- OlZoomtoextentControl➡️ renamed to- OlZoomToExtentControl
Interactions:
- OlInteractionClusterselect➡️ renamed to- OlInteractionClusterSelect
- OlInteractionDragbox➡️ renamed to- OlInteractionDragBox
- OlInteractionDragrotate➡️ renamed to- OlInteractionDragRotate
- OlInteractionDragrotatezoom➡️ renamed to- OlInteractionDragRotateAndZoom
Layers:
- OlAnimatedClusterlayer➡️ renamed to- OlAnimatedClusterLayer
Map Components:
- OlGeolocationcomponent location/naming has been updated
Styles No Longer Auto-Imported
- Styles are no longer automatically imported with the package
- You must explicitly import both OpenLayers and vue3-openlayers styles
// Required imports for styles
import 'ol/ol.css';
import 'vue3-openlayers/vue3-openlayers.css';Available Import Paths
The following subpaths are now available for tree-shaking:
- vue3-openlayers/animations
- vue3-openlayers/composables
- vue3-openlayers/controls
- vue3-openlayers/geometries
- vue3-openlayers/helpers
- vue3-openlayers/interactions
- vue3-openlayers/layers
- vue3-openlayers/map
- vue3-openlayers/sources
- vue3-openlayers/styles
🔧 Migration Guide
- Update imports: Replace single-package imports with subpath imports
- Fix component names: Update any components using the old inconsistent casing
- Add style imports: Explicitly import CSS files where needed
- Review bundle: Take advantage of smaller bundle sizes with selective imports
Bug Fixes
✨ Other Changes
- Internal refactoring for better modularity and future maintenance
- Documentation and examples updated to reflect new import patterns
- Improved TypeScript support with better type definitions for tree-shaken imports
- package.jsonexports configured for all new subpaths
- Removed duplicate component files to eliminate confusion