2

I installed the Mapbox SDK into my project, but I don't understand how to integrate this code snippet with SwiftUI.

I created a SwiftUI View named MapView, where I import the Mapbox Framework.

I try to use the UIViewRepresentable protocol, as in Apple's tutorial, but without success.

import Mapbox

class MapView: UIViewController {

  override func viewDidLoad() {
    super.viewDidLoad()

    let styleURL = URL(string: "mapbox://styles/mapbox/outdoors-v9")
    let mapView = MGLMapView(frame: view.bounds,
                             styleURL: styleURL)
    mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

    mapView.setCenter(CLLocationCoordinate2D(latitude: 45.52954,
                                             longitude: -122.72317),
                      zoomLevel: 14, 
                      animated: false)
    view.addSubview(mapView)
  }

}

I am new to iOS development, so any help would be much appreciated.

1
  • What did you try with UIViewRepresentable and how didn't it work?
    – Jon Shier
    Jun 11, 2019 at 20:55

1 Answer 1

5

This is a working sample on how you can integrate the MGLMapView with SwiftUI.

When using UIViewRepresentable you have to implement two delegates: makeUIView that will return your view (in this case MGLMapView) and updateUIView which will receive the same view type as the one returned in makeUIView (again MGLMapView).

You can use this to experiment.

Also I recommend you get familiar with the React architecture to understand better the SwiftUI approach.

You can improve this sample by making ContentView receive a styleURL, and trying different styles in the preview.

import Mapbox
import SwiftUI

struct ContentView : View {
    var body: some View {

        MapboxViewRepresentation(MGLStyle.streetsStyleURL)

    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

struct MapboxViewRepresentation : UIViewRepresentable {

    let styleURL: URL

    init(_ styleURL: URL) {
        self.styleURL = styleURL
    }

    func makeUIView(context: UIViewRepresentableContext<MapboxViewRepresentation>) -> MGLMapView {
        let mapView = MGLMapView(frame: .zero, styleURL: styleURL)

        return mapView
    }

    func updateUIView(_ uiView: MGLMapView, context: UIViewRepresentableContext<MapboxViewRepresentation>) {

    }


}

UPDATE: Here is the official guide on how to integrate Mapbox with SwiftUI https://docs.mapbox.com/help/tutorials/ios-swiftui/

2
  • Thank you! It works exactly as expect! :) I will look more closely to your code to be sure I understand it properly.
    – bonsoir
    Jun 11, 2019 at 21:43
  • 1
    Official guide is no more available... What should we do?
    – Hafiza
    Sep 9, 2021 at 12:35

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.