Photoshop Question posted in
The official user guide can be found here.

Transparent image overlay Mapbox GL JS – Photoshop

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.

enter image description here

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.

Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search