Mapbox / Leaflet.Markercluster Bug Replication

by Kyle Pennell

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">
<script src="http://hips.webcommunicate.net/fiddle/data.js"></script>
<div id="map">TEST</div>

CSS

/* Map */
#map {
  z-index: 99;
  height: 440px;
}
/* Cluster */
body .hips-leaflet-cluster {
	color: #fff;
	font-weight: bold;
	background-color: transparent;
  padding: 0;
}
.hips-leaflet-cluster div {
	font-size: 14px;
	background-color: transparent;
  text-align: center;
  height: 41px;
  line-height: 40px;
	padding: 0;
}
.marker-cluster-small div {
	width: 40px;
}
body .marker-cluster-medium div {
	font-size: 13px;
	width: 40px;
}
body .marker-cluster-large div {
	font-size: 11px;
	width: 40px;
}

.marker-cluster-chw div {
	background-image: url('http://hips.webcommunicate.net/fiddle/cluster-red.png');
}
.marker-cluster-immunization div {
	background-image: url('http://hips.webcommunicate.net/fiddle/cluster-orange.png');
}
.marker-cluster-mobile div {
	background-image: url('http://hips.webcommunicate.net/fiddle/cluster-green.png');
}
.marker-cluster-postabortion div {
	background-image: url('http://hips.webcommunicate.net/fiddle/cluster-purple.png');
}


/* Info window */

.map-popup div {
  margin: 3px 0 3px 0;
  font-size: 1.1em
}
.map-popup a {
  font-weight: bold;
}
.map-popup .map-all {
  font-size: .9em;
}
.map-popup .map-all a {
  font-weight: normal;
}

JavaScript

var data = hips_data;
  var iconpath = 'http://hips.webcommunicate.net/fiddle/';
  var groups = [];
  var maxZoom = 12;

  map = L.map('map', {
    center: [7.2, 40.9],
    zoom: 2
  });

  var hips_leaflet = {

    getIcon : function(b) {
      var icons = [];
      icons.chw = L.icon({
        iconUrl: iconpath + 'marker-red.png',
        iconSize:     [29, 39],
        //shadowSize:   [50, 64],
        iconAnchor:   [15, 20],
        //shadowAnchor: [4, 62],
        popupAnchor:  [-1, -16]
      });
      icons.immunization = L.icon({
        iconUrl: iconpath + 'marker-orange.png',
        iconSize:     [29, 39],
        //shadowSize:   [50, 64],
        iconAnchor:   [15, 20],
        //shadowAnchor: [4, 62],
        popupAnchor:  [-1, -16]
      });
      icons.mobile = L.icon({
        iconUrl: iconpath + 'marker-green.png',
        iconSize:     [29, 39],
        //shadowSize:   [50, 64],
        iconAnchor:   [15, 20],
        //shadowAnchor: [4, 62],
        popupAnchor:  [-1, -16]
      });
      icons.postabortion  = L.icon({
        iconUrl: iconpath + 'marker-purple.png',
        iconSize:     [29, 39],
        //shadowSize:   [50, 64],
        iconAnchor:   [15, 20],
        //shadowAnchor: [4, 62],
        popupAnchor:  [-1, -16]
      });
      return icons[b];
    },

    clusterGroup : function(b) {
      return new L.MarkerClusterGroup({
        zoomToBoundsOnClick: false,
        maxClusterRadius: 90,
        spiderfyDistanceMultiplier: 3,
        showCoverageOnHover: false,
        iconCreateFunction: function(cluster) {
          size = 'small';
          childcount = cluster.getChildCount();
          if (childcount > 99) {
            size = 'large';
          }
          else if (childcount > 9) {
            size = 'medium';
          }
          return new L.DivIcon({
            className: 'hips-leaflet-cluster marker-cluster-' + size + ' marker-cluster-' + b,
            html: '<div>' + childcount + '</div>',
            iconSize:...