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

This commit is contained in:
echarp 2014-10-26 16:51:16 +01:00
parent 5daed4a832
commit c5d852ed4b
7 changed files with 21 additions and 6 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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