Problem when add a new control on map using OpenLayers and Vue.js

Question

I'm trying to add a custom control on my map using the OpenLayers with Vue.js.

I have the component Explore.vue that creates my "map" (olmap) using the OL and I pass it through binding to the child component LeftSideBar2.vue.

When I try to add a new control in my map, the Vue shows the following error:

[Vue warn]: Error in mounted hook: "TypeError: this.olmap.addControl is not a function"

Does someone know what is happening?

My files are:

Explore.vue:

Template:

<explore-left-side-bar2 v-bind:olmap="olmap"/>

Script:

export default {
  name: 'Explore',
  data () {
    return {
      olmap: {}
    }
  },
  methods: {
    initComponent: function () {
      // eslint-disable-next-line
      this.olmap = new Map({
        target: 'map',
        layers: [
          baseLayerGroup
        ],
        view: new View({
          projection: 'EPSG:4326',
          center: [0, 0],
          zoom: 5
        })
      })
    }
  },
  mounted: function () {
    this.initComponent()
  },
  components: {
    ExploreLeftSideBar2
  }
}

LeftSidebar2.vue:

Script:

export default {
  name: 'LeftSideBar2',
  props: ['olmap'],
  data () {
    return {
    }
  },
  methods: {
    initComponent: function () {
      var sidebar = new Sidebar({ element: 'ol-sb-sidebar', position: 'left' })
      this.olmap.addControl(sidebar)      
    }
  },
  mounted: function () {
    this.initComponent()
  },
  components: {
    LeftSideBarLayerTree
  }
}

score 0 · Answer 1 · answered Mar 14 '19 at 20:27

It looks like you have bound an Object olmap={}to a component which in returns calls a function this.olmap.addControls() that doesn't exist on the object which you pass as a prop. I think you are trying to do instead, is call addControls() on the OpenLayers.Map instance.

score 0 · Answer 2 · answered Mar 14 '19 at 20:27

As this answer explains, mounted hooks are called for child components before their parents, meaning that LeftSidebar2.vue will call this.olmap.addControl(sidebar) when olmap is still the default empty object declared in the data method of Explore.vue.

There are a cuople of ways you could work around this:

You could initialise olmap in the created hook of Explore.vue rather than the mounted hook.

or

You could use a v-if to exclude LeftSidebar2.vue until after olmap has been initialised.

Problem when add a new control on map using OpenLayers and Vue.js

2 Answers2