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:
- In the HTML, a div element is defined and assigned an id. Within the div, the desired text is placed inside a p element.
- 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.