Top Banner
Mashups! Matt Rahr ECAT – University of Arizona
15

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.

Jan 20, 2016

Download

Documents

Corey Stone
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 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.

Mashups!

Matt RahrECAT – University of Arizona

Page 2: 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.

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

Page 3: 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.

What is a Mashup?

Session I1:00 – 1:30pm

Page 4: 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.

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

Page 5: 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.

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)

Page 6: 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.

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”

Page 7: 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.

Let’s Make a Google Map!

Session II1:30 – 1:50pm

Page 8: 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.

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

Page 9: 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.

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://

Page 10: 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.
Page 11: 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.

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!)

Page 12: 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.

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();

Page 13: 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.

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

Page 14: 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.

Let’s Code!

Page 15: 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.

A Look Under the Hood!

Session III1:55 – 2:30pm