Skip to content

Commit 6868138

Browse files
asahina820arisamikumo
asahina820
and
arisamikumo
authored
feat(web): add infobox example in playground (#1608)
Co-authored-by: arisamikumo <53960439+arisamikumo@users.noreply.github.com>
1 parent 4e08d5d commit 6868138

File tree

7 files changed

+288
-1
lines changed

7 files changed

+288
-1
lines changed

‎web/src/beta/features/PluginPlayground/Plugins/presets/index.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ import { addGooglePhotorealistic3dTiles } from "./layers/add-google-photorealist
1616
import { addKml } from "./layers/add-kml";
1717
import { addOsm3dTiles } from "./layers/add-OSM-3DTiles";
1818
import { addWms } from "./layers/add-wms";
19+
import { addInfoboxAllProperties } from "./layers/addInfoboxAllProperties";
20+
import { addInfoboxRichBlocks } from "./layers/addInfoboxRichBlocks";
21+
import { addInfoboxSpecificProperties } from "./layers/addInfoboxSpecificProperties";
1922
import { hideFlyToDeleteLayer } from "./layers/hideFlyToDeleteLayer";
2023
import { overrideLayerData } from "./layers/overrideLayerData";
2124
import { showFeaturesInfo } from "./layers/showSelectedFeaturesInformation";
@@ -86,7 +89,10 @@ export const presetPlugins: PresetPlugins = [
8689
addGooglePhotorealistic3dTiles,
8790
hideFlyToDeleteLayer,
8891
overrideLayerData,
89-
showFeaturesInfo
92+
showFeaturesInfo,
93+
addInfoboxAllProperties,
94+
addInfoboxSpecificProperties,
95+
addInfoboxRichBlocks
9096
]
9197
},
9298
{

‎web/src/beta/features/PluginPlayground/Plugins/presets/layers/addInfoboxAllProperties.ts

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { FileType, PluginType } from "../../constants";
2+
3+
const yamlFile: FileType = {
4+
id: "layers-add-infobox-all-properties-reearth-yml",
5+
title: "reearth.yml",
6+
sourceCode: `id: add-infobox-all-properties
7+
name: Add Infobox All Properties
8+
version: 1.0.0
9+
extensions:
10+
- id: add-infobox-all-properties
11+
type: widget
12+
name: Add Infobox All Properties Widget
13+
description: Add Infobox All Properties Widget
14+
`,
15+
disableEdit: true,
16+
disableDelete: true
17+
};
18+
19+
const widgetFile: FileType = {
20+
id: "add-infobox-all-properties",
21+
title: "add-infobox-all-properties.js",
22+
sourceCode: `// This example shows how to activate Infobox that display all properties
23+
24+
// Japanese airport data(Only large and medium airports)
25+
reearth.layers.add({
26+
type: "simple",
27+
data: {
28+
type: "geojson",
29+
url: "https://reearth.github.io/visualizer-plugin-sample-data/public/geojson/jp_airport.geojson",
30+
},
31+
// Display all attributes in the infobox
32+
infobox: {
33+
blocks: [
34+
{
35+
pluginId: "reearth",
36+
extensionId: "propertyInfoboxBetaBlock",
37+
},
38+
],
39+
},
40+
marker: {
41+
style: "image",
42+
image: "https://reearth.github.io/visualizer-plugin-sample-data/public/image/airport.svg",
43+
imageSize: 1.5,
44+
},
45+
});
46+
47+
// Move the camera to the position where the GeoJSON data is displayed.
48+
reearth.camera.setView({
49+
"lat": 35.2963,
50+
"lng": 138.7982,
51+
"height": 380000,
52+
"heading": 0,
53+
"pitch": -1.37,
54+
"roll": 0
55+
});
56+
57+
// data: Airports in Japan(Public Domain) https://data.humdata.org/dataset/ourairports-jpn
58+
`
59+
};
60+
61+
export const addInfoboxAllProperties: PluginType = {
62+
id: "add-infobox-all-properties",
63+
files: [yamlFile, widgetFile]
64+
};

‎web/src/beta/features/PluginPlayground/Plugins/presets/layers/addInfoboxRichBlocks.ts

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import { FileType, PluginType } from "../../constants";
2+
3+
const yamlFile: FileType = {
4+
id: "layers-add-infobox-rich-block-reearth-yml",
5+
title: "reearth.yml",
6+
sourceCode: `id: add-infobox-rich-block
7+
name: Add Infobox Rich Blocks
8+
version: 1.0.0
9+
extensions:
10+
- id: add-infobox-rich-block
11+
type: widget
12+
name: Add Infobox Rich Blocks Widget
13+
description: Add Infobox Rich Blocks Widget
14+
`,
15+
disableEdit: true,
16+
disableDelete: true
17+
};
18+
19+
const widgetFile: FileType = {
20+
id: "add-infobox-rich-block",
21+
title: "add-infobox-rich-block.js",
22+
sourceCode: `// This example shows how to activate Infobox that display text, image, markdown and video blocks
23+
24+
// FOSS4G event data for Japan in 2024
25+
reearth.layers.add({
26+
type: "simple",
27+
data: {
28+
type: "csv",
29+
url: "https://reearth.github.io/visualizer-plugin-sample-data/public/csv/foss4g_japan.csv",
30+
csv: {
31+
// Define by column name
32+
lngColumn: "lng",
33+
latColumn: "lat"
34+
}
35+
},
36+
// Display infobox
37+
infobox: {
38+
blocks: [
39+
{
40+
// Add text block
41+
pluginId: "reearth",
42+
extensionId: "textInfoboxBetaBlock",
43+
property: {
44+
default: {
45+
text: {
46+
value: "\${event_name}"
47+
}
48+
}
49+
}
50+
},
51+
{
52+
// Add image block
53+
pluginId: "reearth",
54+
extensionId: "imageInfoboxBetaBlock",
55+
property: {
56+
default: {
57+
src: {
58+
value: "\${image_url}"
59+
}
60+
}
61+
}
62+
},
63+
{
64+
// Add markdown block
65+
pluginId: "reearth",
66+
extensionId: "markdownInfoboxBetaBlock",
67+
property: {
68+
default: {
69+
src: {
70+
value: "\${description}"
71+
}
72+
}
73+
}
74+
},
75+
{
76+
// Add video block
77+
pluginId: "reearth",
78+
extensionId: "videoInfoboxBetaBlock",
79+
property: {
80+
"default": {
81+
src: {
82+
value: "\${video_url}"
83+
}
84+
}
85+
},
86+
}
87+
]
88+
},
89+
marker: {
90+
style: "point",
91+
pointColor: "#49A85A",
92+
pointSize: 15,
93+
pointOutlineColor: "white",
94+
pointOutlineWidth: 2
95+
},
96+
});
97+
98+
// Move the camera to the position where the csv data is displayed.
99+
reearth.camera.setView({
100+
"lat": 36.5963,
101+
"lng": 139.7982,
102+
"height": 1100000,
103+
"heading": 0,
104+
"pitch": -1.37,
105+
"roll": 0
106+
});
107+
`
108+
};
109+
110+
export const addInfoboxRichBlocks: PluginType = {
111+
id: "add-infobox-rich-block",
112+
files: [yamlFile, widgetFile]
113+
};

‎web/src/beta/features/PluginPlayground/Plugins/presets/layers/addInfoboxSpecificProperties.ts

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import { FileType, PluginType } from "../../constants";
2+
3+
const yamlFile: FileType = {
4+
id: "layers-add-infobox-specific-properties-reearth-yml",
5+
title: "reearth.yml",
6+
sourceCode: `id: add-infobox-specific-properties
7+
name: Add Infobox Specific Properties
8+
version: 1.0.0
9+
extensions:
10+
- id: add-infobox-specific-properties
11+
type: widget
12+
name: Add Infobox Specific Properties Widget
13+
description: Add Infobox Specific Properties Widget
14+
`,
15+
disableEdit: true,
16+
disableDelete: true
17+
};
18+
19+
const widgetFile: FileType = {
20+
id: "add-infobox-specific-properties",
21+
title: "add-infobox-specific-properties.js",
22+
sourceCode: `// This example shows how to activate Infobox that display specific properties
23+
24+
// Japanese airport data(Only large and medium airports)
25+
reearth.layers.add({
26+
type: "simple",
27+
data: {
28+
type: "geojson",
29+
url: "https://reearth.github.io/visualizer-plugin-sample-data/public/geojson/jp_airport.geojson",
30+
},
31+
// Display specific attributes in the infobox
32+
infobox: {
33+
blocks: [
34+
{
35+
pluginId: "reearth",
36+
extensionId: "propertyInfoboxBetaBlock",
37+
property: {
38+
default: {
39+
displayType: {
40+
value: "custom",
41+
},
42+
propertyList: {
43+
value: [
44+
{
45+
key: "type",
46+
value: "\${type}",
47+
},
48+
{
49+
key: "name",
50+
value: "\${name}",
51+
},
52+
{
53+
key: "region_name",
54+
value: "\${region_name}",
55+
},
56+
{
57+
key: "iata_code",
58+
value: "\${iata_code}",
59+
},
60+
],
61+
},
62+
},
63+
},
64+
},
65+
],
66+
},
67+
marker: {
68+
style: "image",
69+
image: "https://reearth.github.io/visualizer-plugin-sample-data/public/image/airport.svg",
70+
imageSize: 1.5,
71+
},
72+
});
73+
74+
75+
// Move the camera to the position where the GeoJSON data is displayed.
76+
reearth.camera.setView({
77+
"lat": 35.2963,
78+
"lng": 138.7982,
79+
"height": 380000,
80+
"heading": 0,
81+
"pitch": -1.37,
82+
"roll": 0
83+
});
84+
85+
86+
// data: Airports in Japan(Public Domain) https://data.humdata.org/dataset/ourairports-jpn
87+
`
88+
};
89+
90+
export const addInfoboxSpecificProperties: PluginType = {
91+
id: "add-infobox-specific-properties",
92+
files: [yamlFile, widgetFile]
93+
};

‎web/src/beta/features/PluginPlayground/Plugins/presets/useTitles.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,11 @@ export default () => {
4343
"add-google-photorealistic-3d-tiles": t(
4444
"Add Google Photorealistic 3D Tiles"
4545
),
46+
"add-infobox-all-properties": t("Add infobox to show all properties"),
47+
"add-infobox-specific-properties": t(
48+
"Add infobox to show specific properties"
49+
),
50+
"add-infobox-rich-block": t("Add infobox to show rich blocks"),
4651
"add-osm-3d-tiles": t("Add OSM 3D Tiles"),
4752
"hide-fly-to-delete-layer": t("Hide Fly To Delete Layer"),
4853
"override-layer-data": t("Override Layer Data"),

‎web/src/services/i18n/translations/en.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -352,6 +352,9 @@ Add OSM 3D Tiles: ''
352352
Hide Fly To Delete Layer: ''
353353
Override Layer Data: ''
354354
Show Selected Features Information: ''
355+
Add infobox to show all properties: ''
356+
Add infobox to show specific properties: ''
357+
Add infobox to show rich blocks: ''
355358
Layer Styling Examples: ''
356359
Feature Style 3D Model: ''
357360
Feature Style 3D Tiles: ''

‎web/src/services/i18n/translations/ja.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -355,6 +355,9 @@ Add OSM 3D Tiles: OSM 3D Tilesを追加
355355
Hide Fly To Delete Layer: カメラ移動とレイヤーの削除
356356
Override Layer Data: レイヤーデータの上書き
357357
Show Selected Features Information: 選択された地物情報を表示
358+
Add infobox to show all properties: 全てのプロパティを表示するインフォボックスを追加
359+
Add infobox to show specific properties: 特定のプロパティを表示するインフォボックスを追加
360+
Add infobox to show rich blocks: リッチブロックを表示するインフォボックスを追加
358361
Layer Styling Examples: レイヤースタイリング
359362
Feature Style 3D Model: フィーチャースタイル 3D モデル
360363
Feature Style 3D Tiles: フィーチャースタイル 3D タイル

0 commit comments

Comments
 (0)