Add an inset map | Maps SDK v6 | iOS

A newer version of the Maps SDK is available
This page uses v6.4.1 of the Mapbox Maps SDK. A newer version of the SDK is available. Learn about the latest version, v11.3.0, in the Maps SDK documentation.
This example adds a secondary map view to your map for a picture in picture experience.
ViewController
github View on GitHub
Swift
Objective-C
import Mapbox

class ViewController: UIViewController, MGLMapViewDelegate {
    var mapView: MGLMapView!
    var miniMapview: MGLMapView!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        mapView = MGLMapView(frame: view.bounds)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

        /** Set the delegate property of our map view to self after
        instantiating it.
        */
        mapView.delegate = self
        
        // Set the main map view's center coordinate and zoom level.
        mapView.setCenter(CLLocationCoordinate2D(latitude: 18.1096,
                longitude: -77.2975), zoomLevel: 9, animated: false)
        
        // Set inset map View's center
        miniMapview = MGLMapView(frame: CGRect.zero)
        
        /**
         Set inset mapview properties to create a smaller,
         non-interactive map view that mimics the appearance of the main map view.
        */
        miniMapview.allowsScrolling = false
        miniMapview.allowsTilting = false
        miniMapview.allowsZooming = false
        miniMapview.allowsRotating = false
        miniMapview.compassView.isHidden = true

        /**
         Hiding the map view's attribution goes against our attribution requirements.
         However, because the main map view still has attribution, hiding the
         attribution for the mini map view in this case is acceptable.

         For more information, please refer to our attribution guidelines:
         https://docs.mapbox.com/help/how-mapbox-works/attribution/
        */
        miniMapview.logoView.isHidden = true
        miniMapview.attributionButton.tintColor = UIColor.clear
        miniMapview.layer.borderColor = UIColor.black.cgColor
        miniMapview.layer.borderWidth = 1
        
        /**
         Set the mini map view zoom level differently from the main map view to
         either display a broader geographical view, or display more detail
         within a particular area.
        */
        miniMapview.setCenter(self.mapView.centerCoordinate,
                              zoomLevel: mapView.zoomLevel - 2, animated: false)
        miniMapview.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(mapView)
        view.addSubview(miniMapview)
        
        installConstraints()
    }
    
    /**
     Set the mini map view's camera to the map view camera so while
     the region is changing on the map view, the same camera changes
     are made in the mini map view.
     */
    func mapViewRegionIsChanging(_ mapView: MGLMapView) {
         miniMapview.setCenter(self.mapView.centerCoordinate,
         zoomLevel: mapView.zoomLevel - 2, animated: false)
     }

    
    func installConstraints() {
        if #available(iOS 11.0, *) {
            let safeArea = self.view.safeAreaLayoutGuide
            NSLayoutConstraint.activate([
                miniMapview.bottomAnchor.constraint(equalTo:
                    safeArea.bottomAnchor, constant: -40),
                miniMapview.trailingAnchor.constraint(equalTo:
                    safeArea.trailingAnchor, constant: -15),
                miniMapview.widthAnchor.constraint(equalTo:
                    safeArea.widthAnchor, multiplier: 0.33),
                miniMapview.heightAnchor.constraint(equalTo:
                    miniMapview.widthAnchor)
            ])
        } else {
            miniMapview.autoresizingMask = [.flexibleTopMargin,
                                            .flexibleLeftMargin,
                                            .flexibleRightMargin]
        }
    }
}