added cluster plugin

MarkerCluster.Default.css

@@ -0,0 +1,38 @@
+.marker-cluster-small {
+	background-color: rgba(181, 226, 140, 0.6);
+	}
+.marker-cluster-small div {
+	background-color: rgba(110, 204, 57, 0.6);
+	}
+
+.marker-cluster-medium {
+	background-color: rgba(241, 211, 87, 0.6);
+	}
+.marker-cluster-medium div {
+	background-color: rgba(240, 194, 12, 0.6);
+	}
+
+.marker-cluster-large {
+	background-color: rgba(253, 156, 115, 0.6);
+	}
+.marker-cluster-large div {
+	background-color: rgba(241, 128, 23, 0.6);
+	}
+
+.marker-cluster {
+	background-clip: padding-box;
+	border-radius: 20px;
+	}
+.marker-cluster div {
+	width: 30px;
+	height: 30px;
+	margin-left: 5px;
+	margin-top: 5px;
+
+	text-align: center;
+	border-radius: 15px;
+	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
+	}
+.marker-cluster span {
+	line-height: 30px;
+	}

MarkerCluster.Default.ie.css

@@ -0,0 +1,22 @@
+ /* IE 6-8 fallback colors */
+.marker-cluster-small {
+	background-color: rgb(181, 226, 140);
+	}
+.marker-cluster-small div {
+	background-color: rgb(110, 204, 57);
+	}
+
+.marker-cluster-medium {
+	background-color: rgb(241, 211, 87);
+	}
+.marker-cluster-medium div {
+	background-color: rgb(240, 194, 12);
+	}
+
+.marker-cluster-large {
+	background-color: rgb(253, 156, 115);
+	}
+.marker-cluster-large div {
+	background-color: rgb(241, 128, 23);
+}
+

MarkerCluster.css

@@ -0,0 +1,6 @@
+.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
+	-webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.2s ease-in;
+	-moz-transition: -moz-transform 0.2s ease-out, opacity 0.2s ease-in;
+	-o-transition: -o-transform 0.2s ease-out, opacity 0.2s ease-in;
+	transition: transform 0.2s ease-out, opacity 0.2s ease-in;
+	}

coinmap.js

@@ -24,7 +24,11 @@ function coinmap() {
     "Toner": tileToner,
   }).addTo(map);
 
-  map.locate({setView: true, maxZoom: 6});
+  var markers = new L.MarkerClusterGroup({showCoverageOnHover: false, maxClusterRadius: 32});
+
+  coinmap_populate(markers);
 
-  coinmap_populate(map);
+  map.addLayer(markers);
+
+  map.locate({setView: true, maxZoom: 6});
 }

index.html

@@ -5,10 +5,14 @@
 <meta charset="utf-8">
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />
+<link href="MarkerCluster.css" rel="stylesheet" type="text/css" />
+<link href="MarkerCluster.Default.css" rel="stylesheet" type="text/css" />
 <!--[if lte IE 8]>
 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.ie.css" />
+<link href="MarkerCluster.Default.ie.css" rel="stylesheet" type="text/css" />
 <![endif]-->
 <script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
+<script src="leaflet.markercluster.js"></script>
 <script src="coinmap.js"></script>
 <script src="coinmap-icons.js"></script>
 <script src="coinmap-data.js"></script>

refresh.py

@@ -169,7 +169,7 @@ def determine_icon(tags):
 f.close()
 
 with open(scriptdir + '/coinmap-data.js', 'w') as f:
-  f.write('function coinmap_populate(map) {\n')
+  f.write('function coinmap_populate(markers) {\n')
   for e in json['elements']:
     lat = e['lat']
     lon = e['lon']
@@ -188,6 +188,6 @@ def determine_icon(tags):
       popup += '%s<br/>' % (tags.get('addr:country', ''))
     if 'website' in tags:
       popup += '<a href=\\"%s\\" target=\\"_blank\\">%s</a>' % (tags['website'], tags['website'])
-    f.write('  L.marker([%s, %s], {"title": "%s", icon: icon_%s}).bindPopup("%s").addTo(map);\n' % (lat, lon, name.encode('utf-8'), icon, popup.encode('utf-8')))
+    f.write('  L.marker([%s, %s], {"title": "%s", icon: icon_%s}).bindPopup("%s").addTo(markers);\n' % (lat, lon, name.encode('utf-8'), icon, popup.encode('utf-8')))
   f.write('  document.getElementById("count").innerHTML = "<b>%d</b>";\n' % len(json['elements']));
   f.write('}\n')