Mapbox-gl-native: MGLImageSource doesn't overlay an image

[fousa]

Platform: iPhone iOS 11.0.1
Mapbox SDK version: Mapbox-iOS-SDK 3.7.0-beta.1

Steps to trigger behavior

Here is a small code snippet to render the radar.gif on the map as done in the example:

I added the MGLMapView as an outlet to my controller and this works fine until I want to display an overlay.

func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
    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)
    )
    let source = MGLImageSource(identifier: "radar", coordinateQuad: coordinates, url: URL(string: "https://www.mapbox.com/mapbox-gl-js/assets/radar.gif")!)
    style.addSource(source)
}

Expected behavior

It should render the rain overlay on the map.

Actual behavior

It renders no image...

[jmkiley]

Hi @fousa -

You will want to use the MGLImageSource to create a MGLRasterStyleLayer. The radar image should appear once you add that layer to your map's style.

For example:

func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
        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))
        let source = MGLImageSource(identifier: "radar", coordinateQuad: coordinates, url: URL(string: "https://www.mapbox.com/mapbox-gl-js/assets/radar.gif")!)
        style.addSource(source)

        let layer = MGLRasterStyleLayer(identifier: "radar-layer", source: source)
        layer.rasterOpacity = MGLStyleValue(rawValue: 0.5)
        style.addLayer(layer)
}

[fabian-guerra]

The example in MGLImageSource documentation does not mention creating a raster style. We should update the example clarifying it's usage.

/cc @jmkiley

[fousa]

That makes sense. Now it works! Thanks for your quick response @jmkiley!