ZoLa (New York City’s Zoning & Land Use Map)

ZoLa provides a simple way to research zoning regulations and other information relevant to planners. Find the zoning for your property, discover new proposals for your neighborhood, and learn where City Planning initiatives are happening throughout the City.

Requirements

• Git
• Node.js (with NPM)
  • This installation was tested using Node v16
• Ember CLI
• Yarn

Local development

• Clone this repository: git clone https://github.com/NYCPlanning/labs-zola.git
• Navigate to the repo: cd labs-zola
• Install dependencies: yarn
• Run the development server: ember serve

Connect to a local or remote Layers Api:

start:local-api

Which will run API_HOST=http://localhost:3000 ember serve, running http:// will prevent cross-origin restrictions.

Architecture

ZoLa is an Ember.js single page application (SPA). The frontend handles routing, web mapping, layout, and user interactions, and communicates with various APIs for content and data.

Layer-Groups, Layers and Sources

ZoLa retrieves layers from the Labs Layers Api. It requests layer groups, which are groups of MapboxGL layers. For example, the "subways" layer group includes the subway lines, subway routes, and subway station entrances layers. Each layer defines has style and some filter definitions. Alongside layers, the Layers API also delivers sources which provide SQL definitions for the layers. One source may correspond to multiple layers. For example, a subways source powers the Subway A line, Subway J line and Subway G line, etc.

Layer Groups, Layers and Sources are represented and managed as Ember Models in ZoLa. These models are provided by the Ember Mapbox Composer custom Addon. On first load, the Application route will query for all necessary Layer Group records (which makes a request to the layer-group/ endpoint of the Layers API). This consequently sideloads all necessary Layer, Source and metadata information as well.

Labs Layer API indeed acts as the backend that Ember Data is tied to. This is specified in the Application Adapter's host variable override.

Vector tiles from Carto Maps API

Along with Layer Groups, the Layers API payload (in the metadata property) contains an extra MapboxStyle object, which provides tile URL definitions for all source layers. These tile url definitions are anonymous maps generated by Layers API using the Carto Maps API.

Zola Search API

Zola Search API provides autocomplete search results, and aggregates results from ZoLa's Carto database with those from the Mapzen Search API. The search API is an express.js app that lives in a separate repo: (https://github.com/NYCPlanning/labs-zola-search-api)

BBL Route

https://zola.planning.nyc.gov/bbl/:bbl

For convenience to other apps that work with NYC BBLs (10-digit Borough, Block, and Lot identifiers), a /bbl route is available for incoming links. Incoming connections on this route will be redirected to the corresponding lot view.

Example BBL route

https://zola.planning.nyc.gov/bbl/1000477501

will redirect to

https://zola.planning.nyc.gov/lot/1/47/7501

Bounding Box Route

https://zola.planning.nyc.gov/bbox/:west/:south/:east/:north

For compliance with NYC Local Law #40 of 2018, the Department of Housing Preservation and Development is required to create a link to ZoLa for all NYC Urban Renewal Areas "that directs to the highest practicable zoom level that contains all blocks and lots within such urban renewal area". The /bbox route allows for specifying a bounding box defined by WGS84 latitude and longitude in decimal degrees. When the ZoLa application loads the bbox route with valid bounds, the map will automatically zoom to fit the supplied bounds into the user's viewport.

Example Bounding Box Route:

https://zola.planning.nyc.gov/bbox/-73.9978/40.5705/-73.9804/40.5785

Testing and checks

• ESLint - We use ESLint with Airbnb's rules for JavaScript projects

  • Add an ESLint plugin to your text editor to highlight broken rules while you code
  • You can also run eslint at the command line with the --fix flag to automatically fix some errors.

• Testing

  • Run the test suite: ember test -server
  • Load http://localhost:7357/ to view the test UI
  • Before creating a Pull Request, make sure your branch is updated with the latest develop and passes all tests

Contact us

You can find us on Twitter at @nycplanninglabs, or comment on issues and we'll follow up as soon as we can. If you'd like to send an email, use labs_dl@planning.nyc.gov

Updating MapPLUTO Data

• Indices - When updating MapPLUTO data, be sure to add an index to the BBL column: CREATE INDEX idx_mappluto_{version}_bbl ON mappluto_{version} (bbl)

• Block Centroids - You also need to regenerate the mappluto_block_centroids data table that provides the centroid of each block. This is used to add block labels to the map.

  • Run the CREATE TABLE SQL below on the Carto Batch UI: https://cartodb.github.io/carto-batch-ui/.
  • Once the batch query runs successfully, you need to query for the table via the regular Carto UI and save it as a dataset.
  • Then you can run DROP TABLE mappluto_block_centroids_new to delete the invisible table saved on Carto's backend.

CREATE TABLE mappluto_block_centroids_new AS (
SELECT
  ST_Centroid(
    ST_Union(
      ST_makevalid(
        the_geom
      )
    )
  ) as the_geom,
  ST_transform(
    ST_centroid(
      ST_Union(
        ST_makevalid(
          the_geom
        )
      )
    ), 3857
  ) as the_geom_webmercator,
  block,
  borocode
FROM planninglabs.mappluto_VERSION
GROUP BY block, borocode)