Adjust Map zoom level according to speed

Hi,

I want Map() zoom level adjusted according to speed of the user.

I'm currently using the following to initialize Map position:

@State private var position: MapCameraPosition = .userLocation(followsHeading: true, fallback: .automatic)

var body: some View {
        Map(position: $position) {...}
}

I get speed from CoreLocationl. How can I adjust zoom level, or camera position, to accomplish this?

Thanks!

Replies

I've found that using MapCameraBounds adjusts zoom level

mapCameraBounds = MapCameraBounds(minimumDistance: minimumDistance, maximumDistance: maximumDistance)

I now want to make the changes smooth and have thought of using .onChange(of:) and withAnimation, as follows:

.onChange(of: locationManager.currentLocation?.speed) { oldValue, newValue in
            withAnimation(.spring(duration: 1.0)) {
                let speed = newValue ?? 0.0

                if speed > 20 {                
                    minimumDistance = 5000.0
                    maximumDistance = 10000.0
                } else  {
                    minimumDistance = 1000.0
                    maximumDistance = 2000.0
                }

                mapCameraBounds = MapCameraBounds(minimumDistance:  newValue, maximumDistance: maximumDistance)
            }
}

 Map(position: $position, bounds: mapCameraBounds)

But that doesn't work, zoom changes are not animated. Is there a proper way of doing this?

My previous attempt with MapCameraBounds() was not the correct one.

There are at least two conflicting ways to set camera position.

  1. @State private var position: MapCameraPosition = .userLocation(followsHeading: true, fallback: .automatic)
  2. @State private var position: MapCameraPosition = .region(region: MKCoordinateRegion)

The first one gives me user location and heading, the second one lets me specify region and zoom in/out (with animation).

I've added MapUserLocationButton() to show user location/heading but its turned off as soon as MKCoordinateRegion updates.

How do I combine these to get both effects?

Thanks

  • I'm still looking for the experts out there to help me with this problem. It does not appear that there is a way to arbitrarily zoom the map to the desired level, while displaying annotations using Annotation() and tracking user location using .userLocation(followsHeading:). I must be missing something but looked through the documentation and am not seeing a way to do this. Thanks!

Add a Comment

currently having exact same problem. When I dragged map region, I lost the user location blue dot and need to tap on MapUserLocationButton() show again.