Can't draw a polygon over a imageSource layer

[rrecio]

mapbox-gl-js version: 1.5.0 mapbox-gl-draw version: 1.1.2

Steps to Trigger Behavior

1. See the video: https://youtu.be/FR2iXweik3s?t=34 (Starts at 00:34)

Expected Behavior

See the polygon tool over the image so I can draw the polygon correctly

Actual Behavior

The polygon tool lines are rendered behind the image layer

Additional context

This is how I'm rendering the image in the map:

    this.map.addSource('uploadedImage', {
      type: 'image',
      url: imageURLString,
      coordinates: this.coordinates
    });

    this.map.addLayer({
      id: 'uploadedImageOverlay',
      source: 'uploadedImage',
      type: 'raster',
      paint: {
        'raster-opacity': 1
      }
    });

[fc]

@rrecio...try doing this:

this.map.addLayer(..., 'gl-draw-polygon-fill-inactive')

Seems like you want your image layer to be beneath the mapbox-gl-draw layers.

As a reference, here are all the mapbox-gl-draw layers: https://github.com/mapbox/mapbox-gl-draw/blob/master/src/lib/theme.js

also, here is a reference to the addLayer for mapbox, the second param is a beforeId https://docs.mapbox.com/mapbox-gl-js/api/#map#addlayer

[rrecio]

@fc Thank you, Clay! I tried what you said but then the 'uploadedImage' doesn't show up (screenshot below), it's probably rendered behind the map!? I'll take a look at the other layers you referenced and see if I can figure it out.

[rrecio]

@fc I've put a breakpoint in this.map.style.layers and saw there's a gl-draw-polygon-fill-inactive.cold. Adding the layer before it worked! :) Thank you for your insight!