https://github.com/jakobmiksch/vue-ol-comp

A composable connecting Vue with OpenLayers
https://github.com/jakobmiksch/vue-ol-comp

gis openlayers vue vue3 webmap webmapping

Last synced: about 1 year ago
JSON representation

A composable connecting Vue with OpenLayers

• Host: GitHub
• URL: https://github.com/jakobmiksch/vue-ol-comp
• Owner: JakobMiksch
• License: mit
• Created: 2023-10-22T20:32:01.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2025-02-01T08:28:08.000Z (over 1 year ago)
• Last Synced: 2025-03-21T17:08:23.037Z (about 1 year ago)
• Topics: gis, openlayers, vue, vue3, webmap, webmapping
• Language: Vue
• Homepage: https://jakobmiksch.github.io/vue-ol-comp/
• Size: 1.11 MB
• Stars: 10
• Watchers: 1
• Forks: 1
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# vue-ol-comp

[![NPM Version](https://badgen.net/npm/v/vue-ol-comp)](https://www.npmjs.com/package/vue-ol-comp) 

[![Lint](https://github.com/JakobMiksch/vue-ol-comp/actions/workflows/lint.yml/badge.svg)](https://github.com/JakobMiksch/vue-ol-comp/actions/workflows/lint.yml) 

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) 

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/github/JakobMiksch/vue-ol-comp) 

This [composable](https://vuejs.org/guide/reusability/composables) exposes reactive variables to make the state of an [OpenLayers](https://openlayers.org/) 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](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

import { fromLonLat } from 'ol/proj'

import { onMounted } from 'vue'

import { useOl, OlMap } from 'vue-ol-comp'

import TileLayer from 'ol/layer/Tile'

import OSM from 'ol/source/OSM'

const { map } = useOl()

onMounted(() => {

  map.value.addLayer(

    new TileLayer({

      source: new OSM()

    })

  )

  map.value.getView().setCenter(fromLonLat([11, 47]))

  map.value.getView().setZoom(15)

})

```

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](https://github.com/wegue-oss/wegue/) or described in this [blog post](https://spatial-dev.guru/2022/02/20/integrating-openlayers-map-with-vuejs-create-map-part-1/)

- using a **component library** like [vue3-openlayers](https://github.com/MelihAltintas/vue3-openlayers) (for Vue 3) or [vuelayers](https://github.com/ghettovoice/vuelayers) (for Vue 2) that let's one configure the map via the `` section