Is it possible to do drop markers on the map like in google maps (https://google-developers.appspot.com/maps/documentation/javascript/examples/marker-animations-iteration) in leaflet
[GIS] Leaflet drop markers animation
animationleafletmarkers
Related Solutions
This may not be the most elegant solution, but, with some fine-tuning of the timeout durations and customization of the cluster icons, I think you can get the effect you are looking for. See this example.
The trick is to first create a marker and set the map attribute in the marker options object. This adds the marker to the map with the nice drop animation. Then, the createMarker function returns the marker object so that we can add it to the cluster after it is dropped on the map. The adding of the marker to the cluster is wrapped in its own setTimeout function so that there is a delay between the marker dropping on to the map and being added to the cluster. Otherwise, it all happens too fast to see.
Note that to have control over the cluster icons you have to use MarkerClusterPlus, the enhanced version of MarkerCluster. MarkerClusterPlus is backwards compatible.
Here is the JS code:
var map;
var mc;
var cityHall = new google.maps.LatLng(39.95240, -75.16362);
//multiplier min and max, for our random numbers
var min = .999;
var max = 1.001;
function initialize(){
var options = {
zoom: 11,
center: cityHall,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
//marker cluster
mc = new MarkerClusterer(map);
//plot a 100 markers that are randomly scattered around City Hall
var i=0;
for (i=0;i<=100;i++) {
setTimeout(function() {
var marker = addMarker();
setTimeout(function () {
mc.addMarker(marker);
}, 1500);
}, i * 50);
}
}
function addMarker() {
var newLat = cityHall.lat() * (Math.random() * (max - min) + min);
var newLng = cityHall.lng() * (Math.random() * (max - min) + min);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(newLat,newLng),
animation: google.maps.Animation.DROP,
map: map
});
return marker;
}
If you know the amount of attributes ahead of time, you can use Layers to get the job done. Leaflet has a good tutorial on that.
Basically, you loop through the initial array and split them into two separate arrays based on the specified variable. Then you add each array to it's own LayerGroup which gives you an easy way to turn the Markers on and off en-masse.
Here's a working jsfiddle showing how it works.
Best Answer
Can drop marker like google maps using this Third party plugin bouncemarker
And here is a demo Demo