Mashups! Matt Rahr ECAT – University of Arizona

Technical Workshop  Three Sessions  1:00 – 1:30pm What is a Mashup? How it can spatially enable your project... No programming experience needed  1:30 – 1:50pm Your First Online Map Browsing the Google Map API... Minimal HTML/Javascript programming experience  1:55 – 2:30pm A Look Under The Hood An Open Forum Code Review of a project… Moderate programming experience

What is a Mashup? Session I 1:00 – 1:30pm

Let’s Do It!  A “hybrid” website or web application  Content from multiple sources  Creates a completely new service What is a Mashup? + Your Data

What is a Mashup… cont  Allows anyone to combine existing data from data-driven websites in innovative ways. Google, Yahoo!, Amazon, eBay, Windows “Live”  Content sourced from a third party’s public API (Application Provider’s Interface)

What is an API?  A website’s “back door”.  Access data and services that are unique to that website.  Content provided via simple javascript code.  Does not require a detailed understanding of the websites “internal workings”

Let’s Make a Google Map! Session II 1:30 – 1:50pm

Your First Online Map!  Goal: To place a Google Map, with an overlay, onto a website.  Steps: 1. Get a Key from the Google API 2. Browse the API 3. Write Code to place map over Tucson 4. Write Code to put an overlay Old Main

Getting a key  Obtained at  Terms of use… Unlimited hits 50k geocode requests Google reserves the right to include advertising. Must be freely accessible to end-user.  Must have a Google Account  Must provide domain name…

Browsing the API  API consists of “objects” “map”, “overlay”, “x and y coordinate”  Each object has… Methods… (zoom) Properties… (current location) Events… (I’m zooming!)

Dictionary.com API Example  Object = “word of the day” (wod)word of the day  Properties wod.word = “verisimilitude” wod.pronunciation = ver-uh-suh-MIL-uh-tood; wod.type = noun wod.definition = “The appearance of truth; the quality of seeming to be true.”  Methods wod.GetToday(); wod.GetYesterday();

Google Maps API Examples  Found at documentation/reference.html documentation/reference.html  What to look at… GMap2: a new map GLatLng: x,y coordinate on the earth GIcon: GMarker: The combination of an GIcon and a GLatLng

Let’s Code!

A Look Under the Hood! Session III 1:55 – 2:30pm