GEOG 863:
Web Application Development for Geospatial Professionals

7.2.1 Checkbox


7.2.1 Checkbox

This Esri sample allows the user to switch easily back and forth between 3D terrain layers depicting an area before and after a landslide. A checkbox is used to toggle between the two layers. Let’s look at how this checkbox is coded.

First, a semi-transparent div (with id of "paneDiv") is positioned near the top of the page. Embedded within that div are two child divs (with id values of "resultsDiv" and "activeElevationLayerDiv").

The resultsDiv is designed to provide some instructions when the page first loads. If the user clicks on the map, the contents of the div are then replaced with a report of the difference in elevation after the landslide.

How does this work? I don’t want to get into the details of the retrieval of the elevation values, as that’s a bit complicated. However, the change of the div contents is fairly straightforward and something that’s good to know how to do. First, a reference to that div is obtained in the JS code on line 166 through the use of the DOM’s getElementById() method. Clicks on the view trigger the anonymous function on lines 168-232. The div’s contents are changed through the setting of the div’s innerHTML property first at the beginning of the function on line 169 and then later to present the results of the calculation on line 223.

But let’s get back to the checkbox. Recall that there was a second div (activeElevationLayerDiv). This div contains a manually created legend and the checkbox. (As an aside, note the clever way that the legend was created. One "bullet" in the unordered list is assigned an id of "green" and the other "red". The bullets are then styled in the CSS to have their colors match the colors of the PointSymbol3D objects added to the map.)

The checkbox is assigned an id ("elevAfter") so that it can be manipulated by the JS code. It is set up to be checked when the page loads and has a label associated with it.

The JS code associated with the checkbox appears on lines 236-241. Again, getElementById() is used to get a reference to the checkbox. The DOM method addEventListener() method is then used to set up a "listener" for a certain kind of event to occur in relation to the checkbox – in this case, the "change" event. You may want to quickly read over the w3schools page on the addEventListener() method. As outlined on the w3schools site, addEventListener() has two required arguments: the event to listen for and a function to execute when that event is triggered. And similar to how a promise returns an object to its callback function, the addEventListener() method passes an event object to its associated function. While this event object has a few different properties, the most applicable in most cases is the one used here – target. The target property returns a reference to the element that triggered the event, which in this case is an input element of type checkbox. So what’s happening on line 239 is the layer that represents the terrain after the landslide has its visible property set to In other words, if the box is checked ( returns true), then the "after" layer’s visible property is set to true. If the box is unchecked ( returns false), then the layer’s visible property is set to false.