7

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

I need to display some layers on a Vuejs app.

Cheers,

Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
Wesley
  • 133
  • 1
  • 8

3 Answers3

5

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.

tony19
  • 125,647
  • 18
  • 229
  • 307
dube
  • 4,898
  • 2
  • 23
  • 41
  • 1
    Now there is also other library for using OpenLayers with Vue: https://github.com/ghettovoice/vuelayers. – Orienteerix Jul 05 '18 at 11:09
  • Thank you for valuable info. I ll try to integrate OpenLayers 5 with Vue/Vuetify and post some questions/results if I stumble across some problems or solutions on that matter :) – Svinjica Aug 19 '18 at 20:41
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)
Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
1

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>
Pablo
  • 410
  • 5
  • 12