MarkerClusterGroup zoom, spiderfy and openPopup

by denvut

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.js"></script>
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css">
<script src="http://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css">
<div id='info'>
  <button type="button" id="spiderfyButton">Zoom and Spiderfy</button>
  (Clicking 2x does what I want. Want only one click)
</div>
<div id="map"></div>

CSS

/* Map */

#map {
  height: 440px;
}

#info {
  height: 25px;
}

JavaScript

map = L.map('map', {
  center: [39.828277, -98.579485],
  zoom: 2,
  maxZoom: 13
});

//setup Marker Clusters
var markers = new L.MarkerClusterGroup({
  spiderfyOnMaxZoom: true,
  showCoverageOnHover: false,
  disableClusteringAtZoom: 14
});

//an array of marker Ids
mIds = [];

//Create some markers with the same location
for (i = 0; i < 20; i++) {
  var id;
  var m = new L.Marker([39.828277, -98.579485])
  m.bindPopup('leaflet id: ' + id);
  
  
  id = m._leaflet_id;
  mIds.push(id);
  markers.addLayer(m);
}
markers.addTo(map);

//zoom to marker and spiderfy Cluster
$('#spiderfyButton').click(function() {
  //pick the first item in array as target marker
  var target = markers.getLayer(mIds[1])
  markers.zoomToShowLayer(target, function() {
    target.openPopup();
    
  })
});


L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
  attribution: "Map: Tiles Courtesy of MapQuest (OpenStreetMap, CC-BY-SA)",
  subdomains: ["otile1", "otile2", "otile3", "otile4"],
  maxZoom: 13,
  minZoom: 2
}).addTo(map);


map.on('popupopen', function(){
map.panBy(L.point(1,1));
});