Bluecadet Interactive

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.

Google Maps

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.

Isometric Illustration

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).

We used this birds eye view to establish the initial position of the stops.

Google Earth was invaluable in collaborating with the client to refine each of those stops.

The Animation

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.

All of these frames are loaded and cycled using custom Javascript and JQuery. This allows the experience to be viewable on the iPad, which obviously wouldn't have been the case had we built the experience in Flash.

Fine Tuning

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.

A mask layer from one of the frames.

The Final Result

Explore the map.

Go Further

Since the map is written in JavaScript, it's essentially open source. Feel free to poke around, take a look at the JavaScript, and take a stab at playing with the code and techniques. If anyone has any questions or feedback, comment below or shoot us an email, we're happy to help.

View the Code