6

I have not posted here before but have read extensively, so I hope I do not transgress any rules...

I am trying to place a kind of mask image (a black square with a transparent circular hole in it) over a leaflet map; makes it look like a round map displayed on an old oscilloscope screen;-). Absolutely positioned at top: 0px; bottom: 0px;. Fixed, independent of zoom or pan.

I can get the image to display, in some cases I can even get the map to pan and zoom in the transparent hole, I can even press the X to close a popup on a marker, but no matter what I try I can NEVER manage to make the marker popups come up when clicked or touched.

I have tried a zillion combinations: using a PNG image or raw SVG code, changing z-index, in a div or not. I have tried in the same container, in a different container, even adding it to the leaflet control pane: 

document.getElementsByClassName("leaflet-control-container")[0].innerHTML += '\
    <svg style="position: absolute; top:  0px; left: 0px; height: 360px; width: 360px;">\
        <g>\
            <path style="fill-rule: evenodd; fill: black; stroke: black; stroke-width: 0"\
                  d="M 0,0 L 360,0 L 360,360 L 0,360 z M 180,10 A 170,170 0 0,1 180,350 A 170,170 0 0,1 180,10 z"></path>\
        </g>\
    </svg>';

The image appears ok, but interaction with Leaflet is corrupted, no popup interaction possible.

If I set the z-index of the svg to -1, the mask no longer displays, but the popup does come up.

Michael Irigoyen
  • 22,513
  • 17
  • 89
  • 131
Mike Tommasi
  • 83
  • 1
  • 5
  • I think that the problem is that if you put an image over something else, even if the image is transparent, it covers the element below and make impossible to interact with. I'm also courious to see if someone comes with a solution. – Mir Aug 30 '13 at 14:23
  • Yes, does not matter what the content is, it being a square element that covers the entire map, it will always cause trouble. Still, there must be a way to create a mask... – Mike Tommasi Aug 30 '13 at 15:38

2 Answers2

7

The easiest way is probably using a PNG and the following line of css:

pointer-events:none;

It makes mouse actions beneath the element possible.

See here for IE compatibility and a little more info: Click through a DIV to underlying elements

Community
  • 1
  • 1
Vincent
  • 324
  • 1
  • 8
  • Btw in case pointer-events: none is not compatible with the img tag, try putting the img in a div. – Vincent Aug 30 '13 at 18:49
  • Many thanks for your reply, you saved me a lot of time! Quite clever. It works, including on Android. I used a div with a background image and the magic, but little known, pointer-events: none. However it does NOT work on Android on a svg tag, for some reason (thought that works in Chrome). – Mike Tommasi Aug 31 '13 at 12:55
  • Good to hear it worked! Odd to hear about it not working on svg on Android, especially since the property originates from svg. Btw, could you mark my answer as accepted? – Vincent Sep 01 '13 at 06:31
  • It works on Android if you use the SVG as background-image to the DIV. If I try to use the SVG directly it does not work. Yes strange... – Mike Tommasi Sep 01 '13 at 09:33
0

What if, instead of sticking a mask over the map, you put the map inside a div with border-radius:50%; overflow:hidden? I've never worked with Leaflet, though, so for all I know it won't work right under those conditions.

user1618143
  • 1,728
  • 1
  • 13
  • 27