[#1] Tying in flux, pulling in base map.

.babelrc

@@ -0,0 +1,3 @@
+{
+  stage: 0
+}

.gitignore

@@ -1,2 +1,3 @@
 jspm_packages
 node_modules
+credentials.js

cfg/base.js

@@ -35,7 +35,7 @@ module.exports = {
       {
         test: /\.(js|jsx)$/,
         include: path.join(__dirname, 'src'),
-        loader: 'eslint-loader'
+        loader: 'babel-loader!eslint-loader'
       }
     ],
     loaders: [
@@ -60,7 +60,7 @@ module.exports = {
         loader: 'style-loader!css-loader!stylus-loader'
       },
       {
-        test: /\.(png|jpg|gif|woff|woff2)$/,
+        test: /\.(png|jpg|gif|eot|woff|woff2)/,
         loader: 'url-loader?limit=8192'
       }
     ]

package.json

@@ -2,18 +2,18 @@
   "name": "hibikeshare",
   "private": true,
   "version": "0.0.1",
-  "description": "YOUR DESCRIPTION - Generated by generator-react-webpack",
+  "description": "Hi Bikeshare Generated by generator-react-webpack",
   "main": "",
   "scripts": {
     "start": "node server.js --env=dev",
     "test": "karma start",
     "posttest": "npm run lint",
     "serve": "node server.js --env=dev",
-    "serve:dist": "node server.js --env=dist",
-    "dist": "npm run copy & webpack --env=dist",
-    "lint": "eslint ./src",
-    "copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./dist",
-    "clean": "rimraf dist/*",
+    "serve:./public/app/dist": "node server.js --env=./public/app/dist",
+    "./public/app/dist": "npm run copy & webpack --env=./public/app/dist",
+    "lint": "eslint ./public/app/src",
+    "copy": "copyfiles -f ./public/app/src/index.html ./public/app/src/favicon.ico ././public/app/dist",
+    "clean": "rimraf ./public/app/dist/*",
     "release:major": "npm version major && npm publish && git push --follow-tags",
     "release:minor": "npm version minor && npm publish && git push --follow-tags",
     "release:patch": "npm version patch && npm publish && git push --follow-tags"
@@ -52,18 +52,23 @@
     "webpack-dev-server": "^1.10.1"
   },
   "dependencies": {
-    "body-parser": "^1.14.1",
-    "cookie-parser": "^1.4.0",
-    "debug": "^2.2.0",
-    "express": "^4.13.3",
-    "jade": "^1.11.0",
-    "leaflet-hoverboard": "^1.1.5",
+    "d3": "^3.5.6",
+    "es6-promise": "^3.0.2",
+    "file-loader": "^0.8.4",
+    "fynx": "^2.0.0-alpha7",
+    "immutable": "^3.7.5",
+    "leaflet": "^0.7.5",
+    "leaflet-hash": "^0.2.1",
     "lodash": "^3.10.1",
-    "morgan": "^1.6.1",
+    "mapbox-gl": "^0.11.1",
     "normalize.css": "^3.0.3",
-    "nunjucks": "^2.1.0",
+    "omniscient": "^3.3.0",
+    "pbf": "^1.3.5",
+    "qs": "^5.1.0",
     "react": "^0.13.3",
+    "reqwest-without-xhr2": "^2.0.2",
     "sass-loader": "^1.0.1",
-    "serve-favicon": "^2.3.0"
+    "url-loader": "^0.5.6",
+    "vector-tile": "^1.1.3"
   }
 }

public/app/src/actions/actions.js

@@ -0,0 +1,7 @@
+import {createActions, createAsyncActions} from 'fynx';
+
+export default createActions([
+  // routeActions.js
+  'initRoutes',
+  'allRoutes'
+]);

public/app/src/actions/routeActions.js

@@ -0,0 +1,36 @@
+import {default as actions} from './actions';
+import qs from 'qs';
+import request from 'reqwest-without-xhr2';
+import routeStore from '../stores/routeStore.js';
+import {Promise} from 'es6-promise';
+
+const server = 'http://services.arcgis.com/tNJpAOha4mODLkXz/ArcGIS/rest/services/BikePaths/FeatureServer/0/query';
+
+/**
+ * Fetches routes from api server
+ */
+actions.initRoutes.listen(() => {
+  let params = {
+    where:'1=1',
+    geometryType:'esriGeometryEnvelope',
+    spatialRel:'esriSpatialRelIntersects',
+    units:'esriSRUnit_Meter',
+    outFields:'*',
+    returnGeometry:'true',
+    returnIdsOnly:'false',
+    returnCountOnly:'false',
+    returnExtentOnly:'false',
+    returnDistinctValues:'false',
+    returnZ:'false',
+    returnM:'false',
+    f:'pjson'
+  }
+  let url = `${server}?${qs.stringify(params)}`;
+  request({
+    url: url,
+    type: 'json'
+  }).then((data) => {
+    routeStore().set('routes', data.features);
+    console.log(routeStore().get('routes'));
+  });
+});

public/app/src/components/Main.js

@@ -1,17 +1,37 @@
 require('normalize.css');
-require('styles/App.css');
 
 import React from 'react/addons';
+import {default as actions} from '../actions/actions.js';
+import routeActions from '../actions/routeActions.js';
+import store from '../stores/routeStore.js';
+import {
+  vector_api_key,
+  mapbox_access_token
+} from '../globals/credentials.js';
+
+import {mapboxStyles} from '../globals/mapbox.js';
+import {connect} from 'fynx-decorators';
 
 let yeomanImage = require('../images/yeoman.png');
 
+@connect(store, 'data')
 class AppComponent extends React.Component {
+  componentDidMount() {
+    actions.initRoutes();
+    L.mapbox.accessToken = mapbox_access_token;
+    this.map = new L.mapbox.map('map', 'russellvea2.nl7ij7em', {
+      center: [21.456597,-157.857164],
+      zoom: 12
+    })
+  }
+
+  componentWillUpdate() {
+
+  }
+
   render() {
     return (
-      <div className="index">
-        <img src={yeomanImage} alt="Yeoman Generator" />
-        <div className="notice">blah</div>
-      </div>
+      <div className="index" id="map" style={{height: '100vh'}}></div>
     );
   }
 }

public/app/src/globals/mapbox.js

@@ -0,0 +1,56 @@
+import {vector_api_key} from './credentials.js';
+
+
+const styles = {
+  "sans": "Open Sans Regular, Arial Unicode MS Regular",
+  "sans-it": "Open Sans Italic, Arial Unicode MS Regular",
+  "sans-md": "Open Sans Semibold, Arial Unicode MS Bold",
+  "sans-bd": "Open Sans Bold, Arial Unicode MS Bold",
+  "big-label": "#cb4b49",
+  "medium-label": "#f27a87",
+  "small-label": "#384646",
+  "label-halo": "rgba(255,255,255,0.5)",
+  "label-halo-dark": "rgba(0,0,0,0.2)",
+  land: "#ededed",
+  water: "#7acad0",
+  park: "#c2cd44",
+  building: "#afd3d3",
+  highway: "#5d6765",
+  road: "#c0c4c2",
+  path: "#5d6765",
+  subway: "#ef7369",
+  "highway-width": {
+   "base": 1.55,
+   "stops": [[4, 0.5], [8, 1.5], [20, 40]]
+  },
+  "road-width": {
+   "base": 1.55,
+   "stops": [[4, 0.25], [20, 30]]
+  },
+  "path-width": {
+   "base": 1.8,
+   "stops": [[10, 0.15], [20, 15]]
+  },
+  "road-misc-width": {
+   "base": 1,
+   "stops": [[4, 0.25], [20, 30]]
+  },
+  "stream-width":{
+   "base": 0.5,
+   "stops": [[4, 0.5], [10, 1.5], [20, 5]]
+  }
+ };
+
+/**
+ *  Source: https://github.com/mapzen/mapboxgl-vector-tiles/blob/master/index.html
+ */
+export const mapboxStyles = {
+  "version": 8,
+  "glyphs": "mapbox://fontstack/{fontstack}/{range}.pbf",
+  "sources": {
+    "osm": {
+      "type": "vector",
+      "tiles": [`https://vector.mapzen.com/osm/all/{z}/{x}/{y}.mvt?api_key=${vector_api_key}`]
+    }
+  },
+}

public/app/src/index.html

@@ -6,11 +6,13 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
 </head>
 <body>
   <div id="app">APPLICATION CONTENT</div>
 
   <script>__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__</script>
+  <script src='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
   <script type="text/javascript" src="assets/app.js"></script>
 </body>
 </html>

public/app/src/stores/routeStore.js

@@ -0,0 +1,6 @@
+import {fromJS} from 'immutable';
+import {createCursorStore} from 'fynx';
+
+export default createCursorStore(fromJS({
+  routes: []
+}));

test.tm2/README.md

@@ -0,0 +1,3 @@
+mapbox-studio-default-style
+===========================
+Default style used by new style projects in Mapbox Studio.

test.tm2/bookmarks.yml

@@ -0,0 +1,14 @@
+- place_name: 4161 Nuuanu Pali Dr Honolulu, Hawaii 96817 United States
+  zoom: 13
+  center: 
+    - 21.346064612734615
+    - -157.81156539916992
+  tags: 
+    - userbookmark
+- place_name: 1508 Ala Leleu St Honolulu, Hawaii 96818 United States
+  zoom: 14
+  center: 
+    - 21.3565
+    - -157.901
+  tags: 
+    - userbookmark