Mapping An Artistic Mile
Stretching from City Hall, past the Barnes Foundation and the Rodin, to the world-famous Philadelphia Museum of Art, Philadelphia's Ben Franklin Parkway is proudly hailed as the "the most artistic mile in the country." The Greater Philadelphia Tourism and Marketing Corporation (GPTMC) sought a website that would showcase the museums on this mile for their "With Art Philadelphia" campaign.
Early in the discovery process, GPTMC envisioned an exciting interactive map. This map needed to market the parkway's offerings and encourage tourists to visit.
Our first thought was a stylized Google Map. We used this technique for a recent MoMA project on Diego Rivera. While Rivera's New York looks amazing in black and white, this treatment didn't quite work for the Parkway. The lushness of the grass and trees looked flat and boring on the Google Map. All in all, it looked about as appealing as a stretch of I-95.
We started experimenting with illustration, and came up with a nice initial concept. The intent was to combine this approach with a variety of infographics to communicate, at a glance, the wide array of art options along the Parkway. Although promising, the team decided it didn't quite capture the campaign's aesthetic approach.
Custom 3D Map
Ultimately, we decided to build a custom 3D map in 3D Studio Max.
Thankfully, we didn't have to totally start from scratch. Google Earth and Google's 3D Warehouse had many of the buildings we would need for the model, including some of the more difficult historic buildings.
Using these pieces, we built our own 3D model. We could then fly through the model and take snapshots from any angle along the Parkway.
Refining the Map
The final interactive map was to include 8 stops along the parkway, stretching from City Hall to the Philadelphia Museum of Art. Before we could ask our 3D artist to start rendering, we had to identify the exact angle and location for each stop. Once this was done, the 3D artist was ready to go and could focus on the structures that needed detail, and ignore those that didn't (the unrelated buildings were intentionally left very minimal).
The animation is actually comprised of two image sequences. The first sequence brings one from the Art Museum to City Hall; the later sequence brings you back again. Along the way are 8 stops, each with markers and points of interest.
The experience is preloaded in the background. We experimented with the number of frames we would need to keep a relatively smooth animation, while keeping the download reasonable. In the end, we arrived at 18 frames for each sequence. We also experimented with the compression of the frames, allowing the in-between frames more compression than the stops.
After rendering the frames in Studio Max, the graphics underwent considerable fine tuning. The client was particularly interested in the color of the trees and roads. To get this level of detail, exported mask layers from Studio Max and colored them into Photoshop.
The Final Result