Skip to content

Commit

Permalink
feat(web): Add layers using wms and mvt (#694)
Browse files Browse the repository at this point in the history
  • Loading branch information
mkumbobeaty authored Sep 22, 2023
1 parent 4afa473 commit 5fe5126
Show file tree
Hide file tree
Showing 10 changed files with 347 additions and 12 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { useT } from "@reearth/services/i18n";

import { DataProps } from "..";
import {
ColJustiftBetween,
ColJustifyBetween,
AssetWrapper,
InputGroup,
Input,
Expand Down Expand Up @@ -88,7 +88,7 @@ const Asset: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
};

return (
<ColJustiftBetween>
<ColJustifyBetween>
<AssetWrapper>
<InputGroup
label={t("Source Type")}
Expand Down Expand Up @@ -150,7 +150,7 @@ const Asset: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
disabled={(sourceType === "url" || sourceType === "value") && !value}
/>
</SubmitWrapper>
</ColJustiftBetween>
</ColJustifyBetween>
);
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { useT } from "@reearth/services/i18n";

import { DataProps } from "..";
import {
ColJustiftBetween,
ColJustifyBetween,
AssetWrapper,
InputGroup,
Input,
Expand Down Expand Up @@ -57,7 +57,7 @@ const DelimitedText: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
};

return (
<ColJustiftBetween>
<ColJustifyBetween>
<AssetWrapper>
<InputGroup
label="Source Type"
Expand Down Expand Up @@ -105,7 +105,7 @@ const DelimitedText: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
disabled={(sourceType === "url" || sourceType === "value") && !value}
/>
</SubmitWrapper>
</ColJustiftBetween>
</ColJustifyBetween>
);
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Button from "@reearth/beta/components/Button";
import generateRandomString from "@reearth/beta/utils/generate-random-string";

import { DataProps } from "..";
import { ColJustiftBetween, AssetWrapper, InputGroup, Input, SubmitWrapper } from "../utils";
import { ColJustifyBetween, AssetWrapper, InputGroup, Input, SubmitWrapper } from "../utils";

const ThreeDTiles: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
const [value, setValue] = React.useState("");
Expand Down Expand Up @@ -38,7 +38,7 @@ const ThreeDTiles: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
};

return (
<ColJustiftBetween>
<ColJustifyBetween>
<AssetWrapper>
<InputGroup label="Resource URL" description="URL of the data source you want to add.">
<Input
Expand All @@ -58,7 +58,7 @@ const ThreeDTiles: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
disabled={!value}
/>
</SubmitWrapper>
</ColJustiftBetween>
</ColJustifyBetween>
);
};

Expand Down
124 changes: 124 additions & 0 deletions web/src/beta/features/Editor/DataSourceManager/VectorTiles/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
import { FC } from "react";

import Button from "@reearth/beta/components/Button";
import generateRandomString from "@reearth/beta/utils/generate-random-string";
import { useT } from "@reearth/services/i18n";

import { DataProps } from "..";
import useHooks from "../hooks";
import {
AddLayerWrapper,
AssetWrapper,
ColJustifyBetween,
DeleteLayerIcon,
Input,
InputGroup,
LayerWrapper,
SubmitWrapper,
} from "../utils";

const VectorTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
const {
urlValue,
layerValue,
layerInput,
layers,
setUrlValue,
setLayerValue,
handleAddLayer,
handleDeleteLayer,
handleLayerInput,
} = useHooks();

const t = useT();

const handleSubmit = () => {
onSubmit({
layerType: "simple",
sceneId,
title: generateRandomString(5),
visible: true,
config: {
data: {
url: urlValue !== "" ? urlValue : null,
type: "mvt",
layers: layers.length <= 1 ? layers[0] : layers,
},
resource: {
clampToGround: true,
},
marker: {
heightReference: "clamp",
},
polygon: {
heightReference: "clamp",
},
polyline: {
clampToGround: true,
},
},
});
onClose();
};

return (
<ColJustifyBetween>
<AssetWrapper>
<InputGroup
label={t("Resource URL")}
description={t("URL of the data source you want to add.")}>
<Input
type="text"
placeholder="https://"
value={urlValue}
onChange={e => setUrlValue(e.target.value)}
/>
</InputGroup>
<InputGroup
label={t("Choose layer to add")}
description={t("Layer of the data source you want to add.")}>
{layers.map((layer: string, index: number) => (
<LayerWrapper key={index}>
<Input type="text" placeholder={`${layer}`} disabled={true} />
<DeleteLayerIcon icon="bin" size={16} onClick={() => handleDeleteLayer(index)} />
</LayerWrapper>
))}
{(!layers.length || layerInput) && (
<LayerWrapper>
<Input
type="text"
placeholder={t("layer name")}
value={layerValue}
onChange={e => setLayerValue(e.target.value)}
onKeyDown={handleAddLayer}
/>
<DeleteLayerIcon disabled={true} icon="bin" size={16} />
</LayerWrapper>
)}

<AddLayerWrapper>
<Button
icon="plus"
text={t("Layer")}
buttonType="primary"
size="small"
onClick={handleLayerInput}
disabled={!layerValue && !layers.length}
/>
</AddLayerWrapper>
</InputGroup>
</AssetWrapper>
<SubmitWrapper>
<Button
text={t("Add to Layer")}
buttonType="primary"
size="medium"
onClick={handleSubmit}
disabled={!urlValue}
/>
</SubmitWrapper>
</ColJustifyBetween>
);
};

export default VectorTiles;
124 changes: 124 additions & 0 deletions web/src/beta/features/Editor/DataSourceManager/WmsTiles/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
import { FC } from "react";

import Button from "@reearth/beta/components/Button";
import generateRandomString from "@reearth/beta/utils/generate-random-string";
import { useT } from "@reearth/services/i18n";

import { DataProps } from "..";
import useHooks from "../hooks";
import {
AddLayerWrapper,
AssetWrapper,
ColJustifyBetween,
DeleteLayerIcon,
Input,
InputGroup,
LayerWrapper,
SubmitWrapper,
} from "../utils";

const WmsTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
const {
urlValue,
layerValue,
layerInput,
layers,
setUrlValue,
setLayerValue,
handleAddLayer,
handleDeleteLayer,
handleLayerInput,
} = useHooks();

const t = useT();

const handleSubmit = () => {
onSubmit({
layerType: "simple",
sceneId,
title: generateRandomString(5),
visible: true,
config: {
data: {
url: urlValue !== "" ? urlValue : null,
type: "wms",
layers: layers.length <= 1 ? layers[0] : layers,
},
resource: {
clampToGround: true,
},
marker: {
heightReference: "clamp",
},
polygon: {
heightReference: "clamp",
},
polyline: {
clampToGround: true,
},
},
});
onClose();
};

return (
<ColJustifyBetween>
<AssetWrapper>
<InputGroup
label={t("Resource URL")}
description={t("URL of the data source you want to add.")}>
<Input
type="text"
placeholder="https://"
value={urlValue}
onChange={e => setUrlValue(e.target.value)}
/>
</InputGroup>
<InputGroup
label={t("Choose layer to add")}
description={t("Layer of the data source you want to add.")}>
{layers.map((layer: string, index: number) => (
<LayerWrapper key={index}>
<Input type="text" placeholder={`${layer}`} disabled={true} />
<DeleteLayerIcon icon="bin" size={16} onClick={() => handleDeleteLayer(index)} />
</LayerWrapper>
))}
{(!layers.length || layerInput) && (
<LayerWrapper>
<Input
type="text"
placeholder={t("layer name")}
value={layerValue}
onChange={e => setLayerValue(e.target.value)}
onKeyDown={handleAddLayer}
/>
<DeleteLayerIcon disabled={true} icon="bin" size={16} />
</LayerWrapper>
)}

<AddLayerWrapper>
<Button
icon="plus"
text={t("Layer")}
buttonType="primary"
size="small"
onClick={handleLayerInput}
disabled={!layerValue && !layers.length}
/>
</AddLayerWrapper>
</InputGroup>
</AssetWrapper>
<SubmitWrapper>
<Button
text={t("Add to Layer")}
buttonType="primary"
size="medium"
onClick={handleSubmit}
disabled={!urlValue}
/>
</SubmitWrapper>
</ColJustifyBetween>
);
};

export default WmsTiles;
46 changes: 46 additions & 0 deletions web/src/beta/features/Editor/DataSourceManager/hooks.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { useState, KeyboardEvent } from "react";

export default () => {
const [urlValue, setUrlValue] = useState("");
const [layerValue, setLayerValue] = useState("");
const [layers, setLayers] = useState<string[]>([]);
const [layerInput, setLayerInput] = useState(false);

const handleonAddLayer = () => {
if (layerValue.trim() !== "") {
const exist = layers.some((layer: string) => layer === layerValue);
if (!exist) setLayers(prev => [...prev, layerValue]);
setLayerValue("");
}
};

const handleLayerInput = () => {
handleonAddLayer();
setLayerInput(true);
};

const handleAddLayer = (e: KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter") {
handleonAddLayer();
setLayerInput(false);
}
};

const handleDeleteLayer = (idx: number) => {
const updatedLayers = [...layers];
updatedLayers.splice(idx, 1);
setLayers(updatedLayers);
};

return {
urlValue,
layerInput,
layerValue,
layers,
setLayerValue,
setUrlValue,
handleAddLayer,
handleLayerInput,
handleDeleteLayer,
};
};
Loading

0 comments on commit 5fe5126

Please sign in to comment.