Add 3D preview of natural wonders

[ngoiyaeric]

User description

Add functionality to render 3D previews of natural wonders when Mapbox is idle.

• Add a list of natural wonders with their coordinates.
• Implement a function to rotate between these locations when Mapbox is idle.
• Add logic to dynamically add new locations for 3D previews.
• Update the Mapbox component to handle the new functionality.
• Add event listeners to reset idle timeout on map idle and move events.
• Clear idle timeout on component unmount.

---

For more details, open the Copilot Workspace session.

---

PR Type

enhancement

---

Description

• Added functionality to render 3D previews of natural wonders when Mapbox is idle.
• Implemented a list of natural wonders with their coordinates for rotation.
• Introduced a mechanism to rotate between these locations after a period of inactivity.
• Updated the Mapbox component to handle new idle and move event listeners.
• Ensured idle timeout is cleared upon component unmount to prevent memory leaks.

---

PRDescriptionHeader.CHANGES_WALKTHROUGH

	Relevant files
Enhancement	mapbox-map.tsx Add 3D preview rotation for natural wonders in Mapbox        components/map/mapbox-map.tsx Added a list of natural wonders with coordinates. Implemented rotation between natural wonders when Mapbox is idle. Added event listeners to reset idle timeout on map idle and move events. Cleared idle timeout on component unmount. +33/-1

---

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

[codiumai-pr-agent-pro[bot]]

PR-Agent was enabled for this repository. To continue using it, please link your git user with your CodiumAI identity here.

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Performance Concern The `rotateToNextWonder` function is called every 5 seconds of idle time, which might lead to unnecessary map updates and potential performance issues, especially on mobile devices or slower connections. Memory Management The `idleTimeout` is stored in a `useRef`, but it's not clear if it's properly cleared when the component unmounts or when the map is removed. Code Duplication The `updateMapPosition` function is called in multiple places. Consider refactoring to avoid duplication and improve maintainability.

[codiumai-pr-agent-pro[bot]]

PR-Agent was enabled for this repository. To continue using it, please link your git user with your CodiumAI identity here.

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Maintainability	Extract magic numbers into named constants for improved maintainability ___ **Consider extracting the magic number 5000 (representing 5 seconds) into a named constant at the top of the file for better maintainability and readability.** [components/map/mapbox-map.tsx [99-101]](https://github.com/QueueLab/mapgpt/pull/76/files#diff-ce7ea3ef85a6812c7da39941ffa47e8e0fadbb3fc7c391cf1cafd96303cf3a0fR99-R101) ```diff +const ROTATION_IDLE_TIMEOUT_MS = 5000; +// ... (at the top of the file) + idleTimeout.current = setTimeout(() => { rotateToNextWonder(); -}, 5000); // 5 seconds of idle time before rotating +}, ROTATION_IDLE_TIMEOUT_MS); ``` - [ ] **Apply this suggestion** Suggestion importance[1-10]: 8 Why: Extracting the magic number 5000 into a named constant improves code readability and maintainability by making the purpose of the number explicit and easier to modify in the future.	8
Best practice	Use more descriptive variable names to improve code readability ___ **Consider using a more descriptive name for the idleTimeout variable, such as rotationIdleTimeout, to better reflect its purpose in rotating through natural wonders.** [components/map/mapbox-map.tsx [32]](https://github.com/QueueLab/mapgpt/pull/76/files#diff-ce7ea3ef85a6812c7da39941ffa47e8e0fadbb3fc7c391cf1cafd96303cf3a0fR32-R32) ```diff -const idleTimeout = useRef(null); +const rotationIdleTimeout = useRef(null); ``` - [ ] **Apply this suggestion** Suggestion importance[1-10]: 7 Why: The suggestion to rename `idleTimeout` to `rotationIdleTimeout` enhances code readability by making the variable's purpose clearer, which is beneficial for maintainability and understanding the code's functionality.	7
Possible issue	Implement proper error handling for critical operations ___ **Consider adding error handling for the case where the map fails to initialize or load, to provide a better user experience and easier debugging.** [components/map/mapbox-map.tsx [144-145]](https://github.com/QueueLab/mapgpt/pull/76/files#diff-ce7ea3ef85a6812c7da39941ffa47e8e0fadbb3fc7c391cf1cafd96303cf3a0fR144-R145) ```diff map.current.on('load', () => { - if (!map.current) return; + if (!map.current) { + console.error('Map failed to initialize'); + return; + } ``` - [ ] **Apply this suggestion** Suggestion importance[1-10]: 6 Why: Adding error handling for map initialization failures can improve user experience and debugging, although the impact is moderate since it only logs an error without additional recovery actions.	6

💡 Need additional feedback ? start a PR chat