Mise en place de leaflet pour la cartographie des evts futurs

Gemfile

@@ -79,7 +79,7 @@ gem 'redcarpet'
 gem 'actionview-encoded_mail_to'
 
 # Carte openstreetmap
-gem 'openlayers-rails'
+gem 'leaflet-rails'
 
 # Tiny MCE integration
 gem 'tinymce-rails'

Gemfile.lock

@@ -166,6 +166,7 @@ GEM
     kaminari (0.16.1)
       actionpack (>= 3.0.0)
       activesupport (>= 3.0.0)
+    leaflet-rails (0.7.3)
     libv8 (3.16.14.3)
     listen (2.7.9)
       celluloid (>= 0.15.2)
@@ -183,8 +184,6 @@ GEM
     modernizr-rails (2.7.1)
     multi_json (1.10.1)
     mysql2 (0.3.16)
-    openlayers-rails (0.0.4)
-      railties (>= 3.1)
     orm_adapter (0.5.0)
     polyamorous (1.0.0)
       activerecord (>= 3.0)
@@ -317,10 +316,10 @@ DEPENDENCIES
   jbuilder (~> 2.0)
   jquery-rails
   jquery-turbolinks
+  leaflet-rails
   meta-tags
   modernizr-rails
   mysql2
-  openlayers-rails
   quiet_assets
   rails (~> 4.1.0.rc1)
   rails-i18n

app/assets/javascripts/application.js.coffee

@@ -17,6 +17,7 @@
 #= require tinymce-jquery
 #= require modernizr
 #= require webshims/polyfiller
+#= require leaflet
 #= require_tree .
 
 # Setup polyfills, so that older browsers can also take advanage of html5!

app/assets/javascripts/maps.js.coffee

@@ -1,19 +1,20 @@
-# Place all the behaviors and hooks related to the matching controller here.
-# All this logic will automatically be available in application.js.
-# You can use CoffeeScript in this file: http://coffeescript.org/
-
-#= require openlayers-rails
-
 $(document).ready ->
   if $('#map').size() > 0
-    map = new OpenLayers.Map 'map'
-    layer = new OpenLayers.Layer.WMS 'OpenLayers WMS',
-      'http://vmap0.tiles.osgeo.org/wms/vmap0', {
-        layers: 'basic'
-      }
-    map.addLayer layer
-    map.setCenter new OpenLayers.LonLat(2.5, 46.4), 7
-    map.addControl new OpenLayers.Control.LayerSwitcher()
+    map = L.map('map')
 
-    map.addLayer eventsLayer
-    map.addLayer lugsLayer
+    L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png',
+      id: 'examples.map-i86knfo3',
+      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
+        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
+        'Imagery © <a href="http://mapbox.com">Mapbox</a>'
+    ).addTo map
+
+    $.getJSON '/maps.json', (json) ->
+      map.setView [45, 6], 6
+
+      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

app/assets/stylesheets/application.css.sass

@@ -10,6 +10,7 @@
  * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
  * file per style scope.
  *
+ *= require leaflet
  *= require_tree .
  *= require_self
  */

app/assets/stylesheets/maps.css.sass

@@ -1,3 +1,2 @@
 #map
-  width: 100%
   height: 60em

app/controllers/maps_controller.rb

@@ -1,7 +1,25 @@
 class MapsController < ApplicationController
   def index
-    @cities_event = City.joins(:events).where('start_time > ?', 360.days.ago)
+    respond_to do |format|
+      format.html
+      format.json {
+        events = Event.moderated.future.joins(:related_city).includes(:related_city)
 
-    @cities_lug = City.joins :lugs
+        #@cities_lug = City.joins :lugs
+
+        render json: events.collect { |event|
+          {
+            type: 'Feature',
+            properties: {
+              name: event.title,
+              popupContent: "<a href=\"#{event_url event}\">#{event.city}: #{event.title}</a>",
+            }, geometry: {
+              type: 'Point',
+              coordinates: [event.related_city.longitude, event.related_city.latitude]
+            }
+          }
+        }
+      }
+    end
   end
 end

app/views/maps/index.html.haml

@@ -3,28 +3,3 @@
   =title t '.title'
 
 #map
-
-:javascript
-  var eventsLayer = new OpenLayers.Layer.Markers("#{t '.events'}");
-  eventsLayer.setVisibility(true);
-  var iconSize =  new OpenLayers.Size(20, 20);
-  var iconOffset = new OpenLayers.Pixel(-(iconSize.w/2), -iconSize.h);
-
-- for city in @cities_event
-  :coffee
-    eventsLayer.addMarker new OpenLayers.Marker(
-      new OpenLayers.LonLat(#{city.longitude}, #{city.latitude})
-    )
-
-:javascript
-  var lugsLayer = new OpenLayers.Layer.Markers("#{t '.lugs'}");
-  lugsLayer.setVisibility(true);
-  var iconSize =  new OpenLayers.Size(20, 20);
-  var iconOffset = new OpenLayers.Pixel(-(iconSize.w/2), -iconSize.h);
-
-- for city in @cities_lug
-  :coffee
-    lugsLayer.addMarker new OpenLayers.Marker(
-      new OpenLayers.LonLat(#{city.longitude}, #{city.latitude})
-      new OpenLayers.Icon("/assets/team.png", iconSize, iconOffset)
-    )