From a89c40afda1a19ff8680b691abc81ae55651959b Mon Sep 17 00:00:00 2001 From: Mauro Bartolomeoli Date: Fri, 28 Aug 2015 11:24:39 +0200 Subject: [PATCH] Fixes #77: pluggable leaflet layers support --- web/client/components/leaflet/Layer.jsx | 19 ++--------- .../leaflet/__tests__/Layer-test.jsx | 4 +++ .../components/leaflet/__tests__/Map-test.jsx | 4 ++- .../components/leaflet/plugins/OSMLayer.js | 15 +++++++++ .../components/leaflet/plugins/WMSLayer.js | 33 +++++++++++++++++++ .../examples/viewer/containers/Viewer.jsx | 3 ++ web/client/utils/leaflet/Layers.js | 26 +++++++++++++++ 7 files changed, 87 insertions(+), 17 deletions(-) create mode 100644 web/client/components/leaflet/plugins/OSMLayer.js create mode 100644 web/client/components/leaflet/plugins/WMSLayer.js create mode 100644 web/client/utils/leaflet/Layers.js diff --git a/web/client/components/leaflet/Layer.jsx b/web/client/components/leaflet/Layer.jsx index f3544e462c..b687e81408 100644 --- a/web/client/components/leaflet/Layer.jsx +++ b/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: '© OpenStreetMap 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); } diff --git a/web/client/components/leaflet/__tests__/Layer-test.jsx b/web/client/components/leaflet/__tests__/Layer-test.jsx index 1b5b480cf6..dff5b30df2 100644 --- a/web/client/components/leaflet/__tests__/Layer-test.jsx +++ b/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 = '
'; let map = L.map('map'); diff --git a/web/client/components/leaflet/__tests__/Map-test.jsx b/web/client/components/leaflet/__tests__/Map-test.jsx index e0867bece0..a0501ab2b1 100644 --- a/web/client/components/leaflet/__tests__/Map-test.jsx +++ b/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( diff --git a/web/client/components/leaflet/plugins/OSMLayer.js b/web/client/components/leaflet/plugins/OSMLayer.js new file mode 100644 index 0000000000..ada55b68b6 --- /dev/null +++ b/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: '© OpenStreetMap contributors'}); +}); diff --git a/web/client/components/leaflet/plugins/WMSLayer.js b/web/client/components/leaflet/plugins/WMSLayer.js new file mode 100644 index 0000000000..e2639aaf99 --- /dev/null +++ b/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)); +}); diff --git a/web/client/examples/viewer/containers/Viewer.jsx b/web/client/examples/viewer/containers/Viewer.jsx index 9575be008e..436e9d7738 100644 --- a/web/client/examples/viewer/containers/Viewer.jsx +++ b/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, diff --git a/web/client/utils/leaflet/Layers.js b/web/client/utils/leaflet/Layers.js new file mode 100644 index 0000000000..f4636734ce --- /dev/null +++ b/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;