Add an inset map
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, v10.5.0, in the Maps SDK documentation.
This example adds a secondary map view to your map for a picture in picture experience.
ViewController
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 afterinstantiating 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 centerminiMapview = 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 = falseminiMapview.allowsTilting = falseminiMapview.allowsZooming = falseminiMapview.allowsRotating = falseminiMapview.compassView.isHidden = true /**Hiding the map view's attribution goes against our attribution requirements.However, because the main map view still has attribution, hiding theattribution 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 = trueminiMapview.attributionButton.tintColor = UIColor.clearminiMapview.layer.borderColor = UIColor.black.cgColorminiMapview.layer.borderWidth = 1 /**Set the mini map view zoom level differently from the main map view toeither display a broader geographical view, or display more detailwithin 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 whilethe region is changing on the map view, the same camera changesare 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.safeAreaLayoutGuideNSLayoutConstraint.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]}}}