The UI component of the “ZoomTo” dijit is composed of a couple of other standard Dojo form dijits. It’s making use of the drop down button (keeps the dijit’s footprint small) and filtering select (two actually, one for states and one for counties). On the back end, the dijit connects to two JSON files. Each JSON file has state or county names, FIPS codes and, most importantly, the extent for each state or county. When a selection is made, the dijit pulls the extent out of a JSON file and then passes it to map.setExtent() to zoom and pan the map to the correct location. The dijit also draws the extent as a graphic, fades the graphic out and removes it from the map’s graphics layer as a visual cue to the user.
Some observant readers might be wondering about spatial references. They’re taken into consideration too. The dijit will make sure it’s sending an extent with the proper spatial reference to the map. The extents in the default JSON file provided are WGS84, but JSON files with extents in Web Mercator (WKID 102113) and NAD83 (WKID 4269) are also included in the dijit’s data folder. It’s up to you to specify a JSON file that matches the spatial reference of your map, but if the spatial reference of the map doesn’t match what’s in the JSON file, a request is sent to a geometry service to project the extent before sending it to the map. This is a quick operation and causes only a slight delay in the time it takes to zoom to a state or county.
Please be sure to go through the ReadMe.txt file in the dijit’s zip file because some edits are required to get this running on your machine/server. Also, check out the comments in the ZoomTo.js file for more info on how the dijit works.
Contributed by Derek Swingley of the ESRI Applications Prototype team