Method for cameraoptions from camera and center #1427

BAschl · 2022-08-03T13:48:30Z

As requested in #1414 I created a method to calculate the cameraoptions from a given center and camera, which can then be used in jumpTo, flyTo and so on.

Sadly it's not easy to know if the new center would be visible (or if there's a mountain inbetween), as this requires a redraw of the coordsframebuffer. Also note, that the returned cameraOptions could be beyond the constraints.

Launch Checklist

Write tests for all new functionality.
Document any changes to public APIs. (You mean doc comments? If so, then yes)
Manually test the debug page.
Suggest a changelog category: feature
Add an entry inside this element for inclusion in the maplibre-gl-js changelog: <changelog></changelog>.

HarelM · 2022-08-03T16:01:44Z

Thanks for taking the time to do this!
Why is API receiving Mercator coordinates and not Lat lng?
Also there's a need to add change log entry in changelig.md.

BAschl · 2022-08-03T16:25:53Z

Thank you.

It doesn't really matter. If it would take LngLat there would be the need for a 3rd parameter: cameraAltitude.
Should I change it to LngLat?

HarelM · 2022-08-03T19:44:52Z

The general API is around lat lng, so I prefer to keep it this way. I'm not even sure if mercator coordinates is actually exported publicly at this point, so I would feel better if the API will remain with latlng, and latitude.
I know this makes the call signature a bit more dirty, but it avoids the need to use the mercator class just before calling this method. IDK...

github-actions · 2022-08-03T19:47:26Z

Bundle size report:

Size Change: +258 B
Total Size Before: 204 kB
Total Size After: 205 kB

Output file	Before	After	Change
maplibre-gl.js	195 kB	195 kB	+258 B
maplibre-gl.css	9.65 kB	9.65 kB	0 B

ℹ️ View Details

No major changes

BAschl · 2022-08-03T20:36:48Z

Okay, done :)

src/ui/camera.ts

src/ui/camera.test.ts

prozessor13 · 2022-08-04T10:51:23Z

Thanks for your PR! Very useful :D.

I created a route-flight test-page which uses your method. Basically it works great when using it with jumpTo, but when using flyTo or easeTo the positioning is not correct, which surprised me a lot. Today i do not have time to digg more into this, so for now i send only my test-page. More tests will follow.

Regrads. Max
route.zip
.

…7's route debug page

BAschl · 2022-08-04T13:07:04Z

Thank you Max.
I added your debug page to the latest commit and added a click event handler. Alt+click (or alt+ctrl+click) two points to see.

There actually was an error, because I forgot to add the toAltitude after changing to LngLat.
The weird behaviour persists though. When calling easeTo or jumpTo in quick succession it starts the movement and immediatly stops it again when calling it again. Also it's so jumpy because of recalculate zoom.

prozessor13 · 2022-08-04T13:07:09Z

When comment out:

the flyTo and easeTo works as expected and the route-flight looks much more smooth and natural. Sadly i cant remember why i added the freezeElevation logic into camera.ts, so i have to rethink the freeze logic!

prozessor13 · 2022-08-04T13:12:43Z

Another interesting usecase of this method would be:

When the camera goes below terrain (f.e. during dragging), rise the camera above terrain, but let it look onto the same center-point.

HarelM · 2022-08-04T13:13:55Z

I think the freeze elevation was due to the fact that the camera was "giggling" when you moved the map around (i.e. the camera would go up when you go up a mountains and go down when you go down to a valley), I'm not sure though...

prozessor13 · 2022-08-04T13:19:34Z

yes you are right, but the freeze logic is implemented already in handler_manager.ts which handles the user-dragging interactions.
I vaguely remember that the problem had something to do with the swipe feature, especially on mobile devices. Definitely some tests are needed for this!

prozessor13 · 2022-08-18T09:11:49Z

created a new pull-request for the freezeElevation logic problem, so from my perspective this pull request is ready for merge.

#1514

test/debug-pages/route.html

HarelM · 2022-08-22T06:10:07Z

src/ui/map.ts

@@ -600,6 +600,13 @@ class Map extends Camera {
        return this._controls.indexOf(control) > -1;
    }

+    calculateCameraOptionsFromTo(from: LngLat, altitudeFrom: number, to: LngLat, altitudeTo?: number) : CameraOptions {


Can this be tested as well?

HarelM · 2022-08-22T06:14:24Z

Also there's a need to resolve conflicts. Thanks for taking the time to write this!

BAschl · 2022-08-22T13:13:00Z

I'll take a look at it tomorrow. I've been to a festival the last week and need today to recharge.

BAschl · 2022-08-25T13:15:24Z

Should be all done now.

I added test cases for calling it on map with a stubbed terrain and additionally I added test cases for the returned zoom. Could you please take a look at it? Should I put constants for expectedZoom?

Furthermore i covered an edge case (From the same as To => division by 0) by throwing an error and wrote a test for it.

src/ui/map.ts

HarelM · 2022-08-25T13:45:13Z

Please fix lint.

…main

BAschl · 2022-08-26T14:44:36Z

What? My local Lint doesn't catch everything? :o

drwestco · 2022-08-28T20:18:02Z

src/ui/camera.ts

@@ -774,6 +775,41 @@ abstract class Camera extends Evented {
        return this.fire(new Event('moveend', eventData));
    }

+    /**
+     * Calculates pitch, zoom and bearing for looking at @param newCenter with the camera position being @param newCenter


Documentation needs improvement. The summary refers to params that don't exist. It's confusing that 'from' is referred to as a camera, but 'to' is referred to as a center. If I'm understanding correctly, 'from' is where the camera is located; 'to' is where it's pointing.

Feel free to open a PR, it's easier to understand it this way :-) Docs can always be improved.

Created method to calc bearing and pitch from cam and center

76dd748

added to changelog, removed spaces in camera.test

7a9897a

changed parameters to lnglat for calculateCameraOptionsFromTo

0b64277

HarelM reviewed Aug 4, 2022

View reviewed changes

src/ui/camera.ts Outdated Show resolved Hide resolved

HarelM reviewed Aug 4, 2022

View reviewed changes

src/ui/camera.test.ts Outdated Show resolved Hide resolved

Bernhard Aschl added 2 commits August 4, 2022 14:41

added toAltitude to calculateCameraOptionsFromTo and added prozessor1…

ad1f4f9

…7's route debug page

click event fixed in debug-page route

a923756

BAschl changed the title ~~Method for bearing and pitch from camera and center~~ Method for cameraoptions from camera and center Aug 4, 2022

prozessor13 approved these changes Aug 21, 2022

View reviewed changes

test/debug-pages/route.html Outdated Show resolved Hide resolved

HarelM reviewed Aug 22, 2022

View reviewed changes

Bernhard Aschl and others added 2 commits August 25, 2022 15:08

cover edgecase and more tests for calculateCameraOptionsFromTo

4138503

Merge branch 'main' into main

d85f202

HarelM reviewed Aug 25, 2022

View reviewed changes

src/ui/map.ts Outdated Show resolved Hide resolved

fixed check for null in calculateCameraOptions and fixed lint

35fa7fe

Merge branch 'main' of https://github.com/BAschl/maplibre-gl-js into …

80557de

…main

added @memberof to calculateCameraOptions

eda0a7f

HarelM merged commit 6b80a81 into maplibre:main Aug 27, 2022

HarelM mentioned this pull request Aug 27, 2022

Allow to change camera position and the point it looks at #1414

Closed

birkskyum mentioned this pull request Aug 27, 2022

Release 2.4.0 #1556

Merged

drwestco reviewed Aug 28, 2022

View reviewed changes

HarelM mentioned this pull request Sep 1, 2022

Add lookAt(3D point of interest, camera attitude) camera function #1599

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Method for cameraoptions from camera and center #1427

Method for cameraoptions from camera and center #1427

BAschl commented Aug 3, 2022 •

edited

Loading

HarelM commented Aug 3, 2022

BAschl commented Aug 3, 2022

HarelM commented Aug 3, 2022

github-actions bot commented Aug 3, 2022 •

edited

Loading

BAschl commented Aug 3, 2022

prozessor13 commented Aug 4, 2022

BAschl commented Aug 4, 2022

prozessor13 commented Aug 4, 2022

prozessor13 commented Aug 4, 2022

HarelM commented Aug 4, 2022

prozessor13 commented Aug 4, 2022

prozessor13 commented Aug 18, 2022

HarelM Aug 22, 2022

HarelM commented Aug 22, 2022 •

edited

Loading

BAschl commented Aug 22, 2022

BAschl commented Aug 25, 2022

HarelM commented Aug 25, 2022

BAschl commented Aug 26, 2022

drwestco Aug 28, 2022

HarelM Aug 28, 2022

Method for cameraoptions from camera and center #1427

Method for cameraoptions from camera and center #1427

Conversation

BAschl commented Aug 3, 2022 • edited Loading

Launch Checklist

HarelM commented Aug 3, 2022

BAschl commented Aug 3, 2022

HarelM commented Aug 3, 2022

github-actions bot commented Aug 3, 2022 • edited Loading

BAschl commented Aug 3, 2022

prozessor13 commented Aug 4, 2022

BAschl commented Aug 4, 2022

prozessor13 commented Aug 4, 2022

prozessor13 commented Aug 4, 2022

HarelM commented Aug 4, 2022

prozessor13 commented Aug 4, 2022

prozessor13 commented Aug 18, 2022

HarelM Aug 22, 2022

Choose a reason for hiding this comment

HarelM commented Aug 22, 2022 • edited Loading

BAschl commented Aug 22, 2022

BAschl commented Aug 25, 2022

HarelM commented Aug 25, 2022

BAschl commented Aug 26, 2022

drwestco Aug 28, 2022

Choose a reason for hiding this comment

HarelM Aug 28, 2022

Choose a reason for hiding this comment

BAschl commented Aug 3, 2022 •

edited

Loading

github-actions bot commented Aug 3, 2022 •

edited

Loading

HarelM commented Aug 22, 2022 •

edited

Loading