GEOG 863
GIS Mashups for Geospatial Professionals

7.2.1 Checkbox

PrintPrint

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 151 through the use of the DOM’s getElementById() method. Clicks on the view trigger the function on lines 153-207. The div’s contents are changed on line 199 through the setting of the div’s innerHTML property to a new string.

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 211-215. Again, getElementById() is used to get a reference to the checkbox. The DOM 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 213 is the layer that represents the terrain after the landslide has its visible property set to evt.target.checked. In other words, if the box is checked (evt.target.checked returns true), then the "after" layer’s visible property is set to true. If the box is unchecked (evt.target.checked returns false), then the layer’s visible property is set to false.