GEOG 863:
Web Application Development for Geospatial Professionals

7.5 Text Overlay


7.5 Text Overlay

You may have situations, especially when your app requires user interaction with the map, that call for displaying some sort of instructions. Have a look at this Esri sample and note the bit of text along the top of the map enclosed within a semi-transparent box.

This text box is created through two steps:

  1. In the HTML, a div element is defined and assigned an id. Within the div, the desired text is placed inside a p element.
  2. In the CSS, the div is placed through absolute positioning 10 pixels from the top of the page and 62 pixels from the left. A padding of 12 pixels is added to the left and right of the div so that the text isn’t rendered too close to the edge. The text is given a white color, while the background of the element is made black with a transparency value of 0.5. This allows the text to be displayed to the user without completely obstructing the view of the map underneath.