vue-ol-comp

This composable exposes reactive variables to make the state of an OpenLayers map available in Vue. 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: https://jakobmiksch.github.io/vue-ol-comp/

Usage

# install
npm install vue-ol-comp

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

<script setup lang="ts">
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)
})
</script>

The map can be added to any component like this:

<template>
  <OlMap :style="{ width: '500px', height: '100px' }"/>
</template>

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.

# install dependencies
npm install

# run the development application
npm run dev

The application will be accessible at http://localhost:5173/

Alternatives 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 <template> section