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.

Friday, March 18, 2011

New Maps on New CRH Web Pages

Choptank River Heritage

Check out the new mini-maps embedded here and in all the new Choptank River Heritage web pages.  (Caution:  Many of the CRH pages are still being built.)

Start by clicking to zoom out till you see just the outline of the Choptank watershed.  Then click back in and see how the icons for the sites change, and then zoom in till the labels also appear. 

The GIS Tech Details

Web and online mapping technologies are really amazing.  Grab parts from different places on the Web, then plug and play.  If you've published a web site, you know what I'm talking about.  It's even cooler with web map servers running on GIS technologies and standards.  Make changes to the map once, and they appear in all the CRH web pages.

The mini map in the CRH web pages is actually a re-rendering of the Javascript map here.  This is much more capable map application than the mini-map.  You can change basemaps, turn layers on/off, add your own stuff and resave, etc.  These map viewers are easy to build at Esri's

The trick is that you need a map service to build on.  The CRH map on is built on map services that I created and are listed in an industry-standard web map services ("REST API") directory here.  Those map services sit on a Univ of Maryland ArcGIS Server that the program director still lets me access and use.  (Thanks again to Dr. Jianguo Ma.)

Down at this foundation level -- map services -- is where the GIS/cartographer skills come in.  Using ArcGIS desktop software to author the map that produces the map service on the ArcGIS Server.  But once a web programmer (I don't mean me) knows the "/MapServer" URL above, she can build many types of Web maps and apps using my map services along with others.  Just like I've embedded mini-map for CRH pages into this blog also, here:

Pan, Zoom, Click the Points on this Map.

Or View Larger Interactive Map

Tuesday, March 15, 2011

Fast-Mapping in San Mateo County, Calif.

I'll start work with the GIS Lead in San Mateo County, California, in a few weeks.  SMC already has a public-facing ArcGIS Server.  With map services in place, it was easy for me to start publishing web maps from the SMC server while I'm still sitting in Philadelphia. I added some of the county's existing geospatial data to a map here in my blog, using map publishing tools at  The map bwlow shows something called the "SB375 Corridor".  I'm not sure yet what that is, but I'll find out soon enough.

This took me ten minutes to put together, including blog text and posting, and going back to switch map layers. (From housing to transportation. You can click "Larger Map" and turn layers on and off, change the basemap, and add others layers you might search and find.)

View Larger Map