feat(traffic-layer): Implemented <TrafficLayer /> component

package.json

@@ -53,7 +53,8 @@
     "Circle",
     "Directions",
     "InfoWindow",
-    "SearchBox"
+    "SearchBox",
+    "TrafficLayer"
   ],
   "author": {
     "name": "tomchentw",

src/app/App.js

@@ -35,6 +35,7 @@ import {
   OverlayViewExample,
   KmlLayerExample,
   PopUpInfoWindowExample,
+  TrafficLayerExample,
 } from "./pages/basics";
 
 import {
@@ -74,6 +75,7 @@ export default class App extends Component {
             <Route path="overlay-view" component={OverlayViewExample} />
             <Route path="kml-layer" component={KmlLayerExample} />
             <Route path="pop-up-window" component={PopUpInfoWindowExample} />
+            <Route path="traffic-layer" component={TrafficLayerExample} />
           </Route>
           <Route path="events">
             <Route path="simple-click-event" component={SimpleClickEventExample} />

src/app/containers/Application.js

@@ -77,6 +77,7 @@ export default class Application extends Component {
               <LinkContainer to="/basics/overlay-view"><MenuItem>Overlay view</MenuItem></LinkContainer>
               <LinkContainer to="/basics/kml-layer"><MenuItem>KmlLayer</MenuItem></LinkContainer>
               <LinkContainer to="/basics/pop-up-window"><MenuItem>Pop-up InfoWindow</MenuItem></LinkContainer>
+              <LinkContainer to="/basics/traffic-layer"><MenuItem>TrafficLayer</MenuItem></LinkContainer>
               <MenuItem divider />
               <LinkContainer to="/events/simple-click-event"><MenuItem>Simple click event</MenuItem></LinkContainer>
               <LinkContainer to="/events/closure-listeners">

src/app/pages/basics/TrafficLayerExample.js

@@ -0,0 +1,42 @@
+/* global google */
+import {
+  default as React,
+  Component,
+} from "react";
+
+import {
+  withGoogleMap,
+  GoogleMap,
+  TrafficLayer,
+} from "../../../lib";
+
+/*
+ * Add <script src="https://maps.googleapis.com/maps/api/js"></script> to your HTML to provide google.maps reference
+ */
+const TrafficLayerExampleGoogleMap = withGoogleMap(props => (
+  <GoogleMap
+    defaultZoom={8}
+    defaultCenter={{ lat: 41.876, lng: -87.624 }}
+  >
+    <TrafficLayer autoUpdate />
+  </GoogleMap>
+));
+
+/*
+ * Add <script src="https://maps.googleapis.com/maps/api/js"></script> to your HTML to provide google.maps reference
+ */
+export default class TrafficLayerExample extends Component {
+
+  render() {
+    return (
+      <TrafficLayerExampleGoogleMap
+        containerElement={
+          <div style={{ height: `100%` }} />
+        }
+        mapElement={
+          <div style={{ height: `100%` }} />
+        }
+      />
+    );
+  }
+}

src/app/pages/basics/index.js

@@ -12,13 +12,16 @@ import KmlLayerExample from "./KmlLayerExample";
 
 import PopUpInfoWindowExample from "./PopUpInfoWindowExample";
 
+import TrafficLayerExample from './TrafficLayerExample';
+
 SimpleMapExample.__raw = require(`!raw!./SimpleMapExample`);
 StyledMapExample.__raw = require(`!raw!./StyledMapExample`);
 GeolocationExample.__raw = require(`!raw!./GeolocationExample`);
 DirectionsExample.__raw = require(`!raw!./DirectionsExample`);
 OverlayViewExample.__raw = require(`!raw!./OverlayViewExample`);
 KmlLayerExample.__raw = require(`!raw!./KmlLayerExample`);
 PopUpInfoWindowExample.__raw = require(`!raw!./PopUpInfoWindowExample`);
+TrafficLayerExample.__raw = require(`!raw!./TrafficLayerExample`);
 
 export {
   SimpleMapExample,
@@ -28,4 +31,5 @@ export {
   OverlayViewExample,
   KmlLayerExample,
   PopUpInfoWindowExample,
+  TrafficLayerExample,
 };

src/lib/TrafficLayer.js

@@ -0,0 +1,97 @@
+/* global google */
+import _ from "lodash";
+
+import {
+  default as React,
+  PropTypes,
+} from "react";
+
+import {
+  MAP,
+  TRAFFIC_LAYER,
+} from "./constants";
+
+import {
+  addDefaultPrefixToPropTypes,
+  collectUncontrolledAndControlledProps,
+  default as enhanceElement,
+} from "./enhanceElement";
+
+const controlledPropTypes = {
+  // NOTICE!!!!!!
+  //
+  // Only expose those with getters & setters in the table as controlled props.
+  //
+  // [].map.call($0.querySelectorAll("tr>td>code", function(it){ return it.textContent; })
+  //    .filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
+  //
+  // https://developers.google.com/maps/documentation/javascript/3.exp/reference#TrafficLayer
+  options: PropTypes.object,
+};
+
+const defaultUncontrolledPropTypes = addDefaultPrefixToPropTypes(controlledPropTypes);
+
+const eventMap = {
+  // https://developers.google.com/maps/documentation/javascript/3.exp/reference#TrafficLayer
+  // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; })
+};
+
+const publicMethodMap = {
+  // Public APIs
+  //
+  // https://developers.google.com/maps/documentation/javascript/3.exp/reference#TrafficLayer
+  //
+  // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; })
+  //    .filter(function(it){ return it.match(/^get/) && !it.match(/Map$/); })
+  // END - Public APIs
+};
+
+const controlledPropUpdaterMap = {
+  options(trafficLayer, options) { trafficLayer.setOptions(options); },
+};
+
+function getInstanceFromComponent(component) {
+  return component.state[TRAFFIC_LAYER];
+}
+
+export default _.flowRight(
+  React.createClass,
+  enhanceElement(getInstanceFromComponent, publicMethodMap, eventMap, controlledPropUpdaterMap),
+)({
+  displayName: `TrafficLayer`,
+
+  propTypes: {
+    ...controlledPropTypes,
+    ...defaultUncontrolledPropTypes,
+  },
+
+  contextTypes: {
+    [MAP]: PropTypes.object,
+  },
+
+  getInitialState() {
+    // https://developers.google.com/maps/documentation/javascript/3.exp/reference#TrafficLayer
+    const trafficLayer = new google.maps.TrafficLayer({
+      map: this.context[MAP],
+      ...collectUncontrolledAndControlledProps(
+        defaultUncontrolledPropTypes,
+        controlledPropTypes,
+        this.props
+      ),
+    });
+    return {
+      [TRAFFIC_LAYER]: trafficLayer,
+    };
+  },
+
+  componentWillUnmount() {
+    const trafficLayer = getInstanceFromComponent(this);
+    if (trafficLayer) {
+      trafficLayer.setMap(null);
+    }
+  },
+
+  render() {
+    return false;
+  },
+});

src/lib/constants.js

@@ -31,3 +31,5 @@ export const SEARCH_BOX = `__SECRET_SEARCH_BOX_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`;
 export const MARKER_CLUSTERER = `__SECRET_MARKER_CLUSTERER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`;
 
 export const INFO_BOX = `__SECRET_INFO_BOX_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`;
+
+export const TRAFFIC_LAYER = `__SECRET_TRAFFIC_LAYER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`;

src/lib/index.js

@@ -45,3 +45,7 @@ export {
 export {
   default as OverlayView,
 } from "./OverlayView";
+
+export {
+  default as TrafficLayer,
+} from "./TrafficLayer";