Fixes #1624: configuration from url for the api example

web/client/components/app/StandardRouter.jsx

@@ -14,9 +14,13 @@ const {Router, Route, hashHistory} = require('react-router');
 
 const Localized = require('../I18N/Localized');
 
+const assign = require('object-assign');
+
 const Theme = connect((state) => ({
     theme: state.theme && state.theme.selectedTheme && state.theme.selectedTheme.id
-}))(require('../theme/Theme'));
+}), {}, (stateProps, dispatchProps, ownProps) => {
+    return assign({}, stateProps, dispatchProps, ownProps);
+})(require('../theme/Theme'));
 
 const StandardRouter = React.createClass({
     propTypes: {

web/client/examples/api/init.js

@@ -2,11 +2,15 @@
 function init() {
 /*eslint-enable */
     var cfg;
+    var cfgUrl;
+    var theme;
     var embeddedPlugins;
     var pluginsCfg;
 
     /*eslint-disable */
-    cfg = MapStore2.loadConfigFromStorage('mapstore.example.plugins.' + MapStore2.getMapNameFromRequest());
+    cfg = MapStore2.loadConfigFromStorage('mapstore.example.plugins.' + MapStore2.getParamFromRequest('map'));
+    cfgUrl = MapStore2.getParamFromRequest('config');
+    theme = MapStore2.getParamFromRequest('theme');
     /*eslint-enable */
     embeddedPlugins = {
         "desktop": [
@@ -29,11 +33,13 @@ function init() {
     pluginsCfg = cfg && MapStore2.buildPluginsCfg(cfg.pluginsCfg.standard, cfg.userCfg) || embeddedPlugins;
     MapStore2.create('container', {
         plugins: pluginsCfg,
+        configUrl: cfgUrl,
         initialState: cfg && cfg.state && {
             defaultState: cfg.state
         } || null,
         style: cfg && cfg.customStyle,
         theme: {
+            theme,
             path: '../../dist/themes'
         }
     });

web/client/jsapi/MapStore2.js

@@ -12,7 +12,7 @@ const StandardApp = require('../components/app/StandardApp');
 const LocaleUtils = require('../utils/LocaleUtils');
 const {connect} = require('react-redux');
 
-const {configureMap} = require('../actions/config');
+const {configureMap, loadMapConfig} = require('../actions/config');
 
 const url = require('url');
 
@@ -169,7 +169,7 @@ function loadConfigFromStorage(name = 'mapstore.embedded') {
     return null;
 }
 
-function getMapNameFromRequest(paramName = 'map') {
+function getParamFromRequest(paramName) {
     const urlQuery = url.parse(window.location.href, true).query;
     return urlQuery[paramName] || null;
 }
@@ -200,6 +200,17 @@ const actionListeners = {};
 let stateChangeListeners = [];
 let app;
 
+const getInitialActions = (options) => {
+    if (!options.initialState) {
+        if (options.configUrl) {
+            return [loadMapConfig.bind(null, options.configUrl || defaultConfig)];
+        }
+        return [configureMap.bind(null, options.config || defaultConfig)];
+    }
+    return [];
+};
+
+
 /**
  * MapStore2 JavaScript API. Allows embedding MapStore2 functionalities into
  * a standard HTML page.
@@ -217,6 +228,7 @@ const MapStore2 = {
      *  * **plugins**: list of plugins (and the related configuration) to be included in the app
      *    look at [Plugins documentation](./plugins-documentation) for further details
      *  * **config**: map configuration object for the application (look at [Map Configuration](./maps-configuration) for details)
+     *  * **configUrl**: map configuration url for the application (look at [Map Configuration](./maps-configuration) for details)
      *  * **initialState**: allows setting the initial application state (look at [State Configuration](./app-state-configuration) for details)
      *
      * Styling can be configured either using a **theme**, or a complete custom **less stylesheet**, using the
@@ -234,6 +246,7 @@ const MapStore2 = {
      *              ...
      *          }
      *      },
+     *      configUrl: '...',
      *      initialState: {
      *          defaultState: {
      *              ...
@@ -272,7 +285,7 @@ const MapStore2 = {
         }))(require('../components/app/StandardRouter'));
 
         const appStore = require('../stores/StandardStore').bind(null, initialState || {}, {});
-        const initialActions = options.initialState ? [] : [configureMap.bind(null, options.config || defaultConfig)];
+        const initialActions = getInitialActions(options);
         const appConfig = {
             storeOpts: assign({}, storeOpts, {notify: true}),
             appStore,
@@ -309,7 +322,7 @@ const MapStore2 = {
         });
     },
     buildPluginsCfg,
-    getMapNameFromRequest,
+    getParamFromRequest,
     loadConfigFromStorage,
     /**
      * Adds a listener that will be notified of all the MapStore2 events (**actions**), or only some of them.

web/client/plugins/QueryPanel.jsx

@@ -115,7 +115,7 @@ const tocSelector = createSelector(
     [
         (state) => state.controls && state.controls.toolbar && state.controls.toolbar.active === 'toc',
         groupsSelector,
-        (state) => state.layers.settings || {expanded: false, options: {opacity: 1}},
+        (state) => state.layers && state.layers.settings || {expanded: false, options: {opacity: 1}},
         (state) => state.controls && state.controls.queryPanel && state.controls.queryPanel.enabled || false
     ], (enabled, groups, settings, querypanelEnabled) => ({
         enabled,

web/client/plugins/TOC.jsx

@@ -126,7 +126,7 @@ const tocSelector = createSelector(
     [
         (state) => state.controls && state.controls.toolbar && state.controls.toolbar.active === 'toc',
         groupsSelector,
-        (state) => state.layers.settings || {expanded: false, options: {opacity: 1}},
+        (state) => state.layers && state.layers.settings || {expanded: false, options: {opacity: 1}},
         (state) => state.controls && state.controls.queryPanel && state.controls.queryPanel.enabled || false
     ], (enabled, groups, settings, querypanelEnabled) => ({
         enabled,