Leaflet + esri

by Alex Azuero

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet-src.js"></script>
<script src="https://cdn.jsdelivr.net/leaflet.esri/2.0.0/esri-leaflet.js"></script>
<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">
<script src="http://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
<div id="map"></div>

CSS

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

		.info {
			padding: 6px 8px;
			font: 14px/16px Arial, Helvetica, sans-serif;
			background: white;
			background: rgba(255,255,255,0.8);
			box-shadow: 0 0 15px rgba(0,0,0,0.2);
			border-radius: 5px;
		}
		.info h4 {
			margin: 0 0 5px;
			color: #777;
		}
    
#map { 
    display:block;
   overflow:visible;
    height: 100%; 
    width: 100%;
      border: 1px dotted red;
    transition: 1s ease-in-out;
}

.leaflet-marker-pane {
    transform: translateZ(2px);
}
.icono{
    transform: translate3d(1px,-14px,1px);
    transition: 1s ease-in-out;
}

#map,#map *{
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
}

.marker {
  -webkit-transform:translateZ(1px);
  transform:translateZ(1px);
}

.mycluster {
			width: 40px;
			height: 40px;
			background-color: transparent;
			text-align: center;
			font-size: 24px;
    transform:translateZ(2px);
		}


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

JavaScript

var atos=[40.434726, -3.632597];
var map = L.map('map').setView([40.434726, -3.632597], 13);

     // L.esri.basemapLayer("Gray").addTo(map);
      L.esri.tiledMapLayer({
  url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer',
  maxZoom: 18
}).addTo(map);

/*      var parks = L.esri.featureLayer({
        url: "https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Portland_Parks/FeatureServer/0",
        style: function () {
          return { color: "#70ca49", weight: 2 };
        }
      }).addTo(map);

      var popupTemplate = "<h3>{NAME}</h3>{ACRES} Acres<br><small>Property ID: {PROPERTYID}<small>";

      parks.bindPopup(function(e){
        return  L.Util.template(popupTemplate, e.feature.properties)
      });
      
 */     
      var markers = new L.MarkerClusterGroup(
    {
		/*	disableClusteringAtZoom: 15,*/
			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<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);

function...