Skip to content

Latest commit

 

History

History
52 lines (32 loc) · 2.88 KB

README.md

File metadata and controls

52 lines (32 loc) · 2.88 KB
Raw

NodeTile: Occupy Map

This is a proof-of-concept map of Occupy sites based on data from Chris Herwig's CartoSyling/Occupy Streets project.

This is a dirty hack to do server-side map tile rendering using geojson/shapefiles. Map tiles are rendered using node-canvas--a special version that includes a pre-compiled Cairo binary that works on Heroku--and requested via a standard leaflet map. This demo currently renders Baltimore neighbrhoods.

Big THANKS to Tom Carden whose original gist inspired this project. He also has other very useful projects.

Installation on Heroku

  1. Clone it

  2. Within the directory, heroku create --stack cedar

  3. Setup your heroku environment variables for node-canvas-heroku

     $ heroku config:add LD_PRELOAD='/app/node_modules/canvas/cairo/libcairo.so /app/node_modules/canvas/lib/libpixman-1.so.0 /app/node_modules/canvas/lib/libfreetype.so.6' --app <your-app>

 $ heroku config:add LD_LIBRARY_PATH=/app/node_modules/canvas/cairo --app <your-app>

    IMPORTANT: replace the <your-app> at the end of each command with your Heroku app's name, e.g. 'furious-sparrow-2089'

  4. git push heroku master

  5. Rejoice / Open an issue that these instructions are inadequate

Local Development

For local development, you need to install node-canvas manually and from the normal source (NOT node-canvas-heroku): npm install node-canvas. Then just run node app.js.

How it works / How to modify it

This application renders PNG map tiles as well as UTFGrid interaction tiles from static geojson files (though it would be relatively trivial to load geojson from a live database instead). Those geojson are loaded into the Layers list along with some basic style settings. When a specific tile is requested, a new canvas is created and the Layers, then Features are stepped through and drawn to a canvas, which is then streamed back to the requesting client as a PNG. UTFGrids are rendered in much the same way: they are drawn as a raster where each feature is assigned a unique RGB value; the resulting raster is then read out to create a UTFGrid.

Shapefiles

Within the /geodata directory are GEOjson files from the datasf.of (transformed via ogr2ogr).

  • San Francisco Shorelines
  • San Francisco Street Centerlines
  • San Francisco Parks
  • San Francisco Parcels (is huge and crashes Heroku when loaded; >500MB memory)

And some others, including world outlines from Natural Earth.

Contact

Email me at bensheldon@gmail.com or open an issue.