GEOG 863:
Web Application Development for Geospatial Professionals

8.2.4 Text Box


8.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.

See the Pen Text box demo by Jim Detwiler (@jimdetwiler) on CodePen.

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 30 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 37.  
  • The storm name is then incorporated into a definitionExpression applied to the FeatureLayer that was created earlier in the code.