From 53ecc8edb61667f2b48845a967e693bf74526f18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Mon, 2 Dec 2013 13:21:39 +0100 Subject: [PATCH] Add popup back to icon example --- examples/icon.html | 6 +++++- examples/icon.js | 32 ++++++++++++++++++++++++++++++++ 2 files changed, 37 insertions(+), 1 deletion(-) diff --git a/examples/icon.html b/examples/icon.html index f9c2d645bc..9a0bf9b5c5 100644 --- a/examples/icon.html +++ b/examples/icon.html @@ -13,6 +13,9 @@ #map { position: relative; } + #popup { + padding-bottom: 24px; + } @@ -30,6 +33,7 @@
+
@@ -42,7 +46,7 @@

See the icon.js source to see how this is done.

-
vector, style, icon, marker
+
vector, style, icon, marker, popup
diff --git a/examples/icon.js b/examples/icon.js index 97ccd1d67f..bc26384290 100644 --- a/examples/icon.js +++ b/examples/icon.js @@ -1,4 +1,6 @@ goog.require('ol.Map'); +goog.require('ol.Overlay'); +goog.require('ol.OverlayPositioning'); goog.require('ol.RendererHint'); goog.require('ol.View2D'); goog.require('ol.format.GeoJSON'); @@ -54,3 +56,33 @@ var map = new ol.Map({ zoom: 3 }) }); + +var element = document.getElementById('popup'); + +var popup = new ol.Overlay({ + element: element, + positioning: ol.OverlayPositioning.BOTTOM_CENTER, + stopEvent: false +}); +map.addOverlay(popup); + +// display popup on click +map.on('singleclick', function(evt) { + var feature; + map.forEachFeatureAtPixel(evt.getPixel(), function(f) { + feature = f; + }); + if (feature) { + var geometry = feature.getGeometry(); + var coord = geometry.getCoordinates(); + popup.setPosition(coord); + $(element).popover({ + 'placement': 'top', + 'html': true, + 'content': feature.get('name') + }); + $(element).popover('show'); + } else { + $(element).popover('destroy'); + } +});