Welcome to Advanced GIS, Lecture 10
This is a web page that can be viewed as slides.
→ to move forward
← to go back
a little more JavaScript
let's talk about process and debugging
work on one small thing at a time
do as much as you can in developer tools
make that one thing work, paste it into your file
use console.log()
to make sure a variable holds what you think it does
var greeting = 'hullo';
console.log(greeting);
to see if your code is running
...
console.log('well we made it this far');
...
last time:
SELECT *
FROM signs
WHERE borough = 'MANHATTAN'
you could make a button for each borough
SELECT *
FROM signs
WHERE borough = 'BRONX'
SELECT *
FROM signs
WHERE borough = 'STATEN ISLAND'
but maybe you're lazy
var borough = 'MANHATTAN';
var sql = "SELECT * FROM signs WHERE borough = "
+ borough;
var borough = 'MANHATTAN';
var sql = "SELECT * FROM signs WHERE borough = '"
+ borough + "'";
OK, where is borough coming from?
<select id="borough">
<option>Pick a borough</option>
<option value="BRONX">Bronx</option>
<option value="BROOKLYN">Brooklyn</option>
<option value="MANHATTAN">Manhattan</option>
<option value="QUEENS">Queens</option>
<option value="STATEN ISLAND">Staten Island</option>
</select>
$('#borough').val()
var sql = "SELECT * FROM signs WHERE borough = '"
+ $('#borough').val() + "'";
$('#just-manhattan').click(function () {
...
});
change
$('#borough').change(function () {
...
});
sometimes you've got too much data for CartoDB
sometimes you want to control your data on your server
sometimes you want to change things more than CartoDB lets you
a few things leaflet does:
tiles
popups
zoom and pan
a very brief history of web mapping libraries
2005: Google Maps API
how do you use leaflet?
you already are!
leaflet is used all over the place
leaflet is used all over the place
leaflet is used all over the place
leaflet is used all over the place
3 steps:
1. load leaflet's code
2. make a div for your map
3. tell leaflet to create the map
1. load leaflet's code
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
2. make a div for your map
<body>
<div id="map"></div>
</body>
3. tell leaflet to create the map
var map = L.map('map').setView([40.70, -73.96], 11);
3a. add base tiles
L.tileLayer('https://{s}.tiles.mapbox.com/v3/ebrelsford.ho06j5h0/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox'
}).addTo(map);
try it:
open jsbin.com/fiyumu, change the initial view
var map = L.map('map').setView([40.70, -73.96], 11);
you can change
L.tileLayer('https://{s}.tiles.mapbox.com/v3/ebrelsford.ho06j5h0/{z}/{x}/{y}.png', {
to your mapbox map id to get your tiles instead
leaflet can give you tons of information about your map
try it:
with jsbin.com/fiyumu/1 open in your browser, run the following in the console:
map.getZoom()
map.getCenter()
and leaflet lets you change your map
try it:
with jsbin.com/fiyumu/1 open in your browser, run the following in the console:
map.setZoom(12)
map.panBy([150, 150])
3b. add some data to the map
$.getJSON(url, function (data) {
L.geoJson(data).addTo(map);
});
3c. add popups
$.getJSON(url, function (data) {
L.geoJson(data, {
onEachFeature: function (feature, layer) {
layer.bindPopup("hi I'm a popup");
}
}).addTo(map);
});
when you're loading data this way you need it to be on a server somewhere
just like with images
neocities works fine for this
plugins
click, zoomend, popupopen, popupclose
customizing popups
it's easier with leaflet
where next?
- Leaflet: plugins
- Leaflet: storing data on a server
- Leaflet: plugins
- Leaflet: storing data on a server
- Leaflet: loading CartoDB data
- Leaflet: plugins
- Leaflet: storing data on a server
- Leaflet: loading CartoDB data
- using GitHub to host your pages
- Leaflet: plugins
- Leaflet: storing data on a server
- Leaflet: loading CartoDB data
- using GitHub to host your pages
- ...?
