search

Orange-OpenSource / IOT-Map-Component

A map component that can be integrated in any computer or mobile web application developed in Angular or React, which provides Orange branded design and user experience.
https://orange-opensource.github.io/IOT-Map-Component/
MIT License
20 stars 8 forks source link

Markercluster group: popup is displayed under the other markers #34

Open julien-deramond opened 3 years ago

julien-deramond commented 3 years ago

Considering a markercluster group:

Screenshot from 2021-10-22 10-01-35

If I click on the bottom marker, its popup is displayed under the other markers:

Screenshot from 2021-10-22 09-57-06

Simulated in local mode (to have the latest version of IoT Map Component) with the following Knobs > markersList data:

{
    "id": "s1",
    "location": {
      "lat": 44.895,
      "lng": 4.87
    },
    "template": "square",
    "status": "warning",
    "tab": {
      "content": "H",
      "type": 0
    },
    "shape": {
      "type": 1,
      "anchored": true,
      "plain": false,
      "color": "#FFCC00"
    },
    "layer": "default",
    "inner": {
      "color": "black"
    }
  },
  {
    "id": "s1000",
    "location": {
      "lat": 44.895,
      "lng": 4.87
    },
    "template": "square",
    "status": "warning",
    "tab": {
      "content": "H",
      "type": 0
    },
    "shape": {
      "type": 1,
      "anchored": true,
      "plain": false,
      "color": "#FFCC00"
    },
    "layer": "default",
    "inner": {
      "color": "black"
    },
    "popup": {
      "title": "title",
      "body": "Lorem ipsum"
    }
  },
  {
    "id": "s2000",
    "location": {
      "lat": 44.895,
      "lng": 4.87
    },
    "template": "square",
    "status": "warning",
    "tab": {
      "content": "H",
      "type": 0
    },
    "shape": {
      "type": 1,
      "anchored": true,
      "plain": false,
      "color": "#FFCC00"
    },
    "layer": "default",
    "inner": {
      "color": "black"
    }
  },
jacques-lebourgeois commented 3 years ago

Nb : if you first open and then close the popup of one of the markers on the top, then the marker will have an appropriate z-index (like from z-index: 1000411 to z-index: 411) and will be under the popup of the bottom marker.

You can have a quick fix with : 

.leaflet-marker-icon.iotmap-divicon.leaflet-zoom-animated.leaflet-interactive[style*="z-index: 1000"] {
    z-index: 300 !important;
}

But it is a dirty quick fix. The click on a marker is not always easy as they all have the same z-index. The value of the z-index after having closing the popup is the real appropriate one.

Another quick fix using the width of an opened marker :

.leaflet-marker-icon.iotmap-divicon.leaflet-zoom-animated.leaflet-interactive[style*="width: 50px"]:not([style*='opacity: 0.3']) {
    z-index: 10000000 !important;
}