diff --git a/examples/popup.html b/examples/popup.html new file mode 100644 index 0000000000..74c215e656 --- /dev/null +++ b/examples/popup.html @@ -0,0 +1,110 @@ + + + + + + + + + + + + Popup 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, 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. +

+
+
overlay, popup, mapquest, openaerial
+
+ +
+ +
+ + + + + + diff --git a/examples/popup.js b/examples/popup.js new file mode 100644 index 0000000000..f291751b8b --- /dev/null +++ b/examples/popup.js @@ -0,0 +1,69 @@ +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.TileJSON'); + + +var layer = new ol.layer.TileLayer({ + 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({ + layers: [layer], + target: 'map', + view: new ol.View2D({ + center: [0, 0], + zoom: 2 + }) +}); + + +/** + * Elements that make up the popup. + */ +var container = document.getElementById('popup'); +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.display = 'none'; + closer.blur(); + 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 = '

You clicked here:

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