Add an inset map

This example adds a secondary map view to your map for a picture in picture experience.

import Mapbox
class ViewController: UIViewController, MGLMapViewDelegate {
var mapView: MGLMapView!
var miniMapview: MGLMapView!
override func 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:
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:
miniMapview.logoView.isHidden = true
miniMapview.attributionButton.tintColor = UIColor.clear
miniMapview.layer.borderColor =
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.
zoomLevel: mapView.zoomLevel - 2, animated: false)
miniMapview.translatesAutoresizingMaskIntoConstraints = false
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) {
zoomLevel: mapView.zoomLevel - 2, animated: false)
func installConstraints() {
if #available(iOS 11.0, *) {
let safeArea = self.view.safeAreaLayoutGuide
safeArea.bottomAnchor, constant: -40),
safeArea.trailingAnchor, constant: -15),
safeArea.widthAnchor, multiplier: 0.33),
} else {
miniMapview.autoresizingMask = [.flexibleTopMargin,
Was this page helpful?