CODEWITHSUNDEEP
javascriptleaflet
Tomasz
Tomasz

Reputation: 210

Circle in map (size scalable)

I make map using Leaflet with one circle. index code: 

<div id="mapid" style="height: 500px;"></div>

        <script type="text/javascript">

            var mymap = L.map('mapid').setView([52.233333, 19.016667], 6);

                L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
                            minZoom: 6,
                }).addTo(mymap);

                var x = 52.233333;
                var y = 19.016667;

                    showCircle(x,y);
        </script>

ShowCircle :

function showCircle(x,y)
{
    var circle = L.circle([x,y], 1900, {
        color: 'blue',
        fillColor: '#f03',
        fillOpacity: 0.5
    }).addTo(mymap);
}

The problem is : the circle always have the same size. I want to get: if i zoomout map the circle is bigger, when i zoomin the circle is smaller. (zoomin, zoomout is from scroll)

How to get this effect?

Upvotes: 3

Views: 329

Answers (2)

Rambler
Rambler

Reputation: 5490

Try the following , and tweak it as per your requirement :

  var radiusQuantifier=100;
  map.on('zoomend',function (e) { 
        circle.setRadius(map.getZoom()*radiusQuantifier); 
    });

This will change the radius of the circle on zoomend event.You can combine it with zoomstart event to get the desired result. Note : Increase/Decrease the value of radiusQuantifier as it seems fit.

Upvotes: 1

IvanSanchez
IvanSanchez

Reputation: 19089

There are two kinds of circles in Leaflet: L.Circle and L.CircleMarker. L.Circle has a radius specified in meters, and L.CircleMarker has a radius specified in pixels.

Your question is not fully clear (what do you mean by "always have the same size"? Meters or pixels?); but I guess that you want to use L.CircleMarker instead of L.Circle.

Upvotes: 1

Related Questions