Exploring Dynamic Mapping: An Animated Journey with Mapbox

In recent years, the marriage of technology and cartography has led to a revolution in the way we visualize data. One of the most exciting developments in this field is the ability to create dynamic, interactive maps that not only display information but also tell stories. 🗺️✨

In this article, we’ll explore the power of dynamic mapping using UIKit and Mapbox, a platform that allows developers to create stunning, customizable maps for web and mobile applications. You’ll get a behind-the-scenes look at my Swift code powering these animations and learn how to integrate them into your own projects.

Mapbox | Maps, Navigation, Search, and Data

Creation of a map view

To get started, it is necessary to create a map view:

import UIKit
import MapboxMaps

class ViewController: UIViewController {

var myMapView: MapView! //variable for my map view

  override public func viewDidLoad() {
           super.viewDidLoad()
   
           myMapView = MapView(frame: view.bounds)

           let cameraOptions = CameraOptions(center:
               CLLocationCoordinate2D(latitude: 39.5, longitude: -98.0),
                                             zoom: 0.5, bearing: 0, pitch: 0)

           myMapView.mapboxMap.setCamera(to: cameraOptions)

           myMapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
   
           view.addSubview(myMapView)
   }
}

Rotation

To realize it, I created a function rotateGlobe which I call and provide with my Mapbox map view:

 rotateGlobe(mapView: myMapView)

and it looks like this:

  var isRotating = true  

func rotateGlobe(mapView: MapView) {
        
        let bearing: CLLocationDirection = 360
        
        var currentBearing = 0.0
        let frames = Int(10 / (1.0/60.0))
        let bearingIncrement = bearing / Double(frames)*0.2
        
        Timer.scheduledTimer(withTimeInterval: 1.0/60.0, repeats: true) { timer in
            if self.isRotating {
                currentBearing += bearingIncrement
                let cameraOptions = CameraOptions(bearing: currentBearing)
                mapView.mapboxMap.setCamera(to: cameraOptions)
            }
        }
    }

This function rotates the map continuously based on a specified bearing. It calculates the number of frames and the incremental change in bearing for each frame to achieve a smooth rotation animation.

What if do you want to change the speed?

You can adjust the bearingIncrement value:

// Faster: Multiply for a major number
let bearingIncrement = bearing / Double(frames)*0.6

// Slower: Multiply for a minor number
let bearingIncrement = bearing / Double(frames)*0.1 

Animation

How can I zoom in the map?

There are several ways to do this with animations as the Maps SDK for iOS offers powerful animation controls, allowing you to animate the camera to transition smoothly to a new center location. Additionally, you can animate updates to the bearing, pitch, zoom level, padding, and anchor, providing expressive ways to enhance your map interactions.

Fly to

To realize this animation, I created a function addTapGestureToMoveToTappedLocation which I call with my Mapbox map view. It allows the user to zoom in a tapped point of the map:

   // Add a tap gesture recognizer to move to tapped location
    func addTapGestureToMoveToTappedLocation() {
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(moveToTappedLocation(_:)))
        myMapView.addGestureRecognizer(tapGesture)
    }

    @objc func moveToUserLocation(_ sender: UITapGestureRecognizer) {
        isRotating = false
        guard let userLocation = myMapView.location.latestLocation?.coordinate else { return }
        
        let cameraOptions = CameraOptions(
            center: userLocation,
            zoom: 17,
            bearing: 0,
            pitch: 0
        )
        
        myMapView.camera.fly(to: cameraOptions, duration: 3.0, completion: nil)
    }

It is possible to change some values to produce different effects:

• center to change longitude and latitude at which the camera is pointed;
• zoom to have a larger (or smaller) zoom effect;
• bearing to change the visual rotation of the map (the compass direction the camera points to);
• pitch to change the visual tilt of the map;
• duration to change the duration of the animation.

Dynamic mapping with Mapbox and UIKit offers endless possibilities for creating engaging and interactive maps in iOS applications. By leveraging Mapbox’s APIs and SDKs, developers can tell stories through animations and interactions. 🗺️✨