Tag Archives: Mapping Center

The Esri Hydro Viewer is a Javascript application built for the Esri Hydro Basemap that allows users to interact with the map, turning a static map into an interactive information center. The application has a user-friendly interface, and allows for easy navigation and visualization of hydrologic information. The Esri Hydro Viewer adds value to the Hydro Basemap by making the data contained within the map useful and easy to understand.  Both the Esri Hydro Viewer and the Esri Hydro Basemap were built using NHDPlus products.

What it does:  The Esri Hydro Viewer presents information about watersheds, including spatial information about contributing watershed area. For example, if you click on a watershed in Texas, the application presents a detailed report of information about the selected watershed, and highlights the larger hydrologic unit that it is contained within. The report tells you what category of watershed you have selected, and gives the names of the larger contributing units, as well as the HUC number, area, mean annual flow, cumulative drainage, and a brief description of the watershed. The application presents information about the watershed and helps you visualize how your selected watershed fits into the larger national context.

Esri Hydro Viewer with Subbasin Austin-Oyster in Texas selected.

The application also has navigational functionality that makes it easy for you to zoom between region, subregion, and subbasin scale levels, illustrating to map readers the multi-scaled nature of the data, and making those relationships easy to understand—especially to someone who is does not know much about hydrology.

Zoomed to Subregion level, Galveston Bay – San Jacinto.

How it was built: The Esri Hydro Viewer is a relatively simple application and can be customized for other data or purposes with a basic understanding of Javascript and HTML. The application, along with the required files, are available for download HERE. The application was constructed using the ArcGIS Javascript API, along with the Dojo and ExtJS toolkits to help build the interface. We also used Google Charts for drawing the charts in the reports. The included HTML file has been annotated with comments so that it is easier to edit.

The application consists of four map services – the reference layer and terrain layer that make up the base map, along with the overview map and query layer. We also implemented two widgets into the application – the Overview Map, and the Legend widgets. You can find more documentation and instructions for both widgets in the ArcGIS Javascript API Resource Center. The Overview Map widget defaults to showing the first map layer added in the application. For this application, however, we used a map that was specifically designed to be used as an overview map instead. To do this, you need to set your custom Overview Map layer visibility to false, and make sure that it is the first layer added to your map. That way, it is not loaded as the basemap, but loads only in the Overview Map widget.

Even though the base map you see is our Hydro Basemap, we use Bing Maps for our search functionality. To do this, you need to hide the Bing Maps layer so the geocoding works, but the layer does not appear. Using Bing Maps requires a Bing Maps application “key,” which is packaged together with ArcGIS Server 10.0. You can obtain this by going into Server Manager – Settings – and Bing Maps Key. Further instructions on using Bing Maps can be found here.

Whenever you click on the map, two queries are executed (unless you are at the Regional scale level) – one for the selected unit, and one for the larger unit that it is contained within. It looks like the second query is done using a spatial relationship, but we actually used a “query.where” to query for the unit with the same name as the selected unit. By querying based on attributes, our queries run much faster.

The charts in the reports were generated using Google Charts, which makes it very easy to create nice looking visual aids. As you can see in the figure below, not much code is required to build the charts. We used pie charts to represent our data, but there are many other different types of charts available for use as well.

Three different report templates are specified in the code – one for the Region level, one for the Subregion level and one for the Subbasin level. The formatting is mostly done using plain HTML so it would be easier to modify the reports.

The Esri Hydro Viewer is in the Hydro Resource Center Map & App Gallery, and on ArcGIS Online.

The Esri Hydro Viewer can be customized for other data or purposes. For questions or assistance with this please contact Mapping Center.

Special thanks to Kenny Ling for providing this post. Questions for Kenny: Kling@esri.com.