Mise en place de leaflet pour la cartographie des evts futurs

This commit is contained in:
echarp 2014-07-31 01:32:47 +02:00
parent 9cfd2d3d6b
commit 612b3f498a
8 changed files with 42 additions and 48 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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