Standard OpenLayers controls

[ghettovoice]

Currently VueLayers doesn't has any components for OpenLayers standard controls. And the only way to work with them is through underlying ol.Map instance of the vl-map component. The main goal is to implement an all standard controls to easily work with them as Vue components:

• [ ] vl-control-attribution -> Attribution
• [ ] vl-control-fullscreen -> FullScreen
• [ ] vl-control-mouse-position -> MousePosition
• [ ] vl-control-overview-map -> OverviewMap
• [ ] vl-control-rotate -> Rotate
• [ ] vl-control-scale-line -> ScaleLine
• [ ] vl-control-zoom -> Zoom
• [ ] vl-control-zoom-slider -> ZoomSlider
• [ ] vl-control-zoom-to-extent -> ZoomToExtent
• [ ] vl-control-default-set (or some another name) - an extra meta component that will includes standard OpenLayers enabled controls ol/control/defaults

Also an basic control mixin as a base type for all controls should be implemented to allow easy extending.

Usage example:

// by default nothing is enabled
<vl-map ...></vl-map>

// map with default set  of controls
<vl-map ...>
  <vl-control-default-set ...></vl-control-default-set>
</vl-map>

// map with custom controls markup
<vl-map ...>
  <vl-control-zoom ...></vl-control-zoom>
  <vl-control-scale-line ...></vl-control-scale-line>
  ...
</vl-map>

[PeterC66]

I have just noticed with v0.11.0-rc.5 that the attribution control is not collapsed and not collapsible. I think that in previous versions it was both collapsed and collapsible. This may be because of something I have done.

It is not much of an issue for me as I know how to change it, so no action needed from you. In any case I see that in this issue you are intending to make it easier to specify, so I can wait for v0.12,

[ghettovoice]

Thanks @PeterC66 ! I'll take this into account

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Swizz]

Before you work on the implementaiton of this one. Can you please allow to provide a Controls Collection to the vl-map controls property ? (same for an Interactions Collection) src/component/map/map.vue#L349-L351

To at least be able to use the following as controls :

import {defaults as defaultControls, ScaleLine} from 'ol/control.js';

...
  data() {
    return {
      controls: defaultControls().extend([
        scaleLineControl
      ]),
    }
  }

[ghettovoice]

Ok, I'll make this, for a while this is a suitable solution

[Swizz]

Possible release ? 😃

[ghettovoice]

Release as v0.11.5, please upgrade

[Swizz]

Works like a charm, big thanks

[iboates]

@ghettovoice I have version 0.12.6 and adding adding <vl-control-scale-line></vl-control-scale-line> just results in an unknown component. Has this changed since 0.11.5?

[ghettovoice]

Hello @iboates ,

No, vuelayers still hasn't separate control components like vl-control-.... . But you still can append any OpenLayers controls in created event handler.

<vl-map @created="mapCreated">...</vl-map>

mapCreated (mapVm) {
  mapVm.addControls(
    new ScaleLine(...),
    new ....,
  )
}

[iboates]

Thank you. How do you import it? I have imported it as

import { ScaleLine } from 'ol/control';

But then I get

AssertionError: value is an instance of Control

...

// in methods
mapCreated (mapVm) {
      mapVm.addControls(
        new ScaleLine({
          units: "metric",
          minWidth: 140,
        })
      )

[ghettovoice]

sorry, I found an error in my example. You should pass array to addControls method:

mapVm.addControls([
    new ScaleLine(...),
    new ....,
  ])

To add single control you can use: mapVm.addControl(new ScaleLine())

UPD: your import of control is correct