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.8.0, in the Maps SDK documentation.
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
}
}
}
}
}
#import "ViewController.h"
@import Mapbox;
@interface ViewController () <MGLMapViewDelegate>
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
MGLMapView *mapView = [[MGLMapView alloc] initWithFrame:self.view.bounds styleURL:[MGLStyle darkStyleURL]];
[mapView setCenterCoordinate:CLLocationCoordinate2DMake(43.457, -75.789) zoomLevel:4 animated:NO];
mapView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
mapView.tintColor = [UIColor darkGrayColor];
// Set the map view‘s delegate property.
mapView.delegate = self;
[self.view addSubview:mapView];
}
- (void)mapView:(MGLMapView *)mapView didFinishLoadingStyle:(MGLStyle *)style {
// Set the coordinate bounds for the raster image.
MGLCoordinateQuad coordinates = MGLCoordinateQuadMake(
CLLocationCoordinate2DMake(46.437, -80.425),
CLLocationCoordinate2DMake(37.936, -80.425),
CLLocationCoordinate2DMake(37.936, -71.516),
CLLocationCoordinate2DMake(46.437, -71.516)
);
// Create an MGLImageSource, used to add georeferenced raster images to a map.
UIImage *radarImage = [UIImage imageNamed:@"radar.gif"];
MGLImageSource *source = [[MGLImageSource alloc] initWithIdentifier:@"radar" coordinateQuad:coordinates image:radarImage];
[style addSource:source];
// Create a raster layer from the MGLImageSource.
MGLRasterStyleLayer *radarLayer = [[MGLRasterStyleLayer alloc] initWithIdentifier:@"radar-layer" source:source];
// Insert the raster layer below the map's symbol layers.
for (MGLStyleLayer *layer in style.layers.reverseObjectEnumerator) {
if (![layer isKindOfClass:[MGLSymbolStyleLayer class]]) {
[style insertLayer:radarLayer aboveLayer:layer];
break;
}
}
}
@end