How to draw the circle in the mapbox

Question

I've searched how to draw the circle in the mapbox using Javascript but couldn't find out the correct solution.

var myCircle = new MapboxCircle({lat: data.lat, lng: data.lng}, data.radius, {
    editable: true,
    minRadius: data.minRadius,
    fillColor: data.color
}).addTo(map);

The above code is provided by Mapbox but it allows just add the circle Layer in fixed radius on the map.

But what I wanted is to draw the circle in dynamic radius by dragging.

Do you want to draw the circle dynamically? – Feb 25 '18 at 19:52 — , Feb 25 '18 at 19:52

score 2 · Accepted Answer · answered Feb 25 '18 at 07:49

2

You can pass these radii in meters using the latest version of Leaflet. The radius will change relative to zoom levels.

Here's some more information via Leaflet's documentation

L.circle([lat,lng], radius).addTo(map);

More documentation here: https://www.mapbox.com/mapbox.js/api/v2.1.9/l-circlemarker/

answered Feb 25 '18 at 07:49

k.swapnil

139
1

Thanks for your answer. In the mapbox, there is a similar function, but the thing what I want is draw the circle, not just add the layer on the map. Do you have any idea? – Christian Soto Feb 25 '18 at 19:48
1

please check this link work https://stackoverflow.com/questions/37599561/drawing-a-circle-with-the-radius-in-miles-meters-with-mapbox-gl-js/37601549#37601549 – k.swapnil Mar 04 '18 at 10:09
Wow, that's what I want. Thanks. – Christian Soto Mar 04 '18 at 12:02

How to draw the circle in the mapbox

1 Answers1