Integrate openlayers in vuejs application

Question

Has anyone have any experience in integrating Openlayers in a Vuejs application?

I need to display some layers on a Vuejs app.

Cheers,

Answer 1

Yes, I'm currently rewriting an existing application with Vuejs and OpenLayers 4. The app has forms and an almost-fullscreen map (similar to google map's routing feature).

The OL npm lib exposes OpenLayers as ES2015 files, which works nicely with common vuejs setups. I created a wrapper component which initializes the map object in mounted() and stores it as a property.

OL won't pick up propagated changes on your component's properties, so you might need to use watchers on the properties (or event handlers) to call OL functions whenever something changes.

One issue I had was map disortion when sidepanels opened/closed and therefore changed the map's viewport. Listening to an event and calling map.updateSize() solved that.

There is even a OL plugin for vuejs, vuejs-openlayers . I didn't test it though, since integrating OL was quite easy anyway.

Answer 2

You could use this Vue.js UI library that integrates Openlayers with Vue.js which is called VueLayers :

Installation

npm install vuelayers

Usage

import Vue from 'vue'
import VueLayers from 'vuelayers'
import 'vuelayers/lib/style.css' // needs css-loader

Vue.use(VueLayers)

// or individual components

import Vue from 'vue'
import { Map, TileLayer, OsmSource, Geoloc } from 'vuelayers'
import 'vuelayers/lib/style.css' // needs css-loader

Vue.use(Map)
Vue.use(TileLayer)
Vue.use(OsmSource)
Vue.use(Geoloc)

Answer 3

Here is a simple example of an OL map inside a Vue component:

<template>
  <div id="mapOL">
    Hi, i'm a map!
  </div>
</template>

<script>
  import Map from 'ol/Map.js';
  import View from 'ol/View.js';
  import TileLayer from 'ol/layer/Tile.js'  
  import OSM from "ol/source/OSM"

  export default {
    name: "map-openlayers",
    mounted() {
      let map = new Map({
        target: 'mapOL',
        layers: [
          new TileLayer({source: new OSM()})
        ],
        view: new View({
          center: [0, 0],
          zoom: 2
        })
      })
    }
  }
</script>

<style scoped lang="stylus">
  @import "~ol/ol.css"
  #mapOL
    height 300px
</style>