mapbox / mapbox/mapbox-gl-draw
Feature request: expose API to manipulate buttons in the toolbar
- Dominant language
- JavaScript
- Stars
- 1.1k
- Forks
- 612
- Avg merge
- 8d 9h
- Merged PRs (30d)
- 5
Description
**mapbox-gl-js version**: 2.13.0
**mapbox-gl-draw version**: 1.4.1
### Steps to Trigger Behavior
I implemented drawing polygon and circle on map using mapbox-gl-draw and [maplibre-gl-draw-circle](https://github.com/aws-amplify/maplibre-gl-draw-circle/tree/main), also used [the money patch](https://github.com/mapbox/mapbox-gl-draw/issues/874#issuecomment-470591089) so as to add a **circle** button into the existing toolbar.
I created a demo [here](https://mnkdd7.csb.app/).
### Expected Behavior
The custom button in the toolbar shows active/inactive visual effect when selected/unselected.
### Actual Behavior
1. As the enabled buttons and selected state are within [ui.js](https://github.com/mapbox/mapbox-gl-draw/blob/main/src/ui.js) and not exposed, I cannot make the button show active/inactive.
2. Also probably due to the same reason, [maplibre-gl-draw-circle](https://github.com/aws-amplify/maplibre-gl-draw-circle/blob/main/lib/modes/CircleMode.js#L27) uses polygon type thus when I click on my circle button, the polygon button shows active.
Contributor guide
Research direction
Start with src/ui.js, where enabled buttons and selected state are currently managed, then reproduce the behavior in the linked demo. Review how the custom circle button and polygon mode interact. Done means an exposed API lets custom toolbar buttons show active or inactive state without the circle button incorrectly activating the polygon button.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100