Mashups!

Matt RahrECAT – 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 I1: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 II1: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 API2. Browse the API3. Write Code to place map over Tucson4. Write Code to put an overlay Old Main

Getting a key

Obtained at http://www.google.com/apis/maps/signup.html

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 (@gmail) Must provide domain name… http://

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) 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 http://www.google.com/apis/maps/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 III1:55 – 2:30pm