Interactive using Leaflet.js to visualize Bozeman, MT walkability
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
dist
node_modules
LICENSE
README.md
gulpfile.js
package.json

README.md

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.