Add an image | 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.

ViewController

github View on GitHub

Swift

Objective-C

import Mapbox

class ImageSourceExample: UIViewController, MGLMapViewDelegate {
    override func viewDidLoad() {
        super.viewDidLoad()

        let mapView = MGLMapView(frame: view.bounds, styleURL: MGLStyle.darkStyleURL)
        mapView.setCenter(CLLocationCoordinate2D(latitude: 43.457, longitude: -75.789), zoomLevel: 4, animated: false)
        mapView.autoresizingMask = [.flexibleHeight, .flexibleWidth]
        mapView.tintColor = .darkGray

        // Set the map view‘s delegate property.
        mapView.delegate = self
        view.addSubview(mapView)
    }

    func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
        // Set the coordinate bounds for the raster image.
        let coordinates = MGLCoordinateQuad(
            topLeft: CLLocationCoordinate2D(latitude: 46.437, longitude: -80.425),
            bottomLeft: CLLocationCoordinate2D(latitude: 37.936, longitude: -80.425),
            bottomRight: CLLocationCoordinate2D(latitude: 37.936, longitude: -71.516),
            topRight: CLLocationCoordinate2D(latitude: 46.437, longitude: -71.516))

        // Create an MGLImageSource, used to add georeferenced raster images to a map.
        if let radarImage = UIImage(named: "radar.gif") {
            let source = MGLImageSource(identifier: "radar", coordinateQuad: coordinates, image: radarImage)
            style.addSource(source)

            // Create a raster layer from the MGLImageSource.
            let radarLayer = MGLRasterStyleLayer(identifier: "radar-layer", source: source)

            // Insert the raster layer below the map's symbol layers.
            for layer in style.layers.reversed() {
                if !layer.isKind(of: MGLSymbolStyleLayer.self) {
                    style.insertLayer(radarLayer, above: layer)
                    break
                }
            }
        }
    }
}