Fix #10295 fixed measure tool rendering in map (#10331)

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

@@ -11,6 +11,7 @@ import PropTypes from 'prop-types';
 import { camelCase } from 'lodash';
 import { Glyphicon, ButtonToolbar, ButtonGroup } from 'react-bootstrap';
 import { DropdownList } from 'react-widgets';
+import { createPortal } from 'react-dom';
 
 import MSButton from '../../misc/Button';
 import DrawMeasureSupport from './DrawMeasureSupport';
@@ -19,7 +20,7 @@ import { MeasureTypes, defaultUnitOfMeasureOptions, measureIcons } from '../../.
 import tooltip from '../../misc/enhancers/tooltip';
 import { getMessageById } from '../../../utils/LocaleUtils';
 import { download } from '../../../utils/FileUtils';
-import { convertMeasuresToGeoJSON } from '../../../utils/MeasurementUtils';
+import { convertMeasuresToGeoJSON, MEASURE_CESIUM_TARGET_ID } from '../../../utils/MeasurementUtils';
 
 const Button = tooltip(MSButton);
 
@@ -41,6 +42,7 @@ const Button = tooltip(MSButton);
 function MeasurementSupport({
  map,
  active,
+ targetId = MEASURE_CESIUM_TARGET_ID,
  measureType,
  onChangeMeasureType,
  defaultMeasureType,
@@ -89,8 +91,9 @@ function MeasurementSupport({
  if (!active) {
  return null;
  }
+ const container = document.querySelector(`#${targetId}`);
 
- return (
+ return container && createPortal((
  <>
  <DrawMeasureSupport
  map={map}
@@ -209,7 +212,7 @@ function MeasurementSupport({
  </ButtonToolbar>
  </MeasureToolbar>
  </>
- );
+ ), container);
 }
 
 MeasurementSupport.contextTypes = {

web/client/components/map/cesium/__tests__/MeasurementSupport-test.jsx

@@ -57,6 +57,7 @@ describe('Cesium MeasurementSupport', () => {
  >
  <MeasurementSupport
  active
+ targetId="container"
  unitsOfMeasure={defaultUnitOfMeasure}
  defaultMeasureType={MeasureTypes.POLYLINE_DISTANCE_3D}
  onChangeMeasureType={(measureType) => {

web/client/plugins/Measure.jsx

@@ -26,7 +26,8 @@ import { isOpenlayers, mapTypeSelector } from '../selectors/maptype';
 import {
  isCoordinateEditorEnabledSelector,
  isTrueBearingEnabledSelector,
- showAddAsAnnotationSelector
+ showAddAsAnnotationSelector,
+ coordsAeronauticalEnabledSelector
 } from '../selectors/measurement';
 import ConfigUtils from '../utils/ConfigUtils';
 import Message from './locale/Message';
@@ -163,14 +164,24 @@ const Measure = connect(
 // the connect for mapType is needed in case the mapType is not provided by the hash pathname
 const MeasurePlugin = connect(
  createSelector([
- mapTypeSelector
- ], (mapType) => ({
- mapType
+ mapTypeSelector,
+ coordsAeronauticalEnabledSelector
+ ], (
+ mapType,
+ coordsAeronauticalEnabled
+ ) => ({
+ mapType,
+ coordsAeronauticalEnabled
  }))
-)((props) => {
- return props.mapType === MapLibraries.CESIUM
- ? null
- : <Measure {...props} />;
+)(({coordsAeronauticalEnabled, ...props}) => {
+ return (
+ <div className="measure-container" style={{top: coordsAeronauticalEnabled ? 88 : 48}}>
+ {
+ props.mapType === MapLibraries.CESIUM
+ ? <div id="measure-cesium-wrapper"/>
+ : <Measure {...props} />
+ }
+ </div>);
 });
 
 export default createPlugin('Measure', {

web/client/selectors/__tests__/measurement-test.js

@@ -14,7 +14,8 @@ import {
  showAddAsAnnotationSelector,
  measurementSelector,
  getValidFeatureSelector,
- isActiveSelector
+ isActiveSelector,
+ coordsAeronauticalEnabledSelector
 } from '../measurement';
 
 import {
@@ -91,4 +92,27 @@ describe('Test maptype', () => {
  });
  expect(toolState).toBe(true);
  });
+ it('test coordsAeronauticalEnabledSelector ', () => {
+ let flag = coordsAeronauticalEnabledSelector({
+ search: {
+ format: "aeronautical",
+ activeSearchTool: "coordinatesSearch"
+ }
+ });
+ expect(flag).toBe(true);
+ flag = coordsAeronauticalEnabledSelector({
+ search: {
+ format: "decimal",
+ activeSearchTool: "coordinatesSearch"
+ }
+ });
+ expect(flag).toBe(false);
+ flag = coordsAeronauticalEnabledSelector({
+ search: {
+ format: "aeronautical",
+ activeSearchTool: "address"
+ }
+ });
+ expect(flag).toBe(false);
+ });
 });

web/client/selectors/measurement.js

@@ -67,3 +67,11 @@ export const measurementSelector = (state) => {
  * @return {boolean} geomType of the measurement
  */
 export const geomTypeSelector = (state) => state?.measurement?.geomType;
+
+/**
+ * Get if search tool is using coordinatesSearch and aeronautical format
+ * @memberof selectors.measurement
+ * @param {object} state the state
+ * @return {boolean} the flag
+ */
+export const coordsAeronauticalEnabledSelector = state => state?.search?.activeSearchTool === "coordinatesSearch" && state?.search?.format === "aeronautical";

web/client/themes/default/less/map-search-bar.less

@@ -246,7 +246,7 @@ div.MapSearchBar .form-control:focus {
  width: 75%;
  align-items: center;
  box-sizing: border-box;
- margin: 6px 0 !important;
+ margin: 0 0 !important;
  display: flex;
  flex: 1 1 0;
  justify-content: space-between;

web/client/themes/default/less/measure.less

@@ -113,23 +113,25 @@
  }
  }
 }
-
-.ms-measure-toolbar {
+.measure-container {
  position: absolute;
  z-index: 100;
  right: 46px;
  margin: 0;
  top: 48px;
- background-color: #ffffff;
- display: flex;
- align-items: center;
- padding: 4px;
- display: flex;
- align-items: center;
- .shadow();
- .ms-measure-icon {
- padding: 0 6px;
- font-size: 15px;
+ .ms-measure-toolbar {
+ position: relative;
+ background-color: #ffffff;
+ display: flex;
+ align-items: center;
+ padding: 4px;
+ display: flex;
+ align-items: center;
+ .shadow();
+ .ms-measure-icon {
+ padding: 0 6px;
+ font-size: 15px;
+ }
  }
 }
 

web/client/utils/MeasurementUtils.js

@@ -27,6 +27,7 @@ import {
 } from './CoordinatesUtils';
 
 export const MEASURE_TYPE = 'Measure';
+export const MEASURE_CESIUM_TARGET_ID = 'measure-cesium-wrapper';
 
 const getFormattedValue = (uom, value) => ({
  [MeasureTypes.LENGTH]: round(convertUom(value, "m", uom.length.label) || 0, 2) + " " + uom.length.label,