how to add a gradient over a leaflet map?

Question

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>

Harvey Kadyanji · Accepted Answer · 2016-09-05T23:07:49.300

3

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:

EDIT

Added the text overlay implementation.

edited Sep 05 '16 at 23:07

answered Sep 05 '16 at 20:50

Harvey Kadyanji

515
6
8

Thanks. Do you have any idea why the same solution won't work for text that I would like to overlay onto the map? I'm trying to put white text on the left and I can't seem to get it to show up. I'm using h1:before{ position: absolute; content: ''; height: 100%; width: 100%; color: white; pointer-events: none; z-index: 999; } Didn't want to make a new question for this since it's almost identical... – David J. Sep 05 '16 at 22:05
1

@DavidJ. I have edited the answer to reflect the text overlay and I have also edited the codepen – Harvey Kadyanji Sep 05 '16 at 23:05
Thanks you've been a big help – David J. Sep 05 '16 at 23:13
1

@DavidJ. I have edited the answer to reflect the text overlay and I have also edited the codepen. I think the explanation as to why your implementation wasn't working was styling the pseudo classes of h1 rather than styling the h1 itself. For your solution to work, you could have done it as h1:before{ position: absolute; content: 'the-heading-content-here'; height: 100%; width: 100%; color: white; pointer-events: none; z-index: 999; } – Harvey Kadyanji Sep 05 '16 at 23:14

how to add a gradient over a leaflet map?

1 Answers1

Linked