Week 7 Westside Connection

If you would like to see the map in a separate tab, please click here.

The Westside North-South Connection website has gotten a “face lift” this week! Some major changes (and challenges) to this week’s website are as follows:

  1. ArcGIS layers- This week, thanks to the addition of ArcGIS server space, I added two demographic layers. I was surprised how easily I remembered how to access TIGER Files and Census data from American Fact Finder 2. Formatting the data and joining the files in arcGIS was not nearly as painful as I remember it being last quarter! However, when I tried to upload my files to Whippet they were not showing up. I realized that I had to export my joined file as a new shapefile and THEN upload it to Whippet. This is common sense (I had a “duh” moment) but it took me a bit of time to figure out.
  2. ArcGIS layer toggling- Another “fun” challenge was the toggling of ArcGIS layers. I worked with Erin and figured out that I toggle them as single layers and not arrays. I did notice that this does not always work as smoothly (or as quickly) as I would like, but I think this is due to limited server capacity (although, I am willing to accept blame if my code is hacked together).
  3. New format- The Westside Connection website got makeover! It now has tabable navigation. I also added in an address locator search bar.
  4. Uncaught references- Bootstrap is funky! A lot of times it will work perfectly fine but every once in a while it will say that Bootstrap’s call is not defined. Normally, refreshing does the trick!

Introducing the Tulum Neighborhood Portal (Beta)

We are pleased to announce the Beta launch of the Tulum Neighborhood Portal!

Tulum Neighborhood Portal (Beta)

A picture is worth a thousand words, but working map is worth a million! Check out the full site at:


What is this website and what does it do?

The Tulum Neighborhood Portal is a neighborhood resource map for the citizens of the city of Tulum. It is a one-stop resource where community members can find out what public resources are available to them, and where. It is also a forum where the townspeople can express their opinion and make suggestions to their civic leaders about improvements that can be made.

The website maps out a variety of parks, bike rack locations, civic offices, and other points of interest, and includes info windows and photos about the location. These community resources are toggled by category, so viewers can turn them on or off at their viewing convenience.

Tulum is divided into “colonias” or neighborhoods. These colonias are also mapped in a toggled layer, allowing residents to see which colonia they belong to.

In order to connect residents with happenings in the community, a Twitter widget streaming Tulum-related tweets is also featured on the site. This allows community organizers to reach a wider, but Tulum- centered audience when tweeting about events happening in the city.

Why does this matter?

Tulum is a rapidly emerging Caribbean coastal town in Quintana Roo, Mexico. The neighboring global tourism destinations of Cancun and Playa del Carmen are a threat to Tulum’s future, bringing upon it rapid and unmitigated growth. The 18,000 citizens of Tulum are a diverse group of Mayans, Mexicans from other states and international small business‬ owners. These citizens share a common goal: to preserve Tulum’s culture and ecosystems.

With unprecedented growth on the horizon, the Municipality of Tulum hired the Tulum Raiders, to create a citizen engagement tool to help their citizens to shape the future of their communities. Tu Tulum: Tu Colonia means Your Tulum: Your Neighborhood. The neighborhood portal we’ve created is a tool to give the people of Tulum a forum in which to share their visions and to access resources in their communities.

The phases of creation:

The Tulum Neighborhood Portal is a dynamic project that can be modified based on the needs of the Tulum community. Here are visuals of the first phases of our ideas.

Wireframe 1


New additions, coming soon:

  • Toggle the neighborhood layers separately
  • Create and add additional main driving routes and bike routes
  • Work on the Design, such as adding a flash photo feed of images of community volunteers and celebrations
  • Add a poll using Google Forms and a space to provide recent poll responses
  • Add a general comment box that changes for each neighborhood
  • Make the site Live and encourage people to use it


Turkish bagpipes always seem to get in the way. Apparently, Tulum, the other noun, is a traditional bagpipe of the northeast region of Anatolia, Turkey.  Of more concern to us was the fact that a lot of people tweet about it, so they were showing up in the Tulum Neighborhood Portal Twitter feed. For the final, we will attempt to narrow the tweet search parameters to exclude these tweets.

Deciding on where the neighborhood boundaries would be was complicated. An actual document with these informal boundaries did not exist previously. Similarly, finding the resources to map was a challenge, because this required a lot of on the ground knowledge, as the city is only four years old.

The Tulum Raiders are constantly thinking of was to make the site extremely user friendly and inviting to the diverse population which includes Mayan groups and the foreigners that live there.


 Yumi “Coder Extraordinaire”: html coding of website layout and functional features;     weather widget

Lisa: “Neighborhood Info Wrangler”: Geo coding of points of interest, definition and creation of neighborhood KMZ files

Grace: “Design Whiz”: Planning and CSS coding of aesthetic properties of the website; blogging

Paola: “Social Mediabutterfly”: Modifying and implementing the twitter widget into the Tulum Neighborhood Portal; blogging.


Project Examples: Midterm to Final

While the selections below are not all-encompassing of the fine work produced in last year’s Advanced GIS class, these are all projects that have certain similarities to this year’s proposals. They are presented to provide examples of the kind of work students were able to produce, and to serve as a foundation from which you can build this year.

1) Railway to Heaven created a fantastic site to assist the California High Speed Rail Authority in station area demographic and built environment analysis.

See the Midterm to learn how the team incorporated live data from Zillow, Flickr, and Los Angeles County Metropolitan Transportation Authority in addition to published data from the High Speed Rail Authority and Orange County Transportation Authority.

Then check out the Final with it’s much improved site design:

And, it includes a very elegant use of Google Charts!!:

The y-axis labels below could be titled more transparently, but the chart and display is very clean and sharp.

2) Bici-Coders created a very useful tool for cyclists, planners, and interested members of the general public to better plan bike trips. The map provides bicycle information in a spatial format for the City of Los Angeles to be hosted on the LADOT website.

Here is the team’s Midterm that incorporates data feeds from Yelp, and also generates directions based on user-inputted origins and destinations.

See the improvements the team made on the Final including a cleaner User Interface and the ability for site users to propose new locations for bike storage using Google Forms.

3) Check out CloudWhirled’s site for a good example of keeping your design simple and its functionality clear. The sole function of the site is to assist affordable housing developers in determining how particular sites would score on the Tax Credit Allocation Committee Application (TCAC), a main source of affordable housing funding. The scoring system in the application is based on spatial proximity to amenities.

The Midterm laid out the base functionality for the site.

The Final includes a point calculator to assist affordable housing developers in determining how particular sites would score on the TCAC Application.
Point Calculator based on spatial proximity of site to amenities with manual verification capability:


4) Secret City allows users to map representations of the “now” alongside images, demographics and news of decades long-past. The site incorporates Flickr data feeds, and instructs users on how to add their own images to the map. The site provides an excellent example of the use of technology as a tool for place-based community engagement.

See how the site developed from the Midterm to the the Final.





Note: some language in this post was borrowed and modified from the team’s original blog postings.

Week 4: Website Assignment

The latest version of the Proposed Mid City Bus Stops website now features toggling! I decided not to include the bound part of the code because everything was outshining the proposed stops which is kind of the point of the whole thing. Admittedly the color scheme got a little bit nauseating this time, but I had to dedicate most of my efforts to making the site work this week.

Week 4: Add Toggles and Google Places to the Map!

This week I added toggles and Google places in the map. Now you can get the information of local businesses provided by Google place. You can check the boxes to turn on/off any layers as you like. Related bus lines can be shown when checked as well. I’m not sure if I deserve the name  “El Mapador” but enjoy the work! Will do more in the coming weeks!

( link to full screen map: http://www.yohman.com/students/2012/zhongbo/week401.html )

Week 4: A map with a mind of its own…or not.

This was a very frustrating week. I included the code from the tutorials and have not been able to get the google place icons AND the demographic layer AND the kmz layer all to show up, nor do my toggles do what they’re told! I feel like I am doing the coding equivalent of wrestling with greased piglets.

I wish I had a more professional, ambitious and together post for this week, but coding this weekend was like learning to roller blade on the beach on a hot sunny Saturday. I need someplace private to go learn this stuff, the coding equivalent of an empty parking lot in Temecula, where I can fall on my ass until I figure it out. This blogging is way too public.


When i-frame troubles get you down, and prevent you from telling the story you want to in your post, inserting a screenshot of your page and a hyper-link to your site is a good fall back. Here’s a nice example of this. The upload/insert settings hold the key to customizing static images in your posts.


Full size Lasercat:

Thumbnail Lasercat:

Making your images clickable:

Notice how there is an option to Link URL in the Add Media window above. This is where you gain the ability to make any image you insert into your post clickable in a way where it directs site users to any page you’d like. Simply insert the URL of the site you’d like users to visit when they click your image. Go ahead, click on the Thumbnail Lasercat above.