[OpenLayers-Commits] r10841 - in sandbox/bjornharrtell/swipe: examples lib lib/OpenLayers/Control

commits-20090109 at openlayers.org commits-20090109 at openlayers.org
Sat Oct 16 09:10:31 EDT 2010


Author: bjornharrtell
Date: 2010-10-16 06:10:31 -0700 (Sat, 16 Oct 2010)
New Revision: 10841

Added:
   sandbox/bjornharrtell/swipe/examples/swipe.html
   sandbox/bjornharrtell/swipe/examples/swipe.js
   sandbox/bjornharrtell/swipe/lib/OpenLayers/Control/Swipe.js
Modified:
   sandbox/bjornharrtell/swipe/lib/OpenLayers.js
Log:
Swipe control and example

Added: sandbox/bjornharrtell/swipe/examples/swipe.html
===================================================================
--- sandbox/bjornharrtell/swipe/examples/swipe.html	                        (rev 0)
+++ sandbox/bjornharrtell/swipe/examples/swipe.html	2010-10-16 13:10:31 UTC (rev 10841)
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>OpenLayers Swipe Control</title>
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+        <link rel="stylesheet" href="../theme/default/google.css" type="text/css">
+        <link rel="stylesheet" href="style.css" type="text/css">
+        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
+        <script src="../lib/OpenLayers.js"></script>
+        <script src="swipe.js"></script>
+    </head>
+    <body onload="init()">
+        <h1 id="title">Swipe Control with Google and OSM </h1>
+        <div id="tags">
+            overlay, baselayer, swipe
+        </div>
+        <p id="shortdesc">
+            Demonstrating the Swipe Control.
+        </p>
+        <div id="map" class="smallmap"></div>
+        
+        <ul id="controlToggle">
+            <li>
+                <input type="checkbox" name="swipe" value="none" id="swipe"
+                       onclick="toggleControl(this);""/>
+                <label for="swipe">Activate Swipe Control</label>
+            </li>
+        </ul>
+        
+        <div id="docs">
+            <p>
+                The Swipe Control will reveal/hide a target layer right/left side of mouse mouse position on the map.
+            </p><p>
+                See the <a href="swipe.js" target="_blank">
+                swipe.js source</a> how the Swipe Control is used.
+            </p>
+        </div>
+    </body>
+</html>


Property changes on: sandbox/bjornharrtell/swipe/examples/swipe.html
___________________________________________________________________
Added: svn:mime-type
   + text/html
Added: svn:keywords
   + Id URL
Added: svn:eol-style
   + native

Added: sandbox/bjornharrtell/swipe/examples/swipe.js
===================================================================
--- sandbox/bjornharrtell/swipe/examples/swipe.js	                        (rev 0)
+++ sandbox/bjornharrtell/swipe/examples/swipe.js	2010-10-16 13:10:31 UTC (rev 10841)
@@ -0,0 +1,29 @@
+var map;
+var swipe;
+
+function init() {
+
+    map = new OpenLayers.Map({
+        div : "map",
+        allOverlays : true
+    });
+
+    var osm = new OpenLayers.Layer.OSM();
+    var gmap = new OpenLayers.Layer.Google("Google Streets");
+
+    map.addLayers([ osm, gmap ]);
+
+    swipe = new OpenLayers.Control.Swipe(osm);
+
+    map.addControl(swipe);
+
+    map.setCenter(new OpenLayers.LonLat(10.2, 48.9).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()), 9);
+}
+
+function toggleControl(element) {
+    if (element.checked) {
+        swipe.activate();
+    } else {
+        swipe.deactivate();
+    }
+}


Property changes on: sandbox/bjornharrtell/swipe/examples/swipe.js
___________________________________________________________________
Added: svn:mime-type
   + text/plain

Added: sandbox/bjornharrtell/swipe/lib/OpenLayers/Control/Swipe.js
===================================================================
--- sandbox/bjornharrtell/swipe/lib/OpenLayers/Control/Swipe.js	                        (rev 0)
+++ sandbox/bjornharrtell/swipe/lib/OpenLayers/Control/Swipe.js	2010-10-16 13:10:31 UTC (rev 10841)
@@ -0,0 +1,67 @@
+/**
+ * @requires OpenLayers/Control.js
+ */
+
+/**
+ * Class: OpenLayers.Control.Swipe
+ * 
+ * Inherits from: - <OpenLayers.Control>
+ */
+OpenLayers.Control.Swipe = OpenLayers.Class(OpenLayers.Control, {
+    map: null,
+    layer: null,
+    layerContainerDiv: null,
+    div: null,
+    
+    /**
+     * Property: type {OpenLayers.Control.TYPES}
+     */
+    type : OpenLayers.Control.TYPE_TOOL,
+
+    /**
+     * Constructor: OpenLayers.Control.Swipe
+     * 
+     * Parameters:
+     * layer - {OpenLayers.Layer}
+     * options - {Object} An optional object whose properties will be used to extend the control.
+     */
+    initialize : function(layer, options) {
+        this.map = layer.map;
+        this.layer = layer;
+        this.div = this.layer.div;
+        this.layerContainerDiv = this.layer.map.layerContainerDiv;
+
+        OpenLayers.Control.prototype.initialize.apply(this, [ options ]);
+    },
+
+    activate : function() {
+        var activated = OpenLayers.Control.prototype.activate.call(this);
+        if (activated) {
+            this.map.events.on({
+                mousemove : this.onMousemove,
+                scope : this
+            });
+        }
+    },
+
+    deactivate : function() {
+        var deactivated = OpenLayers.Control.prototype.deactivate.call(this);
+
+        if (deactivated) {
+        	this.div.style.clip = '';
+        	
+            this.map.events.un({
+                mousemove : this.onMousemove,
+                scope : this
+            });
+        }
+    },
+
+    onMousemove : function(e) {
+        var offset = (e.clientX - 20) - this.layerContainerDiv.offsetLeft;
+
+        this.div.style.clip = 'rect(0px, '+ this.map.getSize().w +'px, '+ this.map.getSize().h +'px, ' + offset + 'px)';
+    },
+
+    CLASS_NAME : "OpenLayers.Control.Swipe"
+});


Property changes on: sandbox/bjornharrtell/swipe/lib/OpenLayers/Control/Swipe.js
___________________________________________________________________
Added: svn:mime-type
   + text/plain

Modified: sandbox/bjornharrtell/swipe/lib/OpenLayers.js
===================================================================
--- sandbox/bjornharrtell/swipe/lib/OpenLayers.js	2010-10-16 12:43:16 UTC (rev 10840)
+++ sandbox/bjornharrtell/swipe/lib/OpenLayers.js	2010-10-16 13:10:31 UTC (rev 10841)
@@ -159,6 +159,7 @@
             "OpenLayers/Control/ScaleLine.js",
             "OpenLayers/Control/Snapping.js",
             "OpenLayers/Control/Split.js",
+            "OpenLayers/Control/Swipe.js",
             "OpenLayers/Control/LayerSwitcher.js",
             "OpenLayers/Control/DrawFeature.js",
             "OpenLayers/Control/DragFeature.js",



More information about the Commits mailing list