Radius Drawing Tool

[chriswhong]

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, and read a blog post about it here.

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?

[mcwhittemore]

Chris,

This is a sweet custom mode. I saw the medium post go around twitter a few weeks back and was hoping I'd hear about a open source version of it. So, thanks for the issue! :)

Currently draw's built in modes only support strict GeoJSON spec features so we're not ready to add it at this time. That said, I think this is a great custom mode and would love to see it packaged into its own module and listed on our custom mode pages.

In the long run, I think we need to start answering how custom shapes and consider moving from GeoJSON for internal feature storage to raw vector tiles if that move could help provide support for circles.

Our implementation includes measurements as a symbol layer as the user draws. Any interest in including this in mapbox-gl-draw?

Adding symbol layers to the map as part of your mode is a really interesting idea. I'd like to hear/read-the-code for how you did this well since I don't think draw currently supports this that well.

We use this as a selection tool, so it never actually adds anything to the drawn features the way the existing tools do.

This would be a cool custom mode on its own.

I could see an API that looks something whats below as being really helpful to people.

var radius_select_mode = new RadiusSelect(function(middlePoint, radius) {
   // end developers custom logic
   // would fire when the selection mode end runs
});

Should it add a feature?

I suspect there is space in the custom mode world of draw for a few different modes here. One that adds points, one that adds polygons and, to the comment above, one that doesn't add anything.

[andrewharvey]

Adding symbol layers to the map as part of your mode is a really interesting idea. I'd like to hear/read-the-code for how you did this well since I don't think draw currently supports this that well.

I've seen it implemented independently a number of times, it would be good to have this supported out of the box to reduce need for everyone re-implementing this. Probably should be a separate tool which peerDep on mapbox-gl-draw/a plugin to -draw rather than part of -draw core.

[goors]

Hi, is there any way that you can keep circle after you draw it? I mean when you finish drawing you end up with line ....

[license2e]

I was able to use this code here: https://stackoverflow.com/questions/37599561/drawing-a-circle-with-the-radius-in-miles-meters-with-mapbox-gl-js/39006388#39006388

To add a circle control that creates a polygon with 64 points..

It is missing the "preview" mode like the 'custom draw mode for drawing a radius' has, and test coverage. @chriswhong Maybe we can merge our efforts?

Here is are the code changes (sorry, my linter was overzealous..): https://github.com/doublenot/mapbox-gl-draw/pull/1/commits/24020ac7977e3d5c3e2e09f7329314dc867abc4d

And here is the screenshot of it in action:

[chriswhong]

Happy to help if there is energy around a plugin.

[iamanvesh]

I've published an npm module called mapbox-gl-draw-circle which lets you draw and edit a circle. Please do take a look and feel free to reach out to me if you find any issues.

• https://github.com/iamanvesh/mapbox-gl-draw-circle.git
• https://www.npmjs.com/package/mapbox-gl-draw-circle

[zakjan]

Another plugin which supports drawing circles is my https://github.com/zakjan/mapbox-gl-draw-geodesic

[mhsattarian]

As @mcwhittemore mentioned, There are few situations where a mode to draw but not add features may be handy:

I suspect there is space in the custom mode world of draw for a few different modes here. One that adds points, one that adds polygons and, to the comment above, one that doesn't add anything.

I created the mapbox-gl-draw-passing-mode to handle these situations. take a look, and I'll be happy to hear feedbacks.

[risharde]

@iamanvesh I was really interested in your version but I cannot seem to implement this on a normal webpage with mapbox-gl. The code is specific to React? Or can it be easily converted to be used by a normal webpage? Please advise? Thanks!