setVisibleCoordinateBounds edgePadding Issue

[SeanzyB]

I can't tell if this is the wrong repository, but this seems like the most active place for swift. I'm having an issue setting my mapView to the coordinate bounds I need. I have set the mapView.automaticallyAdjustsContentInset to false, the mapView.contentInset to UIEdgeInsets.zero, and the functions edgePadding to UIEdgeInsets.zero as well. I expected the loaded view to fit my bounding box with no space between the edge of the view and bounding box, however the bounding box only takes up about 10% of the view.

I have tried to use setCamera as a workaround, I'm initializing my mapView in loadView and I can't seem to use the setCamera function before the view is loaded, although I'm not convinced I'm not just misunderstanding how to make this function work for my case. Any help is appreciated!

[1ec5]

Hi @SeanzyB, I’ve just moved this issue to the mapbox-gl-native-ios repository, since it looks like you’re working with the map SDK directly, rather than some navigation SDK functionality that happens to use the map SDK indirectly. The map SDK works with both Objective-C and Swift.

[ZiZasaurus]

@SeanzyB, I was able to create a shape, add a bounding box around it, and then set the mapview to fit the bounding box. Can you please provide a sample project that reproduces this so I can see what may be causing this behavior?

[814k31]

@ZiZasaurus

I have built a swiftui component using the guide and very quickly adapted it to support polylines

However I believe I am also seeing the same issue described here by OP

MapBox Version 5.9.0 iOS Simulator Versions tried: 13.5 & 14.1 Mac OS Version: 10.15.7 XCode version: 12.1

import Mapbox
import SwiftUI

extension MGLPointAnnotation {
    convenience init(title: String, coordinate: CLLocationCoordinate2D) {
        self.init()
        self.title = title
        self.coordinate = coordinate
    }
}

struct MapView: UIViewRepresentable {
    @Binding var annotations: [MGLPointAnnotation]
    @Binding var overlays: [MGLOverlay]

    private let mapView: MGLMapView = MGLMapView(frame: .zero, styleURL: MGLStyle.streetsStyleURL)

    func centerCoordinate(_ centerCoordinate: CLLocationCoordinate2D) -> MapView {
        self.mapView.centerCoordinate = centerCoordinate

        return self
    }

    func makeUIView(context: UIViewRepresentableContext<MapView>) -> MGLMapView {
        return self.mapView
    }

    func setVisibleCoordinateBounds(
        _ bounds: MGLCoordinateBounds,
        edgePadding: UIEdgeInsets,
        animated: Bool,
        completionHandler: (() -> Void)?
    ) -> MapView {
        self.mapView.setVisibleCoordinateBounds(
            bounds,
            edgePadding: edgePadding,
            animated: false,
            completionHandler: completionHandler
        )

        return self
    }

    func styleURL(_ styleURL: URL) -> MapView {
        self.mapView.styleURL = styleURL

        return self
    }

    private func updateAnnotations() {
        if let currentAnnotations = self.mapView.annotations {
            self.mapView.removeAnnotations(currentAnnotations)
        }

        self.mapView.addAnnotations(self.annotations)
    }

    private func updateOverlays() {
        if self.mapView.overlays.count != 0 {
            self.mapView.removeOverlays(self.mapView.overlays)
        }

        self.mapView.addOverlays(self.overlays)
    }

    func updateUIView(_ uiView: MGLMapView, context: UIViewRepresentableContext<MapView>) {
        self.updateAnnotations()
        self.updateOverlays()
    }

    func zoomLevel(_ zoomLevel: Double) -> MapView {
        self.mapView.zoomLevel = zoomLevel

        return self
    }
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        let polyline = MGLPolyline(
            coordinates: [
                 CLLocationCoordinate2D(latitude: 37.791329, longitude: -122.396906),
                 CLLocationCoordinate2D(latitude: 37.791591, longitude: -122.396566),
                 CLLocationCoordinate2D(latitude: 37.791147, longitude: -122.396009),
                 CLLocationCoordinate2D(latitude: 37.790883, longitude: -122.396349),
                 CLLocationCoordinate2D(latitude: 37.791329, longitude: -122.396906),
            ],
            count: 5
        )

        let annotations = [
            MGLPointAnnotation(
                title: "ne",
                coordinate: polyline.overlayBounds.ne
            ),
            MGLPointAnnotation(
                title: "sw",
                coordinate: polyline.overlayBounds.sw
            )
        ]

        return MapView(annotations: .constant(annotations), overlays: .constant([polyline]))
            .setVisibleCoordinateBounds(
                polyline.overlayBounds,
                edgePadding: UIEdgeInsets.zero,
                animated: false,
                completionHandler: nil
            )
     }
 }

Preview:

[ZiZasaurus]

Apologies for the prolonged delay in responding to your inquiry. To get the map view centered on your polygon, you will first need to set the bounds for your shape and then set the camera using the following lines below:

            let camera = mapView.cameraThatFitsCoordinateBounds(bounds)
            mapView.setCamera(camera, animated: true)