In this article, we will share with you some of the technical details behind the project.
Each building footprint is then matched to a row in PLUTO by using the BBL field (a combination of Boro code, Block and Lot). This approach allows us to find the ‘year built’ for more than 98% of the footprints. For the rest of the buildings, the year of construction is not specified. They are coloured in gray on the map.
The “year built” data is not entirely accurate. Some of the dates are estimates. There are also dates that seem to be wrong.
Choosing the right Platform
There are more than 1 000 000 buildings in NYC. This prooved to be too much to display at once. So we selected only the buildings that are located in Manhattan. That alone makes 45 968 buildings.
This presents multiple challenges for the implementation: how to draw so many polygons and how to control what is visible and what is not with the help of a slider.
There are several standard technical solutions: Raster map tiles, SVGs and canvas.
Raster map tiles are good for static maps. They can provide basic mouse-over interactivity through the use of UTFGrids. Since the GIS data is pre-rendered – there’s no way to control individual GIS features separately in the browser. The only option is to rebuild the raster tiles and while this may work in some scenarios, it was not applicable here.
SVGs empower D3.js and Leaflet.js. We’ve converted the building footprints to GeoJSON and used Leaflet’s vector layers to show them on the map. Although this solution worked, the performance wasn’t good enough. It was taking too much time to draw the polygons and pan the map.
Canvas usually provides good performance. Leaflet.js can render to a canvas. There are also a couple of plug-ins, such as Sumbera’s Leaflet Canvas Overlay. CartoDB have successfully used canvas in their popular Torque library. Up until recently, this would have been the natural choice. Things changed when Mapbox announced their latest project – Mapbox GL for Web.
Using Mapbox GL
Mapbox GL uses vector data both for storage and rendering. It’s vector all the way down.
The GIS data is stored as vector.pbf – an optimized file format based on Protocol Buffers. Combined with the powerful webgl renderer, it provides great flexibility. The GIS features can be filtered and styled on the fly in the browser.
A Vector Source is used to load the buildings from a set of vector tiles. A couple of tileJson files are used to configure the data sources and the stylesheet.
The Downside is that Mapbox-gl-js is currently supported only in Chrome and Firefox on the desktop. IE11+ support is coming.
The web layout was built using Bootstrap. JQuery was used to glue all components together.
d3.js was used to draw the Graph that shows when were current buildings of Manhattan built.
The X axis represents the year of construction, while the Y axis shows the number of buildings.
The Sliders based on jQuery Draggable, allow you to isolate only buildings built during the selected time frame.
The Basemap is provided by Esri.
“Data and the City: Urban Visualizations” is an upcoming course at Morphocode Academy. The course will discuss how to find, store and visualize urban data.
The course will be available to subscribers of Morphocode Academy.