fitBounds to markers

[nickforddev]

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!

[KoRiGaN]

Why are you trying to retrieve markers from the map as the data comes originally from collection.models?

My advice would be to calculate bounds from collection.models as a computed property.

Let me know if that helps.

[KoRiGaN]

Closing as no answer for a while.

[nickforddev]

Sorry, yes your approach was the correct one, thank you!

[KoRiGaN]

Good to hear it works for you! 👍

[ThomasKientz]

@nickforddesign @KoRiGaN How did you do ?

I have tried with no success

<template>
    <l-map
      ref="map"
      @ready="onReady"
    >
      <l-marker
        v-for="(marker, idx) in markers"
        :key="'marker-' + idx"
        :lat-lng="marker.location"
      />
    </l-map>
</template>

<script>
import {
  LMap,
  LMarker,
} from 'vue2-leaflet'
import { featureGroup } from 'leaflet'

export default {
  // [...]
  methods: {
    onReady() {
      if (this.markers.length) {
        this.$nextTick(() => {
          const group = featureGroup(this.markers) // => throw "TypeError: layer.addEventParent is not a function"
          this.$refs.map.mapObject.fitBounds(group.getBounds())
        })
      }
    },
  },
}
</script>

[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 :P