Snapping the map to the bounds of the geojson layer

[timwis]

Hey, just wanted to see if you had advice for snapping the map to the boundaries of the geojson layer? I know how I'd do it in vanilla JS, but since the geojson is initialized inside a child component, I'm not sure the best place to hook into it in order to fire the .getBounds() and .fitBounds() calls. My guess is to do it on mounted and again on updated using a ref to the map and geojson layer but wanted to see if this was already thought through by chance?

[KoRiGaN]

Hi @timwis,

I all depends where you get you geojson data from. If it's already there you can do it in the on mounted.
If you get it from an async api then you can do it on the call back.

I you can create an js fiddle example, it would be easier to understand and help.

Cheers,

Mickaël

[timwis]

Thanks for your reply. Here's my code to illustrate:
https://github.com/CodeForPhilly/philly-ward-leaders/blob/v2/src/components/ward-map.vue

Once the boundaries are set (or updated), I'd like the map to snap to their bounds. Since they're passed via prop, my component has no idea that they're fetched asynchronously.

[KoRiGaN]

Have you tried watchers ?

watch: {
// whenever boundaries changes call map update
boundaries: function (newBoundaries) {
this.$refs.map.fitBounds(newBoundaries.getBounds());
}
},

[timwis]

That sounds perfect, thanks!

[timwis]

FYI, watch didn't quite work because it's executed prior to the DOM updates, so this.$refs.geojsonLayer is not defined yet. I ended up calling it during the updated lifecycle hook.