@map-colonies/react-components 3.12.3 → 3.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@map-colonies/react-components",
-  "version": "3.12.3",
+  "version": "3.13.1",
   "module": "dist/index.js",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -93,7 +93,7 @@
     "jest-enzyme": "^7.1.2",
     "react-test-renderer": "^16.13.1"
   },
-  "gitHead": "33c540f10086a5b076f026b6c8f2d5b800ce4d8f",
+  "gitHead": "2b22c0f4e5e2b632bd656ec88b29a4d02d339af0",
   "jest": {
     "coverageReporters": [
       "text",

package/src/lib/cesium-map/data-sources/drawings.data-source.tsx

@@ -76,6 +76,9 @@ export const CesiumDrawingsDataSource: React.FC<RCesiumDrawingDataSourceProps> =
       if (drawState.drawing) {
         switch (drawState.type) {
           case DrawType.POLYGON:
+            // Disable terrain accounting before drawing.
+            mapViewer.scene.globe.depthTestAgainstTerrain = false;
+
             // eslint-disable-next-line
             drawHelperInstance.startDrawingPolygon({
               callback: (positions: PrimitiveCoordinates) => {
@@ -100,6 +103,9 @@ export const CesiumDrawingsDataSource: React.FC<RCesiumDrawingDataSourceProps> =
             });
             break;
           case DrawType.BOX:
+            // Disable terrain accounting before drawing.
+            mapViewer.scene.globe.depthTestAgainstTerrain = false;
+
             // eslint-disable-next-line
             drawHelperInstance.startDrawingExtent({
               callback: (positions: PrimitiveCoordinates) => {
@@ -131,6 +137,9 @@ export const CesiumDrawingsDataSource: React.FC<RCesiumDrawingDataSourceProps> =
       } else {
         // eslint-disable-next-line
         drawHelperInstance.stopDrawing();
+
+        // Enable terrain accounting after drawing.
+        mapViewer.scene.globe.depthTestAgainstTerrain = true;
       }
     }
   }, [drawState, drawHelper]);

package/src/lib/cesium-map/layers/geojson.layer.stories.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
+import { Color } from 'cesium';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import { action } from '@storybook/addon-actions';
-import { Color } from 'cesium';
 import { CesiumMap } from '../map';
+import { LayerType } from '../layers-manager';
 import { CesiumGeojsonLayer } from './geojson.layer';
 
 export default {
@@ -19,6 +20,32 @@ const mapDivStyle = {
   position: 'absolute' as const,
 };
 
+const BASE_MAPS = {
+  maps: [
+    {
+      id: '1st',
+      title: '1st Map Title',
+      isCurrent: true,
+      thumbnail:
+        'https://nsw.digitaltwin.terria.io/build/efa2f6c408eb790753a9b5fb2f3dc678.png',
+      baseRasteLayers: [
+        {
+          id: 'GOOGLE_TERRAIN',
+          type: 'XYZ_LAYER' as LayerType,
+          opacity: 1,
+          zIndex: 0,
+          options: {
+            url: 'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
+            layers: '',
+            credit: 'GOOGLE',
+          },
+        },
+      ],
+      baseVectorLayers: [],
+    },
+  ],
+};
+
 const data = {
   type: 'FeatureCollection',
   features: [
@@ -82,14 +109,33 @@ const data = {
         ],
       },
     },
+    {
+      type: 'Feature',
+      geometry: {
+        type: 'MultiPolygon',
+        coordinates: [
+          [
+            [
+              [34.846843864982802, 32.068999681029801],
+              [34.863785627992797, 32.059005944018601],
+              [34.8773961450173, 32.068047896040397],
+              [34.880441855011703, 32.052819346068603],
+              [34.878633463995797, 32.0466327470143],
+              [34.8605495609931, 32.048821851014601],
+              [34.846843864982802, 32.068999681029801],
+            ],
+          ],
+        ],
+      },
+    },
   ],
 };
 
 const onLoadAction = action('onLoad');
 
-export const MapWithGeojsonLayer: Story = () => (
+export const MapWithGeojsonLayer: Story = (args: unknown) => (
   <div style={mapDivStyle}>
-    <CesiumMap>
+    <CesiumMap {...args}>
       <CesiumGeojsonLayer
         data={data}
         markerColor={Color.RED}
@@ -116,4 +162,19 @@ export const MapWithGeojsonLayer: Story = () => (
     </CesiumMap>
   </div>
 );
+
+MapWithGeojsonLayer.argTypes = {
+  baseMaps: {
+    defaultValue: BASE_MAPS,
+  },
+  zoom: {
+    defaultValue: 17,
+    control: {
+      type: 'range',
+      min: 0,
+      max: 20,
+    },
+  },
+};
+
 MapWithGeojsonLayer.storyName = 'GeoJson layer';

package/src/lib/cesium-map/map-legend/MapLegend.css

@@ -45,8 +45,9 @@ body[dir='rtl'] .mapLegendCloseBtn {
 }
 
 .mapLegendIcon {
-  width: 2.5rem;
-  height: 2.5rem;
+  width: 2rem;
+  height: 2rem;
+  transform: translate(8%, 8%);
 }
 
 .sidebarHeaderContainer {

package/src/lib/cesium-map/map.tsx

@@ -33,6 +33,7 @@ import LayerManager, { LegendExtractor } from './layers-manager';
 import { CesiumSceneMode, CesiumSceneModeEnum } from './map.types';
 
 import './map.css';
+import { pointToLonLat } from './tools/geojson/point.geojson';
 
 const DEFAULT_HEIGHT = 212;
 const DEFAULT_WIDTH = 260;
@@ -76,6 +77,7 @@ export interface IContextMenuData {
     x: number;
     y: number;
   };
+  coordinates: { latitude: number; longitude: number };
   style?: Record<string, string>;
   size?: {
     height: number;
@@ -141,6 +143,10 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
   const [isLegendsSidebarOpen, setIsLegendsSidebarOpen] = useState<boolean>(
     false
   );
+  const [rightClickCoordinates, setRightClickCoordinates] = useState<{
+    longitude: number;
+    latitude: number;
+  }>();
 
   const viewerProps = {
     fullscreenButton: true,
@@ -185,8 +191,13 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
         viewer.screenSpaceEventHandler.setInputAction(
           (evt: Record<string, unknown>) => {
             // console.log('RIGHT click', evt.position);
+            const pos = evt.position as Record<string, unknown>;
+
             setShowImageryMenu(false);
-            setImageryMenuPosition(evt.position as Record<string, unknown>);
+            setImageryMenuPosition(pos);
+            setRightClickCoordinates(
+              pointToLonLat(viewer, pos.x as number, pos.y as number)
+            );
             setShowImageryMenu(true);
           },
           ScreenSpaceEventType.RIGHT_CLICK
@@ -415,6 +426,7 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
         {props.imageryContextMenu &&
           showImageryMenu &&
           imageryMenuPosition &&
+          rightClickCoordinates &&
           React.cloneElement(props.imageryContextMenu, {
             data: (mapViewRef?.layersManager?.findLayerByPOI(
               imageryMenuPosition.x as number,
@@ -424,6 +436,7 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
               x: imageryMenuPosition.x as number,
               y: imageryMenuPosition.y as number,
             },
+            coordinates: rightClickCoordinates,
             style: getImageryMenuStyle(
               imageryMenuPosition.x as number,
               imageryMenuPosition.y as number,

package/src/lib/cesium-map/proxied.types.ts

@@ -14,6 +14,7 @@ import {
   Rectangle,
   Resource,
   VerticalOrigin,
+  Math,
 } from 'cesium';
 
 // PROXIED CLASSES
@@ -51,4 +52,7 @@ export const CesiumVerticalOrigin = VerticalOrigin;
 export const CesiumLabelStyle = LabelStyle;
 
 // PROXIED FUNCTIONS
-export { sampleTerrainMostDetailed as cesiumSampleTerrainMostDetailed } from 'cesium';
+export {
+  sampleTerrainMostDetailed as cesiumSampleTerrainMostDetailed,
+  Math as CesiumMath,
+} from 'cesium';

package/src/lib/cesium-map/tools/coordinates-tracker.tool.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Cartesian3, Math as CesiumMath, WebMercatorProjection } from 'cesium';
+import { Cartesian3, Math as CesiumMath, WebMercatorProjection, ScreenSpaceEventType } from 'cesium';
 import { CesiumViewer, useCesiumMap } from '../map';
 
 import './coordinates-tracker.tool.css';
@@ -21,17 +21,17 @@ export const CoordinatesTrackerTool: React.FC<RCoordinatesTrackerToolProps> = (
   const [position, setPosition] = useState({ x: 0, y: 0 });
 
   useEffect(() => {
-    const setFromEvent = (e: MouseEvent): void =>
-      setPosition({ x: e.clientX, y: e.clientY });
-    mapViewer.scene.canvas.addEventListener('mousemove', setFromEvent);
-
-    return (): void => {
-      try {
-        mapViewer.scene.canvas.removeEventListener('mousemove', setFromEvent);
-      } catch (e) {
-        console.log('CESIUM canvas "mousemove" remove listener failed', e);
-      }
-    };
+    mapViewer.screenSpaceEventHandler.setInputAction(
+      (evt?: Record<string, unknown>) => {
+        if (evt?.endPosition) {
+          setPosition({ ...(evt.endPosition as { x: number; y: number }) } as {
+            x: number;
+            y: number;
+          });
+        }
+      },
+      ScreenSpaceEventType.MOUSE_MOVE
+    );
   }, [ref, mapViewer]);
 
   useEffect(() => {
@@ -41,6 +41,7 @@ export const CoordinatesTrackerTool: React.FC<RCoordinatesTrackerToolProps> = (
       new Cartesian3(position.x, position.y),
       ellipsoid
     );
+
     if (cartesian) {
       const cartographic = ellipsoid.cartesianToCartographic(cartesian);
       if (ref.current) {

package/src/lib/cesium-map/tools/geojson/point.geojson.ts

@@ -1,20 +1,37 @@
-import { Math as CesiumMath, Cartesian3 } from 'cesium';
+import {
+  Math as CesiumMath,
+  Cartesian3,
+  Cartographic,
+  SceneMode,
+  Cartesian2,
+} from 'cesium';
 import { GeoJSON } from 'geojson';
 import { CesiumViewer } from '../../map';
 
+const pointToCartographic = (
+  mapViewer: CesiumViewer,
+  x: number,
+  y: number
+): Cartographic => {
+  let cartesian;
+
+  if (mapViewer.scene.mode !== SceneMode.SCENE2D) {
+    cartesian = mapViewer.scene.pickPosition(new Cartesian2(x, y));
+  } else {
+    const ellipsoid = mapViewer.scene.globe.ellipsoid;
+    cartesian = mapViewer.camera.pickEllipsoid(new Cartesian2(x, y), ellipsoid);
+  }
+
+  return Cartographic.fromCartesian(cartesian as Cartesian3);
+};
+
 export const pointToGeoJSON = (
   mapViewer: CesiumViewer,
   x: number,
   y: number
 ): GeoJSON => {
-  const ellipsoid = mapViewer.scene.globe.ellipsoid;
-  const cartesian = mapViewer.camera.pickEllipsoid(
-    new Cartesian3(x, y),
-    ellipsoid
-  );
-  const cartographic = ellipsoid.cartesianToCartographic(
-    cartesian as Cartesian3
-  );
+  const cartographic = pointToCartographic(mapViewer, x, y);
+
   return {
     type: 'Feature',
     properties: {},
@@ -27,3 +44,20 @@ export const pointToGeoJSON = (
     },
   };
 };
+
+export const pointToLonLat = (
+  mapViewer: CesiumViewer,
+  x: number,
+  y: number
+): { longitude: number; latitude: number } | undefined => {
+  try {
+    const cartographic = pointToCartographic(mapViewer, x, y);
+
+    return {
+      longitude: CesiumMath.toDegrees(cartographic.longitude),
+      latitude: CesiumMath.toDegrees(cartographic.latitude),
+    };
+  } catch (e) {
+    return undefined;
+  }
+};