leaflet example with cluster

by jpeter06

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.5.0/MarkerCluster.Default.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.5.0/MarkerCluster.css">
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet-src.js"></script>
<script src="http://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
<div id="map" class="rot552"></div>
<button  id="panB" onclick="panTo()">panTo</button>
<button  id="rotB" onclick="rotTo()">rotTo</button>
<!--<button  id="rotB2" onclick="rotTo2()">rotTo2</button>
-->

CSS

body,html{ height:100%; width:100%}
body{
    perspective:600px;
    overflow:hidden;
}

.leaflet-tile-pane { /*** solv problem with chrome marks disapears **/
    z-index:0;
}
.leaflet-marker-icon { /* background: rgba(0,0,0,0) */
        background-position: 21% 110%;
    background-repeat: no-repeat;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAXCAYAAABnGz2mAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAWaAAAFmgGJxaxdAAAAB3RJTUUH4AYJDzIeNPslJwAAAuFJREFUSMftlstOG0EQRc/tnsHY2JhHCMkui/wQC8QCYQk+DLFlyddkk1WEIkVJlJDgBGxPVxapCeNh/Mpjl5ZaM+551PG9VdUjlhgHBwcaDoeklJRSUggBSTPvNzNSShRFQUoJMwMgyzLyPLdOp2NXV1c2L6YWQR0eHiqEEIAoKQCqQpVB62AlXPW6JPNZAEmSXV5eNgJm86COjo4UYwyS8hBCS1JWwj0w2EzVGq4ZUJjZ2MxGZjbxtdXAYowKIWQhhLakDUktIE5JroWi2zSvTYDvDp18rgwWJLUk9ST1JbXrYI9y4wHUZkCOzCx35SZnZ2fF+fm5LQ12fHysEEImqSOpD+xI6gBhSbAmOANGkjIzG0m6lzQGiqXB8jwPktYkdYEdYNcVC2VuNdlYX6vlmQEjL6TvwNDM7lYCCyFEB9kCdh1svQxWByh/z8o5MzNJmNnY/9wQ+AzcAuOl2sVgMFCe5x1gX9JL4IWrli+ysKmV+LGUbgLcmNkb4LWZvU0p3V5cXNhCxbxvtTy3nrhiW02JXwXx81+txBUq161SidGV6nmcb3U7Z4FFoOMq7Tlct574i+wrr5VElfNM0tDM+sC6g84HGwwGAtaATYfac8B21fploKodv5KbBuRmNpS07QJkXhQP4jTZWEn6feApsO2gPaAnaeq4xNwENv3+TWBL0o6nSFfS2snJieYqFkLIgA1X6pnbuOUlvkrHb+xn/lzbzO4l7QJ9oBVjDFU7p8BOT0/lvavvau37w73SxhWBZjXaJGlsZntuZzvLsjgTTD/HOrAt6bnD7QDt3wSaB4ekfXemK2kqz+pgEVj3XOh6ESBpsswnUkNwzfp68EpseZx2neWRYv6yAvgKvJM0qhWJ5mzSq4wx8AG4896meWAG3APvgVeSPtbbxCJ7VrT2Brj2rWkyryqTd+RrSV8cKvLvxsjjfar3sayhWu7K/cyVqlv3t6ws35E8XsH/8QfjB1gOE8DsnFDfAAAAAElFTkSuQmCC');
}

.mycluster{
	background-image:...

JavaScript

var center=[40.424127, -3.711656];//Plaza de España
var atos=[40.434726, -3.632597];
// Create the map
var map = L.map('map', { zoomControl:false }).setView([49.5, -0.5], 5);
var rotated=false;
// Set up the OSM layer
L.tileLayer(
    //'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
    'http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png',
//    'http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png',
    {maxZoom: 19}).addTo(map);

var markers = new L.MarkerClusterGroup(
    {

			iconCreateFunction: function (cluster) {
				var markers = cluster.getAllChildMarkers();
                console.log(markers.length);
				var n = 0;
                var est=[0,0,0,0];
				for (var i = 0; i < markers.length; i++) {
					n += markers[i].number;
                    est[markers[i].estado]++;
				}
                n=markers.length;
                var svg='<div class="icono rot-55">'+pieChart(est[0],est[1],est[2],est[3],40)+'</div>';
                //console.log(svg);
				return L.divIcon({ html:svg, className: 'mycluster', iconSize: L.point(40, 40) });
			}
    });

//markers.addLayer(new L.Marker(atos));
for(var i=0;i<20;i++){
    var aux1=Math.random()*0.02;  var aux2=Math.random()*0.02;
    var estado=Math.floor(Math.random()*4-0.001);
    var myIcon = L.divIcon({className: 'estado'+estado,iconSize: [40, 40],        popupAnchor: [0,-15]});
    var marker=new L.Marker([atos[0]+aux1,atos[1]+aux2], {icon: myIcon}).on('click', markClicked);
    marker['estado']=estado;
    marker.bindPopup("<div ><b>Hello</b><br>a pto."+i+"</div>");
    markers.addLayer(marker);
}
markers.addTo(map);

// add a marker in the given location with a DIV
var myIcon = L.divIcon({className: 'my-div-icon',iconSize: [40, 40],
                       popupAnchor: [0,-15]});
 var firefoxIcon = L.icon({
        iconUrl: 'http://joshuafrazier.info/images/firefox.svg',
        iconSize: [38, 50], // size of the icon
        popupAnchor: [0,-15]
        });

//FUNCTIONS //////////
function...