Fixes #77: pluggable leaflet layers support

web/client/components/leaflet/Layer.jsx

@@ -6,8 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 var React = require('react');
-var L = require('leaflet');
-var WMSUtils = require('../../utils/leaflet/WMSUtils');
+var Layers = require('../../utils/leaflet/Layers');
 
 var LeafletLayer = React.createClass({
     propTypes: {
@@ -33,20 +32,8 @@ var LeafletLayer = React.createClass({
     },
     createLayer(type, options) {
         if (type) {
-            switch (type) {
-                case "osm":
-                    this.layer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
-                          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-                    });
-                    break;
-                case "wms":
-                    this.layer = L.tileLayer.wms(
-                        WMSUtils.getWMSURL(options.url),
-                        WMSUtils.wmsToLeafletOptions(options)
-                    );
-                    break;
-                default:
-            }
+            this.layer = Layers.createLayer(type, options);
+
             if (this.layer) {
                 this.layer.addTo(this.props.map);
             }

web/client/components/leaflet/__tests__/Layer-test.jsx

@@ -10,6 +10,10 @@ var L = require('leaflet');
 var LeafLetLayer = require('../Layer.jsx');
 var expect = require('expect');
 
+require('../../../utils/leaflet/Layers');
+require('../plugins/OSMLayer');
+require('../plugins/WMSLayer');
+
 describe('Leaflet layer', () => {
     document.body.innerHTML = '<div id="map"></div>';
     let map = L.map('map');

web/client/components/leaflet/__tests__/Map-test.jsx

@@ -10,6 +10,9 @@ var LeafletMap = require('../Map.jsx');
 var LeafLetLayer = require('../Layer.jsx');
 var expect = require('expect');
 
+require('../../../utils/leaflet/Layers');
+require('../plugins/OSMLayer');
+
 describe('LeafletMap', () => {
     afterEach((done) => {
         React.unmountComponentAtNode(document.body);
@@ -71,7 +74,6 @@ describe('LeafletMap', () => {
 
     it('check layers init', () => {
         var options = {
-            "source": "osm",
             "visibility": true
         };
         const map = React.render(<LeafletMap center={{lat: 43.9, lng: 10.3}} zoom={11}>

web/client/components/leaflet/plugins/OSMLayer.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright 2015, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var Layers = require('../../../utils/leaflet/Layers');
+var L = require('leaflet');
+
+Layers.registerType('osm', () => {
+    return L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});
+});

web/client/components/leaflet/plugins/WMSLayer.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright 2015, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var Layers = require('../../../utils/leaflet/Layers');
+var L = require('leaflet');
+var objectAssign = require('object-assign');
+
+function wmsToLeafletOptions(options) {
+    var opacity = options.opacity !== undefined ? options.opacity : 1;
+    // NOTE: can we use opacity to manage visibility?
+    return objectAssign({
+        layers: options.name,
+        styles: options.style || "",
+        format: options.format || 'image/png',
+        transparent: options.transparent !== undefined ? options.transparent : true,
+        opacity: opacity
+    }, options.params || {});
+}
+
+function getWMSURL( url ) {
+    return url.split("\?")[0];
+}
+
+Layers.registerType('wms', (options) => {
+    return L.tileLayer.wms(
+        getWMSURL(options.url),
+        wmsToLeafletOptions(options));
+});

web/client/examples/viewer/containers/Viewer.jsx

@@ -16,6 +16,9 @@ var I18N = require('../../../components/I18N/I18N');
 var Localized = require('../../../components/I18N/Localized');
 var loadLocale = require('../../../actions/locale').loadLocale;
 
+require('../../../components/leaflet/plugins/OSMLayer');
+require('../../../components/leaflet/plugins/WMSLayer');
+
 var Viewer = React.createClass({
     propTypes: {
         mapConfig: React.PropTypes.object,

web/client/utils/leaflet/Layers.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright 2015, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const layerTypes = {};
+
+var Layers = {
+
+    registerType: function(type, impl) {
+        layerTypes[type] = impl;
+    },
+
+    createLayer: function(type, options) {
+        var layerCreator = layerTypes[type];
+        if (layerCreator) {
+            return layerCreator(options);
+        }
+        return null;
+    }
+};
+
+module.exports = Layers;