Added credits alternative for cesium baseLayers. See #1780 (#1785)

* Added credits alternative for cesium baseLayers. See #1780

* add test to TileConfigProvider


* small fix to the map click

web/client/components/map/cesium/Map.jsx

@@ -105,8 +105,8 @@ let CesiumMap = React.createClass({
 
         if (this.props.onClick && movement.position !== null) {
             const cartesian = map.camera.pickEllipsoid(movement.position, map.scene.globe.ellipsoid);
-            if (cartesian) {
-                let cartographic = ClickUtils.getMouseXYZ(map, movement) || Cesium.Cartographic.fromCartesian(cartesian);
+            let cartographic = ClickUtils.getMouseXYZ(map, movement) || cartesian && Cesium.Cartographic.fromCartesian(cartesian);
+            if (cartographic) {
                 const latitude = cartographic.latitude * 180.0 / Math.PI;
                 const longitude = cartographic.longitude * 180.0 / Math.PI;
 
@@ -118,6 +118,7 @@ let CesiumMap = React.createClass({
                         y: y
                     },
                     height: this.props.mapOptions && this.props.mapOptions.terrainProvider ? cartographic.height : undefined,
+                    cartographic,
                     latlng: {
                         lat: latitude,
                         lng: longitude
@@ -130,8 +131,8 @@ let CesiumMap = React.createClass({
     onMouseMove(movement) {
         if (this.props.onMouseMove && movement.endPosition) {
             const cartesian = this.map.camera.pickEllipsoid(movement.endPosition, this.map.scene.globe.ellipsoid);
-            if (cartesian) {
-                const cartographic = ClickUtils.getMouseXYZ(this.map, movement) || Cesium.Cartographic.fromCartesian(cartesian);
+            let cartographic = ClickUtils.getMouseXYZ(this.map, movement) || cartesian && Cesium.Cartographic.fromCartesian(cartesian);
+            if (cartographic) {
                 this.props.onMouseMove({
                     y: cartographic.latitude * 180.0 / Math.PI,
                     x: cartographic.longitude * 180.0 / Math.PI,

web/client/components/map/cesium/plugins/TileProviderLayer.js

@@ -75,13 +75,15 @@ Layers.registerType('tileprovider', (options) => {
         const isCORS = useCORS.reduce((found, current) => found || url.indexOf(current) === 0, false);
         proxy = !isCORS && proxyUrl;
     }
+    const cr = opt.credits;
+    const credit = cr ? new Cesium.Credit(cr.text, cr.imageUrl, cr.link) : opt.attribution;
     return new Cesium.UrlTemplateImageryProvider({
         url: template(url, opt),
         enablePickFeatures: false,
         subdomains: opt.subdomains,
         maximumLevel: opt.maxZoom,
         minimumLevel: opt.minZoom,
-        credit: opt.attribution,
+        credit,
         proxy: proxy && opt.noCors ? new TileProviderProxy(proxyUrl) : new NoProxy()
     });
 });

web/client/utils/ConfigProvider.js

@@ -3,6 +3,10 @@ const CONFIGPROVIDER = {
             url: '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
             options: {
                 maxZoom: 19,
+                credits: {
+                    text: '© OpenStreetMap, Open Street Map and contributors, CC-BY-SA',
+                    link: 'http://www.openstreetmap.org/copyright'
+                },
                 attribution:
                     '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
             },
@@ -37,22 +41,33 @@ const CONFIGPROVIDER = {
         OpenSeaMap: {
             url: 'http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
             options: {
-                attribution: 'Map data: &copy; <a href="http://www.openseamap.org">OpenSeaMap</a> contributors'
+                attribution: 'Map data: &copy; <a href="http://www.openseamap.org">OpenSeaMap</a> contributors',
+                credits: {
+                    text: 'Map data: © OpenSeaMap contributors',
+                    link: 'http://www.openseamap.org'
+                }
             }
         },
         OpenTopoMap: {
             url: '//{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
             options: {
                 noCors: true,
                 maxZoom: 16,
-                attribution: 'Map data: {attribution.OpenStreetMap}, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
+                attribution: 'Map data: {attribution.OpenStreetMap}, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
+                credits: {
+                    text: 'Map data: OpenStreetMap contributors CC-BY-SA',
+                    link: 'https://opentopomap.org'
+                }
             }
         },
         Thunderforest: {
             url: '//{s}.tile.thunderforest.com/{variant}/{z}/{x}/{y}.png',
             options: {
-                attribution:
-                    '&copy; <a href="http://www.opencyclemap.org">OpenCycleMap</a>, {attribution.OpenStreetMap}',
+                attribution: '&copy; <a href="http://www.opencyclemap.org">OpenCycleMap</a>, {attribution.OpenStreetMap}',
+                credits: {
+                    text: 'Map data: OpenCycleMap contributors',
+                    link: 'http://www.opencyclemap.org'
+                },
                 variant: 'cycle'
             },
             variants: {
@@ -78,6 +93,9 @@ const CONFIGPROVIDER = {
             options: {
                 maxZoom: 20,
                 variant: 'roads',
+                credits: {
+                    text: 'MapQuest, Open Street Map and contributors, CC-BY-SA'
+                },
                 attribution: 'Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> &mdash; Map data {attribution.OpenStreetMap}'
             },
             variants: {
@@ -157,6 +175,9 @@ const CONFIGPROVIDER = {
                     'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
                     '<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; ' +
                     'Map data {attribution.OpenStreetMap}',
+                credits: {
+                    text: 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA'
+                },
                 subdomains: 'abcd',
                 minZoom: 0,
                 maxZoom: 20,
@@ -493,6 +514,9 @@ const CONFIGPROVIDER = {
                 attribution:
                     'Imagery provided by services from the Global Imagery Browse Services (GIBS), operated by the NASA/GSFC/Earth Science Data and Information System ' +
                     '(<a href="https://earthdata.nasa.gov">ESDIS</a>) with funding provided by NASA/HQ.',
+                credits: {
+                    text: 'Black Marble imagery courtesy NASA Earth Observatory'
+                },
                 bounds: [[-85.0511287776, -179.999999975], [85.0511287776, 179.999999975]],
                 minZoom: 1,
                 maxZoom: 9,

web/client/utils/__tests__/TileConfigProvider-test.js

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2017, 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 expect = require('expect');
+var TileConfigProvider = require('../TileConfigProvider');
+
+
+describe('TileConfigProvider', () => {
+    beforeEach( () => {
+
+    });
+    afterEach((done) => {
+        document.body.innerHTML = '';
+
+        setTimeout(done);
+    });
+    it('test getLayerConfig', () => {
+        const config = TileConfigProvider.getLayerConfig("OpenStreetMap");
+        expect(config).toExist();
+    });
+    it('test getLayerConfig with variant', () => {
+        const config = TileConfigProvider.getLayerConfig('Thunderforest.OpenCycleMap');
+        expect(config).toExist();
+    });
+    it('test getLayerConfig with variant optins', () => {
+        const [url, config] = TileConfigProvider.getLayerConfig('Thunderforest.Transport');
+        expect(url).toExist();
+        expect(config).toExist();
+    });
+});