mapbox / mapbox/mapbox-gl-draw

Radius Drawing Tool

Open
#767 9 comments 9 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature ui
Dominant language
JavaScript
Stars
1.1k
Forks
612
Avg merge
8d 9h
Merged PRs (30d)
5

Description

We've implemented a custom draw mode for drawing a radius, and are wondering if there is interest in a PR.

You can see it in action in [NYC Population Factfinder](https://popfactfinder.planning.nyc.gov/), and read a blog post about it [here](https://medium.com/nycplanninglabs/building-a-custom-draw-mode-for-mapbox-gl-draw-1dab71d143ee).

Some things to consider:
- We use this as a selection tool, so it never actually adds anything to the drawn features the way the existing tools do.
- Should it add a feature? If so, what feature would it add, and how should it be styled? (See the blog post, the radius is defined by a center point and a distance, not really a circle, but the feature we add to the drawn features could be either a `Point` visualized using a mapboxGL circle layer, or a circle-like polygon.
- The circle-like polygon may be a better choice because it will remain an accurate representation of the radius when the user pitches the map.
- Our implementation includes measurements as a symbol layer as the user draws. Any interest in including this in mapbox-gl-draw?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No repository file, test, or entry point is named. Start by reviewing the existing draw modes and the linked custom implementation and blog post, then clarify whether radius selection should create a feature and how measurements should be represented and styled. Done means the project agrees on those design decisions and defines an implementable scope.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.