Overlapping of overlay in Fixed popup

[Bahaa-Fadhil]

I have come to the problem where I have several overlay popup elements that are close to each other, and since all overlays are created by the same function, and use the same div ID, each of them is located on different boxes, so they overlap each other. Is there any way to calculate where each overlay is located in the map and possibly determine the positioning for each of them separately according to where they are located in the map

Is there any way to avoid the overlay popup overlapping each other ?

See the attached illustration screenshot!

[Viglino]

You have to look by yourself at the position of the elements to prevent collisions. Offset properties on the popup element lets you know where it is placed.

const rect = [
  popup.element.offsetLeft, 
  popup.element.offsetTop, 
  popup.element.offsetLeft + popup.element.offsetWidth, 
  popup.element.offsetTop + popup.element.offsetHeight
]

The, you can move them each others to prevents overlaps. Use popup.getPixelPosition and popup.setPixelPosition to move the popups. You have to look at changes when the popup is moved or when the window resize.

You can also check for click on a popup to change its zIndex and have it on top of the other (they still overlaps buts the selected one is visible on top), more simple / less computation. That's what I use, see https://codepen.io/viglino/pen/MXYmxZ