feat: add cesium poi

src/components/Wizard/ModelSelection/ModelSelection.tsx

@@ -17,10 +17,14 @@
 
 import './ModelSelection.css';
 import { CesiumGeojsonFootprint } from './CesiumGeojsonFootprint';
+import { LocationMarker } from '../../../utils/Cesium/LocationMarker';
+import { CesiumPOI } from '../../../utils/Cesium/CesiumPOI/CesiumPOI';
 
 export const ModelSelection: React.FC<WizardSelectionProps> = (props) => {
   const [isLoading, setIsLoading] = useState(true);
   const [finishedFlying, setFinishedFlying] = useState(false);
+  // const [poi, setPoi] = useState<IPOI | undefined>(undefined);
+  // const [poi, setPoi] = useState<IPOI | undefined>(undefined);
 
   const treeTheme = {
     "--rst-selected-background-color": '#f8fafc33',
@@ -53,8 +57,8 @@
     }
 
     (async () => {
-      const treeData = await fetchCatalog((value: boolean)=>{
-        setTimeout( () => setIsLoading(value), 2000);
+      const treeData = await fetchCatalog((value: boolean) => {
+        setTimeout(() => setIsLoading(value), 2000);
       });
 
       props.setCatalogTreeData(treeData.data.children as CatalogTreeNode[]);
@@ -88,7 +92,7 @@
           </Box>
           <Box style={treeTheme as React.CSSProperties} className="treeContainer curtainContainer">
             {
-              isLoading && <Curtain showProgress={true}/>
+              isLoading && <Curtain showProgress={true} />
             }
             {
               props.catalogTreeData &&
@@ -128,6 +132,7 @@
                 isZoomTo={true}
               />
             }
+            <CesiumPOI />
             <Terrain />
           </CesiumMap>
         </Box>

src/utils/Cesium/CesiumPOI/CesiumPOI.css

@@ -0,0 +1,11 @@
+#CesiumPOI {
+  position: absolute;
+  border: solid 1px red;
+  right: 20px;
+  background-color: black;
+}
+
+#CesiumPOI .small {
+  height: 50px;
+  width: 50px;
+}

src/utils/Cesium/CesiumPOI/CesiumPOI.tsx

@@ -0,0 +1,63 @@
+import { TextField } from "@map-colonies/react-core"
+import { LocationMarker } from "../LocationMarker"
+import { useEffect, useState } from "react"
+import { Box } from "@map-colonies/react-components";
+
+import './CesiumPOI.css';
+
+// interface CesiumGeojsonFootprintProps {
+
+// }
+
+const LONGITUDE_INDEX = 0;
+const LATITUDE_INDEX = 2;
+
+export const CesiumPOI: React.FC = () => {
+  const [longitude, setLongitude] = useState<number>();
+  const [latitude, setLatitude] = useState<number>();
+  const [inputValue, setInputValue] = useState<string>("");
+
+  const regex = /^(-?(?:[0-8]?\d(?:\.\d+)?|90(?:\.0+)?)),\s*(-?(?:1[0-7]\d(?:\.\d+)?|[0-9]?\d(?:\.\d+)?|180(?:\.0+)?))/;
+
+  const isValid =
+    typeof longitude === "number" &&
+    typeof latitude === "number";
+
+  return (
+    <Box id="CesiumPOI">
+      <TextField
+        className="cesium-geocoder-input"
+        label="lat, lon"
+        value={inputValue}
+        onChange={
+          (e: React.FormEvent<HTMLInputElement>): void => {
+            const val = e.currentTarget.value;
+            setInputValue(val);
+            const matches = val.match(regex);
+
+            if (matches) {
+              const lat = parseFloat(matches[LATITUDE_INDEX]);
+              const lon = parseFloat(matches[LONGITUDE_INDEX]);
+
+              setLatitude(lat);
+              setLongitude(lon);
+            } else {
+              setLatitude(undefined);
+              setLongitude(undefined);
+            }
+          }
+        }
+      />
+      {/* for height in the future */}
+      <TextField
+        className="cesium-geocoder-input small"
+        label="height"
+        disabled
+      />
+      {
+        isValid &&
+        <LocationMarker longitude={longitude} latitude={latitude} />
+      }
+    </Box>
+  )
+}

src/utils/Cesium/LocationMarker.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { isEmpty } from 'lodash';
+import {
+  CesiumCartesian3,
+  CesiumCartographic,
+  CesiumColor,
+  CesiumEntity,
+  CesiumHeightReference,
+  cesiumSampleTerrainMostDetailed,
+  CesiumVerticalOrigin,
+  useCesiumMap
+} from '@map-colonies/react-components';
+import { FlyTo } from './FlyTo';
+
+interface PoiEntityProps {
+  longitude: number;
+  latitude: number;
+}
+
+// export interface IPOI {
+//   lon: number;
+//   lat: number;
+// }
+
+export const LocationMarker: React.FC<PoiEntityProps> = ({ longitude, latitude }) => {
+  // const longitude = 52.01053;
+  // const latitude = 36.50835;
+  // const intl = useIntl();
+  const mapViewer = useCesiumMap();
+  const [position, setPosition] = useState<CesiumCartesian3 | undefined>();
+  // const [height, setHeight] = useState<number>(DEFAULT_HEIGHT);
+
+  useEffect(() => {
+    // setTimeout(() => {
+    if (!mapViewer) return;
+
+    const cartographic = CesiumCartographic.fromDegrees(longitude, latitude);
+    const height = mapViewer.scene.sampleHeight(cartographic);
+
+    console.log('height', height)
+    const finalHeight = height || 0;
+
+    setPosition(
+      CesiumCartesian3.fromDegrees(longitude, latitude, finalHeight)
+    );
+    // }, 20000);
+  }, [mapViewer, latitude, longitude]);
+
+  return (
+    <>
+      {
+        position !== undefined &&
+        <CesiumEntity
+          // name={intl.formatMessage({ id: 'poi.dialog.description.title' })}
+          position={position}
+          billboard={{
+            verticalOrigin: CesiumVerticalOrigin.BOTTOM,
+            scale: 0.5,
+            image: 'assets/img/map-marker.gif',
+          }}
+        // point={{
+        //   pixelSize: 24,
+        //   //@ts-ignore
+        //   // image: 'assets/img/map-marker.gif',
+        //   outlineColor: CesiumColor.RED,
+        //   outlineWidth: 2,
+        //   // heightReference: CesiumHeightReference.CLAMP_TO_GROUND,
+        // }}
+        //   description={`
+        //   ${intl.formatMessage({ id: 'poi.dialog.description.longitude' }, { value: longitude })}</br>
+        //   ${intl.formatMessage({ id: 'poi.dialog.description.latitude' }, { value: latitude })}</br>
+        //   ${intl.formatMessage({ id: 'poi.dialog.description.height' }, { value: height })}
+        // `}
+        />
+      }
+    </>
+  );
+};