app/views/conferences/_venue_map.haml
#map{ style: "height: 500px;" }
- content_for(:script_body) do
- marker = escape_javascript(render '/conferences/venue_map_marker',
venue: venue)
:javascript
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map', { scrollWheelZoom: false }).setView(
[
#{venue.latitude.to_f + 0.05},
#{h(venue.longitude)}
], 11);
// add an OpenStreetMap tile layer
L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © \
<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>',
maxZoom: 18
}).addTo(map);
// add a marker in the given location, attach some popup content to it
// and open the popup
L.marker([
#{h venue.latitude},
#{h venue.longitude}
]).addTo(map)
.bindPopup("#{marker}")
.openPopup();
// Turn scrollwheel on when user clicks
map.on('focus', function(e) {
map.scrollWheelZoom.enable();
});
// Turn scrollwheel off once the map isn't in the viewport anymore
$('#map').waypoint({
handler: function(direction) {
map.scrollWheelZoom.disable();
//alert('map');
},
offset: '90%'
});
$('#map').waypoint({
handler: function(direction) {
map.scrollWheelZoom.disable();
//alert('map');
},
offset: '10%'
});