From 3016a71584684ad6359bdc78adfffd0f2fd01f8c Mon Sep 17 00:00:00 2001
From: Beatrice Mkumbo <charsbeaty@gmail.com>
Date: Thu, 7 Nov 2024 17:26:48 -0800
Subject: [PATCH] refactor(web): add layer from resource (#1212)

Co-authored-by: airslice <icesunex@hotmail.com>
---
 .../Map/DataSourceLayerCreator/CSV/index.tsx  |  11 +-
 .../Map/DataSourceLayerCreator/CZML/hooks.tsx |  63 +++++++++
 .../Map/DataSourceLayerCreator/CZML/index.tsx | 124 ++++++++++++++++++
 .../{Common => GeoJSON}/hooks.tsx             |  77 ++++-------
 .../{Common => GeoJSON}/index.tsx             |  57 +++-----
 .../Map/DataSourceLayerCreator/KML/hooks.tsx  |  63 +++++++++
 .../Map/DataSourceLayerCreator/KML/index.tsx  | 124 ++++++++++++++++++
 .../ThreeDTiles/index.tsx                     |  12 +-
 .../Map/DataSourceLayerCreator/index.tsx      |  31 +++--
 .../Editor/Map/DataSourceLayerCreator/util.ts |  11 +-
 .../Editor/Map/shared/SharedComponent.tsx     |   2 +-
 web/src/services/i18n/translations/en.yml     |  22 ++--
 web/src/services/i18n/translations/ja.yml     |  24 ++--
 13 files changed, 493 insertions(+), 128 deletions(-)
 create mode 100644 web/src/beta/features/Editor/Map/DataSourceLayerCreator/CZML/hooks.tsx
 create mode 100644 web/src/beta/features/Editor/Map/DataSourceLayerCreator/CZML/index.tsx
 rename web/src/beta/features/Editor/Map/DataSourceLayerCreator/{Common => GeoJSON}/hooks.tsx (55%)
 rename web/src/beta/features/Editor/Map/DataSourceLayerCreator/{Common => GeoJSON}/index.tsx (65%)
 create mode 100644 web/src/beta/features/Editor/Map/DataSourceLayerCreator/KML/hooks.tsx
 create mode 100644 web/src/beta/features/Editor/Map/DataSourceLayerCreator/KML/index.tsx

diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/CSV/index.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/CSV/index.tsx
index 65b1fa51f4..f196e93c69 100644
--- a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/CSV/index.tsx
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/CSV/index.tsx
@@ -105,7 +105,11 @@ const CSV: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
           </InputGroup>
         )}
         <Warning>
-          <Icon icon="lightBulb" color={theme.warning.main} size="large" />
+          <IconWrapper
+            icon="lightBulb"
+            color={theme.warning.main}
+            size="normal"
+          />
           <TextWrapper>
             {t(
               "Visualizer currently only supports CSV point data. Please specify the column names for latitude and longitude in your data below."
@@ -157,6 +161,11 @@ const TextWrapper = styled("div")(({ theme }) => ({
   fontWeight: theme.fonts.weight.regular
 }));
 
+const IconWrapper = styled(Icon)(() => ({
+  flexGrow: 0,
+  flexShrink: 0
+}));
+
 const CoordinateWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   gap: theme.spacing.small,
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/CZML/hooks.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/CZML/hooks.tsx
new file mode 100644
index 0000000000..8afe531911
--- /dev/null
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/CZML/hooks.tsx
@@ -0,0 +1,63 @@
+import { useT } from "@reearth/services/i18n";
+import { useState, useMemo, useCallback } from "react";
+
+import { DataProps, DataSourceOptType, SourceType } from "..";
+import { generateTitle } from "../util";
+
+export default ({ sceneId, onClose, onSubmit }: DataProps) => {
+  const t = useT();
+
+  const [sourceType, setSourceType] = useState<SourceType>("local");
+
+  const [value, setValue] = useState("");
+  const [layerName, setLayerName] = useState("");
+  const dataSourceTypeOptions: DataSourceOptType = useMemo(
+    () => [
+      { label: t("From Assets"), value: "local" },
+      { label: t("From Web"), value: "url" },
+      { label: t("From Value"), value: "value" }
+    ],
+    [t]
+  );
+
+  const handleSubmit = () => {
+    let encodeUrl = undefined;
+
+    if (sourceType === "value" && value !== "") {
+      encodeUrl = "data:text/plain;charset=UTF-8," + encodeURIComponent(value);
+    }
+
+    onSubmit({
+      layerType: "simple",
+      sceneId,
+      title: generateTitle(value, layerName),
+      visible: true,
+      config: {
+        data: {
+          url: sourceType === "value" ? encodeUrl : value || undefined,
+          type: "czml",
+        }
+      }
+    });
+    onClose();
+  };
+
+  const handleValueChange = useCallback((value?: string, name?: string) => {
+    setValue(value || "");
+    setLayerName(name || "");
+  }, []);
+
+  const handleDataSourceTypeChange = useCallback((newValue: string) => {
+    setSourceType(newValue as SourceType);
+    setValue("");
+  }, []);
+
+  return {
+    value,
+    dataSourceTypeOptions,
+    sourceType,
+    handleValueChange,
+    handleDataSourceTypeChange,
+    handleSubmit
+  };
+};
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/CZML/index.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/CZML/index.tsx
new file mode 100644
index 0000000000..f278c174cf
--- /dev/null
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/CZML/index.tsx
@@ -0,0 +1,124 @@
+import {
+  InputGroup,
+  SubmitWrapper,
+  Wrapper,
+  InputsWrapper,
+  ContentWrapper
+} from "@reearth/beta/features/Editor/Map/shared/SharedComponent";
+import {
+  RadioGroup,
+  Button,
+  TextInput,
+  TextArea,
+  Icon
+} from "@reearth/beta/lib/reearth-ui";
+import { AssetField } from "@reearth/beta/ui/fields";
+import { useT } from "@reearth/services/i18n";
+import { styled, useTheme } from "@reearth/services/theme";
+import { FC } from "react";
+
+import { DataProps } from "..";
+
+import useHooks from "./hooks";
+
+const CZML: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
+  const t = useT();
+
+  const {
+    value,
+    sourceType,
+    dataSourceTypeOptions,
+    handleValueChange,
+    handleDataSourceTypeChange,
+    handleSubmit
+  } = useHooks({ sceneId, onSubmit, onClose });
+
+  const theme = useTheme();
+  return (
+    <Wrapper>
+      <ContentWrapper>
+        <Warning>
+          <IconWrapper
+            icon="lightBulb"
+            color={theme.warning.main}
+            size="normal"
+          />
+          <TextWrapper>
+            {t(
+              "Support for the CZML format is currently experimental and remains somewhat unstable, with certain features not yet fully supported. We advise using it with caution."
+            )}
+          </TextWrapper>
+        </Warning>
+        <InputGroup label={t("Source Type")}>
+          <RadioGroup
+            value={sourceType}
+            options={dataSourceTypeOptions}
+            onChange={handleDataSourceTypeChange}
+          />
+        </InputGroup>
+
+        {sourceType === "local" && (
+          <InputsWrapper>
+            <AssetField
+              inputMethod="asset"
+              title={t("Asset")}
+              value={value}
+              assetsTypes={["czml"]}
+              onChange={handleValueChange}
+            />
+          </InputsWrapper>
+        )}
+        {sourceType === "url" && (
+          <InputGroup label={t("Resource URL")}>
+            <InputsWrapper>
+              <TextInput
+                placeholder={t("Input Text")}
+                value={value}
+                onChange={handleValueChange}
+              />
+            </InputsWrapper>
+          </InputGroup>
+        )}
+        {sourceType === "value" && (
+          <InputGroup label={t("Value")}>
+            <InputsWrapper>
+              <TextArea
+                placeholder={t("Input data here")}
+                rows={8}
+                value={value}
+                onChange={handleValueChange}
+              />
+            </InputsWrapper>
+          </InputGroup>
+        )}
+      </ContentWrapper>
+      <SubmitWrapper>
+        <Button
+          title={t("Add to Layer")}
+          appearance="primary"
+          onClick={handleSubmit}
+          disabled={!value}
+        />
+      </SubmitWrapper>
+    </Wrapper>
+  );
+};
+
+const Warning = styled("div")(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing.small,
+  alignItems: "center"
+}));
+
+const IconWrapper = styled(Icon)(() => ({
+  flexGrow: 0,
+  flexShrink: 0
+}));
+
+const TextWrapper = styled("div")(({ theme }) => ({
+  color: theme.warning.main,
+  fontSize: theme.fonts.sizes.body,
+  fontWeight: theme.fonts.weight.regular
+}));
+
+export default CZML;
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/Common/hooks.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/GeoJSON/hooks.tsx
similarity index 55%
rename from web/src/beta/features/Editor/Map/DataSourceLayerCreator/Common/hooks.tsx
rename to web/src/beta/features/Editor/Map/DataSourceLayerCreator/GeoJSON/hooks.tsx
index 79edc7ffcd..b809530a3f 100644
--- a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/Common/hooks.tsx
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/GeoJSON/hooks.tsx
@@ -1,5 +1,3 @@
-import { GisType } from "@reearth/beta/features/AssetsManager/constants";
-import { DataType } from "@reearth/core";
 import { useT } from "@reearth/services/i18n";
 import { useState, useMemo, useCallback } from "react";
 
@@ -10,7 +8,6 @@ export default ({ sceneId, onClose, onSubmit }: DataProps) => {
   const t = useT();
 
   const [sourceType, setSourceType] = useState<SourceType>("local");
-  const [fileFormat, setFileFormat] = useState<GisType>("geojson");
 
   const [value, setValue] = useState("");
   const [layerName, setLayerName] = useState("");
@@ -24,42 +21,26 @@ export default ({ sceneId, onClose, onSubmit }: DataProps) => {
     [t]
   );
 
-  const fileFormatOptions = [
-    {
-      value: "geojson",
-      label: "GeoJSON"
-    },
-    {
-      value: "kml",
-      label: "KML"
-    },
-    {
-      value: "czml",
-      label: "CZML"
-    }
-  ];
-
-  const isValidExtension = useCallback(() => {
-    if (sourceType === "url" || sourceType === "local") {
-      const extension = value.split(".").pop()?.toLowerCase();
-      return extension === fileFormat.toLowerCase();
-    }
-    return true;
-  }, [value, fileFormat, sourceType]);
+  const isValidGeoJSON = (json: any): boolean => {
+    return (
+      json &&
+      typeof json === "object" &&
+      (json.type === "FeatureCollection" || json.type === "Feature")
+    );
+  };
 
-  const handleSubmit = () => {
+  const handleSubmit = useCallback(() => {
     let parsedValue = null;
 
     if (sourceType === "value" && value !== "") {
-      if (fileFormat === "geojson") {
-        try {
-          parsedValue = JSON.parse(value);
-        } catch (_error) {
-          parsedValue = value;
+      try {
+        parsedValue = JSON.parse(value);
+        if (!isValidGeoJSON(parsedValue)) {
+          throw new Error(t("Invalid GeoJSON format"));
         }
-      } else {
-        parsedValue =
-          "data:text/plain;charset=UTF-8," + encodeURIComponent(value);
+      } catch (error) {
+        console.error("GeoJSON parsing error:", error);
+        throw new Error(t("Please enter valid GeoJSON"));
       }
     }
 
@@ -73,10 +54,8 @@ export default ({ sceneId, onClose, onSubmit }: DataProps) => {
           url:
             (sourceType === "url" || sourceType === "local") && value !== ""
               ? value
-              : fileFormat === "czml" || fileFormat === "kml"
-                ? parsedValue
-                : undefined,
-          type: fileFormat.toLowerCase() as DataType,
+              : undefined,
+          type: "geojson",
           value: parsedValue,
           geojson: {
             useAsResource: prioritizePerformance
@@ -85,36 +64,34 @@ export default ({ sceneId, onClose, onSubmit }: DataProps) => {
       }
     });
     onClose();
-  };
+  }, [
+    layerName,
+    onClose,
+    onSubmit,
+    prioritizePerformance,
+    sceneId,
+    sourceType,
+    t,
+    value
+  ]);
 
   const handleValueChange = useCallback((value?: string, name?: string) => {
     setValue(value || "");
     setLayerName(name || "");
   }, []);
 
-  const handleFileFormatChange = useCallback((value: string | string[]) => {
-    setFileFormat(value as GisType);
-  }, []);
-
   const handleDataSourceTypeChange = useCallback((newValue: string) => {
     setSourceType(newValue as SourceType);
     setValue("");
   }, []);
 
-  const assetsTypes = useMemo(() => [fileFormat], [fileFormat]);
-
   return {
     value,
     dataSourceTypeOptions,
-    fileFormatOptions,
-    fileFormat,
-    assetsTypes,
     sourceType,
     prioritizePerformance,
     setPrioritizePerformance,
-    isValidExtension,
     handleValueChange,
-    handleFileFormatChange,
     handleDataSourceTypeChange,
     handleSubmit
   };
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/Common/index.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/GeoJSON/index.tsx
similarity index 65%
rename from web/src/beta/features/Editor/Map/DataSourceLayerCreator/Common/index.tsx
rename to web/src/beta/features/Editor/Map/DataSourceLayerCreator/GeoJSON/index.tsx
index 999754a6bc..bbd4f1b90c 100644
--- a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/Common/index.tsx
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/GeoJSON/index.tsx
@@ -6,7 +6,6 @@ import {
   ContentWrapper
 } from "@reearth/beta/features/Editor/Map/shared/SharedComponent";
 import {
-  Selector,
   RadioGroup,
   Switcher,
   Button,
@@ -21,38 +20,23 @@ import { DataProps } from "..";
 
 import useHooks from "./hooks";
 
-const CommonAsset: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
+const GeoJSON: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
   const t = useT();
 
   const {
     value,
-    fileFormat,
-    assetsTypes,
     sourceType,
     dataSourceTypeOptions,
-    fileFormatOptions,
     prioritizePerformance,
     handleValueChange,
     handleDataSourceTypeChange,
-    handleFileFormatChange,
     handleSubmit,
-    setPrioritizePerformance,
-    isValidExtension
+    setPrioritizePerformance
   } = useHooks({ sceneId, onSubmit, onClose });
 
   return (
     <Wrapper>
       <ContentWrapper>
-        <InputGroup
-          label={t("File Format")}
-          description={t("File format of the data source you want to add.")}
-        >
-          <Selector
-            value={fileFormat}
-            options={fileFormatOptions}
-            onChange={handleFileFormatChange}
-          />
-        </InputGroup>
         <InputGroup label={t("Source Type")}>
           <RadioGroup
             value={sourceType}
@@ -61,18 +45,18 @@ const CommonAsset: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
           />
         </InputGroup>
 
-        {sourceType == "local" && (
+        {sourceType === "local" && (
           <InputsWrapper>
             <AssetField
               inputMethod="asset"
               title={t("Asset")}
               value={value}
-              assetsTypes={assetsTypes}
+              assetsTypes={["geojson"]}
               onChange={handleValueChange}
             />
           </InputsWrapper>
         )}
-        {sourceType == "url" && (
+        {sourceType === "url" && (
           <InputGroup label={t("Resource URL")}>
             <InputsWrapper>
               <TextInput
@@ -83,7 +67,7 @@ const CommonAsset: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
             </InputsWrapper>
           </InputGroup>
         )}
-        {sourceType == "value" && (
+        {sourceType === "value" && (
           <InputGroup label={t("Value")}>
             <InputsWrapper>
               <TextArea
@@ -95,31 +79,28 @@ const CommonAsset: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
             </InputsWrapper>
           </InputGroup>
         )}
-        {fileFormat === "geojson" && (
-          <InputGroup label={t("Prioritize Performance")}>
-            <Switcher
-              value={prioritizePerformance}
-              onChange={(v) => setPrioritizePerformance(v)}
-            />
-          </InputGroup>
-        )}
+        <InputGroup
+          label={t("Prioritize Performance")}
+          description={t(
+            "If Prioritize Performance is set to True, the Visualizer will prioritize performance. This layer will not use the Layer Style but instead will apply its own predefined style, which cannot be modified."
+          )}
+        >
+          <Switcher
+            value={prioritizePerformance}
+            onChange={(v) => setPrioritizePerformance(v)}
+          />
+        </InputGroup>
       </ContentWrapper>
       <SubmitWrapper>
         <Button
           title={t("Add to Layer")}
           appearance="primary"
           onClick={handleSubmit}
-          disabled={
-            ((sourceType === "url" ||
-              sourceType === "value" ||
-              sourceType === "local") &&
-              !value) ||
-            !isValidExtension()
-          }
+          disabled={!value}
         />
       </SubmitWrapper>
     </Wrapper>
   );
 };
 
-export default CommonAsset;
+export default GeoJSON;
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/KML/hooks.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/KML/hooks.tsx
new file mode 100644
index 0000000000..6fe2c6ea40
--- /dev/null
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/KML/hooks.tsx
@@ -0,0 +1,63 @@
+import { useT } from "@reearth/services/i18n";
+import { useState, useMemo, useCallback } from "react";
+
+import { DataProps, DataSourceOptType, SourceType } from "..";
+import { generateTitle } from "../util";
+
+export default ({ sceneId, onClose, onSubmit }: DataProps) => {
+  const t = useT();
+
+  const [sourceType, setSourceType] = useState<SourceType>("local");
+
+  const [value, setValue] = useState("");
+  const [layerName, setLayerName] = useState("");
+  const dataSourceTypeOptions: DataSourceOptType = useMemo(
+    () => [
+      { label: t("From Assets"), value: "local" },
+      { label: t("From Web"), value: "url" },
+      { label: t("From Value"), value: "value" }
+    ],
+    [t]
+  );
+
+  const handleSubmit = () => {
+    let encodeUrl = undefined;
+
+    if (sourceType === "value" && value !== "") {
+      encodeUrl = "data:text/plain;charset=UTF-8," + encodeURIComponent(value);
+    }
+
+    onSubmit({
+      layerType: "simple",
+      sceneId,
+      title: generateTitle(value, layerName),
+      visible: true,
+      config: {
+        data: {
+          url: sourceType === "value" ? encodeUrl : value || undefined,
+          type: "kml",
+        }
+      }
+    });
+    onClose();
+  };
+
+  const handleValueChange = useCallback((value?: string, name?: string) => {
+    setValue(value || "");
+    setLayerName(name || "");
+  }, []);
+
+  const handleDataSourceTypeChange = useCallback((newValue: string) => {
+    setSourceType(newValue as SourceType);
+    setValue("");
+  }, []);
+
+  return {
+    value,
+    dataSourceTypeOptions,
+    sourceType,
+    handleValueChange,
+    handleDataSourceTypeChange,
+    handleSubmit
+  };
+};
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/KML/index.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/KML/index.tsx
new file mode 100644
index 0000000000..6e791bf8ec
--- /dev/null
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/KML/index.tsx
@@ -0,0 +1,124 @@
+import {
+  InputGroup,
+  SubmitWrapper,
+  Wrapper,
+  InputsWrapper,
+  ContentWrapper
+} from "@reearth/beta/features/Editor/Map/shared/SharedComponent";
+import {
+  RadioGroup,
+  Button,
+  TextInput,
+  TextArea,
+  Icon
+} from "@reearth/beta/lib/reearth-ui";
+import { AssetField } from "@reearth/beta/ui/fields";
+import { useT } from "@reearth/services/i18n";
+import { styled, useTheme } from "@reearth/services/theme";
+import { FC } from "react";
+
+import { DataProps } from "..";
+
+import useHooks from "./hooks";
+
+const KML: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
+  const t = useT();
+
+  const {
+    value,
+    sourceType,
+    dataSourceTypeOptions,
+    handleValueChange,
+    handleDataSourceTypeChange,
+    handleSubmit
+  } = useHooks({ sceneId, onSubmit, onClose });
+
+  const theme = useTheme();
+  return (
+    <Wrapper>
+      <ContentWrapper>
+        <Warning>
+          <IconWrapper
+            icon="lightBulb"
+            color={theme.warning.main}
+            size="normal"
+          />
+          <TextWrapper>
+            {t(
+              "Support for the KML format is currently experimental and remains somewhat unstable, with certain features not yet fully supported. We advise using it with caution."
+            )}
+          </TextWrapper>
+        </Warning>
+        <InputGroup label={t("Source Type")}>
+          <RadioGroup
+            value={sourceType}
+            options={dataSourceTypeOptions}
+            onChange={handleDataSourceTypeChange}
+          />
+        </InputGroup>
+
+        {sourceType === "local" && (
+          <InputsWrapper>
+            <AssetField
+              inputMethod="asset"
+              title={t("Asset")}
+              value={value}
+              assetsTypes={["kml"]}
+              onChange={handleValueChange}
+            />
+          </InputsWrapper>
+        )}
+        {sourceType === "url" && (
+          <InputGroup label={t("Resource URL")}>
+            <InputsWrapper>
+              <TextInput
+                placeholder={t("Input Text")}
+                value={value}
+                onChange={handleValueChange}
+              />
+            </InputsWrapper>
+          </InputGroup>
+        )}
+        {sourceType === "value" && (
+          <InputGroup label={t("Value")}>
+            <InputsWrapper>
+              <TextArea
+                placeholder={t("Input data here")}
+                rows={8}
+                value={value}
+                onChange={handleValueChange}
+              />
+            </InputsWrapper>
+          </InputGroup>
+        )}
+      </ContentWrapper>
+      <SubmitWrapper>
+        <Button
+          title={t("Add to Layer")}
+          appearance="primary"
+          onClick={handleSubmit}
+          disabled={!value}
+        />
+      </SubmitWrapper>
+    </Wrapper>
+  );
+};
+
+const Warning = styled("div")(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing.small,
+  alignItems: "center"
+}));
+
+const IconWrapper = styled(Icon)(() => ({
+  flexGrow: 0,
+  flexShrink: 0
+}));
+
+const TextWrapper = styled("div")(({ theme }) => ({
+  color: theme.warning.main,
+  fontSize: theme.fonts.sizes.body,
+  fontWeight: theme.fonts.weight.regular
+}));
+
+export default KML;
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 217a79c766..b37e0549e9 100644
--- a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/ThreeDTiles/index.tsx
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/ThreeDTiles/index.tsx
@@ -8,11 +8,19 @@ import {
 } from "@reearth/beta/features/Editor/Map/shared/SharedComponent";
 import { Button, RadioGroup, TextInput } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
-import { FC, useCallback, useMemo, useState } from "react";
+import { FC, ReactNode, useCallback, useMemo, useState } from "react";
 
-import { DataProps, DataSourceOptType, SourceType } from "..";
+import { DataProps } from "..";
 import { generateTitle } from "../util";
 
+export type SourceType = "url" | "osm-buildings" | "google-photorealistic";
+
+export type DataSourceOptType = {
+  label: string;
+  value: SourceType;
+  children?: ReactNode;
+}[];
+
 const ThreeDTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
   const t = useT();
 
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/index.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/index.tsx
index f4b9a88681..fb5f36df63 100644
--- a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/index.tsx
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/index.tsx
@@ -5,8 +5,10 @@ import { FC, ReactNode } from "react";
 
 import { LayerAddProps } from "../../hooks/useLayers";
 
-import CommonAsset from "./Common";
 import CSV from "./CSV";
+import CZML from "./CZML";
+import GeoJSON from "./GeoJSON";
+import KML from "./KML";
 import ThreeDTiles from "./ThreeDTiles";
 import VectorTiles from "./VectorTiles";
 import WmsTiles from "./WmsTiles";
@@ -17,12 +19,7 @@ export type DataProps = {
   onSubmit: (layerAddInp: LayerAddProps) => void;
 };
 
-export type SourceType =
-  | "url"
-  | "local"
-  | "value"
-  | "osm-buildings"
-  | "google-photorealistic";
+export type SourceType = "url" | "local" | "value";
 
 export type DataSourceOptType = {
   label: string;
@@ -39,20 +36,20 @@ const DataSourceLayerCreator: FC<DataProps> = ({
 
   const tabsItem: TabItem[] = [
     {
-      id: "asset",
-      name: t("Common"),
+      id: "geojson",
+      name: "GeoJSON",
       children: (
-        <CommonAsset sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />
+        <GeoJSON sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />
       )
     },
     {
       id: "csv",
-      name: t("CSV"),
+      name: "CSV",
       children: <CSV sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />
     },
     {
       id: "wms",
-      name: t("WMS"),
+      name: "WMS",
       children: (
         <WmsTiles sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />
       )
@@ -70,6 +67,16 @@ const DataSourceLayerCreator: FC<DataProps> = ({
       children: (
         <ThreeDTiles sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />
       )
+    },
+    {
+      id: "czml",
+      name: "CZML",
+      children: <CZML sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />
+    },
+    {
+      id: "kml",
+      name: "KML",
+      children: <KML sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />
     }
   ];
 
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/util.ts b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/util.ts
index 5cd9c4ef00..939e4f068a 100644
--- a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/util.ts
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/util.ts
@@ -1,8 +1,17 @@
 import generateRandomString from "@reearth/beta/utils/generate-random-string";
 
+const  isValidUrl = (string: string): boolean => {
+  try {
+    new URL(string);
+    return true;
+  } catch (_) {
+    return false;
+  }
+}
+
 export const generateTitle = (url: string, layerName?: string): string => {
   if (layerName && layerName.trim() !== "") return layerName;
-  if (url.trim() !== "") {
+  if (isValidUrl(url)) {
     try {
       const urlObject = new URL(url);
       const pathParts = urlObject.pathname.split("/");
diff --git a/web/src/beta/features/Editor/Map/shared/SharedComponent.tsx b/web/src/beta/features/Editor/Map/shared/SharedComponent.tsx
index 89c91bbb23..02b7de3819 100644
--- a/web/src/beta/features/Editor/Map/shared/SharedComponent.tsx
+++ b/web/src/beta/features/Editor/Map/shared/SharedComponent.tsx
@@ -40,7 +40,7 @@ export const Label = styled("div")(({ theme }) => ({
 
 const Description = styled("div")(({ theme }) => ({
   color: theme.content.weak,
-  fontSize: theme.fonts.sizes.body,
+  fontSize: theme.fonts.sizes.footnote,
   fontWeight: theme.fonts.weight.regular
 }));
 
diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml
index b1f495dd23..13989aabad 100644
--- a/web/src/services/i18n/translations/en.yml
+++ b/web/src/services/i18n/translations/en.yml
@@ -88,27 +88,27 @@ Re:Earth Visualizer: ''
 Page: ''
 From Assets: ''
 From Web: ''
-From Value: ''
-File Format: ''
-File format of the data source you want to add.: ''
 Source Type: ''
 Asset: ''
 Resource URL: ''
-Input Text: ''
-Value: ''
-Input data here: ''
-Prioritize Performance: ''
-Add to Layer: ''
 Visualizer currently only supports CSV point data. Please specify the column names for latitude and longitude in your data below.: ''
 Latitude Column Name: ''
 Column Name: ''
 Longitude Column Name: ''
-Common: ''
-CSV: ''
-WMS: ''
+Add to Layer: ''
+From Value: ''
+Support for the CZML format is currently experimental and remains somewhat unstable, with certain features not yet fully supported. We advise using it with caution.: ''
+Input Text: ''
+Value: ''
+Input data here: ''
+Invalid GeoJSON format: ''
+Please enter valid GeoJSON: ''
+Prioritize Performance: ''
+If Prioritize Performance is set to True, the Visualizer will prioritize performance. This layer will not use the Layer Style but instead will apply its own predefined style, which cannot be modified.: ''
 Vector Tile: ''
 3D Tiles: ''
 Data Source Manager: ''
+Support for the KML format is currently experimental and remains somewhat unstable, with certain features not yet fully supported. We advise using it with caution.: ''
 'Google Maps API Key ': ''
 'You can apply a key ': ''
 here: ''
diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml
index b600218d32..cbc67d4339 100644
--- a/web/src/services/i18n/translations/ja.yml
+++ b/web/src/services/i18n/translations/ja.yml
@@ -88,27 +88,27 @@ Re:Earth Visualizer: Re:Earthビジュアライザー
 Page: ページ
 From Assets: アセットから
 From Web: ウェブから
-From Value: 値から
-File Format: ファイル形式
-File format of the data source you want to add.: 追加したいデータソースのファイル形式
 Source Type: ソースタイプ
 Asset: アセット
 Resource URL: リソースURL
-Input Text: テキストを入力
-Value: 値
-Input data here: ここにデータを入力
-Prioritize Performance: パフォーマンスを優先
-Add to Layer: レイヤーに追加
 Visualizer currently only supports CSV point data. Please specify the column names for latitude and longitude in your data below.: ビジュアライザーは現在、CSVポイントデータのみ対応しています。緯度と経度の列名を以下に指定してください。
 Latitude Column Name: 緯度の列名
 Column Name: 列名
 Longitude Column Name: 経度の列名
-Common: 共通
-CSV: CSV
-WMS: WMS
-Vector Tile: ベクタタイル
+Add to Layer: レイヤーに追加
+From Value: 値から
+Support for the CZML format is currently experimental and remains somewhat unstable, with certain features not yet fully supported. We advise using it with caution.: CZMLフォーマットのサポートは現在、実験的な段階にあり、安定性に欠ける部分があります。また、いくつかの機能はまだ完全にはサポートされていません。ご利用の際はご注意ください。
+Input Text: テキストを入力
+Value: 値
+Input data here: ここにデータを入力
+Invalid GeoJSON format: 不正なGeoJSON形式
+Please enter valid GeoJSON: 有効なGeoJSONを入力してください
+Prioritize Performance: パフォーマンスを優先
+If Prioritize Performance is set to True, the Visualizer will prioritize performance. This layer will not use the Layer Style but instead will apply its own predefined style, which cannot be modified.: パフォーマンスを優先に設定すると、ビジュアライザーはパフォーマンスを優先します。このレイヤーはレイヤースタイルを使用せず、独自の事前定義されたスタイルを適用します。これは変更できません。
+Vector Tile: ベクトルタイル
 3D Tiles: 3Dタイル
 Data Source Manager: データソースマネージャー
+Support for the KML format is currently experimental and remains somewhat unstable, with certain features not yet fully supported. We advise using it with caution.: KMLフォーマットのサポートは現在、実験的な段階にあり、安定性に欠ける部分があります。また、いくつかの機能はまだ完全にはサポートされていません。ご利用の際はご注意ください。
 'Google Maps API Key ': Google Maps APIキー
 'You can apply a key ': キーを申請できます
 here: ここ