From 163737d3de6f9702bf049ce6ca1500315ba3638b Mon Sep 17 00:00:00 2001 From: ahocevar Date: Fri, 28 Sep 2012 16:46:59 +0200 Subject: [PATCH] Adding popup to full-screen example --- examples/full-screen.html | 110 +++++++++++++++++++++++++++----------- examples/full-screen.js | 17 ++++++ 2 files changed, 95 insertions(+), 32 deletions(-) diff --git a/examples/full-screen.html b/examples/full-screen.html index f93bdbffa8..e3566d3709 100644 --- a/examples/full-screen.html +++ b/examples/full-screen.html @@ -1,34 +1,80 @@ - + - - - - - ol3 full-screen demo - - -
-
Vienna
-
- - + + + + + ol3 full-screen demo + + +
+ + Vienna + + +
+ + diff --git a/examples/full-screen.js b/examples/full-screen.js index 979290ea66..d321cc865f 100644 --- a/examples/full-screen.js +++ b/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
' + + ol.CoordinateFormat.hdms(ol.Projection.transformWithCodes( + coordinate, 'EPSG:3857', 'EPSG:4326')); + popup.setCoordinate(evt.getCoordinate()); +});