Add Circle component for rendering circles on a map instance

Author: ryanhefner

package.json

@@ -22,6 +22,7 @@
   ],
   "files": [
     "es",
+    "Circle.js",
     "GoogleMap.js",
     "index.js",
     "Marker.js",
@@ -36,7 +37,7 @@
   "module": "es/index.js",
   "jsnext:main": "src/index.js",
   "scripts": {
-    "clean": "rm -f index.js && rm -f GoogleMap.js && rm -f Marker.js && rm -f MarkerClusterer.js && rm -fr es && rm -fr umd",
+    "clean": "rm -f index.js && rm -f Circle.js && rm -f GoogleMap.js && rm -f Marker.js && rm -f MarkerClusterer.js && rm -fr es && rm -fr umd",
     "prebuild": "npm run clean",
     "build": "node ./tools/build.js",
     "watch": "babel ./src -d . --ignore __tests__,**/*.test.js --watch",

src/Circle.js

@@ -0,0 +1,165 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+const CALLBACK_MAP = {
+  'center_changed': 'onCenterChanged',
+  'click': 'onClick',
+  'dblclick': 'onDoubleClick',
+  'drag': 'onDrag',
+  'dragend': 'onDragEnd',
+  'dragstart': 'onDragStart',
+  'mousedown': 'onMouseDown',
+  'mousemove': 'onMouseMove',
+  'mouseout': 'onMouseOut',
+  'mouseover': 'onMouseOver',
+  'mouseup': 'onMouseUp',
+  'radius_changed': 'onRadiusChanged',
+  'rightclick': 'onRightClick',
+  'visible_changed': 'onVisibleChanged',
+  'zindex_changed': 'onZIndexChanged',
+};
+
+export const defaultOptions = {
+  fillColor: '#1774ff',
+  fillOpacity: 0.2,
+  strokeColor: '#1774ff',
+  strokeWeight: 2,
+};
+
+class Circle extends Component {
+  componentDidMount() {
+    if (this.props.map) {
+      this.renderCircle(this.props);
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      map,
+      center,
+      radius,
+      options,
+    } = this.props;
+
+    let renderCircle = false;
+
+    if (map !== prevProps.map) {
+      renderCircle = true;
+    }
+
+    if (!Object.is(center, prevProps.center)) {
+      renderCircle = true;
+    }
+
+    if (radius !== prevProps.radius) {
+      renderCircle = true;
+    }
+
+    if (!Object.is(options, prevProps.options)) {
+      renderCircle = true;
+    }
+
+    if (renderCircle) {
+      this.renderCircle(this.props);
+    }
+  }
+
+  componentWillUnmount() {
+    if (!this.circle) {
+      return;
+    }
+
+    google.maps.event.clearInstanceListeners(this.circle);
+    this.circle.setMap(null);
+  }
+
+  onCircleCallback(callback, event) {
+    this.props[callback](this.marker, event);
+  }
+
+  renderCircle(props) {
+    const {
+      map,
+      options,
+      center,
+      radius,
+    } = props;
+
+    if (!map) {
+      return;
+    }
+
+    if (!this.circle) {
+      this.circle = new google.maps.Circle({
+        ...Object.assign({}, defaultOptions, options),
+        map,
+        center,
+        radius,
+      });
+
+      Object.keys(CALLBACK_MAP).forEach(key => {
+        google.maps.event.addListener(
+          this.circle,
+          key,
+          this.onCircleCallback.bind(this, CALLBACK_MAP[key])
+        );
+      });
+      return;
+    }
+
+    this.circle.setOptions({
+      ...Object.assign({}, defaultOptions, options),
+      map,
+      center,
+      radius,
+    });
+  }
+
+  render() {
+    return null;
+  }
+}
+
+Circle.propTypes = {
+  map: PropTypes.object,
+  center: PropTypes.object.isRequired,
+  radius: PropTypes.number,
+  options: PropTypes.object,
+  onCenterChanged: PropTypes.func,
+  onClick: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  onDrag: PropTypes.func,
+  onDragEnd: PropTypes.func,
+  onDragStart: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onMouseMove: PropTypes.func,
+  onMouseOut: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  onMouseUp: PropTypes.func,
+  onRadiusChanged: PropTypes.func,
+  onRightClick: PropTypes.func,
+  onVisibleChange: PropTypes.func,
+  onZIndexChange: PropTypes.func,
+};
+
+Circle.defaultProps = {
+  options: defaultOptions,
+  radius: 1000,
+  onCenterChanged: (circle) => {},
+  onClick: (circle) => {},
+  onDoubleClick: (circle) => {},
+  onDrag: (circle) => {},
+  onDragEnd: (circle) => {},
+  onDragStart: (circle) => {},
+  onMouseDown: (circle) => {},
+  onMouseMove: (circle) => {},
+  onMouseOut: (circle) => {},
+  onMouseOver: (circle) =>  {},
+  onMouseUp: (circle) => {},
+  onRadiusChanged: (circle) => {},
+  onRightClick: (circle) => {},
+  onVisibleChange: (circle) => {},
+  onZIndexChange: (circle) => {},
+};
+
+export default Circle;

src/index.js

@@ -1,3 +1,4 @@
-export {default as Marker} from './Marker';
-export {default as MarkerClusterer} from './MarkerClusterer';
-export {default as default} from './GoogleMap';
+export { default as Circle } from './Circle';
+export { default as Marker } from './Marker';
+export { default as MarkerClusterer } from './MarkerClusterer';
+export { default as default } from './GoogleMap';