Skip to main content

Add an image

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.

import Mapbox

class ImageSourceExample: UIViewController, MGLMapViewDelegate {
override func 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

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)

// 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)