Adding popup to full-screen example

examples/full-screen.js

@@ -3,6 +3,7 @@ goog.require('goog.debug.Logger');
 goog.require('goog.debug.Logger.Level');
 goog.require('ol.Collection');
 goog.require('ol.Coordinate');
+goog.require('ol.CoordinateFormat');
 goog.require('ol.Map');
 goog.require('ol.MapOptions'); // FIXME this should not be required
 goog.require('ol.overlay.Overlay');
@@ -23,9 +24,25 @@ var map = new ol.Map(document.getElementById('map'), {
   layers: new ol.Collection([layer]),
   zoom: 2
 });
+
+// Vienna label
 var vienna = new ol.overlay.Overlay({
   map: map,
   coordinate: ol.Projection.transformWithCodes(
       new ol.Coordinate(16, 48), 'EPSG:4326', 'EPSG:3857'),
   element: document.getElementById('vienna')
 });
+
+// Popup showing the position the user clicked
+var popup = new ol.overlay.Overlay({
+  map: map,
+  element: document.getElementById('popup')
+});
+map.addEventListener('click', function(evt) {
+  var coordinate = evt.getCoordinate();
+  popup.getElement().innerHTML =
+      'Welcome to ol3. The location you clicked was<br>' +
+      ol.CoordinateFormat.hdms(ol.Projection.transformWithCodes(
+          coordinate, 'EPSG:3857', 'EPSG:4326'));
+  popup.setCoordinate(evt.getCoordinate());
+});