From 426f6c652f99bb09bf1d60a3ae3f64fba8f065a0 Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Fri, 16 Dec 2016 16:47:27 +0000
Subject: [PATCH 01/36] Added first brush through the type definitions - only
 done controls so far

---
 index.d.ts | 256 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 256 insertions(+)
 create mode 100644 index.d.ts

diff --git a/index.d.ts b/index.d.ts
new file mode 100644
index 0000000..fb00fc1
--- /dev/null
+++ b/index.d.ts
@@ -0,0 +1,256 @@
+// Type definitions for ol-react 0.1.5
+// Project: https://github.com/richardhills/ol-react
+// Definitions by: Status Awareness Systems (http://statusas.com)
+
+/// <reference types="react" />
+/// <reference types="openlayers" />
+
+declare module "ol-react" {
+    export import control = __OLReact.control;
+    export import geom = __OLReact.geom;
+    export import layer = __OLReact.layer;
+    export import source = __OLReact.source;
+
+    export import Feature = __OLReact.Feature;
+    export import Map = __OLReact.Map;
+    export import View = __OLReact.View;
+}
+
+declare namespace __OLReact {
+    export class OLComponent<P, S> extends React.Component<P, S> {
+    }
+
+    export class OLContainer<P, S> extends OLComponent<P, S> {
+
+    }
+
+    interface FeatureProps {
+        style?: Object;
+        children?: JSX.Element;
+        id?: any;
+    }
+
+    export class Feature extends OLComponent<FeatureProps, any> {
+        updateFromProps(props: FeatureProps): void;
+    }
+
+    interface MapProps {
+        loadTilesWhileAnimating?: boolean;
+        loadTilesWhileInteracting?: boolean;
+        onSingleClick?: Function;
+        onChangeSize?: Function;
+        view: JSX.Element;
+        useDefaultInteractions?: boolean;
+        useDefaultControls?: boolean;
+        focusOnMount?: boolean;
+        children?: JSX.Element | JSX.Element[];
+    }
+
+    export class Map extends React.Component<MapProps, any> {
+        focus(): void;
+    }
+
+    interface ViewProps {
+        center: number[];
+        resolution: number;
+        zoom: number;
+        onNavigation?: Function;
+    }
+
+    export class View extends OLComponent<ViewProps, any> {
+        onCenterChanged(event: any): void;
+        onResolutionChanged(event: any): void;
+        updateCenterAndResolutionFromProps_(props: ViewProps): void;
+        updateFromProps_(props: ViewProps, isMounting: boolean): void;
+
+    }
+
+    ///////
+    ///////     CONTROL
+    ///////
+    export namespace control {
+        export const ScaleLineUnit = {
+            DEGREES: 'degrees',
+            IMPERIAL: 'imperial',
+            NAUTICAL: 'nautical',
+            METRIC: 'metric',
+            US: 'us'
+        }
+
+        export const ScaleLineUnits = [
+            'degrees',
+            'imperial',
+            'nautical',
+            'metric',
+            'us'
+        ]
+
+        interface OLControlProps {
+        }
+
+        export class OLControl<P, S> extends OLComponent<P, S> {
+        }
+
+        interface AttributionProps extends OLControlProps {
+            className?: string;
+            collapsed?: boolean;
+            collapseLabel?: string;
+            collapsible?: boolean;
+            label?: React.ReactNode;
+            tipLabel?: string;
+
+        }
+
+        export class Attribution extends OLControl<AttributionProps, any> {
+        }
+
+        interface FullScreenProps {
+            className?: string;
+            keys?: boolean;
+            label?: React.ReactNode;
+            labelActive?: React.ReactNode;
+            source?: React.ReactNode | any;
+            tipLabel?: string;
+
+        }
+
+        export class FullScreen extends OLControl<FullScreenProps, any> {
+        }
+
+        interface MousePositionProps {
+            className?: string;
+            coordinateFormat?: Function;
+            projection?: ol.proj.Projection | string;
+            undefinedHTML?: string;
+        }
+
+        export class MousePosition extends OLControl<MousePositionProps, any> {
+        }
+
+        interface OverviewMapProps {
+            className?: string;
+            collapsed?: boolean;
+            collapseLabel?: string;
+            collapsible?: boolean;
+            label?: React.ReactNode;
+            layers?: ol.layer.Layer[] | ol.Collection;
+            tipLabel?: string;
+            view?: ol.View;
+        }
+        export class OverviewMap extends OLControl<OverviewMapProps, any> {
+        }
+
+        interface RotateProps {
+            autoHide?: boolean;
+            className?: string;
+            duration?: number;
+            label?: React.ReactNode;
+            resetNorth?: Function;
+            tipLabel?: string;
+        }
+
+        export class Rotate extends OLControl<RotateProps, any> {
+        }
+
+        interface ScaleLineProps {
+            className?: string;
+            minWidth?: number;
+            units?: ScaleLineUnits
+        }
+
+        export class ScaleLine extends OLControl<ScaleLineProps, any> {
+        }
+
+        interface ZoomProps {
+            className?: string;
+            delta?: number;
+            duration?: number;
+            zoomInLabel?: React.ReactNode;
+            zoomInTipLabel?: string;
+            zoomOutLabel?: React.ReactNode;
+            zoomOutTipLabel?: string;
+        }
+
+        export class Zoom extends OLControl<ZoomProps, any> {
+        }
+
+        interface ZoomSliderProps {
+            className?: string;
+            duration?: number;
+            maxResolution?: number;
+            minResolution?: number;
+        }
+
+        export class ZoomSlider extends OLControl<ZoomSliderProps, any> {
+        }
+
+        interface ZoomToExtentProps {
+            className?: string;
+            extent?: OLPropTypes.Extent,
+            label?: React.ReactNode;
+            tipLabel?: string;
+        }
+
+        export class ZoomToExtent extends OLControl<ZoomToExtentProps, any> {
+        }
+    }
+
+    ///////
+    ///////     GEOM
+    ///////
+    export namespace geom {
+        interface LineStringProps {
+            children?: number[][];
+        }
+
+        export class LineString extends OLComponent<LineStringProps, any> {
+            updateFromProps(props: LineStringProps): void;
+        }
+    }
+
+
+
+    ///////
+    ///////     LAYER
+    ///////
+    export namespace layer {
+        interface TileProps {
+            visible?: boolean;
+            zIndex?: number;
+        }
+
+        export class Tile extends OLContainer<TileProps, any> {
+        }
+
+        interface VectorProps {
+            updateWhileAnimating?: boolean;
+            updateWhileInteracting?: boolean;
+            style?: ol.style.Style | Object | ol.style.Style[] | Object[];
+            visible?: boolean;
+            zIndex?: number;
+        }
+        export class Vector extends OLContainer<VectorProps, any> {
+        }
+    }
+
+    ///////
+    ///////     SOURCE
+    ///////
+    export namespace source {
+        interface OSMProps {
+        }
+        export class OSM extends OLComponent<OSMProps, any> {
+        }
+
+        interface VectorProps {
+        }
+        export class Vector extends OLComponent<VectorProps, any> {
+        }
+
+        interface XYZProps {
+            url: string;
+        }
+        export class XYZ extends OLComponent<XYZProps, any> {
+        }
+    }
+}
\ No newline at end of file

From b365d2298ce3e92f6ba9a91bdd066c4ecd8d8e4c Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Thu, 12 Jan 2017 15:01:35 +0100
Subject: [PATCH 02/36] Finished first pass of typescript definitions

---
 index.d.ts | 190 +++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 149 insertions(+), 41 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index fb00fc1..8fb7332 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -8,6 +8,7 @@
 declare module "ol-react" {
     export import control = __OLReact.control;
     export import geom = __OLReact.geom;
+    export import interaction = __OLReact.interaction;
     export import layer = __OLReact.layer;
     export import source = __OLReact.source;
 
@@ -21,7 +22,6 @@ declare namespace __OLReact {
     }
 
     export class OLContainer<P, S> extends OLComponent<P, S> {
-
     }
 
     interface FeatureProps {
@@ -31,7 +31,6 @@ declare namespace __OLReact {
     }
 
     export class Feature extends OLComponent<FeatureProps, any> {
-        updateFromProps(props: FeatureProps): void;
     }
 
     interface MapProps {
@@ -52,42 +51,28 @@ declare namespace __OLReact {
 
     interface ViewProps {
         center: number[];
-        resolution: number;
-        zoom: number;
+        resolution?: number;
+        zoom?: number;
         onNavigation?: Function;
     }
 
     export class View extends OLComponent<ViewProps, any> {
         onCenterChanged(event: any): void;
         onResolutionChanged(event: any): void;
-        updateCenterAndResolutionFromProps_(props: ViewProps): void;
-        updateFromProps_(props: ViewProps, isMounting: boolean): void;
+    }
 
+    namespace OLProps {
+        export function Extent();
     }
 
     ///////
     ///////     CONTROL
     ///////
     export namespace control {
-        export const ScaleLineUnit = {
-            DEGREES: 'degrees',
-            IMPERIAL: 'imperial',
-            NAUTICAL: 'nautical',
-            METRIC: 'metric',
-            US: 'us'
-        }
-
-        export const ScaleLineUnits = [
-            'degrees',
-            'imperial',
-            'nautical',
-            'metric',
-            'us'
-        ]
+        type ScaleLineUnits = "degrees" | "imperial" | "nautical" | "metric" | "us";
 
         interface OLControlProps {
         }
-
         export class OLControl<P, S> extends OLComponent<P, S> {
         }
 
@@ -100,7 +85,6 @@ declare namespace __OLReact {
             tipLabel?: string;
 
         }
-
         export class Attribution extends OLControl<AttributionProps, any> {
         }
 
@@ -113,7 +97,6 @@ declare namespace __OLReact {
             tipLabel?: string;
 
         }
-
         export class FullScreen extends OLControl<FullScreenProps, any> {
         }
 
@@ -123,7 +106,6 @@ declare namespace __OLReact {
             projection?: ol.proj.Projection | string;
             undefinedHTML?: string;
         }
-
         export class MousePosition extends OLControl<MousePositionProps, any> {
         }
 
@@ -133,7 +115,7 @@ declare namespace __OLReact {
             collapseLabel?: string;
             collapsible?: boolean;
             label?: React.ReactNode;
-            layers?: ol.layer.Layer[] | ol.Collection;
+            layers?: ol.layer.Layer[] | ol.Collection<ol.layer.Layer>;
             tipLabel?: string;
             view?: ol.View;
         }
@@ -148,7 +130,6 @@ declare namespace __OLReact {
             resetNorth?: Function;
             tipLabel?: string;
         }
-
         export class Rotate extends OLControl<RotateProps, any> {
         }
 
@@ -157,7 +138,6 @@ declare namespace __OLReact {
             minWidth?: number;
             units?: ScaleLineUnits
         }
-
         export class ScaleLine extends OLControl<ScaleLineProps, any> {
         }
 
@@ -170,7 +150,6 @@ declare namespace __OLReact {
             zoomOutLabel?: React.ReactNode;
             zoomOutTipLabel?: string;
         }
-
         export class Zoom extends OLControl<ZoomProps, any> {
         }
 
@@ -180,17 +159,15 @@ declare namespace __OLReact {
             maxResolution?: number;
             minResolution?: number;
         }
-
         export class ZoomSlider extends OLControl<ZoomSliderProps, any> {
         }
 
         interface ZoomToExtentProps {
             className?: string;
-            extent?: OLPropTypes.Extent,
+            extent?: ol.Extent,
             label?: React.ReactNode;
             tipLabel?: string;
         }
-
         export class ZoomToExtent extends OLControl<ZoomToExtentProps, any> {
         }
     }
@@ -202,23 +179,141 @@ declare namespace __OLReact {
         interface LineStringProps {
             children?: number[][];
         }
-
         export class LineString extends OLComponent<LineStringProps, any> {
-            updateFromProps(props: LineStringProps): void;
+        }
+
+        interface PolygonProps {
+            children?: number[][];
+        }
+        export class Polygon extends OLComponent<PolygonProps, any> {
+        }
+
+        interface RawGeometryProps {
+            geometry: ol.geom.Geometry;
+        }
+        export class RawGeometry extends OLComponent<RawGeometryProps, any> {
         }
     }
 
+    ///////
+    ///////     INTERACTION
+    ///////
+
+    export namespace interaction {
+
+        interface OLInteractionProps {
+            active: boolean;
+        }
+        export class OLInteraction<P, S> extends OLComponent<P, S> { }
+
+        interface DoubleClickZoomProps extends OLInteractionProps {
+            delta?: number;
+            duration?: number;
+        }
+        export class DoubleClickZoom extends OLInteraction<DoubleClickZoomProps, any> { }
+
+        interface DragBoxProps extends OLInteractionProps {
+            boxdrag?: Function;
+            boxend?: Function;
+            boxstart?: Function;
+            condition?: Function;
+        }
+        export class DragBox extends OLInteraction<DragBoxProps, any> { }
+
+        interface DragPanProps extends OLInteractionProps {
+        }
+        export class DragPan extends OLInteraction<DragPanProps, any> { }
+
+        interface DragRotateProps extends OLInteractionProps {
+            condition?: Function;
+            duration?: number;
+        }
+        export class DragRotate extends OLInteraction<DragRotateProps, any> { }
+
+        interface DragRotateAndZoomProps extends OLInteractionProps {
+            condition?: Function,
+            duration?: number;
+        }
+        export class DragRotateAndZoom extends OLInteraction<DragRotateAndZoomProps, any> { }
+
+        interface DragZoomProps extends OLInteractionProps {
+            boxdrag?: Function;
+            boxend?: Function;
+            boxstart?: Function;
+            condition?: Function;
+            duration?: number;
+            out?: boolean;
+        }
+        export class DragZoom extends OLInteraction<DragZoomProps, any> { }
+
+        interface DrawProps extends OLInteractionProps {
+            drawend?: Function;
+            drawstart?: Function;
+            type: string;
+        }
+        export class Draw extends OLInteraction<DrawProps, any> { }
 
+        interface KeyboardPanProps extends OLInteractionProps {
+            condition?: Function;
+            duration?: number;
+            pixelDelta?: number;
+        }
+        export class KeyboardPan extends OLInteraction<KeyboardPanProps, any> { }
+
+        interface KeyboardZoomProps extends OLInteractionProps {
+            condition?: Function;
+            delta?: number;
+            duration?: number;
+        }
+        export class KeyboardZoom extends OLInteraction<KeyboardZoomProps, any> { }
+
+        interface ModifyProps extends OLInteractionProps {
+            condition?: Function;
+            modifyend?: Function;
+            modifystart?: Function;
+            features: ol.Collection<ol.Feature>;
+        }
+        export class Modify extends OLInteraction<ModifyProps, any> { }
+
+        interface MouseWheelZoomProps extends OLInteractionProps {
+            duration?: number;
+            useAnchor?: boolean;
+        }
+        export class MouseWheelZoom extends OLInteraction<MouseWheelZoomProps, any> { }
+
+        interface PinchRotateProps extends OLInteractionProps {
+            threshold?: number;
+            duration?: number;
+        }
+        export class PinchRotate extends OLInteraction<PinchRotateProps, any> { }
+
+        interface PinchZoomProps extends OLInteractionProps {
+            duration?: number;
+        }
+        export class PinchZoom extends OLInteraction<PinchZoomProps, any> { }
+
+        interface SelectProps extends OLInteractionProps {
+            condition?: Function;
+            select?: Function;
+        }
+        export class Select extends OLInteraction<SelectProps, any> { }
+    }
 
     ///////
     ///////     LAYER
     ///////
     export namespace layer {
-        interface TileProps {
+        interface ImageProps {
             visible?: boolean;
             zIndex?: number;
         }
+        export class Image extends OLContainer<ImageProps, any> {
+        }
 
+        interface TileProps {
+            visible?: boolean;
+            zIndex?: number;
+        }
         export class Tile extends OLContainer<TileProps, any> {
         }
 
@@ -237,6 +332,25 @@ declare namespace __OLReact {
     ///////     SOURCE
     ///////
     export namespace source {
+        interface BingMapsProps {
+            apiKey: string;
+        }
+        export class BingMaps extends OLComponent<BingMapsProps, any> {
+        }
+
+        interface ImageArcGISRestProps {
+            ratio?: number;
+            url: string;
+        }
+        export class ImageArcGISRest extends OLComponent<ImageArcGISRestProps, any> {
+        }
+        
+        interface MapQuestProps {
+            layer: string;
+        }
+        export class MapQuest extends OLComponent<MapQuestProps, any> {
+        }
+
         interface OSMProps {
         }
         export class OSM extends OLComponent<OSMProps, any> {
@@ -246,11 +360,5 @@ declare namespace __OLReact {
         }
         export class Vector extends OLComponent<VectorProps, any> {
         }
-
-        interface XYZProps {
-            url: string;
-        }
-        export class XYZ extends OLComponent<XYZProps, any> {
-        }
     }
 }
\ No newline at end of file

From 6029dd502f6b23dc0838491ffe4dae4a854f4121 Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Thu, 12 Jan 2017 15:04:52 +0100
Subject: [PATCH 03/36] Cleaned comments, updated meta information

---
 index.d.ts | 18 +-----------------
 1 file changed, 1 insertion(+), 17 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 8fb7332..46b3b94 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,6 +1,6 @@
 // Type definitions for ol-react 0.1.5
 // Project: https://github.com/richardhills/ol-react
-// Definitions by: Status Awareness Systems (http://statusas.com)
+// Definitions by: Jono Rogers (https://github.com/jonorogers), Status Awareness Systems (http://statusas.com)
 
 /// <reference types="react" />
 /// <reference types="openlayers" />
@@ -65,9 +65,6 @@ declare namespace __OLReact {
         export function Extent();
     }
 
-    ///////
-    ///////     CONTROL
-    ///////
     export namespace control {
         type ScaleLineUnits = "degrees" | "imperial" | "nautical" | "metric" | "us";
 
@@ -172,9 +169,6 @@ declare namespace __OLReact {
         }
     }
 
-    ///////
-    ///////     GEOM
-    ///////
     export namespace geom {
         interface LineStringProps {
             children?: number[][];
@@ -195,10 +189,6 @@ declare namespace __OLReact {
         }
     }
 
-    ///////
-    ///////     INTERACTION
-    ///////
-
     export namespace interaction {
 
         interface OLInteractionProps {
@@ -299,9 +289,6 @@ declare namespace __OLReact {
         export class Select extends OLInteraction<SelectProps, any> { }
     }
 
-    ///////
-    ///////     LAYER
-    ///////
     export namespace layer {
         interface ImageProps {
             visible?: boolean;
@@ -328,9 +315,6 @@ declare namespace __OLReact {
         }
     }
 
-    ///////
-    ///////     SOURCE
-    ///////
     export namespace source {
         interface BingMapsProps {
             apiKey: string;

From 8add1b38b321cccbf1af2332c5a28808ae22443c Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Thu, 12 Jan 2017 15:21:11 +0100
Subject: [PATCH 04/36] Fix: id prop on Feature is required.

---
 index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.d.ts b/index.d.ts
index 46b3b94..7762f47 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -27,7 +27,7 @@ declare namespace __OLReact {
     interface FeatureProps {
         style?: Object;
         children?: JSX.Element;
-        id?: any;
+        id: any;
     }
 
     export class Feature extends OLComponent<FeatureProps, any> {

From 13a2367e04513bccff1114ac956f85e780788928 Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Sat, 14 Jan 2017 16:11:13 +0100
Subject: [PATCH 05/36] Added source.xyz

---
 index.d.ts          |  7 +++++++
 src/source/index.js |  1 +
 src/source/xyz.js   | 23 +++++++++++++++++++++++
 3 files changed, 31 insertions(+)
 create mode 100644 src/source/xyz.js

diff --git a/index.d.ts b/index.d.ts
index 7762f47..60a66d7 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -344,5 +344,12 @@ declare namespace __OLReact {
         }
         export class Vector extends OLComponent<VectorProps, any> {
         }
+
+        interface XYZProps {
+            url?: string;
+            urls?: string[];
+        }
+        export class XYZ extends OLComponent<XYZProps, any> {
+        }
     }
 }
\ No newline at end of file
diff --git a/src/source/index.js b/src/source/index.js
index 1be483f..560df09 100644
--- a/src/source/index.js
+++ b/src/source/index.js
@@ -3,3 +3,4 @@ export {default as MapQuest} from './map-quest'
 export {default as OSM} from './osm'
 export {default as BingMaps} from './bingmaps'
 export {default as ImageArcGISRest} from './image-arcgis-rest'
+export {default as XYZ} from './xyz'
diff --git a/src/source/xyz.js b/src/source/xyz.js
new file mode 100644
index 0000000..6c1dca1
--- /dev/null
+++ b/src/source/xyz.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import ol from 'openlayers';
+import OLComponent from '../ol-component';
+
+export default class XYZ extends OLComponent {
+  constructor(props) {
+    super(props);
+    this.source = new ol.source.XYZ(this.props);
+  }
+
+  componentDidMount() {
+    this.context.layer.setSource(this.source);
+  }
+}
+
+XYZ.propTypes = {
+  url: React.PropTypes.string,
+  urls: React.PropTypes.arrayOf(React.PropTypes.string)
+}
+
+XYZ.contextTypes = {
+  layer: React.PropTypes.instanceOf(ol.layer.Base)
+}

From 1a969282e662df95c6877c2f1f86c19189166118 Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Tue, 17 Jan 2017 12:26:40 +0100
Subject: [PATCH 06/36] Added geom.Point

---
 index.d.ts        |  6 ++++++
 src/geom/index.js |  1 +
 src/geom/point.js | 35 +++++++++++++++++++++++++++++++++++
 3 files changed, 42 insertions(+)
 create mode 100644 src/geom/point.js

diff --git a/index.d.ts b/index.d.ts
index 7762f47..5fc5882 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -187,6 +187,12 @@ declare namespace __OLReact {
         }
         export class RawGeometry extends OLComponent<RawGeometryProps, any> {
         }
+
+        interface PointProps {
+            children?: number[];
+        }
+        export class Point extends OLComponent<PointProps, any> {
+        }
     }
 
     export namespace interaction {
diff --git a/src/geom/index.js b/src/geom/index.js
index 1b9f5a6..67cf3bc 100644
--- a/src/geom/index.js
+++ b/src/geom/index.js
@@ -1,3 +1,4 @@
 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';
diff --git a/src/geom/point.js b/src/geom/point.js
new file mode 100644
index 0000000..6c8993d
--- /dev/null
+++ b/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(this.props.children);
+  }
+
+  componentDidMount() {
+    this.context.feature.setGeometry(this.geometry);
+  }
+
+  componentWillReceiveProps(newProps) {
+    this.updateFromProps(newProps);
+  }
+
+  render() {
+    return false;
+  }
+}
+
+Point.propTypes = {
+  children: React.PropTypes.arrayOf(React.PropTypes.number).isRequired,
+}
+
+Point.contextTypes = {
+  feature: React.PropTypes.instanceOf(ol.Feature)
+}

From 3889140b7e33e903caf525b71bd8fa73021b59aa Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Tue, 17 Jan 2017 20:53:06 +0100
Subject: [PATCH 07/36] Allowed nesting of properties for styles

---
 README.md    | 17 ++++++++++++
 src/style.js | 74 ++++++++++++++++++++++++++++++++++++++++++++--------
 2 files changed, 80 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 73f0149..90cf0df 100644
--- a/README.md
+++ b/README.md
@@ -19,6 +19,23 @@ The goal is to be able to write applications using OpenLayers maps in a declarat
 
 To understand what each element does, read the [OpenLayers API documentation](http://openlayers.org/en/v3.11.2/apidoc/).
 
+### Styles
+
+Are declared using a JSON object, passing through the properties you'd like on the final object.
+
+When creating an Icon, Circle or RegularShape, a `type` parameter must be present, with the value of `icon`, `circle`, or `regular-shape`.
+
+Example:
+
+```
+image: {
+    type: 'circle',
+    radius: 10,
+    fill: { color: '#666666' },
+    stroke: { color: '#bada55', width: 1 }
+}
+```
+
 It's early days! If you're familiar with react and/or openlayers and are interested in helping, please get in touch. Available on [github](https://github.com/richardhills/ol-react) and [npm](https://www.npmjs.com/package/ol-react).
 
 I am especially interested in assistance with having each component be optionally [controlled](https://facebook.github.io/react/docs/forms.html#controlled-components). This would allow binding of the components with, say, Redux and for sophisticated state management outside of OpenLayers.
\ No newline at end of file
diff --git a/src/style.js b/src/style.js
index 566ca40..2388eb6 100644
--- a/src/style.js
+++ b/src/style.js
@@ -3,36 +3,88 @@ import ol from 'openlayers';
 const STYLE_KEY_FACTORIES = {
   geometry: (value) => new ol.style.Geometry(value),
   fill: (value) => new ol.style.Fill(value),
-  image: (value) => new ol.style.Image(value),
+  image: (value) => buildImage(value),
   stroke: (value) => new ol.style.Stroke(value),
-  text: (value) => new ol.style.Text(value),
+  text: (value) => buildText(value),
   zIndex: (value) => value
 };
 
 export function buildStyle(style) {
-  if(!style) {
+  if (!style) {
     return null;
   }
 
-  if(Array.isArray(style)) {
+  if (Array.isArray(style)) {
     return style.map(buildStyle);
   }
 
-  if(typeof style === "function") {
+  if (typeof style === "function") {
     return style;
   }
 
-  if(ol.style.Style.prototype.isPrototypeOf(style)) {
+  if (ol.style.Style.prototype.isPrototypeOf(style)) {
     return style;
   }
 
   const result = {};
 
-  Object.keys(STYLE_KEY_FACTORIES)
-        .filter((key) => !!style[key])
-        .forEach((key) => {
-    result[key] = STYLE_KEY_FACTORIES[key](style[key]);
-  });
+  evaluateKeys(style, result);
 
   return new ol.style.Style(result);
 }
+
+function evaluateKeys(style, result) {
+  Object.keys(STYLE_KEY_FACTORIES)
+    .filter((key) => !!style[key])
+    .forEach((key) => {
+      result[key] = STYLE_KEY_FACTORIES[key](style[key]);
+    });
+
+  return result;
+}
+
+function buildText(style) {
+  if (!style) {
+    return null;
+  }
+
+  if (typeof style === "function") {
+    return style;
+  }
+
+  // Prevent an infinite loop..
+  let textContent = style.text;
+  delete style.text;
+
+  let textStyle = style;
+
+  evaluateKeys(style, textStyle);
+
+  textStyle.text = textContent;
+
+  return new ol.style.Text(textStyle);
+}
+
+function buildImage(style) {
+  if (!style) {
+    return null;
+  }
+
+  if (typeof style === "function") {
+    return style;
+  }
+
+  var imageStyle = style;
+
+  evaluateKeys(style, imageStyle);
+
+  switch (style.type) {
+    case 'circle':
+      return new ol.style.Circle(imageStyle);
+    case 'icon':
+      return new ol.style.Icon(imageStyle);
+    case 'regular-shape':
+      return new ol.style.RegularShape(imageStyle);
+  }
+}
+

From 9089be0a0b75333dd4e7316fee7cdd1f0bfa9991 Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Tue, 17 Jan 2017 20:53:43 +0100
Subject: [PATCH 08/36] Cleaned render function

---
 src/geom/point.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/geom/point.js b/src/geom/point.js
index 6c8993d..2ec7eba 100644
--- a/src/geom/point.js
+++ b/src/geom/point.js
@@ -20,10 +20,6 @@ export default class Point extends OLComponent {
   componentWillReceiveProps(newProps) {
     this.updateFromProps(newProps);
   }
-
-  render() {
-    return false;
-  }
 }
 
 Point.propTypes = {

From 08fbce963943ff6e6a851dbd82b84d16aaa6d947 Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Thu, 19 Jan 2017 19:06:42 +0100
Subject: [PATCH 09/36] Fix interaction prop, active should be nullable as
 default is set by react.

---
 index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.d.ts b/index.d.ts
index e190fbc..fc62f66 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -198,7 +198,7 @@ declare namespace __OLReact {
     export namespace interaction {
 
         interface OLInteractionProps {
-            active: boolean;
+            active?: boolean;
         }
         export class OLInteraction<P, S> extends OLComponent<P, S> { }
 

From 0959fa4f8f03a2d889c140e652b6e1cf951fc0eb Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Sun, 29 Jan 2017 18:56:22 +0100
Subject: [PATCH 10/36] Changed the view to be a controlled component

---
 index.d.ts  |  1 +
 src/view.js | 58 ++++++++++++++++++++++++++---------------------------
 2 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index fc62f66..c37e833 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -53,6 +53,7 @@ declare namespace __OLReact {
         center: number[];
         resolution?: number;
         zoom?: number;
+        rotation?: number;
         onNavigation?: Function;
     }
 
diff --git a/src/view.js b/src/view.js
index 941d2e7..b25d53b 100644
--- a/src/view.js
+++ b/src/view.js
@@ -6,25 +6,27 @@ export default class View extends OLComponent {
   constructor(props) {
     super(props);
     this.view = new ol.View();
-    //this.view.on("change:center", this.onCenterChanged, this);
-    //this.view.on("change:resolution", this.onResolutionChanged, this);
   }
 
-  onCenterChanged (event) {
-    this.props.onNavigation({
-      center: this.view.getCenter()
-    })
+  onMoveEnd(event) {
+    if (this.props.onNavigation) {
+      this.props.onNavigation({
+        center: this.view.getCenter(),
+        resolution: this.view.getResolution(),
+        zoom: this.view.getZoom(),
+        rotation: this.view.getRotation()
+      });
+    }
   }
 
-  onResolutionChanged (event) {
-    this.props.onNavigation({
-      resolution: this.view.getResolution()
-    })
-    return true
-  }
+  updateFromProps_(props) {
+    if (typeof props.center !== 'undefined') {
+      this.view.setCenter(props.center);
+    }
+    if (typeof props.rotation !== 'undefined') {
+      this.view.setRotation(props.rotation);
+    }
 
-  updateCenterAndResolutionFromProps_ (props) {
-    this.view.setCenter(props.center);
     if (typeof props.resolution !== 'undefined') {
       this.view.setResolution(props.resolution);
     } else if (typeof props.zoom !== 'undefined') {
@@ -32,29 +34,25 @@ export default class View extends OLComponent {
     }
   }
 
-  updateFromProps_ (props, isMounting) {
-    if (isMounting) {
-      // Update the center and the resolution of the view only when it is
-      // mounted the first time but not when the properties are updated
-      this.updateCenterAndResolutionFromProps_(props)
-    }
-  }
+  componentDidMount() {
+    this.context.map.setView(this.view);
+    this.updateFromProps_(this.props);
 
-  componentDidMount () {
-    this.context.map.setView(this.view)
-    this.updateFromProps_(this.props, /* isMounting = */ true)
+    this.context.map.on("moveend", this.onMoveEnd, this);
   }
 
-  componentWillReceiveProps (newProps) {
-    this.updateFromProps_(newProps);
+  componentWillReceiveProps(props) {
+    this.updateFromProps_(props);
   }
 }
 
 View.propTypes = {
-	center: React.PropTypes.arrayOf(React.PropTypes.number).isRequired,
-	resolution: React.PropTypes.number,
-	zoom: React.PropTypes.number,
-	onNavigation: React.PropTypes.func
+  center: React.PropTypes.arrayOf(React.PropTypes.number).isRequired,
+  resolution: React.PropTypes.number,
+  zoom: React.PropTypes.number,
+  onResolutionChanged: React.PropTypes.func,
+  onZoomChanged: React.PropTypes.func,
+  onCenterChanged: React.PropTypes.func
 }
 
 View.contextTypes = {

From e18faf3f4805381914e493578f1be1026f8b3562 Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Sun, 29 Jan 2017 18:56:35 +0100
Subject: [PATCH 11/36] Updated openlayers version to 3.20.1

---
 package.json | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 066f9eb..d1d269b 100644
--- a/package.json
+++ b/package.json
@@ -3,14 +3,12 @@
   "version": "0.1.5",
   "description": "React interface for openlayers",
   "main": "lib/index.js",
-  "scripts": {
-  },
-  "author": "richard.hills@gmail.com",
   "scripts": {
     "compile": "babel -d lib/ src/",
     "prepublish": "npm run compile",
     "postinstall": "node scripts/postinstall.js"
   },
+  "author": "richard.hills@gmail.com",
   "devDependencies": {
     "babel": "^4.6.0",
     "babel-loader": "^6.2.0",
@@ -22,6 +20,6 @@
     "react-dom": "^15.0.1"
   },
   "dependencies": {
-    "openlayers": "^3.16.0"
+    "openlayers": "^3.20.1"
   }
 }

From f9fdba491a7649439188817b3e2ebe8e18b47f23 Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Sun, 29 Jan 2017 19:40:36 +0100
Subject: [PATCH 12/36] Updated source.bingmaps with required parameter.

---
 index.d.ts             | 1 +
 src/source/bingmaps.js | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index c37e833..424b647 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -325,6 +325,7 @@ declare namespace __OLReact {
     export namespace source {
         interface BingMapsProps {
             apiKey: string;
+            imagerySet: string;
         }
         export class BingMaps extends OLComponent<BingMapsProps, any> {
         }
diff --git a/src/source/bingmaps.js b/src/source/bingmaps.js
index 02b1f4e..10b814b 100644
--- a/src/source/bingmaps.js
+++ b/src/source/bingmaps.js
@@ -8,7 +8,7 @@ export default class BingMaps extends OLComponent {
     spreadedProps.key = spreadedProps.apiKey
     delete spreadedProps.apiKey
 
-    super(props)
+    super(props);
 
     this.source = new ol.source.BingMaps(spreadedProps)
   }
@@ -19,7 +19,8 @@ export default class BingMaps extends OLComponent {
 }
 
 BingMaps.propTypes = {
-  apiKey: React.PropTypes.string.isRequired
+  apiKey: React.PropTypes.string.isRequired,
+  imagerySet: React.PropTypes.string.isRequired
 }
 
 BingMaps.contextTypes = {

From 00966bb07288aaa176f7d288f2458dbf6f886556 Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Thu, 2 Feb 2017 14:32:06 +0100
Subject: [PATCH 13/36] Added overlay

---
 index.d.ts     | 18 +++++++++++---
 src/index.js   |  1 +
 src/map.js     |  3 ++-
 src/overlay.js | 66 ++++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 84 insertions(+), 4 deletions(-)
 create mode 100644 src/overlay.js

diff --git a/index.d.ts b/index.d.ts
index 424b647..e9112c5 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -15,6 +15,7 @@ declare module "ol-react" {
     export import Feature = __OLReact.Feature;
     export import Map = __OLReact.Map;
     export import View = __OLReact.View;
+    export import Overlay = __OLReact.Overlay;
 }
 
 declare namespace __OLReact {
@@ -58,8 +59,19 @@ declare namespace __OLReact {
     }
 
     export class View extends OLComponent<ViewProps, any> {
-        onCenterChanged(event: any): void;
-        onResolutionChanged(event: any): void;
+    }
+
+    interface OverlayProps {
+        id: number | string;
+        element?: JSX.Element;
+        offset?: number[];
+        position?: number[];
+        positioning?: string;
+        stopEvent?: boolean;
+        insertFirst?: boolean;
+    }
+
+    export class Overlay extends OLComponent<OverlayProps, any> {
     }
 
     namespace OLProps {
@@ -336,7 +348,7 @@ declare namespace __OLReact {
         }
         export class ImageArcGISRest extends OLComponent<ImageArcGISRestProps, any> {
         }
-        
+
         interface MapQuestProps {
             layer: string;
         }
diff --git a/src/index.js b/src/index.js
index e8a2518..c5b020d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -9,5 +9,6 @@ export { control, geom, interaction, layer, source };
 export {default as Feature} from './feature';
 export {default as Map} from './map';
 export {default as View} from './view';
+export {default as Overlay} from './overlay';
 
 export { default as openlayers} from 'openlayers';
diff --git a/src/map.js b/src/map.js
index e2b6591..57b5766 100644
--- a/src/map.js
+++ b/src/map.js
@@ -9,7 +9,8 @@ export default class Map extends React.Component {
       loadTilesWhileAnimating: props.loadTilesWhileAnimating,
       loadTilesWhileInteracting: props.loadTilesWhileInteracting,
       interactions: props.useDefaultInteractions ? ol.interaction.defaults() : [],
-      controls: props.useDefaultControls ? ol.control.defaults() : []
+      controls: props.useDefaultControls ? ol.control.defaults() : [],
+      overlays: []
     })
 
     if (props.onChangeSize) {
diff --git a/src/overlay.js b/src/overlay.js
new file mode 100644
index 0000000..afa137e
--- /dev/null
+++ b/src/overlay.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import ReactDOM from 'react-dom'
+import ol from 'openlayers';
+import OLComponent from './ol-component';
+
+export default class Overlay extends OLComponent {
+  constructor(props) {
+    super(props);
+    this.overlay = new ol.Overlay({
+      id: props.id,
+      offset: props.offset,
+      position: props.position,
+      positioning: props.positioning,
+      stopEvent: props.stopEvent,
+      insertFirst: props.insertFirst
+    });
+  }
+
+
+  updateFromProps_(props) {
+
+    if (typeof props.element !== 'undefined') {
+      if (typeof this.element !== 'undefined') {
+        this.element.remove();
+      }
+      this.element = document.createElement("div");
+      ReactDOM.render(props.element, this.element);
+      this.overlay.setElement(this.element);
+    }
+    if (typeof props.offset !== 'undefined') {
+      this.overlay.setOffset(props.offset);
+    }
+    if (typeof props.position !== 'undefined') {
+      this.overlay.setPosition(props.position);
+    }
+    if (typeof props.positioning !== 'undefined') {
+      this.overlay.setPositioning(props.positioning);
+    }
+  }
+
+  componentDidMount() {
+    this.context.map.addOverlay(this.overlay);
+    this.updateFromProps_(this.props);
+  }
+
+  componentWillReceiveProps(props) {
+    this.updateFromProps_(props);
+  }
+}
+
+Overlay.propTypes = {
+  id: React.PropTypes.oneOfType([
+    React.PropTypes.number,
+    React.PropTypes.string
+  ]),
+  element: React.PropTypes.element,
+  offset: React.PropTypes.arrayOf(React.PropTypes.number),
+  position: React.PropTypes.arrayOf(React.PropTypes.number),
+  positioning: React.PropTypes.string,
+  stopEvent: React.PropTypes.bool,
+  insertFirst: React.PropTypes.bool
+}
+
+Overlay.contextTypes = {
+  map: React.PropTypes.instanceOf(ol.Map)
+}

From f5b9d38eafc73e773823d2585b918369c2301fbf Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Fri, 17 Feb 2017 11:39:54 +0100
Subject: [PATCH 14/36] Updated babel to 6. Updated openlayers to v4. Updated
 other packages to latest.

---
 package.json | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index d1d269b..c309a8d 100644
--- a/package.json
+++ b/package.json
@@ -4,22 +4,24 @@
   "description": "React interface for openlayers",
   "main": "lib/index.js",
   "scripts": {
-    "compile": "babel -d lib/ src/",
+    "compile": "babel -d lib/ src/ --presets react",
+    "watch": "babel -d lib/ src/ --watch --presets react",
     "prepublish": "npm run compile",
     "postinstall": "node scripts/postinstall.js"
   },
   "author": "richard.hills@gmail.com",
   "devDependencies": {
-    "babel": "^4.6.0",
-    "babel-loader": "^6.2.0",
-    "react": "^15.0.1",
-    "react-dom": "^15.0.1"
+    "babel-cli": "^6.23.0",
+    "babel-loader": "^6.3.2",
+    "babel-preset-react": "^6.23.0",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2"
   },
   "peerDependencies": {
-    "react": "^15.0.1",
-    "react-dom": "^15.0.1"
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2"
   },
   "dependencies": {
-    "openlayers": "^3.20.1"
+    "openlayers": "^4.0.1"
   }
 }

From 0abbd085aa6843f17b95a24c170ca7861e6e67d5 Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Fri, 17 Feb 2017 18:09:50 +0100
Subject: [PATCH 15/36] Exposed getGeometry on Feature

---
 src/feature.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/feature.js b/src/feature.js
index da797da..7c99189 100644
--- a/src/feature.js
+++ b/src/feature.js
@@ -32,6 +32,10 @@ export default class Feature extends OLComponent {
   componentWillUnmount() {
     this.context.source.removeFeature(this.feature);
   }
+
+  getGeometry() {
+    return this.feature.getGeometry();
+  }
 }
 
 Feature.propTypes = {

From e3cf170855c7047fecea1ab31f8a675cfacda399 Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Fri, 17 Feb 2017 18:10:23 +0100
Subject: [PATCH 16/36] Cleaned geometries

---
 src/geom/line-string.js | 4 ++++
 src/geom/point.js       | 4 ++++
 src/geom/polygon.js     | 4 ++--
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/geom/line-string.js b/src/geom/line-string.js
index 73ecfdc..700c26a 100644
--- a/src/geom/line-string.js
+++ b/src/geom/line-string.js
@@ -20,6 +20,10 @@ export default class LineString extends OLComponent {
   componentWillReceiveProps(newProps) {
     this.updateFromProps(newProps);
   }
+
+  render() {
+    return false;
+  }
 }
 
 LineString.propTypes = {
diff --git a/src/geom/point.js b/src/geom/point.js
index 2ec7eba..87e6bb4 100644
--- a/src/geom/point.js
+++ b/src/geom/point.js
@@ -20,6 +20,10 @@ export default class Point extends OLComponent {
   componentWillReceiveProps(newProps) {
     this.updateFromProps(newProps);
   }
+  
+  render() {
+    return false;
+  }
 }
 
 Point.propTypes = {
diff --git a/src/geom/polygon.js b/src/geom/polygon.js
index ada66f6..bb5fcb6 100644
--- a/src/geom/polygon.js
+++ b/src/geom/polygon.js
@@ -10,7 +10,7 @@ export default class Polygon extends OLComponent {
   }
 
   updateFromProps(props) {
-    this.geometry.setCoordinates([this.props.children]);
+    this.geometry.setCoordinates([props.children]);
   }
 
   componentDidMount() {
@@ -20,7 +20,7 @@ export default class Polygon extends OLComponent {
   componentWillReceiveProps(newProps) {
     this.updateFromProps(newProps);
   }
-
+  
   render() {
     return false;
   }

From 32ddee4638f02ae1f7b38fe0a5f7facb7f474711 Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Fri, 17 Feb 2017 18:11:00 +0100
Subject: [PATCH 17/36] Reworked view to take default parameters, and exposed
 the fit method

---
 src/view.js | 46 ++++++++++++++++++++++++++++++++++------------
 1 file changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/view.js b/src/view.js
index b25d53b..8290daf 100644
--- a/src/view.js
+++ b/src/view.js
@@ -5,7 +5,13 @@ import OLComponent from './ol-component';
 export default class View extends OLComponent {
   constructor(props) {
     super(props);
-    this.view = new ol.View();
+    var opts = {
+      center: props.initialCenter,
+      resolution: props.initialResolution,
+      zoom: props.initialZoom,
+      rotation: props.initialRotation
+    };
+    this.view = new ol.View(opts);
   }
 
   onMoveEnd(event) {
@@ -19,18 +25,18 @@ export default class View extends OLComponent {
     }
   }
 
-  updateFromProps_(props) {
-    if (typeof props.center !== 'undefined') {
-      this.view.setCenter(props.center);
+  updateFromProps_(nextProps) {
+    if (typeof nextProps.center !== 'undefined') {
+      this.view.setCenter(nextProps.center);
     }
-    if (typeof props.rotation !== 'undefined') {
-      this.view.setRotation(props.rotation);
+    if (typeof nextProps.rotation !== 'undefined') {
+      this.view.setRotation(nextProps.rotation);
     }
 
-    if (typeof props.resolution !== 'undefined') {
-      this.view.setResolution(props.resolution);
-    } else if (typeof props.zoom !== 'undefined') {
-      this.view.setZoom(props.zoom);
+    if (typeof nextProps.resolution !== 'undefined') {
+      this.view.setResolution(nextProps.resolution);
+    } else if (typeof nextProps.zoom !== 'undefined') {
+      this.view.setZoom(nextProps.zoom);
     }
   }
 
@@ -44,15 +50,31 @@ export default class View extends OLComponent {
   componentWillReceiveProps(props) {
     this.updateFromProps_(props);
   }
+
+  fit(geometry, options) {
+    this.view.fit(geometry, options);
+  }
 }
 
 View.propTypes = {
-  center: React.PropTypes.arrayOf(React.PropTypes.number).isRequired,
+  center: React.PropTypes.arrayOf(React.PropTypes.number),
   resolution: React.PropTypes.number,
   zoom: React.PropTypes.number,
+  rotation: React.PropTypes.number,
+  initialCenter: React.PropTypes.arrayOf(React.PropTypes.number),
+  initialResolution: React.PropTypes.number,
+  initialZoom: React.PropTypes.number,
+  initialRotation: React.PropTypes.number,
   onResolutionChanged: React.PropTypes.func,
   onZoomChanged: React.PropTypes.func,
-  onCenterChanged: React.PropTypes.func
+  onCenterChanged: React.PropTypes.func,
+}
+
+View.defaultProps = {
+  initialCenter: [0, 0],
+  initialResolution: 10000,
+  initialZoom: 10,
+  initialRotation: 0
 }
 
 View.contextTypes = {

From 970325a1694a24b8c4ef36c2380c559867e40dfa Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Fri, 17 Feb 2017 18:11:26 +0100
Subject: [PATCH 18/36] Updated typescript definitions to match latest changes

---
 index.d.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/index.d.ts b/index.d.ts
index e9112c5..12eca4b 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -32,6 +32,7 @@ declare namespace __OLReact {
     }
 
     export class Feature extends OLComponent<FeatureProps, any> {
+        getGeometry() : ol.geom.Geometry;
     }
 
     interface MapProps {
@@ -51,14 +52,19 @@ declare namespace __OLReact {
     }
 
     interface ViewProps {
-        center: number[];
+        center?: number[];
         resolution?: number;
         zoom?: number;
         rotation?: number;
+        initialCenter?: number[];
+        initialResolution?: number;
+        initialZoom?: number;
+        initialRotation?: number;
         onNavigation?: Function;
     }
 
     export class View extends OLComponent<ViewProps, any> {
+        fit(geometry: ol.geom.Geometry | ol.Extent, options?: Object): void;
     }
 
     interface OverlayProps {

From 28699b9cae943f3e21864b7fdd999cb48eac339f Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Wed, 22 Mar 2017 15:36:48 +1100
Subject: [PATCH 19/36] Fix for map not correctly resizing to 100%, passing
 style prop down correctly in typescript definition

---
 index.d.ts  |  6 +++++-
 src/map.js  | 14 +++++++-------
 src/view.js |  4 ++++
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 12eca4b..8a942f5 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -32,7 +32,9 @@ declare namespace __OLReact {
     }
 
     export class Feature extends OLComponent<FeatureProps, any> {
-        getGeometry() : ol.geom.Geometry;
+        getGeometry(): ol.geom.Geometry;
+
+        feature: ol.Feature;
     }
 
     interface MapProps {
@@ -45,6 +47,7 @@ declare namespace __OLReact {
         useDefaultControls?: boolean;
         focusOnMount?: boolean;
         children?: JSX.Element | JSX.Element[];
+        style?: React.CSSProperties;
     }
 
     export class Map extends React.Component<MapProps, any> {
@@ -64,6 +67,7 @@ declare namespace __OLReact {
     }
 
     export class View extends OLComponent<ViewProps, any> {
+        animate(options: any);
         fit(geometry: ol.geom.Geometry | ol.Extent, options?: Object): void;
     }
 
diff --git a/src/map.js b/src/map.js
index 57b5766..0f45d99 100644
--- a/src/map.js
+++ b/src/map.js
@@ -3,7 +3,7 @@ import ol from 'openlayers';
 import OLComponent from './ol-component';
 
 export default class Map extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
     this.map = new ol.Map({
       loadTilesWhileAnimating: props.loadTilesWhileAnimating,
@@ -21,7 +21,7 @@ export default class Map extends React.Component {
     }
   }
 
-  componentDidMount () {
+  componentDidMount() {
     this.map.setTarget(this.refs.target)
 
     if (this.props.focusOnMount) {
@@ -29,20 +29,20 @@ export default class Map extends React.Component {
     }
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     this.map.setTarget(undefined)
   }
 
-  getChildContext () {
+  getChildContext() {
     return {
       map: this.map
     }
   }
 
-  render () {
+  render() {
     return (
       <div style={this.props.style}>
-        <div ref="target">
+        <div ref="target" style={{ width: '100%', height: '100%' }}>
         </div>
         <div>
           {this.props.children}
@@ -52,7 +52,7 @@ export default class Map extends React.Component {
     )
   }
 
-  focus () {
+  focus() {
     const viewport = this.map.getViewport()
     viewport.tabIndex = 0
     viewport.focus()
diff --git a/src/view.js b/src/view.js
index 8290daf..d12977f 100644
--- a/src/view.js
+++ b/src/view.js
@@ -51,6 +51,10 @@ export default class View extends OLComponent {
     this.updateFromProps_(props);
   }
 
+  animate(options) {
+    this.view.animate(options);
+  }
+
   fit(geometry, options) {
     this.view.fit(geometry, options);
   }

From b2d179d614ce9cb4d1c48d0bb224d57114ac02f5 Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Mon, 10 Apr 2017 15:42:31 +0100
Subject: [PATCH 20/36] Added getSize to map, fixed View.fit parameters

---
 index.d.ts  | 3 ++-
 src/map.js  | 4 ++++
 src/view.js | 4 ++--
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 8a942f5..eb803f8 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -52,6 +52,7 @@ declare namespace __OLReact {
 
     export class Map extends React.Component<MapProps, any> {
         focus(): void;
+        getSize(): ol.Size;
     }
 
     interface ViewProps {
@@ -68,7 +69,7 @@ declare namespace __OLReact {
 
     export class View extends OLComponent<ViewProps, any> {
         animate(options: any);
-        fit(geometry: ol.geom.Geometry | ol.Extent, options?: Object): void;
+        fit(geometry: ol.geom.Geometry | ol.Extent, size: ol.Size, options?: Object): void;
     }
 
     interface OverlayProps {
diff --git a/src/map.js b/src/map.js
index 0f45d99..3b3d8e2 100644
--- a/src/map.js
+++ b/src/map.js
@@ -57,6 +57,10 @@ export default class Map extends React.Component {
     viewport.tabIndex = 0
     viewport.focus()
   }
+
+  getSize() {
+    return this.map.getSize()
+  }
 }
 
 Map.propTypes = {
diff --git a/src/view.js b/src/view.js
index d12977f..3434521 100644
--- a/src/view.js
+++ b/src/view.js
@@ -55,8 +55,8 @@ export default class View extends OLComponent {
     this.view.animate(options);
   }
 
-  fit(geometry, options) {
-    this.view.fit(geometry, options);
+  fit(geometry, size, options) {
+    this.view.fit(geometry, size, options);
   }
 }
 

From 3c2946af791548488fb66c1acbcbe941e65f2bcf Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Tue, 18 Apr 2017 14:51:10 +0100
Subject: [PATCH 21/36] Cleaning up some of the work in View around
 controlled/uncontrolled components

---
 index.d.ts  | 18 +++++++++---------
 src/view.js | 23 ++++++++++++-----------
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index eb803f8..4ac5fec 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -64,7 +64,7 @@ declare namespace __OLReact {
         initialResolution?: number;
         initialZoom?: number;
         initialRotation?: number;
-        onNavigation?: Function;
+        onNavigation?(center: number[], resolution: number, zoom: number, rotation: number): void
     }
 
     export class View extends OLComponent<ViewProps, any> {
@@ -236,7 +236,7 @@ declare namespace __OLReact {
             boxdrag?: Function;
             boxend?: Function;
             boxstart?: Function;
-            condition?: Function;
+            condition?: ol.EventsConditionType;
         }
         export class DragBox extends OLInteraction<DragBoxProps, any> { }
 
@@ -245,13 +245,13 @@ declare namespace __OLReact {
         export class DragPan extends OLInteraction<DragPanProps, any> { }
 
         interface DragRotateProps extends OLInteractionProps {
-            condition?: Function;
+            condition?: ol.EventsConditionType;
             duration?: number;
         }
         export class DragRotate extends OLInteraction<DragRotateProps, any> { }
 
         interface DragRotateAndZoomProps extends OLInteractionProps {
-            condition?: Function,
+            condition?: ol.EventsConditionType,
             duration?: number;
         }
         export class DragRotateAndZoom extends OLInteraction<DragRotateAndZoomProps, any> { }
@@ -260,7 +260,7 @@ declare namespace __OLReact {
             boxdrag?: Function;
             boxend?: Function;
             boxstart?: Function;
-            condition?: Function;
+            condition?: ol.EventsConditionType;
             duration?: number;
             out?: boolean;
         }
@@ -274,21 +274,21 @@ declare namespace __OLReact {
         export class Draw extends OLInteraction<DrawProps, any> { }
 
         interface KeyboardPanProps extends OLInteractionProps {
-            condition?: Function;
+            condition?: ol.EventsConditionType;
             duration?: number;
             pixelDelta?: number;
         }
         export class KeyboardPan extends OLInteraction<KeyboardPanProps, any> { }
 
         interface KeyboardZoomProps extends OLInteractionProps {
-            condition?: Function;
+            condition?: ol.EventsConditionType;
             delta?: number;
             duration?: number;
         }
         export class KeyboardZoom extends OLInteraction<KeyboardZoomProps, any> { }
 
         interface ModifyProps extends OLInteractionProps {
-            condition?: Function;
+            condition?: ol.EventsConditionType;
             modifyend?: Function;
             modifystart?: Function;
             features: ol.Collection<ol.Feature>;
@@ -313,7 +313,7 @@ declare namespace __OLReact {
         export class PinchZoom extends OLInteraction<PinchZoomProps, any> { }
 
         interface SelectProps extends OLInteractionProps {
-            condition?: Function;
+            condition?: ol.EventsConditionType;
             select?: Function;
         }
         export class Select extends OLInteraction<SelectProps, any> { }
diff --git a/src/view.js b/src/view.js
index 3434521..b1696ac 100644
--- a/src/view.js
+++ b/src/view.js
@@ -8,20 +8,21 @@ export default class View extends OLComponent {
     var opts = {
       center: props.initialCenter,
       resolution: props.initialResolution,
+      rotation: props.initialRotation,
       zoom: props.initialZoom,
-      rotation: props.initialRotation
     };
     this.view = new ol.View(opts);
   }
 
   onMoveEnd(event) {
-    if (this.props.onNavigation) {
-      this.props.onNavigation({
-        center: this.view.getCenter(),
-        resolution: this.view.getResolution(),
-        zoom: this.view.getZoom(),
-        rotation: this.view.getRotation()
-      });
+    if (this.props.onNavigation && this.props.initialCenter[0] !== this.view.getCenter()[0]) {
+      // Don't fire an event unless we've actually moved from initial location
+      this.props.onNavigation(
+        this.view.getCenter(),
+        this.view.getResolution(),
+        this.view.getZoom(),
+        this.view.getRotation()
+      );
     }
   }
 
@@ -32,8 +33,8 @@ export default class View extends OLComponent {
     if (typeof nextProps.rotation !== 'undefined') {
       this.view.setRotation(nextProps.rotation);
     }
-
-    if (typeof nextProps.resolution !== 'undefined') {
+    // Set either Resolution OR zoom, but guard against 0 (will cause map to not render)
+    if (typeof nextProps.resolution !== 'undefined' && nextProps.resolution !== 0) {
       this.view.setResolution(nextProps.resolution);
     } else if (typeof nextProps.zoom !== 'undefined') {
       this.view.setZoom(nextProps.zoom);
@@ -77,7 +78,7 @@ View.propTypes = {
 View.defaultProps = {
   initialCenter: [0, 0],
   initialResolution: 10000,
-  initialZoom: 10,
+  initialZoom: 0,
   initialRotation: 0
 }
 

From ab52b11344c3e8ab27ec5270e93c23ba4b6f3c69 Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Fri, 21 Apr 2017 06:49:43 +1000
Subject: [PATCH 22/36] Upgraded to react 15.5.4, changed to prop-types

---
 package.json                            |  4 +++-
 src/control/attribution.js              | 13 ++++++------
 src/control/full-screen.js              | 17 ++++++++--------
 src/control/mouse-position.js           | 13 ++++++------
 src/control/ol-control.js               |  3 ++-
 src/control/overview-map.js             | 21 ++++++++++---------
 src/control/rotate.js                   | 13 ++++++------
 src/control/scale-line.js               |  7 ++++---
 src/control/zoom-slider.js              |  9 +++++----
 src/control/zoom-to-extent.js           |  7 ++++---
 src/control/zoom.js                     | 15 +++++++-------
 src/feature.js                          | 11 +++++-----
 src/geom/line-string.js                 |  7 ++++---
 src/geom/point.js                       |  5 +++--
 src/geom/polygon.js                     |  7 ++++---
 src/geom/raw-geometry.js                |  5 +++--
 src/interaction/double-click-zoom.js    |  5 +++--
 src/interaction/drag-box.js             |  9 +++++----
 src/interaction/drag-rotate-and-zoom.js |  5 +++--
 src/interaction/drag-rotate.js          |  5 +++--
 src/interaction/drag-zoom.js            | 13 ++++++------
 src/interaction/draw.js                 |  7 ++++---
 src/interaction/keyboard-pan.js         |  7 ++++---
 src/interaction/keyboard-zoom.js        |  7 ++++---
 src/interaction/modify.js               |  9 +++++----
 src/interaction/mouse-wheel-zoom.js     |  5 +++--
 src/interaction/ol-interaction.js       |  5 +++--
 src/interaction/pinch-rotate.js         |  5 +++--
 src/interaction/pinch-zoom.js           |  3 ++-
 src/interaction/select.js               |  5 +++--
 src/layer/image.js                      |  9 +++++----
 src/layer/tile.js                       |  9 +++++----
 src/layer/vector.js                     | 27 +++++++++++++------------
 src/map.js                              | 25 ++++++++++++-----------
 src/ol-proptypes.js                     |  6 +-----
 src/overlay.js                          | 21 ++++++++++---------
 src/source/bingmaps.js                  |  7 ++++---
 src/source/image-arcgis-rest.js         | 11 +++++-----
 src/source/map-quest.js                 |  5 +++--
 src/source/osm.js                       |  3 ++-
 src/source/vector.js                    |  7 ++++---
 src/source/xyz.js                       |  7 ++++---
 src/view.js                             | 25 ++++++++++++-----------
 43 files changed, 224 insertions(+), 185 deletions(-)

diff --git a/package.json b/package.json
index c309a8d..27f3991 100644
--- a/package.json
+++ b/package.json
@@ -23,5 +23,7 @@
   },
   "dependencies": {
     "openlayers": "^4.0.1"
-  }
+  },
+  "repository": "https://github.com/statusas/ol-react.git",
+  "license": "MIT"
 }
diff --git a/src/control/attribution.js b/src/control/attribution.js
index 1e771fd..993626e 100644
--- a/src/control/attribution.js
+++ b/src/control/attribution.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLControl from './ol-control';
@@ -16,10 +17,10 @@ export default class Attribution extends OLControl {
 }
 
 Attribution.propTypes = Object.assign({}, OLControl.propTypes, {
-  className: React.PropTypes.string,
-  collapsed: React.PropTypes.bool,
-  collapseLabel: React.PropTypes.string,
-  collapsible: React.PropTypes.bool,
-  label: React.PropTypes.node,
-  tipLabel: React.PropTypes.string
+  className: PropTypes.string,
+  collapsed: PropTypes.bool,
+  collapseLabel: PropTypes.string,
+  collapsible: PropTypes.bool,
+  label: PropTypes.node,
+  tipLabel: PropTypes.string
 })
diff --git a/src/control/full-screen.js b/src/control/full-screen.js
index 8e98515..dc0475d 100644
--- a/src/control/full-screen.js
+++ b/src/control/full-screen.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLControl from './ol-control';
@@ -16,13 +17,13 @@ export default class FullScreen extends OLControl {
 }
 
 FullScreen.propTypes = Object.assign({}, OLControl.propTypes, {
-  className: React.PropTypes.string,
-  keys: React.PropTypes.bool,
-  label: React.PropTypes.node,
-  labelActive: React.PropTypes.node,
-  source: React.PropTypes.oneOfType([
-    React.PropTypes.node,
-    React.PropTypes.any
+  className: PropTypes.string,
+  keys: PropTypes.bool,
+  label: PropTypes.node,
+  labelActive: PropTypes.node,
+  source: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.any
   ]),
-  tipLabel: React.PropTypes.string
+  tipLabel: PropTypes.string
 })
diff --git a/src/control/mouse-position.js b/src/control/mouse-position.js
index d85ff6f..16f96d4 100644
--- a/src/control/mouse-position.js
+++ b/src/control/mouse-position.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLControl from './ol-control';
@@ -14,11 +15,11 @@ export default class MousePosition extends OLControl {
 }
 
 MousePosition.propTypes = Object.assign({}, OLControl.propTypes, {
-  className: React.PropTypes.string,
-  coordinateFormat: React.PropTypes.func,
-  projection: React.PropTypes.oneOfType([
-    React.PropTypes.instanceOf(ol.proj.Projection),
-    React.PropTypes.string
+  className: PropTypes.string,
+  coordinateFormat: PropTypes.func,
+  projection: PropTypes.oneOfType([
+    PropTypes.instanceOf(ol.proj.Projection),
+    PropTypes.string
   ]),
-  undefinedHTML: React.PropTypes.string
+  undefinedHTML: PropTypes.string
 })
diff --git a/src/control/ol-control.js b/src/control/ol-control.js
index 51ed00e..b1a8af3 100644
--- a/src/control/ol-control.js
+++ b/src/control/ol-control.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLComponent from '../ol-component';
@@ -29,5 +30,5 @@ OLControl.defaultProps = {
 }
 
 OLControl.contextTypes = {
-  map: React.PropTypes.instanceOf(ol.Map)
+  map: PropTypes.instanceOf(ol.Map)
 }
diff --git a/src/control/overview-map.js b/src/control/overview-map.js
index 9f4794d..5b6388c 100644
--- a/src/control/overview-map.js
+++ b/src/control/overview-map.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLControl from './ol-control';
@@ -18,15 +19,15 @@ export default class OverviewMap extends OLControl {
 }
 
 OverviewMap.propTypes = Object.assign({}, OLControl.propTypes, {
-  className: React.PropTypes.string,
-  collapsed: React.PropTypes.bool,
-  collapseLabel: React.PropTypes.string,
-  collapsible: React.PropTypes.bool,
-  label: React.PropTypes.node,
-  layers: React.PropTypes.oneOfType([
-    React.PropTypes.arrayOf(React.PropTypes.instanceOf(ol.layer.Layer)),
-    React.PropTypes.instanceOf(ol.Collection)
+  className: PropTypes.string,
+  collapsed: PropTypes.bool,
+  collapseLabel: PropTypes.string,
+  collapsible: PropTypes.bool,
+  label: PropTypes.node,
+  layers: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.instanceOf(ol.layer.Layer)),
+    PropTypes.instanceOf(ol.Collection)
   ]),
-  tipLabel: React.PropTypes.string,
-  view: React.PropTypes.instanceOf(ol.View)
+  tipLabel: PropTypes.string,
+  view: PropTypes.instanceOf(ol.View)
 })
diff --git a/src/control/rotate.js b/src/control/rotate.js
index 8ac922c..074de6a 100644
--- a/src/control/rotate.js
+++ b/src/control/rotate.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLControl from './ol-control';
@@ -16,10 +17,10 @@ export default class Rotate extends OLControl {
 }
 
 Rotate.propTypes = Object.assign({}, OLControl.propTypes, {
-  autoHide: React.PropTypes.bool,
-  className: React.PropTypes.string,
-  duration: React.PropTypes.number,
-  label: React.PropTypes.node,
-  resetNorth: React.PropTypes.func,
-  tipLabel: React.PropTypes.string
+  autoHide: PropTypes.bool,
+  className: PropTypes.string,
+  duration: PropTypes.number,
+  label: PropTypes.node,
+  resetNorth: PropTypes.func,
+  tipLabel: PropTypes.string
 })
diff --git a/src/control/scale-line.js b/src/control/scale-line.js
index 6944c2f..b68e711 100644
--- a/src/control/scale-line.js
+++ b/src/control/scale-line.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLControl from './ol-control';
@@ -14,7 +15,7 @@ export default class ScaleLine extends OLControl {
 }
 
 ScaleLine.propTypes = Object.assign({}, OLControl.propTypes, {
-  className: React.PropTypes.string,
-  minWidth: React.PropTypes.number,
-  units: React.PropTypes.oneOf(ScaleLineUnits)
+  className: PropTypes.string,
+  minWidth: PropTypes.number,
+  units: PropTypes.oneOf(ScaleLineUnits)
 })
diff --git a/src/control/zoom-slider.js b/src/control/zoom-slider.js
index c7f61c6..e6507a0 100644
--- a/src/control/zoom-slider.js
+++ b/src/control/zoom-slider.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLControl from './ol-control';
@@ -14,8 +15,8 @@ export default class ZoomSlider extends OLControl {
 }
 
 ZoomSlider.propTypes = Object.assign({}, OLControl.propTypes, {
-  className: React.PropTypes.string,
-  duration: React.PropTypes.number,
-  maxResolution: React.PropTypes.number,
-  minResolution: React.PropTypes.number
+  className: PropTypes.string,
+  duration: PropTypes.number,
+  maxResolution: PropTypes.number,
+  minResolution: PropTypes.number
 })
diff --git a/src/control/zoom-to-extent.js b/src/control/zoom-to-extent.js
index 6502f8a..8b527d7 100644
--- a/src/control/zoom-to-extent.js
+++ b/src/control/zoom-to-extent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import OLPropTypes from '../ol-proptypes'
 import ol from 'openlayers';
@@ -15,8 +16,8 @@ export default class ZoomToExtent extends OLControl {
 }
 
 ZoomToExtent.propTypes = Object.assign({}, OLControl.propTypes, {
-  className: React.PropTypes.string,
+  className: PropTypes.string,
   extent: OLPropTypes.Extent,
-  label: React.PropTypes.node,
-  tipLabel: React.PropTypes.string
+  label: PropTypes.node,
+  tipLabel: PropTypes.string
 })
diff --git a/src/control/zoom.js b/src/control/zoom.js
index 0659549..a2be03c 100644
--- a/src/control/zoom.js
+++ b/src/control/zoom.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLControl from './ol-control';
@@ -17,11 +18,11 @@ export default class Zoom extends OLControl {
 }
 
 Zoom.propTypes = Object.assign({}, OLControl.propTypes, {
-  className: React.PropTypes.string,
-  delta: React.PropTypes.number,
-  duration: React.PropTypes.number,
-  zoomInLabel: React.PropTypes.node,
-  zoomInTipLabel: React.PropTypes.string,
-  zoomOutLabel: React.PropTypes.node,
-  zoomOutTipLabel: React.PropTypes.string
+  className: PropTypes.string,
+  delta: PropTypes.number,
+  duration: PropTypes.number,
+  zoomInLabel: PropTypes.node,
+  zoomInTipLabel: PropTypes.string,
+  zoomOutLabel: PropTypes.node,
+  zoomOutTipLabel: PropTypes.string
 })
diff --git a/src/feature.js b/src/feature.js
index 7c99189..9a468d3 100644
--- a/src/feature.js
+++ b/src/feature.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLComponent from './ol-component';
@@ -39,15 +40,15 @@ export default class Feature extends OLComponent {
 }
 
 Feature.propTypes = {
-  style: React.PropTypes.object,
-  children: React.PropTypes.element,
-  id: React.PropTypes.any.isRequired
+  style: PropTypes.object,
+  children: PropTypes.element,
+  id: PropTypes.any.isRequired
 }
 
 Feature.contextTypes = {
-  source: React.PropTypes.instanceOf(ol.source.Source)
+  source: PropTypes.instanceOf(ol.source.Source)
 }
 
 Feature.childContextTypes = {
-  feature: React.PropTypes.instanceOf(ol.Feature)
+  feature: PropTypes.instanceOf(ol.Feature)
 }
diff --git a/src/geom/line-string.js b/src/geom/line-string.js
index 700c26a..871dc8c 100644
--- a/src/geom/line-string.js
+++ b/src/geom/line-string.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLComponent from '../ol-component';
@@ -27,11 +28,11 @@ export default class LineString extends OLComponent {
 }
 
 LineString.propTypes = {
-  children: React.PropTypes.arrayOf(
-    React.PropTypes.arrayOf(React.PropTypes.number)
+  children: PropTypes.arrayOf(
+    PropTypes.arrayOf(PropTypes.number)
   ).isRequired,
 }
 
 LineString.contextTypes = {
-  feature: React.PropTypes.instanceOf(ol.Feature)
+  feature: PropTypes.instanceOf(ol.Feature)
 }
diff --git a/src/geom/point.js b/src/geom/point.js
index 87e6bb4..36118b6 100644
--- a/src/geom/point.js
+++ b/src/geom/point.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLComponent from '../ol-component';
@@ -27,9 +28,9 @@ export default class Point extends OLComponent {
 }
 
 Point.propTypes = {
-  children: React.PropTypes.arrayOf(React.PropTypes.number).isRequired,
+  children: PropTypes.arrayOf(PropTypes.number).isRequired,
 }
 
 Point.contextTypes = {
-  feature: React.PropTypes.instanceOf(ol.Feature)
+  feature: PropTypes.instanceOf(ol.Feature)
 }
diff --git a/src/geom/polygon.js b/src/geom/polygon.js
index bb5fcb6..c61930f 100644
--- a/src/geom/polygon.js
+++ b/src/geom/polygon.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLComponent from '../ol-component';
@@ -27,11 +28,11 @@ export default class Polygon extends OLComponent {
 }
 
 Polygon.propTypes = {
-  children: React.PropTypes.arrayOf(
-    React.PropTypes.arrayOf(React.PropTypes.number)
+  children: PropTypes.arrayOf(
+    PropTypes.arrayOf(PropTypes.number)
   ).isRequired,
 }
 
 Polygon.contextTypes = {
-  feature: React.PropTypes.instanceOf(ol.Feature)
+  feature: PropTypes.instanceOf(ol.Feature)
 }
diff --git a/src/geom/raw-geometry.js b/src/geom/raw-geometry.js
index a63c534..1b04ed6 100644
--- a/src/geom/raw-geometry.js
+++ b/src/geom/raw-geometry.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLComponent from '../ol-component';
@@ -18,11 +19,11 @@ export default class RawGeometry extends OLComponent {
 }
 
 RawGeometry.propTypes = {
-  geometry: React.PropTypes.instanceOf(
+  geometry: PropTypes.instanceOf(
     ol.geom.Geometry
   ).isRequired,
 }
 
 RawGeometry.contextTypes = {
-  feature: React.PropTypes.instanceOf(ol.Feature)
+  feature: PropTypes.instanceOf(ol.Feature)
 }
diff --git a/src/interaction/double-click-zoom.js b/src/interaction/double-click-zoom.js
index e6c985e..af01a32 100644
--- a/src/interaction/double-click-zoom.js
+++ b/src/interaction/double-click-zoom.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLInteraction from './ol-interaction';
@@ -12,6 +13,6 @@ export default class DoubleClickZoom extends OLInteraction {
 }
 
 DoubleClickZoom.propTypes = Object.assign({}, OLInteraction.propTypes, {
-  delta: React.PropTypes.number,
-  duration: React.PropTypes.number
+  delta: PropTypes.number,
+  duration: PropTypes.number
 })
diff --git a/src/interaction/drag-box.js b/src/interaction/drag-box.js
index 81d7939..703a257 100644
--- a/src/interaction/drag-box.js
+++ b/src/interaction/drag-box.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLInteraction from './ol-interaction';
@@ -11,10 +12,10 @@ export default class DragBox extends OLInteraction {
 }
 
 DragBox.propTypes = Object.assign({}, OLInteraction.propTypes, {
-  boxdrag: React.PropTypes.func,
-  boxend: React.PropTypes.func,
-  boxstart: React.PropTypes.func,
-  condition: React.PropTypes.func
+  boxdrag: PropTypes.func,
+  boxend: PropTypes.func,
+  boxstart: PropTypes.func,
+  condition: PropTypes.func
 })
 
 DragBox.olEvents = ["boxdrag", "boxend", "boxstart"]
diff --git a/src/interaction/drag-rotate-and-zoom.js b/src/interaction/drag-rotate-and-zoom.js
index ae7cf7d..9d0057d 100644
--- a/src/interaction/drag-rotate-and-zoom.js
+++ b/src/interaction/drag-rotate-and-zoom.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLInteraction from './ol-interaction';
@@ -12,6 +13,6 @@ export default class DragRotateAndZoom extends OLInteraction {
 }
 
 DragRotateAndZoom.propTypes = Object.assign({}, OLInteraction.propTypes, {
-  condition: React.PropTypes.func,
-  duration: React.PropTypes.number
+  condition: PropTypes.func,
+  duration: PropTypes.number
 })
diff --git a/src/interaction/drag-rotate.js b/src/interaction/drag-rotate.js
index 80c7288..b143143 100644
--- a/src/interaction/drag-rotate.js
+++ b/src/interaction/drag-rotate.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLInteraction from './ol-interaction';
@@ -12,6 +13,6 @@ export default class DragRotate extends OLInteraction {
 }
 
 DragRotate.propTypes = Object.assign({}, OLInteraction.propTypes, {
-  condition: React.PropTypes.func,
-  duration: React.PropTypes.number
+  condition: PropTypes.func,
+  duration: PropTypes.number
 })
diff --git a/src/interaction/drag-zoom.js b/src/interaction/drag-zoom.js
index 3d46aa7..22830b3 100644
--- a/src/interaction/drag-zoom.js
+++ b/src/interaction/drag-zoom.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLInteraction from './ol-interaction';
@@ -13,12 +14,12 @@ export default class DragZoom extends OLInteraction {
 }
 
 DragZoom.propTypes = Object.assign({}, OLInteraction.propTypes, {
-  boxdrag: React.PropTypes.func,
-  boxend: React.PropTypes.func,
-  boxstart: React.PropTypes.func,
-  condition: React.PropTypes.func,
-  duration: React.PropTypes.number,
-  out: React.PropTypes.bool
+  boxdrag: PropTypes.func,
+  boxend: PropTypes.func,
+  boxstart: PropTypes.func,
+  condition: PropTypes.func,
+  duration: PropTypes.number,
+  out: PropTypes.bool
 })
 
 DragZoom.olEvents = ["boxdrag", "boxend", "boxstart"]
diff --git a/src/interaction/draw.js b/src/interaction/draw.js
index 86524ac..1dc299b 100644
--- a/src/interaction/draw.js
+++ b/src/interaction/draw.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLInteraction from './ol-interaction';
@@ -11,9 +12,9 @@ export default class Draw extends OLInteraction {
 }
 
 Draw.propTypes = Object.assign({}, OLInteraction.propTypes, {
-  drawend: React.PropTypes.func,
-  drawstart: React.PropTypes.func,
-  type: React.PropTypes.string.isRequired
+  drawend: PropTypes.func,
+  drawstart: PropTypes.func,
+  type: PropTypes.string.isRequired
 })
 
 Draw.olEvents = ["drawend", "drawstart"]
diff --git a/src/interaction/keyboard-pan.js b/src/interaction/keyboard-pan.js
index 2b76425..6d3d7c2 100644
--- a/src/interaction/keyboard-pan.js
+++ b/src/interaction/keyboard-pan.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLInteraction from './ol-interaction';
@@ -13,7 +14,7 @@ export default class KeyboardPan extends OLInteraction {
 }
 
 KeyboardPan.propTypes = Object.assign({}, OLInteraction.propTypes, {
-  condition: React.PropTypes.func,
-  duration: React.PropTypes.number,
-  pixelDelta: React.PropTypes.number
+  condition: PropTypes.func,
+  duration: PropTypes.number,
+  pixelDelta: PropTypes.number
 })
diff --git a/src/interaction/keyboard-zoom.js b/src/interaction/keyboard-zoom.js
index 2e8bbd7..a7d0f85 100644
--- a/src/interaction/keyboard-zoom.js
+++ b/src/interaction/keyboard-zoom.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLInteraction from './ol-interaction';
@@ -13,7 +14,7 @@ export default class KeyboardZoom extends OLInteraction {
 }
 
 KeyboardZoom.propTypes = Object.assign({}, OLInteraction.propTypes, {
-  condition: React.PropTypes.func,
-  delta: React.PropTypes.number,
-  duration: React.PropTypes.number
+  condition: PropTypes.func,
+  delta: PropTypes.number,
+  duration: PropTypes.number
 })
diff --git a/src/interaction/modify.js b/src/interaction/modify.js
index 43ddd41..a1baffa 100644
--- a/src/interaction/modify.js
+++ b/src/interaction/modify.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLInteraction from './ol-interaction';
@@ -12,10 +13,10 @@ export default class Modify extends OLInteraction {
 }
 
 Modify.propTypes = Object.assign({}, OLInteraction.propTypes, {
-  condition: React.PropTypes.func,
-  modifyend: React.PropTypes.func,
-  modifystart: React.PropTypes.func,
-  features: React.PropTypes.instanceOf(ol.Collection).isRequired
+  condition: PropTypes.func,
+  modifyend: PropTypes.func,
+  modifystart: PropTypes.func,
+  features: PropTypes.instanceOf(ol.Collection).isRequired
 })
 
 Modify.olEvents = ["modifyend", "modifystart"]
diff --git a/src/interaction/mouse-wheel-zoom.js b/src/interaction/mouse-wheel-zoom.js
index 98aca19..eaf02fc 100644
--- a/src/interaction/mouse-wheel-zoom.js
+++ b/src/interaction/mouse-wheel-zoom.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLInteraction from './ol-interaction';
@@ -12,6 +13,6 @@ export default class MouseWheelZoom extends OLInteraction {
 }
 
 MouseWheelZoom.propTypes = Object.assign({}, OLInteraction.propTypes, {
-  duration: React.PropTypes.number,
-  useAnchor: React.PropTypes.bool
+  duration: PropTypes.number,
+  useAnchor: PropTypes.bool
 })
diff --git a/src/interaction/ol-interaction.js b/src/interaction/ol-interaction.js
index 87ab3b8..25847a5 100644
--- a/src/interaction/ol-interaction.js
+++ b/src/interaction/ol-interaction.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLComponent from '../ol-component';
@@ -62,7 +63,7 @@ export default class OLInteraction extends OLComponent {
 }
 
 OLInteraction.propTypes = {
-  active: React.PropTypes.bool.isRequired
+  active: PropTypes.bool.isRequired
 }
 
 OLInteraction.defaultProps = {
@@ -70,5 +71,5 @@ OLInteraction.defaultProps = {
 }
 
 OLInteraction.contextTypes = {
-  map: React.PropTypes.instanceOf(ol.Map)
+  map: PropTypes.instanceOf(ol.Map)
 }
diff --git a/src/interaction/pinch-rotate.js b/src/interaction/pinch-rotate.js
index af864df..ddf5861 100644
--- a/src/interaction/pinch-rotate.js
+++ b/src/interaction/pinch-rotate.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLInteraction from './ol-interaction';
@@ -12,6 +13,6 @@ export default class PinchRotate extends OLInteraction {
 }
 
 PinchRotate.propTypes = Object.assign({}, OLInteraction.propTypes, {
-  threshold: React.PropTypes.number,
-  duration: React.PropTypes.number
+  threshold: PropTypes.number,
+  duration: PropTypes.number
 })
diff --git a/src/interaction/pinch-zoom.js b/src/interaction/pinch-zoom.js
index d6a54c2..f308cc6 100644
--- a/src/interaction/pinch-zoom.js
+++ b/src/interaction/pinch-zoom.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLInteraction from './ol-interaction';
@@ -11,5 +12,5 @@ export default class PinchZoom extends OLInteraction {
 }
 
 PinchZoom.propTypes = Object.assign({}, OLInteraction.propTypes, {
-  duration: React.PropTypes.number
+  duration: PropTypes.number
 })
diff --git a/src/interaction/select.js b/src/interaction/select.js
index 6b76634..0be3997 100644
--- a/src/interaction/select.js
+++ b/src/interaction/select.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLInteraction from './ol-interaction';
@@ -11,8 +12,8 @@ export default class Select extends OLInteraction {
 }
 
 Select.propTypes = Object.assign({}, OLInteraction.propTypes, {
-  condition: React.PropTypes.func,
-  select: React.PropTypes.func
+  condition: PropTypes.func,
+  select: PropTypes.func
 })
 
 Select.olEvents = ["select"]
diff --git a/src/layer/image.js b/src/layer/image.js
index 9ca4927..0bcf43b 100644
--- a/src/layer/image.js
+++ b/src/layer/image.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react'
 import ol from 'openlayers'
 import OLContainer from '../ol-container'
@@ -32,8 +33,8 @@ export default class Image extends OLContainer {
 }
 
 Image.propTypes = {
-  visible: React.PropTypes.bool,
-  zIndex: React.PropTypes.number
+  visible: PropTypes.bool,
+  zIndex: PropTypes.number
 }
 
 Image.defaultProps = {
@@ -41,9 +42,9 @@ Image.defaultProps = {
 }
 
 Image.contextTypes = {
-  map: React.PropTypes.instanceOf(ol.Map)
+  map: PropTypes.instanceOf(ol.Map)
 }
 
 Image.childContextTypes = {
-  layer: React.PropTypes.instanceOf(ol.layer.Image)
+  layer: PropTypes.instanceOf(ol.layer.Image)
 }
diff --git a/src/layer/tile.js b/src/layer/tile.js
index 1ae0d82..7f2fc8f 100644
--- a/src/layer/tile.js
+++ b/src/layer/tile.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react'
 import ol from 'openlayers'
 import OLContainer from '../ol-container'
@@ -32,8 +33,8 @@ export default class Tile extends OLContainer {
 }
 
 Tile.propTypes = {
-  visible: React.PropTypes.bool,
-  zIndex: React.PropTypes.number
+  visible: PropTypes.bool,
+  zIndex: PropTypes.number
 }
 
 Tile.defaultProps = {
@@ -41,9 +42,9 @@ Tile.defaultProps = {
 }
 
 Tile.contextTypes = {
-  map: React.PropTypes.instanceOf(ol.Map)
+  map: PropTypes.instanceOf(ol.Map)
 }
 
 Tile.childContextTypes = {
-  layer: React.PropTypes.instanceOf(ol.layer.Tile)
+  layer: PropTypes.instanceOf(ol.layer.Tile)
 }
diff --git a/src/layer/vector.js b/src/layer/vector.js
index 7a5085e..765ab39 100644
--- a/src/layer/vector.js
+++ b/src/layer/vector.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLContainer from '../ol-container';
@@ -38,18 +39,18 @@ export default class Vector extends OLContainer {
 }
 
 Vector.propTypes = {
-  updateWhileAnimating: React.PropTypes.bool,
-  updateWhileInteracting: React.PropTypes.bool,
-  style: React.PropTypes.oneOfType([
-    React.PropTypes.instanceOf(ol.style.Style),
-    React.PropTypes.object,
-    React.PropTypes.arrayOf(React.PropTypes.oneOfType([
-      React.PropTypes.instanceOf(ol.style.Style),
-      React.PropTypes.object
+  updateWhileAnimating: PropTypes.bool,
+  updateWhileInteracting: PropTypes.bool,
+  style: PropTypes.oneOfType([
+    PropTypes.instanceOf(ol.style.Style),
+    PropTypes.object,
+    PropTypes.arrayOf(PropTypes.oneOfType([
+      PropTypes.instanceOf(ol.style.Style),
+      PropTypes.object
     ]))
   ]),
-  visible: React.PropTypes.bool,
-  zIndex: React.PropTypes.number
+  visible: PropTypes.bool,
+  zIndex: PropTypes.number
 }
 
 Vector.defaultProps = {
@@ -57,10 +58,10 @@ Vector.defaultProps = {
 }
 
 Vector.contextTypes = {
-  map: React.PropTypes.instanceOf(ol.Map)
+  map: PropTypes.instanceOf(ol.Map)
 }
 
 Vector.childContextTypes = {
-  layer: React.PropTypes.instanceOf(ol.layer.Vector),
-  map: React.PropTypes.instanceOf(ol.Map)
+  layer: PropTypes.instanceOf(ol.layer.Vector),
+  map: PropTypes.instanceOf(ol.Map)
 }
diff --git a/src/map.js b/src/map.js
index 3b3d8e2..8b90e38 100644
--- a/src/map.js
+++ b/src/map.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLComponent from './ol-component';
@@ -64,18 +65,18 @@ export default class Map extends React.Component {
 }
 
 Map.propTypes = {
-  loadTilesWhileAnimating: React.PropTypes.bool,
-  loadTilesWhileInteracting: React.PropTypes.bool,
-  onSingleClick: React.PropTypes.func,
-  onChangeSize: React.PropTypes.func,
-  view: React.PropTypes.element.isRequired,
-  useDefaultInteractions: React.PropTypes.bool.isRequired,
-  useDefaultControls: React.PropTypes.bool.isRequired,
-  focusOnMount: React.PropTypes.bool.isRequired,
+  loadTilesWhileAnimating: PropTypes.bool,
+  loadTilesWhileInteracting: PropTypes.bool,
+  onSingleClick: PropTypes.func,
+  onChangeSize: PropTypes.func,
+  view: PropTypes.element.isRequired,
+  useDefaultInteractions: PropTypes.bool.isRequired,
+  useDefaultControls: PropTypes.bool.isRequired,
+  focusOnMount: PropTypes.bool.isRequired,
 
-  children: React.PropTypes.oneOfType([
-    React.PropTypes.arrayOf(React.PropTypes.element),
-    React.PropTypes.element,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.element),
+    PropTypes.element,
   ])
 }
 
@@ -86,5 +87,5 @@ Map.defaultProps = {
 }
 
 Map.childContextTypes = {
-  map: React.PropTypes.instanceOf(ol.Map)
+  map: PropTypes.instanceOf(ol.Map)
 }
diff --git a/src/ol-proptypes.js b/src/ol-proptypes.js
index 6659d9b..12ddb70 100644
--- a/src/ol-proptypes.js
+++ b/src/ol-proptypes.js
@@ -1,8 +1,4 @@
-/**
- * @file Property type validators for OpenLayers custom typedefs.
- */
-
-import { PropTypes } from 'react'
+import PropTypes from 'prop-types';
 
 let OLPropTypes = {}
 
diff --git a/src/overlay.js b/src/overlay.js
index afa137e..27fb5be 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom'
 import ol from 'openlayers';
@@ -49,18 +50,18 @@ export default class Overlay extends OLComponent {
 }
 
 Overlay.propTypes = {
-  id: React.PropTypes.oneOfType([
-    React.PropTypes.number,
-    React.PropTypes.string
+  id: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string
   ]),
-  element: React.PropTypes.element,
-  offset: React.PropTypes.arrayOf(React.PropTypes.number),
-  position: React.PropTypes.arrayOf(React.PropTypes.number),
-  positioning: React.PropTypes.string,
-  stopEvent: React.PropTypes.bool,
-  insertFirst: React.PropTypes.bool
+  element: PropTypes.element,
+  offset: PropTypes.arrayOf(PropTypes.number),
+  position: PropTypes.arrayOf(PropTypes.number),
+  positioning: PropTypes.string,
+  stopEvent: PropTypes.bool,
+  insertFirst: PropTypes.bool
 }
 
 Overlay.contextTypes = {
-  map: React.PropTypes.instanceOf(ol.Map)
+  map: PropTypes.instanceOf(ol.Map)
 }
diff --git a/src/source/bingmaps.js b/src/source/bingmaps.js
index 10b814b..02aa1fa 100644
--- a/src/source/bingmaps.js
+++ b/src/source/bingmaps.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react'
 import ol from 'openlayers'
 import OLComponent from '../ol-component'
@@ -19,10 +20,10 @@ export default class BingMaps extends OLComponent {
 }
 
 BingMaps.propTypes = {
-  apiKey: React.PropTypes.string.isRequired,
-  imagerySet: React.PropTypes.string.isRequired
+  apiKey: PropTypes.string.isRequired,
+  imagerySet: PropTypes.string.isRequired
 }
 
 BingMaps.contextTypes = {
-  layer: React.PropTypes.instanceOf(ol.layer.Base)
+  layer: PropTypes.instanceOf(ol.layer.Base)
 }
diff --git a/src/source/image-arcgis-rest.js b/src/source/image-arcgis-rest.js
index 9d08fe4..a48b677 100644
--- a/src/source/image-arcgis-rest.js
+++ b/src/source/image-arcgis-rest.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react'
 import ol from 'openlayers'
 import OLComponent from '../ol-component'
@@ -23,8 +24,8 @@ export default class ImageArcGISRest extends OLComponent {
 }
 
 ImageArcGISRest.propTypes = {
-  ratio: React.PropTypes.number,
-  url: React.PropTypes.string.isRequired
+  ratio: PropTypes.number,
+  url: PropTypes.string.isRequired
 }
 
 ImageArcGISRest.defaultProps = {
@@ -32,10 +33,10 @@ ImageArcGISRest.defaultProps = {
 }
 
 ImageArcGISRest.contextTypes = {
-  layer: React.PropTypes.instanceOf(ol.layer.Base),
-  map: React.PropTypes.instanceOf(ol.Map)
+  layer: PropTypes.instanceOf(ol.layer.Base),
+  map: PropTypes.instanceOf(ol.Map)
 }
 
 ImageArcGISRest.childContextTypes = {
-  source: React.PropTypes.instanceOf(ol.source.Source)
+  source: PropTypes.instanceOf(ol.source.Source)
 }
diff --git a/src/source/map-quest.js b/src/source/map-quest.js
index 001d4cc..5410595 100644
--- a/src/source/map-quest.js
+++ b/src/source/map-quest.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLComponent from '../ol-component';
@@ -14,9 +15,9 @@ export default class MapQuest extends OLComponent {
 }
 
 MapQuest.propTypes = {
-  layer: React.PropTypes.string.isRequired
+  layer: PropTypes.string.isRequired
 }
 
 MapQuest.contextTypes = {
-  layer: React.PropTypes.instanceOf(ol.layer.Base)
+  layer: PropTypes.instanceOf(ol.layer.Base)
 }
diff --git a/src/source/osm.js b/src/source/osm.js
index 51c1619..bc423a4 100644
--- a/src/source/osm.js
+++ b/src/source/osm.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLComponent from '../ol-component';
@@ -17,5 +18,5 @@ OSM.propTypes = {
 }
 
 OSM.contextTypes = {
-  layer: React.PropTypes.instanceOf(ol.layer.Base)
+  layer: PropTypes.instanceOf(ol.layer.Base)
 }
diff --git a/src/source/vector.js b/src/source/vector.js
index ab45aba..2676351 100644
--- a/src/source/vector.js
+++ b/src/source/vector.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react'
 import ol from 'openlayers'
 import OLComponent from '../ol-component'
@@ -33,10 +34,10 @@ Vector.defaultProps = {
 }
 
 Vector.contextTypes = {
-  layer: React.PropTypes.instanceOf(ol.layer.Base),
-  map: React.PropTypes.instanceOf(ol.Map)
+  layer: PropTypes.instanceOf(ol.layer.Base),
+  map: PropTypes.instanceOf(ol.Map)
 }
 
 Vector.childContextTypes = {
-  source: React.PropTypes.instanceOf(ol.source.Source)
+  source: PropTypes.instanceOf(ol.source.Source)
 }
diff --git a/src/source/xyz.js b/src/source/xyz.js
index 6c1dca1..c77b0ec 100644
--- a/src/source/xyz.js
+++ b/src/source/xyz.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLComponent from '../ol-component';
@@ -14,10 +15,10 @@ export default class XYZ extends OLComponent {
 }
 
 XYZ.propTypes = {
-  url: React.PropTypes.string,
-  urls: React.PropTypes.arrayOf(React.PropTypes.string)
+  url: PropTypes.string,
+  urls: PropTypes.arrayOf(PropTypes.string)
 }
 
 XYZ.contextTypes = {
-  layer: React.PropTypes.instanceOf(ol.layer.Base)
+  layer: PropTypes.instanceOf(ol.layer.Base)
 }
diff --git a/src/view.js b/src/view.js
index b1696ac..dab73f6 100644
--- a/src/view.js
+++ b/src/view.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLComponent from './ol-component';
@@ -62,17 +63,17 @@ export default class View extends OLComponent {
 }
 
 View.propTypes = {
-  center: React.PropTypes.arrayOf(React.PropTypes.number),
-  resolution: React.PropTypes.number,
-  zoom: React.PropTypes.number,
-  rotation: React.PropTypes.number,
-  initialCenter: React.PropTypes.arrayOf(React.PropTypes.number),
-  initialResolution: React.PropTypes.number,
-  initialZoom: React.PropTypes.number,
-  initialRotation: React.PropTypes.number,
-  onResolutionChanged: React.PropTypes.func,
-  onZoomChanged: React.PropTypes.func,
-  onCenterChanged: React.PropTypes.func,
+  center: PropTypes.arrayOf(PropTypes.number),
+  resolution: PropTypes.number,
+  zoom: PropTypes.number,
+  rotation: PropTypes.number,
+  initialCenter: PropTypes.arrayOf(PropTypes.number),
+  initialResolution: PropTypes.number,
+  initialZoom: PropTypes.number,
+  initialRotation: PropTypes.number,
+  onResolutionChanged: PropTypes.func,
+  onZoomChanged: PropTypes.func,
+  onCenterChanged: PropTypes.func,
 }
 
 View.defaultProps = {
@@ -83,5 +84,5 @@ View.defaultProps = {
 }
 
 View.contextTypes = {
-  map: React.PropTypes.instanceOf(ol.Map)
+  map: PropTypes.instanceOf(ol.Map)
 }

From 2e53db46a4b2f533d6b32df988ca838147dc0bde Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Wed, 31 May 2017 13:43:40 +0100
Subject: [PATCH 23/36] Added animation options to overlay, point

---
 index.d.ts        |  4 ++++
 src/geom/point.js | 35 +++++++++++++++++++++++++++++++++--
 src/overlay.js    | 34 ++++++++++++++++++++++++++++++++--
 3 files changed, 69 insertions(+), 4 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 4ac5fec..3493ab0 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -80,6 +80,8 @@ declare namespace __OLReact {
         positioning?: string;
         stopEvent?: boolean;
         insertFirst?: boolean;
+        animate?: boolean;
+        animationLength?: number;
     }
 
     export class Overlay extends OLComponent<OverlayProps, any> {
@@ -214,6 +216,8 @@ declare namespace __OLReact {
 
         interface PointProps {
             children?: number[];
+            animate?: boolean;
+            animationLength?: number;
         }
         export class Point extends OLComponent<PointProps, any> {
         }
diff --git a/src/geom/point.js b/src/geom/point.js
index 36118b6..8e68df9 100644
--- a/src/geom/point.js
+++ b/src/geom/point.js
@@ -10,8 +10,37 @@ export default class Point extends OLComponent {
     this.updateFromProps(props);
   }
 
+  shouldComponentUpdate(nextProps) {
+    return this.props.children != nextProps.children
+  }
+
   updateFromProps(props) {
-    this.geometry.setCoordinates(this.props.children);
+    if (props.animate) {
+      this.animate(props.children, props.animationLength);
+    } else {
+      this.geometry.setCoordinates(this.props.children);
+    }
+  }
+
+  animate(finishCoords, animationLength) {
+    let frame = animationLength * 1000;
+    let startCoords = this.geometry.getCoordinates()
+    let delta = [finishCoords[0] - startCoords[0], finishCoords[1] - startCoords[1]];
+
+    let finish = null;
+    step = (timestamp) => {
+      if (!finish) {
+        finish = timestamp + frame;
+      }
+      if (timestamp < finish) {
+        let progress = 1 - ((finish - timestamp) / frame);
+        this.geometry.setCoordinates([startCoords[0] + (delta[0] * progress), startCoords[1] + (delta[1] * progress)]);
+        window.requestAnimationFrame(step);
+      } else {
+        this.geometry.setCoordinates(finishCoords);
+      }
+    }
+    window.requestAnimationFrame(step);
   }
 
   componentDidMount() {
@@ -21,7 +50,7 @@ export default class Point extends OLComponent {
   componentWillReceiveProps(newProps) {
     this.updateFromProps(newProps);
   }
-  
+
   render() {
     return false;
   }
@@ -29,6 +58,8 @@ export default class Point extends OLComponent {
 
 Point.propTypes = {
   children: PropTypes.arrayOf(PropTypes.number).isRequired,
+  animate: PropTypes.bool,
+  animationLength: PropTypes.number
 }
 
 Point.contextTypes = {
diff --git a/src/overlay.js b/src/overlay.js
index 27fb5be..043238e 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -17,6 +17,9 @@ export default class Overlay extends OLComponent {
     });
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.props != nextProps
+  }
 
   updateFromProps_(props) {
 
@@ -32,7 +35,11 @@ export default class Overlay extends OLComponent {
       this.overlay.setOffset(props.offset);
     }
     if (typeof props.position !== 'undefined') {
-      this.overlay.setPosition(props.position);
+      if (props.animate) {
+        this.animate(props.position, props.animationLength)
+      } else {
+        this.overlay.setPosition(props.position);
+      }
     }
     if (typeof props.positioning !== 'undefined') {
       this.overlay.setPositioning(props.positioning);
@@ -47,6 +54,27 @@ export default class Overlay extends OLComponent {
   componentWillReceiveProps(props) {
     this.updateFromProps_(props);
   }
+
+  animate(finishCoords, animationLength) {
+    let frame = animationLength * 1000;
+    let startCoords = this.overlay.getPosition();
+    let delta = [finishCoords[0] - startCoords[0], finishCoords[1] - startCoords[1]];
+
+    let finish = null;
+    let step = (timestamp) => {
+      if (!finish) {
+        finish = timestamp + frame;
+      }
+      if (timestamp < finish) {
+        let progress = 1 - ((finish - timestamp) / frame);
+        this.overlay.setPosition([startCoords[0] + (delta[0] * progress), startCoords[1] + (delta[1] * progress)]);
+        window.requestAnimationFrame(step);
+      } else {
+        this.overlay.setPosition(finishCoords);
+      }
+    }
+    window.requestAnimationFrame(step);
+  }
 }
 
 Overlay.propTypes = {
@@ -59,7 +87,9 @@ Overlay.propTypes = {
   position: PropTypes.arrayOf(PropTypes.number),
   positioning: PropTypes.string,
   stopEvent: PropTypes.bool,
-  insertFirst: PropTypes.bool
+  insertFirst: PropTypes.bool,
+  animate: PropTypes.bool,
+  animationLength: PropTypes.number
 }
 
 Overlay.contextTypes = {

From 42ceb5d5d4a0f6dc233d4ca6cdde0bd3b08fd747 Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Wed, 31 May 2017 15:02:44 +0100
Subject: [PATCH 24/36] Making sure to clean up the DOM correctly, creating DOM
 element at the right time..

---
 src/overlay.js | 41 ++++++++++++++++++++++++-----------------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/overlay.js b/src/overlay.js
index 043238e..82f3361 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -15,6 +15,13 @@ export default class Overlay extends OLComponent {
       stopEvent: props.stopEvent,
       insertFirst: props.insertFirst
     });
+
+    this.element = document.createElement("div")
+  }
+
+  componentWillUnmount() {
+    ReactDOM.unmountComponentAtNode(this.element);
+    this.element.parentNode.removeChild(this.element);
   }
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -24,10 +31,6 @@ export default class Overlay extends OLComponent {
   updateFromProps_(props) {
 
     if (typeof props.element !== 'undefined') {
-      if (typeof this.element !== 'undefined') {
-        this.element.remove();
-      }
-      this.element = document.createElement("div");
       ReactDOM.render(props.element, this.element);
       this.overlay.setElement(this.element);
     }
@@ -58,22 +61,26 @@ export default class Overlay extends OLComponent {
   animate(finishCoords, animationLength) {
     let frame = animationLength * 1000;
     let startCoords = this.overlay.getPosition();
-    let delta = [finishCoords[0] - startCoords[0], finishCoords[1] - startCoords[1]];
 
-    let finish = null;
-    let step = (timestamp) => {
-      if (!finish) {
-        finish = timestamp + frame;
-      }
-      if (timestamp < finish) {
-        let progress = 1 - ((finish - timestamp) / frame);
-        this.overlay.setPosition([startCoords[0] + (delta[0] * progress), startCoords[1] + (delta[1] * progress)]);
-        window.requestAnimationFrame(step);
-      } else {
-        this.overlay.setPosition(finishCoords);
+    if (startCoords) {
+
+      let delta = [finishCoords[0] - startCoords[0], finishCoords[1] - startCoords[1]];
+
+      let finish = null;
+      let step = (timestamp) => {
+        if (!finish) {
+          finish = timestamp + frame;
+        }
+        if (timestamp < finish) {
+          let progress = 1 - ((finish - timestamp) / frame);
+          this.overlay.setPosition([startCoords[0] + (delta[0] * progress), startCoords[1] + (delta[1] * progress)]);
+          window.requestAnimationFrame(step);
+        } else {
+          this.overlay.setPosition(finishCoords);
+        }
       }
+      window.requestAnimationFrame(step);
     }
-    window.requestAnimationFrame(step);
   }
 }
 

From a54ba44396c5e044220c7e1aaa20745381388fdb Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Thu, 1 Jun 2017 16:21:34 +0100
Subject: [PATCH 25/36] Updated polygons to be editable..

---
 index.d.ts          |  2 ++
 src/geom/polygon.js | 17 +++++++++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 3493ab0..4751e75 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -204,6 +204,8 @@ declare namespace __OLReact {
 
         interface PolygonProps {
             children?: number[][];
+            editable?: boolean;
+            modifyEnd?: (e: ol.interaction.ModifyEvent) => void;
         }
         export class Polygon extends OLComponent<PolygonProps, any> {
         }
diff --git a/src/geom/polygon.js b/src/geom/polygon.js
index c61930f..271883a 100644
--- a/src/geom/polygon.js
+++ b/src/geom/polygon.js
@@ -16,12 +16,22 @@ export default class Polygon extends OLComponent {
 
   componentDidMount() {
     this.context.feature.setGeometry(this.geometry);
+    if (this.props.editable) {
+      let interactions = this.context.map.getInteractions()
+      let polyInteraction = new ol.interaction.Modify({
+        features: new ol.Collection([this.context.feature])
+      })
+      if (this.props.modifyEnd) {
+        polyInteraction.on('modifyend', this.props.modifyEnd);
+      }
+      interactions.push(polyInteraction);
+    }
   }
 
   componentWillReceiveProps(newProps) {
     this.updateFromProps(newProps);
   }
-  
+
   render() {
     return false;
   }
@@ -31,8 +41,11 @@ Polygon.propTypes = {
   children: PropTypes.arrayOf(
     PropTypes.arrayOf(PropTypes.number)
   ).isRequired,
+  editable: PropTypes.bool,
+  modifyEnd: PropTypes.func
 }
 
 Polygon.contextTypes = {
-  feature: PropTypes.instanceOf(ol.Feature)
+  feature: PropTypes.instanceOf(ol.Feature),
+  map: PropTypes.instanceOf(ol.Map)
 }

From 719c5e601f7312a0b415572c889d4768adf22afd Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Thu, 1 Jun 2017 17:10:12 +0100
Subject: [PATCH 26/36] Fixing up Modify definition for polygon

---
 index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.d.ts b/index.d.ts
index 4751e75..912bc35 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -205,7 +205,7 @@ declare namespace __OLReact {
         interface PolygonProps {
             children?: number[][];
             editable?: boolean;
-            modifyEnd?: (e: ol.interaction.ModifyEvent) => void;
+            modifyEnd?: (e: ol.interaction.Modify.Event) => void;
         }
         export class Polygon extends OLComponent<PolygonProps, any> {
         }

From fb420a0b954c2b056f41c5333638c137818acd39 Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Sat, 3 Jun 2017 16:26:51 +0100
Subject: [PATCH 27/36] Made all geometries capable of modification

---
 index.d.ts              | 14 +++++++----
 src/geom/line-string.js |  7 ++----
 src/geom/ol-geometry.js | 51 +++++++++++++++++++++++++++++++++++++++++
 src/geom/point.js       |  7 ++----
 src/geom/polygon.js     | 22 +++---------------
 5 files changed, 68 insertions(+), 33 deletions(-)
 create mode 100644 src/geom/ol-geometry.js

diff --git a/index.d.ts b/index.d.ts
index 912bc35..8671409 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -196,18 +196,24 @@ declare namespace __OLReact {
     }
 
     export namespace geom {
+
+        interface OLGeometryProps {
+            modify?: boolean;
+            modifyStart?: (e: ol.interaction.Modify.Event) => void;
+            modifyEnd?: (e: ol.interaction.Modify.Event) => void;
+        }
+        export class OLGeometry<OLGeometryProps, S> extends OLComponent<OLGeometryProps, S> { }
+
         interface LineStringProps {
             children?: number[][];
         }
         export class LineString extends OLComponent<LineStringProps, any> {
         }
 
-        interface PolygonProps {
+        interface PolygonProps extends OLGeometryProps {
             children?: number[][];
-            editable?: boolean;
-            modifyEnd?: (e: ol.interaction.Modify.Event) => void;
         }
-        export class Polygon extends OLComponent<PolygonProps, any> {
+        export class Polygon extends OLGeometry<PolygonProps, any> {
         }
 
         interface RawGeometryProps {
diff --git a/src/geom/line-string.js b/src/geom/line-string.js
index 871dc8c..14f8eb2 100644
--- a/src/geom/line-string.js
+++ b/src/geom/line-string.js
@@ -14,10 +14,6 @@ export default class LineString extends OLComponent {
     this.geometry.setCoordinates(props.children);
   }
 
-  componentDidMount() {
-    this.context.feature.setGeometry(this.geometry);
-  }
-
   componentWillReceiveProps(newProps) {
     this.updateFromProps(newProps);
   }
@@ -34,5 +30,6 @@ LineString.propTypes = {
 }
 
 LineString.contextTypes = {
-  feature: PropTypes.instanceOf(ol.Feature)
+  feature: PropTypes.instanceOf(ol.Feature),
+  map: PropTypes.instanceOf(ol.Map),
 }
diff --git a/src/geom/ol-geometry.js b/src/geom/ol-geometry.js
new file mode 100644
index 0000000..2200f56
--- /dev/null
+++ b/src/geom/ol-geometry.js
@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import ol from 'openlayers';
+import OLComponent from '../ol-component';
+
+export default class OLGeometry extends OLComponent {
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+        this.context.feature.setGeometry(this.geometry);
+        if (this.props.modify) {
+            let interactions = this.context.map.getInteractions()
+            this.interaction = new ol.interaction.Modify({
+                features: new ol.Collection([this.context.feature])
+            })
+            if (this.props.modifyStart) {
+                this.interaction.on('modifystart', this.props.modifyStart)
+            }
+            if (this.props.modifyEnd) {
+                this.interaction.on('modifyend', this.props.modifyEnd);
+            }
+            interactions.push(this.interaction);
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.props.modify && this.interaction) {
+            let interactions = this.context.map.getInteractions()
+            if (this.props.modifyStart) {
+                this.interaction.un('modifystart', this.props.modifyStart)
+            }
+            if (this.props.modifyEnd) {
+                this.interaction.un('modifyend', this.props.modifyEnd);
+            }
+            interactions.remove(this.interaction);
+        }
+    }
+}
+
+OLGeometry.propTypes = {
+    modify: PropTypes.bool,
+    modifyStart: PropTypes.func,
+    modifyEnd: PropTypes.func,
+}
+
+OLGeometry.contextTypes = {
+    feature: PropTypes.instanceOf(ol.Feature),
+    map: PropTypes.instanceOf(ol.Map),
+}
diff --git a/src/geom/point.js b/src/geom/point.js
index 8e68df9..2337c39 100644
--- a/src/geom/point.js
+++ b/src/geom/point.js
@@ -43,10 +43,6 @@ export default class Point extends OLComponent {
     window.requestAnimationFrame(step);
   }
 
-  componentDidMount() {
-    this.context.feature.setGeometry(this.geometry);
-  }
-
   componentWillReceiveProps(newProps) {
     this.updateFromProps(newProps);
   }
@@ -63,5 +59,6 @@ Point.propTypes = {
 }
 
 Point.contextTypes = {
-  feature: PropTypes.instanceOf(ol.Feature)
+  feature: PropTypes.instanceOf(ol.Feature),
+  map: PropTypes.instanceOf(ol.Map),
 }
diff --git a/src/geom/polygon.js b/src/geom/polygon.js
index 271883a..dec07df 100644
--- a/src/geom/polygon.js
+++ b/src/geom/polygon.js
@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
-import OLComponent from '../ol-component';
+import OLGeometry from './ol-geometry';
 
-export default class Polygon extends OLComponent {
+export default class Polygon extends OLGeometry {
   constructor(props) {
     super(props);
     this.geometry = new ol.geom.Polygon();
@@ -14,20 +14,6 @@ export default class Polygon extends OLComponent {
     this.geometry.setCoordinates([props.children]);
   }
 
-  componentDidMount() {
-    this.context.feature.setGeometry(this.geometry);
-    if (this.props.editable) {
-      let interactions = this.context.map.getInteractions()
-      let polyInteraction = new ol.interaction.Modify({
-        features: new ol.Collection([this.context.feature])
-      })
-      if (this.props.modifyEnd) {
-        polyInteraction.on('modifyend', this.props.modifyEnd);
-      }
-      interactions.push(polyInteraction);
-    }
-  }
-
   componentWillReceiveProps(newProps) {
     this.updateFromProps(newProps);
   }
@@ -41,11 +27,9 @@ Polygon.propTypes = {
   children: PropTypes.arrayOf(
     PropTypes.arrayOf(PropTypes.number)
   ).isRequired,
-  editable: PropTypes.bool,
-  modifyEnd: PropTypes.func
 }
 
 Polygon.contextTypes = {
   feature: PropTypes.instanceOf(ol.Feature),
-  map: PropTypes.instanceOf(ol.Map)
+  map: PropTypes.instanceOf(ol.Map),
 }

From c05c96bd27ab7143546763377c925820f8b4ea21 Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Thu, 8 Jun 2017 18:38:52 +0100
Subject: [PATCH 28/36] Added an onFeatureHover event to ol.Map for feature
 hovering

---
 index.d.ts |  5 +++--
 src/map.js | 17 ++++++++++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 8671409..90c3bb0 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -40,8 +40,9 @@ declare namespace __OLReact {
     interface MapProps {
         loadTilesWhileAnimating?: boolean;
         loadTilesWhileInteracting?: boolean;
-        onSingleClick?: Function;
-        onChangeSize?: Function;
+        onSingleClick?: (evt: ol.MapBrowserEvent) => void;
+        onChangeSize?: (evt: ol.MapBrowserEvent) => void;
+        onFeatureHover?: (feature: ol.Feature) => void
         view: JSX.Element;
         useDefaultInteractions?: boolean;
         useDefaultControls?: boolean;
diff --git a/src/map.js b/src/map.js
index 8b90e38..73004ac 100644
--- a/src/map.js
+++ b/src/map.js
@@ -15,11 +15,14 @@ export default class Map extends React.Component {
     })
 
     if (props.onChangeSize) {
-      this.map.on('change:size', props.onChangeSize);
+      this.map.on('change:size', this.props.onChangeSize);
     }
     if (this.props.onSingleClick) {
       this.map.on('singleclick', this.props.onSingleClick);
     }
+    if (this.props.onFeatureHover) {
+      this.map.on('pointermove', this.onFeatureHover, this)
+    }
   }
 
   componentDidMount() {
@@ -53,6 +56,17 @@ export default class Map extends React.Component {
     )
   }
 
+  onFeatureHover(evt) {
+    if (evt.dragging) {
+      return;
+    }
+    let pixel = this.map.getEventPixel(evt.originalEvent);
+    let feature = this.map.forEachFeatureAtPixel(pixel, function (x) {
+      return x
+    })
+    this.props.onFeatureHover(feature)
+  }
+
   focus() {
     const viewport = this.map.getViewport()
     viewport.tabIndex = 0
@@ -69,6 +83,7 @@ Map.propTypes = {
   loadTilesWhileInteracting: PropTypes.bool,
   onSingleClick: PropTypes.func,
   onChangeSize: PropTypes.func,
+  onFeatureHover: PropTypes.func,
   view: PropTypes.element.isRequired,
   useDefaultInteractions: PropTypes.bool.isRequired,
   useDefaultControls: PropTypes.bool.isRequired,

From 7bfac85bbb2c3a45808702692d54b3b26b5c877e Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Fri, 9 Jun 2017 16:32:00 +0100
Subject: [PATCH 29/36] Added an onFeatureClick to ol.Map

---
 index.d.ts |  1 +
 src/map.js | 13 +++++++++++++
 2 files changed, 14 insertions(+)

diff --git a/index.d.ts b/index.d.ts
index 90c3bb0..b11efdc 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -43,6 +43,7 @@ declare namespace __OLReact {
         onSingleClick?: (evt: ol.MapBrowserEvent) => void;
         onChangeSize?: (evt: ol.MapBrowserEvent) => void;
         onFeatureHover?: (feature: ol.Feature) => void
+        onFeatureClick?: (feature: ol.Feature, coordinate: number[]) => void
         view: JSX.Element;
         useDefaultInteractions?: boolean;
         useDefaultControls?: boolean;
diff --git a/src/map.js b/src/map.js
index 73004ac..209c10d 100644
--- a/src/map.js
+++ b/src/map.js
@@ -23,6 +23,9 @@ export default class Map extends React.Component {
     if (this.props.onFeatureHover) {
       this.map.on('pointermove', this.onFeatureHover, this)
     }
+    if (this.props.onFeatureClick) {
+      this.map.on('singleclick', this.onFeatureClick, this)
+    }
   }
 
   componentDidMount() {
@@ -67,6 +70,15 @@ export default class Map extends React.Component {
     this.props.onFeatureHover(feature)
   }
 
+  onFeatureClick(evt) {
+    let pixel = this.map.getEventPixel(evt.originalEvent);
+    let feature = this.map.forEachFeatureAtPixel(pixel, function (x) {
+      return x
+    })
+    let lonLat = ol.proj.toLonLat(evt.coordinate)
+    this.props.onFeatureClick(feature, lonLat)
+  }
+
   focus() {
     const viewport = this.map.getViewport()
     viewport.tabIndex = 0
@@ -84,6 +96,7 @@ Map.propTypes = {
   onSingleClick: PropTypes.func,
   onChangeSize: PropTypes.func,
   onFeatureHover: PropTypes.func,
+  onFeatureClick: PropTypes.func,
   view: PropTypes.element.isRequired,
   useDefaultInteractions: PropTypes.bool.isRequired,
   useDefaultControls: PropTypes.bool.isRequired,

From 5f49625b7788cc39cce66be19ede1fe68a199f4a Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Tue, 27 Jun 2017 11:20:18 +0100
Subject: [PATCH 30/36] Adding babel es2015 support so that code is compiled
 down correctly

---
 .babelrc     | 6 ++++++
 package.json | 7 ++++---
 2 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 .babelrc

diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..921d9ae
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,6 @@
+{
+    "presets": [
+        "es2015",
+        "react"
+    ]
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 27f3991..33082d4 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,8 @@
   "description": "React interface for openlayers",
   "main": "lib/index.js",
   "scripts": {
-    "compile": "babel -d lib/ src/ --presets react",
-    "watch": "babel -d lib/ src/ --watch --presets react",
+    "compile": "babel -d lib/ src/",
+    "watch": "babel -d lib/ src/ --watch",
     "prepublish": "npm run compile",
     "postinstall": "node scripts/postinstall.js"
   },
@@ -13,6 +13,7 @@
   "devDependencies": {
     "babel-cli": "^6.23.0",
     "babel-loader": "^6.3.2",
+    "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.23.0",
     "react": "^15.4.2",
     "react-dom": "^15.4.2"
@@ -26,4 +27,4 @@
   },
   "repository": "https://github.com/statusas/ol-react.git",
   "license": "MIT"
-}
+}
\ No newline at end of file

From 6cfea913a1f7a650edba455cf80d0b4b0a980efa Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Thu, 29 Jun 2017 14:07:45 +0100
Subject: [PATCH 31/36] Updating layer.base props, draw props

---
 index.d.ts              | 29 ++++++++++++++++++-----------
 src/geom/line-string.js |  4 ++--
 src/geom/ol-geometry.js |  5 ++++-
 src/interaction/draw.js | 10 +++++++---
 src/layer/image.js      | 24 ++++++++++++++++--------
 src/layer/tile.js       | 24 ++++++++++++++++--------
 src/layer/vector.js     | 24 ++++++++++++++++--------
 7 files changed, 79 insertions(+), 41 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index b11efdc..1ec4ab6 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -203,13 +203,14 @@ declare namespace __OLReact {
             modify?: boolean;
             modifyStart?: (e: ol.interaction.Modify.Event) => void;
             modifyEnd?: (e: ol.interaction.Modify.Event) => void;
+            insertVertexCondition?: (e: ol.MapBrowserEvent) => boolean
         }
         export class OLGeometry<OLGeometryProps, S> extends OLComponent<OLGeometryProps, S> { }
 
-        interface LineStringProps {
+        interface LineStringProps extends OLGeometryProps {
             children?: number[][];
         }
-        export class LineString extends OLComponent<LineStringProps, any> {
+        export class LineString extends OLGeometry<LineStringProps, any> {
         }
 
         interface PolygonProps extends OLGeometryProps {
@@ -284,6 +285,8 @@ declare namespace __OLReact {
             drawend?: Function;
             drawstart?: Function;
             type: string;
+            maxPoints?: number;
+            minPoints?: number;
         }
         export class Draw extends OLInteraction<DrawProps, any> { }
 
@@ -334,26 +337,30 @@ declare namespace __OLReact {
     }
 
     export namespace layer {
-        interface ImageProps {
-            visible?: boolean;
-            zIndex?: number;
+        interface LayerProps {
+            opacity?: number
+            source?: ol.source.Source
+            visible?: boolean
+            extent?: ol.Extent
+            zIndex?: number
+            minResolution?: number
+            maxResolution?: number
+        }
+
+        interface ImageProps extends LayerProps {
         }
         export class Image extends OLContainer<ImageProps, any> {
         }
 
-        interface TileProps {
-            visible?: boolean;
-            zIndex?: number;
+        interface TileProps extends LayerProps {
         }
         export class Tile extends OLContainer<TileProps, any> {
         }
 
-        interface VectorProps {
+        interface VectorProps extends LayerProps {
             updateWhileAnimating?: boolean;
             updateWhileInteracting?: boolean;
             style?: ol.style.Style | Object | ol.style.Style[] | Object[];
-            visible?: boolean;
-            zIndex?: number;
         }
         export class Vector extends OLContainer<VectorProps, any> {
         }
diff --git a/src/geom/line-string.js b/src/geom/line-string.js
index 14f8eb2..83e4b47 100644
--- a/src/geom/line-string.js
+++ b/src/geom/line-string.js
@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
-import OLComponent from '../ol-component';
+import OLGeometry from './ol-geometry';
 
-export default class LineString extends OLComponent {
+export default class LineString extends OLGeometry {
   constructor(props) {
     super(props);
     this.geometry = new ol.geom.LineString();
diff --git a/src/geom/ol-geometry.js b/src/geom/ol-geometry.js
index 2200f56..10341de 100644
--- a/src/geom/ol-geometry.js
+++ b/src/geom/ol-geometry.js
@@ -13,7 +13,9 @@ export default class OLGeometry extends OLComponent {
         if (this.props.modify) {
             let interactions = this.context.map.getInteractions()
             this.interaction = new ol.interaction.Modify({
-                features: new ol.Collection([this.context.feature])
+                features: new ol.Collection([this.context.feature]),
+                //insertVertexCondition: this.props.insertVertexCondition 
+                // Note; as of 27/06/2017, insertVertexCondition is in 4.2.0 of OpenLayers, we can't upgrade yet as the @types package hasn't been updated
             })
             if (this.props.modifyStart) {
                 this.interaction.on('modifystart', this.props.modifyStart)
@@ -43,6 +45,7 @@ OLGeometry.propTypes = {
     modify: PropTypes.bool,
     modifyStart: PropTypes.func,
     modifyEnd: PropTypes.func,
+    insertVertexCondition: PropTypes.func
 }
 
 OLGeometry.contextTypes = {
diff --git a/src/interaction/draw.js b/src/interaction/draw.js
index 1dc299b..0c77d09 100644
--- a/src/interaction/draw.js
+++ b/src/interaction/draw.js
@@ -4,9 +4,11 @@ import ol from 'openlayers';
 import OLInteraction from './ol-interaction';
 
 export default class Draw extends OLInteraction {
-  createInteraction (props) {
+  createInteraction(props) {
     return new ol.interaction.Draw({
-      type: props.type
+      type: props.type,
+      maxPoints: props.maxPoints,
+      minPoints: props.minPoints
     })
   }
 }
@@ -14,7 +16,9 @@ export default class Draw extends OLInteraction {
 Draw.propTypes = Object.assign({}, OLInteraction.propTypes, {
   drawend: PropTypes.func,
   drawstart: PropTypes.func,
-  type: PropTypes.string.isRequired
+  type: PropTypes.string.isRequired,
+  maxPoints: PropTypes.number,
+  minPoints: PropTypes.number
 })
 
 Draw.olEvents = ["drawend", "drawstart"]
diff --git a/src/layer/image.js b/src/layer/image.js
index 0bcf43b..09dd7ca 100644
--- a/src/layer/image.js
+++ b/src/layer/image.js
@@ -4,37 +4,45 @@ import ol from 'openlayers'
 import OLContainer from '../ol-container'
 
 export default class Image extends OLContainer {
-  constructor (props) {
+  constructor(props) {
     super(props)
     this.layer = new ol.layer.Image({
-      visible: this.props.visible
+      opacity: props.opacity,
+      visible: props.visible,
+      extend: props.extent,
+      zIndex: props.zIndex,
+      minResolution: props.minResolution,
+      maxResolution: props.maxResolution,
     })
-    this.layer.setZIndex(props.zIndex)
   }
 
-  getChildContext () {
+  getChildContext() {
     return {
       layer: this.layer
     }
   }
 
-  componentDidMount () {
+  componentDidMount() {
     this.context.map.addLayer(this.layer)
   }
 
-  componentWillReceiveProps (newProps) {
+  componentWillReceiveProps(newProps) {
     this.layer.setVisible(newProps.visible)
     this.layer.setZIndex(newProps.zIndex)
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     this.context.map.removeLayer(this.layer)
   }
 }
 
 Image.propTypes = {
+  opacity: PropTypes.number,
   visible: PropTypes.bool,
-  zIndex: PropTypes.number
+  extent: PropTypes.instanceOf(ol.Extent),
+  zIndex: PropTypes.number,
+  minResolution: PropTypes.number,
+  maxResolution: PropTypes.number
 }
 
 Image.defaultProps = {
diff --git a/src/layer/tile.js b/src/layer/tile.js
index 7f2fc8f..3434023 100644
--- a/src/layer/tile.js
+++ b/src/layer/tile.js
@@ -4,37 +4,45 @@ import ol from 'openlayers'
 import OLContainer from '../ol-container'
 
 export default class Tile extends OLContainer {
-  constructor (props) {
+  constructor(props) {
     super(props)
     this.layer = new ol.layer.Tile({
-      visible: this.props.visible
+      opacity: props.opacity,
+      visible: props.visible,
+      extend: props.extent,
+      zIndex: props.zIndex,
+      minResolution: props.minResolution,
+      maxResolution: props.maxResolution,
     })
-    this.layer.setZIndex(props.zIndex)
   }
 
-  getChildContext () {
+  getChildContext() {
     return {
       layer: this.layer
     }
   }
 
-  componentDidMount () {
+  componentDidMount() {
     this.context.map.addLayer(this.layer)
   }
 
-  componentWillReceiveProps (newProps) {
+  componentWillReceiveProps(newProps) {
     this.layer.setVisible(newProps.visible)
     this.layer.setZIndex(newProps.zIndex)
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     this.context.map.removeLayer(this.layer)
   }
 }
 
 Tile.propTypes = {
+  opacity: PropTypes.number,
   visible: PropTypes.bool,
-  zIndex: PropTypes.number
+  extent: PropTypes.instanceOf(ol.Extent),
+  zIndex: PropTypes.number,
+  minResolution: PropTypes.number,
+  maxResolution: PropTypes.number
 }
 
 Tile.defaultProps = {
diff --git a/src/layer/vector.js b/src/layer/vector.js
index 765ab39..c9f0736 100644
--- a/src/layer/vector.js
+++ b/src/layer/vector.js
@@ -5,35 +5,39 @@ import OLContainer from '../ol-container';
 import { buildStyle } from '../style';
 
 export default class Vector extends OLContainer {
-  constructor (props) {
+  constructor(props) {
     super(props)
     this.layer = new ol.layer.Vector({
       updateWhileAnimating: props.updateWhileAnimating,
       updateWhileInteracting: props.updateWhileInteracting,
       style: buildStyle(this.props.style),
-      visible: this.props.visible
+      opacity: props.opacity,
+      visible: props.visible,
+      extend: props.extent,
+      zIndex: props.zIndex,
+      minResolution: props.minResolution,
+      maxResolution: props.maxResolution,
     })
-    this.layer.setZIndex(props.zIndex)
   }
 
-  getChildContext () {
+  getChildContext() {
     return {
       layer: this.layer,
       map: this.context.map
     }
   }
 
-  componentDidMount () {
+  componentDidMount() {
     this.context.map.addLayer(this.layer)
   }
 
-  componentWillReceiveProps (newProps) {
+  componentWillReceiveProps(newProps) {
     this.layer.setStyle(buildStyle(newProps.style));
     this.layer.setVisible(newProps.visible)
     this.layer.setZIndex(newProps.zIndex)
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     this.context.map.removeLayer(this.layer)
   }
 }
@@ -49,8 +53,12 @@ Vector.propTypes = {
       PropTypes.object
     ]))
   ]),
+  opacity: PropTypes.number,
   visible: PropTypes.bool,
-  zIndex: PropTypes.number
+  extent: PropTypes.instanceOf(ol.Extent),
+  zIndex: PropTypes.number,
+  minResolution: PropTypes.number,
+  maxResolution: PropTypes.number
 }
 
 Vector.defaultProps = {

From 11cd39cad752bc10bc255282681789e0595ecee4 Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Fri, 30 Jun 2017 11:14:59 +0100
Subject: [PATCH 32/36] Updated Babel to use object spread and brought layer
 props/prop types together

---
 .babelrc            |  4 ++++
 package.json        |  4 +++-
 src/layer/image.js  | 18 ++++++------------
 src/layer/index.js  | 28 +++++++++++++++++++++++++---
 src/layer/tile.js   | 18 ++++++------------
 src/layer/vector.js | 20 +++++++-------------
 6 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/.babelrc b/.babelrc
index 921d9ae..5058e16 100644
--- a/.babelrc
+++ b/.babelrc
@@ -2,5 +2,9 @@
     "presets": [
         "es2015",
         "react"
+    ],
+    "plugins": [
+        "transform-es2015-destructuring",
+        "transform-object-rest-spread"
     ]
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index 33082d4..f5da68b 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
   "devDependencies": {
     "babel-cli": "^6.23.0",
     "babel-loader": "^6.3.2",
+    "babel-plugin-transform-es2015-destructuring": "^6.23.0",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.23.0",
     "react": "^15.4.2",
@@ -27,4 +29,4 @@
   },
   "repository": "https://github.com/statusas/ol-react.git",
   "license": "MIT"
-}
\ No newline at end of file
+}
diff --git a/src/layer/image.js b/src/layer/image.js
index 09dd7ca..5419f7d 100644
--- a/src/layer/image.js
+++ b/src/layer/image.js
@@ -2,17 +2,16 @@ import PropTypes from 'prop-types';
 import React from 'react'
 import ol from 'openlayers'
 import OLContainer from '../ol-container'
+import { buildLayerProps, baseLayerPropTypes } from './'
 
 export default class Image extends OLContainer {
   constructor(props) {
     super(props)
+
+    let layerProps = buildLayerProps(props)
+
     this.layer = new ol.layer.Image({
-      opacity: props.opacity,
-      visible: props.visible,
-      extend: props.extent,
-      zIndex: props.zIndex,
-      minResolution: props.minResolution,
-      maxResolution: props.maxResolution,
+      ...layerProps,
     })
   }
 
@@ -37,12 +36,7 @@ export default class Image extends OLContainer {
 }
 
 Image.propTypes = {
-  opacity: PropTypes.number,
-  visible: PropTypes.bool,
-  extent: PropTypes.instanceOf(ol.Extent),
-  zIndex: PropTypes.number,
-  minResolution: PropTypes.number,
-  maxResolution: PropTypes.number
+  ...baseLayerPropTypes
 }
 
 Image.defaultProps = {
diff --git a/src/layer/index.js b/src/layer/index.js
index c484710..b8dbd91 100644
--- a/src/layer/index.js
+++ b/src/layer/index.js
@@ -1,3 +1,25 @@
-export {default as Vector} from './vector';
-export {default as Tile} from './tile';
-export {default as Image} from './image';
+import PropTypes from 'prop-types';
+
+export { default as Vector } from './vector';
+export { default as Tile } from './tile';
+export { default as Image } from './image';
+
+export function buildLayerProps(props) {
+    return {
+        opacity: props.opacity,
+        visible: props.visible,
+        extent: props.extent,
+        zIndex: props.zIndex,
+        minResolution: props.minResolution,
+        maxResolution: props.maxResolution,
+    }
+}
+
+export const baseLayerPropTypes = {
+    opacity: PropTypes.number,
+    visible: PropTypes.bool,
+    extent: PropTypes.instanceOf(ol.Extent),
+    zIndex: PropTypes.number,
+    minResolution: PropTypes.number,
+    maxResolution: PropTypes.number
+}
\ No newline at end of file
diff --git a/src/layer/tile.js b/src/layer/tile.js
index 3434023..708ed51 100644
--- a/src/layer/tile.js
+++ b/src/layer/tile.js
@@ -2,17 +2,16 @@ import PropTypes from 'prop-types';
 import React from 'react'
 import ol from 'openlayers'
 import OLContainer from '../ol-container'
+import { buildLayerProps, baseLayerPropTypes } from './'
 
 export default class Tile extends OLContainer {
   constructor(props) {
     super(props)
+
+    let layerProps = buildLayerProps(props)
+
     this.layer = new ol.layer.Tile({
-      opacity: props.opacity,
-      visible: props.visible,
-      extend: props.extent,
-      zIndex: props.zIndex,
-      minResolution: props.minResolution,
-      maxResolution: props.maxResolution,
+      ...layerProps,
     })
   }
 
@@ -37,12 +36,7 @@ export default class Tile extends OLContainer {
 }
 
 Tile.propTypes = {
-  opacity: PropTypes.number,
-  visible: PropTypes.bool,
-  extent: PropTypes.instanceOf(ol.Extent),
-  zIndex: PropTypes.number,
-  minResolution: PropTypes.number,
-  maxResolution: PropTypes.number
+  ...baseLayerPropTypes
 }
 
 Tile.defaultProps = {
diff --git a/src/layer/vector.js b/src/layer/vector.js
index c9f0736..1235a35 100644
--- a/src/layer/vector.js
+++ b/src/layer/vector.js
@@ -2,21 +2,20 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
 import OLContainer from '../ol-container';
+import { buildLayerProps, baseLayerPropTypes } from './'
 import { buildStyle } from '../style';
 
 export default class Vector extends OLContainer {
   constructor(props) {
     super(props)
+
+    let layerProps = buildLayerProps(props)
+
     this.layer = new ol.layer.Vector({
+      ...layerProps,
+      style: buildStyle(this.props.style),
       updateWhileAnimating: props.updateWhileAnimating,
       updateWhileInteracting: props.updateWhileInteracting,
-      style: buildStyle(this.props.style),
-      opacity: props.opacity,
-      visible: props.visible,
-      extend: props.extent,
-      zIndex: props.zIndex,
-      minResolution: props.minResolution,
-      maxResolution: props.maxResolution,
     })
   }
 
@@ -53,12 +52,7 @@ Vector.propTypes = {
       PropTypes.object
     ]))
   ]),
-  opacity: PropTypes.number,
-  visible: PropTypes.bool,
-  extent: PropTypes.instanceOf(ol.Extent),
-  zIndex: PropTypes.number,
-  minResolution: PropTypes.number,
-  maxResolution: PropTypes.number
+  ...baseLayerPropTypes
 }
 
 Vector.defaultProps = {

From 913c124ffad5b62e1ae7fa0c97fe152135af21d7 Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Fri, 30 Jun 2017 15:26:41 +0100
Subject: [PATCH 33/36] refactoring layers into a common base component, adding
 selecting + hovering

---
 index.d.ts            |  4 ++
 src/layer/image.js    |  9 ++---
 src/layer/index.js    | 22 -----------
 src/layer/ol-layer.js | 85 +++++++++++++++++++++++++++++++++++++++++++
 src/layer/tile.js     |  9 ++---
 src/layer/vector.js   | 21 ++++-------
 src/overlay.js        |  3 ++
 7 files changed, 108 insertions(+), 45 deletions(-)
 create mode 100644 src/layer/ol-layer.js

diff --git a/index.d.ts b/index.d.ts
index 1ec4ab6..35daa43 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -345,6 +345,10 @@ declare namespace __OLReact {
             zIndex?: number
             minResolution?: number
             maxResolution?: number
+            selectable?: boolean
+            onSelect?: (event: ol.interaction.Select.Event) => void
+            hoverable?: boolean
+            onHover?: (event: ol.interaction.Select.Event) => void
         }
 
         interface ImageProps extends LayerProps {
diff --git a/src/layer/image.js b/src/layer/image.js
index 5419f7d..08bebc8 100644
--- a/src/layer/image.js
+++ b/src/layer/image.js
@@ -1,14 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react'
 import ol from 'openlayers'
-import OLContainer from '../ol-container'
-import { buildLayerProps, baseLayerPropTypes } from './'
+import OLLayer from './ol-layer';
 
-export default class Image extends OLContainer {
+export default class Image extends OLLayer {
   constructor(props) {
     super(props)
 
-    let layerProps = buildLayerProps(props)
+    let layerProps = this.buildLayerProps(props)
 
     this.layer = new ol.layer.Image({
       ...layerProps,
@@ -36,7 +35,7 @@ export default class Image extends OLContainer {
 }
 
 Image.propTypes = {
-  ...baseLayerPropTypes
+
 }
 
 Image.defaultProps = {
diff --git a/src/layer/index.js b/src/layer/index.js
index b8dbd91..9da6250 100644
--- a/src/layer/index.js
+++ b/src/layer/index.js
@@ -1,25 +1,3 @@
-import PropTypes from 'prop-types';
-
 export { default as Vector } from './vector';
 export { default as Tile } from './tile';
 export { default as Image } from './image';
-
-export function buildLayerProps(props) {
-    return {
-        opacity: props.opacity,
-        visible: props.visible,
-        extent: props.extent,
-        zIndex: props.zIndex,
-        minResolution: props.minResolution,
-        maxResolution: props.maxResolution,
-    }
-}
-
-export const baseLayerPropTypes = {
-    opacity: PropTypes.number,
-    visible: PropTypes.bool,
-    extent: PropTypes.instanceOf(ol.Extent),
-    zIndex: PropTypes.number,
-    minResolution: PropTypes.number,
-    maxResolution: PropTypes.number
-}
\ No newline at end of file
diff --git a/src/layer/ol-layer.js b/src/layer/ol-layer.js
new file mode 100644
index 0000000..9437fd5
--- /dev/null
+++ b/src/layer/ol-layer.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import OLContainer from '../ol-container';
+import ol from 'openlayers';
+
+export default class OLLayer extends OLContainer {
+    constructor(props) {
+        super(props)
+    }
+
+    buildLayerProps(props) {
+        return {
+            opacity: props.opacity,
+            visible: props.visible,
+            extent: props.extent,
+            zIndex: props.zIndex,
+            minResolution: props.minResolution,
+            maxResolution: props.maxResolution,
+        }
+    }
+
+    componentWillReceiveProps(newProps) {
+        if (newProps.opacity !== undefined) this.layer.setOpacity(newProps.opacity)
+        if (newProps.visible !== undefined) this.layer.setVisible(newProps.visible)
+        if (newProps.extent !== undefined) this.layer.setExtent(newProps.extent)
+        if (newProps.zIndex !== undefined) this.layer.setZIndex(newProps.zIndex)
+        if (newProps.minResolution !== undefined) this.layer.setMinResolution(newProps.minResolution)
+        if (newProps.maxResolution !== undefined) this.layer.setMaxResolution(newProps.maxResolution)
+    }
+
+    componentDidMount() {
+        if (this.props.selectable) {
+            let interactions = this.context.map.getInteractions()
+            this.selectInteraction = new ol.interaction.Select({
+                condition: ol.events.condition.click,
+                layers: [this.layer],
+            })
+            this.selectInteraction.on('select', this.props.onSelect)
+
+            interactions.push(this.selectInteraction);
+        }
+        if (this.props.hoverable) {
+            let interactions = this.context.map.getInteractions()
+            this.hoverInteraction = new ol.interaction.Select({
+                condition: ol.events.condition.pointerMove,
+                layers: [this.layer],
+            })
+            this.hoverInteraction.on('select', this.props.onHover)
+
+            interactions.push(this.hoverInteraction);
+        }
+    }
+
+    componentWillUnmount() {
+        let interactions = this.context.map.getInteractions()
+        if (this.selectInteraction) {
+            interactions.remove(this.selectInteraction)
+        }
+        if (this.hoverInteraction) {
+            interactions.remove(this.hoverInteraction)
+        }
+    }
+}
+
+OLLayer.PropTypes = {
+    opacity: PropTypes.number,
+    visible: PropTypes.bool,
+    extent: PropTypes.instanceOf(ol.Extent),
+    zIndex: PropTypes.number,
+    minResolution: PropTypes.number,
+    maxResolution: PropTypes.number,
+    selectable: PropTypes.bool,
+    onSelect: PropTypes.func,
+    hoverable: PropTypes.bool,
+    onHover: PropTypes.func,
+}
+
+OLLayer.defaultProps = {
+    visible: true,
+    selectable: false
+}
+
+OLLayer.contextTypes = {
+    map: PropTypes.instanceOf(ol.Map)
+}
\ No newline at end of file
diff --git a/src/layer/tile.js b/src/layer/tile.js
index 708ed51..657bbd9 100644
--- a/src/layer/tile.js
+++ b/src/layer/tile.js
@@ -1,14 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react'
 import ol from 'openlayers'
-import OLContainer from '../ol-container'
-import { buildLayerProps, baseLayerPropTypes } from './'
+import OLLayer from './ol-layer';
 
-export default class Tile extends OLContainer {
+export default class Tile extends OLLayer {
   constructor(props) {
     super(props)
 
-    let layerProps = buildLayerProps(props)
+    let layerProps = this.buildLayerProps(props)
 
     this.layer = new ol.layer.Tile({
       ...layerProps,
@@ -36,7 +35,7 @@ export default class Tile extends OLContainer {
 }
 
 Tile.propTypes = {
-  ...baseLayerPropTypes
+
 }
 
 Tile.defaultProps = {
diff --git a/src/layer/vector.js b/src/layer/vector.js
index 1235a35..3ee28b7 100644
--- a/src/layer/vector.js
+++ b/src/layer/vector.js
@@ -1,19 +1,18 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import ol from 'openlayers';
-import OLContainer from '../ol-container';
-import { buildLayerProps, baseLayerPropTypes } from './'
+import OLLayer from './ol-layer';
 import { buildStyle } from '../style';
 
-export default class Vector extends OLContainer {
+export default class Vector extends OLLayer {
   constructor(props) {
     super(props)
 
-    let layerProps = buildLayerProps(props)
+    let layerProps = this.buildLayerProps(props)
 
     this.layer = new ol.layer.Vector({
       ...layerProps,
-      style: buildStyle(this.props.style),
+      style: buildStyle(props.style),
       updateWhileAnimating: props.updateWhileAnimating,
       updateWhileInteracting: props.updateWhileInteracting,
     })
@@ -27,16 +26,17 @@ export default class Vector extends OLContainer {
   }
 
   componentDidMount() {
+    super.componentDidMount()
     this.context.map.addLayer(this.layer)
   }
 
   componentWillReceiveProps(newProps) {
+    super.componentWillReceiveProps(newProps)
     this.layer.setStyle(buildStyle(newProps.style));
-    this.layer.setVisible(newProps.visible)
-    this.layer.setZIndex(newProps.zIndex)
   }
 
   componentWillUnmount() {
+    super.componentWillUnmount()
     this.context.map.removeLayer(this.layer)
   }
 }
@@ -51,12 +51,7 @@ Vector.propTypes = {
       PropTypes.instanceOf(ol.style.Style),
       PropTypes.object
     ]))
-  ]),
-  ...baseLayerPropTypes
-}
-
-Vector.defaultProps = {
-  visible: true
+  ])
 }
 
 Vector.contextTypes = {
diff --git a/src/overlay.js b/src/overlay.js
index 82f3361..a5578a7 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -33,6 +33,9 @@ export default class Overlay extends OLComponent {
     if (typeof props.element !== 'undefined') {
       ReactDOM.render(props.element, this.element);
       this.overlay.setElement(this.element);
+      this.element.onclick = function () {
+        console.log('overlay clicked')
+      }
     }
     if (typeof props.offset !== 'undefined') {
       this.overlay.setOffset(props.offset);

From f27251822773e13028bdf9564ebb334b328942ce Mon Sep 17 00:00:00 2001
From: Ben Lovell <ben@rallysafe.com.au>
Date: Thu, 20 Jul 2017 15:23:21 +1000
Subject: [PATCH 34/36] Added property TileSize to Source.XYZ

---
 index.d.ts        | 1 +
 src/source/xyz.js | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/index.d.ts b/index.d.ts
index 35daa43..b0bedd0 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -404,6 +404,7 @@ declare namespace __OLReact {
         interface XYZProps {
             url?: string;
             urls?: string[];
+            tileSize?: number[];
         }
         export class XYZ extends OLComponent<XYZProps, any> {
         }
diff --git a/src/source/xyz.js b/src/source/xyz.js
index c77b0ec..9dd7a3e 100644
--- a/src/source/xyz.js
+++ b/src/source/xyz.js
@@ -16,7 +16,8 @@ export default class XYZ extends OLComponent {
 
 XYZ.propTypes = {
   url: PropTypes.string,
-  urls: PropTypes.arrayOf(PropTypes.string)
+  urls: PropTypes.arrayOf(PropTypes.string),
+  tileSize: PropTypes.arrayOf(PropTypes.number)
 }
 
 XYZ.contextTypes = {

From a4a70b8c1c35b74eca5f8db8cdc48e04151187ac Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Sat, 19 Aug 2017 10:00:54 +0100
Subject: [PATCH 35/36] Added prop-types package

---
 package.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f5da68b..970622e 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "author": "richard.hills@gmail.com",
   "devDependencies": {
+    "@types/prop-types": "^15.5.1",
     "babel-cli": "^6.23.0",
     "babel-loader": "^6.3.2",
     "babel-plugin-transform-es2015-destructuring": "^6.23.0",
@@ -25,7 +26,8 @@
     "react-dom": "^15.4.2"
   },
   "dependencies": {
-    "openlayers": "^4.0.1"
+    "openlayers": "^4.0.1",
+    "prop-types": "^15.5.10"
   },
   "repository": "https://github.com/statusas/ol-react.git",
   "license": "MIT"

From 6ac628d532b4d91940903230e90dff39e6abd394 Mon Sep 17 00:00:00 2001
From: Jono Rogers <jono@rallysafe.com.au>
Date: Sat, 19 Aug 2017 11:12:08 +0100
Subject: [PATCH 36/36] Fixed implict any return in animate function Removed
 extraneous namespace declaration

---
 index.d.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index b0bedd0..e55bcfd 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -70,7 +70,7 @@ declare namespace __OLReact {
     }
 
     export class View extends OLComponent<ViewProps, any> {
-        animate(options: any);
+        animate(options: any) : void;
         fit(geometry: ol.geom.Geometry | ol.Extent, size: ol.Size, options?: Object): void;
     }
 
@@ -89,10 +89,6 @@ declare namespace __OLReact {
     export class Overlay extends OLComponent<OverlayProps, any> {
     }
 
-    namespace OLProps {
-        export function Extent();
-    }
-
     export namespace control {
         type ScaleLineUnits = "degrees" | "imperial" | "nautical" | "metric" | "us";