Ajout de markercluster pour un meilleur affichage de la carte (merci olive)

Gemfile

@@ -81,6 +81,7 @@ gem 'redcarpet'
 
 # Carte openstreetmap
 gem 'leaflet-rails'
+gem 'leaflet-markercluster-rails'
 
 gem 'geocoder'
 

Gemfile.lock

@@ -214,6 +214,8 @@ GEM
     kaminari (0.16.1)
       actionpack (>= 3.0.0)
       activesupport (>= 3.0.0)
+    leaflet-markercluster-rails (0.7.0)
+      railties (>= 3.1)
     leaflet-rails (0.7.4)
     libv8 (3.16.14.7)
     listen (2.7.11)
@@ -401,6 +403,7 @@ DEPENDENCIES
   jquery-rails
   jquery-sparkline-rails!
   jquery-turbolinks
+  leaflet-markercluster-rails
   leaflet-rails
   meta-tags
   modernizr-rails

app/assets/javascripts/application.js.coffee

@@ -21,6 +21,7 @@
 #= require select2
 #= require select2_locale_fr
 #= require leaflet
+#= require leaflet.markercluster
 #= require_tree .
 
 # Setup polyfills, so that older browsers can also take advantage of html5!

app/assets/javascripts/maps.js.coffee

@@ -17,6 +17,10 @@ $(document).ready ->
       # Automatic focus to all displayed events
       map.fitBounds layer.getBounds()
 
+      markers = L.markerClusterGroup()
+      markers.addLayer layer
+      map.addLayer markers
+
   $('.events #map, .moderations #map').each ->
     coord = [$(this).attr('latitude'), $(this).attr('longitude')]
 
@@ -27,11 +31,15 @@ $(document).ready ->
     ).addTo map
 
     $.getJSON '/maps.json', (json) ->
-      L.geoJson(json,
+      layer = L.geoJson(json,
         onEachFeature: (feature, layer) ->
           # Does this feature have a property named popupContent?
           if (feature.properties && feature.properties.popupContent)
             layer.bindPopup(feature.properties.popupContent)
       ).addTo map
 
+      markers = L.markerClusterGroup()
+      markers.addLayer layer
+      map.addLayer markers
+
     marker = L.marker([coord[0], coord[1]]).addTo map

app/assets/stylesheets/application.css.sass

@@ -11,7 +11,6 @@
  * file per style scope.
  *
  *= require select2
- *= require leaflet
  *= require_tree .
  */
 

app/assets/stylesheets/maps.css.sass

@@ -1,13 +1,14 @@
 @import compass
 @import leaflet
+@import leaflet.markercluster
+@import leaflet.markercluster.default
 
 #map
   +box-shadow(0 0 1em SteelBlue)
   +transition(none)
-
-#map *
-  /* Popup are better displayed with this: */
-  max-width: initial
+  *
+    /* Popup are better displayed with this: */
+    max-width: initial
 
 .maps #map
   height: 60em

app/models/event.rb

@@ -79,7 +79,9 @@ class Event < ActiveRecord::Base
 
   def as_json(_options = {})
     { type: 'Feature', properties: {
+      id: id,
       name: title,
+      tags: tags,
       popupContent: "<a href=\"/#{self.class.name.downcase.pluralize}/#{id}\"" \
         + ">#{city}: #{title}</a>"
     }, geometry: {