@map-colonies/react-components 3.15.0 → 4.0.1

package/src/lib/cesium-map/tools/geojson/geojson-to-primitive.ts

@@ -1,54 +0,0 @@
-import { FeatureCollection, Feature, Point } from 'geojson';
-import { Rectangle } from 'cesium';
-import { find } from 'lodash';
-import { PrimitiveCoordinates } from '../../data-sources';
-import { BboxCorner, DrawType } from '../../../models/enums';
-
-const POINTS_NUM = 2;
-
-export const geoJSONToPrimitive = (
-  type: DrawType,
-  geojson: FeatureCollection
-): PrimitiveCoordinates | never => {
-  switch (type) {
-    case DrawType.BOX: {
-      if (geojson.features.length !== POINTS_NUM)
-        throw new Error(`${type} must have 2 points`);
-
-      const bottomLeftPoint = find(geojson.features, (feat) => {
-        return feat.properties?.type === BboxCorner.BOTTOM_LEFT;
-      }) as Feature<Point>;
-
-      const rightTopPoint = find(geojson.features, (feat) => {
-        return feat.properties?.type === BboxCorner.TOP_RIGHT;
-      }) as Feature<Point>;
-
-      // eslint-disable-next-line
-      if (rightTopPoint && bottomLeftPoint) {
-        if (
-          bottomLeftPoint.geometry.coordinates[0] ===
-            rightTopPoint.geometry.coordinates[0] &&
-          bottomLeftPoint.geometry.coordinates[1] ===
-            rightTopPoint.geometry.coordinates[1]
-        ) {
-          throw new Error(
-            `${type} must define BOTTOM_LEFT and TOP_RIGHT different points`
-          );
-        } else {
-          return Rectangle.fromDegrees(
-            bottomLeftPoint.geometry.coordinates[0],
-            bottomLeftPoint.geometry.coordinates[1],
-            rightTopPoint.geometry.coordinates[0],
-            rightTopPoint.geometry.coordinates[1]
-          );
-        }
-      } else {
-        throw new Error(
-          `${type} geojson must define BOTTOM_LEFT and TOP_RIGHT points`
-        );
-      }
-    }
-    default:
-      throw new Error(`${type} type geoJSON still not supported`);
-  }
-};

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

@@ -1,2 +0,0 @@
-export * from './polygon.geojson';
-export * from './rectangle.geojson';

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

@@ -1,63 +0,0 @@
-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 cartographic = pointToCartographic(mapViewer, x, y);
-
-  return {
-    type: 'Feature',
-    properties: {},
-    geometry: {
-      type: 'Point',
-      coordinates: [
-        CesiumMath.toDegrees(cartographic.longitude),
-        CesiumMath.toDegrees(cartographic.latitude),
-      ],
-    },
-  };
-};
-
-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;
-  }
-};

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

@@ -1,24 +0,0 @@
-import { Math as CesiumMath, Cartographic, Cartesian3 } from 'cesium';
-import { GeoJSON } from 'geojson';
-
-export const polygonToGeoJSON = (positions: Cartesian3[]): GeoJSON => {
-  const coords = positions.map((vertex: Cartesian3) => {
-    const posRadians = Cartographic.fromCartesian(vertex);
-    return [
-      CesiumMath.toDegrees(posRadians.longitude),
-      CesiumMath.toDegrees(posRadians.latitude),
-    ];
-  });
-
-  // close polygon
-  coords.push(coords[0]);
-
-  return {
-    type: 'Feature',
-    properties: {},
-    geometry: {
-      type: 'Polygon',
-      coordinates: [coords],
-    },
-  };
-};

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

@@ -1,21 +0,0 @@
-import { Rectangle, Math as CesiumMath } from 'cesium';
-import { GeoJSON } from 'geojson';
-import * as turf from '@turf/helpers';
-import bbox from '@turf/bbox';
-import bboxPolygon from '@turf/bbox-polygon';
-
-export const rectangleToGeoJSON = (positions: Rectangle): GeoJSON => {
-  const line = turf.lineString([
-    [
-      CesiumMath.toDegrees(positions.west),
-      CesiumMath.toDegrees(positions.south),
-    ],
-    [
-      CesiumMath.toDegrees(positions.east),
-      CesiumMath.toDegrees(positions.north),
-    ],
-  ]);
-  const polygon = bboxPolygon(bbox(line));
-
-  return polygon;
-};

package/src/lib/cesium-map/tools/inspector.tool.tsx

@@ -1,15 +0,0 @@
-import React, { useEffect } from 'react';
-import { viewerCesiumInspectorMixin } from 'cesium';
-import { CesiumViewer, useCesiumMap } from '../map';
-
-export interface InspectorProps {}
-
-export const InspectorTool: React.FC<InspectorProps> = (props) => {
-  const mapViewer: CesiumViewer = useCesiumMap();
-
-  useEffect(() => {
-    mapViewer.extend(viewerCesiumInspectorMixin);
-  }, [mapViewer]);
-
-  return <></>;
-};

package/src/lib/cesium-map/tools/scale-tracker.tool.css

@@ -1,16 +0,0 @@
-.scalePosition {
-  background-color: var(--mdc-theme-surface);
-  padding: 1px 1px;
-  border-radius: 2px;
-  font-size: 12px;
-  width: 110px;
-}
-.distance-legend-label {
-  text-align: center;
-}
-.distance-legend-scale-bar {
-  background: var(--mdc-theme-on-surface);
-  margin: 0 auto;
-  display: block;
-  transition: all 0.5s ease-in-out;
-}

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

@@ -1,195 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Cartesian2, EllipsoidGeodesic, EventHelper } from 'cesium';
-import { isNumber, get } from 'lodash';
-import { CesiumViewer, useCesiumMap } from '../map';
-
-import './scale-tracker.tool.css';
-
-export interface RScaleTrackerToolProps {
-  locale?: { [key: string]: string };
-}
-
-interface IScaleData {
-  barWidth?: number;
-  distanceLabel?: string;
-  lastLegendUpdate: number;
-}
-
-/* eslint-disable @typescript-eslint/no-magic-numbers */
-const distances = [
-  1,
-  2,
-  3,
-  5,
-  10,
-  20,
-  30,
-  50,
-  100,
-  200,
-  300,
-  500,
-  1000,
-  2000,
-  3000,
-  5000,
-  10000,
-  20000,
-  30000,
-  50000,
-  100000,
-  200000,
-  300000,
-  500000,
-  1000000,
-  2000000,
-  3000000,
-  5000000,
-  10000000,
-  20000000,
-  30000000,
-  50000000,
-];
-
-const updateDistanceLegendCesium = (
-  mapViewer: CesiumViewer,
-  prevScaleData: IScaleData,
-  setScaleData: React.Dispatch<React.SetStateAction<IScaleData>>,
-  locale?: { [key: string]: string }
-): void => {
-  const metersUnit = get(locale, 'METERS_UNIT') ?? 'm';
-  const kiloMetersUnit = get(locale, 'KILOMETERS_UNIT') ?? 'km';
-  const scale: IScaleData = {
-    barWidth: undefined,
-    distanceLabel: undefined,
-    lastLegendUpdate: prevScaleData.lastLegendUpdate,
-  };
-  const geodesic = new EllipsoidGeodesic();
-
-  const now = new Date().getTime();
-  if (now < scale.lastLegendUpdate + 250) {
-    return;
-  }
-
-  scale.lastLegendUpdate = now;
-
-  // Find the distance between two pixels at the bottom center of the screen.
-  const width = mapViewer.scene.canvas.clientWidth;
-  const height = mapViewer.scene.canvas.clientHeight;
-
-  const left = mapViewer.scene.camera.getPickRay(
-    new Cartesian2((width / 2) | 0, height - 1)
-  );
-  const right = mapViewer.scene.camera.getPickRay(
-    new Cartesian2((1 + width / 2) | 0, height - 1)
-  );
-
-  const globe = mapViewer.scene.globe;
-  const leftPosition = globe.pick(left, mapViewer.scene);
-  const rightPosition = globe.pick(right, mapViewer.scene);
-
-  if (!leftPosition || !rightPosition) {
-    return;
-  }
-
-  const leftCartographic = globe.ellipsoid.cartesianToCartographic(
-    leftPosition
-  );
-  const rightCartographic = globe.ellipsoid.cartesianToCartographic(
-    rightPosition
-  );
-
-  geodesic.setEndPoints(leftCartographic, rightCartographic);
-  const pixelDistance = geodesic.surfaceDistance;
-
-  // Find the first distance that makes the scale bar less than 100 pixels.
-  const maxBarWidth = 100;
-  let distance;
-  for (let i = distances.length - 1; !isNumber(distance) && i >= 0; --i) {
-    if (distances[i] / pixelDistance < maxBarWidth) {
-      distance = distances[i];
-    }
-  }
-
-  if (isNumber(distance)) {
-    let label = '';
-    if (distance >= 1000) {
-      label = `${(distance / 1000).toString()} ${kiloMetersUnit}`;
-    } else {
-      label = `${distance.toString()} ${metersUnit}`;
-    }
-
-    scale.barWidth = (distance / pixelDistance) | 0;
-    scale.distanceLabel = label;
-  }
-
-  setScaleData(scale);
-};
-/* eslint-enable @typescript-eslint/no-magic-numbers */
-
-export const ScaleTrackerTool: React.FC<RScaleTrackerToolProps> = (props) => {
-  const mapViewer: CesiumViewer = useCesiumMap();
-  const [scaleData, setScaleData] = useState<IScaleData>({
-    barWidth: undefined,
-    distanceLabel: undefined,
-    lastLegendUpdate: -1,
-  });
-
-  useEffect(() => {
-    const setFromEvent = (e: MouseEvent): void => {
-      updateDistanceLegendCesium(
-        mapViewer,
-        scaleData,
-        setScaleData,
-        props.locale
-      );
-    };
-
-    const helper = new EventHelper();
-    const tileLoadHandler = (event: number): void => {
-      if (mapViewer.scene.globe.tilesLoaded) {
-        setFromEvent(new MouseEvent('mouse'));
-        helper.removeAll();
-      }
-    };
-    // Register tiles loader handler for initial load because globe.pick returning undefined
-    // see here https://community.cesium.com/t/globe-pick-returning-undefined/6616
-    helper.add(mapViewer.scene.globe.tileLoadProgressEvent, tileLoadHandler);
-
-    mapViewer.camera.moveEnd.addEventListener(setFromEvent);
-
-    return (): void => {
-      try {
-        /* eslint-disable @typescript-eslint/no-unnecessary-condition*/
-        if (get(mapViewer, '_cesiumWidget') != undefined) {
-          mapViewer.camera.moveEnd.removeEventListener(setFromEvent);
-        }
-      } catch (e) {
-        console.log('CESIUM camera "moveEnd" remove listener failed', e);
-      }
-    };
-  }, [mapViewer, props.locale, scaleData]);
-
-  const calcLeft = (width: number): number => {
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    return 5 + (125 - width) / 2;
-  };
-
-  return (
-    <div className="scalePosition">
-      {isNumber(scaleData.barWidth) && (
-        <>
-          <div className="distance-legend-label">{scaleData.distanceLabel}</div>
-          <div
-            className="distance-legend-scale-bar"
-            style={{
-              height: '2px',
-              width: `${scaleData.barWidth.toString()}px`,
-              left: `${calcLeft(scaleData.barWidth).toString()}px`,
-            }}
-          />
-        </>
-      )}
-    </div>
-  );
-};

package/src/lib/cesium-map/tools/terranian-height.tool.tsx

@@ -1,171 +0,0 @@
-import React, { ChangeEvent } from 'react';
-import {
-  Cartesian2,
-  Ellipsoid,
-  Color as CesiumColor,
-  LabelStyle as CesiumLabelStyle,
-  VerticalOrigin as CesiumVerticalOrigin,
-  Cartographic,
-  sampleTerrainMostDetailed,
-} from 'cesium';
-import { CesiumViewer, useCesiumMap } from '../map';
-
-interface IParsedData {
-  cartographic: Cartographic;
-  cartesian: Cartesian2;
-}
-
-const LABEL_PIXEL_OFFSET = -25;
-const FIRST_DATA_ROW_IDX = 2;
-
-export interface TerrainianHeightProps {}
-
-export const TerrainianHeightTool: React.FC<TerrainianHeightProps> = (
-  props
-) => {
-  const mapViewer: CesiumViewer = useCesiumMap();
-
-  const csvToArray = (str: string, delimiter = ','): IParsedData[] => {
-    // const headers = str.slice(0, str.indexOf('\n')).split(delimiter);
-    const rows = str.slice(str.indexOf('\n') + 1).split('\n');
-
-    const arr = rows.map((row) => {
-      const values = row.split(delimiter);
-      const el = Cartographic.fromDegrees(
-        parseFloat(values[0]),
-        parseFloat(values[1])
-      );
-      // const el = headers.reduce((object: Record<string, number>, header, index) => {
-      //   const trimmedHeader = header.trim();
-      //   object[trimmedHeader] = parseFloat(values[index]);
-      //   return object;
-      // }, {});
-
-      //return el;
-      return {
-        cartographic: el,
-        cartesian: new Cartesian2(parseFloat(values[0]), parseFloat(values[1])),
-      };
-    });
-
-    return arr;
-  };
-
-  const loadCSV = (evt: ChangeEvent<HTMLInputElement>): void => {
-    evt.preventDefault();
-    evt.persist();
-    const reader = new FileReader();
-
-    reader.onload = (e: ProgressEvent<FileReader>): any => {
-      const text = e.target?.result;
-      const parsed = csvToArray(text as string);
-      const ellipsoid = Ellipsoid.WGS84;
-
-      console.log('Loaded CSV content:\n', text);
-
-      void sampleTerrainMostDetailed(
-        mapViewer.terrainProvider,
-        parsed.map((item) => item.cartographic)
-      ).then(
-        (updatedPositions) => {
-          console.log(updatedPositions);
-          updatedPositions = updatedPositions.slice(
-            0,
-            updatedPositions.length - 1
-          ); // UNIX brake line
-
-          mapViewer.scene.globe.depthTestAgainstTerrain = true;
-          mapViewer.entities.suspendEvents();
-          mapViewer.entities.removeAll();
-
-          updatedPositions.forEach((position, idx) => {
-            mapViewer.entities.add({
-              name: (idx + FIRST_DATA_ROW_IDX).toString(),
-              position: ellipsoid.cartographicToCartesian(position),
-              billboard: {
-                verticalOrigin: CesiumVerticalOrigin.BOTTOM,
-                scale: 0.7,
-                image: 'assets/img/map-marker.gif',
-              },
-              label: {
-                text: (idx + FIRST_DATA_ROW_IDX).toString(),
-                font: '14pt monospace',
-                fillColor: CesiumColor.BLACK,
-                style: CesiumLabelStyle.FILL_AND_OUTLINE,
-                outlineWidth: 4,
-                outlineColor: CesiumColor.BLACK,
-                verticalOrigin: CesiumVerticalOrigin.BOTTOM,
-                pixelOffset: new Cartesian2(0, LABEL_PIXEL_OFFSET),
-              },
-              description: `
-                Long: ${parsed[idx].cartesian.x} </br>
-                Lat: ${parsed[idx].cartesian.y} </br>
-                Height(m): <span style="font-weight: 500">${position.height}</span>
-              `,
-            });
-          });
-
-          mapViewer.entities.resumeEvents();
-
-          if (evt.target.files !== null) {
-            exportToCsv(
-              `terranian_heights_${evt.target.files[0].name}`,
-              parsed
-            );
-            evt.target.value = '';
-          }
-
-          console.log(
-            'Pinned point count is ',
-            mapViewer.entities.values.length
-          );
-        },
-        (err) => {
-          console.error('ERROR while sampleTerrainMostDetailed:', err);
-        }
-      );
-    };
-
-    if (evt.target.files?.[0]) {
-      reader.readAsText(evt.target.files[0]);
-    }
-  };
-
-  const exportToCsv = (filename: string, rows: IParsedData[]): void => {
-    const processRow = (row: IParsedData): string => {
-      let finalVal = '';
-      finalVal += row.cartesian.x.toString() + ',';
-      finalVal += row.cartesian.y.toString() + ',';
-      finalVal += row.cartographic.height.toString();
-      return finalVal + '\n';
-    };
-
-    let csvFile = 'long,lat,height\n';
-    rows.forEach((row) => {
-      csvFile += processRow(row);
-    });
-
-    const blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' });
-    const link = document.createElement('a');
-    const url = URL.createObjectURL(blob);
-    link.setAttribute('href', url);
-    link.setAttribute('download', filename);
-    link.style.visibility = 'hidden';
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  };
-
-  return (
-    <>
-      <input
-        type="file"
-        id="csvFile"
-        accept=".csv"
-        onChange={(e: ChangeEvent<HTMLInputElement>): void => {
-          loadCSV(e);
-        }}
-      />
-    </>
-  );
-};

package/src/lib/cesium-map/tools/zoom_level-tracker.tool.css

@@ -1,19 +0,0 @@
-.zoomLevel {
-  z-index: 2000;
-  background-color: var(--mdc-theme-surface);
-  border-radius: 2px;
-  padding: 2px;
-  height: 24px;
-}
-
-.zoomLevelValue {
-  margin: 2px;
-  font-size: 14px;
-  line-height: 10px;
-  text-align: center;
-}
-
-.zoomLevelLabel {
-  font-size: 8px;
-  line-height: 8px;
-}