From 0bb482d181c3a8be9144fffd1a31e92fc183ba72 Mon Sep 17 00:00:00 2001
From: Miles Gould <miles@assyrian.org.uk>
Date: Thu, 5 Sep 2013 13:40:20 +0100
Subject: [PATCH] Use Leaflet marker clusters.

Doesn't work - clusters don't spiderfy at max zoom, show their
boundaries on hover or split when you get close to them.
---
 Gemfile                                | 1 +
 Gemfile.lock                           | 3 +++
 app/assets/stylesheets/application.css | 2 ++
 app/views/places/index.html.haml       | 6 +++++-
 4 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/Gemfile b/Gemfile
index a751ce51b..9d6015b65 100644
--- a/Gemfile
+++ b/Gemfile
@@ -7,6 +7,7 @@ gem 'rack', '~>1.4.5'
 gem 'json', '~>1.7.7'
 gem 'haml'
 gem 'leaflet-rails'
+gem 'leaflet-markercluster-rails'
 gem 'unicorn' # http server
 
 gem 'cancan' # for checking member privileges
diff --git a/Gemfile.lock b/Gemfile.lock
index f49b4a479..f82f5f9fd 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -135,6 +135,8 @@ GEM
       thor (>= 0.14, < 2.0)
     json (1.7.7)
     kgio (2.8.0)
+    leaflet-markercluster-rails (0.6.0)
+      railties (>= 3.1)
     leaflet-rails (0.6.2)
     less (2.3.2)
       commonjs (~> 0.2.6)
@@ -271,6 +273,7 @@ DEPENDENCIES
   haml-rails
   jquery-rails
   json (~> 1.7.7)
+  leaflet-markercluster-rails
   leaflet-rails
   less-rails
   memcachier
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 2386295f3..f7c6d7fd2 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -6,5 +6,7 @@
  *= require bootstrap-datepicker
  *= require leaflet.ie
  *= require leaflet
+ *= require leaflet.markercluster
+ *= require leaflet.markercluster.default
  *= require_tree .
 */
diff --git a/app/views/places/index.html.haml b/app/views/places/index.html.haml
index 82dbbf55b..4cc6a7eef 100644
--- a/app/views/places/index.html.haml
+++ b/app/views/places/index.html.haml
@@ -3,6 +3,7 @@
 %div#map
 
 <script src="/assets/leaflet.js?body=1" type="text/javascript"></script>
+<script src="/assets/leaflet.markercluster.js?body=1" type="text/javascript"></script>
 
 - attribution = render(:partial => 'map_attribution').gsub(/\n/, " ")
 :javascript
@@ -11,10 +12,13 @@
     attribution: '#{ attribution }',
     maxZoom: 18
   }).addTo(map);
+  var markers = new L.MarkerClusterGroup({spiderfyOnMaxZoom: true, showCoverageOnHover: true, zoomToBoundsOnClick: true});
 
 - Member.located.each do |m|
   :javascript
     marker = new L.Marker(new L.LatLng(#{m.latitude}, #{m.longitude}));
     marker.bindPopup('#{ link_to m, m } #{ escape_javascript( render :partial => 'members/popover', :locals => { :member => m }) }').openPopup();
-    map.addLayer(marker);
+    markers.addLayer(marker)
 
+:javascript
+  map.addLayer(markers);