#add layerTypes props handler, and GMapLayers view (#264)

* #add layerTypes props handler, and GMapLayers view

* #fix linter, change props place

* #add layerTypes props descrition

README.md

@@ -178,6 +178,16 @@ In onChange callback, gives you a marginBounds argument property, where lat lng
 
 Default: true
 
+#### layerTypes (string[])
+
+You can add some "layers" for map like a
+[traffic](https://developers.google.com/maps/documentation/javascript/examples/layer-traffic) or
+[transit](https://developers.google.com/maps/documentation/javascript/examples/layer-transit)
+
+```javascript
+layerTypes={['TrafficLayer', 'TransitLayer']}
+```
+
 ### callbacks
 
 #### options (func|object)

develop/GMapLayers.js

@@ -0,0 +1,108 @@
+import React, { PropTypes } from 'react';
+import compose from 'recompose/compose';
+import defaultProps from 'recompose/defaultProps';
+import withStateSelector from './utils/withStateSelector';
+import withHandlers from 'recompose/withHandlers';
+import withState from 'recompose/withState';
+import withContext from 'recompose/withContext';
+import withProps from 'recompose/withProps';
+import withPropsOnChange from 'recompose/withPropsOnChange';
+import ptInBounds from './utils/ptInBounds';
+import GoogleMapReact from '../src';
+import SimpleMarker from './markers/SimpleMarker';
+import { createSelector } from 'reselect';
+import { londonCoords, generateMarkers } from './data/fakeData';
+
+export const gMap = ({
+  style, hoverDistance, options,
+  mapParams: { center, zoom },
+  onChange, onChildMouseEnter, onChildMouseLeave,
+  markers, draggable, // hoveredMarkerId,
+}) => (
+  <GoogleMapReact
+    draggable={draggable}
+    style={style}
+    options={options}
+    hoverDistance={hoverDistance}
+    center={center}
+    zoom={zoom}
+    layerTypes={['TrafficLayer', 'TransitLayer']}
+    onChange={onChange}
+    onChildMouseEnter={onChildMouseEnter}
+    onChildMouseLeave={onChildMouseLeave}
+  >
+    {
+      markers
+    }
+  </GoogleMapReact>
+);
+
+export const gMapHOC = compose(
+  defaultProps({
+    clusterRadius: 60,
+    hoverDistance: 30,
+    options: {
+      minZoom: 3,
+      maxZoom: 15,
+    },
+    style: {
+      position: 'relative',
+      margin: 0,
+      padding: 0,
+      flex: 1,
+    },
+  }),
+  withContext(
+    { hello: PropTypes.string },
+    () => ({ hello: 'world' })
+  ),
+  // withState so you could change markers if you want
+  withStateSelector(
+    'markers',
+    'setMarkers',
+    () => createSelector(
+      ({ route: { markersCount = 20 } }) => markersCount,
+      (markersCount) => generateMarkers(markersCount)
+    )
+  ),
+  withState('hoveredMarkerId', 'setHoveredMarkerId', -1),
+  withState('mapParams', 'setMapParams', { center: londonCoords, zoom: 9 }),
+  // describe events
+  withHandlers({
+    onChange: ({ setMapParams }) => ({ center, zoom, bounds }) => {
+      setMapParams({ center, zoom, bounds });
+    },
+    onChildMouseEnter: ({ setHoveredMarkerId }) => (hoverKey, { id }) => {
+      setHoveredMarkerId(id);
+    },
+    onChildMouseLeave: ({ setHoveredMarkerId }) => () => {
+      setHoveredMarkerId(-1);
+    },
+  }),
+  withPropsOnChange(
+    ['markers', 'mapParams'],
+    ({ markers, mapParams: { bounds } }) => ({
+      markers: bounds
+        ? markers.filter(m => ptInBounds(bounds, m))
+        : [],
+    })
+  ),
+  withProps(({ hoveredMarkerId }) => ({
+    draggable: hoveredMarkerId === -1,
+  })),
+  withPropsOnChange(
+    ['markers'],
+    ({ markers }) => ({
+      markers: markers
+        .map(({ ...markerProps, id }) => (
+          <SimpleMarker
+            key={id}
+            id={id}
+            {...markerProps}
+          />
+        )),
+    })
+  )
+);
+
+export default gMapHOC(gMap);

develop/Layout.js

@@ -12,6 +12,7 @@ export class Layout extends Component { // eslint-disable-line
         <header className={header}>
           <div className={links}>
             <Link to="/">Multi Markers</Link>
+            <Link to="/layers">With layers</Link>
             <Link to="/hoverunoptim">Hover unoptim</Link>
             <Link to="/hoveroptim">Hover optim</Link>
             <Link to="/resizable">Resizable Map</Link>

develop/Main.js

@@ -4,6 +4,7 @@ import { render } from 'react-dom';
 import { Router, Route, IndexRoute, browserHistory } from 'react-router';
 import Layout from './Layout';
 import GMap from './GMap';
+import GMapLayers from './GMapLayers';
 import GMapOptim from './GMapOptim';
 import GMapResizable from './GMapResizable';
 
@@ -16,6 +17,7 @@ render(
   <Router history={browserHistory}>
     <Route path="/" component={Layout}>
       <Route markersCount={50} path="hoverunoptim" component={GMap} />
+      <Route markersCount={50} path="layers" component={GMapLayers} />
       <Route markersCount={50} path="hoveroptim" component={GMapOptim} />
       <Route markersCount={20} path="resizable" component={GMapResizable} />
       <IndexRoute markersCount={20} component={GMap} />

develop/data/fakeData.js

@@ -1,5 +1,6 @@
 export const susolvkaCoords = { lat: 60.814305, lng: 47.051773 };
 
+export const londonCoords = { lat: 51.508411, lng: -0.125364 };
 
 export const generateMarkers = (count) =>
   [...Array(count)].fill(0) // fill(0) for loose mode

src/google_map.js

@@ -91,6 +91,7 @@ export default class GoogleMap extends Component {
     draggable: PropTypes.bool,
     style: PropTypes.any,
     resetBoundsOnResize: PropTypes.bool,
+    layerTypes: PropTypes.arrayOf(PropTypes.string), // ['TransitLayer', 'TrafficLayer']
   };
 
   static defaultProps = {
@@ -111,6 +112,7 @@ export default class GoogleMap extends Component {
       padding: 0,
       position: 'relative',
     },
+    layerTypes: [],
   };
 
   static googleMapLoader = googleMapLoader; // eslint-disable-line
@@ -454,6 +456,12 @@ export default class GoogleMap extends Component {
       mapOptions.minZoom = this._checkMinZoom(mapOptions.minZoom, minZoom);
 
       const map = new maps.Map(ReactDOM.findDOMNode(this.refs.google_map_dom), mapOptions);
+
+      this.props.layerTypes.forEach((layerType) => {
+        const layer = new maps[layerType]();
+        layer.setMap(map);
+      });
+
       this.map_ = map;
       this.maps_ = maps;