How to fit view from extents?

Hi, two stage problem.

1. If I have working features and then try to wrap them in a vectorsource, the features disappear:

    // Add marker for vehicle
    vl-layer-vector
      vl-source-vector(ref="vmarkers")
        vl-feature(:id="'v_' + api" v-for="(data, api) in navSatFixData" :key="'v_' + api")
          vl-geom-point(v-if="data && 'longitude' in data" :coordinates="[data.longitude, data.latitude]")
          vl-style-box
            vl-style-circle(:radius="api == activeApi ? 6 : 4")
              vl-style-fill(:color="apis[api]['color-dark']")
              vl-style-stroke(color="#666666" :width="api == activeApi ? 2 : 1")

1. I would then like to use the vectorsource to determine the boundaries and zoom to autofit all the markers into view:

• https://stackoverflow.com/a/37385069 But this.$refs.vmarkers.getExtent() doesn’t exist?

[fnoop]

Just as a followup for anyone who comes across this, the fiddle above uses a 1 second timeout to hopefully wait for the layer features to be fully created on mount but that’s not always the case, and then you get an extents error from openlayers (https://openlayers.org/en/v5.3.0/doc/errors/#25). Instead I use a watcher on my coordinates variable, and also specifically test to make sure the extent is valid:

          // Fetch extents of the vector source layer
          this.viewExtents = this.$refs.vectorSource.$source.getExtent()
          // If there is a finite extent, then fit the view
          if (!this.viewExtents.includes(Infinity)) {
            this.$refs.mapView.$view.fit(this.viewExtents, {
              size: this.$refs.map.$map.getSize(),
              duration: 1000
            })
          }

There are probably lots of ways to do this though.

[ghettovoice]

Hi @fnoop , as for the first problem I have no idea why features are disappear. Can you provide test app that reproduces this behavior?

The second issue: not all methods of the openlayers are implemented in vuelayers components, but you can use original methods from ol object instance.
For vl-source-* components:

// this.$refs.mySource.$source - ol.source.Source
this.$refs.mySource.$source.getExtent()

Take a look for this fiddle https://jsfiddle.net/ghettovoice/br84dgq2/.