diff --git a/web/client/examples/api/index.html b/web/client/examples/api/index.html index 4be5906e22..85cd2dcf28 100644 --- a/web/client/examples/api/index.html +++ b/web/client/examples/api/index.html @@ -12,6 +12,11 @@ + + + + + @@ -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 @@

MapStore2 Embedded

+
+

Embed MapStore2 in your website

+

+ You can easily embed MapStore2 in your website, and load your UI and configuration dinamically! +

+

+ Use the MapStore2 JavaScript API to add a MapStore2 map and tools to your page. +

+ 
+                

+
+ 
+                MapStore2.create('container', {
+                    plugins: ["Map"]
+                });
+
+

+ Use the plugins example to save your configuration with + a meaningful name and use it in the embedded example with the map=<name> parameter. +

+

+ Look at the + full code + of this example. +

+
+ diff --git a/web/client/examples/api/init.js b/web/client/examples/api/init.js index 4c99cf850c..778ff50ae0 100644 --- a/web/client/examples/api/init.js +++ b/web/client/examples/api/init.js @@ -1,589 +1,37 @@ -var defaultPlugins = { - "desktop": [ - { - "name": "Map", - "cfg": { - "toolsOptions": { - "scalebar": { - "leaflet": { - "position": "bottomright" - } - } - }, - "zoomControl": false - } - }, - { - "name": "Help", - "cfg": { - "asPanel": false, - "closeGlyph": "1-close" - } - }, - { - "name": "Share", - "cfg": { - "closeGlyph": "1-close" - } - }, - { - "name": "DrawerMenu", - "cfg": { - "glyph": "1-stilo", - "buttonStyle": "primary", - "buttonClassName": "square-button", - "singleSection": true - } - }, - { - "name": "Identify", - "showIn": [ - "IdentifyBar", - "Settings" - ], - "cfg": { - "panelClassName": "modal-dialog info-panel modal-content", - "headerClassName": "modal-header", - "bodyClassName": "modal-body info-wrap", - "asPanel": false, - "headerGlyph": "", - "glyph": "map-marker", - "className": "square-button", - "closeGlyph": "1-close", - "wrapRevGeocode": false, - "enableRevGeocode": true, - "viewerOptions": { - "container": "{context.ReactSwipe}", - "header": "{context.SwipeHeader}", - "headerOptions": { - "useButtons": true - }, - "containerProps": { - "continuous": false - }, - "collapsible": false - } - } - }, - { - "name": "Locate", - "cfg": { - "glyph": "1-position-1", - "btnConfig": { - "className": "square-button" - } - }, - "override": { - "Toolbar": { - "alwaysVisible": true - } - } - }, - { - "name": "TOC", - "cfg": { - "visibilityCheckType": "glyph", - "settingsOptions": { - "includeCloseButton": false, - "closeGlyph": "1-close", - "asModal": false, - "buttonSize": "small" - } - }, - "override": { - "DrawerMenu": { - "glyph": "1-layer", - "buttonConfig": { - "buttonClassName": "square-button no-border" - } - } - } - }, - { - "name": "BackgroundSwitcher", - "cfg": { - "fluid": true, - "columnProperties": { - "xs": 12, - "sm": 12, - "md": 12 - } - }, - "override": { - "DrawerMenu": { - "glyph": "1-map", - "buttonConfig": { - "buttonClassName": "square-button no-border" - } - } - } - }, - { - "name": "Measure", - "cfg": { - "showResults": false, - "lineGlyph": "1-measure-lenght", - "areaGlyph": "1-measure-area", - "bearingGlyph": "1-bearing", - "useButtonGroup": false - }, - "override": { - "DrawerMenu": { - "glyph": "1-stilo", - "buttonConfig": { - "buttonClassName": "square-button no-border" - } - } - } - }, - { - "name": "MeasureResults", - "cfg": { - "closeGlyph": "1-close", - "withPanelAsContainer": false - } - }, - { - "name": "Print", - "cfg": { - "useFixedScales": false, - "syncMapPreview": true, - "mapPreviewOptions": { - "enableScalebox": false, - "enableRefresh": false - }, - "closeGlyph": "1-close", - "submitConfig": { - "buttonConfig": { - "bsSize": "medium", - "bsStyle": "primary" - }, - "glyph": "" - }, - "previewOptions": { - "buttonStyle": "primary" - }, - "withPanelAsContainer": false - } - }, - { - "name": "ShapeFile", - "cfg": { - "wrap": true, - "wrapWithPanel": false, - "closeGlyph": "1-close", - "buttonSize": "small" - } - }, - { - "name": "Settings", - "hideFrom": [ - "Toolbar", - "DrawerMenu" - ], - "cfg": { - "wrapWithPanel": false, - "closeGlyph": "1-close", - "overrideSettings": { - "history": false - }, - "wrap": true - } - }, - { - "name": "MetadataExplorer", - "cfg": { - "showGetCapLinks": false, - "addAuthentication": false, - "wrap": true, - "wrapWithPanel": false, - "closeGlyph": "1-close", - "initialCatalogURL": { - "csw": "http://demo.geo-solutions.it/geoserver/csw", - "wms": "http://demo.geo-solutions.it/geoserver/wms" - } - } - }, - "MousePosition", - { - "name": "Search", - "cfg": { - "withToggle": [ - "max-width: 768px", - "min-width: 768px" - ] - } - }, - { - "name": "Toolbar", - "id": "NavigationBar", - "stateSelector": "toolbar", - "cfg": { - "buttonStyle": "primary", - "id": "navigationBar" - } - }, - { - "name": "Toolbar", - "id": "IdentifyBar", - "stateSelector": "identify", - "cfg": { - "buttonStyle": "primary", - "pressedButtonStyle": "success", - "id": "identifyBar" - }, - "isDefault": false - }, - "ScaleBox", - { - "name": "ZoomAll", - "cfg": { - "className": "square-button" - } - }, - { - "name": "MapLoading", - "cfg": { - "className": "ms2-loading" - }, - "override": { - "Toolbar": { - "alwaysVisible": true - } - } - }, - { - "name": "Snapshot", - "cfg": { - "wrap": true, - "wrapWithPanel": false, - "closeGlyph": "1-close", - "buttonStyle": "primary" - } - }, - { - "name": "ZoomIn", - "override": { - "Toolbar": { - "alwaysVisible": true - } - } - }, - { - "name": "ZoomOut", - "override": { - "Toolbar": { - "alwaysVisible": true - } - } - }, - { - "name": "Login", - "cfg": { - "nav": false, - "menuProps": { - "noCaret": true - }, - "toolsCfg": [ - { - "buttonSize": "small", - "includeCloseButton": false, - "useModal": false, - "closeGlyph": "1-close" - }, - { - "buttonSize": "small", - "includeCloseButton": false, - "useModal": false, - "closeGlyph": "1-close" - }, - { - "buttonSize": "small", - "includeCloseButton": false, - "useModal": false, - "closeGlyph": "1-close" - } - ] - } - }, - "OmniBar", - { - "name": "BurgerMenu" - }, - { - "name": "Expander", - "cfg": { - "className": "square-button" - } - }, - { - "name": "Undo", - "cfg": { - "glyph": "1-screen-backward", - "buttonStyle": "primary", - "btnConfig": { - "className": "square-button" - } - } - }, - { - "name": "Redo", - "cfg": { - "glyph": "1-screen-forward", - "buttonStyle": "primary", - "btnConfig": { - "className": "square-button" - } - } - } - ] -}; - -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": [ - { - "name": "Map", - "cfg": { - "zoomControl": false - } - }, - "MousePosition", - { - "name": "Toolbar", - "cfg": { - "buttonStyle": "primary", - "style": { - "top": "70px" - } - } - }, - { - "name": "ZoomAll", - "cfg": { - "className": "square-button" - } - }, - { - "name": "Expander", - "cfg": { - "className": "square-button" - } - }, - { - "name": "ZoomIn", - "override": { - "Toolbar": { - "alwaysVisible": true - } - } - }, - { - "name": "ZoomOut", - "override": { - "Toolbar": { - "alwaysVisible": true - } - } - }, - "ScaleBox", - { - "name": "OmniBar", - "cfg": { - "style": { - "right": "5px", - "top": "5px" - } - } - }, - { - "name": "Search" - }, - { - "name": "DrawerMenu", - "cfg": { - "glyph": "1-stilo", - "buttonStyle": "primary", - "buttonClassName": "square-button", - "singleSection": true, - "menuButtonStyle": { - "position": "absolute", - "top": 0 - } - } - }, - { - "name": "TOC", - "cfg": { - "visibilityCheckType": "glyph", - "settingsOptions": { - "includeCloseButton": false, - "closeGlyph": "1-close", - "asModal": false, - "buttonSize": "small" - } - }, - "override": { - "DrawerMenu": { - "glyph": "1-layer", - "buttonConfig": { - "buttonClassName": "square-button no-border" - } - } - } - }, - { - "name": "BackgroundSwitcher", - "cfg": { - "fluid": true, - "columnProperties": { - "xs": 12, - "sm": 12, - "md": 12 - } - }, - "override": { - "DrawerMenu": { - "glyph": "1-map", - "buttonConfig": { - "buttonClassName": "square-button no-border" - } - } - } - }, - "BurgerMenu", - { - "name": "Settings", - "cfg": { - "wrapWithPanel": false, - "closeGlyph": "1-close", - "overrideSettings": { - "history": false - }, - "wrap": true - } - }, - { - "name": "Identify", - "cfg": { - "panelClassName": "modal-dialog info-panel modal-content", - "headerClassName": "modal-header", - "bodyClassName": "modal-body info-wrap", - "asPanel": false, - "headerGlyph": "", - "glyph": "map-marker", - "className": "square-button", - "closeGlyph": "1-close", - "wrapRevGeocode": false, - "enableRevGeocode": true, - "viewerOptions": { - "container": "{context.ReactSwipe}", - "header": "{context.SwipeHeader}", - "headerOptions": { - "useButtons": true - }, - "containerProps": { - "continuous": false - }, - "collapsible": false - } - } - }]}; - - pluginsCfg = cfg && buildPluginsCfg(cfg.pluginsCfg.standard, cfg.userCfg) || embeddedPlugins; - initialDefaultState = cfg && {} || defaultState; + "Map", + "MousePosition", + "Toolbar", + "ZoomAll", + "Expander", + "ZoomIn", + "ZoomOut", + "ScaleBox", + "OmniBar", + "Search", + "DrawerMenu", + "TOC", + "BackgroundSwitcher", + "Identify" + ]}; /*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 index 492684b5df..29ad2d677f 100644 --- 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 { diff --git a/web/client/examples/plugins/components/SaveAndLoad.jsx b/web/client/examples/plugins/components/SaveAndLoad.jsx index 33b6e17a27..657c2fc7f3 100644 --- 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) => )]; }, render() { + const embedded = (Load in embedded version!); return (
+ {(this.state.loadname !== '') ? embedded : } {this.renderSaved()} diff --git a/web/client/examples/plugins/index.html b/web/client/examples/plugins/index.html index 9ba4e96c19..a22f49c5b0 100644 --- a/web/client/examples/plugins/index.html +++ b/web/client/examples/plugins/index.html @@ -4,6 +4,7 @@ + diff --git a/web/client/jsapi/MapStore2.js b/web/client/jsapi/MapStore2.js index 630ea8dcfa..3525e77d32 100644 --- 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(, document.getElementById(container)); - } + }, + buildPluginsCfg, + getMapNameFromRequest, + loadConfigFromStorage }; if (!global.Intl ) { diff --git a/web/client/plugins/DrawerMenu.jsx b/web/client/plugins/DrawerMenu.jsx index 50468bae4d..c29aa649a4 100644 --- a/web/client/plugins/DrawerMenu.jsx +++ b/web/client/plugins/DrawerMenu.jsx @@ -23,7 +23,7 @@ const {partialRight} = require('lodash'); const Menu = connect((state) => ({ show: state.controls.drawer && state.controls.drawer.enabled, - activeKey: state.controls.drawer && state.controls.drawer.menu, + activeKey: state.controls.drawer && state.controls.drawer.menu || "1", dynamicWidth: state.controls.queryPanel && state.controls.queryPanel.enabled && state.controls.drawer && state.controls.drawer.width || undefined }), { onToggle: toggleControl.bind(null, 'drawer', null), diff --git a/web/client/plugins/toolbar/assets/css/toolbar.css b/web/client/plugins/toolbar/assets/css/toolbar.css index a7f7fac521..7741c5d0f9 100644 --- a/web/client/plugins/toolbar/assets/css/toolbar.css +++ b/web/client/plugins/toolbar/assets/css/toolbar.css @@ -1,6 +1,6 @@ .mapToolbar { position: absolute; - top: 5px; + bottom: 5px; right: 5px; z-index: 1000; } diff --git a/web/client/product/assets/img/Api.png b/web/client/product/assets/img/Api.png new file mode 100644 index 0000000000..7089b9a1f1 Binary files /dev/null and b/web/client/product/assets/img/Api.png differ diff --git a/web/client/product/components/home/Examples.jsx b/web/client/product/components/home/Examples.jsx index e4e54bfd23..a924d11974 100644 --- a/web/client/product/components/home/Examples.jsx +++ b/web/client/product/components/home/Examples.jsx @@ -20,6 +20,7 @@ const carouselImages = { featuregrid: require('../../assets/img/FeatureGrid.png'), print: require('../../assets/img/Print.png'), plugins: require('../../assets/img/Plugins.png'), + api: require('../../assets/img/Api.png'), rasterstyler: require('../../assets/img/rasterstyler.png') }; @@ -91,6 +92,13 @@ var Examples = React.createClass({
+ + 900x500 +
+ + +
+ 900x500
diff --git a/web/client/translations/data.de-DE b/web/client/translations/data.de-DE index 73aa5e7101..cc933496af 100644 --- a/web/client/translations/data.de-DE +++ b/web/client/translations/data.de-DE @@ -108,6 +108,9 @@ "plugins":{ "html":"

Plugins

Erstelle deine eigene Anwendung

" }, + "api":{ + "html":"

API

Verwenden Sie APIs, um eine MapStore2-Karte in Ihre Anwendung aufzunehmen

" + }, "rasterstyler":{ "html":"

Raster Styler

Style deine Rasterebene

" } diff --git a/web/client/translations/data.en-US b/web/client/translations/data.en-US index 40daa81120..af2ae9aaf4 100644 --- a/web/client/translations/data.en-US +++ b/web/client/translations/data.en-US @@ -108,6 +108,9 @@ "plugins":{ "html":"

Plugins

Build your own application

" }, + "api":{ + "html":"

API

Use APIs to include a MapStore2 map in your application

" + }, "rasterstyler":{ "html":"

Raster Styler

Style your raster layer

" } diff --git a/web/client/translations/data.fr-FR b/web/client/translations/data.fr-FR index 0a87176568..fb5948483d 100644 --- a/web/client/translations/data.fr-FR +++ b/web/client/translations/data.fr-FR @@ -109,6 +109,9 @@ "plugins":{ "html":"

Plugins

Contruire sa propre application

" }, + "api":{ + "html":"

API

Utilisez les API pour inclure une carte MapStore2 dans votre application

" + }, "rasterstyler":{ "html":"

Représentation d'image

Représenter votre couche image

" } diff --git a/web/client/translations/data.it-IT b/web/client/translations/data.it-IT index 86e7d2b548..b8f2350e65 100644 --- a/web/client/translations/data.it-IT +++ b/web/client/translations/data.it-IT @@ -108,6 +108,9 @@ "plugins":{ "html":"

Plugins

Costruisci la tua applicazione

" }, + "api":{ + "html":"

API

Usa le API per includere una mappa MapStore2 nella tua applicazione

" + }, "rasterstyler":{ "html":"

Raster Styler

Crea stile per dati raster

" }