Merge pull request #73 from conveyal/dev

v0.12.0
conveyal · Feb 7, 2017 · 23c3109 · 23c3109
2 parents 6af9b00 + f609f17
commit 23c3109
Show file tree

Hide file tree

Showing 7 changed files with 1,778 additions and 1,816 deletions.
diff --git a/README.md b/README.md
@@ -5,6 +5,56 @@
 
 Create isochrones and accessibility images in the browser
 
+## How to create and display an isochrone (assuming you have the data!)
+
+```js
+const b = new Browsochrones({webpack: false}) // set to true if using webpack to bundle
+const baseUrl = 'https://s3.amazon.com/bucket'
+const cutoff = 60 // minutes
+const map = Leaflet.map('map')
+const lonlat = {lat: 39.766667, lon: -86.15}
+
+(async function () {
+  const query = await fetch(baseUrl + '/query.json').then((res) => res.json())
+  const stopTrees = await fetch(baseUrl + '/stop_trees.dat').then((res) => res.arrayBuffer())
+  const grid1 = await fetch(gridUrl + '/Jobs_total.grid').then((res) => res.arrayBuffer())
+  const grid2 = await fetch(gridUrl + '/Workers_total.grid').then((res) => res.arrayBuffer())
+
+  await b.setQuery(query)
+  await b.setStopTrees(stopTrees)
+  await b.putGrid(grid1, 'jobs')
+  await b.putGrid(grid2, 'workforce')
+  await b.setTransitiveNetwork(query.transitiveData)
+
+  const point = b.pixelToOriginPoint(map.project(lonlat), map.getZoom())
+  const data = await fetch(baseUrl + '/' + (point.x | 0) + '/' + (point.y | 0) + '.dat').then((res) => res.arrayBuffer())
+
+  await b.setOrigin(data.slice(0), point)
+  await b.generateSurface('jobs')
+  await b.generateSurface('workforce')
+
+  const surfaceLayer = new Leaflet.GridLayer()
+  surfaceLayer.createTile = b.createTile // automatically bound to the instance
+  surfaceLayer.addTo(map)
+
+  const isochrone = await b.getIsochrone(cutoff) // minutes
+  const isoLayer = Leaflet.geoJSON(isochrone, {
+    style: {
+      weight: 3,
+      color: '#f00',
+      opacity: 1,
+      fillColor: '#222',
+      fillOpacity: 0.3
+    }
+  }).addTo(map)
+
+  const jobAccess = await b.getAccessibilityForGrid('jobs', cutoff)
+  console.log('job access', jobAccess)
+  const workforceAccess = await b.getAccessibilityForGrid('workforce', cutoff)
+  console.log('workforce access', workforceAccess)
+})()
+```
+
 [npm-image]: https://img.shields.io/npm/v/browsochrones.svg?maxAge=2592000&style=flat-square
 [npm-url]: https://www.npmjs.com/package/browsochrones
 [travis-image]: https://img.shields.io/travis/conveyal/browsochrones.svg?style=flat-square

diff --git a/example.css b/example.css
diff --git a/index.html b/index.html
@@ -1,9 +1,69 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta charset="utf-8">
     <title>Static Site Output</title>
 
-    <link rel="stylesheet" href="example.css">
+    <link rel="stylesheet" href="node_modules/normalize.css/normalize.css">
+    <link rel="stylesheet" href="node_modules/mapbox.js/theme/style.css">
+    <link rel="stylesheet" href="node_modules/transitive-js/lib/transitive.css">
+    <style>
+      html, body, #map {
+        height: 100%;
+        margin: 0px;
+        font-family: Helvetica, sans-serif;
+      }
+
+      #info {
+        position: fixed;
+        top: 10px;
+        right: 10px;
+        z-index: 2000;
+        background: #fff;
+        border: 1px solid rgba(0, 0, 0, 0.5);
+        width: 250px;
+        padding: 10px;
+      }
+
+      output {
+        display: block;
+        font-size: 1.5em;
+        font-weight: bold;
+      }
+
+      #marey {
+        position: fixed;
+        bottom: 10px;
+        border: 1px solid rgba(0, 0, 0, 0.5);
+        background: #fff;
+        z-index: 2000;
+        left: 10px;
+        right: 10px;
+      }
+
+      #lineMap {
+        position: fixed;
+        width: 220px;
+        height: 600px;
+        left: 20px;
+        top: 20px;
+        border: 1px solid rgba(0, 0, 0, 0.5);
+        background: #fff;
+        z-index: 2000;
+      }
+
+      #isochrone {
+        position: fixed;
+        left: 20px;
+        top: 20px;
+        z-index: 2001;
+        background: #fff;
+        border: 1px solid rgba(0, 0, 0, 0.5),
+        width: 1200px;
+        height: 900px;
+        display: none;
+      }
+    </style>
   </head>
   <body>
     <div id="map"></div>
@@ -21,10 +81,7 @@
     </div>
 
     <div id="lineMap"></div>
-
-    <div id="marey">
-    </div>
-
+    <div id="marey"></div>
     <div id="isochrone" style="display: none"></div>
 
     <script src="assets/index.js"></script>

diff --git a/lib/index.js b/lib/index.js
@@ -3,7 +3,6 @@ import WebWorkerPromiseInterface from 'web-worker-promise-interface'
 
 import {create as createGridFunc} from './grid'
 import {latToPixel, lonToPixel} from './mercator'
-import workerHandlers from './worker-handlers'
 
 const imageHeight = 256
 const imageWidth = 256
@@ -14,16 +13,19 @@ export default class Browsochrones extends WebWorkerPromiseInterface {
   stopTreesLoaded = false
   surfaceLoaded = false
 
-  constructor (opts) {
-    super(workerHandlers)
-    const {origin, query, stopTrees, transitiveNetwork} = opts || {}
+  constructor ({
+    origin,
+    query,
+    stopTrees,
+    transitiveNetwork,
+    webpack = false
+  } = {}) {
+    super(webpack ? require.resolve('./worker-handlers') : require('./worker-handlers'))
 
     if (origin) this.setOrigin(origin.data, origin.point)
     if (query) this.setQuery(query)
     if (stopTrees) this.setStopTrees(stopTrees)
     if (transitiveNetwork) this.setTransitiveNetwork(transitiveNetwork)
-
-    this.drawTile = this.drawTile.bind(this)
   }
 
   /**

diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "prepublish": "mastarm prepublish lib --outdir build",
     "prestart": "yarn",
     "start": "mastarm build --serve example.js:assets/index.js",
+    "start-webpack": "webpack --watch",
     "test": "mastarm lint",
     "semantic-release": "semantic-release pre && npm publish && semantic-release post"
   },
@@ -26,6 +27,8 @@
     "web-worker-promise-interface": "^0.2.0"
   },
   "devDependencies": {
+    "babel-loader": "^6.2.10",
+    "babel-polyfill": "^6.22.0",
     "concat-stream": "^1.5.2",
     "isomorphic-fetch": "^2.2.1",
     "leaflet-transitivelayer": "^0.2.0",
@@ -37,7 +40,9 @@
     "react-dom": "^15.4.1",
     "semantic-release": "^6.3.2",
     "tape": "^4.6.3",
-    "transitive-js": "^0.9.2"
+    "transitive-js": "^0.9.2",
+    "webpack": "^2.2.1",
+    "webworkify-webpack": "^2.0.1"
   },
   "standard": {
     "parser": "babel-eslint"

diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,23 @@
+module.exports = {
+  entry: ['babel-polyfill', './example.js'],
+  output: {
+    filename: './assets/index.js'
+  },
+  resolve: {
+    alias: {
+      webworkify: 'webworkify-webpack'
+    }
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        query: {
+          presets: ['env', 'react', 'stage-2']
+        },
+        exclude: /node_modules/
+      }
+    ]
+  }
+}