From 1c801812b23ced07304f31cde8e374937e2ecc48 Mon Sep 17 00:00:00 2001 From: Ivan Date: Tue, 1 Nov 2016 14:46:07 +0200 Subject: [PATCH] #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 | 10 ++++ develop/GMapLayers.js | 108 +++++++++++++++++++++++++++++++++++++++ develop/Layout.js | 1 + develop/Main.js | 2 + develop/data/fakeData.js | 1 + src/google_map.js | 8 +++ 6 files changed, 130 insertions(+) create mode 100644 develop/GMapLayers.js diff --git a/README.md b/README.md index 527edf9..6213658 100644 --- a/README.md +++ b/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) diff --git a/develop/GMapLayers.js b/develop/GMapLayers.js new file mode 100644 index 0000000..4435931 --- /dev/null +++ b/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, +}) => ( + + { + markers + } + +); + +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 }) => ( + + )), + }) + ) +); + +export default gMapHOC(gMap); diff --git a/develop/Layout.js b/develop/Layout.js index 0b81669..3a5badb 100644 --- a/develop/Layout.js +++ b/develop/Layout.js @@ -12,6 +12,7 @@ export class Layout extends Component { // eslint-disable-line
Multi Markers + With layers Hover unoptim Hover optim Resizable Map diff --git a/develop/Main.js b/develop/Main.js index c058e23..98b3fec 100644 --- a/develop/Main.js +++ b/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( + diff --git a/develop/data/fakeData.js b/develop/data/fakeData.js index a00e596..512b048 100644 --- a/develop/data/fakeData.js +++ b/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 diff --git a/src/google_map.js b/src/google_map.js index f55b2bc..a49f2c4 100644 --- a/src/google_map.js +++ b/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;