Captain Planit takin’ over da Planet

Announcing the launch of Captain Planit’s UCLA Evacuation Map!

“The power is yours!” –Captain Planet
“If you Planit, they will come!” –Captain Planit

Project:

On June 6, 2011, we launched our UCLA Evacuation Map (best viewed in Google Chrome).

With the recent natural disasters in Japan and the United States, Captain Planit realizes how one can never be too prepared for potential disasters. Our project aims to provide a vital tool in disaster preparedness for UCLA students, staff, and visitors. In our opinion, a crucial element in being prepared is information and having access to it. In developing this campus map, we carefully thought about what information people would need if a disaster were to strike our campus. It is our hope that this information can be used at any point during the disaster management process.

We decided to provide users with the following information:

Floor plans – We provide the floor plans for the School of Public Affairs Building. If you are in the building during a disaster, our site will be able to show you the nearest stairwell and exit.

Evacuation zones – Areas that are designated meeting points during an emergency

Emergency services – Police stations, fire stations, hospitals, and first aid centers are labeled on the map

Traffic Evacuation – This provides drivers with information about the nearest exit

Real-time Traffic updates – We use Google maps to provide users with real-time traffic conditions so they can determine the best way to reach their destination

Social media updates – Captain Planit has implemented ways for users to provide campus updates via social media.

Flickr –The first way users can provide updates is through Flickr. Users can document the physical conditions of the campus with pictures and upload them online by tagging them as “UCLA”. After a period of time, pictures will be georeferenced to our map.

Twitter – Users can also use Twitter to provide real-time updates about campus conditions. If users tag their public tweets with “#UCLA411”, their update will show up on our Twitter Ticker. If users have their turn on their location in addition to making their tweets public, their tweet will show up on our map. This will provide a great visual for users to know where the information is coming from. (Currently the tag for this feature is #UCLA just to demonstrate its potential)

Diagrams:

Final wire-frame

Previous wire-frames

Team:

Logan Contreras:

Fixed building layers, Fixed Flickr feed to toggle off on load, Toggled bruin bear icons, Drafted initial proposal and revised proposal, Created evacuation area image, Toggled SPA building layers, Fixed bug that made SPA building layers appear on map load

Zodin Del Rosario:

Connected flicker feed for campus photos, connected flickr feed for building photos,  connected twitter ticker live feed, connected twitter map markers, created midterm blog, created final blog, created group updates

Ricardo Gutierrez:

Created emergency evacuation zone layer and info window content, created emergency zone meeting spot bruin markers (original icon) and info window content, created menu, logo, and html divs that organize site, created toggle visibility function to toggle divs (i.e. twitter div and legend div), created spa building floorplans in photoshop, painstakingly converted to KMZ that match up with google map, and coded into site and created content for info windows, added live traffic option to menu, created help section website and video tutorial, created legend

Tsai-wei Wen:

Created traffic evacuation layer in ArcGIS, retrieved data from GIS server to show evacuation instructions, presentation slides, created emergency service KMZ layer, toggled emergency service layer, toggled floor layer, toggled emergency zone layer, designed logo

 

Evaluation:

What worked: Our site accomplished what we set out to do. We are happy that our features are functioning correctly. We are also happy that our APIs and connection with ArcGIS server are working, because other groups have had problems in these areas.

What didn’t work: We had minor bugs with respect to toggling and formatting our website. More specifically, we had problems with toggling Flickr and getting the Twitter ticker to show properly. We were able to address these issues for the most part. We’d prefer to not have Flickr load on start, but we are OK with it running on load for now.

As of today, our site works best in Chrome. It does not look the way it should on other web browsers. Sometimes we have problems with our info windows and their size and their clickability. For the most part, it works though. There is no easy way to zoom out once a user has toggled a floor plan. The user will need to refresh the site to the correct view.

Documentation:

User Interaction: We have two ways for the user to interact with our site. The first is to access the floor plans through radio buttons and the second is twitter updates. The twitter feed allows users to provide information to the other users and the website administrators. It can be a valuable tool that provides real time information.

Custom function:

We have custom functions that control our: twitter feed, ability to toggle divs, and JavaScript functions that control the sliding of the menus.

Custom layers:

  • Evacuation zone
  • Floor plans for School of Public Affairs
  • Emergency services

CaptainPlanit–FinalSlides

Week 9 Progress

Captain Planit is doing well. After our midterm, we have shifted our focus onto user functionality.

As a site dedicated to campus safety and disaster management, we began to ask ourselves what would a user need to know in the case of emergency.

The midterm provided users with:

  • Floor plans and escape routes
  • Evacuation Zone
  • Social media access for the latest campus updates
  • Campus service providers

FINAL GOALS:

For the final, 1) we want to integrate ArcGIS server to help us expand the services we can offer. We hope that by working with the UCLA Campus Facilities, we can provide users with information regarding nearby first aid kids, fire extinguishers, and parking lots.

2) Yoh has also recommended that we georeference user’s tweets and show them on the map with a marker. This would allow users to locate information and see where it is coming from.

3) Finally, we want to clean up the user interface and add a help section. We want using our site to be intuitive for the user, so we will pay attention to where we place our menu and how we categorize our functions. A help section will go through step-by-step examples of how our site functions.

FINAL DEVELOPMENT STATUS:

We are currently working on the user interface and have already improved the menu system. We have requested a student account for our group. We hope that having a group account will allow us to have clean code and store the files and folders in one place. We will be working on the ArcGIS server and Twitter functionality from now until the final.

FINAL WIREFRAME:


FINAL CHALLENGES:

Our initial contact at the UCLA Campus Facilities has not gotten back to us, which will be a big problem if we do not hear from him. If we can’t rely on the Campus Facilities ArcGIS server, we will author our own layers and use the class ArcGIS server.

We hope that we can make our site compatible with as many sites as possible. Right now, our site is not working well on Firefox and Internet Explorer.

MIDTERM PROPOSAL:

The following is a recap of our proposal that was done before our midterm:

Proposal

BACKGROUND:

Given the scope of the devastation caused by the recent Japanese Earthquake and Tsunami, the necessity of sound and effective disaster protocols is undeniable. The proximity of the UCLA campus to the ocean and hills, and the density of the campus population, compels us to provide the best possible contingencies in the event of any disaster. The quick and all-inclusive dissemination of information is vital toward this end.

GOAL:

We, the members of Captain Planit, are seeking to develop a web application that will allow members of the UCLA community and visiting guests to access evacuation plans and disaster related information through an interactive and user friendly interface.

DETAILS [UPDATED]:

Utilizing the Google Maps API, the team will construct a campus map complete with building designations and locations. The team will overlay floor plan data provided by UCLA Campus Facilities to display the layout of the Public Affairs Building (PAB) as a prototype for the evacuation plan project. The team will manually create poly lines for evacuation routes and highlight the exits for each floor. From the campus map, users will be able to click on the building, select their location within the building, and instantly access the evacuation route for that location. Additionally, the campus map will contain a layer displaying “region evacuation areas” as designated by the UCLA Emergency Management Office.

The team will incorporate the Twitter and Flickr APIs to allow for real-time user updates regarding the conditions of campus locations. These may include information on obstructions, the extent of visible damage to certain buildings, or the location of any disaster relief supplies provided by federal, state, and local authorities.

The team is also considering optimization for mobile devices, which would be one of the quickest methods of accessing the application. Access could then be achieved even if the UCLA WiFi infrastructure were to be compromised.

Functionality

PUBLIC AFFAIRS BUILDING:

Our site will provide floor plans with evacuation route polygons and shaded exits for all six floors of the Public Affairs Building with features that allow users to:

  • Click on the public affairs building and bring up a menu with selectable layers for each floor of the building
  • Highlight all the exits, staircases and evacuation route for that floor.
  • Select layers that show fire alarms and fire extinguishers for each floor.
  • For example a user on the sixth floor will toggle the sixth floor layer, which will show them a route to the nearest staircase. Then the user would select the first floor to complete the route from the stairs to the nearest exit. If possible we include a feature that allows users to click on any staircase to bring up the first floor layer
  • See a layer with the designated post evacuation meeting spot will be included for each building. This will either be activated at the same time as the floor plans or only when the first floor is selected.

CAMPUS WIDE:
The campus wide map will include a toggle menu with layers that will feature:

  • The designated evacuation area (marked with a star in the image) for each region of campus (regions designated by numbers)
  • Shaded polygons or markers for each parking structure on campus.
  • Designated vehicle evacuation routes from campus.


API:

  • Our website will include information provided by UCLA Campus Facilities API. This will include attributes for that will appear when selecting a building.
  • Our website will include Flickr API functionality any user can take a photo which will be geo-located on campus. This could be useful to show users where first aid stations are located after an evacuation.
  • Our website will include twitter API features.
  • Using a designated hashtag, or if a user has geolocation set in their profile, a twitter will be able to geolocate their tweets on the campus map. If you are trapped following a disaster after you call 911, you can tweet to show your exact ge-location. Also if UCLA tweets Bruin Alerts, they can show the geolocation of the threat.

Site Design

WIREFRAME:

USER EXPERIENCE:






Milestones and Potential Concerns

MIDTERM:

By Week 6, Captain Planit hopes to have the website successfully connected to the UCLA Campus Facilities API and allow users to access the campus map. We would like to demonstrate the potential of this project by applying some of our key features to the Public Affairs Building (PAB). A user should be able to toggle a specific floor in the PAB and have access to the floor plans and evacuation route for that level.

FINAL:

By the Final, Captain Planit will have access to campus rasters via the the Campus Facilities ArcGIS Server. With this data, we will be able to provide more campus-wide options that the user will be able to toggle on and off campus-wide.

We also hope to have connectivity with the Flickr and Twitter API. At this point, we will be able to demonstrate the website’s utility during an actual emergency.

POTENTIAL CONCERNS:

One of the biggest areas for potential problems is the sensitivity of the data we are working with. In meeting with a representative from UCLA Campus Facilities, we were informed that our requests for campus data will have to be screened for sensitive information. It is our hope that we will be able to have access to enough data so that we can provide users with an informative experience.

Another area of concern that was brought up during our meeting with the Campus Facilities representative was how to actually utilize the social media API. If our plan is to georeference user’s tweets, they will need to opt-in to make their locations public. Not many users opt-in to this privacy setting, but we have some other ways of working around this.

 

 

 

UCLA411 Beta

Captain Planit is proud to announce the beta launch of UCLA411(link). Since March 2011, Captain Planit has worked to improve the UCLA experience by developing a web application focused on campus security.

From natural disasters to criminal activity, UCLA411 will provide students with floor plans, evacuation routes, and  up-to-the minute information on the latest campus news.

Project Topic: UCLA Evacuation Plan

Project Description and Functionalities : An interactive campus map that allows users to toggle floor plans, evacuation routes, and see what others are saying about campus conditions. UCLA411 will also be able to stream photos and tweets from Flickr and Twitter, respectively.

Implementation: This site is for students, visitors, and faculty who want to learn or provide specific information about the campus. This concept is useful because not only does it provide you with the campus infrastructure, but it is flexible enough to respond to current emergencies. The information regarding the UCLA infrastructure came from campus facilities and the up-to-date information will be coming from Flickr and Twitter.

Website Planning: The following pictures after this section were mocked up by Captain Planit team members during our planning process. It was very crucial that our project concept be practical and within our skillset. The proposed site utilized skills we learned in UP206B. We did however, rely on some online sites to provide our group with information on how to improve the look and performance of our site.

Roles:

Contreras, Logan:

  • Create layers: Campus Map
  • Create layers: Evacuation Zones
  • Seed the social media with photos

Del Rosario, Zodin:

  • Connect: Twitter API
  • Connect: Flickr API
  • Write: Blog

Gutierrez, Ricardo:

  • Create layers: SPA Building
  • Create layers: Individual Floor Plans (6)
  • Create layers: Evacuation routes
  • Create layers: Emergency services
  • Layout: Map inset
  • Design: User interface

Wen, Tsai-Wei:

  • Toggle: Campus
  • Toggle: Evacuation Zones
  • Toggle: SPA building
  • Toggle: Individual Floor Plans
  • Design: User interface

Challenges:

Our biggest challenge was taking four people and being able to effectively communicate what each of us was working on. We did not want to duplicate any work efforts, so constant e-mails had to be sent out to update each other.

Additional features to implement for the Final:

Connect with the UCLA Campus Facilities ArcGIS server to have access to updated campus information

Improve User Interface

Bosses,

Next week is our midterm. Captain Planit has developed a plan of action that will ensure each individual members’ talents is utilized to the fullest capabilities. As a team, we have come up with a list of tasks we want done by next weekend and have split the work up fairly.

We plan on having the rough campus map, floor plans for Luskin building, and Flickr/Twitter API connected. We are individually working on our assigned tasks. For the most part, that involves cleaning up our files and preparing to make them into KMZ files via Google Earth.

The APIs are not up yet, but the Flickr tutorial last week helps a lot. I hope that Twitter does not cause many problems. I think a good source for help with the Twitter API will be the site that Yoh made for the Japan earthquake/tsunami…. or Yoh himself.

End transmission

 

Captain Planit: If you Planit, they will come

Proposal

BACKGROUND:

Given the scope of the devastation caused by the recent Japanese Earthquake and Tsunami, the necessity of sound and effective disaster protocols is undeniable. The proximity of the UCLA campus to the ocean and hills, and the density of the campus population, compels us to provide the best possible contingencies in the event of any disaster. The quick and all-inclusive dissemination of information is vital toward this end.

GOAL:

We, the members of Captain Planit, are seeking to develop a web application that will allow members of the UCLA community and visiting guests to access evacuation plans and disaster related information through an interactive and user friendly interface.

DETAILS [UPDATED]:

Utilizing the Google Maps API, the team will construct a campus map complete with building designations and locations. The team will overlay floor plan data provided by UCLA Campus Facilities to display the layout of the Public Affairs Building (PAB) as a prototype for the evacuation plan project. The team will manually create poly lines for evacuation routes and highlight the exits for each floor. From the campus map, users will be able to click on the building, select their location within the building, and instantly access the evacuation route for that location. Additionally, the campus map will contain a layer displaying “region evacuation areas” as designated by the UCLA Emergency Management Office.

The team will incorporate the Twitter and Flickr APIs to allow for real-time user updates regarding the conditions of campus locations. These may include information on obstructions, the extent of visible damage to certain buildings, or the location of any disaster relief supplies provided by federal, state, and local authorities.

The team is also considering optimization for mobile devices, which would be one of the quickest methods of accessing the application. Access could then be achieved even if the UCLA WiFi infrastructure were to be compromised.

Functionality

PUBLIC AFFAIRS BUILDING:

Our site will provide floor plans with evacuation route polygons and shaded exits for all six floors of the Public Affairs Building with features that allow users to:

  • Click on the public affairs building and bring up a menu with selectable layers for each floor of the building
  • Highlight all the exits, staircases and evacuation route for that floor.
  • Select layers that show fire alarms and fire extinguishers for each floor.
  • For example a user on the sixth floor will toggle the sixth floor layer, which will show them a route to the nearest staircase. Then the user would select the first floor to complete the route from the stairs to the nearest exit. If possible we include a feature that allows users to click on any staircase to bring up the first floor layer
  • See a layer with the designated post evacuation meeting spot will be included for each building. This will either be activated at the same time as the floor plans or only when the first floor is selected.

CAMPUS WIDE:
The campus wide map will include a toggle menu with layers that will feature:

  • The designated evacuation area (marked with a star in the image) for each region of campus (regions designated by numbers)
  • Shaded polygons or markers for each parking structure on campus.
  • Designated vehicle evacuation routes from campus.


API:

  • Our website will include information provided by UCLA Campus Facilities API. This will include attributes for that will appear when selecting a building.
  • Our website will include Flickr API functionality any user can take a photo which will be geo-located on campus. This could be useful to show users where first aid stations are located after an evacuation.
  • Our website will include twitter API features.
  • Using a designated hashtag, or if a user has geolocation set in their profile, a twitter will be able to geolocate their tweets on the campus map. If you are trapped following a disaster after you call 911, you can tweet to show your exact ge-location. Also if UCLA tweets Bruin Alerts, they can show the geolocation of the threat.

Site Design

WIREFRAME:

USER EXPERIENCE:






Milestones and Potential Concerns

MIDTERM:

By Week 6, Captain Planit hopes to have the website successfully connected to the UCLA Campus Facilities API and allow users to access the campus map. We would like to demonstrate the potential of this project by applying some of our key features to the Public Affairs Building (PAB). A user should be able to toggle a specific floor in the PAB and have access to the floor plans and evacuation route for that level.

FINAL:

By the Final, Captain Planit will have access to campus rasters via the the Campus Facilities ArcGIS Server. With this data, we will be able to provide more campus-wide options that the user will be able to toggle on and off campus-wide.

We also hope to have connectivity with the Flickr and Twitter API. At this point, we will be able to demonstrate the website’s utility during an actual emergency.

POTENTIAL CONCERNS:

One of the biggest areas for potential problems is the sensitivity of the data we are working with. In meeting with a representative from UCLA Campus Facilities, we were informed that our requests for campus data will have to be screened for sensitive information. It is our hope that we will be able to have access to enough data so that we can provide users with an informative experience.

Another area of concern that was brought up during our meeting with the Campus Facilities representative was how to actually utilize the social media API. If our plan is to georeference user’s tweets, they will need to opt-in to make their locations public. Not many users opt-in to this privacy setting, but we have some other ways of working around this.

Captain Planit: Mapping heroes

Captain Planit

When 4 public policy students come together on an Advanced GIS project, we combine to form….Captain Planit. We come from diverse backgrounds and have been trained in the art of GIS by the Yoh and Estrada dojos. For those that do not understand public policy students, we are powered by two things: happy hours and cost-benefit analysis(or as we like to call it benefit/cost analysis).

We are an eager group that is ready to tackle the challenges of this course, but the only question we have to ask is….what happened to Intermediate GIS?

Proposal

Background:

Given the scope of the devastation caused by the recent Japanese Earthquake and Tsunami, the necessity of sound and effective disaster protocols is undeniable. The proximity of the UCLA campus to the ocean and hills, and the density of the campus population, compels us to provide the best possible contingencies in the event of any disaster. The quick and all-inclusive dissemination of information is vital toward this end.

Goal:

We, the members of Captain Planit, are seeking to develop a web application that will allow members of the UCLA community and visiting guests to access evacuation plans and disaster related information through an interactive and user friendly interface.

Details:

The project will utilize the Campus Facilities API to construct a campus map that contains evacuation plan information for each building. Users would be able to click on any building on the map and instantly access the evacuation plan for that building. The locations of key facilities such as hospitals, police stations, and fire stations would also be featured.

The team is considering the use of the Twitter and Flickr APIs to allow for real-time user updates regarding the conditions of campus locations. These may include information on obstructions, the extent of visible damage to certain buildings, or the location of any disaster relief supplies provided by federal, state, and local authorities. The feasibility of incorporating the Bruin Alert system is also being explored.

Members

Logan

Logan Contreras, Sax Man…..Sexy Sax Man

His title speaks for itself

Zodin

Zodin Del Rosario, height:200px

Hopes to become height:300px when he gets older

Ricardo

Ricardo Gutierrez, Intern

Rick hopes to channel this internship into a full-time job at Captain Planit. Unfortunately, Captain Planit already knows that they do not have the budget to support another full-time staff. But let’s not tell Rick that.

Tsai-wei

Tsai-wei Wen, Intern

Tsai-wei is motivated by the fact that every hour spent interning at Captain Planit puts her one hour closer to fulfilling her internship requirement and one hour closer to leaving this place.