No popup on transparent features

[MichaelLangbein]

Description

Popups don't appear on transparent features - not even if they have non-transparent outlines.

• What is missing? Popups on the bodies of polygons with transparent fill
• What is it useful for? Polygons may become more transparent upon zoom. Or they may be deliberately set fully transparent to allow inspecting the underlying layer (like osm)

Relevant Package

This feature request is for @dlr-eoc/map-ol

Examples

Steps to reproduce the behavior:

1. In route-map4.component.ts, edit GeoJson - VectorImageLayer ocean by set alpha to 0 for the olFill. Leave olStroke untouched.
2. Hover over the layer
3. A popup appears briefly when touching the outline of a polygon, but no popup is shown over the bolygon-fill.

Describe alternatives you've considered

Just using a very low alpha is possible, but not quite intuitive.

[boeckMt]

This is how popups currently implemented, using map.forEachLayerAtPixel to detect if there is a layer a the pixel for which to show the popup.

This is done because map.forEachFeatureAtPixel does not detect image layers.

---

We maybe could check first map.hasFeatureAtPixel(evt.pixel) and then use map.forEachLayerAtPixel

https://codesandbox.io/s/map-on-at-pixel-test-rwbjd1?file=/main.js

[boeckMt]

We further have to check that this is not causing problems if we have an overlay layer which only uses borders and text but the underlying layer should have the popup.

[MichaelLangbein]

We further have to check that this is not causing problems if we have an overlay layer which only uses borders and text but the underlying layer should have the popup.

Right! Need a test-case for this. Or two: One for a popup on a transparently filled layer; Another for a popup on a layer underneath a transparently filled layer.

[MichaelLangbein]

Other things we might want to check:

• When a layer is set hidden, it's associated popups remain visible. Do we want that?
• Currently, polygons with transparent fill block clicks onto underlying layers. This holds true when the transparent-polygon-layer has a popup and also when it doesn't. We might want to allow clicks to pass to the next lower level when the transparent-polygon-layer doesn't have a popup.
  • To reproduce that: in example-custom-layers, set alpha=0 in styling of TopoJSON layer. Now attempt to click through that layer onto the underlying KML layer. ^-- Edit: Second item irrelevant. Already covered in Ukis.

[boeckMt]

...We might want to allow clicks to pass to the next lower level when the transparent-polygon-layer doesn't have a popup.

We already have this functionality https://github.com/dlr-eoc/ukis-frontend-libraries/blob/main/projects/services-layers/src/lib/types/Layers.ts#L52 to filter out some layers.

[MichaelLangbein]

We already have this functionality https://github.com/dlr-eoc/ukis-frontend-libraries/blob/main/projects/services-layers/src/lib/types/Layers.ts#L52 to filter out some layers.

Ah, grand! In that case only the first item remains. Thanks!

[voinSR]

Other things we might want to check:

• When a layer is set hidden, it's associated popups remain visible. Do we want that?

When the layer is hidden, I would destroy all popups from this layer...

[boeckMt]

Other things we might want to check:

• When a layer is set hidden, it's associated popups remain visible. Do we want that?

When the layer is hidden, I would destroy all popups from this layer...

Maybe we could do this in map-ol.component with

this.removeAllPopups((item) => {
    // only remove the popups from the current layer
    const elementID = item.getId();
    const layerID = elementID.toString().split(':')[0];
    if (layerID) {
      if (layerID === layer.id) {
        return layerID === layer.id;
      }
    } else {
      return true;
    }
  });

but if a user just wants to hide the layer for a moment and then make it visible again, we can't restore the popup. We could try to set display: none on visible change but I don't know if this is good for popups with custom components...

But on layer removal we should destroy all.

[boeckMt]

But on layer removal we should destroy all.

e.g. in https://github.com/dlr-eoc/ukis-frontend-libraries/blob/55b472fcb7c775feac12111147b7faff08c1297e/projects/map-ol/src/lib/map-ol.service.ts#L601

and somewhere in

https://github.com/dlr-eoc/ukis-frontend-libraries/blob/55b472fcb7c775feac12111147b7faff08c1297e/projects/map-ol/src/lib/map-ol.service.ts#L485