A "clip & ship" download tool for NYC PLUTO tax lot data, allowing the user to download only the desired columns and geographic area. Hosted on github pages at http://chriswhong.github.io/plutoplus
Current PLUTO dataset is 18v2, this app's data was last updated on 15 September 2018.
PLUTO is an amazing NYC Open Data Resource that contains a wealth of information about the city's tax lots, including zoning, # of units, tax assessments, and more. It contains information for the city's 870,000+ properties, and includes over 80 attributes for each lot! That's a lot of open data!
MapPLUTO (PLUTO data plus a polygon for each lot) is so large, that the Department of City Planning publishes it by borough as shapefiles. I built this downloader to help people get access to smaller chunks of the data quickly and easily for whatever they are working on.
This app is essentially a SQL Builder, it compiles the user's settings into a PostGIS query that is sent to Carto's SQL API. The SQL looks like SELECT {selected PLUTO columns} FROM mapplutotable a WHERE ST_INTERSECTS({some clipping geometry}, a.the_geom). The placeholders are generated and filled in by the app when the user clicks Download.
The geography filter works by adding an ST_Intersects() statement to the WHERE clause of the SQL applied at download.
- Current Map View - Checks the current boundaries of the map by using leflet's
getBounds() - Neighborhood - Does a spatial join with
the_geomfor a specific neighborhood tabulation area hosted on the same carto server as the PLUTO table - Draw a Polygon - Uses Leaflet Draw to allow the user to draw a custom polygon or rectangle on the map.
When a download button is clicked the resulting SQL query is logged in the console, so you can clearly see exactly how the app is grabbing the requested data.
The app was originally built using jQuery to manage updates to the DOM, but was refactored to use React.js in early 2017. To continue to host the site on github pages, there is no build/bundle process, and the JSX files are transpiled in the browser with babel.
React & React-DOM - Facebook's declarative, efficient, and flexible JavaScript library for building user interfaces.
jQuery - Because sometimes you still just need to show() and hide() things that react has no control over.
React Tooltip - For super-easy-to-implement tooltips.
Babel Core - For transpilation of react JSX scripts into browser-runnable javascript.
cartodb.js - Carto's JS library, which handles communication with the Carto SQL and Maps APIs, and also includes Leaflet.js
leaflet Draw - Geometry drawing plugin for leaflet.
App.jsx - Parent component for the app, which also stores the current state and deals with inter-component communication Map.jsx - Controls the rendering of the map and various layers & controls Sidebar.jsx - Displays options UI to let the user specify Geography, Columns, and Download Format.
I need help writing tests. If you're good at that, I would love to learn how you would test this code.
You will need the following on your dev machine:
- nodejs
- live-server (a simple node development server) installed globally
git clone https://github.com/chriswhong/plutoplus.git
yarn install
yarn dev
You need to run a local webserver to try out the app in development. I've been using a plugin called atom-live-server for atom, but you can also use python.http or any other local server.
If you like this project, or if you hate it, let me know by tweeting to @chris_whong. Pull requests are welcomed! This project was built with the Carto web mapping platform. Write-up at chriswhong.com Support open Data!