Skip to content

Commit 3ae8b5e

Browse files
committed
Merge branch 'master' of github.com:fullstackreact/google-maps-react
* 'master' of github.com:fullstackreact/google-maps-react: add the polyline component
2 parents 9687f69 + 5881174 commit 3ae8b5e

File tree

5 files changed

+355
-11
lines changed

5 files changed

+355
-11
lines changed

README.md

Lines changed: 37 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -63,12 +63,12 @@ export default GoogleApiWrapper({
6363

6464
![](http://d.pr/i/C7qr.png)
6565

66-
## Additional Map Props
67-
The Map component takes a number of optional props.
66+
## Additional Map Props
67+
The Map component takes a number of optional props.
6868

69-
Zoom: (Shown Above) takes a number with the higher value representing a tighter focus on the map's center.
69+
Zoom: (Shown Above) takes a number with the higher value representing a tighter focus on the map's center.
7070

71-
Style: Takes CSS style object - commonly width and height.
71+
Style: Takes CSS style object - commonly width and height.
7272

7373
```javascript
7474
const style = {
@@ -299,6 +299,37 @@ render: function() {
299299

300300
The `<Polygon />` component listens to `onClick`, `onMouseover` and `onMouseout` events.
301301

302+
### Polyline
303+
304+
To place a polyline on the Map, set `<Polyline />` as child of Map component.
305+
306+
```javascript
307+
render: function() {
308+
var triangleCoords = [
309+
{lat: 25.774, lng: -80.190},
310+
{lat: 18.466, lng: -66.118},
311+
{lat: 32.321, lng: -64.757},
312+
{lat: 25.774, lng: -80.190}
313+
];
314+
return(
315+
<Map google={this.props.google}
316+
style={{width: '100%', height: '100%', position: 'relative'}}
317+
className={'map'}
318+
zoom={14}>
319+
<Polyline
320+
paths={triangleCoords}
321+
strokeColor="#0000FF"
322+
strokeOpacity={0.8}
323+
strokeWeight={2} />
324+
</Map>
325+
)
326+
}
327+
```
328+
329+
#### Events
330+
331+
The `<Polyline />` component listens to `onClick`, `onMouseover` and `onMouseout` events.
332+
302333
### InfoWindow
303334

304335
The `<InfoWindow />` component included in this library is gives us the ability to pop up a "more info" window on our Google map.
@@ -320,12 +351,12 @@ export class MapContainer extends Component {
320351
activeMarker: {},
321352
selectedPlace: {},
322353
}
323-
354+
324355
// binding this to event-handler functions
325356
this.onMarkerClick = this.onMarkerClick.bind(this);
326357
this.onMapClicked = this.onMapClicked.bind(this);
327358
}
328-
359+
329360
onMarkerClick: function(props, marker, e) {
330361
this.setState({
331362
selectedPlace: props,

dist/components/Polyline.js

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
(function (global, factory) {
2+
if (typeof define === "function" && define.amd) {
3+
define(['exports', 'react', 'prop-types', '../lib/String'], factory);
4+
} else if (typeof exports !== "undefined") {
5+
factory(exports, require('react'), require('prop-types'), require('../lib/String'));
6+
} else {
7+
var mod = {
8+
exports: {}
9+
};
10+
factory(mod.exports, global.react, global.propTypes, global.String);
11+
global.Polyline = mod.exports;
12+
}
13+
})(this, function (exports, _react, _propTypes, _String) {
14+
'use strict';
15+
16+
Object.defineProperty(exports, "__esModule", {
17+
value: true
18+
});
19+
exports.Polyline = undefined;
20+
21+
var _react2 = _interopRequireDefault(_react);
22+
23+
var _propTypes2 = _interopRequireDefault(_propTypes);
24+
25+
function _interopRequireDefault(obj) {
26+
return obj && obj.__esModule ? obj : {
27+
default: obj
28+
};
29+
}
30+
31+
function _classCallCheck(instance, Constructor) {
32+
if (!(instance instanceof Constructor)) {
33+
throw new TypeError("Cannot call a class as a function");
34+
}
35+
}
36+
37+
var _createClass = function () {
38+
function defineProperties(target, props) {
39+
for (var i = 0; i < props.length; i++) {
40+
var descriptor = props[i];
41+
descriptor.enumerable = descriptor.enumerable || false;
42+
descriptor.configurable = true;
43+
if ("value" in descriptor) descriptor.writable = true;
44+
Object.defineProperty(target, descriptor.key, descriptor);
45+
}
46+
}
47+
48+
return function (Constructor, protoProps, staticProps) {
49+
if (protoProps) defineProperties(Constructor.prototype, protoProps);
50+
if (staticProps) defineProperties(Constructor, staticProps);
51+
return Constructor;
52+
};
53+
}();
54+
55+
function _possibleConstructorReturn(self, call) {
56+
if (!self) {
57+
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
58+
}
59+
60+
return call && (typeof call === "object" || typeof call === "function") ? call : self;
61+
}
62+
63+
function _inherits(subClass, superClass) {
64+
if (typeof superClass !== "function" && superClass !== null) {
65+
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
66+
}
67+
68+
subClass.prototype = Object.create(superClass && superClass.prototype, {
69+
constructor: {
70+
value: subClass,
71+
enumerable: false,
72+
writable: true,
73+
configurable: true
74+
}
75+
});
76+
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
77+
}
78+
79+
var evtNames = ['click', 'mouseout', 'mouseover'];
80+
81+
var wrappedPromise = function wrappedPromise() {
82+
var wrappedPromise = {},
83+
promise = new Promise(function (resolve, reject) {
84+
wrappedPromise.resolve = resolve;
85+
wrappedPromise.reject = reject;
86+
});
87+
wrappedPromise.then = promise.then.bind(promise);
88+
wrappedPromise.catch = promise.catch.bind(promise);
89+
wrappedPromise.promise = promise;
90+
91+
return wrappedPromise;
92+
};
93+
94+
var Polyline = exports.Polyline = function (_React$Component) {
95+
_inherits(Polyline, _React$Component);
96+
97+
function Polyline() {
98+
_classCallCheck(this, Polyline);
99+
100+
return _possibleConstructorReturn(this, (Polyline.__proto__ || Object.getPrototypeOf(Polyline)).apply(this, arguments));
101+
}
102+
103+
_createClass(Polyline, [{
104+
key: 'componentDidMount',
105+
value: function componentDidMount() {
106+
this.polylinePromise = wrappedPromise();
107+
this.renderPolyline();
108+
}
109+
}, {
110+
key: 'componentDidUpdate',
111+
value: function componentDidUpdate(prevProps) {
112+
if (this.props.map !== prevProps.map) {
113+
if (this.polyline) {
114+
this.polyline.setMap(null);
115+
}
116+
this.renderPolyline();
117+
}
118+
}
119+
}, {
120+
key: 'componentWillUnmount',
121+
value: function componentWillUnmount() {
122+
if (this.polyline) {
123+
this.polyline.setMap(null);
124+
}
125+
}
126+
}, {
127+
key: 'renderPolyline',
128+
value: function renderPolyline() {
129+
var _this2 = this;
130+
131+
var _props = this.props,
132+
map = _props.map,
133+
google = _props.google,
134+
paths = _props.paths,
135+
strokeColor = _props.strokeColor,
136+
strokeOpacity = _props.strokeOpacity,
137+
strokeWeight = _props.strokeWeight;
138+
139+
140+
if (!google) {
141+
return null;
142+
}
143+
144+
var params = {
145+
map: map,
146+
paths: paths,
147+
strokeColor: strokeColor,
148+
strokeOpacity: strokeOpacity,
149+
strokeWeight: strokeWeight
150+
};
151+
152+
this.polyline = new google.maps.Polyline(params);
153+
154+
evtNames.forEach(function (e) {
155+
_this2.polyline.addListener(e, _this2.handleEvent(e));
156+
});
157+
158+
this.polylinePromise.resolve(this.polyline);
159+
}
160+
}, {
161+
key: 'getPolyline',
162+
value: function getPolyline() {
163+
return this.polylinePromise;
164+
}
165+
}, {
166+
key: 'handleEvent',
167+
value: function handleEvent(evt) {
168+
var _this3 = this;
169+
170+
return function (e) {
171+
var evtName = 'on' + (0, _String.camelize)(evt);
172+
if (_this3.props[evtName]) {
173+
_this3.props[evtName](_this3.props, _this3.polyline, e);
174+
}
175+
};
176+
}
177+
}, {
178+
key: 'render',
179+
value: function render() {
180+
return null;
181+
}
182+
}]);
183+
184+
return Polyline;
185+
}(_react2.default.Component);
186+
187+
Polyline.propTypes = {
188+
paths: _propTypes2.default.array,
189+
strokeColor: _propTypes2.default.string,
190+
strokeOpacity: _propTypes2.default.number,
191+
strokeWeight: _propTypes2.default.number
192+
};
193+
194+
evtNames.forEach(function (e) {
195+
return Polyline.propTypes[e] = _propTypes2.default.func;
196+
});
197+
198+
Polyline.defaultProps = {
199+
name: 'Polyline'
200+
};
201+
202+
exports.default = Polyline;
203+
});

dist/index.js

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
(function (global, factory) {
22
if (typeof define === "function" && define.amd) {
3-
define(['exports', './GoogleApiComponent', './components/Marker', './components/InfoWindow', './components/HeatMap', './components/Polygon', 'react', 'prop-types', 'react-dom', './lib/String', './lib/cancelablePromise', 'invariant'], factory);
3+
define(['exports', './GoogleApiComponent', './components/Marker', './components/InfoWindow', './components/HeatMap', './components/Polygon', './components/Polyline', 'react', 'prop-types', 'react-dom', './lib/String', './lib/cancelablePromise', 'invariant'], factory);
44
} else if (typeof exports !== "undefined") {
5-
factory(exports, require('./GoogleApiComponent'), require('./components/Marker'), require('./components/InfoWindow'), require('./components/HeatMap'), require('./components/Polygon'), require('react'), require('prop-types'), require('react-dom'), require('./lib/String'), require('./lib/cancelablePromise'), require('invariant'));
5+
factory(exports, require('./GoogleApiComponent'), require('./components/Marker'), require('./components/InfoWindow'), require('./components/HeatMap'), require('./components/Polygon'), require('./components/Polyline'), require('react'), require('prop-types'), require('react-dom'), require('./lib/String'), require('./lib/cancelablePromise'), require('invariant'));
66
} else {
77
var mod = {
88
exports: {}
99
};
10-
factory(mod.exports, global.GoogleApiComponent, global.Marker, global.InfoWindow, global.HeatMap, global.Polygon, global.react, global.propTypes, global.reactDom, global.String, global.cancelablePromise, global.invariant);
10+
factory(mod.exports, global.GoogleApiComponent, global.Marker, global.InfoWindow, global.HeatMap, global.Polygon, global.Polyline, global.react, global.propTypes, global.reactDom, global.String, global.cancelablePromise, global.invariant);
1111
global.index = mod.exports;
1212
}
13-
})(this, function (exports, _GoogleApiComponent, _Marker, _InfoWindow, _HeatMap, _Polygon, _react, _propTypes, _reactDom, _String, _cancelablePromise, _invariant) {
13+
})(this, function (exports, _GoogleApiComponent, _Marker, _InfoWindow, _HeatMap, _Polygon, _Polyline, _react, _propTypes, _reactDom, _String, _cancelablePromise, _invariant) {
1414
'use strict';
1515

1616
Object.defineProperty(exports, "__esModule", {
1717
value: true
1818
});
19-
exports.Map = exports.Polygon = exports.HeatMap = exports.InfoWindow = exports.Marker = exports.GoogleApiWrapper = undefined;
19+
exports.Map = exports.Polyline = exports.Polygon = exports.HeatMap = exports.InfoWindow = exports.Marker = exports.GoogleApiWrapper = undefined;
2020
Object.defineProperty(exports, 'GoogleApiWrapper', {
2121
enumerable: true,
2222
get: function () {
@@ -47,6 +47,12 @@
4747
return _Polygon.Polygon;
4848
}
4949
});
50+
Object.defineProperty(exports, 'Polyline', {
51+
enumerable: true,
52+
get: function () {
53+
return _Polyline.Polyline;
54+
}
55+
});
5056

5157
var _react2 = _interopRequireDefault(_react);
5258

0 commit comments

Comments
 (0)