fitBounds to markers

Great Vue plugin!

Apologies if this isn’t a question specific to your plugin, I’m not sure if there’s an easier way to do this. I am struggling figuring out how to retrieve all markers on the map in order to fit the bounds of the map automatically. I’ve looked at this.$ref.map.mapObject._layers, and saw suggestions online to look for layers that have a .feature property, but despite having a marker/markers on the map, I’m not seeing anything that looks like the marker instance. Any suggestions?

I’m also wondering if this will even be possible, if you don’t have a component for FeatureGroup…

<v-map v-if="collection" ref="map" :zoom=-1 :center="[47.413220, -1.219482]">
  <v-tilelayer :url="`https://api.mapbox.com/styles/v1/mapbox/${map_id}/tiles/{z}/{x}/{y}?access_token=${access_token}`" />

  <v-marker-cluster ref="cluster">
    <v-marker
    ref="marker"
    v-for="(model, index) in collection.models"
    v-if="model.acf.location !== null"
    :lat-lng="[model.acf.location.lat, model.acf.location.lng]"
    :key="index">
      <v-popup :content="model.acf.content"></v-popup>
    </v-marker>
  </v-marker-cluster>
</v-map>

this.$refs.map.mapObject.eachLayer(layer => {
  console.log('feature', layer.feature) // undefined
})

Thanks!

[wannymiarelli]

@ThomasKientz You are over-complicating it 😃

Look there https://leafletjs.com/reference-1.6.0.html#latlngbounds

The fitBounds accept an array of [lat,lng] items, so it is as simple as looping over your markers getting lat and long with a simple .map function, as a track

this.$refs.map.mapObject.fitBounds(this.markers.map(m => { return [m.lat, m.lng] }))

[tripflex]

@wannymiarelli thanks that works, i was doing the same thing … overcomplicating things when not even needed 😛