7.2.4 Text Box
The pen below shows a simple app that provides the user a text box to enter the name of a hurricane to display on the map.
Some noteworthy aspects of this app:
- A div (id of "paneDiv") is the container for all of the custom UI elements.
- Within that div are an input element of type="text" and a button element. Both are assigned ids so that they can be accessed in the JS code.
- The input element has its placeholder attribute set to provide a prompt to the user on the sort of entry expected in the box. This and other input attributes are described at w3schools.
- Line 32 of the JS code establishes a listener for the button's click event, the getTrack() function.
- That function obtains the name entered by the user into the text box by reading its value property on line 39.
- The storm name is then incorporated into a definitionExpression applied to the FeatureLayer that was created earlier in the code.