An easier way to zoom: A Dojo dijit that zooms to states and counties

This dijit zooms to states and counties. Click to try it.Dijits (Dojo widgets) have been a semi-regular topic on this blog and those posts helped me get up to speed on how to develop my own dijit for use with the ArcGIS JavaScript API. One requirement that has come up a couple of times when I’ve worked with the JavaScript API is the need to zoom to a state and/or county. Since I figured I’d continue to want this functionality in the future, it seemed like a good idea to spend a little extra time and put together a dijit that can be easily re-used in applications. You can preview what I came up with here: Zoom To State/County Dijit. This dijit is available for download on the Resource Center.

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

This entry was posted in Services and tagged , , , . Bookmark the permalink.

Leave a Reply


  1. mtranes says:

    What would be necessary to generalize this to zoom to a list of towns in a single state rather than states and counties for the whole country?

  2. dswingley says:

    @mtranes- you could definitely do that. You would need to make two changes: modify the dijit’s template to show only a single drop down and generate your own .json file with extents for each city you want to show up in the list. Let me know if you run into any issues.

  3. oldeland77 says:

    Hey, you are a great source of inspiration! thank you

  4. dswingley says:

    @Eric: The state abbreviation is available in the handleExtent function. You can access it as item.abbr[0].