Tilt and bearing

[tomasweigenast]

Is it possible to add tilt and bearing to flutter_map? Any solution?

[ibrierley]

Can you expand a bit on your question, it's not entirely clear to me what you are after.

[tomasweigenast]

Like Mapbox or Google Maps. When you want to update the camera, it has an option to set the bearing. @ibrierley

[ibrierley]

If you're after exactly what they support, flutter_map doesn't currently (maybe follow the github repo though, there could be some interesting bits come up). The devil is in the detail, which is why I was asking. For example, you can rotate a map and marci has been doing further work on that, but really it's rotating a whole tile as is to my knowledge (never tried it). I.e if you rotate it 90 degrees the text would be rotated also.

For the pitch, I wonder if you could add a transform onto your flutter_map widget (you could possibly combine the rotation there as well), but I know this is not quite what you are after really, just mentioning it in case it's of any use.

[maRci002]

It is possible to do that however there should be an algorithm which could calculate new height / width for overflowbox because bearing stretches the map and we want to avoid gray areas.

I can update PR #719 to detect bearing gestures and map shouldn't pinchMove when it is detected.

[maRci002]

We should fill the map with tiles inside red border:

[maRci002]

For orthographic rotation I know the algorithm for calculate bounding box which looks ugly.

For perspective rotation I just gave arbitary bounding box:

And if I start to rotate map normally then bounding box will be even bigger so we need the tile culling algorithm too or geoservers will die.

[ibrierley]

Out of interest, whats the algorithm you're using? I may have a play with something related at some point in the future.

I was also thinking that maybe filled width is more important than height. With certain pitches it would be too much. Also I think some solutions out there limit the pitch to a smaller amount, so you can't go crazy, but I may be wrong ?

I also wonder what it looks like at a higher zoom level, i.e I guess some may want to use it at street level for navigation type thing ?

[maRci002]

For orthographic projection it is just enough rotate your matrix4 around x axis and when it's done you can basicly read y axis' scale at column two row two so we can backscale the height to get new height.
var newHeight = height / matrix.getColumn(1)[1];

There are ready solutions like D3.js but I won't waste more time on this.

[ibrierley]

Just playing with something similar. I have the perspective working, but for the life of me, I can't seem to get the width any different from your earlier image with all the white space. Is there an easy hack somewhere for that (just for a proof of concept I want to try), even if it's simply making it 1.5x as wide, so any extra tiles added to the width would display ? (I've been trying to hack flutter_mate_state.dart, but that doesn't seem to make any difference). I'm only after a temporary hack for the moment.

[maRci002]

When I tried bearing then I wrote all testing code in #719 which would complicate all code, but I think this should work with master version:

        mapState.size =
            CustomPoint<double>(myWidth, myHeight);

And make sure your mapRoot is wrapped with OverflowBox version:

      if (true || rotation != 0.0) {
        // By using an OverflowBox with the enlarged drawing area all the layers
        // act as if the area really would be that big. So no changes in any layer
        // logic is necessary for the rotation
        return MapStateInheritedWidget(
          mapState: mapState,
          child: ClipRect(
            child: Transform(
              transform: myMatrix,
              alignment: FractionalOffset.center,
              child: OverflowBox(
                minWidth: myWidth,
                maxWidth: myWidth,
                minHeight: myHeight,
                maxHeight: myHeight,
                child: mapRoot,
              ),
            ),
          ),
        );
      } else { /* dead code */   }

[ibrierley]

Thanks Marci, I think thats getting me in the right direction!

…

On Wed, Sep 2, 2020 at 10:28 PM maRci002 ***@***.***> wrote: When I tried bearing then I wrote all testing code in #719 <#719> which would complicate all code, but I think this should work with master version: mapState.size = CustomPoint<double>(myWidth, myHeight); And make sure your mapRoot is wrapped with OverflowBox version: if (true || rotation != 0.0) { // By using an OverflowBox with the enlarged drawing area all the layers // act as if the area really would be that big. So no changes in any layer // logic is necessary for the rotation return MapStateInheritedWidget( mapState: mapState, child: ClipRect( child: Transform( transform: myMatrix, alignment: FractionalOffset.center, child: OverflowBox( minWidth: myWidth, maxWidth: myWidth, minHeight: myHeight, maxHeight: myHeight, child: mapRoot, ), ), ), ); } else { /* dead code */ } — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#732 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA5YN5JPAOZP744RBIOFW63SD22JTANCNFSM4QLCUFOA> .

[github-actions]

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]

This issue was closed because it has been stalled for 5 days with no activity.

[danielocampo2]

@ibrierley have you ever made some progress with it or is there any plan to implement bearing for flutter_map?

Thanks!

[ibrierley]

Hmm good question. I got so far (and tbh have forgotten where I got to with it, but just experimenting with similar code to @maRci002 above ) , but never really liked the idea enough to pursue it further. My main issues were whether there was any point in having a tilted & upside down text etc and I can't remember if the dragging went weird or not, plus if it would need to be integrated into flutter_map rather than a plugin.

I'm also dabbling with vector tiles and tilt/perspective, and again I got quite far with that, but I think I'd need someone who is very good with projection matrices to help with it as it turns into a flight sim by accident when dragging a rotated map :D. I do intend to revisit that, but I found it really really tough.

If you wanted a stab at the original idea like above, I'd try and keep my eye out and help if I could.

[danielocampo2]

Thanks for the quick answer. The feature we were after was to be able to rotate the camera angle so map can look like this:

Unfortunately I don't have the necessary knowledge to work on this, and as I've seen from your discussion it doesn't seem like a simple matter.

Thanks again, and I hope someone can implement it in the future.

[ibrierley]

So I think with your example image, I note that the main labels are correctly horizontal and untilted/no perspective, so whatever, the solution earlier wouldn't look like that. It may depend on what you want to compromise on. That image looks more like a vector tiles (as opposed to flutter_maps raster tiles currently) solution but I may be wrong.