8.4 Text Overlay

8.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. In the example below, 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.

Earlier in this lesson, you used the view.ui.add() [4] method in MapView and SceneView to add API widgets to the map interface.  You can also use it to add your own custom widgets built with HTML text and form elements. This example [5] shows a few ways to add your own HTML widgets to the map interface and notice that I've used the Esri's CSS class "esri-widget" so they match the Esri's theme.  For simplicity, I've only included the code for creating and placing widgets in this example, but programming actions was described earlier in the lesson.