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

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 3

Please install OpenRefine (openrefine.org) while you wait for class to start.

APIs are the "nubby bits" of a lego
—Aaron Straup Cope

various bits

source

APIs let you connect to other applications

Application
Programming
Interface

Interface

(the "nubby bits")

Interface

(the "nubby bits")

for

Application
Programming

(makin' stuff)

the interface is a common language between you and someone else

the CartoDB SQL API

the SQL API lets you run SQL through code

start with the URL endpoint for the API

start with the URL endpoint for the API

https://{account}.cartodb.com/api/v2/sql

for me this is

https://eric.cartodb.com/api/v2/sql

then add some parameters

these help you specify exactly what you want out of the API

the CartoDB API has a q parameter that expects an SQL query

parameter=value

q=SELECT count(*) FROM {table_name}

the ? in a url lets the server know that the parameters start there

think of this as asking the server a question

so you end up with endpoint + ? + parameters

https://{account}.cartodb.com/api/v2/sql?q=SELECT count(*) FROM {table_name}

more concretely

https://eric.cartodb.com/api/v2/sql?q=SELECT count(*) FROM listings

JSON

JavaScript objects and arrays, but written to a file

in-class exercise, part 1

$.getJSON

$.getJSON

gets JSON data from a url in jQuery

$.getJSON(url)

$.getJSON(url)
  .done(function (data) {
    // Do something with the data
  });

promises

promises are like event listeners

$('.colors').change(function () {
  $('.box').css({
    'background-color': $(this).val()
  });
});

$('.colors').change(function () {
  // Do something with the 
  // colors input
});

$.getJSON(url)
  .done(function (data) {
    // Do something with the data
  });

$.getJSON(url)
  .done(function (data) {
    // Do something with the data
  });

only called if the request is done at some point

source

readings

source

readings

source

in-class exercise, part 2

APIs often accept multiple parameters

when they do, separate parameters using &

http://...cartodb.com/.../sql?
  q={query}&
  format=GeoJSON

for example

$.param

$.param

object → url parameters

$.param({
  q: <your sql>,
  format: 'GeoJSON'
})

$.param({
  q: <your sql>,
  format: 'GeoJSON'
})

q=<your sql>&format=GeoJSON

in-class exercise, part 3

setting the text of an element in jQuery

var total = 1021;
$('.total').text(total);

[...]

<div>total:
  <span class="total"></span>
</div>

in-class exercise, part 4

you can append to a document using jQuery

$('body').append(
    $('<div></div>').text('oh hi');           
);

$.each

$.each

run some code for each element in an array

$.each(array, function);

var names = [...];
$.each(names, function () {
  // this contains
  // the value you're on
});

var names = [...];
$.each(names, function () {
  // this contains
  // the value you're on
  console.log(this);
});

for example

in-class exercise, part 5

"API" is maybe an overused term

Sometimes it describes a way of getting data

Sometimes features of a library

For now we'll focus on getting data

For now we'll focus on getting data

Wall St Daily

Twitter's API

Weather Underground

Foursquare

NYC Geoclient

Google Geocoding API

mashape

cooper hewitt

cooper hewitt

cooper hewitt

source

OSM wiki

Mapbox blog

example request

http://nominatim.openstreetmap.org/search?format=jsonv2&q=ISC%20Building%20Brooklyn

example request