This application is built using Bootstrap, Leaflet, D3, and React.
The purpose of each component is described in the source files, but a basic familiarity with React is essential. The Quick Start guide is very good.
The deployed prototype app can be viewed at http://plotandscatter.com/bcic-data-challenge/.
NB. These instructions have not been tested on Windows.
npm install
.npm run compile-vendors
to generate the DLL. The DLL contains dependencies that are static (e.g. react
itself) and so don't need to be rebuilt every time the dev server starts. This improves local webpack performance. You don't need to build the DLL again unless you add additional static dependencies to src/vendors.js
.npm run dev
.View the app at http://localhost:3000 in your browser. Note that this assumes that there is a production instance somewhere serving the regional vector tiles. If not, follow the instructions below under "Serving the regional vector tiles" to set up a tile server on your local machine.
The various shape files representing the regional boundaries at different aggregation levels (e.g. census division, census area, economic region) have been converted to GeoJSON. In the steps below, tippecanoe is used to convert the GeoJSON to the MBTiles vector tile format. Compared to serving and rendering the GeoJSON directly, the tile format offers extremely good performance while retaining fine boundary details even at high zoom levels. A third-party Docker container, running concurrently with the main app, is responsible for serving the vector tiles.
brew install tippecanoe
once Homebrew is installedThese instructions may vary depending on the Linux distribution. The following has been tested on Ubuntu 14.04.
cd src/data/boundaries/
geo-json
subfolder, and unzip any files found thereThen run the following commands from the src/data/boundaries/
folder, one at a time (each might take a few minutes):
tippecanoe -o ./vector-tiles/municipalities.mbtiles ./geo-json/Municipalities_geo.json --no-polygon-splitting
tippecanoe -o ./vector-tiles/econregions.mbtiles ./geo-json/EconRegions_geo.json --no-polygon-splitting
tippecanoe -o ./vector-tiles/regdistricts.mbtiles ./geo-json/RegDistricts_geo.json --no-polygon-splitting
tippecanoe -o ./vector-tiles/census-dissemination-areas.mbtiles ./geo-json/DisseminationAreas_clipped.json --no-polygon-splitting
tippecanoe -o ./vector-tiles/census-dissemination-blocks.mbtiles ./geo-json/DisseminationBlocks_clipped.json --no-polygon-splitting
tippecanoe -o ./vector-tiles/census-tracts.mbtiles ./geo-json/CensusTracts_geo.json --no-polygon-splitting
src/data/boundaries
), run the following command:
docker run -v $(pwd):/data -p 8080:80 klokantech/tileserver-gl --config vector-tiles/tileserver-gl-config.json
tileserver-gl
docker imageListening at http://:::80/
, the tiles are available for use in the app; you can browse the tile server at http://yourdomain.com:8080
(or, if deployed locally, http://localhost:80
)Constants.MAP_BOUNDARY_INFO
variable, found in src/constants.js
Adapted from https://nodejs.org/en/docs/guides/nodejs-docker-webapp/.
docker build -t plotandscatter/ps-bcic-data-viz .
docker run -p 3001:3000 -d plotandscatter/ps-bcic-data-viz
You should now be able to access the Docker server at http://yourdomain.com:3001
(or http://localhost:3001
if running locally).
docker ps
docker kill <container-id>
Adapted from http://blog.yohanliyanage.com/2015/05/docker-clean-up-after-yourself/ and http://stackoverflow.com/questions/30604846/docker-error-no-space-left-on-device.
docker ps -a
Then manually use docker rm containerid
or docker rmi image
as appropriate for stopped/dangling images.
docker rmi $(docker images -f "dangling=true" -q)
(if using sudo
, sudo docker rmi $(sudo docker images -f "dangling=true" -q)
)
docker rmi $(docker images | grep "^<none>" | awk "{print $3}")
src/data/
.