Back to examples
intermediate

Add an image

Add an image to a map using an image source and raster style layer.

      


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]
        
        // 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 a MGLImageSource, which can be used to add georeferenced raster images to a map.
        if let radarImage = Bundle.main.path(forResource: "radar", ofType: "gif") {
            let source = MGLImageSource(identifier: "radar", coordinateQuad: coordinates, url: URL(string: radarImage)!)
            style.addSource(source)
            
            // Create a raster layer from the MGLImageSource.
            let radarLayer = MGLRasterStyleLayer(identifier: "radar-layer", source: source)
            
            // Insert the image 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;
    
    // 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 a MGLImageSource, which can be used to add georeferenced raster images to a map.
    NSString *radarImage = [[NSBundle mainBundle] pathForResource:@"radar" ofType:@"gif"];
    MGLImageSource *source = [[MGLImageSource alloc] initWithIdentifier:@"radar" coordinateQuad:coordinates URL:[NSURL URLWithString:radarImage]];
    [style addSource:source];
    
    MGLRasterStyleLayer *radarLayer = [[MGLRasterStyleLayer alloc] initWithIdentifier:@"radar-layer" source:source];
    
    for (MGLStyleLayer *layer in style.layers.reverseObjectEnumerator) {
        if (![layer isKindOfClass:[MGLSymbolStyleLayer class]]) {
            [style insertLayer:radarLayer aboveLayer:layer];
            break;
        }
    }
}

@end