Add dark mask above map and under popup (image attached)

[Robert Kabwe]

I have a map with several popups -please see attached image.

I'd like to add a dark semi transparent layer above the mask and under the popup. This way when the popup goes up the user can focus on it and not be distracted by the map.

I have tried adding a full page div with a semi-transparent layer to the page, but then it appears above the popups as well. i guess this is because the popups are "inside" the map div itself, so changing the zindex of the popups will never put it above a layer outside the map div.

Can anyone please help. Thank you!

[Paulo Vieira]

On Sun, Jan 27, 2013 at 11:15 PM, Robert Kabwe <rka...@gmail.com> wrote:

I'd like to add a dark semi transparent layer above the mask and under the popup. This way when the popup goes up the user can focus on it and not be distracted by the map.

I think you are looking for a "modal dialog". I suggest that you study the css/javascript used in any framework that has modal dialogs, and adapt it to your code.

Here is an example:
http://foundation.zurb.com/docs/reveal.php

[Robert Kabwe]

Thank you. I hadn't heard of that and its very helpful.

It looks like i need to find out how to slide a fullpage mask div under the popup and above the map.

I found out the  leaflet-tile-pane div contains the tiled map. Im going to try and append a div to it after its been generated. Its the only way i can think of adding in a div into the map pane without editing the leaflet core code.

[Robert Kabwe]

I figured out the problem. While there were a couple of ways to get a modal mask in there, the simplest is to change the .leaflet-shadow-pane class to have a dark background and page size. that way everything under the popups is darkened and unclickable.

The issue though is that no matter what div you place inside the Map element, it will move with the map because it's a child of it.

 Im going to drop it for now but keep it in mind. One way would be to spawn the popups outside of the Map element (which would involve a ton of math to move it around with the map element when it alread does that automatically as a child of it) or maybe make the map semi-transparent and disabled to simulate a darkened map - i was able to do this quite easily by changing the opacity of the various panes. It is a visual design not usability issue (leaflets usability is superb) so maybe a visual hack like that might be the right idea.

 thank you:)

[Robert Kabwe]

The opacity was a good workaround:

function fadeMap(){
    $(".leaflet-tile-pane").css("opacity",.1);
}
function strongMap(){
    $(".leaflet-tile-pane").css("opacity",1);
}

i fade the map when i click a city popup and return opacity to 100% when i click back on the map. It doesnt fade the icons but this could be accomplished with a bit more css