Fix : #11455 Added a new Plugin called CameraPosition. by anup39 · Pull Request #11514 · geosolutions-it/MapStore2

anup39 · 2025-09-25T15:01:11Z

Description

This PR add new plugin called CameraPosition. In 3D mode it shows the camera position along with the height . The camera position plugin is now rendered in MapFooter. The following changes are made :

This plugin is available only for 3D
Refactor of the MousePosition components.
This new plugin have a structure similar to the MousePosition plugin.
Logic to manage the geoid model is implemented using @math.gl/geoid.
The geoid EGM96 is used to compute height above the mean sea level MSL

Please check if the PR fulfills these requirements

The commit message follows our guidelines: https://github.com/geosolutions-it/MapStore2/blob/master/CONTRIBUTING.md
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

What kind of change does this PR introduce? (check one with "x", remove the others)

Feature
Refactoring (no functional changes, no api changes)

Issue

What is the current behavior?

#11455

What is the new behavior?

Breaking change

Does this PR introduce a breaking change? (check one with "x", remove the other)

No

Other useful information

This plugin style needs to be further revised again after MapFooter refactor PR is merged . #11492

…x_cameraposition_11455

allyoucanmap · 2026-01-05T13:38:17Z

web/client/plugins/CameraPosition.jsx

+export default {
+    CameraPositionPlugin: Object.assign(CameraPositionPlugin, {
+        disablePluginIf: "{state('mapType') !== 'cesium'}"
+    },
+    {
+        MapFooter: { name: 'cameraPosition', position: 3, target: 'right-footer',
+            priority: 1}
+    })
+};


Please use the createPlugin function

allyoucanmap · 2026-01-05T13:40:33Z

web/client/actions/map.js

+export function changeCameraPositionCrs(crs) {
+    return {
+        type: CHANGE_CAMERA_POSITION_CRS,
+        crs
+    };
+}
+
+export function changeCameraPositionHeightType(heightType) {
+    return {
+        type: CHANGE_CAMERA_POSITION_HEIGHT_TYPE,
+        heightType
+    };
+}


I think this should be part of a new cameraposition state and not included inside the Map, this is valid for actions, reducers and selectors

allyoucanmap · 2026-01-05T13:41:08Z

web/client/components/map/cesium/Map.jsx

-                    height: cameraPosition.height
+                    height: cameraPosition.height,
+                    crs: this.props.viewerOptions?.cameraPosition?.crs || "EPSG:4326",
+                    heightType: this.props.viewerOptions?.cameraPosition?.heightType || 'Ellipsoidal'


Please remove all this change this should not be part of the Map state

allyoucanmap · 2026-01-05T13:43:54Z

web/client/components/mapcontrols/mouseposition/CRSSelector.jsx

+            <ControlLabel style={{ margin: 0, fontWeight: 'normal', minWidth: 'max-content' }}>
+                {label}
+            </ControlLabel>
+            <FormControl
+                componentClass="select"
+                id={id}
+                value={crs}
+                onChange={launchNewCRSAction}
+                bsSize="small"
+                style={{ borderRadius: 4 }}


please move all the inline styles inside the less theme. Also let's reduce the width of this selector to 90px

allyoucanmap · 2026-01-05T13:47:17Z

web/client/components/mapcontrols/mouseposition/HeightTypeSelector.jsx

+    const availableHeightTypes = [
+        { value: "Ellipsoidal", label: "Ellipsoidal" },
+        { value: "MSL", label: "MSL" }
+    ];
+
+    const filteredHeightTypes = filterAllowedHeight && filterAllowedHeight.length > 0
+        ? availableHeightTypes.filter((height) => filterAllowedHeight.includes(height.value))
+        : availableHeightTypes;


I think the filterAllowed... props are not clear so at least for the new configuration introduced in this PR we should avoid them. Please remove filterAllowedHeight
In this case it would be enough to override the full list with the availableHeightTypes as prop

"cfg": { "availableHeightTypes": [ { "value": "Ellipsoidal", label: "Ellipsoidal" }, { "value": "MSL", label: "MSL" } ] }

allyoucanmap · 2026-01-05T14:25:08Z

web/client/plugins/CameraPosition.jsx

+/**
+  * CameraPosition Plugin is a plugin that shows the coordinate of the camera position in a selected crs along with the height above ellipsoid or mean sea level.
+  * it gets displayed into the mapFooter plugin
+  * @name CameraPosition
+  * @memberof plugins
+  * @class
+  * @prop {string} cfg.editCRS if true shows a combobox to select the crs of the camera position.
+  * @prop {string} cfg.showLabels if true shows the labels of the coordinates.
+  * @prop {string} cfg.showToggle if true shows a toggle button to enable/disable the plugin.
+  * @prop {boolean} cfg.showElevation shows elevation in Ellipsoidal or MSL in 3D map.
+  * @prop {function} cfg.elevationTemplate custom template to show the elevation if showElevation is true (default template shows the elevation number with no formatting)
+  * @prop {object[]} projectionDefs list of additional project definitions
+  * @prop {string[]} cfg.filterAllowedCRS list of allowed crs in the combobox list to used as filter for the one of retrieved proj4.defs()
+  * @prop {string[]} cfg.filterAllowedHeight list of allowed height type in the combobox list. Accepted values are "Ellipsoidal" and "MSL"
+  * @prop {object} cfg.additionalCRS additional crs added to the list. The label param is used after in the combobox.
+  * @example
+  * // If you want to add some crs you need to provide a definition and adding it in the additionalCRS property
+  * // Put the following lines at the first level of the localconfig
+  * {
+  *   "projectionDefs": [{
+  *     "code": "EPSG:3003",
+  *     "def": "+proj=tmerc +lat_0=0 +lon_0=9 +k=0.9996 +x_0=1500000 +y_0=0 +ellps=intl+towgs84=-104.1,-49.1,-9.9,0.971,-2.917,0.714,-11.68 +units=m +no_defs",
+  *     "extent": [1241482.0019, 973563.1609, 1830078.9331, 5215189.0853],
+  *     "worldExtent": [6.6500, 8.8000, 12.0000, 47.0500]
+  *   }]
+  * }
+  * @example
+  * // And configure the mouse position plugin as below:
+  * {
+  *   "cfg": {
+  *     "additionalCRS": {
+  *       "EPSG:3003": { "label": "EPSG:3003" }
+  *     },
+  *     "filterAllowedCRS": ["EPSG:4326", "EPSG:3857"]
+  *   }
+  * }
+  * @example
+  * // to show elevation and (optionally) use a custom template configure the plugin this way:
+  * {
+  *   "cfg": {
+  *     ...
+  *     "showElevation": true,
+  *     "elevationTemplate": "{(function(elevation) {return 'myelev: ' + (elevation || 0);})}",
+  *     ...
+  *   }
+  * }
+  * @example
+  * // to filter the height type list configure the plugin this way:
+  * {
+  *   "cfg": {
+  *     ...
+  *     "filterAllowedHeight": ["Ellipsoidal", "MSL"],
+  *     ...
+  *   }
+  * }
+  * @example
+  * // to show the crs and height type labels configure the plugin this way:
+  * {
+  *   "cfg": {
+  *     ...
+  *     "showLabels": true,
+  *     ...
+  *   }
+  * }
+  * @example
+  * // to show the toggle button configure the plugin this way:
+  * {
+  *   "cfg": {
+  *     ...
+  *     "showToggle": true,
+  *     ...
+  *   }
+  * }
+  * @example
+  * // to show the crs selector configure the plugin this way:
+  * {
+  *   "cfg": {
+  *     ...
+  *     "editCRS": true,
+  *     ...
+  *   }
+  * }
+*/


Please review the documentation based on requested changes

allyoucanmap · 2026-01-05T14:31:59Z

web/client/product/plugins.js

    MediaEditorPlugin: toModulePlugin('MediaEditor', () => import(/* webpackChunkName: 'plugins/mediaEditor' */ '../plugins/MediaEditor')),
    MetadataExplorerPlugin: toModulePlugin('MetadataExplorer', () => import(/* webpackChunkName: 'plugins/metadataExplorer' */ '../plugins/MetadataExplorer')),
    MousePositionPlugin: toModulePlugin('MousePosition', () => import(/* webpackChunkName: 'plugins/mousePosition' */ '../plugins/MousePosition')),
+    CameraPositionPlugin: toModulePlugin('CameraPosition', () => import(/* webpackChunkName: 'plugins/cameraPosition' */ '../plugins/CameraPosition')),


Let's import this plugin without toModulePlugin

allyoucanmap · 2026-01-05T14:41:29Z

web/client/reducers/map.js

+    case CHANGE_CAMERA_POSITION_CRS:
+        return {
+            ...state,
+            viewerOptions: {
+                ...state.viewerOptions,
+                cameraPosition: {
+                    ...state?.viewerOptions?.cameraPosition,
+                    crs: action.crs
+                }
+            }
+        };
+    case CHANGE_CAMERA_POSITION_HEIGHT_TYPE:
+        return {
+            ...state,
+            viewerOptions: {
+                ...state.viewerOptions,
+                cameraPosition: {
+                    ...state?.viewerOptions?.cameraPosition,
+                    heightType: action.heightType
+                }
+            }
+        };


as mentioned in previous comment this should be moved in a specific reducers

allyoucanmap · 2026-01-05T14:42:33Z

web/client/selectors/map.js

+export const cameraPositionCrsSelector = (state) => state.map?.present?.viewerOptions?.cameraPosition.crs || 'EPSG:4326';
+export const cameraPositionHeightTypeSelector = (state) => state.map?.present?.viewerOptions?.cameraPosition.heightType || 'Ellipsoidal';


as mentioned in previous comment this should be moved in a specific selector

allyoucanmap · 2026-01-05T14:44:34Z

web/client/selectors/map.js

+export const mouseLeftDragListenerSelector = (state) => get(mapSelector(state), 'eventListeners.leftdrag', []);

 export const isMouseMoveActiveSelector = (state) => !!mouseMoveListenerSelector(state).length;
+export const isMouseLeftDragActiveSelector = (state) => !!mouseLeftDragListenerSelector(state).length;

 export const isMouseMoveCoordinatesActiveSelector = (state) => mouseMoveListenerSelector(state).includes('mouseposition');
+export const isMouseLeftDragCoordinatesActiveSelector = (state) => mouseLeftDragListenerSelector(state).includes('cameraposition');


What's the usage of these new selectors?

allyoucanmap

In addition to previous review:

remove the geoid file
merge master on this branch

…x_cameraposition_11455

allyoucanmap · 2026-01-29T09:45:19Z

@ElenaGallo please test this new plugin on dev, thanks

allyoucanmap · 2026-01-29T09:50:27Z

@anup after merging I noticed few thing to update:

remove ^ from the package version of the new dependencies
remove the plugin from localConfig.json, it should not be available by default but only in the context
ensure also the project template config for pluginsConfig.json contains the context configuration (project/standard/templates/configs/pluginsConfig.json)

Please open a new PR with the above changes, thanks

offtherailz · 2026-03-13T15:41:40Z

Created backport PR for 2026.01.xx:

[Backport 2026.01.xx] Fix : #11455 Added a new Plugin called CameraPosition. #12092 with remaining conflicts!

Please cherry-pick the changes locally and resolve any conflicts.

git fetch origin backport-11514-to-2026.01.xx
git worktree add --checkout .worktree/backport-11514-to-2026.01.xx backport-11514-to-2026.01.xx
cd .worktree/backport-11514-to-2026.01.xx
git reset --hard HEAD^
git cherry-pick -x 1dee3e81e7fd28a77722d9d00973cf6a00d30d38
git push --force-with-lease

allyoucanmap and others added 3 commits September 10, 2025 18:25

MOCKUP

54bb452

Added CameraPosition plugin

8141b18

Merge branch 'master' of github.com:geosolutions-it/MapStore2 into fi…

c36bbae

…x_cameraposition_11455

anup39 added this to the 2025.02.00 milestone Sep 25, 2025

anup39 self-assigned this Sep 25, 2025

anup39 added the New Feature used for new functionalities label Sep 25, 2025

anup39 linked an issue Sep 25, 2025 that may be closed by this pull request

CameraPosition plugin #11455

Open

5 tasks

anup39 requested a review from allyoucanmap September 25, 2025 15:07

anup39 added 4 commits September 26, 2025 11:31

Added translations

77dcf15

Fixes : Testcase

e24c6a8

Fixes useEffect in Cameraposition

0bc39f1

update docma

c552b17

allyoucanmap assigned allyoucanmap and unassigned anup39 Oct 13, 2025

anup39 added 3 commits October 15, 2025 08:29

Fixed merged conflict

7d609c2

fix: conflict

ba15295

fix: position of camera position

1d58fc3

tdipisa added BackportNeeded Commits provided for an issue need to be backported to the milestone's stable branch and removed BackportNeeded Commits provided for an issue need to be backported to the milestone's stable branch labels Nov 4, 2025

tdipisa modified the milestones: 2025.02.00, 2026.01.00 Nov 4, 2025

allyoucanmap requested changes Jan 5, 2026

View reviewed changes

Anup Dahal added 6 commits January 9, 2026 17:18

Refactor and test case added

213c4ce

Merge branch 'master' of github.com:geosolutions-it/MapStore2 into fi…

8859934

…x_cameraposition_11455

Removed actions from map related to camera position

5f2f3b5

Remove empty line

2beddc1

Removed reducers related to camera position

9f3c333

Fix import of actions in Camera Position plugin

b73039b

anup39 requested a review from allyoucanmap January 9, 2026 11:55

Anup Dahal added 4 commits January 9, 2026 17:44

Fix translations for IT

2cfd8f7

Fix styles

9947c73

Reviewed styles

47fd809

linting issues

d5f023e

allyoucanmap approved these changes Jan 29, 2026

View reviewed changes

allyoucanmap merged commit 1dee3e8 into geosolutions-it:master Jan 29, 2026
11 checks passed

ElenaGallo added the backport 2026.01.xx label Mar 13, 2026

offtherailz mentioned this pull request Mar 13, 2026

[Backport 2026.01.xx] Fix : #11455 Added a new Plugin called CameraPosition. #12092

Draft

		export const cameraPositionCrsSelector = (state) => state.map?.present?.viewerOptions?.cameraPosition.crs \|\| 'EPSG:4326';
		export const cameraPositionHeightTypeSelector = (state) => state.map?.present?.viewerOptions?.cameraPosition.heightType \|\| 'Ellipsoidal';

Conversation

anup39 commented Sep 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Issue

Breaking change

Other useful information

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

allyoucanmap left a comment • edited by anup39 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

allyoucanmap commented Jan 29, 2026

Uh oh!

allyoucanmap commented Jan 29, 2026

Uh oh!

offtherailz commented Mar 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

anup39 commented Sep 25, 2025 •

edited

Loading

allyoucanmap left a comment •

edited by anup39

Loading