From 7f6637631586f15c1914b34144e98ce74f0a2b71 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Wed, 28 Aug 2013 12:28:47 -0600 Subject: [PATCH] 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'; + +});