How to draw circles around markers with the specified radius value using mapbox.js

Question

Hi I want display quantity value around the marker with the help of circles. Basically if the circle is bigger then it means available quantity at that location is maximum than the small circles. I am able to display markers on map. But I am trying display circles . radius value for circles is in value variable. I want convert this available quantity value based on earths radius and then display circles.

Here is the code snippets

 // var map = L.mapbox.map('map', 'examples.map-i86nkdio')
            var map=L.mapbox.map('map','hexample.j1m1kko7')
        .setView([42.274260, -83.365717], 9);
            for (i = 0; i < lats.length; i++)
            {

                var marker = L.marker([lats[i], longs[i]], {
                    icon: L.mapbox.marker.icon({
                        'marker-color': '#E80000'
                    })
                })
                .bindPopup('<button class="trigger">' + FacName[i] + '</button>')
                .addTo(map);
                L.circleMarker([lats[i], longs[i]], value[i])
                .addTo(map);

            }

Can I use polylines or polygoans to display circles as Circlemarker will create the markers.

Answer 1

I faced the same problem the other day and ended up using L.circle 's like this

marker = L.circle(latlng, radius).addTo(map);

And also place a regular marker on the same latlng position. Give it a try!

Answer 2

Unfortunately MapBox seems to have updated this, well at-least it didn't work for me - so maybe someone else might find this helpful.

I had to use L.circleMarker to get it to function.

Example:

var circle = L.circleMarker([55.37911044801047, -2.8125], {radius: 100}).addTo(map);

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