Opacity Issue on Objects with mapView.updateState

Mappedin JS
1

Hi everyone,

I’m using objects (MapObject) to represent exhibition booths on my map, and I want to apply transparency using the opacity property.

:bullseye: Context

  • Mappedin SDK version: v6.0.1-beta.24
  • I’m adding a background image to the map:
mapView.Images.add(mapData.mapCenter, 'https://BG-URL', { 
  width: 30, 
  height: 20, 
  rotation: 0, 
  verticalOffset: 0.1,
});
  • I’m trying to make my booths semi-transparent:
mapView.updateState(element, {
  interactive: true,
  color: 'pink', 
  opacity: 0.5,
});

:magnifying_glass_tilted_left: Issue

  • The opacity is applied, but the background remains invisible through the objects.
  • It looks like the object is still fully opaque even with an opacity value < 1.

:red_question_mark: Questions

  1. Is opacity supposed to affect the actual transparency of MapObject elements?
  2. Is there a way to make the background image visible through the objects?
  3. Should I enable a specific setting or use another type of element (Space instead of Object)?

Thanks for your help! :raising_hands:

2

Hi Romain!

I’ve recreated this scenario with images and opacity on MapObjects. I’ve noticed the same behavior and have raised this issue with the SDK Team. Functionality should be actual transparent so hopefully we can get a resolve soon. :bug::mag:

Thanks for raising this! :partying_face:

Will keep you posted!

3

I wanted to revisit this issue. In a previous beta version, transparency seemed to work partially: the background image was sometimes visible through map objects, although there were some rendering artifacts depending on the camera angle or zoom level.

I’m currently using version 6.10.0, and since version 6 the behavior appears to have regressed.

The opacity property no longer allows the background image to be visible at all, and the lower part of map objects remains completely opaque.

Could you confirm whether this is a known regression or if the transparency behavior was intentionally changed in recent versions?

Thank you in advance for your reply.

Here is an example with the altitude deliberately set high to demonstrate the problem :

image
image986×674 58.8 KB

4

Thank you for the detailed report. We’re looking into this.