mapbox / mapbox/mapbox-gl-draw

Feature request: expose API to manipulate buttons in the toolbar

Open
#1,181 0 comments 0 reactions 0 assignees View on GitHub
feature
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.