#8334 Persist viewer type in the map configuration

docs/developer-guide/local-config.md

@@ -99,6 +99,20 @@ This is the main structure:
     "leaflet": { ... },
     "cesium": { ... }
   },
+  // allow to define which 2D or 3D map library should be used based on the device
+  // the configuration below is the default one
+  // structure -> { mapType: { [visualizationMode]: { [deviceType]: mapLibrary } } }
+  // note: this configuration does not support expressions
+  "mapType": {
+    "2D": {
+      "desktop": "openlayers",
+      "mobile": "leaflet"
+    },
+    "3D": {
+      "desktop": "cesium",
+      "mobile": "cesium"
+    }
+  },
   "plugins": {
       // plugins to load for the mobile mode
       "mobile": [...]

docs/developer-guide/maps-configuration.md

@@ -3,12 +3,11 @@
 By default MapStore is able to open maps with this path in the URL:
 
 ```http
-http://localhost:8081/#viewer/<maptype>/<mapId>
+http://localhost:8081/#viewer/<mapId>
 ```
 
 Where:
 
-- `maptype` can be `leaflet` `openlayers` or `cesium`.
 - `mapId` can be a number or a string.
   - A **number** represents standard maps, stored on the database.
   - A **string** instead represents a static json file in the root of the application.
@@ -67,6 +66,7 @@ The following options define the map options (projection, position, layers):
 - `maxExtent: {number[]}` max bbox of the map expressed [minx, miny, maxx, maxy]
 - `layers: {object[]}` list of layers to be loaded on the map
 - `groups {object[]}`: contains information about the layer groups
+- `visualizationMode: {string}` defines if the map should be visualized in "2D" or "3D"
 
 i.e.
 
@@ -77,6 +77,7 @@ i.e.
     "units": "m",
     "center": {"x": 1000000.000000, "y": 5528000.000000, "crs": "EPSG:900913"},
     "zoom": 15,
+    "visualizationMode": "2D",
     "mapOptions": {
       "view": {
         "scales": [175000, 125000, 100000, 75000, 50000, 25000, 10000, 5000, 2500],

docs/developer-guide/mapstore-migration-guide.md

@@ -20,6 +20,73 @@ This is a list of things to check if you want to update from a previous version
 - Optionally check also accessory files like `.eslinrc`, if you want to keep aligned with lint standards.
 - Follow the instructions below, in order, from your version to the one you want to update to.
 
+## Migration from 2023.01.xx to 2023.02.00
+
+### Visualization mode in map configuration
+
+The map configuration stores the information related to the visualization mode 2D or 3D after saving a map.
+This update include also following changes:
+
+- `maptype` configuration inside the initialState of localConfig needs to be removed in favor of the global mapType configuration
+
+```diff
+{
+    // ...
+    "initialState": {
+        "defaultState": {
+            // ...
+-           "maptype": {
+-               "mapType": "{context.mode === 'desktop' ? 'openlayers' : 'leaflet'}"
+-           },
+            // ...
+        }
+    }
+    // ...
+}
+```
+
+- the `changeMapType` action has been deprecated in favor of the `changeVisualizationMode` action
+
+- the application does not expose the pathname of the viewer with `mapType` anymore. Example: the old path `/viewer/openlayers/1` becomes `/viewer/1`
+
+- it is possible to change the map library based on the device using the new `mapType` configuration in localConfig.json. This configuration is only needed for project with custom map library settings. The downstream projects based on the MapStore product don't need this update
+
+```diff
+{
+    // ...
++    "mapType": {
++       "2D": {
++           "desktop": "openlayers",
++           "mobile": "leaflet"
++       },
++       "3D": {
++           "desktop": "cesium",
++           "mobile": "cesium"
++       }
++   },
+    // ...
+}
+```
+
+- the app pages inside a MapStore project must be updated with a new entry, only for projects with custom pages and that are using context applications, here an example:
+
+```js
+import MapViewer from '@mapstore/product/pages/MapViewer';
+import productAppConfig from "@mapstore/product/appConfig";
+
+const appConfig = {
+    ...productAppConfig,
+    pages: [
+        // my custom pages ...,
+        {
+            name: "mapviewer",
+            path: "/viewer/:mapId/context/:contextId",
+            component: MapViewer
+        }
+    ]
+};
+```
+
 ## Migration from 2022.02.02 to 2023.01.00
 
 ### Log4j update to Log4j2

web/client/actions/__tests__/maptype-test.js

@@ -8,20 +8,24 @@
 
 import expect from 'expect';
 
-import { MAP_TYPE_CHANGED, changeMapType, updateLast2dMapType, UPDATE_LAST_2D_MAPTYPE } from '../maptype';
+import {
+    MAP_TYPE_CHANGED,
+    changeMapType,
+    VISUALIZATION_MODE_CHANGED,
+    changeVisualizationMode
+} from '../maptype';
 
 describe('Test correctness of the maptype actions', () => {
-
     it('changeMapType', () => {
         const retVal = changeMapType('maptype');
-        expect(retVal).toExist();
+        expect(retVal).toBeTruthy();
         expect(retVal.type).toBe(MAP_TYPE_CHANGED);
         expect(retVal.mapType).toBe('maptype');
     });
-    it('updateLast2dMapType', () => {
-        const retVal = updateLast2dMapType("leaflet");
-        expect(retVal).toExist();
-        expect(retVal.type).toBe(UPDATE_LAST_2D_MAPTYPE);
-        expect(retVal.mapType).toBe('leaflet');
+    it('changeVisualizationMode', () => {
+        const retVal = changeVisualizationMode('3D');
+        expect(retVal).toBeTruthy();
+        expect(retVal.type).toBe(VISUALIZATION_MODE_CHANGED);
+        expect(retVal.visualizationMode).toBe('3D');
     });
 });

web/client/actions/maptype.js

@@ -7,13 +7,14 @@
  */
 
 export const MAP_TYPE_CHANGED = 'MAP_TYPE_CHANGED';
-export const UPDATE_LAST_2D_MAPTYPE = "MAP_TYPE:UPDATE_LAST_2D_MAPTYPE";
+export const VISUALIZATION_MODE_CHANGED = 'MAP_TYPE:VISUALIZATION_MODE_CHANGED';
 
 /**
  * changes the map type
+ * @deprecated
  * @memberof actions.maptype
  * @param  {string} mapType the mapType.
- * @return {action}         the action of type `MAP_TYPE_CHANGED` with mapType
+ * @return {action} the action of type `MAP_TYPE_CHANGED` with mapType
  */
 export function changeMapType(mapType) {
     return {
@@ -22,24 +23,17 @@ export function changeMapType(mapType) {
     };
 }
 /**
- * Saves the last 2d map
- * @memberof actions.globeswitcher
- * @param  {string} mapType last maptype
- * @return {object}         action
- * ```
- * {
- *   type: MAPTYPE_2D_SELECTED,
- *   mapType
- * }
- * ```
+ * changes the visualization mode
+ * @memberof actions.maptype
+ * @param  {string} visualizationMode eg: 2D or 3D.
+ * @return {action} the action of type `VISUALIZATION_MODE_CHANGED` with visualizationMode
  */
-export function updateLast2dMapType(mapType) {
+export function changeVisualizationMode(visualizationMode) {
     return {
-        type: UPDATE_LAST_2D_MAPTYPE,
-        mapType
+        type: VISUALIZATION_MODE_CHANGED,
+        visualizationMode
     };
 }
-
 /**
  * Actions for map type management.Allow to manage the default map type.
  * @name actions.maptype

web/client/api.html

@@ -30,7 +30,7 @@
         <script type="text/javascript">
         function init() {
             MapStore2.create('container', {
-                originalUrl: "./#viewer/leaflet/0"
+                originalUrl: "./#viewer/0"
             });
         }
         </script>

web/client/components/buttons/GoFullButton.jsx

@@ -38,7 +38,7 @@ class GoFullButton extends React.Component {
         glyph: "share",
         tooltip: "fullscreen.viewLargerMap",
         urlRegex: "^(.*?)embedded.html.*?#\\/(\\d?)",
-        urlReplaceString: "$1#/viewer/leaflet/$2"
+        urlReplaceString: "$1#/viewer/$2"
     };
 
     render() {

web/client/components/contextcreator/ConfigureMapStep.jsx

@@ -11,11 +11,12 @@ import React from 'react';
 import Message from '../I18N/Message';
 import ConfirmDialog from '../misc/ConfirmDialog';
 import MapViewer from '../../containers/MapViewer';
+import { MapLibraries } from '../../utils/MapTypeUtils';
 
 export default ({
     pluginsConfig = {},
     plugins = {},
-    mapType = 'openlayers',
+    mapType = MapLibraries.OPENLAYERS,
     className = 'viewer context-creator-viewer',
     showConfirm = false,
     confirmMessage = 'contextCreator.configureMap.confirm',

web/client/components/contextcreator/ContextCreator.jsx

@@ -233,7 +233,8 @@ export default class ContextCreator extends React.Component {
             "Undo",
             "Redo",
             "Expander",
-            "FilterLayer"
+            "FilterLayer",
+            "GlobeViewSwitcher"
         ],
         ignoreViewerPlugins: false,
         allAvailablePlugins: [],

web/client/components/data/featuregrid/toolbars/Toolbar.jsx

@@ -10,6 +10,7 @@ import { getApi } from '../../../../api/userPersistedStorage';
 import TSplitButtonComp from "./TSplitButton";
 import Spinner from "react-spinkit";
 import Select from "react-select";
+import { MapLibraries } from '../../../../utils/MapTypeUtils';
 
 const TButton = withHint(TButtonComp);
 const TSplitButton = withHint(TSplitButtonComp);
@@ -172,7 +173,7 @@ const standardButtons = {
         id="snap-button"
         keyProp="snap-button"
         tooltipId={snapping ? "featuregrid.toolbar.disableSnapping" : "featuregrid.toolbar.enableSnapping"}
-        visible={mode === "EDIT" && (pluginCfg?.snapTool ?? true) && mapType === 'openlayers'}
+        visible={mode === "EDIT" && (pluginCfg?.snapTool ?? true) && mapType === MapLibraries.OPENLAYERS}
         onClick={() => {
             events.toggleSnapping && events.toggleSnapping(!snapping);
         }}

web/client/components/geostory/common/map/Controls.jsx

@@ -12,6 +12,7 @@ import Message from '../../../I18N/Message';
 import Select from "react-select";
 import {isNil} from "lodash";
 import { applyDefaults } from '../../../../utils/GeoStoryUtils';
+import { is3DVisualizationMode } from '../../../../utils/MapTypeUtils';
 
 import SwitchButton from '../../../misc/switch/SwitchButton';
 import localizedProps from '../../../misc/enhancers/localizedProps';
@@ -30,8 +31,9 @@ export const Controls = ({
         zoomControl: !isNil(map.zoomControl) ? map.zoomControl : true,
         mapInfoControl: !isNil(map.mapInfoControl) ? map.mapInfoControl : false
     });
+    const is3D = is3DVisualizationMode(map);
     return (<Form className="ms-geostory-map-controls">
-        <FormGroup>
+        {!is3D && <FormGroup>
             <ControlLabel><Message msgId="geostory.mapEditor.zoom"/></ControlLabel>
             <SwitchButton
                 onChange={() => {
@@ -60,7 +62,7 @@ export const Controls = ({
                 onChange={(val) => onChangeMap("mapOptions.zoomPosition", val && val.value ? val.value : "topLeft")}
                 placeholder="geostory.builder.settings.titlePlaceholder"
             />
-        </FormGroup>
+        </FormGroup>}
         <FormGroup>
             <ControlLabel><Message msgId="geostory.mapEditor.pan"/></ControlLabel>
             <SwitchButton
@@ -75,7 +77,7 @@ export const Controls = ({
                 checked={options.mapOptions && options.mapOptions.interactions && options.mapOptions.interactions.dragPan}
             />
         </FormGroup>
-        <FormGroup>
+        {!is3D && <FormGroup>
             <ControlLabel><Message msgId="geostory.mapEditor.identify"/></ControlLabel>
             <SwitchButton
                 onChange={() => {
@@ -93,7 +95,7 @@ export const Controls = ({
                 selectProps={{
                     wrapperStyle: { marginTop: 10 }
                 }}/>}
-        </FormGroup>
+        </FormGroup>}
     </Form>);
 };
 

web/client/components/geostory/common/map/FitBounds.jsx

@@ -11,9 +11,10 @@ import PropTypes from 'prop-types';
 
 import { reprojectBbox, reproject } from '../../../../utils/CoordinatesUtils';
 import Point from 'ol/geom/Point';
+import { MapLibraries } from '../../../../utils/MapTypeUtils';
 
 const zoomTo = {
-    openlayers: {
+    [MapLibraries.OPENLAYERS]: {
         fit: ({ map, geometry, padding, geometryProjection, fixedZoom, maxZoom, duration }) => {
             const view = map.getView();
             const mapProjection = view.getProjection().getCode();
@@ -32,7 +33,7 @@ const zoomTo = {
             });
         }
     },
-    leaflet: {
+    [MapLibraries.LEAFLET]: {
         fit: ({ map, geometry, padding, geometryProjection, fixedZoom, maxZoom, duration }) => {
             const zoom = fixedZoom ? map.getZoom() : maxZoom;
             const { top = 0, right = 0, bottom = 0, left = 0 } = padding;