Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Padding options are not passed to fitBounds call

See original GitHub issue

Description

padding options are not always used, e.g. https://github.com/vue-leaflet/Vue2Leaflet/blob/5726da2953d23c780e44f8504f96ce3947053e69/src/components/LMap.vue#L206

It should be:

this.mapObject.fitBounds(this.bounds, this.fitBoundsOptions);

Live Demo

http://jsfiddle.net/Lje19v7w/2/

Steps to Reproduce

provide padding-top-left option to l-map component.
observe map

Expected Results

A padding should be applied to the map view.

Actual Results

No padding is applied.

Browsers Affected

(must be all of them as it’s missing the js code, but I only saw it on firefox)

Chrome
Firefox
Edge
Safari 9
Safari 8
IE 11

Versions

(the versions from the forked jsfiddle)

Leaflet: vX.X.X
Vue: v1.0.3
Vue2Leaflet: v1.0.1 (oh the jsfiddle uses quite an old version, but it’s also happening in my projects version which is 2.6.0)

Issue Analytics

State:
Created 3 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

mikeucommented, Feb 2, 2021

@nicksellen yep, thanks for the reminder, I should be able to get that out in the next few days here.

1reaction

mikeucommented, Nov 26, 2020

Thanks for the issue report, @nicksellen ! I see that indeed the computed fitBoundsOptions are not being used in a number of calls to fitBounds in the component.

One thing I’ll point out is that making the update you suggest wouldn’t actually change the behaviour of your fiddle, since this.bounds will be null in that example, so the call to fitBounds in mounted isn’t getting made anyway. Nevertheless, I agree that it would be more intuitive if the bounds options applied on mount when the bounds were specified.

@DonNicoJs do you know if there was a historical reason that this wasn’t done? Or why the LMap methods setCrs and fitBounds both call mapObject.fitBounds with hard coded options objects instead of using this.fitBoundsOptions?

https://github.com/vue-leaflet/Vue2Leaflet/blob/5726da2953d23c780e44f8504f96ce3947053e69/src/components/LMap.vue#L321-L331

What are your thoughts on changing some or all of these calls? I can put a PR together quickly enough if we decide we want to, but I feel I could use a little more context on why the existing options are set the way they are, first. Especially since it’s a change that would alter the behaviour of maps in existing apps.

Top Results From Across the Web

Google Maps API 3 fitBounds padding - ensure markers are ...

Leaftlet has an option to add padding to fitBounds, but Google Maps does not. Sometimes the northmost markers partially hide above the viewport....

Google Maps JavaScript API V3 Reference

This is an index of all the classes, methods, and interfaces in the Maps JavaScript API version 3.51 (weekly channel). This reference is...

Properties and options | Mapbox GL JS

Options for setting padding on calls to methods such as Map#fitBounds, Map#fitScreenCoordinates, and Map#setPadding. Adjust these options to set the amount ...

Properties and options | MapLibre GL JS Docs

Options for setting padding on calls to methods such as Map#fitBounds, Map#fitScreenCoordinates, and Map#setPadding. Adjust these options to set the amount ...

Google Maps fitBounds not applying padding when only one ...

var bounds = new google.maps.LatLngBounds(); bounds.extend(new google.maps.LatLng(lat, lng)); //this line is executed inside a loop for every place map.