From 1311464ea68a61bcebb69602a71c48c5a338a5a7 Mon Sep 17 00:00:00 2001
From: Frederic Junod <frederic.junod@camptocamp.com>
Date: Thu, 4 Apr 2013 14:28:07 +0200
Subject: [PATCH 1/4] Use popover from Bootstrap

---
 examples/overlay.html | 51 +++++--------------------------------------
 examples/overlay.js   | 16 ++++++++++----
 2 files changed, 17 insertions(+), 50 deletions(-)

diff --git a/examples/overlay.html b/examples/overlay.html
index a0b6338f9a..9726befafd 100644
--- a/examples/overlay.html
+++ b/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 {
-        width: 170px;
-        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;
+      .popover-content {
+        min-width: 180px;
       }
     </style>
     <title>Overlay example</title>
@@ -107,9 +64,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>
 
diff --git a/examples/overlay.js b/examples/overlay.js
index 1585821faf..ab43405943 100644
--- a/examples/overlay.js
+++ b/examples/overlay.js
@@ -36,10 +36,18 @@ var popup = new ol.Overlay({
   element: document.getElementById('popup')
 });
 map.addEventListener('click', function(evt) {
+  var element = popup.getElement();
   var coordinate = evt.getCoordinate();
-  popup.getElement().innerHTML =
-      'Welcome to ol3. The location you clicked was<br>' +
-      ol.Coordinate.toStringHDMS(ol.projection.transform(
-          coordinate, 'EPSG:3857', 'EPSG:4326'));
+  var hdms = ol.Coordinate.toStringHDMS(ol.projection.transform(
+      coordinate, 'EPSG:3857', 'EPSG:4326'));
+
+  $(element).popover('destroy');
   popup.setPosition(coordinate);
+  $(element).popover({
+    placement: 'top',
+    animation: false,
+    html: true,
+    content: '<p>The location you clicked was:</p><code>' + hdms + '</code>'
+  });
+  $(element).popover('show');
 });

From f806ac580776bdc8c181f150f49bdf805623518a Mon Sep 17 00:00:00 2001
From: Frederic Junod <frederic.junod@camptocamp.com>
Date: Thu, 4 Apr 2013 16:08:45 +0200
Subject: [PATCH 2/4] Use map.on instead of map.addEventListener

---
 examples/overlay.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/overlay.js b/examples/overlay.js
index ab43405943..4b2bbe1348 100644
--- a/examples/overlay.js
+++ b/examples/overlay.js
@@ -35,7 +35,7 @@ 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();
   var hdms = ol.Coordinate.toStringHDMS(ol.projection.transform(

From ea97c8687ce7fd46f9f8773080952fa953cb8ef1 Mon Sep 17 00:00:00 2001
From: Frederic Junod <frederic.junod@camptocamp.com>
Date: Fri, 5 Apr 2013 08:59:56 +0200
Subject: [PATCH 3/4] Update overlay example tags and doc

---
 examples/overlay.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/examples/overlay.html b/examples/overlay.html
index 9726befafd..fd2fedb2a8 100644
--- a/examples/overlay.html
+++ b/examples/overlay.html
@@ -49,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>

From 73791040c13d6c594c9775e882498d88384b176b Mon Sep 17 00:00:00 2001
From: Frederic Junod <frederic.junod@camptocamp.com>
Date: Fri, 5 Apr 2013 09:13:33 +0200
Subject: [PATCH 4/4] Quote object keys to prevent renaming in
 ADVANCED_OPTIMIZATIONS mode

---
 examples/overlay.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/examples/overlay.js b/examples/overlay.js
index 4b2bbe1348..5d3ad48ca7 100644
--- a/examples/overlay.js
+++ b/examples/overlay.js
@@ -43,11 +43,12 @@ map.on('click', function(evt) {
 
   $(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>'
+    'placement': 'top',
+    'animation': false,
+    'html': true,
+    'content': '<p>The location you clicked was:</p><code>' + hdms + '</code>'
   });
   $(element).popover('show');
 });