Fix #11455: Removed inline css, removed cameraposition plugin from localconfig, updated package.json. (#11915)

Author: anup39

build/docma-config.json

@@ -235,7 +235,7 @@
                 "web/client/plugins/BackgroundSelector.jsx",
                 "web/client/plugins/BurgerMenu.jsx",
                 "web/client/plugins/CRSSelector.jsx",
-                "web/client/plugins/CameraPosition.jsx",
+                "web/client/plugins/CameraPosition/CameraPosition.jsx",
                 "web/client/plugins/Context.jsx",
                 "web/client/plugins/ContextCreator.jsx",
                 "web/client/plugins/ContextExport.jsx",

package.json

@@ -113,7 +113,7 @@
     "@mapbox/geojsonhint": "3.3.0",
     "@mapbox/togeojson": "0.16.2",
     "@mapstore/patcher": "https://github.com/geosolutions-it/Patcher/tarball/master",
-    "@math.gl/geoid": "^4.1.0",
+    "@math.gl/geoid": "4.1.0",
     "@turf/along": "6.5.0",
     "@turf/area": "6.5.0",
     "@turf/bbox": "4.1.0",

project/standard/templates/configs/pluginsConfig.json

@@ -333,6 +333,13 @@
         "additionalCRS": {}
       }
     },
+    {
+      "name": "CameraPosition",
+      "glyph": "camera",
+      "title": "plugins.CameraPosition.title",
+      "description": "plugins.CameraPosition.description",
+      "dependencies": ["MapFooter"]
+    },
     {
       "name": "CRSSelector",
       "glyph": "crs",

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

@@ -88,7 +88,7 @@ const CRSSelector = (props) => {
             centerChildrenVertically
             gap="sm"
         >
-            <ControlLabel style={{ margin: 0, fontWeight: 'normal', minWidth: 'max-content' }}>
+            <ControlLabel className="selector-label">
                 {label}
             </ControlLabel>
             <FormControl
@@ -97,7 +97,7 @@ const CRSSelector = (props) => {
                 value={crs}
                 onChange={launchNewCRSAction}
                 bsSize="small"
-                style={{ borderRadius: 4 }}
+                className="selector-control"
             >
                 {options}
             </FormControl>

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

@@ -46,7 +46,7 @@ const HeightTypeSelector = (props, context) => {
 
     return (
         <FlexBox component={FormGroup} centerChildrenVertically gap="sm">
-            <ControlLabel style={{ margin: 0, fontWeight: 'normal', minWidth: 'max-content' }}>
+            <ControlLabel className="selector-label" >
                 {label}
             </ControlLabel>
             <FormControl
@@ -55,7 +55,7 @@ const HeightTypeSelector = (props, context) => {
                 value={heightType}
                 onChange={(e) => onHeightTypeChange(e.target.value)}
                 bsSize="small"
-                style={{ borderRadius: 4 }}
+                className="selector-control"
             >
                 {options}
             </FormControl>

web/client/components/mapcontrols/mouseposition/mousePosition.css

@@ -108,4 +108,13 @@
     width: 90px !important;
     font-size: 11px;
     padding: 2px;
+}
+
+.selector-label{
+    margin: 0;
+    font-weight: normal;
+    min-width: max-content;
+}
+.selector-control{
+    border-radius: 4px;
 }

web/client/configs/localConfig.json

@@ -576,9 +576,6 @@
           "additionalCRS": {}
         }
       },
-      {
-        "name": "CameraPosition"
-      },
       {
         "name": "CRSSelector",
         "cfg": {

web/client/plugins/CameraPosition.jsx …lugins/CameraPosition/CameraPosition.jsxweb/client/plugins/CameraPosition.jsx renamed to web/client/plugins/CameraPosition/CameraPosition.jsx web/client/plugins/CameraPosition.jsx renamed to web/client/plugins/CameraPosition/CameraPosition.jsx

@@ -13,16 +13,16 @@ import { Tooltip } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import axios from 'axios';
 
-import { createPlugin } from '../utils/PluginsUtils';
-import ToggleButton from '../components/buttons/ToggleButton';
-import Message from '../components/I18N/Message';
-import MousePositionComponent from '../components/mapcontrols/mouseposition/MousePosition';
-import { getTemplate } from '../components/mapcontrols/mouseposition/templates';
-import { mapSelector, projectionDefsSelector } from '../selectors/map';
-import { getCameraPositionCrs, getCameraPositionHeightType, getShowCameraPosition } from './CameraPosition/selectors/cameraPosition';
-import { showCameraPosition, hideCameraPosition, changeCameraPositionCrs, changeCameraPositionHeightType } from './CameraPosition/actions/cameraPosition';
-import cameraPosition from './CameraPosition/reducers/cameraPosition';
-import './CameraPosition/cameraPosition.css';
+import { createPlugin } from '../../utils/PluginsUtils';
+import ToggleButton from '../../components/buttons/ToggleButton';
+import Message from '../../components/I18N/Message';
+import MousePositionComponent from '../../components/mapcontrols/mouseposition/MousePosition';
+import { getTemplate } from '../../components/mapcontrols/mouseposition/templates';
+import { mapSelector, projectionDefsSelector } from '../../selectors/map';
+import { getCameraPositionCrs, getCameraPositionHeightType, getShowCameraPosition } from './selectors/cameraPosition';
+import { showCameraPosition, hideCameraPosition, changeCameraPositionCrs, changeCameraPositionHeightType } from './actions/cameraPosition';
+import cameraPosition from './reducers/cameraPosition';
+import './cameraPosition.css';
 
 const selector = createSelector([
     (state) => state,

web/client/plugins/CameraPosition/cameraPosition.css

@@ -7,7 +7,7 @@
     border-width: 1px !important;
     border-style: solid !important;
     line-height: 30px;
-    background-color: var(--ms-main-variant-color,#e6e6e6);
+    background-color: var(--ms-main-variant-bg,#e6e6e6);
 }
 #mapstore-heightselector-cameraposition{
     border-radius: 4px;
@@ -18,5 +18,5 @@
     border-width: 1px !important;
     border-style: solid !important;
     line-height: 30px;
-    background-color: var(--ms-main-variant-color,#e6e6e6);
+    background-color: var(--ms-main-variant-bg,#e6e6e6);
 }

web/client/plugins/CameraPosition/index.js

@@ -0,0 +1,9 @@
+/*
+ * Copyright 2025, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { default } from './CameraPosition';