Announcing the Official Launch of Secret City!

Ever relax near the lake with a “grownup soda” at MacArthur Park and wonder, “Wow. Where did all these buildings and this neighborhood come from? Was this place always like this?” Or ever find a cool little spot in the neighborhood that sells pastries and want to let people know about it? Wonder and wait no more; Fort Awesome, Inc is proud to announce that the launch of the Secret City website is here!

Every neighborhood has its own story of how it developed over time and came to be where it stands today. Furthermore, this is a story that continues to be written. We invite everyone to participate in the telling of that story by sharing their “discoveries” with a community of planners, local historians, residents, or anyone with an interest in the neighborhood. Our website provides a place to do so, using historical photos and data to document the old alongside some of today’s most popular social media.

The Secret City website was built using GoogleMaps v3 API. Some of its features:
-Search function for ZIP codes and/or full addresses
-Functionality with Yelp, Twitter, Flickr, Foursquare
-Historical data (population, race, income, etc.)
-LA Metro routes around MacArthur Park
-A “Secret City” game (It’s a secret)
-Draggable, clickable elements for most map functions
-All functions and toggling layers docked on easy-to-use, accordion-style sidebar
-Suggestions/feedback form for users (GoogleDoc)
-FAQ/Help page to guide users through the site

Most mapped items can be clicked for a closer look.

A clue from "Secret City: The Game"

The site provides current and historical data (e.g. population, income, race) at the Census Tract level.

Currently, social media such as Twitter and Flickr are central pieces of the site’s functionality, even for the historical element (old photos are uploaded to Flickr and tagged in a unique way). User-generated photographs play a particularly important part. As such, we would have liked to include Instagram as an additional API if we had more time to do so. However, we ran into many difficulties with their API.

Foursquare functionality also was difficult to implement. Because the newest version is still not completely stable, our calls to this API did not always return the results we wanted. We specifically wanted to utilize Foursquare’s “trending” function but found it difficult to produce map markers for the data we were requesting. (We were successful in retrieving the data, but not mapping the results.) For now, the Secret City site uses a widget in the sidebar to provide static information about local establishments, which is already covered by our use of Yelp. Improvements on Foursquare’s API are pending.

One issue with the site that gave us some trouble was integrating an accordion-style menu within another one on the sidebar. We thought doing so would give our demographic data legend a cleaner look, but we struggled with the coding necessary to integrate it seamlessly and eventually scrapped the idea. This could be something to look at for improvements in the future.

We are considering further developing “Secret City: The Game” with more puzzle pieces and a better experience with mobile devices.

Who we are


Roy Samaan, Master of Ceremonies at Fort Awesome, was responsible for integrating the Yelp and Twitter functionality into the site. He is also the mastermind behind “Secret City: The Game.”

Alex Pudlin, Junior Custodian, handled the data layers and also created the skeleton/general layout for the entire site.

Daniel Paredes the Messenger coded data layers and also integrated the Flickr API into the site.

Justin Oh, Executive Vice-President of Security, gathered historical photos from around the neighborhood and Los Angeles to put on the site.

Technical Requirements fulfilled:

Interaction requirement:

  • Users can enter ZIP code and/or address to orient map
  • Using our Flickr instructions, users can add historic photos to the site

Custom functions:

  • The site makes calls to Flickr’s API by using tags that Fort Awesome created specifically for the site. We also implemented a feature that displays and toggles based on decade tag combinations.

Layer requirements:

  • We authored nine custom layers: eight demographic layers and a rail line layer. The demographic data (by Census Tract) is accompanied by a legend under each decade in the sidebar.
  • Racial data (by Census Tract) appears in a draggable pie chart whenever the user drags the Secret City logo to a Census Tract.

Help requirement:

  • The FAQ/Help section is under the “About” and “Data” tabs at the top of the main page.

Announcing Plans for Secret City 1.5!

As the Secret City project continues to evolve, we at Ft. Awesome are looking forward to rolling out the next iteration of this project in two weeks time. To summarize the changes we will make to our current project:

1.      Migrating the Secret City game to its own page, along with transit information

2.      Combining social networks to give a full picture of what is happening in MacArthur Park in the present day:

a. Twitter: Geolocated tweets around the project site to give users a sense of      what’s hot in the area.

b. Foursuare:  To give users an idea of what general businesses are trending in the area. In other words, where are people checking in most ?

c.Yelp: To give users a sense of the area’s best restaurants.

d. Instagram: Allows (theoretically) up-to-the-minute posting of geolocated photos around our project area. This will sidestep the lag in posting photos that Flickr imposes.

e. Flickr: To allow users to post historical photos around the project site, as well as to share present day photos. In addition to historical photos from around Westlake/MacArthur Park, we have also seeded additional historical photos for other locations around Los Angeles such as Venice and parts of San Fernando Valley.

f. We have opted to forego adding in YouTube functionality since sorting for relevance was proving difficult and we feel that posting video via twitter links can be equally effective without cluttering the map.

3. Our demographic layers are now active! Users will now be able to see how the demographics of the Westlake area have evolved over the last 20 years.

4. Our page will now have a search bar that allows users to search for various zip codes.

Mockups

Rather than compose new storyboards/wireframes, we have begun to play around with some of the functionality as actual websites.  For a peak at the main website, please consult the image below or visit the test link  (link to yohman.com/students/apudlin/secretcity_final.html).

As you can see, there is now an additional tab at the top of the page, which will link to the game site. When you click on that link, you will be taken to a new game-specific page (link to yohman.com/students/apudlin/secretcity_final2.html):

We are also currently in the process of implementing an accordion-style menu. One challenge that we are facing is that our menu will have an accordion within an accordion. We aren’t quite sure how well that will work yet.

Although the accordion is not part of the site yet, we have worked on initial designs similar to the image below:

Challenges

As we have worked through new functionalities, we have also faced a few challenges.

1.API Implementation

a. Yelp: We are still struggling with the daily limit on calls to the Yelp API. We have requested an increase in this limit from Yelp, but we have not

b. Foursquare: Adding general check-ins in the area is possible, but limiting displayed results to the “hottest” businesses has proven difficult

c. Instagram: functionality is limited by the frequency of postings. A site which uses instagram in a way that is similar to our intended use(mapstagram.com) shows that there are only 2 pictures within 5 miles of Westlake. Should we focus on only 1 photo-sharing site, even though there are limitations to how quickly photos appear on our site?

2. Older census tract shapefiles: The size, position and shape of census tracts has not been static over the years. While we have data going back several decades, we do not have associated shape files of census tracts from those decades. When older data is added to our current project, gaps appear where the tracts have changed shapes. Is there a workaround to this kind of problem?

Announcing the beta launch of Secret City

The development team at Fort Awesome, Inc. is proud to announce the launch of Secret City, an innovative way for users to connect the present urban fabric with the past. Secret City is a project that will remind people that our present stands atop a rich, complicated, multifaceted past. With the advent of social media, we have become obsessed with capturing contemporary moments in photos, videos, tweets, check-ins and more. Yet, our predecessors also sought to frame their experiences for posterity. Secret City allows users to map representations of the “now” alongside images, demographics and news of decades long-past.

Scope

Starting with the neighborhood of MacArthur Park in Los Angeles, users will have the ability to compare historic photos to current photos, view changing demographics and see old news stories represented by geocoded markers. The beta launch includes many MacArthur Park-specific layers such as historic photos, current photos, local businesses and nearby bus lines. In addition, current photos will appear for most of Los Angeles County.  Unfortunately, the planned demographic layers will not appear until the site’s official launch.  As this project grows and users upload their own historic photos to Flickr, the project will extend to all of Los Angeles County and eventually beyond.

Audience

We believe that Secret City will have relevance for anyone interested in the evolution of cities over time. Naturally, current residents of MacArthur Park and Los Angeles may have the most immediate interest. However, as Secret City expands to more cities and neighborhoods, we believe people across the nation will check out what Secret City has to offer.

Potential Application of Project
The information we uncover and display will help to bolster neighborhood cohesion by allowing individuals to attach their personal histories to certain decades and locations. We hope to remind people that the city is not a static structure and that existing conditions need not necessarily remain one way forever.

User Experience

The beta version of the website offers users a few of the many features that we will ultimately include in the final product. When the user first visits the site, he/she will find a pre-loaded map of MacArthur Park. Along the left-side of the map, the user will see a range of selectable layers. Currently the user only has a few layers to toggle on and off: bus routes near MacArthur Park, nearby establishments (through the Yelp API), “puzzle” locations for an upcoming urban game that takes place near MacArthur Park and photos within 20 miles of UCLA and 20 miles of MacArthur Park (through the Flickr API).

In addition, the user will have the option to learn more about the Secret City project by clicking on the “about us” tab at the top of the page. The About Us page also includes a brief FAQ on the left side of the page.

For information about data sources, users can click on the “data” tab at the top of the page.

Clicking on the “home” tab will return the user to the initial map.

Data Used

Flickr API

Secret City calls on Flickr’s API to show photos within 20 miles of MacArthur Park and 20 miles of the UCLA campus. In addition, we uploaded, geocoded and tagged historic photos to Flickr. Thus, when a user selects older photos for say the 1940s, Flickr photos tagged with “secretcity” and “1940” will appear on the map.

Yelp API

The Yelp API shows users establishments such as bars and restaurants around the MacArthur Park/Westlake area of Los Angeles.

Metro API

Secret City calls on the Los Angeles Metro API to show users the bus routes in and around the MacArthur Park neighborhood.

Historic Photos

The historic photos we uploaded to Flickr all came from the USC Digital Archives, the Los Angeles Public Library and Sky Scraper City.

Demographic Information

Although the beta website does not display demographic information due to restrictions with the Google API, we prepared multiple demographic data layers in GIS. The 1990 and 2000 data come from the Census’ own Fact Finder website. Data prior to 1990 come from Social Explorer. Demographic data from 1940 to 2010 will appear when the website officially launches in early June.

The Development Process

Fort Awesome spent four weeks conceptualizing the Secret City website. For a peak back at the initial storyboards, wireframes and concept, please visit our original proposal. Other than some aesthetic tweaks, and the aforementioned non-working website components, the website’s functionality remains unchanged from the storyboards/wireframes.

Challenges

By far the largest challenge we faced was the integration of the GIS-created demographic layers into the site. Even though we converted each layer into a .kml file and appeared to code it properly, the layers still failed to appear on the map. We double-checked all the layers to ensure they appeared in Google Earth. The debugger informed us that the error was actually on the Google API side. We consulted specialist Yoh Kawano who confirmed that the error was due to limitations with the Google API. Despite additional efforts to reconvert the layers through Google Earth and with Geocommins, the layers continued to not appear.

Another major hurdle was the delay time Flickr places on new accounts’ uploaded images. Although we uploaded all our historical images on Saturday, they may not appear on Flickr in time for the beta launch.

Finally, despite efforts to incoporate Foursquare, Twitter and Instagram APIs, the team ran into many roadblocks. Rather than spend too much time on these APIs, we decided to first focus on Flickr, Yelp and Metro and prepare the others for the site’s main launch in early June.

Future Website Functions

The final launch will reveal a much more robust site. All of the selectable layers will actually toggle on/off the map. This will require us to get a better handle on the following APIs:

In addition, we will solve the demographic layer problem and also create and include layers for 1940-1970.

Finally, we will add a few new featurues, most notably a “search” bar that will allow users to enter Los Angeles County locations and a layer of selectable historic “news” markers for 1900-2o00.

Division of Labor

Each member of Fort Awesome, Inc. played a major role in Secret City’s beta launch.

Alex built out the basic framework of the site, including most of the html code and the style guide. In addition, Alex wrote the copy for the FAQ, About Us and Data descriptions. Finally, Alex aggregated Census data to create population density, racial make-up, employment status and median household income shapefiles for the 1980, 1990 and 2000 Censuses. As we explained above, a problem with the Google API’s .kml layer restriction prevents us from displaying the GIS layers at this time. We believe we will rectify the problem by final launch.

Justin was Fort Awesome Inc.’s photo-man extraordinaire. He poured through hundreds of potential photos. Once he found an appropriate batch, he uploaded the photos to Flickr, geocoded them and tagged them with a decade tag and the unique “secretcity” tag. Unfortunately, Flickr takes a few days to display uploaded photos from newly started accounts. Thus, we are not quite sure whether the historic photo feature Justin initiated will appear during the beta launch presentation. However, they should at least show up within a couple days after the presentation.

Roy implemented all Yelp API functionality, including the proper javascript and html codes. In addition, he began work on functionality for the Twitter and Four Square APIs. While only the Yelp API calls will appear on the beta site, Roy’s work on the other APIs prepares us well for the final launch. Finally, Roy researched historical news articles that we will include in the official Secret City launch.

Daniel coded all non-Yelp sections of the Secret City script. This included extensive work with the Flickr and Metro APIs, research into the Instagram API, creation and inclusion of a Metro rail .kml layer and a valiant effort to get all the demographic layers to appear on the map.

Secret City – The Game

Clicking through old photos or finding out about secret local businesses from the comfort of your own is great! On the other hand, it’s also great to get out and explore a neighborhood for yourself, but this can be a daunting task. The aim of Secret City – The Game will be showcase MacArthur Park by guiding participants through a series of puzzles which simulate a classic LA Noir style mystery. The location of these puzzles is shown on the map to give a sense of the parts of the park that will be explored in great detail through gameplay. These are corners of the park that are rarely visited – especially not on foot. Secret City – The Game fits well into our general strategy to improve awareness of the everything LA’s historic neighborhoods are hiding!
If you’re interested in checking this game out, feel free to contact Roy or Daniel at Ft. Awesome HQ for more information. (Note: Secret City – The Game is also in development at the moment. Playtesting is under way and we are shooting for a beta rollout of the game in early June. Stay tuned!)