Saturday, March 19, 2011

Compare 3 Maps Side-by-Side on the CRH Web Site

Choptank River Heritage

A new “CRH Comparison Maps” web page at Choptank River Heritage shows CRH historic sites overlaid on three small maps side by side.  Each map has a different basemap:  Streets, USGS Topo, and Satellite Imagery.

Use the checkboxes to sync the Scale (Zoom) and/or Location.  Try different combinations, like zoomed out for Street Map view and zoomed in for Satellite Imagery view.

Note:   When you check the sync option, the zoom bars in the maps disappear.  You can still  zoom in by using Shift while you draw a box over the area you want to zoom to.  But you can’t zoom back out with the keys and mouse.  You can work around this by unchecking the sync options.  Then use one map as the control.  Right-click on the map to sync the other maps to your control map.

I’m still looking into why popup windows for each site don’t work in these small maps. 

I appreciate your comments and feedback on usefulness (or not) of these maps.

GIS Technical Details

You can see the original larger maps that are more interactive (change basemap, pop up info windows, etc.) here:

It was pretty fast and easy for me to create these three side-by-side maps by first authoring a single “master map” on  That map is built on the CRH map service that I published on the UMd MPS GIS Program’s ArcGIS Server. 

To create three new, separate maps with different basemaps for the Comparison Maps web page, I changed the basemap on the original map with a different “Save As” each time. generated a new webmap key (unique URL) for each map.

With the map open at, I clicked “Share”, then “Create Web App”, and selected the Javascript map template I wanted.  In this case, Compare Maps template.  I downloaded and unzipped the html and javascript files into my web folder (c:/inetpub/wwwroot/maps/). 

In the layout.js file, I changed the title of the map page.  Then I changed the 3 default maps to my own CRH maps, by changing the webmap key number that you can see in the URL when looking at the map in  Here I was just following the two simple steps explained in the ReadMe file that came with the download.

For my map #3 with satellite imagery basemap, I got an error message that I didn’t have permission to use that resource.  I thought it might be the imagery basemap that required a Bing Maps key.  But I noticed that the map title didn’t show up either, so I guessed that I had failed to set the permissions for that map to “Everyone” when I created it at   Easily fixed that problem.

After I tested the map, I uploaded the html, css, and js files to my web server.  It was easy.

No comments:

Post a Comment