#49 draw polygon

[intel-eth]

PR Type

Enhancement, Dependencies

---

Description

• Integrated MapboxDraw to enable polygon drawing on the map.
• Utilized Turf.js to calculate and display the area of drawn polygons.
• Updated the UI to show the calculated area in square meters.
• Adjusted map controls and added event handlers for polygon drawing and area updates.
• Added necessary dependencies in package.json for the new functionalities.

---

Changes walkthrough 📝

	Relevant files
Enhancement	mapbox-map.tsx Add polygon drawing and area calculation to Mapbox component components/map/mapbox-map.tsx Added MapboxDraw for polygon drawing functionality. Integrated Turf.js for area calculation of drawn polygons. Updated UI to display the calculated area. Adjusted map controls and event handlers for drawing. +57/-8
Dependencies	package.json Update dependencies for MapboxDraw and Turf.js integration package.json Added dependencies for @mapbox/mapbox-gl-draw, @turf/turf, and related types. Included bun and uninstall packages. +7/-2

---

💡 PR-Agent usage: Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

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

PR Reviewer Guide 🔍

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

🧪 No relevant tests

🔒 No security concerns identified

⚡ Key issues to review Hardcoded Token The Mapbox access token is hardcoded in the source file, which could lead to security risks if the repository is public. Consider using environment variables to manage sensitive data securely. Error Handling The error function in the geolocation watchPosition method is empty, which means errors during geolocation tracking are silently ignored. It's important to handle these errors appropriately to improve the robustness of the application. UI Update Logic The logic to update the UI based on the polygon area calculation is directly embedded in the Mapbox event handlers. This could lead to performance issues if not managed properly, especially with complex polygons or rapid updates. Consider debouncing or throttling these updates.

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

PR Code Suggestions ✨

Category	Suggestion	Score
Possible bug	✅ Add null checks for map.current to prevent runtime errors ___ **Ensure that the map.current object is checked for null or undefined before calling methods on it to avoid potential runtime errors.** [components/map/mapbox-map.tsx [91-97]](https://github.com/QueueLab/mapgpt/pull/53/files#diff-ce7ea3ef85a6812c7da39941ffa47e8e0fadbb3fc7c391cf1cafd96303cf3a0fR91-R97) ```diff -map.current.addControl(new mapboxgl.NavigationControl(), 'top-right') -map.current.addControl(draw, 'top-right'); -map.current.on('draw.create', updateArea); -map.current.on('draw.delete', updateArea); -map.current.on('draw.update', updateArea); +if (map.current) { + map.current.addControl(new mapboxgl.NavigationControl(), 'top-right'); + map.current.addControl(draw, 'top-right'); + map.current.on('draw.create', updateArea); + map.current.on('draw.delete', updateArea); + map.current.on('draw.update', updateArea); +} ``` `[Suggestion has been applied]` Suggestion importance[1-10]: 10 Why: Adding null checks for `map.current` is crucial to prevent potential runtime errors, ensuring the code is more robust and less prone to crashes.	10
Enhancement	✅ Improve error handling in geolocation tracking ___ **Replace the empty error function in the geolocation watchPosition call with a function that handles errors, such as logging them or displaying a notification.** [components/map/mapbox-map.tsx [57]](https://github.com/QueueLab/mapgpt/pull/53/files#diff-ce7ea3ef85a6812c7da39941ffa47e8e0fadbb3fc7c391cf1cafd96303cf3a0fR57-R57) ```diff -const error = (error: GeolocationPositionError) => {} +const error = (error: GeolocationPositionError) => { + console.error('Geolocation Error:', error.message); + toast.error(`Location error: ${error.message}`); +} ``` `[Suggestion has been applied]` Suggestion importance[1-10]: 9 Why: This suggestion improves error handling by logging geolocation errors and displaying a notification, which enhances debugging and user experience.	9
Possible issue	✅ Fix typo in CSS class assignment for proper styling ___ **Correct the CSS class assignment from className="w=full h-full" to className="w-full h-full" to ensure proper styling.** [components/map/mapbox-map.tsx [132]](https://github.com/QueueLab/mapgpt/pull/53/files#diff-ce7ea3ef85a6812c7da39941ffa47e8e0fadbb3fc7c391cf1cafd96303cf3a0fR132-R132) ```diff ``` `[Suggestion has been applied]` Suggestion importance[1-10]: 8 Why: Fixing the typo in the CSS class assignment is important for ensuring the component is styled correctly, which directly affects the user interface.	8
Maintainability	✅ Improve variable naming for clarity ___ **Use a more descriptive variable name than data for the result of draw.getAll() to improve code readability.** [components/map/mapbox-map.tsx [82]](https://github.com/QueueLab/mapgpt/pull/53/files#diff-ce7ea3ef85a6812c7da39941ffa47e8e0fadbb3fc7c391cf1cafd96303cf3a0fR82-R82) ```diff -const data = draw.getAll(); +const allDrawnFeatures = draw.getAll(); ``` `[Suggestion has been applied]` Suggestion importance[1-10]: 6 Why: While this suggestion improves code readability by using a more descriptive variable name, it is a minor enhancement and does not affect functionality.	6

[ngoiyaeric]

"Draw" Area tool should be placed on the drop down menu. Not sure why and how Mapbox is now on the footer is this a requirement for this feature? I tried to remove the navigation icons, the draw tool stopped working. Short cuts to undo previous action like the last added point in an area calculation "command + z"