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
(paths)
(map tiles)
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 )