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.
- 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.
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.
Opening the layers panel and clicking a visibility toggle, displays, for example, commutes like this:
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.
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.
Drawings and close-up callouts were another piece of the original maps I kept.
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:
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.
User can switch the legend from numbers to grid coordinates aided by horizontal and vertical grid markers:
There are also layers highlighting items such as his 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).
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.
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.
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.
Here it is, closer to completion with all the landmarks I’d gathered listed at the top.