Merge pull request #80 from mbarto/google_bing_layers

Fixes #79: google and bing layers support for Leaflet
geosolutions-it · Aug 28, 2015 · c206028 · c206028
2 parents 31e9ed7 + 9211361
commit c206028
Show file tree

Hide file tree

Showing 10 changed files with 143 additions and 11 deletions.
diff --git a/karma.conf.continuous-test.js b/karma.conf.continuous-test.js
@@ -9,7 +9,8 @@ module.exports = function karmaConfig(config) {
 
         files: [
             'tests.webpack.js',
-            { pattern: './web/client/test-resources/**/*', included: false }
+            { pattern: './web/client/test-resources/**/*', included: false },
+            'http://maps.google.com/maps/api/js?v=3&sensor=false' // required for tests with leaflet google background
         ],
 
         preprocessors: {

diff --git a/karma.conf.single-run.js b/karma.conf.single-run.js
@@ -9,7 +9,8 @@ module.exports = function karmaConfig(config) {
 
         files: [
             'tests.webpack.js',
-            { pattern: './web/client/test-resources/**/*', included: false }
+            { pattern: './web/client/test-resources/**/*', included: false },
+            'http://maps.google.com/maps/api/js?v=3&sensor=false' // required for tests with leaflet google background
         ],
 
         preprocessors: {

diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "webpack": "^1.8.5",
     "webpack-dev-server": "^1.7.0"
   },
+  "//": "replace leaflet-plugins with official on npm when merged this pull request: https://github.com/shramov/leaflet-plugins/pull/178",
   "dependencies": {
     "axios": "^0.5.4",
     "bootstrap": "^3.3.5",
@@ -48,7 +49,8 @@
     "react-redux": "^1.0.0",
     "redux": "^1.0.0",
     "redux-thunk": "^0.1.0",
-    "url": "~0.10.3"
+    "url": "~0.10.3",
+    "leaflet-plugins": "https://github.com/Polyconseil/leaflet-plugins/tarball/master"
   },
   "scripts": {
     "clean": "rm -Rf ./web/client/dist",

diff --git a/web/client/components/leaflet/Layer.jsx b/web/client/components/leaflet/Layer.jsx
@@ -8,14 +8,13 @@
 var React = require('react');
 var Layers = require('../../utils/leaflet/Layers');
 
-var LeafletLayer = React.createClass({
+const LeafletLayer = React.createClass({
     propTypes: {
         map: React.PropTypes.object,
         type: React.PropTypes.string,
         options: React.PropTypes.object
     },
 
-
     componentDidMount() {
         if (this.props.options && this.props.options.visibility !== false) {
             this.createLayer(this.props.type, this.props.options);
@@ -35,7 +34,7 @@ var LeafletLayer = React.createClass({
             this.layer = Layers.createLayer(type, options);
 
             if (this.layer) {
-                this.layer.addTo(this.props.map);
+                this.props.map.addLayer(this.layer);
             }
         }
     }

diff --git a/web/client/components/leaflet/__tests__/Layer-test.jsx b/web/client/components/leaflet/__tests__/Layer-test.jsx
@@ -13,6 +13,8 @@ var expect = require('expect');
 require('../../../utils/leaflet/Layers');
 require('../plugins/OSMLayer');
 require('../plugins/WMSLayer');
+require('../plugins/GoogleLayer');
+require('../plugins/BingLayer');
 
 describe('Leaflet layer', () => {
     document.body.innerHTML = '<div id="map"></div>';
@@ -25,6 +27,60 @@ describe('Leaflet layer', () => {
         setTimeout(done);
     });
 
+    it('missing layer', () => {
+        var source = {
+            "P_TYPE": "wrong ptype key"
+        };
+        // create layers
+        var layer = React.render(
+            <LeafLetLayer source={source}
+                  map={map}/>, document.body);
+        var lcount = 0;
+
+        expect(layer).toExist();
+        // count layers
+        map.eachLayer(function() {lcount++; });
+        expect(lcount).toBe(0);
+    });
+
+    it('creates a unknown source layer', () => {
+        var options = {
+            "name": "FAKE"
+        };
+        var source = {
+            "ptype": "FAKE",
+            "url": "http://demo.geo-solutions.it/geoserver/wms"
+        };
+        // create layers
+        var layer = React.render(
+            <LeafLetLayer source={source}
+                 options={options} map={map}/>, document.body);
+        var lcount = 0;
+
+        expect(layer).toExist();
+        // count layers
+        map.eachLayer(function() {lcount++; });
+        expect(lcount).toBe(0);
+    });
+
+    it('creates source with missing ptype', () => {
+        var options = {
+            "name": "FAKE"
+        };
+        var source = {
+            "P_TYPE": "wrong ptype key"
+        };
+        // create layers
+        var layer = React.render(
+            <LeafLetLayer source={source}
+                 options={options} map={map}/>, document.body);
+        var lcount = 0;
+
+        expect(layer).toExist();
+        // count layers
+        map.eachLayer(function() {lcount++; });
+        expect(lcount).toBe(0);
+    });
     it('creates a osm layer for leaflet map', () => {
         var options = {};
         // create layers
@@ -54,6 +110,7 @@ describe('Leaflet layer', () => {
         map.eachLayer(function() {lcount++; });
         expect(lcount).toBe(1);
     });
+
     it('creates a wms layer for leaflet map', () => {
         var options = {
             "type": "wms",
@@ -69,6 +126,39 @@ describe('Leaflet layer', () => {
                  options={options} map={map}/>, document.body);
         var lcount = 0;
 
+        expect(layer).toExist();
+        // count layers
+        map.eachLayer(function() {lcount++; });
+        expect(lcount).toBe(1);
+    });
+    it('creates a google layer for leaflet map', () => {
+        var options = {
+            "type": "google",
+            "name": "ROADMAP"
+        };
+        // create layers
+        var layer = React.render(
+            <LeafLetLayer type="google" options={options} map={map}/>, document.body);
+        var lcount = 0;
+
+        expect(layer).toExist();
+        // count layers
+        map.eachLayer(function() {lcount++; });
+        expect(lcount).toBe(1);
+    });
+
+    it('creates a bing layer for leaflet map', () => {
+        var options = {
+            "type": "bing",
+            "title": "Bing Aerial",
+            "name": "Aerial",
+            "group": "background"
+        };
+        // create layers
+        var layer = React.render(
+            <LeafLetLayer type="bing" options={options} map={map}/>, document.body);
+        var lcount = 0;
+
         expect(layer).toExist();
         // count layers
         map.eachLayer(function() {lcount++; });

diff --git a/web/client/components/leaflet/plugins/BingLayer.js b/web/client/components/leaflet/plugins/BingLayer.js
@@ -0,0 +1,22 @@
+/**
+ * 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 Bing = require('leaflet-plugins/layer/tile/Bing');
+
+Layers.registerType('bing', (options) => {
+    var key = options.apiKey || "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
+    return new Bing(key,
+        {
+            subdomains: [0, 1, 2, 3],
+            type: options.name,
+            attribution: 'Bing',
+            culture: ''
+        }
+    );
+});
diff --git a/web/client/components/leaflet/plugins/GoogleLayer.js b/web/client/components/leaflet/plugins/GoogleLayer.js
@@ -0,0 +1,14 @@
+/**
+ * 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 Google = require('leaflet-plugins/layer/tile/Google');
+
+Layers.registerType('google', (options) => {
+    return new Google(options.name);
+});
diff --git a/web/client/examples/viewer/containers/Viewer.jsx b/web/client/examples/viewer/containers/Viewer.jsx
@@ -16,9 +16,6 @@ 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,
@@ -97,6 +94,12 @@ var Viewer = React.createClass({
     }
 });
 
+
+require('../../../components/leaflet/plugins/OSMLayer');
+require('../../../components/leaflet/plugins/WMSLayer');
+require('../../../components/leaflet/plugins/GoogleLayer');
+require('../../../components/leaflet/plugins/BingLayer');
+
 module.exports = connect((state) => {
     return {
         mapConfig: state.mapConfig,

diff --git a/web/client/examples/viewer/index.html b/web/client/examples/viewer/index.html
@@ -7,7 +7,7 @@
         <title>MapStore 2 Viewer</title>
         <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
-        <link rel="stylesheet" href="https://bootswatch.com/lumen/bootstrap.min.css">
+        <script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
         <!--script src="https://code.jquery.com/jquery-1.11.3.js"></script>
 
         <script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script-->

diff --git a/web/client/utils/ConfigUtils.js b/web/client/utils/ConfigUtils.js
@@ -49,7 +49,7 @@ var ConfigUtils = {
 
         // setup layers and sources with defaults
         this.setupSources(sources, config.defaultSourceType);
-        this.setupLayers(layers, sources, ["gxp_osmsource", "gxp_wmssource"]);
+        this.setupLayers(layers, sources, ["gxp_osmsource", "gxp_wmssource", "gxp_googlesource", "gxp_bingsource"]);
         return {
             center: latLng,
             zoom: zoom,