Beautify venues#show

app/views/conference/_venue_map.html.haml

@@ -0,0 +1,35 @@
+#map{style: "height: 500px;" }
+- popup = "<h3>#{@conference.venue.name}</h3><br>#{@conference.venue.street}<br>#{@conference.venue.city}<br>#{@conference.venue.country_name}"
+- content_for(:script_body) do
+  :javascript
+    L.Icon.Default.imagePath = '/assets/leaflet/';
+    // create a map in the "map" div, set the view to a given place and zoom
+    var map = L.map('map', { scrollWheelZoom: false }).setView([#{@conference.venue.latitude}, #{@conference.venue.longitude}], 11);
+    // add an OpenStreetMap tile layer
+    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+      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>',
+      maxZoom: 18
+    }).addTo(map);
+    // add a marker in the given location, attach some popup content to it and open the popup
+    L.marker([#{@conference.venue.latitude}, #{@conference.venue.longitude}]).addTo(map)
+      .bindPopup("#{popup}")
+      .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%'
+    });