Add geom.Point, geom.MultiPoint and geom.Circle geometries

src/geom/circle.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import ol from 'openlayers';
+import OLComponent from '../ol-component';
+
+export default class Circle extends OLComponent {
+  constructor(props) {
+    super(props);
+    this.geometry = new ol.geom.Circle();
+    this.updateFromProps(props);
+  }
+
+  updateFromProps(props) {
+    if (props.children.length == 1) {
+      // props.children[0] is the center
+      this.geometry.setCenterAndRadius(props.children[0], props.radius);
+    } else if (props.children.length > 1) {
+      // props.children is the center
+      this.geometry.setCenterAndRadius(props.children, props.radius);
+    } else {
+      this.geometry.setCenterAndRadius([0, 0], props.radius);
+    }
+  }
+
+  componentDidMount() {
+    this.context.feature.setGeometry(this.geometry);
+  }
+
+  componentWillReceiveProps(newProps) {
+    this.updateFromProps(newProps);
+  }
+
+  componentWillUnmount() {
+    this.context.feature.setGeometry(undefined);
+  }
+}
+
+Circle.propTypes = {
+  children: React.PropTypes.arrayOf(PropTypes.number).isRequired,
+  radius: React.PropTypes.number.isRequired
+}
+
+Circle.contextTypes = {
+  feature: React.PropTypes.instanceOf(ol.Feature)
+}

src/geom/index.js

@@ -1,3 +1,6 @@
+export {default as Circle} from './circle';
 export {default as Polygon} from './polygon';
 export {default as LineString} from './line-string';
 export {default as RawGeometry} from './raw-geometry';
+export {default as Point} from './point';
+export {default as MultiPoint} from './multi-point';

src/geom/line-string.js

@@ -20,6 +20,10 @@ export default class LineString extends OLComponent {
   componentWillReceiveProps(newProps) {
     this.updateFromProps(newProps);
   }
+
+  componentWillUnmount() {
+    this.context.feature.setGeometry(undefined);
+  }
 }
 
 LineString.propTypes = {

src/geom/multi-point.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import ol from 'openlayers';
+import OLComponent from '../ol-component';
+
+export default class MultiPoint extends OLComponent {
+  constructor(props) {
+    super(props);
+    this.geometry = new ol.geom.MultiPoint();
+    this.updateFromProps(props);
+  }
+
+  updateFromProps(props) {
+    this.geometry.setCoordinates(props.children);
+  }
+
+  componentDidMount() {
+    this.context.feature.setGeometry(this.geometry);
+  }
+
+  componentWillReceiveProps(newProps) {
+    this.updateFromProps(newProps);
+  }
+
+  componentWillUnmount() {
+    this.context.feature.setGeometry(undefined);
+  }
+}
+
+MultiPoint.propTypes = {
+  children: React.PropTypes.arrayOf(
+    React.PropTypes.arrayOf(React.PropTypes.number)
+  ).isRequired,
+}
+
+MultiPoint.contextTypes = {
+  feature: React.PropTypes.instanceOf(ol.Feature)
+}

src/geom/point.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import ol from 'openlayers';
+import OLComponent from '../ol-component';
+
+export default class Point extends OLComponent {
+  constructor(props) {
+    super(props);
+    this.geometry = new ol.geom.Point();
+    this.updateFromProps(props);
+  }
+
+  updateFromProps(props) {
+    this.geometry.setCoordinates(props.children);
+  }
+
+  componentDidMount() {
+    this.context.feature.setGeometry(this.geometry);
+  }
+
+  componentWillReceiveProps(newProps) {
+    this.updateFromProps(newProps);
+  }
+
+  componentWillUnmount() {
+    this.context.feature.setGeometry(undefined);
+  }
+}
+
+Point.propTypes = {
+  children: React.PropTypes.arrayOf(React.PropTypes.number).isRequired
+}
+
+Point.contextTypes = {
+  feature: React.PropTypes.instanceOf(ol.Feature)
+}

src/geom/polygon.js

@@ -21,8 +21,8 @@ export default class Polygon extends OLComponent {
     this.updateFromProps(newProps);
   }
 
-  render() {
-    return false;
+  componentWillUnmount() {
+    this.context.feature.setGeometry(undefined);
   }
 }
 

src/map.js

@@ -32,6 +32,12 @@ export default class Map extends React.Component {
     this.map.setTarget(undefined)
   }
 
+  focus () {
+    const viewport = this.map.getViewport()
+    viewport.tabIndex = 0
+    viewport.focus()
+  }
+
   getChildContext () {
     return {
       map: this.map
@@ -51,10 +57,8 @@ export default class Map extends React.Component {
     )
   }
 
-  focus () {
-    const viewport = this.map.getViewport()
-    viewport.tabIndex = 0
-    viewport.focus()
+  updateSize () {
+    this.map.updateSize()
   }
 }