Maps from the Vault

These are PDFs, not web pages, but I am nonetheless proud of the concept and final product of these interactive maps. Beginning with maps from Edgar Allan Poe, the Man by Mary E. Phillips of the Richmond, Boston, Philadelphia, and New York (didn’t get enough of Baltimore completed to bother showing) of Poe’s time, I created vector versions in Illustrator, exporting them to PDF so users could click dozens of locations to see pictures and read additional information.

I like to think they demonstrate my commitment to accuracy, comprehensive information, detail, ease-of-use, and beautiful, meaningful data visualization.

Created with:

  • Adobe Photoshop (assembling maps from different sources, cleaning originals)
  • Adobe Illustrator (Creating cleanest, vector final versions with layers)
  • Adobe Acrobat (adding interactivity)

I can’t wait to make stuff like this exclusively with code.

Richmond, VA

Interactive map of Edgar Allan Poe's Richmond.

They’re all filled with hyperlinks to web sites as well as geographical features and information I added from my own research. I kept some of the original scanned maps–mostly the cool title banners as you see in the upper-right of the image above.

I’d only recently discovered PDF layers and was deliriously happy because they’re so much more efficient than Show/Hide Fields.

RichmondDeluxe1-0_02

Opening the layers panel and clicking a visibility toggle, displays, for example, commutes like this:

Map of Edgar Allan Poe's Richmond showing walk from Duncan Lodge to Elmirah Shelton's house.

Walking from Duncan Lodge to Elmirah’s house.

I started making these maps for my own reference while writing about Poe so I could know what he saw and when he saw it and other day-to-day stuff so commutes were really important to me.

Interactive map of Edgar Allan Poe's Richmond showing Susan Archer Talley's home, Talavera.

If I couldn’t find pictures in the Public Domain, I made sure to alter them enough to make them my own. Regardless, I cited sources. The following includes a combination of images from two different sources that served quite well to complement each other.

Interactive map of Edgar Allan Poe's Richmond showing possible death place of his mother, Eliza Poe.

Drawings and close-up callouts were another piece of the original maps I kept.

RichmondDeluxe1-0_should_be_05

Philadelphia, PA

In addition to layers like the Richmond map, I’m very proud of the UX/UI in this one. There’s the basic, opening view:

Interactive map of Edgar Allan Poe's Philadelphia initial view

The initial view lists landmarks by number in the legend. The user finds them by displaying numbers on the map. Zooming in prevents numbers on the map piling on top of each other.

Interactive map of Edgar Allan Poe's Philadelphia displaying numbers in legend for Landmarks.

User can switch the legend from numbers to grid coordinates aided by horizontal and vertical grid markers:

Interactive map of Edgar Allan Poe's Philadelphia using a grid of coordinates.

There are also layers highlighting items such as his home and work locations:

Interactive map of Edgar Allan Poe's Philadelphia showing Poe's home and work locations.

New York, NY

The largest and most detailed, New York requires full dimensions of 10,032 x 3221 to read the street names and locations. Even this 2508 x 805 version doesn’t allow you to see street names clearly. There’s just so much Poe in New York. This version still doesn’t include “the High Bridge” north of Harlem, Blackwell’s Island, or Queens (which is more for Susan Archer Talley Weiss–a Poe supporting character but the main protagonist of a different project).

Interactive map of Edgar Allan Poe's New York in progress.

Because he spent not one but two periods of his life there over several “sub-periods,” this map will also include timelines which I’m very excited about.

Boston, MA

Building Boston was more difficult because the map I started with (not from The Man), only showed a small portion of Boston and lacked many key Poe landmarks. So, in Photoshop, I layered it with another couple maps from closer to Poe’s time as well as a Google Map.

Creating an interactive map of Edgar Allan Poe's Boston.

After completing the boundaries of the … is that a peninsula? … and surrounding land (I couldn’t neglect to include the nearby military base given it’s connection to Poe), I had to remove irrelevant or inaccurate content.

Trimming modern elements from an interactive map of Edgar Allan Poe's Boston.

Here it is, closer to completion with all the landmarks I’d gathered listed at the top.

In progress interactive map of Edgar Allan Poe's Boston.

Advertisements

About jotascript

Aiming to please. Seeking to impress.
This entry was posted in Data Visualization, Maps, PDF, UI, UX and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s