[#1] Adding bike paths.

package.json

@@ -54,28 +54,23 @@
   "dependencies": {
     "body-parser": "^1.14.1",
     "cookie-parser": "^1.4.0",
-    "d3": "^3.5.6",
     "debug": "^2.2.0",
     "es6-promise": "^3.0.2",
     "express": "^4.13.3",
     "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",
     "mapbox-gl": "^0.11.1",
     "morgan": "^1.6.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"
+    "url-loader": "^0.5.6"
   }
 }

public/app/src/components/Main.js

@@ -11,27 +11,58 @@ import {
 
 import {mapboxStyles} from '../globals/mapbox.js';
 import {connect} from 'fynx-decorators';
+// require('esri-leaflet/dist/esri-leaflet-src.js');
 
 let yeomanImage = require('../images/yeoman.png');
 
+const types = {
+  "Lane": {
+    color: "#FF851B",
+    width: 1,
+    opacity: 1
+  },
+  "Route": {
+    color: "#3D9970",
+    width: 1,
+    opacity: 1
+  },
+  "Path": {
+    color: "#FF851B",
+    width: 1,
+    opacity: 1
+  },
+  "Separated Bike Lane": {
+    color: "#FFDC00",
+    width: 3,
+    opacity: 1
+  }
+}
+
 @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
+    this.map = new L.mapbox.map('map', 'russellvea2.nlehndmb', {
+      center: [21.331, -157.777],
+      zoom: 13
     })
-  }
-
-  componentWillUpdate() {
+    let paths = L.esri.featureLayer({
+      url: 'http://services.arcgis.com/tNJpAOha4mODLkXz/ArcGIS/rest/services/BikePaths/FeatureServer/0',
+      where: '1=1',
+      style: (feature) => {
+        return types[feature.properties.Facility_T];
+      }
+    })
+    paths.addTo(this.map);
+    paths.bindPopup((feature)=> {
+      return feature.properties.Facility_N;
+    });
 
   }
 
   render() {
     return (
-      <div className="index" id="map" style={{height: '100vh'}}></div>
+      <div className="index" id="map" style={{height: '100vh', width: '100%'}}></div>
     );
   }
 }

public/app/src/index.html

@@ -13,6 +13,7 @@
 
   <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 src="http://cdn.jsdelivr.net/leaflet.esri/1.0.0/esri-leaflet.js"></script>
   <script type="text/javascript" src="assets/app.js"></script>
 </body>
 </html>