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

recurrent
echarp 8 years ago
parent 5daed4a832
commit c5d852ed4b
  1. 1
      Gemfile
  2. 3
      Gemfile.lock
  3. 1
      app/assets/javascripts/application.js.coffee
  4. 10
      app/assets/javascripts/maps.js.coffee
  5. 1
      app/assets/stylesheets/application.css.sass
  6. 9
      app/assets/stylesheets/maps.css.sass
  7. 2
      app/models/event.rb

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

@ -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

@ -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!

@ -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

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

@ -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

@ -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: {

Loading…
Cancel
Save