feat(FusionTablesLayer)

README.md

@@ -134,6 +134,14 @@ render(
 />
 ```
 
+### FusionTablesLayer
+
+```jsx
+<FusionTablesLayer
+  onClick={_.noop}
+/>
+```
+
 ### InfoWindow
 
 ```jsx

src/app/App.js

@@ -34,6 +34,7 @@ import {
   DirectionsExample,
   OverlayViewExample,
   KmlLayerExample,
+  FusionTablesLayerExample,
   PopUpInfoWindowExample,
 } from "./pages/basics";
 
@@ -73,6 +74,7 @@ export default class App extends Component {
             <Route path="directions" component={DirectionsExample} />
             <Route path="overlay-view" component={OverlayViewExample} />
             <Route path="kml-layer" component={KmlLayerExample} />
+            <Route path="fusion-tables-layer" component = {FusionTablesLayerExample} />
             <Route path="pop-up-window" component={PopUpInfoWindowExample} />
           </Route>
           <Route path="events">

src/app/containers/Application.js

@@ -76,6 +76,7 @@ export default class Application extends Component {
               <LinkContainer to="/basics/directions"><MenuItem>Directions</MenuItem></LinkContainer>
               <LinkContainer to="/basics/overlay-view"><MenuItem>Overlay view</MenuItem></LinkContainer>
               <LinkContainer to="/basics/kml-layer"><MenuItem>KmlLayer</MenuItem></LinkContainer>
+              <LinkContainer to="/basics/fusion-tables-layer"><MenuItem>Fusion Tables Layer</MenuItem></LinkContainer>
               <LinkContainer to="/basics/pop-up-window"><MenuItem>Pop-up InfoWindow</MenuItem></LinkContainer>
               <MenuItem divider />
               <LinkContainer to="/events/simple-click-event"><MenuItem>Simple click event</MenuItem></LinkContainer>

src/app/pages/basics/FusionTablesLayerExample.js

@@ -0,0 +1,47 @@
+import _ from 'lodash';
+
+import { 
+    default as React,
+    Component,
+} from 'react';
+
+import {
+    withGoogleMap,
+    GoogleMap,
+    FusionTablesLayer,
+} from '../../../lib';
+
+/*
+ * Add <script src="https://maps.googleapis.com/maps/api/js"></script> to your HTML to provide google.maps reference
+ */
+const FusionTablesExampleGoogleMap = withGoogleMap(props => (
+    <GoogleMap
+        defaultZoom={11}
+        defaultCenter={{ lat: 41.850033, lng: -87.6500523 }}
+    >
+        <FusionTablesLayer 
+            options={{
+                query: {
+                    select: `Geocodable address`,
+                    from: `1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg`,
+                },
+            }}
+            onClick={_.noop}
+        />
+    </GoogleMap>
+));
+
+export default class FusionTablesExample extends Component {
+    render() {
+        return (
+            <FusionTablesExampleGoogleMap
+                containerElement={
+                    <div style={{ height: `100%` }} />
+                }
+                mapElement={
+                    <div style={{ height: `100%` }} />
+                }
+            />
+        );
+    }
+}

src/app/pages/basics/index.js

@@ -10,6 +10,8 @@ import OverlayViewExample from "./OverlayViewExample";
 
 import KmlLayerExample from "./KmlLayerExample";
 
+import FusionTablesLayerExample from './FusionTablesLayerExample';
+
 import PopUpInfoWindowExample from "./PopUpInfoWindowExample";
 
 SimpleMapExample.__raw = require(`!raw!./SimpleMapExample`);
@@ -19,6 +21,7 @@ DirectionsExample.__raw = require(`!raw!./DirectionsExample`);
 OverlayViewExample.__raw = require(`!raw!./OverlayViewExample`);
 KmlLayerExample.__raw = require(`!raw!./KmlLayerExample`);
 PopUpInfoWindowExample.__raw = require(`!raw!./PopUpInfoWindowExample`);
+FusionTablesLayerExample.__raw = require(`!raw!./FusionTablesLayerExample`);
 
 export {
   SimpleMapExample,
@@ -27,5 +30,6 @@ export {
   DirectionsExample,
   OverlayViewExample,
   KmlLayerExample,
+  FusionTablesLayerExample,
   PopUpInfoWindowExample,
 };

src/lib/FusionTablesLayer.js

@@ -0,0 +1,98 @@
+/* global google */
+import _ from 'lodash';
+
+import { 
+    default as React,
+    PropTypes,
+} from 'react';
+
+import {
+    MAP,
+    FUSION_TABLES_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#FusionTablesLayer
+    options: PropTypes.object,
+}
+
+const defaultUncontrolledPropTypes = addDefaultPrefixToPropTypes(controlledPropTypes);
+
+const eventMap = {
+    // https://developers.google.com/maps/documentation/javascript/3.exp/reference#FusionTablesLayer
+    // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; })
+    onClick: `click`,
+};
+
+const publicMethodMap = {
+    // Public APIs
+    //
+    // https://developers.google.com/maps/documentation/javascript/3.exp/reference#FusionTablesLayer
+    //
+    // [].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(fusionTablesLayer, options) { fusionTablesLayer.setOptions(options); },
+};
+
+function getInstanceFromComponent(component) {
+    return component.state[FUSION_TABLES_LAYER];
+}
+
+export default _.flowRight(
+    React.createClass,
+    enhanceElement(getInstanceFromComponent, publicMethodMap, eventMap, controlledPropUpdaterMap),
+)({
+    displayName: `FusionTablesLayer`,
+
+    propTypes: {
+        ...controlledPropTypes,
+        ...defaultUncontrolledPropTypes,
+    },
+
+    contextTypes: {
+        [MAP]: PropTypes.object,
+    },
+
+    getInitialState() {
+        const fusionTablesLayer = new google.maps.FusionTablesLayer({
+            map: this.context[MAP],
+            ...collectUncontrolledAndControlledProps(
+                defaultUncontrolledPropTypes,
+                controlledPropTypes,
+                this.props
+            ),
+        });
+
+        return {
+            [FUSION_TABLES_LAYER]: fusionTablesLayer,
+        };
+    },
+
+    componentWillUnmount() {
+        const fusionTablesLayer = getInstanceFromComponent(this);
+        if (fusionTablesLayer) {
+            fusionTablesLayer.setMap(null);
+        }
+    },
+
+    render() {
+        return false;
+    },
+});

src/lib/__tests__/index.test.js

@@ -7,6 +7,7 @@ import {
   HeatmapLayer,
   InfoWindow,
   KmlLayer,
+  FusionTablesLayer,
   Marker,
   OverlayView,
   Polygon,
@@ -24,6 +25,7 @@ describe(`index`, () => {
     expect(HeatmapLayer).toBeDefined();
     expect(InfoWindow).toBeDefined();
     expect(KmlLayer).toBeDefined();
+    expect(FusionTablesLayer).toBeDefined();
     expect(Marker).toBeDefined();
     expect(OverlayView).toBeDefined();
     expect(Polygon).toBeDefined();

src/lib/constants.js

@@ -18,6 +18,8 @@ export const DIRECTIONS_RENDERER = `__SECRET_DIRECTIONS_RENDERER_DO_NOT_USE_OR_Y
 
 export const HEATMAP_LAYER = `__SECRET_HEATMAP_LAYER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`;
 
+export const FUSION_TABLES_LAYER = `__SECRET_FUSION_TABLES_LAYER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`;
+
 export const ANCHOR = `__SECRET_ANCHOR_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`;
 
 export const INFO_WINDOW = `__SECRET_INFO_WINDOW_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`;

src/lib/index.js

@@ -30,6 +30,10 @@ export {
   default as KmlLayer,
 } from "./KmlLayer";
 
+export {
+  default as FusionTablesLayer,
+} from "./FusionTablesLayer";
+
 export {
   default as DirectionsRenderer,
 } from "./DirectionsRenderer";