From 2b1a6aa79e7064e3ee92c49a66c3af3a45d95e6c Mon Sep 17 00:00:00 2001 From: mulengawilfred Date: Tue, 18 Mar 2025 12:26:26 +0900 Subject: [PATCH 1/6] chore: add developer links to events and methods in plugin playground --- .../Plugins/presets/camera/cameraPosition.ts | 5 ++++- .../Plugins/presets/camera/cameraRotation.ts | 4 ++++ .../Plugins/presets/camera/zoomInOut.ts | 3 +++ .../presets/data/clientStorageThemeSelector.ts | 5 +++++ .../Plugins/presets/data/extensionProperty.ts | 2 ++ .../presets/data/messengerBetweenExtensions.ts | 3 +++ .../Plugins/presets/data/uiExtensionMessenger.ts | 6 +++++- .../presets/layerStyles/featureStyle3dTiles.ts | 3 +++ .../presets/layerStyles/featureStyle3dmodel.ts | 6 ++++++ .../presets/layerStyles/filterFeaturebyStyle.ts | 4 ++++ .../presets/layerStyles/layerStylingExamples.ts | 2 ++ .../Plugins/presets/layerStyles/overrideStyle.ts | 4 ++++ .../presets/layerStyles/styleWithCondition.ts | 3 +++ .../Plugins/presets/layers/add-3Dtiles.ts | 13 ++++++++----- .../Plugins/presets/layers/add-OSM-3DTiles.ts | 13 ++++++++----- .../Plugins/presets/layers/add-csv.ts | 1 + .../Plugins/presets/layers/add-czml.ts | 2 ++ .../Plugins/presets/layers/add-geojson.ts | 1 + .../layers/add-google-photorealistic-3d-tiles.ts | 2 ++ .../Plugins/presets/layers/add-kml.ts | 1 + .../Plugins/presets/layers/add-wms.ts | 1 + .../Plugins/presets/layers/hideFlyToDeleteLayer.ts | 1 + .../Plugins/presets/layers/overrideLayerData.ts | 2 ++ .../layers/showSelectedFeaturesInformation.ts | 5 +++++ .../Plugins/presets/timeline/playbackControl.ts | 5 +++++ .../Plugins/presets/timeline/timeDrivenFeatures.ts | 3 +++ .../Plugins/presets/timeline/timeDrivenPath.ts | 3 +++ .../Plugins/presets/ui/modalWindow.ts | 3 +++ .../PluginPlayground/Plugins/presets/ui/popup.ts | 6 ++++++ .../PluginPlayground/Plugins/presets/useTitles.ts | 4 ++-- .../Plugins/presets/viewer/enableShadowStyle.ts | 5 +++++ .../Plugins/presets/viewer/enableTerrain.ts | 3 +++ .../Plugins/presets/viewer/mouseEvent.ts | 2 +- .../Plugins/presets/viewer/showLabel.ts | 1 + .../Plugins/presets/viewer/takeScreenshot.ts | 1 + web/src/services/i18n/translations/en.yml | 4 ++-- web/src/services/i18n/translations/ja.yml | 4 ++-- 37 files changed, 117 insertions(+), 19 deletions(-) diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/camera/cameraPosition.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/camera/cameraPosition.ts index 0d2edede49..3dab35b35c 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/camera/cameraPosition.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/camera/cameraPosition.ts @@ -21,7 +21,7 @@ const widgetFile: FileType = { id: "camera-position-widget", title: "camera-position.js", sourceCode: ` - // This plugin provides a simple interface for camera position management in ReEarth. + // This plugin provides a simple interface for camera position management in Re:Earth. // It allows users to: // 1. Retrieve the current camera position // 2. Manually input and apply a new camera position @@ -271,6 +271,7 @@ const widgetFile: FileType = { \`); +// NOTE: Link to developer documentation on Camera "on" event: https://visualizer.developer.reearth.io/plugin-api/camera/#move-1 reearth.camera.on("move", (camera) => { reearth.ui.postMessage({ type: 'currentPosition', @@ -285,6 +286,7 @@ reearth.camera.on("move", (camera) => { }); }); +// NOTE: Link to developer documentation on Extension "on" event: https://visualizer.developer.reearth.io/plugin-api/extension/#message-1 reearth.extension.on('message', (msg) => { // Apply camera position if (msg.type === 'applyCameraPosition') { @@ -309,6 +311,7 @@ reearth.extension.on('message', (msg) => { ); // Send confirmation message + // NOTE: Link to developer documentation on UI "postMessage" event: https://visualizer.developer.reearth.io/plugin-api/ui/#postmessage reearth.ui.postMessage({ type: 'positionApplied' }); diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/camera/cameraRotation.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/camera/cameraRotation.ts index 93db17e83c..0a6eb61898 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/camera/cameraRotation.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/camera/cameraRotation.ts @@ -104,8 +104,10 @@ const sample3dTiles = { }; // Add the 3D Tiles layer to Re:Earth +// NOTE: Link to developer documentation on Layers "add" event: https://visualizer.developer.reearth.io/plugin-api/layers/#add reearth.layers.add(sample3dTiles); +// NOTE: Link to developer documentation on Viewer "overrideProperty" event: https://visualizer.developer.reearth.io/plugin-api/viewer/#overrideproperty reearth.viewer.overrideProperty({ // Enable Cesium World Terrain terrain: { @@ -118,6 +120,7 @@ reearth.viewer.overrideProperty({ }); // Move the camera to the specified position +// NOTE: Link to developer documentation on Camera "flyTo" event: https://visualizer.developer.reearth.io/plugin-api/camera/#flyto reearth.camera.flyTo( { // Define the camera's target position @@ -135,6 +138,7 @@ reearth.camera.flyTo( ); // Listen for messages from the UI to trigger camera rotation +// NOTE: Link to developer documentation on Extension "on" event: https://visualizer.developer.reearth.io/plugin-api/extension/#message-1 reearth.extension.on("message", (msg) => { const { action } = msg; if (action === "rotateCamera"){ diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/camera/zoomInOut.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/camera/zoomInOut.ts index 44e75a67f9..64f99316c5 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/camera/zoomInOut.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/camera/zoomInOut.ts @@ -87,12 +87,15 @@ ${PRESET_PLUGIN_COMMON_STYLE} // ================================ // Listen for messages from the UI and update zoom level +// NOTE: Link to developer documentation on Extension "on" event: https://visualizer.developer.reearth.io/plugin-api/extension/#message-1 reearth.extension.on("message", (msg) => { const { action } = msg; if (action === "zoomIn") { // Increasing the value increases the change to zoom + // NOTE: Link to developer documentation on Camera "zoomIn" method: https://visualizer.developer.reearth.io/plugin-api/camera/#zoomin reearth.camera.zoomIn(2); } else if (action === "zoomOut") { + // NOTE: Link to developer documentation on Camera "zoomOut" method: https://visualizer.developer.reearth.io/plugin-api/camera/#zoomout reearth.camera.zoomOut(2); } });` diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/data/clientStorageThemeSelector.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/data/clientStorageThemeSelector.ts index aa97d70165..6d7679125b 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/data/clientStorageThemeSelector.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/data/clientStorageThemeSelector.ts @@ -202,7 +202,9 @@ logOperation(\\\`Storage updated: Theme preference is \\\${storedTheme ? \\\`set const THEME_KEY = "user_theme_preference"; async function updateStorageDisplay() { +// NOTE: Link to developer documentation on Client Storage "getAsync" method: https://visualizer.developer.reearth.io/plugin-api/data/#getasync const theme = await reearth.data.clientStorage.getAsync(THEME_KEY); + // NOTE: Link to developer documentation on UI "postMessage" method: https://visualizer.developer.reearth.io/plugin-api/ui/#postmessage reearth.ui.postMessage({ type: "storageUpdate", data: { [THEME_KEY]: theme } @@ -222,6 +224,7 @@ reearth.extension.on("message", async msg => { break; case "setTheme": + // NOTE: Link to developer documentation on Client Storage "setAsync" method: https://visualizer.developer.reearth.io/plugin-api/data/#setasync await reearth.data.clientStorage.setAsync(THEME_KEY, msg.theme); reearth.ui.postMessage({ type: "themeUpdate", @@ -231,6 +234,7 @@ reearth.extension.on("message", async msg => { break; case "viewKeys": + // NOTE: Link to developer documentation on Client Storage "keysAsync" method: https://visualizer.developer.reearth.io/plugin-api/data/#keysasync const keys = await reearth.data.clientStorage.keysAsync(); reearth.ui.postMessage({ type: "keysUpdate", @@ -239,6 +243,7 @@ reearth.extension.on("message", async msg => { break; case "clearStorage": + // NOTE: Link to developer documentation on Client Storage "dropStoreAsync" method: https://visualizer.developer.reearth.io/plugin-api/data/#dropstoreasync await reearth.data.clientStorage.dropStoreAsync(); reearth.ui.postMessage({ type: "storageCleared" diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/data/extensionProperty.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/data/extensionProperty.ts index 3f11c59e7b..53025607c1 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/data/extensionProperty.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/data/extensionProperty.ts @@ -139,8 +139,10 @@ const storyBlockFile: FileType = { // Get block property values and send to UI. // Property schema is defined in reearth.yml. +// NOTE: Link to developer documentation on UI "postMessage" method: https://visualizer.developer.reearth.io/plugin-api/ui/#postmessage reearth.ui.postMessage({ type: "getBlockProperty", + // NOTE: Link to developer documentation on Extension Block https://visualizer.developer.reearth.io/plugin-api/extension/#block property: reearth.extension.block?.property });` }; diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/data/messengerBetweenExtensions.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/data/messengerBetweenExtensions.ts index 7a517de5e5..9f34942ca9 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/data/messengerBetweenExtensions.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/data/messengerBetweenExtensions.ts @@ -106,11 +106,14 @@ reearth.ui.show(\` \`); // Handle messages from UI to send to other extension +// NOTE: Link to documentation on Extension "on" event https://visualizer.developer.reearth.io/plugin-api/extension/#message-1 reearth.extension.on("message", msg => { if (msg.type === "send") { + // NOTE: Link to documentation on Extension List https://visualizer.developer.reearth.io/plugin-api/extension/#list const extensions = reearth.extension.list; const target = extensions.find(ext => ext.extensionId === "extension-2"); if (target) { + // NOTE: Link to documentation on Extension "postMessage" method https://visualizer.developer.reearth.io/plugin-api/extension/#postmessage reearth.extension.postMessage(target.id, msg.message); } } diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/data/uiExtensionMessenger.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/data/uiExtensionMessenger.ts index 076871f954..77e98d5b75 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/data/uiExtensionMessenger.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/data/uiExtensionMessenger.ts @@ -10,7 +10,7 @@ version: 1.0.0 extensions: - id: messenger-between-extension-and-visualizer type: widget - name: Messenger between Extension and Visualizer Widget + name: Messenger Between Extension and Visualizer Widget description: Messenger between Extension and Visualizer Widget widgetLayout: defaultLocation: @@ -134,7 +134,9 @@ const widgetFile: FileType = { \`); // Send message to UI when globe is clicked +// NOTE: Link to developer documentation on Viewer "on" event: https://visualizer.developer.reearth.io/plugin-api/viewer/#mouse-events reearth.viewer.on("click", (event) => { +// NOTE: Link to developer documentation on UI "postMessage" method: https://visualizer.developer.reearth.io/plugin-api/ui/#postmessage reearth.ui.postMessage({ type: "position", lat: event.lat, @@ -143,8 +145,10 @@ reearth.viewer.on("click", (event) => { }); // Handle messages from UI to move camera +// NOTE: Link to developer documentation on Extension "on" event: https://visualizer.developer.reearth.io/plugin-api/extension/#message-1 reearth.extension.on("message", msg => { if (msg.type === "fly") { + // NOTE: Link to developer documentation on Camera "flyTo" method: https://visualizer.developer.reearth.io/plugin-api/camera/#flyto reearth.camera.flyTo( { lat: msg.lat, diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/featureStyle3dTiles.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/featureStyle3dTiles.ts index 54b0afd28a..01f623ae5b 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/featureStyle3dTiles.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/featureStyle3dTiles.ts @@ -51,9 +51,11 @@ const sample3dTiles02 = { }; // Add the 3D Tiles layers to Re:Earth +// NOTE: Link to developer documentation for Layers "add" method https://visualizer.developer.reearth.io/plugin-api/layers/#add reearth.layers.add(sample3dTiles01); reearth.layers.add(sample3dTiles02); +// NOTE: Link to developer documentation for Viewer "overrideProperty" method https://visualizer.developer.reearth.io/plugin-api/viewer/#overrideproperty reearth.viewer.overrideProperty({ // Enable Cesium World Terrain terrain: { @@ -72,6 +74,7 @@ reearth.viewer.overrideProperty({ }); // Move the camera to the specified position +// NOTE: Link to developer documentation for Camera "flyTo" method https://visualizer.developer.reearth.io/plugin-api/camera/#flyto reearth.camera.flyTo( { // Define the camera target position diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/featureStyle3dmodel.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/featureStyle3dmodel.ts index fa807f5ed1..0ba6edeed3 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/featureStyle3dmodel.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/featureStyle3dmodel.ts @@ -71,11 +71,13 @@ const model3D02 = { }; // Add 3D models to the layer +// NOTE: Link to developer documentation on Layers "add" event: https://visualizer.developer.reearth.io/plugin-api/layers/#add reearth.layers.add(model3D01); reearth.layers.add(model3D02); // In this example, the time width is set to set the time for the shadow to appear // Set the time range on the timeline +// NOTE: Link to developer documentation on Timeline "setTime" event: https://visualizer.developer.reearth.io/plugin-api/timeline/#settime reearth.timeline.setTime({ // Start time start: new Date("2023-12-01T09:00:00-06:00"), @@ -86,12 +88,15 @@ reearth.timeline.setTime({ }); // To animate the 3D model, you need to play the timeline +// NOTE: Link to developer documentation on Timeline "play" event: https://visualizer.developer.reearth.io/plugin-api/timeline/#play reearth.timeline.play(); // Set the playback speed of the timeline (1 = normal speed) +// NOTE: Link to developer documentation on Timeline "setSpeed" event: https://visualizer.developer.reearth.io/plugin-api/timeline/#setspeed reearth.timeline.setSpeed(1); // Enable shadow settings in the Re:Earth viewer +// NOTE: Link to developer documentation on Viewer "overrideProperty" event: https://visualizer.developer.reearth.io/plugin-api/viewer/#overrideproperty reearth.viewer.overrideProperty({ scene: { shadow: { @@ -101,6 +106,7 @@ reearth.viewer.overrideProperty({ }); // Move the camera to a specified position +// NOTE: Link to developer documentation on Camera "flyTo" event: https://visualizer.developer.reearth.io/plugin-api/camera/#flyto reearth.camera.flyTo( { // Defines the target camera position diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/filterFeaturebyStyle.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/filterFeaturebyStyle.ts index 404a662326..c5f7c922ab 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/filterFeaturebyStyle.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/filterFeaturebyStyle.ts @@ -100,9 +100,11 @@ const samplePointData = { }; // Add the layer to Re:Earth +// NOTE: Link to developer documentation for Layers "add" method https://visualizer.developer.reearth.io/plugin-api/layers/#add const layerId = reearth.layers.add(samplePointData); // Move the camera to the specified position +// NOTE: Link to developer documentation for Camera "flyTo" method https://visualizer.developer.reearth.io/plugin-api/camera/#flyto reearth.camera.flyTo( { // Define the camera's target position @@ -120,6 +122,7 @@ reearth.camera.flyTo( ); // Listen for messages from the UI and override the style +// NOTE: Link to developer documentation for Extension "on" event https://visualizer.developer.reearth.io/plugin-api/extension/#message-1 reearth.extension.on("message", (msg) => { const { action } = msg; if (action === "showAllFeatures") { @@ -129,6 +132,7 @@ reearth.extension.on("message", (msg) => { }, }); } else if (action === "showFeaturesBelow20000") { + // NOTE: Link to developer documentation for Layers "override" method https://visualizer.developer.reearth.io/plugin-api/layers/#override reearth.layers.override(layerId, { marker: { show: { diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/layerStylingExamples.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/layerStylingExamples.ts index b212468887..4160d2ebf4 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/layerStylingExamples.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/layerStylingExamples.ts @@ -140,12 +140,14 @@ const widgetFile: FileType = { }; // Add all layers + // NOTE: Link to developer documentation for Layers "add" method https://visualizer.developer.reearth.io/plugin-api/layers/#add reearth.layers.add(geojsonLayer); reearth.layers.add(czmlLayer); reearth.layers.add(kmlLayer); reearth.layers.add(csvLayer); // Position camera to view all features + // NOTE: Link to developer documentation for Camera "flyTo" method https://visualizer.developer.reearth.io/plugin-api/camera/#flyto reearth.camera.flyTo({ lng: 139.750, // Center position to align all features lat: 35.7609591, // Adjusted for better view of all features diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/overrideStyle.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/overrideStyle.ts index a39ebac2e4..6aec561e91 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/overrideStyle.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/overrideStyle.ts @@ -112,8 +112,10 @@ const sample3dTiles = { }; // Add the 3D Tiles layer to Re:Earth +// NOTE: Link to developer documentation for Layers "add" method https://visualizer.developer.reearth.io/plugin-api/layers/#add const layerId = reearth.layers.add(sample3dTiles); +// NOTE: Link to developer documentation for Layers "override" method https://visualizer.developer.reearth.io/plugin-api/layers/#override reearth.viewer.overrideProperty({ // Enable Cesium World Terrain terrain: { @@ -126,6 +128,7 @@ reearth.viewer.overrideProperty({ }); // Move the camera to the specified position +// NOTE: Link to developer documentation for Camera "flyTo" method https://visualizer.developer.reearth.io/plugin-api/camera/#flyto reearth.camera.flyTo( { // Define the camera's target position @@ -143,6 +146,7 @@ reearth.camera.flyTo( ); // Listen for messages from the UI and override the style for "Cool Style or "Warm Style" +// NOTE: Link to developer documentation for Extension "on" event https://visualizer.developer.reearth.io/plugin-api/extension/#message-1 reearth.extension.on("message", (msg) => { const { action } = msg; if (action === "updateStyleCool") { diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/styleWithCondition.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/styleWithCondition.ts index 6124510cfc..848c4217db 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/styleWithCondition.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/styleWithCondition.ts @@ -54,6 +54,7 @@ const sample3dTiles = { }; // Add the 3D Tiles layer to Re:Earth +// NOTE: Link to developer documentation for Layers "add" method https://visualizer.developer.reearth.io/plugin-api/layers/#add reearth.layers.add(sample3dTiles); reearth.viewer.overrideProperty({ @@ -68,6 +69,7 @@ reearth.viewer.overrideProperty({ }); // Move the camera to the specified position +// NOTE: Link to developer documentation for Camera "flyTo" method https://visualizer.developer.reearth.io/plugin-api/camera/#flyto reearth.camera.flyTo( { // Define the camera's target position @@ -85,6 +87,7 @@ reearth.camera.flyTo( ); // Set the timeline to a morning hour so that building colors are easy to see +// NOTE: Link to developer documentation for Timeline "setTime" method https://visualizer.developer.reearth.io/plugin-api/timeline/#settime reearth.timeline.setTime({ start: new Date("2023-01-01T00:00:00Z"), stop: new Date("2023-01-01T10:00:00Z"), diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-3Dtiles.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-3Dtiles.ts index be6673b944..43257ba0c4 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-3Dtiles.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-3Dtiles.ts @@ -1,13 +1,13 @@ import { FileType, PluginType } from "../../constants"; const yamlFile: FileType = { - id: "layers-add-3dTiles-reearth-yml", + id: "layers-add-3d-tiles-reearth-yml", title: "reearth.yml", - sourceCode: `id: layers-add-3dTiles-plugin + sourceCode: `id: layers-add-3d-tiles-plugin name: Add 3D Tiles version: 1.0.0 extensions: - - id: layers-add-3dTiles + - id: layers-add-3d-tiles type: widget name: Add 3D Tiles description: Add 3D Tiles @@ -17,8 +17,8 @@ extensions: }; const widgetFile: FileType = { - id: "layers-add-3dTiles", - title: "layers-add-3dTiles.js", + id: "layers-add-3d-tiles", + title: "layers-add-3d-tiles.js", sourceCode: `// Example of adding a layer with 3D Tiles data // Define 3D Tiles @@ -35,9 +35,11 @@ const layer3dTiles = { }; // Add the 3D Tiles layer from the URL to Re:Earth +NOTE: Link to developer documentation on Layers "add" event: https://visualizer.developer.reearth.io/plugin-api/layers/#add reearth.layers.add(layer3dTiles); // Enable Terrain +NOTE: Link to developer documentation on Viewer "overrideProperty" event: https://visualizer.developer.reearth.io/plugin-api/viewer/#overrideproperty reearth.viewer.overrideProperty({ terrain: { enabled: true, @@ -45,6 +47,7 @@ reearth.viewer.overrideProperty({ }); // Move the camera to the position where the CZML data is displayed. +NOTE: Link to developer documentation on Camera "flyTo" event: https://visualizer.developer.reearth.io/plugin-api/camera/#flyto reearth.camera.flyTo( // Define the camera position to be moved to { diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-OSM-3DTiles.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-OSM-3DTiles.ts index b8144c95b3..6136899e68 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-OSM-3DTiles.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-OSM-3DTiles.ts @@ -1,13 +1,13 @@ import { FileType, PluginType } from "../../constants"; const yamlFile: FileType = { - id: "layers-add-osm3dTiles-reearth-yml", + id: "layers-add-osm3d-tiles-reearth-yml", title: "reearth.yml", - sourceCode: `id: layers-add-osm3dTiles-plugin + sourceCode: `id: layers-add-osm-3d-tiles-plugin name: Add OSM 3D Tiles version: 1.0.0 extensions: - - id: layers-add-osm3dTiles + - id: layers-add-osm-3d-tiles type: widget name: Add OSM 3D Tiles description: Add OSM 3D Tiles @@ -17,8 +17,8 @@ extensions: }; const widgetFile: FileType = { - id: "layers-add-osm3dTiles", - title: "layers-add-osm3dTiles.js", + id: "layers-add-osm-3d-tiles", + title: "layers-add-osm-3d-tiles.js", sourceCode: `// Example of adding a layer with OSM 3D Tiles data // Define OSM 3D Tiles @@ -30,9 +30,11 @@ const layerOsm3dTiles = { }; // Add the OSM 3D Tiles layer from the URL to Re:Earth +// NOTE: Link to developer documentation on Layers "add" event: https://visualizer.developer.reearth.io/plugin-api/layers/#add reearth.layers.add(layerOsm3dTiles); // Enable Terrain +// NOTE: Link to developer documentation on Viewer "overrideProperty" event: https://visualizer.developer.reearth.io/plugin-api/viewer/#overrideproperty reearth.viewer.overrideProperty({ terrain: { enabled: true, @@ -40,6 +42,7 @@ reearth.viewer.overrideProperty({ }); // Move the camera to the position where the OSM 3D Tiles data is displayed. +// NOTE: Link to developer documentation on Camera "flyTo" event: https://visualizer.developer.reearth.io/plugin-api/camera/#flyto reearth.camera.flyTo( // Define the camera position to be moved to { diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-csv.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-csv.ts index 2ecaad6559..83ac20cefd 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-csv.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-csv.ts @@ -36,6 +36,7 @@ const layerCsv = { }; // Add the CSV layer from the URL to Re:Earth +// NOTE: Link to developer documentation on Layers "add" event: https://visualizer.developer.reearth.io/plugin-api/layers/#add reearth.layers.add(layerCsv); ` }; diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-czml.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-czml.ts index 9f59d78262..a2c05f732f 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-czml.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-czml.ts @@ -72,12 +72,14 @@ const layerCzmlUrl = { }; // Add the encoded CZML layer to Re:Earth +NOTE: Link to developer documentation on Layers "add" event: https://visualizer.developer.reearth.io/plugin-api/layers/#add reearth.layers.add(layerCzmlEncoded); // Add the CZML layer from the URL to Re:Earth reearth.layers.add(layerCzmlUrl); // Move the camera to the position where the CZML data is displayed +// NOTE: Link to developer documentation on Camera "flyTo" event: https://visualizer.developer.reearth.io/plugin-api/camera/#flyto reearth.camera.flyTo( { lng: -88.93602871895675, diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-geojson.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-geojson.ts index 0653637e70..16bfb8b32b 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-geojson.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-geojson.ts @@ -94,6 +94,7 @@ const layerGeojsonFromUrl = { }; // Add the inline GeoJSON layer to Re:Earth +// NOTE: Link to developer documentation on Layers "add" event: https://visualizer.developer.reearth.io/plugin-api/layers/#add reearth.layers.add(layerGeojsonInline); // Add the GeoJSON layer from the URL to Re:Earth diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-google-photorealistic-3d-tiles.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-google-photorealistic-3d-tiles.ts index f61504c41e..665cce4664 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-google-photorealistic-3d-tiles.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-google-photorealistic-3d-tiles.ts @@ -36,9 +36,11 @@ const layerPhotorealistic3dTiles = { }; // Add the Google Photorealistic 3D Tiles layer to Re:Earth +// NOTE: Link to developer documentation on Layers "add" event: https://visualizer.developer.reearth.io/plugin-api/layers/#add reearth.layers.add(layerPhotorealistic3dTiles); // Move the camera to the position where the Google Photorealistic 3D Tiles data is displayed. +// NOTE: Link to developer documentation on Camera "flyTo" event: https://visualizer.developer.reearth.io/plugin-api/camera/#flyto reearth.camera.flyTo( // Define the camera position to be moved to { diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-kml.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-kml.ts index e632711f5e..dd70942ff1 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-kml.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-kml.ts @@ -68,6 +68,7 @@ const layerKmlUrl = { }; // Add the encoded KML layer to Re:Earth +// NOTE: Link to developer documentation on Layers "add" event: https://visualizer.developer.reearth.io/plugin-api/layers/#add reearth.layers.add(layerKmlEncoded); // Add the KML layer from the URL to Re:Earth diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-wms.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-wms.ts index 781062cae5..eb9372fbf3 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-wms.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-wms.ts @@ -32,6 +32,7 @@ const layerWmsUrl = { }; // Add the WMS layer from the URL to Re:Earth +// NOTE: Link to developer documentation on Layers "add" event: https://visualizer.developer.reearth.io/plugin-api/layers/#add reearth.layers.add(layerWmsUrl); //WMS data is provided by NASA GIBS（https://www.earthdata.nasa.gov/engage/open-data-services-software/earthdata-developer-portal/gibs-api)` diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/hideFlyToDeleteLayer.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/hideFlyToDeleteLayer.ts index 352a500f6a..27ccb9d3d1 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/hideFlyToDeleteLayer.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/hideFlyToDeleteLayer.ts @@ -195,6 +195,7 @@ reearth.ui.show(\` \`); +// NOTE: Link to developer documentation on Extension "on" event: https://visualizer.developer.reearth.io/plugin-api/extension/#message-1 reearth.extension.on("message", (msg) => { switch (msg.type) { case "delete": diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/overrideLayerData.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/overrideLayerData.ts index 1f2d61da48..62e1d7c316 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/overrideLayerData.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/overrideLayerData.ts @@ -147,6 +147,7 @@ const LayerManager = { }; // Geometry update with override + // NOTE: Link to developer documentation on Layers "override" event: https://visualizer.developer.reearth.io/plugin-api/layers/#override reearth.layers.override(this._layerId, { data: { type: "geojson", @@ -160,6 +161,7 @@ const LayerManager = { }; // Call "LayerManager" in the event handler +// NOTE: Link to developer documentation on Extension "on" event: https://visualizer.developer.reearth.io/plugin-api/extension/#message-1 reearth.extension.on("message", msg => { if (msg.action === "updatePolygon") { const corners = msg.payload?.corners; diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/showSelectedFeaturesInformation.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/showSelectedFeaturesInformation.ts index 6849ab5062..568233af83 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/showSelectedFeaturesInformation.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/showSelectedFeaturesInformation.ts @@ -92,9 +92,11 @@ const layer3dTiles = { }; // Add the 3D Tiles layer from the URL to Re:Earth +// Link to developer documentation on Layers "add" event: https://visualizer.developer.reearth.io/plugin-api/layers/#add reearth.layers.add(layer3dTiles); // Enable Terrain +// Link to developer documentation on Viewer "overrideProperty" event: https://visualizer.developer.reearth.io/plugin-api/viewer/#overrideproperty reearth.viewer.overrideProperty({ terrain: { enabled: true, @@ -102,6 +104,7 @@ reearth.viewer.overrideProperty({ }); // Define the camera position to be moved to +// Link to developer documentation on Camera "flyTo" event: https://visualizer.developer.reearth.io/plugin-api/camera/#flyto reearth.camera.flyTo( { heading: 4.022965234428543, @@ -134,12 +137,14 @@ function handleLayerSelect(layerId, featureId) { const building_height = feature?.properties?.["bldg:measuredHeight"] || ""; // Send selected feature id and height to plugin UI + // NOTE: Link to developer documentation on UI "postMessage" event: https://visualizer.developer.reearth.io/plugin-api/ui/#postmessage reearth.ui.postMessage({ action: "buildingClick", payload: { gmlId: gml_id ,buildingHeight : building_height}, }); } // Set "handleLayerSelect" to work when a feature is selected +// Link to developer documentation on Layers "on" event: https://visualizer.developer.reearth.io/plugin-api/layers/#select-1 reearth.layers.on("select", handleLayerSelect);` }; diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/timeline/playbackControl.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/timeline/playbackControl.ts index accc519485..8124f07616 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/timeline/playbackControl.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/timeline/playbackControl.ts @@ -261,9 +261,11 @@ const widgetFile: FileType = { }; // Add the 3D Tiles layer + // NOTE: Link to developer documentation for Layers "add" method https://visualizer.developer.reearth.io/plugin-api/layers/#add reearth.layers.add(buildings3dTiles); // Configure viewer for realistic day/night cycle + // NOTE: Link to developer documentation for Viewer "overrideProperty" method https://visualizer.developer.reearth.io/plugin-api/viewer/#overrideproperty reearth.viewer.overrideProperty({ globe: { enableLighting: true, @@ -308,6 +310,7 @@ const widgetFile: FileType = { }); // Set camera position for optimal ground+sky view + // NOTE: Link to developer documentation for Camera "flyTo" method https://visualizer.developer.reearth.io/plugin-api/camera/#flyto reearth.camera.flyTo({ lat: 35.4562, lng: 139.6431, @@ -346,6 +349,7 @@ const widgetFile: FileType = { } // Handle messages from UI + // NOTE: Link to developer documentation for Extension "on" event https://visualizer.developer.reearth.io/plugin-api/extension/#message-1 reearth.extension.on("message", msg => { switch (msg.type) { case "playback": @@ -376,6 +380,7 @@ const widgetFile: FileType = { }); // Listen for timeline ticks + // NOTE: Link to developer documentation for Timeline "tick" event https://visualizer.developer.reearth.io/plugin-api/timeline/#tick-1 timeline.on("tick", (time) => { reearth.ui.postMessage({ type: "timeUpdate", diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/timeline/timeDrivenFeatures.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/timeline/timeDrivenFeatures.ts index 987c9844ea..2e8fd6722f 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/timeline/timeDrivenFeatures.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/timeline/timeDrivenFeatures.ts @@ -120,12 +120,15 @@ const layerCzmlEncoded = { }; // Add the encoded CZML layer to Re:Earth +// NOTE: Link to developer documentation for Layers "add" method https://visualizer.developer.reearth.io/plugin-api/layers/#add reearth.layers.add(layerCzmlEncoded); // Play timeline +// NOTE: Link to developer documentation for Timeline "play" method https://visualizer.developer.reearth.io/plugin-api/timeline/#play reearth.timeline.play(); // Move the camera to the position where the CZML data is displayed +// NOTE: Link to developer documentation for Camera "flyTo" method https://visualizer.developer.reearth.io/plugin-api/camera/#flyto reearth.camera.flyTo( { heading: 5.672603993826703, diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/timeline/timeDrivenPath.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/timeline/timeDrivenPath.ts index 1d5a137700..8e3cb468a9 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/timeline/timeDrivenPath.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/timeline/timeDrivenPath.ts @@ -97,12 +97,15 @@ const layerCzmlEncoded = { }; // Add the encoded CZML layer to Re:Earth +// NOTE: Link to developer documentation for Layers "add" method https://visualizer.developer.reearth.io/plugin-api/layers/#add reearth.layers.add(layerCzmlEncoded); // Play timeline +// NOTE: Link to developer documentation for Timeline "play" method https://visualizer.developer.reearth.io/plugin-api/timeline/#play reearth.timeline.play(); // Move the camera to the position where the CZML data is displayed +// NOTE: Link to developer documentation for Camera "flyTo" method https://visualizer.developer.reearth.io/plugin-api/camera/#flyto reearth.camera.flyTo( { heading: 6.246954319760702, diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/ui/modalWindow.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/ui/modalWindow.ts index 8e05ce4edc..f5d38dd214 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/ui/modalWindow.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/ui/modalWindow.ts @@ -74,6 +74,7 @@ const modalContent= \`