Adds pop-ups for cities

When a placemark on the map is clicked, the city and country of the
placemark is displayed.

In order to generate the pop-ups, this commit adds the Twitter
Bootstrap Javascript framework to the website.

public/js/map.js

@@ -49,25 +49,72 @@ $(function() {
         })
       );
     })
+  })
 
-    var map = new ol.Map({
-      interactions: ol.interaction.defaults({
-        mouseWheelZoom: false
-      }),
-      controls: ol.control.defaults({
-        attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
-          collapsible: false
-        })
-      }),
-      layers: [countriesLayer, events],
-      target: 'map',
-      view: new ol.View({
-        center: translateToMapCoords([0, 40]),
-        zoom: 1.2,
-        minZoom: 1.2,
-        maxZoom: 7,
-        extent: [-17400000,-6040000,19400000,16200000]
+  var popupElem = document.getElementById('popup');
+
+  var popup = new ol.Overlay({
+    element: popupElem,
+    positioning: 'top-center',
+    stopEvent: false
+  });
+
+  var map = new ol.Map({
+    interactions: ol.interaction.defaults({
+      mouseWheelZoom: false
+    }),
+    controls: ol.control.defaults({
+      attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+        collapsible: false
       })
+    }),
+    layers: [countriesLayer, events],
+    overlays: [popup],
+    target: document.getElementById('map'),
+    view: new ol.View({
+      center: translateToMapCoords([0, 40]),
+      zoom: 1.2,
+      minZoom: 1.2,
+      maxZoom: 7,
+      extent: [-17400000,-6040000,19400000,16200000]
+    })
+  });
+
+  // display popup on click
+  map.on('click', function(evt) {
+    $(popupElem).popover('destroy');
+    var feature = map.forEachFeatureAtPixel(evt.pixel,
+        function(feature, layer) {
+          if (layer == events)
+             return feature;
+        });
+    if (feature) {
+      var geometry = feature.getGeometry();
+      var coord = geometry.getCoordinates();
+      popup.setPosition(coord);
+      $(popupElem).popover({
+        'animation': false,
+        'placement': 'top',
+        'html': true,
+        'content': feature.get('name')
+      });
+      // workaround for already displayed popovers
+      $( "div.popover-content" ).text(feature.get('name'))
+
+      $(popupElem).popover('show');
+    }
+  });
+
+  // change mouse cursor when over marker
+  $(map.getViewport()).on('mousemove', function(e) {
+    var pixel = map.getEventPixel(e.originalEvent);
+    var hit = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+      return layer == events;
     });
-  })
+    if (hit) {
+      map.getTarget().style.cursor = 'pointer';
+    } else {
+      map.getTarget().style.cursor = '';
+    }
+  });
 });

views/index.erb

@@ -11,7 +11,9 @@
 <section id="locations">
     <h2>Where is it?</h2>
 
-  <div id="map"></div>
+    <div id="map">
+      <div id="popup"></div>
+  </div>
   <div class="map-aside">
     <p>
     Last year, we had <a href="http://bit.ly/gdcr13map" target="_blank">170 cities around the world</a>

views/layout.erb

@@ -25,6 +25,7 @@
     </div><!--/footer-->
 
     <script type="text/javascript" src="/js/jquery.min.js"></script>
+    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
     <script type="text/javascript" src="/js/openlayers3.js"></script>
     <script type="text/javascript" src="/js/map.js"></script>
 </body>

views/style.scss

@@ -4,6 +4,7 @@
 @import "stylesheets/base";
 @import "stylesheets/fonts";
 @import "stylesheets/map";
+@import "stylesheets/popover";
 @import "stylesheets/colors";
 @import "stylesheets/navigation";
 @import "stylesheets/forms";

views/stylesheets/popover.scss

@@ -0,0 +1,147 @@
+.popover {
+  font-size: 14px;
+}
+.popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1010;
+  display: none;
+  max-width: 276px;
+  padding: 1px;
+  text-align: left;
+  white-space: normal;
+  background-color: #ffffff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-border-radius: 6px;
+     -moz-border-radius: 6px;
+          border-radius: 6px;
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  -webkit-background-clip: padding-box;
+     -moz-background-clip: padding;
+          background-clip: padding-box;
+}
+
+.popover.top {
+  margin-top: -10px;
+}
+
+.popover.right {
+  margin-left: 10px;
+}
+
+.popover.bottom {
+  margin-top: 10px;
+}
+
+.popover.left {
+  margin-left: -10px;
+}
+
+.popover-title {
+  padding: 8px 14px;
+  margin: 0;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 18px;
+  background-color: #f7f7f7;
+  border-bottom: 1px solid #ebebeb;
+  -webkit-border-radius: 5px 5px 0 0;
+     -moz-border-radius: 5px 5px 0 0;
+          border-radius: 5px 5px 0 0;
+}
+
+.popover-title:empty {
+  display: none;
+}
+
+.popover-content {
+  padding: 9px 14px;
+}
+
+.popover .arrow,
+.popover .arrow:after {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.popover .arrow {
+  border-width: 11px;
+}
+
+.popover .arrow:after {
+  border-width: 10px;
+  content: "";
+}
+
+.popover.top .arrow {
+  bottom: -11px;
+  left: 50%;
+  margin-left: -11px;
+  border-top-color: #999;
+  border-top-color: rgba(0, 0, 0, 0.25);
+  border-bottom-width: 0;
+}
+
+.popover.top .arrow:after {
+  bottom: 1px;
+  margin-left: -10px;
+  border-top-color: #ffffff;
+  border-bottom-width: 0;
+}
+
+.popover.right .arrow {
+  top: 50%;
+  left: -11px;
+  margin-top: -11px;
+  border-right-color: #999;
+  border-right-color: rgba(0, 0, 0, 0.25);
+  border-left-width: 0;
+}
+
+.popover.right .arrow:after {
+  bottom: -10px;
+  left: 1px;
+  border-right-color: #ffffff;
+  border-left-width: 0;
+}
+
+.popover.bottom .arrow {
+  top: -11px;
+  left: 50%;
+  margin-left: -11px;
+  border-bottom-color: #999;
+  border-bottom-color: rgba(0, 0, 0, 0.25);
+  border-top-width: 0;
+}
+
+.popover.bottom .arrow:after {
+  top: 1px;
+  margin-left: -10px;
+  border-bottom-color: #ffffff;
+  border-top-width: 0;
+}
+
+.popover.left .arrow {
+  top: 50%;
+  right: -11px;
+  margin-top: -11px;
+  border-left-color: #999;
+  border-left-color: rgba(0, 0, 0, 0.25);
+  border-right-width: 0;
+}
+
+.popover.left .arrow:after {
+  right: 1px;
+  bottom: -10px;
+  border-left-color: #ffffff;
+  border-right-width: 0;
+}
+