Show Raster Image on the Map

This example shows how to add a raster overlay to the map. The image is deployed to the device as a bundled resource. You will need a raster and its bounding rectangle in geographic coordinates.

You will learn the following:

• How to set coordinates so that the raster is positioned correctly on the map.
• How to create image source and raster layer and draw it on the map.

View complete source code on GitHub

Include Raster to the project

In Xcode, create new group (e.g. Files). Right click on the group and choose “Add files to…” Locate your raster file and add it to the project.

Add the raster overlay

The overlay should be added after the map view finishes loading the style. Add the following method to the coordinator class (which implements MGLMapViewDelegate protocol):

func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
    ...
}

Image coordinates

In order to display the image on map, it is necessary to set the image extent in geographic coordinates.

   let coordinates = MGLCoordinateQuad(
                topLeft: CLLocationCoordinate2D(latitude: 50.900867668253724, longitude: 4.639663696289062),
                bottomLeft: CLLocationCoordinate2D(latitude: 50.89935199434383, longitude: 4.639663696289062),
                bottomRight: CLLocationCoordinate2D(latitude: 50.89935199434383, longitude: 4.642066955566406),
                topRight: CLLocationCoordinate2D(latitude: 50.900867668253724, longitude: 4.642066955566406))

Image Source

Next, create image source from the embedded image.

   let source = MGLImageSource(identifier: "aerial-image", coordinateQuad: coordinates, image: radarImage)

raster Layer

Last step is to create raster layer.

   let radarLayer = MGLRasterStyleLayer(identifier: "aerial-image-layer", source: source)

And add it to the style.

for layer in style.layers.reversed() {
                    if !layer.isKind(of: MGLSymbolStyleLayer.self) {
                        style.insertLayer(radarLayer, above: layer)
                        break
                    }
                }