[FEATURE] tilt/pitch (map perspective)

[greensopinion]

It would be great to be able to render the map with pitch/tilt to give perspective.

I've been experimenting with tilt/pich and have created a prototype: https://github.com/greensopinion/flutter_map/tree/pitch

Prototype supports:

• rendering with pitch
• set the initial pitch via options
• update the map pitch using the controller
• two-finger gesture (push up/down) to change pitch

There's more to do before this could be included as a feature. Some things are top of mind:

• hit testing
• marker positioning
• support rendering layers without perspective (e.g. pop-up info bubbles on markers)

The prototype has a new example page which you can find in the menu named "Pitch". A two-finger push/pull gesture will tilt the map.

[greensopinion]

similar to #220

[greensopinion]

pushed my commit as a pull request - but it's not intended to be merged as-is

[ibrierley]

Interesting, I had look at this with my vector tiles last time. Go as far drawing the perspective fine, but never got around looking at adapting the guestures, so it would wobble when rotating.

I'll try and take a peek later and give some feedback.

[greensopinion]

Here's a screenshot of what I've done so far.

The image on the left has a 60 degree pitch, the one on the right has 0 degree pitch. There are two pin markers. The red one is rendered flat to the viewport, the grey one is flat to the map, creating a shadow effect.

[greensopinion]

To reallly make this look like it has depth, we need more distant things to get smaller. Eg. roads that go north/south should appear to converge as they get more distant.

[ibrierley]

It should be possible to do that I think. I had a dabble some time ago with the vector stuff...here was an example https://www.youtube.com/shorts/RBU3xjVPCmY this is on canvas, so not really applicable here and drag with rotation was always a pain (I have a few matrix bits if you get stuck), but I think some of the concepts are probably the same, maybe with a Transform widget (I think I asked a question on similar on SO, will see if I can dig it out).

[ibrierley]

I dug this out from my old emails...not sure if this is useful at all for the perspective on a Widget.

Transform(
  transform: Matrix4(
    1,0,0,0,
    0,1,0,0,
    0,0,1,0,
    0,0,0,1,
  )..setEntry(3, 2, 0.001)..rotateX(x)..rotateY(y)..rotateZ(z),
  alignment: FractionalOffset.center,

[greensopinion]

Thanks Ian that's great

On Sat, Jun 11, 2022 at 4:26 PM Ian @.***> wrote:

I dug this out from my old emails...not sure if this is useful at all for the perspective on a Widget.

Transform( transform: Matrix4( 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1, )..setEntry(3, 2, 0.001)..rotateX(x)..rotateY(y)..rotateZ(z), alignment: FractionalOffset.center,

— Reply to this email directly, view it on GitHub https://github.com/fleaflet/flutter_map/issues/1268#issuecomment-1153018769, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEKDQ7VW255AGLNFG55IDMDVOUOCZANCNFSM5YMIL6WQ . You are receiving this because you authored the thread.Message ID: @.***>

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[JaffaKetchup]

Ok, I'm going to close this for now, as it's out of scope. Happy to reopen if anyone can work on it!

[aytunch]

Just writing to see if @greensopinion is still working on this? And @JaffaKetchup @ibrierley what are the blockers for this? From the screenshots and videos in the above comments, I see there are working prototypes. Is the main problem perspective? or gesture handling? or tile loading with non square tiles? If I know the blockers, maybe I can try to look in to this.

Edit: I saw other similar issues and saw what the blockers are. So without vector tiles this is not feasible because text over the map image will be distorted too which is unwanted. Can we achieve this https://docs.mapbox.com/mapbox-gl-js/example/set-perspective/ with vector map tiles plugin at least?

[ibrierley]

The initial blockers iirc (not had chance to dig through the issue again), was the gestures either way. I did post some matrix stuff I think there, and maybe the inverse of that could be used or something, but iirc that can get a bit hairy :).

Many moons ago, I did get as far as https://www.youtube.com/watch?v=RBU3xjVPCmY&list=PLXDX5vZDskdPUlUnY1ksXWRyL1bgyIsKw&index=2 (but the gesture feeling on a full rotation was never there..I think, there may also be a couple of relevant example vids at https://www.youtube.com/playlist?list=PLXDX5vZDskdPUlUnY1ksXWRyL1bgyIsKw )

There's probably other issues which people may not care about (bounds/fitbounds etc)

[aytunch]

@ibrierley the YT video link is private I guess. Can't access it.

[ibrierley]

Sorry :D, have edited, see if that works!

[greensopinion]

I'm not planning on working on this any more. The main issue was getting the math right for both tiles and for markers. Some markers you may want flush with the map, others should be flush with the viewport.

On Fri, Jan 6, 2023 at 9:00 AM aytunc @.***> wrote:

Just writing to see if @greensopinion https://github.com/greensopinion is still working on this? And @JaffaKetchup https://github.com/JaffaKetchup @ibrierley https://github.com/ibrierley what are the blockers for this? From the screenshots and videos in the above comments, I see there are working prototypes. Is the main problem perspective? or gesture handling? or tile loading with non square tiles? If I know the blockers, maybe I can try to look in to this.

— Reply to this email directly, view it on GitHub https://github.com/fleaflet/flutter_map/issues/1268#issuecomment-1373895630, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEKDQ7QXSP3Y6QKCRYPCBN3WRBFSZANCNFSM5YMIL6WQ . You are receiving this because you were mentioned.Message ID: @.***>