Merge pull request #466 from fredj/popover

Use popover from Bootstrap

examples/overlay.html

@@ -8,13 +8,6 @@
     <link rel="stylesheet" href="examples.css" type="text/css">
     <link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
     <style type="text/css">
-      .overlay {
-        display: none;
-        font-size: 10pt;
-      }
-      .ol-overlaycontainer .overlay {
-        display: block;
-      }
       #vienna {
         text-decoration: none;
         color: white;
@@ -22,44 +15,8 @@
         font-weight: bold;
         text-shadow: black 0.1em 0.1em 0.2em;
       }
-      #popup {
+      .popover-content {
-        width: 170px;
+        min-width: 180px;
-        margin-left: -92px;
-        margin-bottom: 12px;
-        border-radius: 5px;
-        padding: 5px;
-      }
-
-      /* Popup CSS generated with http://cssarrowplease.com/ */
-
-      .arrow_box {
-        position: relative;
-        background: #88b7d5;
-        border: 2px solid #c2e1f5;
-      }
-      .arrow_box:after, .arrow_box:before {
-        top: 100%;
-        border: solid transparent;
-        content: " ";
-        height: 0;
-        width: 0;
-        position: absolute;
-        pointer-events: none;
-      }
-
-      .arrow_box:after {
-        border-color: rgba(136, 183, 213, 0);
-        border-top-color: #88b7d5;
-        border-width: 10px;
-        left: 50%;
-        margin-left: -10px;
-      }
-      .arrow_box:before {
-        border-color: rgba(194, 225, 245, 0);
-        border-top-color: #c2e1f5;
-        border-width: 13px;
-        left: 50%;
-        margin-left: -13px;
       }
     </style>
     <title>Overlay example</title>
@@ -92,11 +49,12 @@
 
         <div class="span4">
           <h4 id="title">Overlay example</h4>
-          <p id="shortdesc">Demonstrates overlays.</p>
+          <p id="shortdesc">Demonstrates overlays. The popups are created using
+            <a href="http://twitter.github.com/bootstrap/javascript.html#popovers">Popovers</a> from Bootstrap.</p>
           <div id="docs">
             <p>See the <a href="overlay.js" target="_blank">overlay.js source</a> to see how this is done.</p>
           </div>
-          <div id="tags">overlay, popup, mapquest, openaerial</div>
+          <div id="tags">overlay, popup, bootstrap, popover, mapquest, openaerial</div>
         </div>
 
       </div>
@@ -107,9 +65,11 @@
       <!-- Clickable label for Vienna -->
       <a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>
       <!-- Popup -->
-      <div class="overlay arrow_box" id="popup"></div>
+      <div id="popup" title="Welcome to ol3"></div>
     </div>
 
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
     <script src="loader.js?id=overlay" type="text/javascript"></script>
     <script src="social-links.js" type="text/javascript"></script>
 

examples/overlay.js

@@ -35,11 +35,20 @@ var popup = new ol.Overlay({
   map: map,
   element: document.getElementById('popup')
 });
-map.addEventListener('click', function(evt) {
+map.on('click', function(evt) {
+  var element = popup.getElement();
   var coordinate = evt.getCoordinate();
-  popup.getElement().innerHTML =
+  var hdms = ol.Coordinate.toStringHDMS(ol.projection.transform(
-      'Welcome to ol3. The location you clicked was<br>' +
+      coordinate, 'EPSG:3857', 'EPSG:4326'));
-      ol.Coordinate.toStringHDMS(ol.projection.transform(
+
-          coordinate, 'EPSG:3857', 'EPSG:4326'));
+  $(element).popover('destroy');
   popup.setPosition(coordinate);
+  // the keys are quoted to prevent renaming in ADVANCED_OPTIMIZATIONS mode.
+  $(element).popover({
+    'placement': 'top',
+    'animation': false,
+    'html': true,
+    'content': '<p>The location you clicked was:</p><code>' + hdms + '</code>'
+  });
+  $(element).popover('show');
 });