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="fullscreen" onclick="fullScreen()">
fullScreen
</button>
<!--<button  id="rotB2" onclick="rotTo2()">rotTo2</button>
-->

CSS

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


.leaflet-marker-icon { /* background: rgba(0,0,0,0) */
        background-position: 21% 40%;
    background-repeat: no-repeat;
background-image:...

JavaScript

var poss = [
37.219155	,-176.94153520544358,50,
37.219155	,-176.94153520544358,50,
3889884	,-180.34065895779955,50,
38.89884	,-180.34065895779955,50,
38.83981	,-180.97782651992088,50,
38.83981	,-180.97782651992088,50,
38.83981	,-180.97782651992088,50,
38.83981	,-180.97782651992088,50,
38.789172	,-180.7986369295127,50,
38.789172	,-180.7986369295127,50,
38.789172	,-180.7986369295127,50,
37.346306	,-180.09332385127828,50,
37.346306	,-180.09332385127828,50,
37.443863	,-180.2652303367357,50,
37.443863	,-180.2652303367357,50,
37.443863	,-180.2652303367357,50,
37.52955	,-179.16299797291947,50,
37.52955	,-179.16299797291947,50,
37.52955	,-179.16299797291947,50,
36.673435	,-179.8187595360043,50,
36.673435	,-179.8187595360043,50,
37.91871	,-178.70845833723573,50,
37.91871	,-178.70845833723573,50,
37.91871	,-178.70845833723573,50,
39.293484	,-179.1813127089489,50,
39.293484	,-179.1813127089489,50,
39.293484	,-179.1813127089489,50,
39.293484	,-179.1813127089489,50,
39.481486	,-180.35618570481276,50,
39.244664	,-177.49176664649977,50,
39.244664	,-177.49176664649977,50,
39.487082	,-177.5827533635452,50,
39.487082	,-177.5827533635452,50,
39.293484	,-179.1813127089489,50,
39.293484	,-179.1813127089489,50,
39.293484	,-179.1813127089489,50,
39.044786	,-177.34437194524384,50,
39.044786	,-177.34437194524384,50,
37.52955	,-179.16299797291947,50,
37.52955	,-179.16299797291947,50,
37.52955	,-179.16299797291947,50,
36.672509	,-180.29984798977188,50,
37.219155	,-176.94153520544358,50,
37.246704	,-179.84185849128198,50,
38.149627	,-174.94492631539595,50,
38.659021	,-177.98590023898296,50,
38.720693	,-174.72143233634068,50,
39.977267	,-179.70239265979097,50,
41.532407	,-173.1705043469189,22.5
];

var defCircleSize=25;
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(
   ...