From 7f6637631586f15c1914b34144e98ce74f0a2b71 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Wed, 28 Aug 2013 12:28:47 -0600 Subject: [PATCH 1/6] Basic popup example --- examples/popup.html | 97 +++++++++++++++++++++++++++++++++++++++++++++ examples/popup.js | 64 ++++++++++++++++++++++++++++++ 2 files changed, 161 insertions(+) create mode 100644 examples/popup.html create mode 100644 examples/popup.js diff --git a/examples/popup.html b/examples/popup.html new file mode 100644 index 0000000000..54fa9b658d --- /dev/null +++ b/examples/popup.html @@ -0,0 +1,97 @@ + + + + + + + + + + + + Overlay example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
    • +
+
+
+
+ +
+ +
+
+
+ +
+
+
+ +
+ +
+

Popup example

+

Uses an overlay to create a popup.

+
+

+ Click on the map to get a popup. The popup is composed of a few basic elements: a container, a close button, a place for the content, and an element to represent the little arrow at the bottom. To anchor the popup to the map, an ol.Overlay is created with the popup container. A listener is registered for the map's click event to render the popup, and another listener is set as the click handler for the close button to hide the popup. +

+

+ See the popup.js source to see how this is done. +

+
+
overlay, popup, mapquest, openaerial
+
+ +
+ +
+ + + + + + diff --git a/examples/popup.js b/examples/popup.js new file mode 100644 index 0000000000..70b08a3344 --- /dev/null +++ b/examples/popup.js @@ -0,0 +1,64 @@ +goog.require('ol.Map'); +goog.require('ol.Overlay'); +goog.require('ol.View2D'); +goog.require('ol.coordinate'); +goog.require('ol.layer.TileLayer'); +goog.require('ol.proj'); +goog.require('ol.source.MapQuestOpenAerial'); + + +var layer = new ol.layer.TileLayer({ + source: new ol.source.MapQuestOpenAerial() +}); + +var map = new ol.Map({ + layers: [layer], + target: 'map', + view: new ol.View2D({ + center: [0, 0], + zoom: 2 + }) +}); + + +/** + * Elements that make up the popup. + */ +var container = document.getElementById('popup-container'); +var content = document.getElementById('popup-content'); +var closer = document.getElementById('popup-closer'); + + +/** + * Add a click handler to hide the popup. + * @return {boolean} Don't follow the href. + */ +closer.onclick = function() { + container.style.visibility = 'hidden'; + return false; +}; + + +/** + * Create an overlay to anchor the popup to the map. + */ +var overlay = new ol.Overlay({ + map: map, + element: container +}); + + +/** + * Add a click handler to the map to render the popup. + */ +map.on('click', function(evt) { + var coordinate = evt.getCoordinate(); + var hdms = ol.coordinate.toStringHDMS(ol.proj.transform( + coordinate, 'EPSG:3857', 'EPSG:4326')); + + overlay.setPosition(coordinate); + content.innerHTML = '

The location you clicked was:

' + hdms + + ''; + container.style.visibility = 'visible'; + +}); From 0f34bbc161dffbeb8c3587e8aaf161b777e1e539 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Wed, 28 Aug 2013 12:35:23 -0600 Subject: [PATCH 2/6] Adding some variety to the examples --- examples/popup.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/examples/popup.js b/examples/popup.js index 70b08a3344..4d966a9b02 100644 --- a/examples/popup.js +++ b/examples/popup.js @@ -4,11 +4,15 @@ goog.require('ol.View2D'); goog.require('ol.coordinate'); goog.require('ol.layer.TileLayer'); goog.require('ol.proj'); -goog.require('ol.source.MapQuestOpenAerial'); +goog.require('ol.source.TileJSON'); var layer = new ol.layer.TileLayer({ - source: new ol.source.MapQuestOpenAerial() + source: new ol.source.TileJSON({ + url: 'http://api.tiles.mapbox.com/v3/' + + 'mapbox.natural-earth-hypso-bathy.jsonp', + crossOrigin: 'anonymous' + }) }); var map = new ol.Map({ From c34e582f1a7d3f39f12ea63582b2b522c84c3013 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Wed, 28 Aug 2013 12:36:00 -0600 Subject: [PATCH 3/6] Toggle display instead of visibility for proper click handling --- examples/popup.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/popup.js b/examples/popup.js index 4d966a9b02..dfaee5651d 100644 --- a/examples/popup.js +++ b/examples/popup.js @@ -38,7 +38,7 @@ var closer = document.getElementById('popup-closer'); * @return {boolean} Don't follow the href. */ closer.onclick = function() { - container.style.visibility = 'hidden'; + container.style.display = 'none'; return false; }; @@ -63,6 +63,6 @@ map.on('click', function(evt) { overlay.setPosition(coordinate); content.innerHTML = '

The location you clicked was:

' + hdms + ''; - container.style.visibility = 'visible'; + container.style.display = 'block'; }); From b4df86a17eac3e654601d2332580653c2c7081c4 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Wed, 28 Aug 2013 14:21:07 -0600 Subject: [PATCH 4/6] Remove unused style --- examples/popup.html | 7 ------- 1 file changed, 7 deletions(-) diff --git a/examples/popup.html b/examples/popup.html index 54fa9b658d..2a6ba466f7 100644 --- a/examples/popup.html +++ b/examples/popup.html @@ -9,13 +9,6 @@ - Overlay example + Popup example From 03616096311a7c4aa5c30557afc1637f278367af Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Wed, 28 Aug 2013 15:25:05 -0600 Subject: [PATCH 6/6] Remove separate arrow element --- examples/popup.html | 52 +++++++++++++++++++++++++++++++-------------- examples/popup.js | 5 +++-- 2 files changed, 39 insertions(+), 18 deletions(-) diff --git a/examples/popup.html b/examples/popup.html index 3bc9fd7cfa..74c215e656 100644 --- a/examples/popup.html +++ b/examples/popup.html @@ -9,26 +9,47 @@ Popup example @@ -54,10 +75,9 @@
-
@@ -70,7 +90,7 @@

Uses an overlay to create a popup.

- Click on the map to get a popup. The popup is composed of a few basic elements: a container, a close button, a place for the content, and an element to represent the little arrow at the bottom. To anchor the popup to the map, an ol.Overlay is created with the popup container. A listener is registered for the map's click event to render the popup, and another listener is set as the click handler for the close button to hide the popup. + Click on the map to get a popup. The popup is composed of a few basic elements: a container, a close button, and a place for the content. To anchor the popup to the map, an ol.Overlay is created with the popup container. A listener is registered for the map's click event to render the popup, and another listener is set as the click handler for the close button to hide the popup.

See the popup.js source to see how this is done. diff --git a/examples/popup.js b/examples/popup.js index dfaee5651d..f291751b8b 100644 --- a/examples/popup.js +++ b/examples/popup.js @@ -28,7 +28,7 @@ var map = new ol.Map({ /** * Elements that make up the popup. */ -var container = document.getElementById('popup-container'); +var container = document.getElementById('popup'); var content = document.getElementById('popup-content'); var closer = document.getElementById('popup-closer'); @@ -39,6 +39,7 @@ var closer = document.getElementById('popup-closer'); */ closer.onclick = function() { container.style.display = 'none'; + closer.blur(); return false; }; @@ -61,7 +62,7 @@ map.on('click', function(evt) { coordinate, 'EPSG:3857', 'EPSG:4326')); overlay.setPosition(coordinate); - content.innerHTML = '

The location you clicked was:

' + hdms + + content.innerHTML = '

You clicked here:

' + hdms + ''; container.style.display = 'block';