leaflet example with cluster

by jpeter06

HTML

<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.5.0/leaflet.markercluster-src.js"></script>
<div style="width:100%;height:80%;border: 2px solid blue;overflow:hidden;">
<div id="map" class="rot552"></div>
</div>
<button  id="panB" onclick="panTo()">panTo</button>
<button  id="rotB" onclick="rotTo()">rotTo</button>
<!--<button  id="rotB2" onclick="rotTo2()">rotTo2</button>
-->

CSS

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


.leaflet-marker-icon { /* background: rgba(0,0,0,0) */
        background-position: 21% 40%;
    background-repeat: no-repeat;
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').setView([40.434726, -3.632597], 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();
				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<30;i++){
    var aux1=Math.random()*4*randomSign();  var aux2=Math.random()*4*randomSign();
    var estado=Math.floor(Math.random()*4-0.001);
    var svg='<div class="icono rot-55">'+pieChart(getN(0,estado),getN(1,estado),
    																	getN(2,estado),getN(3,estado),40)+'</div>';
            
    var myIcon = L.divIcon({ html:svg, className: 'mycluster', iconSize: L.point(40, 40) });
//    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]});
...