vue-ol-comp


This composable exposes reactive variables to make the state of an OpenLayers map available across different Vue components. It provides easy access to commonly used variables such as map, layers, center, extent, zoom, pointerCoordinate, pointerPixel, and more. See src/composables/useOl.ts for implementation details.

Demo application:

Usage

``shell


install


npm install vue-ol-comp
`

Initialize or edit the map in any component, for example in App.vue:

`vue

`

The map can be added to any component like this:

`vue

`

Make sure ol/ol.css is imported in your CSS.

Development

The development is done using a demo app, where all features can directly be tested.

`shell


install dependencies

npm install

run the development application

npm run dev
`

The application will be accessible at

Alternative ways to use OpenLayers in Vue

- directly without any additional library. This is done in the application template Wegue or described in this blog post
- using a component library like vue3-openlayers (for Vue 3) or vuelayers (for Vue 2) that let's one configure the map via the