From e9ac7cef83655f10ae624c61e821e56272724da8 Mon Sep 17 00:00:00 2001
From: Bruno Binet <bruno.binet@gmail.com>
Date: Mon, 7 Oct 2013 16:44:02 +0200
Subject: [PATCH] Update overlay example with center positioning

---
 examples/overlay.html |  9 +++++++++
 examples/overlay.js   | 14 ++++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/examples/overlay.html b/examples/overlay.html
index c5f6c7c515..6acde92fb1 100644
--- a/examples/overlay.html
+++ b/examples/overlay.html
@@ -9,6 +9,14 @@
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
     <style type="text/css">
+      #marker {
+        width: 20px;
+        height: 20px;
+        border: 1px solid #088;
+        border-radius: 10px;
+        background-color: #0FF;
+        opacity: 0.5;
+      }
       #vienna {
         text-decoration: none;
         color: white;
@@ -60,6 +68,7 @@
     <div style="display: none;">
       <!-- Clickable label for Vienna -->
       <a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>
+      <div id="marker" title="Marker"></div>
       <!-- Popup -->
       <div id="popup" title="Welcome to ol3"></div>
     </div>
diff --git a/examples/overlay.js b/examples/overlay.js
index 9036bb59f4..1e0d21fd19 100644
--- a/examples/overlay.js
+++ b/examples/overlay.js
@@ -1,5 +1,6 @@
 goog.require('ol.Map');
 goog.require('ol.Overlay');
+goog.require('ol.OverlayPositioning');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.coordinate');
@@ -22,10 +23,19 @@ var map = new ol.Map({
   })
 });
 
+var pos = ol.proj.transform([16.3725, 48.208889], 'EPSG:4326', 'EPSG:3857');
+
+// Vienna marker
+var marker = new ol.Overlay({
+  position: pos,
+  positioning: ol.OverlayPositioning.CENTER_CENTER,
+  element: document.getElementById('marker')
+});
+map.addOverlay(marker);
+
 // Vienna label
 var vienna = new ol.Overlay({
-  position: ol.proj.transform(
-      [16.3725, 48.208889], 'EPSG:4326', 'EPSG:3857'),
+  position: pos,
   element: document.getElementById('vienna')
 });
 map.addOverlay(vienna);