Category: Mapping Techniques

The Preserve at Los Altos Trail Map

It’s been a while since I’ve worked with print media, I’ve been focused on web based mapping for the last couple of years.  This project turned out to be much more challenging than I anticipated. I have grown comfortable with displaying multiple levels of information through interactivity and dynamic visualizations. I sought out this project because I wanted to try my hand at a print map and thought it would be a challenging and rewarding experience.

The project was for The Preserve at Los Altos Resort in Costa Rica. They have access to a number of trails and wanted to provide a large format map that would be used to help orient guest to different beaches and amenities. The trail lines where collected via the resort manager and sent as KMZ files.  Along with the trail lines were amenity locations and other Points of Interest. I imported all of this into ArcMap for processing.  The trail lines were really detailed and contained a fair amount of noise, so they had to be cleaned up and organized.

Organizing and Making the Trail Lines 

The first step was to clean the lines as much as I could in ArcMap before exporting. I deleted slivers and made sure each line had the correct attributes (Easy, Medium, Hard). The difficulty levels were provided by the resort and were really important to include in the overall map. Other attributes included the name of the trail and the length. Along with the trails were the points of interest. These were simple points with the name and category (Lookout, Restaurant, Amenity). After the trails were in decent shape, I exported them to Adobe Illustrator for styling, by exporting them as a AI file.  Since Arcmap exports these as vector layers you can easily manipulate each line to fit your style in Illustrator. Some additional editing was done in Photoshop in the final stages of the design, which I talk about below.



Imagery for Basemap

A satellite image basemap was a necessity by the resort. They wanted their users to be able to pick out features and see the various beaches along the coastline. Thanks to my very talented colleague, Nathaniel Ayers at the DSL, we were able to take this Digital Globe imagery and apply Photoshop effects resulting in alterations to the imagery seen below. The original satellite image was adjusted to increase contrast and saturation, and bring out detail. The gradation in the ocean caused by compression was smoothed out, along with de-emphasizing/eliminating some features – boats, rocks that may distract the viewer once legends and text are added. When the color palette was finalized for text and labels, the base image was de-saturated by adding a Black and White adjustment layer, with some transparency to allow for a hint of color to remain.


Final styling and touches

I would like to thank the Spatial Community for their design critic and constructive feedback– especially The Map Smith— it wouldn’t have turned out the same without their help. If you haven’t joined, you are missing out on some great people and conversation! OK, back to the map. I combined my three layers (basemap, trails, and amenities) into a Photoshop file and added effects to the trails such as Bevel and Emboss.  I added the trail labels via legend and symbol method, instead of labels on the lines. This was after much debate and trial and error. I felt it made the map cleaner and more legible given the darkness and contrast of colors on the basemap.  Points of Interest were added using a light, hollow circle and beaches were labeled in blue with their distance from resort. Lastly the points of interest were added with photo’s provided by the resort and descriptions.


I am really happy how the map turned out, especially the high contrast of the trails, which was the subject of the map. I enjoyed the challenges of a print map and the discussions with other talented cartographers. There were many “failed attempts” that I haven’t shown in this write-up, but trust me, there were many. This was my first ArcMap/Adobe map and I’ve only scratched the surface of this powerful duo.


Happy Mapping!



Updated Richmond Then and Now Application

After some issues with ArcGIS Online, I decided to re-think the Richmond Then and Now application. A while back, I stumbled upon Chris Whong‘s blog post about the Urban Scratchoff application he built using Leaflet.js and thought it would be a good candidate for the Richmond project. The application lets you explore two different maps (one current and one historical) by “Scratching off” one of the maps to show the other. This is similar to the “spy glass” concept in the original application, but with a little more flair and functionality.

The application lets you explore Richmond, Virginia in 1876, a decade after the end of the Civil War compared to present day Richmond. Wonderful details of buildings and their owners, parks and public buildings over-layed with a current aerial image of the city. Pan around and explore the city and use the “Scratch Off” button to see what has changed from 1867 to present day. Hit the swap button below to reverse the layers and the Pan & Zoom Map icon to move around and zoom.

If you are interested in the nitty gritty details of the application visit the about, Chris’s blog or fork the code on Github.

*Special thanks to Chris Whong for developing the code and sharing it with the world!

Click on this Link to check out the new updated Richmond Then and Now!

Richmond Then and Now Scratchoff

Richmond Then and Now Scratchoff

“The Ideal Historical Atlas”

Image created by Nathaniel Ayers

Image created by Nathaniel Ayers

As we get closer to releasing the first four maps of American Panorama: An Atlas of United States History, I look back on Charles O. Paullin’s 1932 Atlas of the Historical Geography of the United States.  My first year at the DSL was spent collecting, formatting, organizing, and building the database for the online version of the Atlas. The Atlas contains nearly 700 unique and beautiful maps, ranging from topics such as the number of Cattle, Explorations, and Rates of Travel. I have always been awed by the craftsmanship and effectiveness of these maps which were published over eighty years ago.  Recently there has been a lot of interest in “retro” maps and recreating them with new data. The Paullin Atlas is a little different in this regard, in that we added underlying data and implemented “A Shiny New Interface for a Classic Atlas” according to National Geographic. Wright thought the maps in the atlas were limited and could be more effective if visualized as a “collection of motion-picture maps.” This is what we tried to accomplish along with being respectful of the original plates in the Atlas. Still to this day Charles O. Paullin’s Atlas is considered one of the most impressive atlases of American History. With the help of our friends at Stamen Design, I look forward to sharing American Panorama with everyone and hope to push the envelope like Wright and Paullin did when trying to create “the ideal historical atlas.”

The Fall of Confederate Richmond Envisioned Through Mapping


Damage by the Evacuation Fire of 1865

We have been diligently working on a new project for the Commemoration of the American Civil War 150th Anniversary and the Fall of the Confederacy in Richmond. More specifically, the “Richmond’s Journey in Nine Questions”- A “Pop-Up” Museum on Capitol Square. We wanted to help address questions like what was happening in Richmond on April 2nd-4th 1865? When was the evacuation fires, and how much of Richmond was burned? What better way to do this than with maps! The goal of the project was to map the events leading up to the fall of Richmond.

On the morning of Sunday April 2, 1865 Confederate lines near Petersburg broke after a nine month seige. The retreat of the army left the Confederate capital of Richmond, 25 miles to the north, defenseless. The video we created provides a visual overview of some of the most significant events of the dramatic days that followed.

Over the next three days, the Confederate government evacuated, mobs looted countless stores, fire consumed as many as a thousand buildings, the Union army occupied the city, thousands were emancipated from bondage, and President Abraham Lincoln toured the former Confederate Capital. The animated map illustrates how these momentous events unfolded in time and space.

Spatial data was created using first hand accounts of events. For instance, Lincoln’s visit relied on the detailed account provided by Michael D. Gorman’s “A Conqueror or a Peacemaker?: Abraham Lincoln in Richmond” that appeared in volume 123.1 of the Virginia Magazine of History and Biography. Points were placed on locations mentioned in the article and a time attribute was associated if applicable. Lines were drawn between points to simulate a path and additional points were added along the line. These points fire one at a time which gives the appearance of a person moving along the streets.

For the Evacuation Fires we used historic maps detailing the extent of the fire and relied heavily on research of others. Based on historical burn extent maps we recreated the burn extent using F.W Beers footprints that were used for the 3D Richmond project. We scoured the research and found approximate times of when the fire started and when it reached certain locations. From this, I created buffers to approximate the fires’ spread. This was used to randomly distribute points within the footprints and blocks (Image above). The time attribute from the buffer analysis was joined to the points and a random start and end time was given within the time range to help the fire seem more organic and less structured.


Each event was added to CartoDB which utilized its visualization tools. Each visualization was then packaged using Leaflet’s mapping library. To read more about the project and see the video click the image below!


What is Value-by-Alpha anyway?

As some of you know, we are currently producing a Digital Atlas of American History. While working on one of the maps for the Atlas, I was searching for a better way of showing foreign-born population other than your run of the mill choropleth map. I stumbled upon a paper written by Robert Roth, Andy Woodruff, and Zachary Johnson titled “Value-by-alpha Maps: An Alternative Technique to the Cartogram.” You can read more about it in Andy Woodruff’s blog. After reading the paper and Andy’s blog I got really excited about trying this for our foreign-born population map.

Though choropleth mapping and area cartograms are two of the most common techniques for mapping thematic variables such as foreign-born population, each have significant drawbacks. Choropleth maps fail to distinguish between areas of high and low population. Area cartograms address that issue but can be difficult to interpret given the spatial distortions they introduce. Roth et al. (2010) have developed a new method for developing thematic maps: value-by-alpha mapping.  In the case of foreign-born population maps the value-by-alpha technique uses varying opacities to highlight areas of high population density and deemphasizes areas of low population density. This equalizes foreign-born population based on density and show the percentage of population in each county that were born outside the US—all while preserving both shape and topology. Utilizing this method for foreign-born population effectively highlights high density areas with large foreign-born populations, showing patterns that would likely be missed with traditional choropleth or area cartogram mapping techniques. 2010_foreign_born

My first attempt involved using ArcGIS. Achieving this in Arc is a little problematic, but nonetheless you get a pretty cool map. My one issue is that Arc really limits you on the color range and transparency values you can assign to a layer without some finagling. Andrew Wheeler has a great tutorial in his blog about how to do this in ArcGIS. I found a way to get around these limits in Arc but only after going with my second attempt. To do this you need to calculate in the attribute table a transparency value assigned to each value based on population density and assign that calculated value using the Display Expression tab under Layer Properties. Here are the results using the method outlined in Andrew’s Blog.

The second attempt involved using Leaflet and JavaScript. After discussing the first method with our director Rob, we decided this would be better achieved using JavaScript and Leaflet. JavaScript allows you to give each individual population density value a transparency and color value, where Arc makes you clump these into categories. Rob helped out a great deal with this method since my programs skills are very minimal. This gave us the greatest detail and really highlighted areas of high population density and high foreign-born population. The percent foreign born value is equalized by population density using alpha channels. This visually weights the map and neutralizes areas with low population density. Here is the same map as above but using JavaScript. 2010 Outlined


Though their are a couple of ways to do the Value-by-Alpha method, we found that the JavaScript approach gave us the most granular results and really conveyed what we were trying to show with the foreign-born data. Below is the final poster we presented at this years VAMLIS Conference.


Main Poster 04.psd

%d bloggers like this: