David J. David J. - 3 months ago 14
CSS Question

how to add a gradient over a leaflet map?

I'm trying to add a gradient over a leaflet map that will fade from white to transparent and partially obscure it.

Using a regular gradient with CSS as a background makes the gradient appear only when the map is reloading. So I tried putting the gradient in the 'foreground' using the accepted answer from this question: Is there a foreground equivalent to background-image in css?

This still doesn't work - the map is still sitting on top of it. Can anyone think of a way to do this? thanks.

<style>
#map-id {
height: 100%;
width: 100%;
position: absolute;
}
html,body{margin: 0; padding: 0}

#map-id:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
pointer-events: none;
}


</style>


<div id="map-id">
<script type="text/javascript" src="{% static "js/map.js" %}"></script>
</div>

Answer

You should add a z-index property in the before content block

A codepen for reference: http://codepen.io/hkadyanji/pen/bwNLKK

z-index: 999; /* adding this worked for me */

Screenshot: enter image description here

Comments