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

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 12

remember: we're not meeting next week

see you Monday May 9th

since many Turf functions return GeoJSON objects, you can run another Turf function on the returned object

var convex = turf.convex(points);
var buffered = turf.buffer(convex, 150, 'feet');

each new feature will have a countField property with the count

you set countField as a parameter

for example

turf.count(polygons, bodegaPoints, 'bodegaCount');

jsbin

counting points in polygons

jsbin

load points
load polygons
var polygonsWithCounts = turf.count(points, polygons, 'count');
L.geoJson(polygonsWithCounts).addTo(map);

jsbin

trying to style polygons based on those counts

jsbin

load points
load polygons
var polygonsWithCounts = turf.count(points, polygons, 'count');
find the maximum count
L.geoJson(polygonsWithCounts).addTo(map, {
    style: function (feature) {
        vary something by count and maximum count
    }
});

jsbin

load points
load polygons
var polygonsWithCounts = turf.count(points, polygons, 'count');
find classes by count
L.geoJson(polygonsWithCounts).addTo(map, {
    style: function (feature) {
        vary something by classes
    }
});

please do in-class exercise part 1

please do in-class exercise part 2

jsbin

jsbin

Edgemere Urban Renewal Park

596 Acres

call Parks and say "where's our park?"

Edgemere Urban Renewal Park

What is urban renewal?

Urban

Renewal

today

Nathan Kensinger

today

NYC EDC

today

Performing Arts Educators

today

Panoramio

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?

1. get the data
2. clean the data
3. merge the data with other useful datasets

FOIL

FOILed!

thanks to amazing volunteers

urban reviewer

tiles created via OpenStreetMap and Mapbox

~10,000 polygons

6 MB

not particularly fast

list plans

outline plans

search for plans

highlight parcels

CartoDB

1. Leaflet
2. Mapbox tiles
3. 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

1. construct SQL query to find the lot you're over

2. get GeoJSON and add to map

dynamic styles

dynamic styles

setCartoCSS()

code

code

create a string with the CartoCSS you want to use

code

code

dynamic data

dynamic data

setSQL()

code

each of these is a page hosted on GitHub Pages

we wanted collaborators to edit the pages without using HTML

jekyll

plain text or markdown → HTML

jekyll

code

and we don't want to teach everyone GitHub

code

prose.io