Welcome to Advanced Interactive Web Mapping, Programming, and Design, Class 5

This is a web page that can be viewed as slides.

→ to move forward

← to go back

Advanced Interactive Web Mapping, Programming, and Design

Class 5

functions

$('.button').click(function () {
    // Update map SQL
});

Math.round(5.98);

function {name} ({parameters}) {
    {code}
}

function {name} ({parameters}) {
    {code}
}

function sayHi (name) {
    console.log('Why hello, ' + name);
}

function multiply (a, b) {
    return a * b;
}

functions give us a way to do repetitive things

functions can make your code more readable

jsbin

let's clean this up with a function

jsbin

part 3 from last time

Streetview Image API

https://maps.googleapis.com/maps/api/streetview?size=600x300&location=46.414382,10.013988&heading=151.78&pitch=-0.76

https://maps.googleapis.com/maps/api/streetview?size=600x300&location=46.414382,10.013988&heading=151.78&pitch=-0.76

https://maps.googleapis.com/maps/api/streetview?size=600x300&location=46.414382,10.013988&heading=151.78&pitch=-0.76

Say you wanted to add a street view image based on a search result

How do you set an image's url?

How do you set an image's url with jQuery?

$().attr()

$('.streetview-image')
  .attr('src', streetviewUrl)

in-class exercise, part 1

sometimes APIs aren't totally public

sometimes APIs aren't totally public

habitatmap

static maps

twitter

In praise of the static map

Mapquest static map API

Mapbox static map API

CartoDB static map API