CODEWITHSUNDEEP
leafletmapbox
Deepak Banka
Deepak Banka

Reputation: 599

Animate radius change in mapbox/leaflet

I have drawn a circle using L.circle.I want to change the radius with a smooth animation?

Upvotes: 0

Views: 1523

Answers (1)

Stranded Kid
Stranded Kid

Reputation: 1395

Fiddle : http://jsfiddle.net/x060L103/2/

var circle = L.circleMarker([50.5, 30.5], {radius: 5}).addTo(map);


var newRadius = 200;
var interval = setInterval(function() {
   var currentRadius = circle.getRadius();
   console.debug("currentRadius", currentRadius);
   if (currentRadius < newRadius) {
       circle.setRadius(++currentRadius);
       console.debug("new Radius", circle.getRadius());
   } else {
       clearInterval(interval);
   }
}, 1);

Just modify the function passed to the interval to take radius as argument for example.

Edit (Add the fiddle as a snippet inside the answer)

// Create the map
var map = L.map('map').setView([50.5, 30.5], 5);

// Set up the OSM layer
L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
    {maxZoom: 18}).addTo(map);

// add a marker in the given location
var circle = L.circleMarker([50.5, 30.5], {radius: 5}).addTo(map);


var newRadius = 200;
var interval = setInterval(function() {
   var currentRadius = circle.getRadius();
   console.debug("currentRadius", currentRadius)
   if (currentRadius < newRadius) {
       circle.setRadius(++currentRadius);
       console.debug("new ", circle.getRadius())
   } else {
       clearTimeout(interval);
   }
}, 1);
#map { 
    height: 400px; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" rel="stylesheet"/>

<div id="map"></div>

Upvotes: 3

Related Questions