add initial bounds as map constructor option #1970 #5518

stepankuzmin · 2017-10-25T10:11:47Z

This PR will add initial bounds as map constructor option according to #1970.

I have a problem implementing the test for this case. Then I manually test new functionality using the debug page, I'm getting the expected result. But the same steps reproduced in test somehow outcomes with different zoom level in the result (1.113 instead of 2.469). What can cause this?

briefly describe the changes in this PR
write tests for all new functionality
document any changes to public APIs
manually test the debug page

mourner · 2017-10-25T11:43:58Z

src/ui/map.js

+                options.center = tr.unproject(nw.add(se).div(2));
+                options.zoom = Math.min(tr.scaleZoom(tr.scale * Math.min(scaleX, scaleY)), options.maxZoom);
+            }
+


Can we reuse the code from fitBounds somehow and avoid copying it?

Actually, we can try to use fitBounds(bounds, { duration: 0 }) instead of manually reproducing fitBounds logic, but we have to resize the map before.

this.resize(); this.fitBounds(options.bounds, { duration: 0 });

Unfortunately, the problem with the test is still there.

I have updated the PR using fitBounds

mourner · 2017-10-25T11:44:28Z

test/unit/ui/map.test.js

+
+        t.end();
+    });
+


But the same steps reproduced in test somehow outcomes with different zoom level

The zoom level depends on the size of the map container.

I took https://github.com/mapbox/mapbox-gl-js/blob/master/test/unit/ui/camera.test.js#L1355 as an example. And it works fine with the zoom level.

mourner · 2018-07-25T08:28:34Z

@stepankuzmin let's get this shipped. Can you rebase on master and fix the build?

stepankuzmin · 2018-07-25T13:35:35Z

Oh, well, It seems that I mixed up rebasing. Should I create separate PR on top of the current master branch?

mourner · 2018-07-25T13:37:58Z

@stepankuzmin I think you can reset the PR branch to the master (git reset --hard origin/master), apply your commit on top and force-push — no need to create a new PR.

stepankuzmin · 2018-07-25T13:57:09Z

Thanks for help, @mourner! It seems that tests are passing now.

mourner · 2018-07-25T14:27:53Z

src/ui/map.js

-                pitch: options.pitch
-            });
+            if (options.bounds) {
+                this.resize();


Why do we need the resize here?

Without resize, Transform's pixelMatrixInverse is undefined here:

mapbox-gl-js/src/geo/transform.js

Line 372 in 11d09c7

vec4.transformMat4(coord0, coord0, this.pixelMatrixInverse);

Maybe we can move following resize call before condition?

mapbox-gl-js/src/ui/map.js

Line 379 in 11d09c7

this.resize();

@stepankuzmin yes, let's do that — seems to be more logical.

mourner · 2018-07-25T15:11:40Z

Hmm, now the query tests fail for some reason :(

stepankuzmin · 2018-07-25T15:15:51Z

That's strange, because test-query now fails on upstream/master too. Same with test-render.

mourner · 2018-08-09T12:28:00Z

@stepankuzmin maybe let's rebase on top of the current master and revisit this?

stepankuzmin · 2018-08-09T12:57:58Z

I've rebased on top of the current master branch, but the tests are still failing. And the problem is that I can't reproduce it locally — all 14 376 tests are passing.

mourner · 2018-08-09T17:54:59Z

@stepankuzmin the unit tests are passing; it's the query and render tests that fail. I can reproduce failures locally, e.g. by running ./build/run-node test/render.test.js 5911. I guess moving resize before the jumpTo somehow messes up map initialization in certain circumstances.

ryanhamley · 2018-09-21T00:27:44Z

Can we pick this back up? I'd love to close out as many PRs as possible. I was just testing it out and rebasing it against master is still straightforward. The only change necessary to get all the tests passing is moving this.resize() into the conditionals. It's a bit messy to call it twice, but since it needs to be called in a specific order depending on what options are passed, I think that's ok.

            if (options.bounds) {
                this.resize();
                this.fitBounds(options.bounds, { duration: 0 });
            } else {
                this.jumpTo({
                    center: options.center,
                    zoom: options.zoom,
                    bearing: options.bearing,
                    pitch: options.pitch
                });
                this.resize();
            }

I did notice after rebasing that I had to change the expected zoom value in the test from 2.469 to 2.113 to get that test to pass. I'm not totally sure why that would be the case, but changing that value produces a passing test.

stepankuzmin · 2018-10-08T13:31:36Z

Hey @mourner and @ryanhamley! Sorry for the late reply, I've updated the PR according to the last comment — moved resize back to conditional and set expected zoom value in the test to 2.113.

GeospatialMax · 2018-10-26T13:16:46Z

@mourner Just stumbled upon this new feature which would be quite useful to us. When is the next release planned for this to be included as it's not in the current latest 0.50.0?

Thank you!

ryanhamley · 2018-10-26T17:58:17Z

@GeovationMax This will be included in v0.51.0. The beta will be released next week and the final version will be released the following week, around November 7th.

SoLoGHoST · 2018-11-16T00:42:43Z

I am using the latest version js and css v0.51.0. Can someone please help me understand how to initialize the map with bounds? Doesn't work for me and I get no errors. It just doesn't seem to work.

andrewharvey · 2018-11-16T00:45:12Z

I am using the latest version js and css v0.51.0. Can someone please help me understand how to initialize the map with bounds? Doesn't work for me and I get no errors. It just doesn't seem to work.

See https://www.mapbox.com/mapbox-gl-js/api/#map there is a map option called bounds which accepts a LngLatBoundsLike

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    bounds: [left, bottom, right, top]
});

SoLoGHoST · 2018-11-16T00:55:46Z

So, I'm misunderstood. How can I set a bunch of LngLat markers than have the map show with them centered in there by default? Instead of setting center property to a Lng,Lat.

andrewharvey · 2018-11-16T01:01:02Z

@SoLoGHoST Better to ask that at https://stackoverflow.com/tags/mapbox-gl-js

SoLoGHoST · 2018-11-16T01:31:45Z

Ok thank you, I have created a question here: https://stackoverflow.com/questions/53330202/set-map-bounds-based-on-multiple-marker-lng-lat

elyobo · 2018-12-06T21:25:28Z

This is great, but is missing a way to provide the padding that fitBounds supports; this is quite important if you're fitting bounds to some markers, as without padding greater than the market dimensions they'll always sit partially off the map.

@mourner would you be open to accepting a PR that adds a boundsOptions parameter which would be passed to the fitBounds call here, except that it would always apply a duration of 0 as per the PR?

Added #7681

Complements mapbox#5518 by allowing additional options (notably padding) to be provided for the initial bounds for a map.

Complements #5518 by allowing additional options (notably padding) to be provided for the initial bounds for a map.

mourner requested changes Oct 25, 2017

View reviewed changes

jfirebaugh force-pushed the 1970 branch 2 times, most recently from 5f83282 to fed794d Compare May 1, 2018 15:43

stepankuzmin force-pushed the 1970 branch from bd23a56 to bb24c7d Compare July 25, 2018 13:45

mourner reviewed Jul 25, 2018

View reviewed changes

stepankuzmin force-pushed the 1970 branch from 5f53c01 to a256168 Compare August 9, 2018 12:32

stepankuzmin added 3 commits October 8, 2018 15:54

add initial bounds as map constructor option mapbox#1970

a3e46e4

fix map initial bounds test mapbox#1970

71400b2

resize map before setting initial view mapbox#1970

6513cd1

stepankuzmin force-pushed the 1970 branch from a256168 to 6513cd1 Compare October 8, 2018 12:54

stepankuzmin added 2 commits October 8, 2018 16:00

move this.resize() back to conditional mapbox#1970

670b6c1

fix expected zoom value for initial bounds test mapbox#1970

cbb825d

mourner approved these changes Oct 8, 2018

View reviewed changes

mourner merged commit 83aebca into mapbox:master Oct 8, 2018

mourner mentioned this pull request Oct 18, 2018

Add a way to set initial map bounds #1970

Closed

andrewharvey mentioned this pull request Nov 4, 2018

support fitBounds options when setting the initial map bounds #7553

Closed

pathmapper mentioned this pull request Nov 17, 2018

Initial bounds resets map's pitch to 0 #7597

Closed

elyobo added a commit to elyobo/mapbox-gl-js that referenced this pull request Dec 6, 2018

Allow bounds fitting options to be provided for initial bounds.

1c90474

Complements mapbox#5518 by allowing additional options (notably padding) to be provided for the initial bounds for a map.

elyobo added a commit to elyobo/mapbox-gl-js that referenced this pull request Dec 6, 2018

Allow bounds fitting options to be provided for initial bounds.

d730cdc

Complements mapbox#5518 by allowing additional options (notably padding) to be provided for the initial bounds for a map.

elyobo mentioned this pull request Dec 6, 2018

Allow bounds fitting options to be provided for initial bounds. #7681

Merged

6 tasks

elyobo added a commit to elyobo/mapbox-gl-js that referenced this pull request Dec 6, 2018

Allow bounds fitting options to be provided for initial bounds.

6506698

Complements mapbox#5518 by allowing additional options (notably padding) to be provided for the initial bounds for a map.

elyobo added a commit to elyobo/mapbox-gl-js that referenced this pull request Dec 6, 2018

Allow bounds fitting options to be provided for initial bounds.

cd4af61

Complements mapbox#5518 by allowing additional options (notably padding) to be provided for the initial bounds for a map.

elyobo added a commit to elyobo/mapbox-gl-js that referenced this pull request Dec 6, 2018

Allow bounds fitting options to be provided for initial bounds.

c450be7

Complements mapbox#5518 by allowing additional options (notably padding) to be provided for the initial bounds for a map.

asheemmamoowala pushed a commit that referenced this pull request Dec 18, 2018

Allow bounds fitting options to be provided for initial bounds.

55f4c01

Complements #5518 by allowing additional options (notably padding) to be provided for the initial bounds for a map.

karussell mentioned this pull request Apr 25, 2021

Improve bounding box for route graphhopper/graphhopper-maps#53

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add initial bounds as map constructor option #1970 #5518

add initial bounds as map constructor option #1970 #5518

stepankuzmin commented Oct 25, 2017 •

edited

Loading

mourner Oct 25, 2017

stepankuzmin Oct 25, 2017

stepankuzmin Oct 25, 2017

mourner Oct 25, 2017

stepankuzmin Oct 25, 2017

mourner commented Jul 25, 2018

stepankuzmin commented Jul 25, 2018

mourner commented Jul 25, 2018 •

edited

Loading

stepankuzmin commented Jul 25, 2018

mourner Jul 25, 2018

stepankuzmin Jul 25, 2018

mourner Jul 25, 2018

stepankuzmin Jul 25, 2018

mourner commented Jul 25, 2018

stepankuzmin commented Jul 25, 2018 •

edited

Loading

mourner commented Aug 9, 2018

stepankuzmin commented Aug 9, 2018

mourner commented Aug 9, 2018

ryanhamley commented Sep 21, 2018

stepankuzmin commented Oct 8, 2018

GeospatialMax commented Oct 26, 2018

ryanhamley commented Oct 26, 2018

SoLoGHoST commented Nov 16, 2018

andrewharvey commented Nov 16, 2018 •

edited

Loading

SoLoGHoST commented Nov 16, 2018 •

edited

Loading

andrewharvey commented Nov 16, 2018

SoLoGHoST commented Nov 16, 2018

elyobo commented Dec 6, 2018 •

edited

Loading

add initial bounds as map constructor option #1970 #5518

add initial bounds as map constructor option #1970 #5518

Conversation

stepankuzmin commented Oct 25, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mourner commented Jul 25, 2018

stepankuzmin commented Jul 25, 2018

mourner commented Jul 25, 2018 • edited Loading

stepankuzmin commented Jul 25, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mourner commented Jul 25, 2018

stepankuzmin commented Jul 25, 2018 • edited Loading

mourner commented Aug 9, 2018

stepankuzmin commented Aug 9, 2018

mourner commented Aug 9, 2018

ryanhamley commented Sep 21, 2018

stepankuzmin commented Oct 8, 2018

GeospatialMax commented Oct 26, 2018

ryanhamley commented Oct 26, 2018

SoLoGHoST commented Nov 16, 2018

andrewharvey commented Nov 16, 2018 • edited Loading

SoLoGHoST commented Nov 16, 2018 • edited Loading

andrewharvey commented Nov 16, 2018

SoLoGHoST commented Nov 16, 2018

elyobo commented Dec 6, 2018 • edited Loading

stepankuzmin commented Oct 25, 2017 •

edited

Loading

mourner commented Jul 25, 2018 •

edited

Loading

stepankuzmin commented Jul 25, 2018 •

edited

Loading

andrewharvey commented Nov 16, 2018 •

edited

Loading

SoLoGHoST commented Nov 16, 2018 •

edited

Loading

elyobo commented Dec 6, 2018 •

edited

Loading