#8334 Persist viewer type in the map configuration (#8990)

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;