diff --git a/Gemfile b/Gemfile
index 35847d2d..7891431c 100644
--- a/Gemfile
+++ b/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'
diff --git a/Gemfile.lock b/Gemfile.lock
index 7d01524c..9c67a316 100644
--- a/Gemfile.lock
+++ b/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
diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index b4a73eaa..646f4eba 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/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!
diff --git a/app/assets/javascripts/maps.js.coffee b/app/assets/javascripts/maps.js.coffee
index 189c5412..5a73f886 100644
--- a/app/assets/javascripts/maps.js.coffee
+++ b/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 © OpenStreetMap contributors, ' +
+ 'CC-BY-SA, ' +
+ 'Imagery © Mapbox'
+ ).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
diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass
index 52e6fcdd..7c0fced6 100644
--- a/app/assets/stylesheets/application.css.sass
+++ b/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
*/
diff --git a/app/assets/stylesheets/maps.css.sass b/app/assets/stylesheets/maps.css.sass
index 635fbe38..fdfccb5a 100644
--- a/app/assets/stylesheets/maps.css.sass
+++ b/app/assets/stylesheets/maps.css.sass
@@ -1,3 +1,2 @@
#map
- width: 100%
height: 60em
diff --git a/app/controllers/maps_controller.rb b/app/controllers/maps_controller.rb
index 2f0ce646..81db3466 100644
--- a/app/controllers/maps_controller.rb
+++ b/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: "#{event.city}: #{event.title}",
+ }, geometry: {
+ type: 'Point',
+ coordinates: [event.related_city.longitude, event.related_city.latitude]
+ }
+ }
+ }
+ }
+ end
end
end
diff --git a/app/views/maps/index.html.haml b/app/views/maps/index.html.haml
index 259d63a5..1a94c5d5 100644
--- a/app/views/maps/index.html.haml
+++ b/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)
- )