Detail

NYU-Poly Year in NYC

6th January, 2014 ✭ by Cantilever

We are very proud of the final result and continue to use some of the methods we learned on this project in other work. We were happy to push ExpressionEngine into some unexplored territory and watch it meet the challenge.

Year in NYC is an ambitious interactive map application which merges the Google Maps API with ExpressionEngine in a clean, focused design. The initial creative brief was to translate a print brochure to the web, but to ignore the existing design and pursue directions only possible online. The brochure contained information about various locations throughout New York – what they feature, when you can visit them, and their travel distance from Poly. The goal was to illustrate to prospective students the wealth of experiences available to Poly students outside of the classroom.

We chose to restructure the content as a clickable map. Users begin on the homepage and zoom into places of interest. Then, they can click to nearby places, or hop back to the full map to explore another area. We felt it was important to illustrate the buzz of city life, so we tried to include as much real-time data as we could, displaying social media timelines, online reviews, and RSS feeds.

ExpressionEngine was a perfect fit for this challenge. We knew we had to build a sophisticated JS frontend, but that our client still needed access to a sensible control panel. ExpressionEngine allowed us to do both. In order to do so, however, we had to explore an interesting architecture for our ExpressionEngine templates.

We needed to support HTML5 history to provide an elegant experience to our users, but we also didn’t want to lose support for older browsers. We chose to bifurcate our ExpressionEngine template structure, creating both traditional page-by-page templates which can be hit directly by URL and a set of “API” templates which let us query for location data in JSON format and grab partial HTML templates. Instead of requesting whole pages and parsing them in the frontend, we let the javascript grab only what it needs to replace the current page state with the next page state, updating all global controls and data. For older browsers or the first pageload in any browser, ExpressionEngine can embed those partials in a larger template while still exposing the template for use as an API endpoint. This means no duplicate frontend code and easier maintenance.

In order to support our desired social media features, we needed custom PHP code to handle all the API integrations. We could not find a single available module to do quite what we needed, so we built our own structure: A parent module which handles all shared aspects of a backend API request, and individual submodules which translate the Yelp or Twitter API to our standards. Therefore, we could borrow from existing open-source code for each individual API, without needing entirely separate modules with different syntax for each.

We are very proud of the final result and continue to use some of the methods we learned on this project in other work. We were happy to push ExpressionEngine into some unexplored territory and watch it meet the challenge.

ExpressionEngine News

#eecms, #events, #releases