Example for navigation simulation

[maios]

MAPSIOS-167 Create a simulation for a navigation with vanishing routes effect.

Simulator.Screen.Recording.-.iPhone.13.mini.-.2022-06-13.at.15.05.32.mp4

Please note that there is something in progress calculation of Turf so it seems that the progress goes ahead of the movement, this also happens on Android. We will be looking into this separately.

Pull request checklist:

• Describe the changes in this PR, especially public API changes.
• Add a changelog entry to to bottom of the relevant section (typically the ## main heading near the top).

[OdNairy]

Should we use Viewport as an argument here as we are not using mapView anymore?

[evil159]

Constraining the map to safe area makes it look worse than the rest of examples:

Navigation Simulation	Display a map view

[maios]

interesting, we should actually constraint or bind the map to the safe area and not the whole view controller, since it is configured for its contents to be extended under the navigation bar -> we can't see the top of the map as Andrew pointed out here #1225 (comment)
I think the way navigation bar looks like that when view is constrained to navigation bar is because of the way we configure UINavigationBarAppearance for iOS 13+

this snippet fixed the problem though, wdyt?

        if #available(iOS 13.0, *) {
            let navigationBarAppearance = UINavigationBarAppearance()
            navigationBarAppearance.configureWithOpaqueBackground()

            appearance.scrollEdgeAppearance = navigationBarAppearance
            appearance.compactAppearance = navigationBarAppearance
            appearance.standardAppearance = navigationBarAppearance
        }

[evil159]

I think extending the map under the bars and making it fill the whole screen makes it looks like it belongs on iOS(the map is visible under the translucent bars). I checked how apple handles this in their Maps app, they use the globe view on lower zoom levels that eliminates this issue. Google Maps seems to both use opaque bars and have a part of the map behind them(obstructing a portion of the map behind them, of course).

[maios]

for the sake of example I think it makes more sense to display the full map without any part that is hidden, since we don't really have anything to show/hide navigation bar so it looks weird if a part of the map is not visible.

Full	Safe-area

[evil159]

I'm not quite sure if I understand this correctly, but shouldn't it translate to something like 7.0 * 1.0 - given that .product - "Returns the product of the inputs"?

[maios]

yes, I think explicitly putting one here is for the sake of readiblity in its string representation :-D we could instead do Exp(.literal) { value } but I think we should keep this to make it consistent with Android.

[evil159]

I see, having a column of just numbers, indeed, will make it hard to visually parse. However this more verbose notation seems to be a bit superfluous.
I wonder would it make it more readable if zoom level and raw line width value would be grouped on a single line, creating sort of a switch statement:

casingLayer.lineWidth = .expression(
    Exp(.interpolate) {
        Exp(.exponential) {
            1.5
        }
        Exp(.zoom)
        10.0; 7.0
        14.0; 10.5
        16.5; 15.5
        19.0; 24.0
        22.0; 29.0
    }
)

[maios]

I too think the syntax of iOS Expression could be improved. At the moment it can take up too many lines of code and provide little readability :-D would be nice to have a team discussion on this and propose new or addition way for Expression.