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

Replace ol.overlay.Overlay with ol.AnchoredElement

Browse Source 
This commit adds several features:
- rename of class to better reflect its behaviour
- full ol.Object support
- integration with postrender event for integration with animations and
  render loop
- minimised DOM modifications
- more precise positioning
- element placed in DIV to avoid modifications to user-supplied element
- correctly handle changes to the positioning property
This commit is contained in:
Tom Payne
2013-01-22 14:37:13 +01:00
parent 4ab09d6df2
commit dda51ecec2
7 changed files with 341 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
examples/overlay-and-popup.html → examples/anchored-elements.html
View File

@@ -80,7 +80,7 @@
margin-left: -13px;
}
</style>
<title>Overlay example</title>
<title>Anchored elements example</title>
</head>
<body>
<div id="map">
@@ -89,16 +89,16 @@
<!-- Popup -->
<div class="overlay arrow_box" id="popup"></div>
<div id="text">
<h1 id="title">Overlay example</h1>
<div id="shortdesc">Demonstrates Overlays.</div>
<h1 id="title">Anchored elements example</h1>
<div id="shortdesc">Demonstrates anchored elements.</div>
<div id="docs">
<p>See the
<a href="overlay-and-popup.js" target="_blank">overlay-and-popup.js source</a>
<a href="anchored-elements.js" target="_blank">anchored-elements.js source</a>
to see how this is done.</p>
</div>
</div>
</div>
<div id="tags">overlay, popup, mapquest, openaerial</div>
<script src="loader.js?id=overlay-and-popup" type="text/javascript"></script>
<div id="tags">anchored elements, overlay, popup, mapquest, openaerial</div>
<script src="loader.js?id=anchored-elements" type="text/javascript"></script>
</body>
</html>

10
examples/overlay-and-popup.js → examples/anchored-elements.js
View File

@@ -1,12 +1,12 @@
goog.require('goog.debug.Console');
goog.require('goog.debug.Logger');
goog.require('goog.debug.Logger.Level');
goog.require('ol.AnchoredElement');
goog.require('ol.Collection');
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHints');
goog.require('ol.View2D');
goog.require('ol.overlay.Overlay');
goog.require('ol.source.MapQuestOpenAerial');
@@ -31,15 +31,15 @@ var map = new ol.Map({
});
// Vienna label
var vienna = new ol.overlay.Overlay({
var vienna = new ol.AnchoredElement({
map: map,
coordinate: ol.Projection.transformWithCodes(
position: ol.Projection.transformWithCodes(
new ol.Coordinate(16.3725, 48.208889), 'EPSG:4326', 'EPSG:3857'),
element: document.getElementById('vienna')
});
// Popup showing the position the user clicked
var popup = new ol.overlay.Overlay({
var popup = new ol.AnchoredElement({
map: map,
element: document.getElementById('popup')
});
@@ -49,5 +49,5 @@ map.addEventListener('click', function(evt) {
'Welcome to ol3. The location you clicked was<br>' +
ol.Coordinate.toStringHDMS(ol.Projection.transformWithCodes(
coordinate, 'EPSG:3857', 'EPSG:4326'));
popup.setCoordinate(coordinate);
popup.setPosition(coordinate);
});