3

I use below code to load the Map, but after results come, still the map is centered to user location not around the annotation, due to that I have to scroll to the pin to see.

Map(coordinateRegion: $region, showsUserLocation: true, annotationItems: searchResults) { dest in
    MapAnnotation(coordinate: dest.coordinate, anchorPoint: CGPoint(x: 0.5, y: 0.5)) {
            MapPin(coordinate)
    }
}
koen
  • 5,383
  • 7
  • 50
  • 89
Rama Krish
  • 373
  • 1
  • 13
  • 1
    If you wanna your question to be answered, you wanna make time for an expert to get working sample with reproducible problem as fast as possible. Perfectly I should just paste your code into my sample project and see the problem as fast as I run it. Please update your code to [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). – Phil Dukhov Aug 17 '21 at 11:00

1 Answers1

4

To change what the map displays, you just need to change the region to which it is binded (coordinateRegion: $region). Changing its center moves the map. To act on the zoom you must act on the span property.

I already suggest you move the card to the first element of your searchResults array :

Map(coordinateRegion: $region, annotationItems: searchResults) {result in
   MapMarker(coordinate: result.coordinate)
}
.onChange(of: searchResults) {newValue in
   if let result = newValue.first {
      region.center = result.coordinate
   }
}

But if you want to move (and zoom in / out) the map so that it encompasses all the results :

Map(coordinateRegion: $region, annotationItems: searchResults) { result in
     MapMarker(coordinate: result.coordinate)
}
.onChange(of: searchResults) { _ in
     if !searchResults.isEmpty {
          region = regionThatFitsTo(coordinates: searchResults.map { $0.coordinate })
     }
}

And the function that calculates the region that fits :

func regionThatFitsTo(coordinates: [CLLocationCoordinate2D]) -> MKCoordinateRegion {
        var topLeftCoord = CLLocationCoordinate2D(latitude: -90, longitude: 180)
        var bottomRightCoord = CLLocationCoordinate2D(latitude: 90, longitude: -180)
        for coordinate in coordinates {
            topLeftCoord.longitude = fmin(topLeftCoord.longitude, coordinate.longitude)
            topLeftCoord.latitude = fmax(topLeftCoord.latitude, coordinate.latitude)
            bottomRightCoord.longitude = fmax(bottomRightCoord.longitude, coordinate.longitude)
            bottomRightCoord.latitude = fmin(bottomRightCoord.latitude, coordinate.latitude)
        }

        var region: MKCoordinateRegion = MKCoordinateRegion()
        region.center.latitude = topLeftCoord.latitude - (topLeftCoord.latitude - bottomRightCoord.latitude) * 0.5
        region.center.longitude = topLeftCoord.longitude + (bottomRightCoord.longitude - topLeftCoord.longitude) * 0.5
        region.span.latitudeDelta = fabs(topLeftCoord.latitude - bottomRightCoord.latitude) * 1.4
        region.span.longitudeDelta = fabs(bottomRightCoord.longitude - topLeftCoord.longitude) * 1.4
        return region
    }
Adrien
  • 1,579
  • 6
  • 25
  • moving to first element is not correct way, I want Map to focus all the pins with zoom properly, I need the calculations – Rama Krish Aug 17 '21 at 13:43
  • 1
    Calculations were [here](https://stackoverflow.com/a/31423828/16125496). I adapted the function to make it usable in your code. And I edited my answer. – Adrien Aug 17 '21 at 14:02