Leaflet Bozeman walkability map
Interactive visualizing the distances to restaurants, stores, etc. in different parts of Bozeman.
Built on a repository template for d3.js data visulization projects, using gulp for workflow automation.
TODOS:
- Usability testing from github.io
- Seems like Leaflet zoom is hanging on my iPhone 6 (otherwise, things run pretty smoothly). Or are icons are taking too long to load?
- See to-dos in walk-map.js
- Refactor for elegance before I forget how the code is put together
Components
(in app/ directory, development folder)
- index.html
- js/walk-map.js - Primary JS file
- js/d3-(several) - Portions of d3 4.0 library
- js/leaflet.js - mapping library
- css/viz-style.css - Map styling
- css/bootstrap.css - Used for buttons / text
- css/leaflet.css - CSS for Leaflet
- css/leaflet-override.css - Hacky place for overriding Leaflet CSS I wanted to change
- data/all-bzn-places.geojson - Data for map
node_modules directory contains modules for Gulp operation
Gulp command reference
Assumes Gulp command line interface is installed locally
$ npm install --global gulp-cli
Spinning up development server:
$ gulp
Calls gulp default function. Currently starts a development server and calls an automatic referesh on changes.
Building distribution files with minified js, etc.
$ gulp build
Builds contents of app/ into dist/, concatenating and minifying js and css into a single file.