Welcome to Advanced GIS, Lecture 12
This is a web page that can be viewed as slides.
→ to move forward
← to go back
<iframe width='100%' height='520'
frameborder='0'
src='https://eric.cartodb.com/viz/9e198634-b20e-11e4-8886-0e018d66dc29/embed_map'
allowfullscreen
webkitallowfullscreen
mozallowfullscreen
oallowfullscreen
msallowfullscreen>
</iframe>
<iframe width='100%' height='520'
frameborder='0'
src='https://eric.cartodb.com/viz/9e198634-b20e-11e4-8886-0e018d66dc29/embed_map'>
</iframe>
<iframe width='100%' height='520'
frameborder='0'
src='your_url'>
</iframe>
so you might consider making a fullscreen map that you embed in another site
one potential problem: links in iframe
s
links in iframe
s only work when opening in a new tab
<a href="http://example.com">
external link
</a>
<a href="http://example.com"
target="_blank">
external link
</a>
semi-transparent overlays
.overlay {
opacity: 0.5;
}
.overlay {
background: rgba(255, 255, 255, 0.5);
}
full example
centering stuff
centering stuff can be hard with CSS
.overlay {
text-align: center;
}
only affects the text in the element
.overlay {
margin: 0 auto;
position: relative;
}
.overlay {
margin: 0 auto;
position: relative;
}
make left and right margins automatic and they balance out
call Parks and say "where's our park?"
What is urban renewal?
Urban
Renewal
so let's map them!
we weren't the first to have this idea
Community Development Program Progress Report (1968)
Atlas of Urban Renewal (1984)
what will it take?
what will it take?
- get the data
- clean the data
- merge the data with other useful datasets
FOIL
FOILed!
thanks to amazing volunteers
tiles created via OpenStreetMap and Mapbox
~10,000 polygons
6 MB
not particularly fast
list plans
outline plans
search for plans
highlight parcels
CartoDB
- Leaflet
- Mapbox tiles
- CartoDB layer on top with cartodb.js
making it interactive
making it interactive
SELECT name
FROM plans
WHERE name ILIKE '%lincol%'
ST_Union, ST_ConvexHull, ST_Buffer
yeah we use the SQL API here too
dynamic styles
dynamic styles
setCartoCSS()
dynamic data
dynamic data
setSQL()