Update overlay example with center positioning

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>

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);