/waterfrontmap

mapping weather, human industry, and social demographics of SMIAs

Primary LanguageJupyter NotebookMIT LicenseMIT

EJA Waterfront Justice Project Map

CURRENT MAP // FEEDBACK // EJA MAPS // EJA-WJP INFORMATION

A collaboration between NYC-EJA and ScAAN which maps weather, human industry, and social demographics of Significant Maritime and Industrial Areas (SMIAs).

As the threats of climate change increase, destructive storms like Superstorm Sandy, Hurricane Katrina, and Hurricane Harvey will expose the vulnerabilities of costal communities overburdened by industrial and chemical facilities. Of interest are NYC’s Significant Maritime and Industrial Areas (SMIAs), clusters of industry and polluting infrastructure along the waterfront. SMIAs are located in classic environmental justice communities- predominantly low-income communities of color - in the south Bronx, Brooklyn, Queens and Staten Island, which are also hurricane storm surge zones. The WJP is a research and advocacy campaign focusing on community resiliency that seeks to reduce potential toxic exposures and public health risks associated with climate change and storm surge in the City’s industrial waterfront.


How to use

Required packages
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 Jalisa Gilmore'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/tippecanoe.sh 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.
map.addLayer({
  "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 our google sheet in the layer and legend sheets. See the already filled out fields for how to fill this out.
  2. That should be it! But it probably won't be. Common issues are in the geojson geography and data typing.
How to update map text

Edit the map text using the instructions on our google sheet.

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

mapbox-gl-js
javascript, html, and css
mapping inspiration

Troubleshooting

General troubleshooting

If the map webpage fails to load, first check if mapbox, google API, or github pages are down. Then, check your browser and OS version, and submit feedback to us. Please include your OS version, browser version and a description of the issue.