There are 12 columns in the grid

Elements can take up many columns

Row 1:

Row 2:

Row 3:

Specify columns based on screen-size

What are maps made of?

Getting resources (open street map)

Making your map (leaflet.js)

Getting data

Putting it all together

Free map tiles

Easily accessible 

Customizable

Requests map tiles

Handles panning, zooming

Highly customizable

Create a new leaflet map

var map = L.map('map-container')

Set your center, zoom

map.setView([latitude, longitude], zoom)

Create a tile layer

layer = L.tileLayer('http://{s}.url/{z}/{x}/{y}.png')

Adding it to the map

layer.addTo(map)

Create a circle

var marker = new L.circle(
    [latitude, longitude], size, {
    color:'red',
    opacity:.3
})

Add it to the map

marker.addTo(map)

"Application Programming Interface"

Protocols, tools for building software

Exposes components (data) in specified formats

Allows web queries of content

Incident data API

https://data.seattle.gov/resource/7ais-f98f.json

Asynchronous data request

Syntax:

var data;
$.ajax({
     url:'https:..../json?year=2015&$limit=50000',
     type: "get",
     success:function(dat) {
       data = dat
       // Create a map using your data!
     }, 
     dataType:"json"
}) 

Used to get/push data from servers/databases

Call after completion of ajax call

$.ajax({
     success:function(dat) {
       data = dat
       // Create a point using each element
     }, 
}) 

Loop through data

data.map(function(d) {
    new Circle([d.lat, d.long]....)
})

Bind pop-up info to your circle

circle.bindPopup('text goes here')

What information?

Bootstrap challenge (due Thursday before class )

Police-shooting challenge (due Monday before class )