blob: a59dfdefb95d4c6fd9ad6346493f5fa31b158c0a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
<!DOCTYPE HTML>
<html>
<head>
<title>Page Position Test</title>
<link rel="stylesheet" href="../../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="../../examples/style.css" type="text/css" />
<style type="text/css">
#mapwrap {
border: 10px solid red;
width: 532px;
height: 276px;
}
#map {
position: absolute;
border: 10px solid #ccc;
width: 512px;
height: 256px;
}
#controlToggle li {
list-style: none;
}
p {
width: 512px;
}
#scrollspace {
height: 500px;
}
</style>
<script src="../../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, drawControls;
function init(){
map = new OpenLayers.Map('map');
var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});
var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
map.addLayers([wmsLayer, lineLayer]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
drawControl = new OpenLayers.Control.DrawFeature(lineLayer,
OpenLayers.Handler.Path);
map.addControl(drawControl);
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
document.getElementById('noneToggle').checked = true;
}
function toggleControl(element) {
var control = drawControl;
if(element.value == "draw" && element.checked) {
control.activate();
} else {
control.deactivate();
}
}
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers Page Position Test</h1>
<p id="shortdesc">
Test if borders and scroll position cause unwanted offsets on the
mouse positions reported by map events.
</p>
<div id="mapwrap">
<div id="map"></div>
</div>
<ul id="controlToggle">
<li>
<input type="radio" name="type" value="none" id="noneToggle"
onclick="toggleControl(this);" checked="checked" />
<label for="noneToggle">navigate</label>
</li>
<li>
<input type="radio" name="type" value="draw" id="lineToggle" onclick="toggleControl(this);" />
<label for="lineToggle">draw line</label>
</li>
</ul>
<div id="docs">
<p>This map's div has a border and absolute positioning, wrapped
by a container which also has a border. The page is also
scrollable. Neither the borders nor scrolling the page should
result in unwanted offsets on pixel positions reported by map
events.</p>
<p>With the line drawing control active, click on the map to add a
point. The point should be drawn at the exact mouse location.</p>
<p>With the navigation control active, shift-drag a zoom rectangle.
The rectangle's corner should align exactly with the mouse
cursor.</p>
<p>Scroll the page and repeat the above tests.</p>
<div id="scrollspace"><div>
</div>
</body>
</html>
|
