[OpenLayers-Commits] r7360 - sandbox/camptocamp/getmouseposition/examples
commits at openlayers.org
commits at openlayers.org
Mon Jun 16 07:56:46 EDT 2008
Author: pgiraud
Date: 2008-06-16 07:56:46 -0400 (Mon, 16 Jun 2008)
New Revision: 7360
Added:
sandbox/camptocamp/getmouseposition/examples/getmouseposition.html
Log:
the html example to show possible enhancements in getMousePosition method
Added: sandbox/camptocamp/getmouseposition/examples/getmouseposition.html
===================================================================
--- sandbox/camptocamp/getmouseposition/examples/getmouseposition.html (rev 0)
+++ sandbox/camptocamp/getmouseposition/examples/getmouseposition.html 2008-06-16 11:56:46 UTC (rev 7360)
@@ -0,0 +1,152 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>OpenLayers Basic Single WMS Example</title>
+ <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+ <link rel="stylesheet" href="style.css" type="text/css" />
+ <style type="text/css">
+ #map {
+ width:512px;
+ height: 256px;
+ }
+ .container {
+ position: relative;
+ left: 2px;
+ top: 2px;
+ border: 1px solid red;
+ width: 512px;
+ height: 256px;
+ }
+ </style>
+ <script src="../ext/adapter/ext/ext-base.js"></script>
+ <script src="../ext/ext-all.js"></script>
+ <link rel="stylesheet" href="../ext/resources/css/ext-all.css" type="text/css" />
+
+
+ <script src="../lib/OpenLayers.js"></script>
+
+
+ <script type="text/javascript">
+ function init() {
+
+
+ map = new OpenLayers.Map( 'map' );
+ layer = new OpenLayers.Layer.WMS( "Ground",
+ "http://labs.metacarta.com/wms/vmap0",
+ {layers: 'ground_02'} );
+ map.addLayer(layer);
+
+ layer = new OpenLayers.Layer.WMS( "Coastline",
+ "http://labs.metacarta.com/wms/vmap0",
+ {layers: 'coastline_02', transparent: true} );
+ map.addLayer(layer);
+
+ layer = new OpenLayers.Layer.WMS( "Depth contour",
+ "http://labs.metacarta.com/wms/vmap0",
+ {layers: 'depthcontour', transparent: true} );
+ map.addLayer(layer);
+
+ map.setCenter(new OpenLayers.LonLat(10, 40), 5);
+
+ map.addControl(new OpenLayers.Control.MousePosition());
+ map.addControl(new OpenLayers.Control.LayerSwitcher());
+ }
+
+ var old; // the getMousePosition method as it comes with API
+ var changed = false;
+ function changeMethod() {
+ if (!changed) {
+ old = OpenLayers.Events.prototype.getMousePosition;
+ OpenLayers.Events.prototype.getMousePosition = function (evt) {
+ if (!this.element.scrolls) {
+ this.element.scrolls = [];
+ this.element.scrolls[0] = (document.documentElement.scrollLeft
+ || document.body.scrollLeft);
+ this.element.scrolls[1] = (document.documentElement.scrollTop
+ || document.body.scrollTop);
+ }
+ if (!this.element.lefttop) {
+ this.element.lefttop = [];
+ this.element.lefttop[0] = (document.documentElement.clientLeft || 0);
+ this.element.lefttop[1] = (document.documentElement.clientTop || 0);
+ }
+ if (!this.element.offsets) {
+ this.element.offsets = OpenLayers.Util.pagePosition(this.element);
+ this.element.offsets[0] += (document.documentElement.scrollLeft
+ || document.body.scrollLeft);
+ this.element.offsets[1] += (document.documentElement.scrollTop
+ || document.body.scrollTop);
+ }
+ return new OpenLayers.Pixel(
+ (evt.clientX + this.element.scrolls[0]) - this.element.offsets[0]
+ - this.element.lefttop[0],
+ (evt.clientY + this.element.scrolls[1]) - this.element.offsets[1]
+ - this.element.lefttop[1]
+ );
+ }
+ $('button').innerHTML = 'change getMousePosition method back';
+ changed = true;
+ } else {
+ OpenLayers.Events.prototype.getMousePosition = old;
+ $('button').innerHTML = 'test new style getMousePosition';
+ changed = false;
+ }
+ }
+
+ </script>
+ </head>
+ <body onload="init()">
+ <div id="shortdesc" >
+ This example tries to show how we could enhance the panning performance.<br />
+ In this page, the map div is encapsulated in a complex inheritance (several ancestors), and it seems to slow down the panning because of the OpenLayers.Events.getMousePosition implementation. This example tries to demonstrate that with a different implementation, we could gain a lot.<br />
+ To see this, you can drag the map around, then click on the button below, drag the map again and see the difference.
+ </div>
+ <button id="button" onclick="changeMethod();" >test new style getMousePosition</button>
+ <div class="container">
+ <div class="container">
+ <div class="container">
+ <div class="container">
+ <div class="container">
+ <div class="container">
+ <div class="container">
+ <div class="container">
+ <div class="container">
+ <div class="container">
+ <div class="container">
+ <div class="container">
+ <div class="container">
+ <div class="container">
+ <div class="container">
+ <div class="container">
+ <div class="container">
+ <div class="container">
+ <div class="container">
+ <div class="container">
+ <div class="container">
+ <div class="container">
+ <div class="container">
+ <div id="map"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
More information about the Commits
mailing list