ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add popup back to icon example

Browse Source
This commit is contained in:
Éric Lemoine
2013-12-02 13:21:39 +01:00
parent a1e1393f44
commit 53ecc8edb6
2 changed files with 37 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/icon.html
+5 -1
View File
@@ -13,6 +13,9 @@
#map { #map {
position: relative; position: relative;
} }
#popup {
padding-bottom: 24px;
}
</style> </style>
</head> </head>
<body> <body>
@@ -30,6 +33,7 @@
<div class="row-fluid"> <div class="row-fluid">
<div class="span12"> <div class="span12">
<div id="map" class="map"> <div id="map" class="map">
<div id="popup"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -42,7 +46,7 @@
<div id="docs"> <div id="docs">
<p>See the <a href="icon.js" target="_blank">icon.js source</a> to see how this is done.</p> <p>See the <a href="icon.js" target="_blank">icon.js source</a> to see how this is done.</p>
</div> </div>
<div id="tags">vector, style, icon, marker</div> <div id="tags">vector, style, icon, marker, popup</div>
</div> </div>
</div> </div>
examples/icon.js
+32
View File
@@ -1,4 +1,6 @@
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.Overlay');
goog.require('ol.OverlayPositioning');
goog.require('ol.RendererHint'); goog.require('ol.RendererHint');
goog.require('ol.View2D'); goog.require('ol.View2D');
goog.require('ol.format.GeoJSON'); goog.require('ol.format.GeoJSON');
@@ -54,3 +56,33 @@ var map = new ol.Map({
zoom: 3 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');
}
});