Add support for TileWMS and XYZ layer sources

src/ol-source-component.js

@@ -0,0 +1,37 @@
+import ol from 'openlayers'
+import OLComponent from './ol-component'
+
+export default class OLSourceComponent extends OLComponent {
+  constructor(props) {
+    super(props)
+    this.source = this._createSourceFromProps(props)
+  }
+
+  componentDidMount() {
+    this.context.layer.setSource(this.source)
+  }
+
+  componentWillReceiveProps(newProps) {
+    this.source = this._createSourceFromProps(newProps)
+    this.context.layer.setSource(this.source)
+  }
+
+  getChildContext() {
+    return {
+      source: this.source
+    }
+  }
+
+  _createSourceFromProps(props) {
+    throw new Error("_createSouceFromProps() must be overridden in subclasses")
+  }
+}
+
+OLSourceComponent.contextTypes = {
+  layer: React.PropTypes.instanceOf(ol.layer.Base),
+  map: React.PropTypes.instanceOf(ol.Map)
+}
+
+OLSourceComponent.childContextTypes = {
+  source: React.PropTypes.instanceOf(ol.source.Source)
+}

src/source/bingmaps.js

@@ -1,27 +1,21 @@
 import React from 'react'
 import ol from 'openlayers'
-import OLComponent from '../ol-component'
+import OLSourceComponent from '../ol-source-component'
 
-export default class BingMaps extends OLComponent {
+export default class BingMaps extends OLSourceComponent {
   constructor(props) {
+    super(props)
+  }
+
+  _createSourceFromProps(props) {
     let spreadedProps = Object.assign({}, props)
     spreadedProps.key = spreadedProps.apiKey
     delete spreadedProps.apiKey
 
-    super(props)
-
-    this.source = new ol.source.BingMaps(spreadedProps)
-  }
-
-  componentDidMount() {
-    this.context.layer.setSource(this.source)
+    return new ol.source.BingMaps(spreadedProps)
   }
 }
 
 BingMaps.propTypes = {
   apiKey: React.PropTypes.string.isRequired
 }
-
-BingMaps.contextTypes = {
-  layer: React.PropTypes.instanceOf(ol.layer.Base)
-}

src/source/index.js

@@ -3,3 +3,5 @@ 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 TileWMS} from "./tile-wms"
+export {default as XYZ} from "./xyz"

src/source/map-quest.js

@@ -1,22 +1,17 @@
 import React from 'react';
 import ol from 'openlayers';
-import OLComponent from '../ol-component';
+import OLSourceComponent from '../ol-source-component';
 
-export default class MapQuest extends OLComponent {
+export default class MapQuest extends OLSourceComponent {
   constructor(props) {
     super(props);
-    this.source = new ol.source.MapQuest(this.props);
   }
 
-  componentDidMount() {
-    this.context.layer.setSource(this.source);
+  _createSourceFromProps(props) {
+    return new ol.source.MapQuest(Object.assign({}, props));
   }
 }
 
 MapQuest.propTypes = {
   layer: React.PropTypes.string.isRequired
 }
-
-MapQuest.contextTypes = {
-  layer: React.PropTypes.instanceOf(ol.layer.Base)
-}

src/source/osm.js

@@ -1,21 +1,16 @@
 import React from 'react';
 import ol from 'openlayers';
-import OLComponent from '../ol-component';
+import OLSourceComponent from '../ol-source-component'
 
-export default class OSM extends OLComponent {
+export default class OSM extends OLSourceComponent {
   constructor(props) {
     super(props);
-    this.source = new ol.source.OSM(this.props);
   }
 
-  componentDidMount() {
-    this.context.layer.setSource(this.source);
+  _createSourceFromProps(props) {
+    return new ol.source.OSM(Object.assign({}, props));
   }
 }
 
 OSM.propTypes = {
 }
-
-OSM.contextTypes = {
-  layer: React.PropTypes.instanceOf(ol.layer.Base)
-}

src/source/tile-wms.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import ol from 'openlayers'
+import OLSourceComponent from '../ol-source-component'
+
+export default class TileWMS extends OLSourceComponent {
+  constructor(props) {
+    super(props)
+  }
+
+  _createSourceFromProps(props) {
+    return new ol.source.TileWMS(Object.assign({}, props))
+  }
+}
+
+TileWMS.propTypes = {
+  params: React.PropTypes.object.isRequired,
+  url: React.PropTypes.string
+}

src/source/xyz.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import ol from 'openlayers'
+import OLSourceComponent from '../ol-source-component'
+
+export default class XYZ extends OLSourceComponent {
+  constructor(props) {
+    super(props)
+  }
+
+  _createSourceFromProps(props) {
+    return new ol.source.XYZ(Object.assign({}, props))
+  }
+}
+
+XYZ.propTypes = {
+  url: React.PropTypes.string
+}