How to use custom controls?

[cm-cita]

Hello,

first thank you very much for porting Openlayers to VueJS.

Is there any possibility to use something like
var sidebar = new ol.control.Sidebar({ element: 'sidebar', position: 'right' });
(https://github.com/Turbo87/sidebar-v2)

var search = new ol.control.Search({ ... });
(http://viglino.github.io/ol-ext/examples/search/map.control.searchfeature.html)

Thank you very much.

[ghettovoice]

Hi, @cm-cita !
VueLayers doesn't have some component based abstraction over OpenLayers controls now.
But it is possible to add any custom control, or whatever you want directly through OpenLayers API.
Each VueLayers component have public this.$... property that references underlying OpenLayers object (vl-map has $map ol.Map https://github.com/ghettovoice/vuelayers/blob/master/src/component/map/map.vue#L412, vl-view has $view ol.View and etc), and two promises (https://github.com/ghettovoice/vuelayers/blob/master/src/mixin/ol-cmp.js#L197):
$createPromise - resovles when underlying OpenLayers object created, $mountPromise - resolves when OpenLayers object added to parent object. You can use this to add any OpenLayers related features:

<template>
  <div>
    <vl-map ref="map" :load-tiles-while-animating="true" :load-tiles-while-interacting="true">
      <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>

      <vl-layer-tile id="osm">
        <vl-source-osm></vl-source-osm>
      </vl-layer-tile>
    </vl-map>
  </div>
</template>

<script>
  export default {
    data () {
      return { 
        zoom: 2,
        center: [0, 0],
        rotation: 0,
      }
    },
    mounted () {
      // get vl-map by ref="map" and await ol.Map creation
      this.$refs.map.$createPromise.then(() => {
        this.$refs.map.$map.addControl(new ol.control.Sidebar({ element: 'sidebar', position: 'right' }))
        ...
      })
    },
  }
</script>

Over time, I will describe this in the documentation.

[cm-cita]

A big thank you, for your fast reply, you are awesome!

[cm-cita]

I have still a problem with this. I use Vue with NUXT, can it be because of that?

I added the import VueLayers and Vue.use as plugin in NUXT.

Here the error which I get:

Any idea?

[ghettovoice]

Show me source of your index.vue file, please

[cm-cita]

Here is the source of the index.vue, plugin and nuxt config file:

http://content.lu/data/public/1ab4d6

[ghettovoice]

Seems like archive is broken

$ unzip ~/Downloads/LiveMap.zip 
Archive:  /home/ghetto/Downloads/LiveMap.zip
  End-of-central-directory signature not found.  Either this file is not
  a zipfile, or it constitutes one disk of a multi-part archive.  In the
  latter case the central directory and zipfile comment will be found on
  the last disk(s) of this archive.

[cm-cita]

Ohh sorry, here once again:

vue.zip

[ghettovoice]

Now it's ok. You forgot add ref attribute to vl-map tag in template. Try this :

<vl-map ref="map" :load-tiles-while-animating="true" :load-tiles-while-interacting="true" data-projection="EPSG:4326">
....
</vl-map>

[cm-cita]

Now I get the error "index.vue?1c37:73 Uncaught (in promise) ReferenceError: ol is not defined
at index.vue?1c37:73"

[ghettovoice]

It's probably due to this line

var sidebar = this.$refs.map.$map.addControl(new ol.control.Sidebar({ element: 'sidebar', position: 'right' }));

This ol.control.... is undefined in current context.
Just for example, with OpenLayers additional controls

import EventList from '@/components/List/EventList'
import {findPointOnSurface, createStyle, loadingBBox} from 'vuelayers/lib/_esm/ol-ext'
// import from ol package
import ScaleLine from 'ol/control/scaleline'

  export default {
    components: {
      EventList: EventList
    },
    mounted(){
      // get vl-map by ref="map" and await ol.Map creation
      this.$refs.map.$createPromise.then(() => {
        this.$refs.map.$map.addControl(new ScaleLine());
      })
    },
    data () {
      return {
        //controls: sidebar,
        zoom: 11,
        center: [6.15105, 49.60826],
        loadTilesWhileInteracting: true,
        clickCoordinate: undefined,
        selectedFeatures: [],
        baseLayers: [
          {
            name: 'osm',
            title: 'OpenStreetMap',
            visible: true,
          },
          {
            name: 'bing-maps',
            title: 'Bing Maps',
            apiKey: 'ArbsA9NX-AZmebC6VyXAnDqjXk6mo2wGCmeYM8EwyDaxKfQhUYyk0jtx6hX5fpMn',
            imagerySet: 'AerialWithLabels',
            visible: false,
          },
        ],
      }
    },
    methods: {
      //
    },
    layout: 'openlayers'
  }

What about Sidebar plugin , as I can see here, it doesn't support any module system and requires global ol variable, to use it you need an extra webpack setup (webpack imports loader can help). You need to provide ol.control. global variable for this plugin.

Extensions from https://github.com/Viglino/ol-ext supports module systems, modern ol package and can be easily used. https://unpkg.com/ol-ext@2.0.1/

[ghettovoice]

I close, if you have another questions, open new one