mapping weather, human industry, and social demographics of SMIAs
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

EJA Waterfront Justice Project Map

A collaboration between NYC-EJA and ScAAN.
Mapping weather, human industry, and social demographics of SMIAs.


Work in progress

Recent changes
  • (11/9) Adressing comments and bugs -Maija
  • (10/5) Visuals and explore fix -Maija
  • (9/30) Various bugfixes -Maija
Open issues
  • Mapbox icons disappearing bug
  • Change data names to be the same in vector data
  • There is some kind of typo in vector data causing Error at Actor.recieve
  • Update all sources (double-check sources, re-download and re-process data)
Feature wish list

How to use

How to add data to the map

A very bare bones guide which assumes some familiarity with mapbox and python.

  1. Convert data to geojson
  2. Validate your geojson (i.e. mapshaper or something similar)
  3. Take a look at your data with python and do preprocessing or select and existing property in your dataset (i.e. Perc_POC_P003009). You can see an example of such a script in WFM_datahists.ipynb.
  4. Go to waterfrontmap.js and add your geojson as a new source. Alternatively, ask Billy to add your geojson to the vector data. In order to improve performance, datasets are eventually combined into a single vector tileset using tippecanoe which is uploaded to billbrod's mapbox account. This tileset (data.mbtiles) can be viewed with mbview. If you have tippecanoe on your computer, you can use the script at Processing/ to combine the geojsons into a single vector tileset. Unfortunately, uploading cannot be easily automated, so the person who controls the mapbox account will have to do so.
  map.addSource('sealevel2050', {
    "type": "geojson",
    "data": "./Data/SeaLevelRise2050.geojson"
  1. Go to waterfrontmap.js and add a new layer with map.addLayer, there are different types of layer such as fill or symbol which you can use. Most layers we use will be fill. Set the source as the source as the one made in step 4.
  "id": "Sea Level Rise 2050",
  "type": "fill",
  "source": "sealevel2050",
  "paint": {
    "fill-color": "#03a9f4",
    "fill-opacity": 0
},'water2','Bulk Storage Sites','SUPERUND2','CBS','MOSF');
  1. Add the name and information of your layer in layer_text.csv. See the already filled out fields for how to fill this out.
  2. If your layer is just filled colors you can add legend information to legend_text.csv (each line of text goes in entry, and each corresponding color goes in color). Otherwise you'll have to make the legend yourself in HTML and add an if statement for it (see the bulk storage layer as an example). Make sure that the legend field in layer_text.csv matches the name you use in legend_text.csv.
  3. Run to turn these csv into a json file
  4. Push to github to update the text
  5. That should be it! But it probably won't be. Common issues are in the geojson geography and data typing.
How to update story mode

We now have a story mode. This works by reading in the information stored in the csv file Processing\Text\story_text.csv, converting it to a json file (Processing\Text\story_text.json) which is then hosted on github and read. To use this:

  1. Enter your story into story_text.csv, each line is a page, with the specified SMIA (pageSMIA), layer (pageLayer), title (pageTitle), and description text (pageText). Please be careful to put exact layer names in the layer field, and specify SMIA's with a number from 0-7 where 0 is a zoomed out view of all the SMIAs.
  2. Save this csv, make sure it is in Processing\Text\ and it is a normal csv
  3. Run Processing\
  4. Push changes to github or upload story_text.json manually
  5. Wait for the raw file to refresh (~5 minutes)
  6. Finished! Of course, if there are any typos in the layer names or SMIA numbers in your csv file, strange things might start to happen. Make sure to always check for typos. The most common one is a typo in the layer names which are case sensitive.
How to update layer and SMIA text

Information text for layers and SMIAs is now updated through Processing\Text\general_text.json. Update this json by editing Processing\Text\layer_text.csv and Processing\Text\smia_text.csv and converting with Processing\ To use this:

  1. To control layer information: enter your layer info into layer_text.csv, each line is a layer with a layer id (id), legend id (legend), description text (text), and source text (source)
  2. To control SMIA information: using smia_text.csv enter the smia name (name), number (number) and hover box description (description)
  3. Save these csvs, make sure they are in Processing\Text\
  4. Run Processing\
  5. Push changes to github or upload general_text.json manually
  6. Wait for the raw file to refresh (~5 minutes)
  7. Finished! As with the story, make sure to check for typos.
How to add new sprites

Sprites are icons and patterns used by mapbox, but mapbox only has a limited catalogue of built in sprites. To add new sprites we make a custom mapbox style (we currently use light v8), and point it at a custom spritesheet, which is a json file containing information about each sprite.

  1. You can download creative commons-licensed icons at Noun Project if you credit them properly. Or make your own in Inkscape.
  2. Recolor or resize your icons in Inkscape as needed.
  3. Once you have some icons, add them to the all_sprites folder , they must be SVGs (normal NOT inkscape SVG)
  4. Download spritezero-cli or some form of spritezero
  5. Run spritezero sprite and spritezero sprite@2x in the directory above all_sprites to make sprite sheets. We need both a normal and an @2x version for high DPI monitors.
  6. This will create some files: sprite.png, sprite.json, sprite@2x.png, and sprite@2x.json. Push these to github. After it updates your new sprites will be available.

Resources and tutorials

javascript, html, and css
mapping inspiration