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: ghost cluster popup #35

Open julien-deramond opened 3 years ago

julien-deramond commented 3 years ago

We can see a "ghost" :ghost: cluster popup when hovering the center of the cluster when markers are displayed. Would it be possible to hide it?

Peek 2021-10-22 10-08


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

We have a quick fix waiting for a correction that seems to work :

.leaflet-marker-icon.iotmap-divicon.leaflet-zoom-animated.leaflet-interactive[style*="opacity: 0.3"] .iotmap-cluster-popup {
    display: none;
}
.leaflet-marker-icon.iotmap-divicon.leaflet-zoom-animated.leaflet-interactive[style*="opacity: 0.3"] {
    z-index: 70 !important;
}