feat(web): add playground example google 3d tiles #1368
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
WalkthroughThis pull request introduces a new plugin for adding Google Photorealistic 3D Tiles to the Plugin Playground feature. The changes involve creating a new TypeScript file that defines the plugin with metadata and widget files, and updating the presets index to import and include the new plugin in the "Manage Layer" category. The implementation allows users to add Google Photorealistic 3D Tiles layers with a sample configuration and camera positioning. Changes
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (6)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
✅ Deploy Preview for reearth-web ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-google-photorealistic-3d-tiles.ts (2)
41-56: Improve camera positioning flexibility and documentation.The current implementation has hardcoded coordinates and timing:
- Consider making the location configurable
- Add comments explaining the default location
- Consider dynamic duration based on distance
// Move the camera to the position where the Google Photorealistic 3D Tiles data is displayed. +// Default location: New York City, Manhattan area +const defaultLocation = { + heading: 6.0671039802577384, + height: 1128.5794476956557, + lat: 40.730278427281455, + lng: -73.97291848442529, + pitch: -0.31010069674839325, + roll: 0.00004250447889830866, +}; + +// Helper to calculate optimal duration based on distance +const calculateDuration = (currentPosition, targetPosition) => { + // Implementation to calculate duration based on distance + return 2.0; // Default fallback +}; + reearth.camera.flyTo( - // Define the camera position to be moved to - { - heading: 6.0671039802577384, - height: 1128.5794476956557, - lat: 40.730278427281455, - lng: -73.97291848442529, - pitch: -0.31010069674839325, - roll: 0.00004250447889830866, - }, + defaultLocation, // Define camera movement time { - duration: 2.0, + duration: calculateDuration(reearth.camera.position, defaultLocation), } );
1-63: Overall implementation feedback.The implementation provides a good starting point for Google Photorealistic 3D Tiles integration. Based on your specific requests for feedback:
Comments:
- Current comments provide basic guidance
- Enhanced documentation has been suggested for API key handling and location settings
Performance:
- Basic implementation is efficient
- Suggested improvements for error handling and loading states will enhance reliability
- Dynamic camera duration calculation will improve user experience
Consider these additional architectural improvements:
- Add TypeScript types for better type safety
- Implement a configuration system for customization
- Add event handlers for load/error states
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
web/src/beta/features/PluginPlayground/Plugins/presets/index.ts(2 hunks)web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-google-photorealistic-3d-tiles.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Redirect rules - reearth-web
- GitHub Check: Header rules - reearth-web
- GitHub Check: Pages changed - reearth-web
🔇 Additional comments (2)
web/src/beta/features/PluginPlayground/Plugins/presets/index.ts (1)
10-10: LGTM!The new plugin is correctly imported and added to the layers category.
Also applies to: 57-57
web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-google-photorealistic-3d-tiles.ts (1)
3-17: LGTM!The YAML configuration is well-structured and contains all necessary metadata.
Comment on lines
+30
to
+34
| googleMapApiKey: "put_your_api_key", | ||
| // This document explains how to create Photorealistic 3D Tiles API key. | ||
| // For more information on obtaining an API key, visit: | ||
| // https://developers.google.com/maps/documentation/tile/get-api-key | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance API key handling and documentation.
While the documentation link is helpful, consider these improvements:
- Use environment variables or a secure configuration system instead of hardcoding the API key
- Add comments about:
- API key usage restrictions and quotas
- Security best practices for key management
- Local development setup instructions
serviceTokens: {
- googleMapApiKey: "put_your_api_key",
+ googleMapApiKey: process.env.GOOGLE_MAPS_API_KEY || "YOUR_API_KEY_HERE",
// This document explains how to create Photorealistic 3D Tiles API key.
// For more information on obtaining an API key, visit:
// https://developers.google.com/maps/documentation/tile/get-api-key
+ //
+ // Security Best Practices:
+ // 1. Never commit API keys to version control
+ // 2. Set appropriate API key restrictions in Google Cloud Console
+ // 3. Use environment variables for local development
+ //
+ // Local Development:
+ // 1. Create a .env file in the project root
+ // 2. Add: GOOGLE_MAPS_API_KEY=your_actual_key
+ // 3. Ensure .env is in .gitignore
},📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| googleMapApiKey: "put_your_api_key", | |
| // This document explains how to create Photorealistic 3D Tiles API key. | |
| // For more information on obtaining an API key, visit: | |
| // https://developers.google.com/maps/documentation/tile/get-api-key | |
| }, | |
| googleMapApiKey: process.env.GOOGLE_MAPS_API_KEY || "YOUR_API_KEY_HERE", | |
| // This document explains how to create Photorealistic 3D Tiles API key. | |
| // For more information on obtaining an API key, visit: | |
| // https://developers.google.com/maps/documentation/tile/get-api-key | |
| // | |
| // Security Best Practices: | |
| // 1. Never commit API keys to version control | |
| // 2. Set appropriate API key restrictions in Google Cloud Console | |
| // 3. Use environment variables for local development | |
| // | |
| // Local Development: | |
| // 1. Create a .env file in the project root | |
| // 2. Add: GOOGLE_MAPS_API_KEY=your_actual_key | |
| // 3. Ensure .env is in .gitignore | |
| }, |
Comment on lines
+25
to
+39
| const layerPhotorealistic3dTiles = { | ||
| type: "simple", // Required | ||
| data: { | ||
| type: "google-photorealistic", // Data type | ||
| serviceTokens: { | ||
| googleMapApiKey: "put_your_api_key", | ||
| // This document explains how to create Photorealistic 3D Tiles API key. | ||
| // For more information on obtaining an API key, visit: | ||
| // https://developers.google.com/maps/documentation/tile/get-api-key | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| // Add the Google Photorealistic 3D Tiles layer to Re:Earth | ||
| reearth.layers.add(layerPhotorealistic3dTiles); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling and loading state management.
The current implementation could benefit from improved robustness:
- Add error handling for API key validation
- Implement loading state management
- Add cleanup logic
// Define Google Photorealistic 3D Tiles
+let layerId = null;
+
const layerPhotorealistic3dTiles = {
type: "simple", // Required
data: {
type: "google-photorealistic", // Data type
serviceTokens: {
googleMapApiKey: process.env.GOOGLE_MAPS_API_KEY || "YOUR_API_KEY_HERE",
},
},
+ // Add loading state visibility
+ visible: false,
};
+// Validate API key
+const validateApiKey = (key) => {
+ if (!key || key === "YOUR_API_KEY_HERE") {
+ throw new Error("Invalid API key. Please configure a valid Google Maps API key.");
+ }
+};
+
+try {
+ validateApiKey(layerPhotorealistic3dTiles.data.serviceTokens.googleMapApiKey);
+
-// Add the Google Photorealistic 3D Tiles layer to Re:Earth
-reearth.layers.add(layerPhotorealistic3dTiles);
+ // Add the Google Photorealistic 3D Tiles layer to Re:Earth
+ layerId = reearth.layers.add(layerPhotorealistic3dTiles);
+
+ // Show layer after successful load
+ reearth.layers.overrideProperty(layerId, {
+ visible: true,
+ });
+} catch (error) {
+ console.error("Failed to initialize Google Photorealistic 3D Tiles:", error);
+}
+
+// Cleanup on unmount
+return () => {
+ if (layerId) {
+ reearth.layers.remove(layerId);
+ }
+};Committable suggestion skipped: line range outside the PR's diff.
| import { FileType, PluginType } from "../../constants"; | ||
|
|
||
| const yamlFile: FileType = { | ||
| id: "layers-add-googlePhotorealistic3dTiles-reearth-yml", |
There was a problem hiding this comment.
id can be layers-add-google-photorealistic-3d-tiles-reearth-yml. Since we are using kebab case, we can change uppercase to lowercase.
mulengawilfred
approved these changes
Jan 23, 2025
airslice
approved these changes
Jan 23, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview
Add a example of Google Photorealistic 3D Tiles in Mange Layer.
To run this script, User need API key. I added comment how to create Google API key in script.
What I've done
Add a example of Google Photorealistic 3D Tiles in Mange Layer
What I haven't done
MVT example in Manege Layer.
How I tested
I created Api key by myself and tested in local environment.
Which point I want you to review particularly
Memo
Summary by CodeRabbit
addGooglePhotorealistic3dTilesplugin.