0

This question is a continuation of one that asked before how to add a gradient over a leaflet map?

I'm trying to add a text overlay over the left side of my leaflet map, which has a black-transparent gradient background from left to right.

Modifying my text, which is set to white with css, to load after the map doesn't seem to work. Can anyone tell me what I need to do to have my text show up over the map? 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;
      z-index: 999;
  }
      #menu-text{
      display: inline-bloc;      
      }

  #menu-text:before{
    position: absolute;
      content: '';
      height: 100%;
      width: 100%;
      color: white;
      pointer-events: none;
      z-index: 999;


  }


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

</div> 

<div id="menu-text">
  <h1>
      This is the text that should be showing up, but isn't.
  </h1>
</div>

The side appears black with no white text.

Community
  • 1
  • 1
David J.
  • 1,753
  • 13
  • 47
  • 96
  • Possible duplicate of [how to add a gradient over a leaflet map?](http://stackoverflow.com/questions/39337423/how-to-add-a-gradient-over-a-leaflet-map) – David J. Sep 06 '16 at 18:55

1 Answers1

1

You have already working example in the reply of your last question. http://codepen.io/hkadyanji/pen/bwNLKK

Your code is broken, <script> tag should not be placed into <div id="map-id">

Damian Gądziak
  • 895
  • 1
  • 9
  • 12