Map Of The Week: Urban Reviewer

Welcome Eric Brelsford to our Map of the Week series. Brelsford is a freelance programmer mapmaker and teacher. He spends much of his time working on 596 Acres and related sites in Brooklyn NY.

Brelsford as part of 596 Acres has joined forces with Partner & Partners and SmartSign to create an online map showing over 150 master plans for neighborhoods adopted by the City of New York. The process covered the follow up on a Freedom of Information Law request for the records and the translation of paper plans into machine-readable spreadsheets. The result after two years of work is urbanreviewer.org a map where you can take a look at which areas in New York have been affected and what those master plans were.

About Urban Reviewer

Master plans have been created for many cities in the US since the mid-twentieth century. The plans were often adopted by cities to receive federal funding that would facilitate redeveloping so-called "blighted" neighborhoods. This involved using eminent domain to acquire the land relocating the people who lived there and demolishing the structures on that land. Urban Reviewer maps New York City's master plans that have been created since the 1950s.

##_NOT_FOUND_IMAGE_## https://i.imgur.com/cJFnzi6.jpg ##_NOT_FOUND_IMAGE_##

These plans significantly changed our city's neighborhoods. Whether the plans for new industrial or residential space made it to completion -and many did not- they still involved destroying structures and moving communities to other parts of the city. Part of our motivation for creating this map was that we wanted to see which pieces of land ("lots") were affected by master plans and are still vacant. Our map's filters enable this now:

##_NOT_FOUND_IMAGE_## https://i.imgur.com/lvMJKEY.jpg ##_NOT_FOUND_IMAGE_##

Data collection

Many volunteers gave a total of hundreds of hours in order to digitize paper records of the master plans provided by a city agency. These detailed records included information about the plans and each individual lot within them and are the definitive records of these plans. We are not aware of digital records of the plans so we created them.

There was a moderate amount of processing that had to be done in order to make these records useful but we will stick to the CartoDB side of this mapping here.

Inserting the data

Once the data is ready to be imported into CartoDB we insert it into our tables using the SQL API through cartodb-python.

We use two CartoDB tables:

• plans which stores each plan's name and other details and
• lots which stores the geometries for each lot and points back to the plans table.

Viewing and styling the data

Urban Reviewer uses a Leaflet map with a Mapbox base layer. The CartoDB layer of all the lots is added using CartoDB.js.

We style the lots using some pretty basic CartoCSS that makes the lines around the lots thicker when zoomed out:

##_INIT_REPLACE_ME_PRE_##

lots {

polygon-fill: #FFFFFF; polygon-opacity: 0.7; line-color: #000; line-width: 0.5; line-opacity: 0.75;

[zoom < 14] { line-width: 1; } } ##_END_REPLACE_ME_PRE_##

Interactivity

The master plans can be complicated. They often consist of numerous lots that are rarely contiguous. It can be hard to tell if a lot is part of a plan and some plans overlap. We rely on interactivity to make these relationships clearer and we're still tweaking how this works.

Adding plan boundaries on hover

First of all it's helpful to be able to see the boundaries of a plan while moving your mouse over the map and while a plan is selected:

##_NOT_FOUND_IMAGE_## https://i.imgur.com/fvtlPut.jpg ##_NOT_FOUND_IMAGE_##

This is one area where CartoDB's SQL API really shines. Traditionally you would need to write code on a server that would collect the relevant geometries and process them. With the SQL API we could write a few lines of JavaScript that ask CartoDB for exactly what we needed. We created a PostGIS SQL query that selects all the lots in a plan combines their shapes finds the convex hull of this shape then buffers that shape a bit to add some space between the lots and the boundary line.

##_INIT_REPLACE_ME_PRE_##

SELECT ST_Buffer(ST_ConvexHull(ST_Union(l.the_geom))  0.0001) AS the_geom
FROM lots l LEFT JOIN plans p ON p.cartodb_id = l.plan_id
WHERE p.name = 'PLAN_NAME'
##_END_REPLACE_ME_PRE_## 

After testing the query in CartoDB's SQL console we added code to get the results as a GeoJSON file and add them to a Leaflet GeoJSON layer in just a few more lines:

##_INIT_REPLACE_ME_PRE_##

var sql = 'SELECT ST_Buffer …'; // The rest of our SQL query  as above
$.getJSON('http://urbanreviewer.cartodb.com/api/v2/sql/?format=GeoJSON&sql=' + sql  function (data) {
  addBoundaryToLeaflet(data);
});
##_END_REPLACE_ME_PRE_## 

Highlighting lots in a plan when it's selected

When a plan is selected we also highlight the lots within that plan:

##_NOT_FOUND_IMAGE_## https://i.imgur.com/fWS6e52.png ##_NOT_FOUND_IMAGE_##

We accomplish this by setting the layer's CartoCSS using the CartoCSS above and adding a little more:

##_INIT_REPLACE_ME_PRE_##

// Plan-higlighting CartoCSS

lots[plan_name="PLAN_NAME"]{

polygon-fill: #FFFFCC; } ##_END_REPLACE_ME_PRE_##

The slightly tricky part is that in our JavaScript code before we set the layer's CartoCSS we dynamically replace PLAN_NAME with the name of the plan that was selected. You can see more details of how we do this in the code if that's your thing.

Highlighting a lot on hover

Finally when you mouse over a lot (either in the list view or on the map) the lot is highlighted in a similar way to how we highlight the plans. First we grab the lot's geometry with some SQL:

##_INIT_REPLACE_ME_PRE_##

SELECT l.the_geom AS the_geom
FROM lots l
WHERE […] // Where lot is the one the user is hovering over
##_END_REPLACE_ME_PRE_## 

And then we get the geometry using the SQL API and add the GeoJSON to a Leaflet layer. This is nice because we can overlay an outline around the lot without updating the layer's CartoCSS. That would force the entire layer to refresh just to add a line around one shape!

Now that you know a bit about how the map works come explore NYC's master plans on Urban Reviewer.

See our other and go to CartoDB to start creating your own maps.