feat: extend plugin to get current location

src/components/molecules/EarthEditor/LayerTreeViewItem/Layer/index.tsx

@@ -131,7 +131,6 @@ const Layer: React.ForwardRefRenderFunction<HTMLDivElement, Props> = (
   const [handleClick, handleDoubleClick] = useDoubleClick(onClick, startEditing);
 
   const theme = useTheme();
-
   return (
     <Wrapper
       ref={ref}

src/components/molecules/Visualizer/Engine/Cesium/common.ts

@@ -32,6 +32,7 @@ import {
 } from "cesium";
 import { useCallback, MutableRefObject } from "react";
 
+import { useGeolocation } from "@reearth/util/geolocation";
 import { useCanvas, useImage } from "@reearth/util/image";
 import { tweenInterval } from "@reearth/util/raf";
 import { Camera } from "@reearth/util/value";
@@ -153,6 +154,16 @@ export const vo = (
     [""]: undefined,
   }[o || ""]);
 
+export const getCurrentLocation = () => {
+  const currentLocation = useGeolocation;
+  if (currentLocation?.()?.lat == undefined && currentLocation?.()?.lng == undefined)
+    return undefined;
+  return {
+    lat: currentLocation?.()?.lat ?? 0,
+    lng: currentLocation?.()?.lng ?? 0,
+    height: currentLocation?.()?.height ?? 5000,
+  };
+};
 export const getLocationFromScreen = (
   scene: Scene | undefined | null,
   x: number,

src/components/molecules/Visualizer/Engine/Cesium/useEngineRef.ts

@@ -10,6 +10,7 @@ import builtinPrimitives from "./builtin";
 import Cluster from "./Cluster";
 import {
   getLocationFromScreen,
+  getCurrentLocation,
   flyTo,
   lookAt,
   getCamera,
@@ -63,6 +64,9 @@ export default function useEngineRef(
         if (!viewer || viewer.isDestroyed()) return;
         return getCamera(viewer);
       },
+      getCurrentLocation: () => {
+        return getCurrentLocation();
+      },
       getLocationFromScreen: (x, y, withTerrain) => {
         const viewer = cesium.current?.cesiumElement;
         if (!viewer || viewer.isDestroyed()) return;

src/components/molecules/Visualizer/Engine/ref.ts

@@ -57,6 +57,7 @@ export type EngineRef = {
   getViewport: () => Rect | undefined;
   getCamera: () => Camera | undefined;
   getLocationFromScreen: (x: number, y: number, withTerrain?: boolean) => LatLngHeight | undefined;
+  getCurrentLocation: () => LatLngHeight | undefined;
   flyTo: (destination: FlyToDestination, options?: CameraOptions) => void;
   lookAt: (destination: LookAtDestination, options?: CameraOptions) => void;
   lookAtLayer: (layerId: string) => void;

src/components/molecules/Visualizer/Plugin/api.ts

@@ -231,6 +231,7 @@ export function commonReearth({
   orbit,
   rotateRight,
   captureScreen,
+  getCurrentLocation,
   getLocationFromScreen,
   enableScreenSpaceCameraController,
   lookHorizontal,
@@ -272,6 +273,8 @@ export function commonReearth({
   cameraViewport: () => GlobalThis["reearth"]["visualizer"]["camera"]["viewport"];
   captureScreen: GlobalThis["reearth"]["scene"]["captureScreen"];
   getLocationFromScreen: GlobalThis["reearth"]["scene"]["getLocationFromScreen"];
+  getCurrentLocation: GlobalThis["reearth"]["scene"]["getCurrentLocation"];
+
   inEditor: () => GlobalThis["reearth"]["scene"]["inEditor"];
   enableScreenSpaceCameraController: GlobalThis["reearth"]["camera"]["enableScreenSpaceController"];
   lookHorizontal: GlobalThis["reearth"]["camera"]["lookHorizontal"];
@@ -333,6 +336,7 @@ export function commonReearth({
       overrideProperty: overrideSceneProperty,
       captureScreen,
       getLocationFromScreen,
+      getCurrentLocation,
     },
     get viewport() {
       return viewport();

src/components/molecules/Visualizer/Plugin/context.tsx

@@ -71,6 +71,7 @@ export type Props = {
   onMouseEvent: (type: keyof MouseEventHandles, fn: any) => void;
   captureScreen: (type?: string, encoderOptions?: number) => string | undefined;
   getLocationFromScreen: (x: number, y: number, withTerrain?: boolean) => LatLngHeight | undefined;
+  getCurrentLocation: () => LatLngHeight | undefined;
   enableScreenSpaceCameraController: (enabled: boolean) => void;
   lookHorizontal: (amount: number) => void;
   lookVertical: (amount: number) => void;
@@ -137,6 +138,7 @@ export function Provider({
   cameraViewport,
   captureScreen,
   getLocationFromScreen,
+  getCurrentLocation,
   onMouseEvent,
   enableScreenSpaceCameraController,
   lookHorizontal,
@@ -212,6 +214,7 @@ export function Provider({
         orbit,
         captureScreen,
         getLocationFromScreen,
+        getCurrentLocation,
         enableScreenSpaceCameraController,
         lookHorizontal,
         lookVertical,
@@ -260,6 +263,7 @@ export function Provider({
       orbit,
       captureScreen,
       getLocationFromScreen,
+      getCurrentLocation,
       enableScreenSpaceCameraController,
       lookHorizontal,
       lookVertical,

src/components/molecules/Visualizer/Plugin/types.ts

@@ -108,6 +108,7 @@ export type Scene = {
     y: number,
     withTerrain?: boolean,
   ) => LatLngHeight | undefined;
+  readonly getCurrentLocation: () => LatLngHeight | undefined;
 };
 
 /** You can operate and get data about layers. */

src/components/molecules/Visualizer/hooks.ts

@@ -526,6 +526,7 @@ function useProviderProps(
     | "onMouseEvent"
     | "captureScreen"
     | "getLocationFromScreen"
+    | "getCurrentLocation"
     | "enableScreenSpaceCameraController"
     | "lookHorizontal"
     | "lookVertical"
@@ -652,6 +653,10 @@ function useProviderProps(
     [engineRef],
   );
 
+  const getCurrentLocation = useCallback(() => {
+    return engineRef.current?.getCurrentLocation();
+  }, [engineRef]);
+
   const enableScreenSpaceCameraController = useCallback(
     (enabled: boolean) => engineRef?.current?.enableScreenSpaceCameraController(enabled),
     [engineRef],
@@ -742,6 +747,7 @@ function useProviderProps(
     onMouseEvent,
     captureScreen,
     getLocationFromScreen,
+    getCurrentLocation,
     enableScreenSpaceCameraController,
     lookHorizontal,
     lookVertical,

src/components/molecules/Visualizer/storybook.tsx

@@ -102,6 +102,7 @@ export const context: ProviderProps = {
   onMouseEvent: act("onMouseEvent"),
   captureScreen: act("captureScreen"),
   getLocationFromScreen: act("getLocationFromScreen"),
+  getCurrentLocation: act("getCurrentLocation"),
   enableScreenSpaceCameraController: act("enableScreenSpaceCameraController"),
   lookHorizontal: act("lookHorizontal"),
   lookVertical: act("lookVertical"),

src/util/geolocation.ts

@@ -0,0 +1,42 @@
+import { useState } from "react";
+
+type CurrentLocation = {
+  lat: number;
+  lng: number;
+  height: number;
+};
+const initialLocation: CurrentLocation = {
+  lat: 5.70249,
+  lng: 39.7622,
+  height: 5000,
+};
+const goSuccess = (position: GeolocationPosition) => {
+  return {
+    lat: position.coords.latitude,
+    lng: position.coords.longitude,
+    heigh: position.coords.altitude ?? 5000,
+  };
+};
+
+const goError = (err: GeolocationPositionError) => {
+  console.error("Error Code = " + err.code + " - " + err.message);
+  return initialLocation;
+};
+
+const getPosition = () =>
+  new Promise((resolve, reject) =>
+    navigator.geolocation.getCurrentPosition(
+      pos => resolve(goSuccess(pos)),
+      err => reject(goError(err)),
+    ),
+  );
+export const useGeolocation = (): CurrentLocation | undefined => {
+  const [location, setLocation] = useState<CurrentLocation>();
+
+  getPosition()
+    .then((position: CurrentLocation | any) => {
+      setLocation({ ...position });
+    })
+    .catch(error => console.error("error:", error.message));
+  return location;
+};