Improvements to the jsapi and the related demo

geosolutions-it · Mar 8, 2017 · c6e2219 · c6e2219
1 parent 3c7d402
commit c6e2219
Show file tree

Hide file tree

Showing 14 changed files with 179 additions and 136 deletions.
diff --git a/web/client/examples/api/index.html b/web/client/examples/api/index.html
@@ -12,6 +12,11 @@
         <link rel="stylesheet" href="https://rawgit.com/geosolutions-it/MapStore2-theme/master/theme/default/css/css.css">
         <link rel="stylesheet" href="https://rawgit.com/geosolutions-it/MapStore2-theme/master/theme/default/css/ms2-theme.css">
         <link rel="stylesheet" href="https://rawgit.com/geosolutions-it/MapStore2-theme/master/theme/default/css/font.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css">
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js"></script>
         <script src="https://maps.google.com/maps/api/js?v=3"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
@@ -25,7 +30,23 @@
                 top: 100px;
                 bottom: 100px;
                 left: 100px;
-                right: 100px;
+                right: 600px;
+            }
+            #help {
+                position: absolute;
+                top: 100px;
+                bottom: 100px;
+                width: 500px;
+                right: 50px;
+                padding: 10px;
+                border: solid 1px black;
+            }
+            #map {
+                position:absolute;
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
             }
             h1 {
                 text-align: center;
@@ -36,6 +57,35 @@
     <body onload="init()">
         <h1>MapStore2 Embedded</h1>
         <div id="container"></div>
+        <div id="help">
+            <h1>Embed MapStore2 in your website</h1>
+            <p>
+                You can easily embed MapStore2 in your website, and load your UI and configuration dinamically!
+            </p>
+            <p>
+                Use the MapStore2 JavaScript API to add a MapStore2 map and tools to your page.
+            </p>
+            <pre class="brush: xml">
+                <div id="container"></div>
+            </pre>
+            <pre class="brush: js">
+                MapStore2.create('container', {
+                    plugins: ["Map"]
+                });
+            </pre>
+            <p>
+                Use the <a href="../plugins/" target="_blank">plugins example</a> to save your configuration with
+                a meaningful name and use it in the embedded example with the map=&lt;name&gt; parameter.
+            </p>
+            <p>
+                Look at the
+                <a href="https://github.com/geosolutions-it/MapStore2/tree/master/web/client/examples/api" target="_blank">full code</a>
+                of this example.
+            </p>
+        </div>
         <script src="../../dist/api.js"></script>
+        <script type="text/javascript">
+             SyntaxHighlighter.all()
+        </script>
     </body>
 </html>
diff --git a/web/client/examples/api/init.js b/web/client/examples/api/init.js
@@ -1,118 +1,13 @@
-var defaultPlugins = {
-    "desktop": [
-          "Map",
-          "Help",
-          "Share",
-          "DrawerMenu",
-          "Identify",
-          "Locate",
-          "TOC",
-          "BackgroundSwitcher",
-          "Measure",
-          "MeasureResults",
-          "Print",
-          "ShapeFile",
-          "Settings",
-          "MetadataExplorer",
-          "MousePosition",
-          "Toolbar",
-          "ScaleBox",
-          "ZoomAll",
-          "MapLoading",
-          "Snapshot",
-          "ZoomIn",
-          "ZoomOut",
-          "Login",
-          "OmniBar",
-          "BurgerMenu",
-          "Expander",
-          "Undo",
-          "Redo"
-    ]
-};
-
-function mergeDefaultConfig(pluginName, cfg) {
-    var propertyName;
-    var i;
-    var result;
-    for (i = 0; i < defaultPlugins.desktop.length; i++) {
-        if (defaultPlugins.desktop[i].name === pluginName) {
-            result = defaultPlugins.desktop[i].cfg;
-            for (propertyName in cfg) {
-                if (cfg.hasOwnProperty(propertyName)) {
-                    result[propertyName] = cfg[propertyName];
-                }
-            }
-            return result;
-        }
-    }
-    return cfg;
-}
-
-function buildPluginsCfg(plugins, cfg) {
-    var pluginsCfg = [];
-    var i;
-    for (i = 0; i < plugins.length; i++) {
-        if (cfg[plugins[i] + "Plugin"]) {
-            pluginsCfg.push({
-                name: plugins[i],
-                cfg: mergeDefaultConfig(plugins[i], cfg[plugins[i] + "Plugin"])
-            });
-        } else {
-            pluginsCfg.push({
-                name: plugins[i],
-                cfg: mergeDefaultConfig(plugins[i], {})
-            });
-        }
-    }
-    return {
-        mobile: pluginsCfg,
-        desktop: pluginsCfg
-    };
-}
 /*eslint-disable */
 function init() {
 /*eslint-enable */
-    var mapName;
-    var params;
-    var param;
-    var i;
     var cfg;
-    var loaded;
-    var defaultState;
     var embeddedPlugins;
     var pluginsCfg;
-    var initialDefaultState;
-
-    if (window.location.search) {
-        params = window.location.search.substring(1).split('&');
-        for (i = 0; i < params.length; i++) {
-            param = params[i].split('=');
-            if (param[0] === 'map') {
-                mapName = param[1];
-            }
-        }
-    }
 
-    if (mapName) {
-        loaded = localStorage.getItem('mapstore.example.plugins.' + mapName);
-        if (loaded) {
-            cfg = JSON.parse(loaded);
-        }
-    }
-
-    defaultState = {
-        controls: {
-            toolbar: {
-                active: null,
-                expanded: false
-            },
-            drawer: {
-                enabled: false,
-                menu: "1"
-            }
-        }
-    };
+    /*eslint-disable */
+    cfg = MapStore2.loadConfigFromStorage('mapstore.example.plugins.' + MapStore2.getMapNameFromRequest());
+    /*eslint-enable */
     embeddedPlugins = {
         "desktop": [
             "Map",
@@ -128,23 +23,15 @@ function init() {
             "DrawerMenu",
             "TOC",
             "BackgroundSwitcher",
-            "BurgerMenu",
             "Identify"
       ]};
-
-    pluginsCfg = cfg && buildPluginsCfg(cfg.pluginsCfg.standard, cfg.userCfg) || embeddedPlugins;
-    initialDefaultState = cfg && {} || defaultState;
     /*eslint-disable */
+    pluginsCfg = cfg && MapStore2.buildPluginsCfg(cfg.pluginsCfg.standard, cfg.userCfg) || embeddedPlugins;
     MapStore2.create('container', {
     /*eslint-enable */
         plugins: pluginsCfg,
-        initialState: {
-            defaultState: initialDefaultState
-        },
-        storeOpts: {
-            persist: {
-                whitelist: ['security']
-            }
-        }
+        initialState: cfg && cfg.state && {
+            defaultState: cfg.state
+        } || null
     });
 }
diff --git a/web/client/examples/plugins/components/PluginCreator.jsx b/web/client/examples/plugins/components/PluginCreator.jsx
@@ -54,7 +54,7 @@ const PluginCreator = React.createClass({
                   disabled={true}
                   checked={true}
                   >
-                  Live edit your own plugin
+                  Live edit your plugin
               </Checkbox>
           </FormGroup>
             <Modal show={this.state.configVisible} bsSize="large" backdrop={false} onHide={() => {

diff --git a/web/client/examples/plugins/components/SaveAndLoad.jsx b/web/client/examples/plugins/components/SaveAndLoad.jsx
@@ -38,10 +38,12 @@ const SaveButton = React.createClass({
             .map((name) => <option key={name} value={name}>{name}</option>)];
     },
     render() {
+        const embedded = (<a href={'../api/?map=' + this.state.loadname} target="_blank">Load in embedded version!</a>);
         return (<div className="save">
             <Button onClick={this.save} bsStyle="primary" disabled={this.state.savename === ''}>Save</Button>
             <FormControl ref="savename" onChange={this.onChangeSaveName} type="text"/>
             <Button onClick={this.load} bsStyle="primary" disabled={this.state.loadname === ''}>Load</Button>
+            {(this.state.loadname !== '') ? embedded : <span/>}
             <FormControl ref="loadname" onChange={this.onChangeLoadName} componentClass="select">
                 {this.renderSaved()}
             </FormControl>

diff --git a/web/client/examples/plugins/index.html b/web/client/examples/plugins/index.html
@@ -4,6 +4,7 @@
         <meta charset="UTF-8">
         <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
         <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway" type='text/css'>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
         <link rel="stylesheet" href="https://rawgit.com/Leaflet/Leaflet.draw/v0.2.4/dist/leaflet.draw.css" />
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.css" />

diff --git a/web/client/jsapi/MapStore2.js b/web/client/jsapi/MapStore2.js
@@ -14,6 +14,8 @@ const {connect} = require('react-redux');
 
 const {configureMap} = require('../actions/config');
 
+const url = require('url');
+
 require('./mapstore2.css');
 
 const defaultConfig = {
@@ -102,16 +104,94 @@ const defaultConfig = {
 };
 
 const defaultPlugins = {
-    "mobile": [{
-        "name": "Map",
-        "cfg": {
-            "zoomControl": false,
-            "tools": ["locate"]
-        }
-    }],
-    "desktop": ["Map"]
+    "mobile": ["Map"],
+    "desktop": [
+          "Map",
+          "Help",
+          "Share",
+          "DrawerMenu",
+          "Identify",
+          "Locate",
+          "TOC",
+          "BackgroundSwitcher",
+          "Measure",
+          "MeasureResults",
+          "Print",
+          "ShapeFile",
+          "Settings",
+          "MetadataExplorer",
+          "MousePosition",
+          "Toolbar",
+          "ScaleBox",
+          "ZoomAll",
+          "MapLoading",
+          "Snapshot",
+          "ZoomIn",
+          "ZoomOut",
+          "Login",
+          "OmniBar",
+          "BurgerMenu",
+          "Expander",
+          "Undo",
+          "Redo"
+    ]
 };
 
+function mergeDefaultConfig(pluginName, cfg) {
+    var propertyName;
+    var i;
+    var result;
+    for (i = 0; i < defaultPlugins.desktop.length; i++) {
+        if (defaultPlugins.desktop[i].name === pluginName) {
+            result = defaultPlugins.desktop[i].cfg;
+            for (propertyName in cfg) {
+                if (cfg.hasOwnProperty(propertyName)) {
+                    result[propertyName] = cfg[propertyName];
+                }
+            }
+            return result;
+        }
+    }
+    return cfg;
+}
+
+function loadConfigFromStorage(name = 'mapstore.embedded') {
+    if (name) {
+        const loaded = localStorage.getItem(name);
+        if (loaded) {
+            return JSON.parse(loaded);
+        }
+    }
+    return null;
+}
+
+function getMapNameFromRequest(paramName = 'map') {
+    const urlQuery = url.parse(window.location.href, true).query;
+    return urlQuery[paramName] || null;
+}
+
+function buildPluginsCfg(plugins, cfg) {
+    var pluginsCfg = [];
+    var i;
+    for (i = 0; i < plugins.length; i++) {
+        if (cfg[plugins[i] + "Plugin"]) {
+            pluginsCfg.push({
+                name: plugins[i],
+                cfg: mergeDefaultConfig(plugins[i], cfg[plugins[i] + "Plugin"])
+            });
+        } else {
+            pluginsCfg.push({
+                name: plugins[i],
+                cfg: mergeDefaultConfig(plugins[i], {})
+            });
+        }
+    }
+    return {
+        mobile: pluginsCfg,
+        desktop: pluginsCfg
+    };
+}
+
 const MapStore2 = {
     create(container, options) {
         const embedded = require('../containers/Embedded');
@@ -132,19 +212,22 @@ const MapStore2 = {
             pages
         }))(require('../components/app/StandardRouter'));
 
-        const appStore = require('../stores/StandardStore').bind(null, initialState, {});
-
+        const appStore = require('../stores/StandardStore').bind(null, initialState || {}, {});
+        const initialActions = options.initialState ? [] : [configureMap.bind(null, options.config || defaultConfig)];
         const appConfig = {
             storeOpts,
             appStore,
             pluginsDef,
-            initialActions: [configureMap.bind(null, options.config || defaultConfig)],
+            initialActions,
             appComponent: StandardRouter,
             printingEnabled: false
         };
 
         ReactDOM.render(<StandardApp {...appConfig}/>, document.getElementById(container));
-    }
+    },
+    buildPluginsCfg,
+    getMapNameFromRequest,
+    loadConfigFromStorage
 };
 
 if (!global.Intl ) {