Transparent image overlay Mapbox GL JS

Question

I want to draw a circle around an object in Mapbox GL JS, but it does not seem to support drawing something like that. So I tried creating a PNG with a red circle and a transparent background in Photoshop. But when I load the image on the map, the image loses its transparency.

The code I used to generate this is:

var sourceObj = new mapboxgl.ImageSource({
        url: '/img/circle-red.png',
        coordinates: [
            [-80.425, 46.437],
            [-71.516, 46.437],
            [-71.516, 37.936],
            [-80.425, 37.936]
        ]
});

map.addSource('someimage', sourceObj);

map.addLayer({
    "id": "someimage",
    "source": "someimage",
    "type": "raster"
});

Does somebody know how I can achieve an transparent background? Or does someone know an alternative way to draw a circle on the map?

Thanks in advance.

Answer 1

I have the same issue. My current workaround are 8-bit PNGs, but they only have one color that is transparent.

Answer 2

I know it's a year late, but if anyone runs into this again, there is a raster-opacity property on the layer. See https://www.mapbox.com/mapbox-gl-js/example/adjust-layer-opacity/ .

map.addLayer({
  "id": "current_image",
  "source": "current_image",
  "type": "raster",
  "paint" : {
    "raster-opacity" : 0.5
  }
});

If you're working with an image where you'll know the opacity, that should do the trick!