#29 Google and Bing Support

karma.conf.js

@@ -8,7 +8,8 @@ module.exports = function karmaConfig(config) {
         frameworks: [ 'mocha' ],
 
         files: [
-            'tests.webpack.js'
+            'tests.webpack.js',
+            'http://maps.google.com/maps/api/js?v=3&sensor=false' // required for tests with leaflet google background
         ],
 
         preprocessors: {

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",
@@ -44,7 +45,8 @@
     "proj4": "~2.3.6",
     "react": "^0.13.3",
     "react-bootstrap": "^0.24.3",
-    "url": "~0.10.3"
+    "url": "~0.10.3",
+    "leaflet-plugins": "https://github.com/Polyconseil/leaflet-plugins/tarball/master"
   },
   "scripts": {
     "clean": "rm -Rf ./web/dist",

web/client/components/leaflet/Layer.jsx

@@ -8,15 +8,16 @@
 var React = require('react');
 var L = require('leaflet');
 var LeafletUtils = require('./WMSUtils');
+var Google = require('leaflet-plugins/layer/tile/Google');
+var Bing = require('leaflet-plugins/layer/tile/Bing');
 
-var LeafletLayer = React.createClass({
+const LeafletLayer = React.createClass({
     propTypes: {
         map: React.PropTypes.object,
         source: React.PropTypes.object,
         options: React.PropTypes.object
     },
 
-
     componentDidMount() {
         if (this.props.options && this.props.options.visibility !== false) {
             this.createLayer(this.props.source, this.props.options);
@@ -42,12 +43,37 @@ var LeafletLayer = React.createClass({
                 case "gxp_wmssource":
                     this.layer = L.tileLayer.wms(LeafletUtils.getWMSURL(source.url), LeafletUtils.wmsToLeafletOptions(source, options));
                     break;
+                case "gxp_bingsource":
+                    this.layer = this.createBingLayer(options);
+                    break;
+                case "gxp_googlesource":
+                    this.layer = this.createGoogleLayer(options);
+                    break;
                 default:
             }
             if (this.layer) {
-                this.layer.addTo(this.props.map);
+                // some plugins doesn't have addTo method
+                if (source.type === "gxp_wmssource" || source.type === "gxp_osmsource" ) {
+                    this.layer.addTo(this.props.map);
+                } else {
+                    this.props.map.addLayer(this.layer);
+                }
             }
         }
+    },
+    createGoogleLayer: function(layer) {
+        return new Google(layer.name);
+    },
+    createBingLayer: function(layer) {
+        var key = layer.apiKey || "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
+        return new Bing(key,
+            {
+                subdomains: [0, 1, 2, 3],
+                type: layer.name,
+                attribution: 'Bing',
+                culture: ''
+            }
+        );
     }
 });
 

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

@@ -21,6 +21,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
@@ -50,6 +104,7 @@ describe('Leaflet layer', () => {
         map.eachLayer(function() {lcount++; });
         expect(lcount).toBe(1);
     });
+
     it('creates a wms layer for leaflet map', () => {
         var options = {
             "source": "demo",
@@ -68,6 +123,47 @@ 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 = {
+            "source": "demo",
+            "name": "ROADMAP"
+        };
+        var source = {
+            "ptype": "gxp_googlesource"
+        };
+        // 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(1);
+    });
+
+    it('creates a bing layer for leaflet map', () => {
+        var options = {
+            "source": "bing",
+            "title": "Bing Aerial",
+            "name": "Aerial",
+            "group": "background"
+        };
+        var source = {
+            "ptype": "gxp_bingsource"
+        };
+        // 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++; });

web/client/examples/viewer/index.html

@@ -5,6 +5,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">
+        <script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
         <link rel="stylesheet" href="https://bootswatch.com/lumen/bootstrap.min.css">
         <!--script src="https://code.jquery.com/jquery-1.11.3.js"></script>
 

web/client/utils/ConfigUtils.js

@@ -28,7 +28,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 {
             latLng: latLng,
             zoom: zoom,