diff --git a/client/scripts/index.js b/client/scripts/index.js index 0382096d..9a41a3fe 100755 --- a/client/scripts/index.js +++ b/client/scripts/index.js @@ -4,7 +4,7 @@ require("../styles/index.scss"); var React = require("react/addons"); var {update} = React.addons; -var {GoogleMapsMixin, Map, Marker, Polygon} = require("../../src"); +var {GoogleMapsMixin, Map, Marker, Polygon, Polyline} = require("../../src"); var Body = React.createClass({ @@ -27,6 +27,18 @@ var Body = React.createClass({ fillColor: '#FF0000', fillOpacity: 0.35, }, + flightPath: { + path: [ + {lat: 37.772323, lng: -122.214897}, + {lat: 21.291982, lng: -157.821856}, + {lat: -18.142599, lng: 178.431}, + {lat: -27.46758, lng: 153.027892}, + ], + geodesic: true, + strokeColor: '#FF0000', + strokeOpacity: 1.0, + strokeWeight: 2, + }, }; }, @@ -86,6 +98,7 @@ var Body = React.createClass({ onRightclick: this._handle_polygon_rightclick }})) } + { Polyline(props.flightPath) } ; } }); diff --git a/src/Marker.js b/src/Marker.js index 654cad84..31f2acae 100644 --- a/src/Marker.js +++ b/src/Marker.js @@ -18,7 +18,6 @@ module.exports = React.createClass({ componentDidMount () { var marker = this._init_marker(); - console.log("componentDidMount", marker); if (!marker) return; this.add_listeners(marker); }, diff --git a/src/Polyline.js b/src/Polyline.js new file mode 100644 index 00000000..201fca7a --- /dev/null +++ b/src/Polyline.js @@ -0,0 +1,72 @@ +/** @jsx React.DOM */ +"use strict"; +var React = require("react/addons"); + +var ChildMixin = require("./mixins/ChildMixin"); +var EventBindingMixin = require("./mixins/EventBindingMixin"); + +module.exports = React.createClass({ + displayName: "Polyline", + + mixins: [ChildMixin, EventBindingMixin], + + getInitialState () { + return { + polyline: null + }; + }, + + componentDidMount () { + var polyline = this._init_polyline(); + if (!polyline) return; + this.add_listeners(polyline); + }, + + componentWillUpdate () { + var {polyline} = this.state; + if (!polyline) return; + this.clear_listeners(polyline); + }, + + componentDidUpdate () { + var polyline = this._init_polyline(); + if (!polyline) return; + this.add_listeners(polyline); + polyline.setOptions(this.props); + }, + + componentWillUnmount () { + var {polyline} = this.state; + if (!polyline) return; + this.clear_listeners(polyline); + polyline.setMap(null); + this.setState({ polyline: null }); + }, + + render () { + return this._render(this.props, this.state); + }, + + get_event_names () { + return "click dblclick drag dragend dragstart mousedown mousemove mouseout mouseover mouseup rightclick"; + }, + + _init_polyline () { + var {context} = this; + var {polyline} = this.state; + if (polyline || !context.hasMap() || !context.getApi()) { + return polyline; + } + var {Polyline} = context.getApi(); + polyline = new Polyline(this.props); + polyline.setMap(context.getMap()); + + this.expose_getters_from(Polyline.prototype, polyline); + this.setState({ polyline }); + return polyline; + }, + + _render (props, state) { + return null; + } +}); diff --git a/src/index.js b/src/index.js index af6db3bf..360965c3 100644 --- a/src/index.js +++ b/src/index.js @@ -4,3 +4,4 @@ exports.GoogleMapsMixin = require("./GoogleMapsMixin"); exports.Map = require("./Map"); exports.Marker = require("./Marker"); exports.Polygon = require("./Polygon"); +exports.Polyline = require("./Polyline");