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 e up when clicked or touched.

I have tried a zillion binations: 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 e up.

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 e up when clicked or touched.

I have tried a zillion binations: 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 e up.

• javascript
• svg
• leaflet

• 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 es with a solution. – Mir Commented Aug 30, 2013 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 Commented Aug 30, 2013 at 15:38

2 Answers 2

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 patibility and a little more info: Click through a DIV to underlying elements

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.