I am using Carto.js and I have a map with multiple polygons with the same boundaries.

One layer is purple, and one is orange. I have tried to use transparency to indicate that sometimes there is an overlap - the overlapping polygons are the ones in the middle that are an intermediate colour:

enter image description here

The problem is that each polygon has an infowindow, and when the user clicks on the polygons in the middle, the infowindow only appears for the top layer. So it's not obvious to the user that there are two overlapping polygons there.

How can I show the infowindows for both polygons when the user clicks?

Or is there another, better way to handle this UX problem?

  • Those polygons look like houses, right? Houses do not overlap... Maybe you can try to use PostGIS to avoid them to overlap and you will not have this problem (I can give you how). Do you agree with this approach? – ramiroaznar Sep 12 '16 at 8:35
  • This stack exchange answer might be helpful for your use case. – oriolbx Sep 13 '16 at 10:29
  • @ramiroaznar I'm afraid in this case they do overlap :) it's not the house itself that's being highlighted, it's information about the house. – Richard Sep 14 '16 at 10:35
  • @oriolbx that's helpful, thanks. I ended up using a layer selector. – Richard Sep 14 '16 at 10:36
  • Glad that Oriol's answer solved your problem. Anyway, I was saying that because you have overlapping polygons, the infowindow that will pop up will be always the one on the top. So I was pointing out to fix the overlapping problem, adjusting the polygon geometries. Then you would not have this conflict anymore. – ramiroaznar Sep 14 '16 at 11:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.