javascript - How to draw circles around markers with the specified radius value using mapbox.js - Stack Overflow

admin管理员组

文章数量:1331091

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.

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.

• javascript
• leaflet
• mapbox

Share Improve this question Follow edited Jul 25, 2014 at 12:49 user2897967 asked Jul 24, 2014 at 20:17 user2897967user2897967 33722 gold badges88 silver badges2424 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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!

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./mapbox.js/api/v2.1.9/l-circlemarker/

本文标签： javascriptHow to draw circles around markers with the specified radius value using mapboxjsStack Overflow