CODEWITHSUNDEEP
javascriptsvgleaflet
Mike Tommasi
Mike Tommasi

Reputation: 83

Fixed image over Leaflet map

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.

Upvotes: 6

Views: 3983

Answers (2)

Vincent
Vincent

Reputation: 324

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

Upvotes: 7

user1618143
user1618143

Reputation: 1748

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.

Upvotes: 0

Related Questions