Merge pull request #161 from bartvde/baselayers

Take base layers from geonode settings

Author: bartvde

geonode-client/templates/geonode-client/_client_composer_js.html

@@ -1,4 +1,4 @@
 {% load static %}
-<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,Object.assign,URLSearchParams"></script>
+<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,Object.assign"></script>
 <script type="text/javascript" src="{% static 'geonode-client/js/composer.min.js' %}"></script>
 <script type="text/javascript" src="{% static 'geonode-client/cesium/Cesium.js' %}"></script>

geonode-client/templates/geonode-client/map_new.html

@@ -47,7 +47,7 @@
         tools: [{ptype: "gxp_getfeedfeatureinfo"}],
     };
 		var config = Object.assign( defaultConfig, {{ config|safe }});
-		var options = {baseUrl: "{{ GEOSERVER_BASE_URL }}", sources: config.sources, server: "{{SITEURL}}", wmsServer: "{{ GEOSERVER_BASE_URL }}ows/", layer: new URLSearchParams(window.location.search).get('layer')};
+		var options = {mapConfig: config, baseUrl: "{{ GEOSERVER_BASE_URL }}", sources: config.sources, server: "{{SITEURL}}", wmsServer: "{{ GEOSERVER_BASE_URL }}ows/"};
 		{% if user.is_authenticated %}
 			options.userLoggedIn = true;
 		{% endif %}

src/components/geonode.jsx

@@ -54,10 +54,11 @@ class GeoNodeViewer extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      tileServices: undefined,
       errors: [],
       errorOpen: false
     };
-    this._local = getLocalGeoServer(props.sources, props.baseUrl);
+    this._local = getLocalGeoServer(props.config.sources, props.baseUrl);
   }
   getChildContext() {
     return {
@@ -70,24 +71,19 @@ class GeoNodeViewer extends React.Component {
     this.updateMap(this.props);
     this.mode = this.props.mode || 'viewer';
     this.edit = (this.mode === 'composer');
-    if (this.props.layer) {
-      WMSService.createLayerFromGetCaps(this.props.wmsServer, this.props.layer, map.getView().getProjection(), function(layer) {
-        map.addLayer(layer);
-        map.getView().fit(ol.proj.transformExtent(layer.get('EX_GeographicBoundingBox'), 'EPSG:4326', map.getView().getProjection()), map.getSize(), {constrainResolution: false});
-      }, this.props.proxy);
-    }
   }
   componentWillReceiveProps(props) {
     this.updateMap(props);
   }
   updateMap(props) {
     if (props.config) {
+      var tileServices = [];
       var errors = [];
       var filteredErrors = [];
       if (props.zoomToLayer && props.config.map.layers[props.config.map.layers.length - 1].bbox) {
         this._extent = props.config.map.layers[props.config.map.layers.length - 1].bbox;
       }
-      MapConfigService.load(MapConfigTransformService.transform(props.config, errors), map, this.props.proxy);
+      MapConfigService.load(MapConfigTransformService.transform(props.config, errors, tileServices), map, this.props.proxy);
       for (var i = 0, ii = errors.length; i < ii; ++i) {
         // ignore the empty baselayer since we have checkbox now for base layer group
         if (errors[i].layer.type !== 'OpenLayers.Layer') {
@@ -99,7 +95,8 @@ class GeoNodeViewer extends React.Component {
       }
       this.setState({
         errors: filteredErrors,
-        errorOpen: true
+        errorOpen: true,
+        tileServices: tileServices
       });
     }
   }
@@ -152,7 +149,7 @@ class GeoNodeViewer extends React.Component {
         <div id='globe-button'><Globe tooltipPosition='right' map={map} /></div>
         <div id='print-button'><QGISPrint menu={false} map={map} layouts={this.props.printLayouts} /></div>
         <div id='home-button'><HomeButton extent={this._extent} tooltipPosition='right' map={map} /></div>
-        <div><LayerList showZoomTo={true} addBaseMap={{tileServices: undefined}} addLayer={layerList} showTable={true} allowReordering={true} includeLegend={true} allowRemove={this.edit} tooltipPosition='left' allowStyling={this.edit || this.props.zoomToLayer} map={map} /></div>
+        <div><LayerList showZoomTo={true} addBaseMap={{tileServices: this.state.tileServices}} addLayer={layerList} showTable={true} allowReordering={true} includeLegend={true} allowRemove={this.edit} tooltipPosition='left' allowStyling={this.edit || this.props.zoomToLayer} map={map} /></div>
         <div id='zoom-buttons'><Zoom tooltipPosition='right' map={map} /></div>
         <div id='rotate-button'><Rotate autoHide={true} tooltipPosition='right' map={map} /></div>
         <div id='popup' className='ol-popup'><InfoPopup toggleGroup='navigation' toolId='nav' infoFormat='application/vnd.ogc.gml' map={map} /></div>
@@ -165,13 +162,12 @@ class GeoNodeViewer extends React.Component {
 
 GeoNodeViewer.props = {
   config: React.PropTypes.object,
+  loadMapConfig: React.PropTypes.bool,
   proxy: React.PropTypes.string,
   theme: React.PropTypes.object,
   mode: React.PropTypes.string,
   server: React.PropTypes.string,
-  printLayouts: React.PropTypes.array,
-  wmsServer: React.PropTypes.string,
-  layer: React.PropTypes.string
+  printLayouts: React.PropTypes.array
 };
 
 GeoNodeViewer.defaultProps = {

src/composer.jsx

@@ -22,9 +22,6 @@ class Composer {
     this._checkLogin = options.checkLogin || false;
     this._printLayouts = options.printLayouts;
     this._theme = options.theme;
-    this._layer = options.layer;
-    this._wmsServer = options.wmsServer;
-    this._sources = options.sources;
     this._baseUrl = options.baseUrl;
   }
   set server(value) {
@@ -45,19 +42,13 @@ class Composer {
   set theme(value) {
     this._theme = value;
   }
-  set layer(value) {
-    this._layer = value;
-  }
-  set wmsServer(value) {
-    this._wmsServer = value;
-  }
   compose() {
     store.dispatch(setServerUrl(this._server));
     store.dispatch(setMapId(this._mapId));
     store.dispatch(setMapConfig(this._mapConfig));
     store.dispatch(setCheckLogin(this._checkLogin));
     store.dispatch(setUserLoggedIn(this._userLoggedIn));
-    ReactDOM.render(<Provider store={store}><IntlProvider locale='en' messages={enMessages}><GeonodeComposer baseUrl={this._baseUrl} sources={this._sources} theme={this._theme} wmsServer={this._wmsServer} layer={this._layer} printLayouts={this._printLayouts} mode='composer' config={this._mapConfig} proxy={this._proxy} /></IntlProvider></Provider>, document.getElementById(this._domId));
+    ReactDOM.render(<Provider store={store}><IntlProvider locale='en' messages={enMessages}><GeonodeComposer baseUrl={this._baseUrl} theme={this._theme} printLayouts={this._printLayouts} mode='composer' config={this._mapConfig} proxy={this._proxy} /></IntlProvider></Provider>, document.getElementById(this._domId));
   }
 }
 

tests/components/geonodeviewer.test.js

@@ -122,13 +122,13 @@ describe('GeoNodeViewer', () => {
         assert.deepEqual(wrapper.find(LayerList).prop('addLayer'),layerList);
       });
       it('as addLayer list', () => {
-        const sources = {'0': { ptype: 'gxp_wmscsource', url: 'http://geonode.org?access_token=1', title: 'test'}}
+        config.sources['0'] = {ptype: 'gxp_wmscsource', url: 'http://geonode.org?access_token=1', title: 'test'};
         const baseUrl = 'http://geonode.org'
         const layerList = {
           sources: [{title: 'test', url: 'http://geonode.org?access_token=1', type: 'WMS'}],
           allowUserInput: true
         };
-        const wrapper = shallowWithIntl(<GeoNodeViewer mode='composer' sources={sources} baseUrl={baseUrl} config={config}/>, {});
+        const wrapper = shallowWithIntl(<GeoNodeViewer mode='composer' baseUrl={baseUrl} config={config}/>, {});
         assert.deepEqual(wrapper.find(LayerList).prop('addLayer'),layerList);
       });
     });