From b96d9f32f56d485d1388e1e1da014058be7d0b64 Mon Sep 17 00:00:00 2001
From: Beatrice Mkumbo <charsbeaty@gmail.com>
Date: Thu, 17 Oct 2024 13:55:26 +0300
Subject: [PATCH] feat(web): support cesium  and google photorealistic 3d tiles
 (#1172)

Co-authored-by: airslice <icesunex@hotmail.com>
---
 web/package.json                              |   2 +-
 .../ThreeDTiles/index.tsx                     | 128 +++++++++++++++---
 .../Map/DataSourceLayerCreator/index.tsx      |  10 +-
 .../InspectorPanel/LayerInspector/index.tsx   |   2 +
 .../Editor/Map/shared/SharedComponent.tsx     |   9 +-
 web/src/beta/features/Visualizer/index.tsx    |   1 +
 .../lib/reearth-ui/components/Radio/index.tsx |  45 ++++--
 .../components/RadioGroup/index.tsx           |   8 +-
 web/src/services/i18n/translations/en.yml     |   6 +
 web/src/services/i18n/translations/ja.yml     |   6 +
 web/yarn.lock                                 |  10 +-
 11 files changed, 184 insertions(+), 43 deletions(-)

diff --git a/web/package.json b/web/package.json
index 433c3b504a..af9e7106f5 100644
--- a/web/package.json
+++ b/web/package.json
@@ -124,7 +124,7 @@
     "@lexical/utils": "0.12.0",
     "@monaco-editor/react": "4.6.0",
     "@popperjs/core": "2.11.8",
-    "@reearth/core": "0.0.7-alpha.15",
+    "@reearth/core": "0.0.7-alpha.17",
     "@rot1024/use-transition": "1.0.0",
     "@sentry/browser": "7.77.0",
     "@seznam/compose-react-refs": "1.0.6",
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/ThreeDTiles/index.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/ThreeDTiles/index.tsx
index 3b7a473fec..217a79c766 100644
--- a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/ThreeDTiles/index.tsx
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/ThreeDTiles/index.tsx
@@ -3,29 +3,124 @@ import {
   SubmitWrapper,
   Wrapper,
   InputsWrapper,
-  ContentWrapper
+  ContentWrapper,
+  LinkWrapper
 } from "@reearth/beta/features/Editor/Map/shared/SharedComponent";
-import { Button, TextInput } from "@reearth/beta/lib/reearth-ui";
+import { Button, RadioGroup, TextInput } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
-import { FC, useState } from "react";
+import { FC, useCallback, useMemo, useState } from "react";
 
-import { DataProps } from "..";
+import { DataProps, DataSourceOptType, SourceType } from "..";
 import { generateTitle } from "../util";
 
 const ThreeDTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
   const t = useT();
+
   const [value, setValue] = useState("");
+  const [sourceType, setSourceType] = useState<SourceType>("osm-buildings");
+  const [googleMapsApiKey, setGoogleMapsApiKey] = useState("");
+  const googlePhotorealistic = sourceType === "google-photorealistic";
+
+  const renderGooglePhotorealisticInput = useMemo(() => {
+    if (googlePhotorealistic) {
+      return (
+        <InputGroup
+          label={
+            <>
+              {t("Google Maps API Key ")} ( {t("You can apply a key ")}
+              <LinkWrapper
+                to="https://developers.google.com/maps/documentation/javascript/get-api-key"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {t("here")}
+              </LinkWrapper>
+              )
+            </>
+          }
+        >
+          <InputsWrapper>
+            <TextInput
+              value={googleMapsApiKey}
+              onChange={(value) => setGoogleMapsApiKey(value)}
+            />
+          </InputsWrapper>
+        </InputGroup>
+      );
+    } else return undefined;
+  }, [googleMapsApiKey, googlePhotorealistic, t]);
+
+  const renderUrlInput = useMemo(() => {
+    if (sourceType === "url") {
+      return (
+        <InputGroup label={t("Resource URL")}>
+          <InputsWrapper>
+            <TextInput
+              placeholder="https://"
+              value={value}
+              onChange={(value) => setValue(value)}
+            />
+          </InputsWrapper>
+        </InputGroup>
+      );
+    } else return undefined;
+  }, [sourceType, t, value]);
+
+  const dataSourceOptions: DataSourceOptType = useMemo(
+    () => [
+      { label: t("Cesium OSM 3D Tiles"), value: "osm-buildings" },
+      {
+        label: t("Google Photorealistic 3D Tiles"),
+        value: "google-photorealistic",
+        children: renderGooglePhotorealisticInput
+      },
+      {
+        label: t("URL"),
+        value: "url",
+        children: renderUrlInput
+      }
+    ],
+    [renderGooglePhotorealisticInput, renderUrlInput, t]
+  );
+
+  const handleDataSourceTypeChange = useCallback((newValue: string) => {
+    setSourceType(newValue as SourceType);
+    setValue("");
+    setGoogleMapsApiKey("");
+  }, []);
+
+  const title = useMemo(() => {
+    if (googlePhotorealistic) {
+      return t("Google Photorealistic 3D Tiles");
+    } else if (sourceType === "osm-buildings") {
+      return t("Cesium OSM 3D Tiles");
+    } else {
+      return generateTitle(value);
+    }
+  }, [googlePhotorealistic, sourceType, t, value]);
 
   const handleSubmit = () => {
     onSubmit({
       layerType: "simple",
       sceneId,
-      title: generateTitle(value),
+      title,
       visible: true,
       config: {
         data: {
           url: value !== "" ? value : undefined,
-          type: "3dtiles"
+          ...(googlePhotorealistic
+            ? {
+                serviceTokens: {
+                  googleMapApiKey: googleMapsApiKey || undefined
+                }
+              }
+            : {}),
+          type:
+            sourceType === "osm-buildings"
+              ? "osm-buildings"
+              : googlePhotorealistic
+                ? "google-photorealistic"
+                : "3dtiles"
         }
       }
     });
@@ -35,23 +130,22 @@ const ThreeDTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
   return (
     <Wrapper>
       <ContentWrapper>
-        <InputGroup label={t("Resource URL")}>
-          <InputsWrapper>
-            <TextInput
-              placeholder="https://"
-              value={value}
-              onChange={(value) => setValue(value)}
-            />
-          </InputsWrapper>
-        </InputGroup>
+        <RadioGroup
+          value={sourceType}
+          layout="vertical"
+          options={dataSourceOptions}
+          onChange={handleDataSourceTypeChange}
+        />
       </ContentWrapper>
-
       <SubmitWrapper>
         <Button
           title={t("Add to Layer")}
           appearance="primary"
           onClick={handleSubmit}
-          disabled={!value}
+          disabled={
+            (!value && sourceType === "url") ||
+            (!googleMapsApiKey && googlePhotorealistic)
+          }
         />
       </SubmitWrapper>
     </Wrapper>
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/index.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/index.tsx
index 1bf8a8c03e..f4b9a88681 100644
--- a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/index.tsx
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/index.tsx
@@ -1,7 +1,7 @@
 import { Modal, ModalPanel, TabItem, Tabs } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
-import { FC } from "react";
+import { FC, ReactNode } from "react";
 
 import { LayerAddProps } from "../../hooks/useLayers";
 
@@ -17,11 +17,17 @@ export type DataProps = {
   onSubmit: (layerAddInp: LayerAddProps) => void;
 };
 
-export type SourceType = "url" | "local" | "value";
+export type SourceType =
+  | "url"
+  | "local"
+  | "value"
+  | "osm-buildings"
+  | "google-photorealistic";
 
 export type DataSourceOptType = {
   label: string;
   value: SourceType;
+  children?: ReactNode;
 }[];
 
 const DataSourceLayerCreator: FC<DataProps> = ({
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/index.tsx
index 20e3801afc..15bf32d82e 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/index.tsx
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/index.tsx
@@ -50,6 +50,8 @@ const InspectorTabs: FC<Props> = ({
     if (!selectedLayer?.computedFeature?.id) return;
     const { id, geometry, properties } =
       selectedLayer.layer?.config?.data?.type === "3dtiles" ||
+      selectedLayer.layer?.config?.data?.type === "osm-buildings" ||
+      selectedLayer.layer?.config?.data?.type === "google-photorealistic" ||
       selectedLayer.layer?.config?.data?.type === "mvt"
         ? selectedLayer.computedFeature
         : (selectedLayer.computedLayer?.features?.find(
diff --git a/web/src/beta/features/Editor/Map/shared/SharedComponent.tsx b/web/src/beta/features/Editor/Map/shared/SharedComponent.tsx
index c2a956f3c4..d1cac4fb45 100644
--- a/web/src/beta/features/Editor/Map/shared/SharedComponent.tsx
+++ b/web/src/beta/features/Editor/Map/shared/SharedComponent.tsx
@@ -1,8 +1,9 @@
 import { styled } from "@reearth/services/theme";
 import { FC, ReactNode } from "react";
+import { Link } from "react-router-dom";
 
 export const InputGroup: FC<{
-  label: string;
+  label: string | ReactNode;
   description?: string;
   children: ReactNode;
 }> = ({ label, description, children }) => {
@@ -96,3 +97,9 @@ export const ContentWrapper = styled("div")(({ theme }) => ({
     background: theme.relative.lighter
   }
 }));
+
+export const LinkWrapper = styled(Link)(({ theme }) => ({
+  textDecoration: "none",
+  color: theme.select.strong,
+  paddingRight: theme.spacing.micro
+}));
diff --git a/web/src/beta/features/Visualizer/index.tsx b/web/src/beta/features/Visualizer/index.tsx
index 460c292967..3a0647ca3c 100644
--- a/web/src/beta/features/Visualizer/index.tsx
+++ b/web/src/beta/features/Visualizer/index.tsx
@@ -233,6 +233,7 @@ const Visualizer: FC<VisualizerProps> = ({
         camera={visualizerCamera}
         interactionMode={interactionMode}
         shouldRender={shouldRender}
+        displayCredits={false}
         onCameraChange={onCameraChange}
         onLayerSelect={handleCoreLayerSelect}
         onLayerDrop={handleLayerDrop}
diff --git a/web/src/beta/lib/reearth-ui/components/Radio/index.tsx b/web/src/beta/lib/reearth-ui/components/Radio/index.tsx
index 486932a6d2..750d210796 100644
--- a/web/src/beta/lib/reearth-ui/components/Radio/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Radio/index.tsx
@@ -1,11 +1,12 @@
 import { styled } from "@reearth/services/theme";
-import { FC } from "react";
+import { FC, ReactNode } from "react";
 
 export type RadioProps = {
   value?: string;
   label?: string;
   disabled?: boolean;
   checked?: boolean;
+  content?: ReactNode;
   onChange?: (value: string) => void;
 };
 
@@ -14,6 +15,7 @@ export const Radio: FC<RadioProps> = ({
   label,
   disabled,
   checked,
+  content,
   onChange
 }) => {
   const handleChange = () => {
@@ -22,22 +24,32 @@ export const Radio: FC<RadioProps> = ({
   };
 
   return (
-    <RadioWrapper onClick={handleChange}>
-      <RadioInput
-        type="radio"
-        value={value}
-        checked={checked}
-        disabled={disabled}
-        onChange={handleChange}
-      />
-      <RadioButton checked={checked} disabled={disabled}>
-        {checked && !disabled && <RadioIndicator checked={checked} />}
-      </RadioButton>
-      {label && <RadioLabel disabled={disabled}>{label}</RadioLabel>}
-    </RadioWrapper>
+    <Wrapper>
+      <RadioWrapper onClick={handleChange}>
+        <RadioInput
+          type="radio"
+          value={value}
+          checked={checked}
+          disabled={disabled}
+          onChange={handleChange}
+        />
+        <RadioButton checked={checked} disabled={disabled}>
+          {checked && !disabled && <RadioIndicator checked={checked} />}
+        </RadioButton>
+        {label && <RadioLabel disabled={disabled}>{label}</RadioLabel>}
+      </RadioWrapper>
+      {content && <RadioContent>{content}</RadioContent>}
+    </Wrapper>
   );
 };
 
+const Wrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing.smallest,
+  flexDirection: "column",
+  alignItems: "flex-start"
+}));
+
 const RadioWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   gap: theme.spacing.smallest,
@@ -87,3 +99,8 @@ const RadioButton = styled("div")<{ checked?: boolean; disabled?: boolean }>(
     cursor: disabled ? "not-allowed" : "pointer"
   })
 );
+
+const RadioContent = styled("div")(({ theme }) => ({
+  padding: `${theme.spacing.small}px ${theme.spacing.large}px 0 ${theme.spacing.large}px`,
+  width: "100%"
+}));
diff --git a/web/src/beta/lib/reearth-ui/components/RadioGroup/index.tsx b/web/src/beta/lib/reearth-ui/components/RadioGroup/index.tsx
index 0845f1ec92..3f2727aaba 100644
--- a/web/src/beta/lib/reearth-ui/components/RadioGroup/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/RadioGroup/index.tsx
@@ -1,11 +1,11 @@
 import { Radio } from "@reearth/beta/lib/reearth-ui";
 import { styled } from "@reearth/services/theme";
-import { FC, useCallback, useEffect, useState } from "react";
+import { FC, ReactNode, useCallback, useEffect, useState } from "react";
 
 export type RadioGroupProps = {
   layout?: "vertical" | "horizontal";
   value?: string;
-  options?: { value: string; label?: string }[];
+  options?: { value: string; label?: string; children?: ReactNode }[];
   onChange?: (value: string) => void;
 };
 
@@ -38,6 +38,7 @@ export const RadioGroup: FC<RadioGroupProps> = ({
           value={option.value}
           label={option.label}
           checked={option.value === currentValue}
+          content={option.children}
           onChange={handleValueChange}
         />
       ))}
@@ -49,6 +50,7 @@ const RadioGroupWrapper = styled("div")<{ layout?: "vertical" | "horizontal" }>(
   ({ layout, theme }) => ({
     display: "flex",
     flexDirection: layout === "vertical" ? "column" : "row",
-    gap: theme.spacing.normal
+    gap: theme.spacing.normal,
+    width: "100%"
   })
 );
diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml
index 67e413e367..72f322a998 100644
--- a/web/src/services/i18n/translations/en.yml
+++ b/web/src/services/i18n/translations/en.yml
@@ -82,6 +82,12 @@ WMS: ''
 Vector Tile: ''
 3D Tiles: ''
 Data Source Manager: ''
+'Google Maps API Key ': ''
+'You can apply a key ': ''
+here: ''
+Cesium OSM 3D Tiles: ''
+Google Photorealistic 3D Tiles: ''
+URL: ''
 Choose layer to add: ''
 layer name: ''
 Layer name: ''
diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml
index 2573965577..13d5f0cee6 100644
--- a/web/src/services/i18n/translations/ja.yml
+++ b/web/src/services/i18n/translations/ja.yml
@@ -82,6 +82,12 @@ WMS: WMS
 Vector Tile: Vector Tile
 3D Tiles: 3D Tiles
 Data Source Manager: データソースマネージャー
+'Google Maps API Key ': ''
+'You can apply a key ': ''
+here: ''
+Cesium OSM 3D Tiles: ''
+Google Photorealistic 3D Tiles: ''
+URL: ''
 Choose layer to add: レイヤーの選択
 layer name: レイヤー名
 Layer name: ''
diff --git a/web/yarn.lock b/web/yarn.lock
index ed908ab4a5..0940f8778b 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -8186,9 +8186,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@reearth/core@npm:0.0.7-alpha.15":
-  version: 0.0.7-alpha.15
-  resolution: "@reearth/core@npm:0.0.7-alpha.15"
+"@reearth/core@npm:0.0.7-alpha.17":
+  version: 0.0.7-alpha.17
+  resolution: "@reearth/core@npm:0.0.7-alpha.17"
   dependencies:
     "@radix-ui/react-checkbox": "npm:1.1.1"
     "@radix-ui/react-dialog": "npm:1.1.1"
@@ -8241,7 +8241,7 @@ __metadata:
     cesium: 1.118.x
     react: ^18.2.0
     react-dom: ^18.2.0
-  checksum: 10c0/38e5d4950a116ff52ef5a04eb0614d499721291dd51fe8e442ba4a087417bca580c6748a169dcda505d0d218c9fda760e2d173f503e70d7bcf733a675e7e05f4
+  checksum: 10c0/5d47b409dc9a990c5f3141cb4fbbcc24323bd58435a38af2d72cf48acce29df8be4124aefa50a80ce960820c2ffc6bc482e911b667e3078f7c747ff2fad4d084
   languageName: node
   linkType: hard
 
@@ -8281,7 +8281,7 @@ __metadata:
     "@monaco-editor/react": "npm:4.6.0"
     "@playwright/test": "npm:1.46.1"
     "@popperjs/core": "npm:2.11.8"
-    "@reearth/core": "npm:0.0.7-alpha.15"
+    "@reearth/core": "npm:0.0.7-alpha.17"
     "@rollup/plugin-yaml": "npm:4.1.2"
     "@rot1024/use-transition": "npm:1.0.0"
     "@sentry/browser": "npm:7.77.0"