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