Things to go over…
- Welcome to 10 weeks of the Erin and Yoh show!
- Overview of the course
- Review Syllabus
- Who this class is for, and who it is not for
- Fill out form for students who are not registered
- Go over class website
- Use the Discussion Forum!
- How to submit assignments
- Group Projects: 3 to 4 per group (next week)
The spatial revolution of the web
- What’ an API?
- API’s and Mashups
Web GIS Examples
- Google Maps
- LA Times: Crime LA
- New York Times
- San Francisco Crime
- Picasa Photomap
- Twitter Map
- Sendai Twitter Map
- Sendai Relief Map
- Japan Quake Map
- Setting up your website using BOL (Filezilla, Dreamweaver, Notepad++)
- Basic HTML, CSS
- Hello Google Maps API
- get to know it, eat it, drink it, sleep with it, it is your friend for the next 10 weeks
Hands-on Coding Workshop
- Tutorial 1: Google Maps Hello World
- Map options
- Map Markers
- Info Windows
- Tutorial 3: Extra’s (time permitting)
Assignments: All 3 assignments due by SUNDAY
- Codecademy: http://www.codecademy.com/
Learn to code using codecamdemy’s fun and interactive lessons! For your week 1 assignments, complete the Introduction lessons and projects. You should end up with the following badges.
What to submit: When you are done, take a screen capture of your badges (make sure to include your name and points), and create a blog entry in the class website that includes the screen capture. Make sure to choose “Week 1: Codecademy” as the category for your post.
- Web development
You are working for a transportation agency and need to propose the location of 5 new metro stops in your community. Your boss has asked you to create a website that displays the 5 locations with a short descriptions of each. You are new to your job, and really want to impress your colleagues, and decide to create a fully interactive, online mapping display of your proposal. You should use info windows, adding descriptions to justify why you selected particular locations. You do not need to use advanced methods (such as buffering all existing bus stops) but the map should explain why you selected that location. If you are interested in adding your own shapefiles to display or layers from ArcGIS online, the code can be found here (from the Week 10 lab from Intro GIS) http://gis.yohman.com/up206a/creating-a-google-mash-up/
*Coding Requirement:You must use a function to generate your place markers (ie, do NOT copy and paste the same code 5 times). Also, you must figure out how to incorporate the creation of info markers within the function.Submitting your work:
- Create a maproom of your proposal, and post it on your BOL web space.
- Take a note of the URL (ex: “http://yohman.bol.ucla.edu/maproom.html”
- Create a new blog entry in the class website (here), embed your maproom by using the iframe shortcode (described here)
- Describe your proposal (Example submission)
- Make sure to choose the category for your post “Week 1: Website Assignment”
- Web GIS Site Reviews
Create two blog entries that reviews 2 sites that uses interactive GIS technology. Entry must include screenshots, an evaluation of technologies used, user-interface pro’s and con’s, and a general evaluation of what is good or bad about it for use in your own group projects. Your evaluation should cover: ease of the user interface for viewing information, its intuitiveness, and its completeness in providing information. Make sure to include the category for your post “Week 1: Site Review”