index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Leaflet Markercluster</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.3.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.3.0/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; background-color: #000; }
#map { position:absolute; top:0; bottom:0; width:100%; background-color: #000; }
.hex {
width: 40px;
height: 40px;
color: #9bd2ce;
text-align: center;
text-shadow:
-0.5px -0.5px 0 #49ada6,
0.5px -0.5px 0 #49ada6,
-0.5px 0.5px 0 #49ada6,
0.5px 0.5px 0 #49ada6;
}
.leaflet-div-icon {
background-color:rgba(0,0,0,0);
border:0px;
}
</style>
</head>
<body>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />
<script type="text/javascript" src="customers.js"></script>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
var map = L.mapbox.map('map').setView([40,-98],4);
L.mapbox.styleLayer('mapbox://styles/faraday2/0fd3756a').addTo(map);
var markers = new L.MarkerClusterGroup({
spiderfyOnMaxZoom: false,
showCoverageOnHover: false,
singleMarkerMode: true,
maxClusterRadius: 120,
iconCreateFunction: function(cluster) {
markers.on('clustermouseover', function(c) {
var popup = L.popup()
.setLatLng(c.layer.getLatLng())
.setContent('<h2>' + c.layer._childCount +' customers</h2>')
.openOn(map);
}).on('clustermouseout',function(c){
map.closePopup();
}).on('clusterclick',function(c){
map.closePopup();
});
var clusterSize = function(count) {
return (count < 2) ? 16 :
(count >= 2 && count <= 10) ? 32 :
(count > 10 && count <= 50) ? 48 :
64
};
return new L.DivIcon({
iconSize: [40, 40],
html: '<div class="hex" style="font-size:' + clusterSize(cluster.getChildCount()) + 'px">⬢</div>'
});
}
});
var featureLayer = L.geoJson(customerPoints, {
onEachFeature: function(feature, layer) {
var popupText = 'Customer: ' + feature.properties.person;
layer.bindPopup(popupText)
layer.on('mouseover', function (e) {
this.openPopup();
});
layer.on('mouseout', function (e) {
this.closePopup();
});
}
})
markers.addLayer(featureLayer);
map.addLayer(markers);
featureLayer.on('ready', function() {
map.fitBounds(featureLayer.getBounds());
});
</script>
</body>
</html>