Map: change the pan to a cleaner one (thanks to OpenStreetMap website)

7 files changed, 456 insertions, 9 deletions

diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css
index cba308e..71ca07b 100644
--- a/chimere/static/chimere/css/styles.css
+++ b/chimere/static/chimere/css/styles.css
@@ -20,6 +20,7 @@ h2, h3, th, .action li, .action li a,
 }
 
 .action li.ui-state-active a,
+#content .olControlLayerSwitcher,
 .action li li.ui-state-active a{
     color:#333;
 }
@@ -28,9 +29,7 @@ h2, h3, th, .action li, .action li a,
 
 body, h2, h3, th,
 .ui-widget-header,
-.action li.selected, #no-js-message,
-#content .olControlLayerSwitcher .layersDiv,
-#content .olControlLayerSwitcher span{
+.action li.selected, #no-js-message{
     background-color:#449506;
 }
 
@@ -41,6 +40,8 @@ body, h2, h3, th,
 fieldset, .action li, #content,
 #map-footer, #panel, #areas,
 #welcome, #detail, .detail_footer a,
+#content .olControlLayerSwitcher .layersDiv,
+#content .olControlLayerSwitcher span,
 #main-map, .window{
     background-color:#FFF;
 }
@@ -61,11 +62,13 @@ div.warning, .errorlist{
 div.warning,
 #content,
 .action li.selected,
+#content .olControlLayerSwitcher .layersDiv,
 #panel, #map-footer,
 #utils-div{
     border:1px solid #327e04;
 }
 
+
 .errorlist{
     border:1px solid #ff3f3f;
 }
@@ -612,10 +615,11 @@ table.inline-table td input[type=file]{
 }
 
 #content .olControlLayerSwitcher {
-   top: 150px !important;
-   right: auto !important;
-   bottom: auto !important;
-   left: 0 !important;
+    top: 250px !important;
+    right: auto !important;
+    bottom: auto !important;
+    left: 0 !important;
+    font-weight:normal;
 }
 
 
@@ -716,3 +720,84 @@ html > body .media-state {
 .jme-flashbutton-wrapper .media-controls > *:not(.fullscreen) {
     pointer-events: auto;
 }
+
+/*
+ SimplePanZoom
+*/
+
+.olControlSimplePanZoom {
+  top: 10px;
+  right: 10px;
+}
+
+.olControlSimplePanZoom .button {
+  background-image: url('../img/map_sprite.png');
+  position:absolute;
+  background-repeat: no-repeat;
+  cursor:hand;
+  cursor:pointer;
+}
+
+.olControlSimplePanZoom #panup {
+  left:10px;
+  width:25px;
+  height:13px;
+  background-position: -15px -5px;
+}
+
+.olControlSimplePanZoom #pandown {
+  left:10px;
+  top:36px;
+  width:25px;
+  height:15px;
+  background-position: -15px -40px;
+}
+
+.olControlSimplePanZoom #panleft {
+  top:13px;
+  width:25px;
+  height:23px;
+  background-position: -5px -17px;
+}
+
+.olControlSimplePanZoom #panright {
+  top:13px;
+  width:25px;
+  height:23px;
+  left:25px;
+  background-position: -30px -17px;
+}
+
+.olControlSimplePanZoom #zoomin {
+  top:50px;
+  width:25px;
+  height:20px;
+  left:10px;
+  background-position: -15px -61px;
+}
+
+.olControlSimplePanZoom #zoomout {
+  top:210px;
+  width:25px;
+  height:20px;
+  left:10px;
+  background-position: -15px -220px;
+}
+
+.olControlSimplePanZoom #slider {
+  top:75px;
+  width:25px;
+  height:10px;
+  left:10px;
+  -webkit-transition:top 100ms linear;
+  background-position: -77px -58px;
+  pointer:move;
+  cursor:move;
+}
+.olControlSimplePanZoom #zoombar {
+  top:70px;
+  width:25px;
+  height:140px;
+  left:10px;
+  background-position: -15px -80px;
+}
diff --git a/chimere/static/chimere/img/layer-switcher-maximize.png b/chimere/static/chimere/img/layer-switcher-maximize.png
index 8b1e686..80dd651 100644
--- a/chimere/static/chimere/img/layer-switcher-maximize.png
+++ b/chimere/static/chimere/img/layer-switcher-maximize.png
diff --git a/chimere/static/chimere/img/layer-switcher-minimize.png b/chimere/static/chimere/img/layer-switcher-minimize.png
index e80bf21..9321717 100644
--- a/chimere/static/chimere/img/layer-switcher-minimize.png
+++ b/chimere/static/chimere/img/layer-switcher-minimize.png
diff --git a/chimere/static/chimere/img/map_sprite.png b/chimere/static/chimere/img/map_sprite.png
new file mode 100644
index 0000000..0635a41
--- /dev/null
+++ b/chimere/static/chimere/img/map_sprite.png
diff --git a/chimere/static/chimere/js/SimplePanZoom.js b/chimere/static/chimere/js/SimplePanZoom.js
new file mode 100644
index 0000000..e42dc54
--- /dev/null
+++ b/chimere/static/chimere/js/SimplePanZoom.js
@@ -0,0 +1,362 @@
+/* Copyright (c) 2006-2012 by OpenLayers Contributors (see authors.txt for 
+ * full list of contributors). Published under the 2-clause BSD license.
+ * See license.txt in the OpenLayers distribution or repository for the
+ * full text of the license. */
+
+
+/**
+ * @requires OpenLayers/Control/PanZoom.js
+ */
+
+/**
+ * Class: OpenLayers.Control.PanZoomBar
+ * The PanZoomBar is a visible control composed of a
+ * <OpenLayers.Control.PanPanel> and a <OpenLayers.Control.ZoomBar>. 
+ * By default it is displayed in the upper left corner of the map as 4
+ * directional arrows above a vertical slider.
+ *
+ * Inherits from:
+ *  - <OpenLayers.Control.PanZoom>
+ */
+OpenLayers.Control.SimplePanZoom = OpenLayers.Class(OpenLayers.Control.PanZoom, {
+
+    /** 
+     * APIProperty: zoomStopWidth
+     */
+    zoomStopWidth: 18,
+
+    /** 
+     * APIProperty: zoomStopHeight
+     */
+    zoomStopHeight: 7,
+
+    /** 
+     * Property: slider
+     */
+    slider: null,
+
+    /** 
+     * Property: sliderEvents
+     * {<OpenLayers.Events>}
+     */
+    sliderEvents: null,
+
+    /** 
+     * Property: zoombarDiv
+     * {DOMElement}
+     */
+    zoombarDiv: null,
+
+    /** 
+     * APIProperty: zoomWorldIcon
+     * {Boolean}
+     */
+    zoomWorldIcon: false,
+
+    /**
+     * APIProperty: panIcons
+     * {Boolean} Set this property to false not to display the pan icons. If
+     * false the zoom world icon is placed under the zoom bar. Defaults to
+     * true.
+     */
+    panIcons: true,
+
+    /**
+     * APIProperty: forceFixedZoomLevel
+     * {Boolean} Force a fixed zoom level even though the map has 
+     *     fractionalZoom
+     */
+    forceFixedZoomLevel: false,
+
+    /**
+     * Property: mouseDragStart
+     * {<OpenLayers.Pixel>}
+     */
+    mouseDragStart: null,
+
+    /**
+     * Property: deltaY
+     * {Number} The cumulative vertical pixel offset during a zoom bar drag.
+     */
+    deltaY: null,
+
+    /**
+     * Property: zoomStart
+     * {<OpenLayers.Pixel>}
+     */
+    zoomStart: null,
+
+    /**
+     * Constructor: OpenLayers.Control.PanZoomBar
+     */ 
+    buttons: null,
+
+    /**
+     * APIMethod: destroy
+     */
+    destroy: function() {
+
+        this._removeZoomBar();
+
+        this.map.events.un({
+            "changebaselayer": this.redraw,
+            "updatesize": this.redraw,
+            scope: this
+        });
+
+        OpenLayers.Control.PanZoom.prototype.destroy.apply(this, arguments);
+
+        delete this.mouseDragStart;
+        delete this.zoomStart;
+    },
+    
+    /**
+     * Method: setMap
+     * 
+     * Parameters:
+     * map - {<OpenLayers.Map>} 
+     */
+    setMap: function(map) {
+        OpenLayers.Control.PanZoom.prototype.setMap.apply(this, arguments);
+        this.map.events.on({
+            "changebaselayer": this.redraw,
+            "updatesize": this.redraw,
+            scope: this
+        });
+    },
+
+    /** 
+     * Method: redraw
+     * clear the div and start over.
+     */
+    redraw: function() {
+        if (this.div !== null) {
+            this.removeButtons();
+            this._removeZoomBar();
+        }  
+        this.draw();
+    },
+    
+    /**
+    * Method: draw 
+    *
+    * Parameters:
+    * px - {<OpenLayers.Pixel>} 
+    */
+    draw: function(px) {
+        // initialize our internal div
+        OpenLayers.Control.prototype.draw.apply(this, arguments);
+        px = this.position.clone();
+
+        // place the controls
+        this.buttons = [];
+        var ids = ['panup', 'panleft', 'panright', 'pandown', 'zoomout', 'zoomin'];
+
+        for (var i = 0; i < ids.length; i++) {
+            var b = document.createElement('div');
+            b.id = ids[i];
+            b.action = ids[i];
+            b.className = 'button olButton';
+            this.div.appendChild(b);
+            this.buttons.push(b);
+        }
+
+        this._addZoomBar();
+        return this.div;
+    },
+
+    /** 
+    * Method: _addZoomBar
+    * 
+    * Parameters:
+    * centered - {<OpenLayers.Pixel>} where zoombar drawing is to start.
+    */
+    _addZoomBar:function() {
+        var id = this.id + "_" + this.map.id;
+        var zoomsToEnd = this.map.getNumZoomLevels() - 1 - this.map.getZoom();
+        var slider = document.createElement('div');
+        slider.id = 'slider';
+        slider.className = 'button';
+        slider.style.cursor = 'move';
+        this.slider = slider;
+        
+        this.sliderEvents = new OpenLayers.Events(this, slider, null, true,
+            { includeXY: true });
+        this.sliderEvents.on({
+            "touchstart": this.zoomBarDown,
+            "touchmove": this.zoomBarDrag,
+            "touchend": this.zoomBarUp,
+            "mousedown": this.zoomBarDown,
+            "mousemove": this.zoomBarDrag,
+            "mouseup": this.zoomBarUp
+        });
+        
+        var height = this.zoomStopHeight * (this.map.getNumZoomLevels());
+        
+        // this is the background image
+        var div = document.createElement('div');
+        div.className = 'button';
+        div.id = 'zoombar';
+        this.zoombarDiv = div;
+        
+        this.div.appendChild(div);
+        this.startTop = 75;
+        this.div.appendChild(slider);
+
+        this.map.events.register("zoomend", this, this.moveZoomBar);
+    },
+    
+    /**
+     * Method: _removeZoomBar
+     */
+    _removeZoomBar: function() {
+        this.sliderEvents.un({
+            "touchstart": this.zoomBarDown,
+            "touchmove": this.zoomBarDrag,
+            "touchend": this.zoomBarUp,
+            "mousedown": this.zoomBarDown,
+            "mousemove": this.zoomBarDrag,
+            "mouseup": this.zoomBarUp
+        });
+        this.sliderEvents.destroy();
+        
+        this.div.removeChild(this.zoombarDiv);
+        this.zoombarDiv = null;
+        this.div.removeChild(this.slider);
+        this.slider = null;
+        
+        this.map.events.unregister("zoomend", this, this.moveZoomBar);
+    },
+    
+    /**
+     * Method: onButtonClick
+     *
+     * Parameters:
+     * evt - {Event}
+     */
+    onButtonClick: function(evt) {
+        OpenLayers.Control.PanZoom.prototype.onButtonClick.apply(this, arguments);
+        if (evt.buttonElement === this.zoombarDiv) {
+            var levels = evt.buttonXY.y / this.zoomStopHeight;
+            if (this.forceFixedZoomLevel || !this.map.fractionalZoom) {
+                levels = Math.floor(levels);
+            }    
+            var zoom = (this.map.getNumZoomLevels() - 1) - levels; 
+            zoom = Math.min(Math.max(zoom, 0), this.map.getNumZoomLevels() - 1);
+            this.map.zoomTo(zoom);
+        }
+    },
+    
+    /**
+     * Method: passEventToSlider
+     * This function is used to pass events that happen on the div, or the map,
+     * through to the slider, which then does its moving thing.
+     *
+     * Parameters:
+     * evt - {<OpenLayers.Event>} 
+     */
+    passEventToSlider:function(evt) {
+        this.sliderEvents.handleBrowserEvent(evt);
+    },
+    
+    /*
+     * Method: zoomBarDown
+     * event listener for clicks on the slider
+     *
+     * Parameters:
+     * evt - {<OpenLayers.Event>} 
+     */
+    zoomBarDown:function(evt) {
+        if (!OpenLayers.Event.isLeftClick(evt) && !OpenLayers.Event.isSingleTouch(evt)) {
+            return;
+        }
+        this.map.events.on({
+            "touchmove": this.passEventToSlider,
+            "mousemove": this.passEventToSlider,
+            "mouseup": this.passEventToSlider,
+            scope: this
+        });
+        this.mouseDragStart = evt.xy.clone();
+        this.zoomStart = evt.xy.clone();
+        this.div.style.cursor = "move";
+        // reset the div offsets just in case the div moved
+        this.zoombarDiv.offsets = null; 
+        OpenLayers.Event.stop(evt);
+    },
+    
+    /*
+     * Method: zoomBarDrag
+     * This is what happens when a click has occurred, and the client is
+     * dragging.  Here we must ensure that the slider doesn't go beyond the
+     * bottom/top of the zoombar div, as well as moving the slider to its new
+     * visual location
+     *
+     * Parameters:
+     * evt - {<OpenLayers.Event>} 
+     */
+    zoomBarDrag: function(evt) {
+        if (this.mouseDragStart !== null) {
+            var deltaY = this.mouseDragStart.y - evt.xy.y;
+            var offsets = OpenLayers.Util.pagePosition(this.zoombarDiv);
+            if ((evt.clientY - offsets[1]) > 0 && 
+                (evt.clientY - offsets[1]) < 140) {
+                var newTop = parseInt(this.slider.style.top, 10) - deltaY;
+                this.slider.style.top = newTop + "px";
+                this.mouseDragStart = evt.xy.clone();
+            }
+            // set cumulative displacement
+            this.deltaY = this.zoomStart.y - evt.xy.y;
+            OpenLayers.Event.stop(evt);
+        }
+    },
+    
+    /*
+     * Method: zoomBarUp
+     * Perform cleanup when a mouseup event is received -- discover new zoom
+     * level and switch to it.
+     *
+     * Parameters:
+     * evt - {<OpenLayers.Event>} 
+     */
+    zoomBarUp: function(evt) {
+        if (!OpenLayers.Event.isLeftClick(evt) && evt.type !== "touchend") {
+            return;
+        }
+        if (this.mouseDragStart) {
+            this.div.style.cursor="";
+            this.map.events.un({
+                "touchmove": this.passEventToSlider,
+                "mouseup": this.passEventToSlider,
+                "mousemove": this.passEventToSlider,
+                scope: this
+            });
+            var zoomLevel = this.map.zoom;
+            if (!this.forceFixedZoomLevel && this.map.fractionalZoom) {
+                zoomLevel += this.deltaY/this.zoomStopHeight;
+                zoomLevel = Math.min(Math.max(zoomLevel, 0), 
+                                     this.map.getNumZoomLevels() - 1);
+            } else {
+                zoomLevel += this.deltaY/this.zoomStopHeight;
+                zoomLevel = Math.max(Math.round(zoomLevel), 0);      
+            }
+            this.map.zoomTo(zoomLevel);
+            this.mouseDragStart = null;
+            this.zoomStart = null;
+            this.deltaY = 0;
+            OpenLayers.Event.stop(evt);
+        }
+    },
+    
+    /*
+    * Method: moveZoomBar
+    * Change the location of the slider to match the current zoom level.
+    */
+    moveZoomBar:function() {
+        var newTop = 
+            ((this.map.getNumZoomLevels()-1) - this.map.getZoom()) * 
+            this.zoomStopHeight + this.startTop;
+        this.slider.style.top = newTop + "px";
+    },    
+    
+    CLASS_NAME: "OpenLayers.Control.SimplePanZoom"
+});
diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index e99eb21..40f5ee2 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -75,8 +75,7 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             get_subcategories_fx: null,
             hide_popup_fx: null,
             controls:[new OpenLayers.Control.Navigation(),
-                      new OpenLayers.Control.PanPanel(),
-                      new OpenLayers.Control.ZoomPanel(),
+                      new OpenLayers.Control.SimplePanZoom(),
                       new OpenLayers.Control.ScaleLine()],
             maxResolution: 156543.0399,
             units: 'm',
diff --git a/example_project/settings.py b/example_project/settings.py
index a7c14d5..38bc916 100644
--- a/example_project/settings.py
+++ b/example_project/settings.py
@@ -25,6 +25,7 @@ JQUERY_CSS_URLS = ('/javascript/jquery-ui/css/smoothness/jquery-ui.css',
 
 OSM_CSS_URLS = ["http://www.openlayers.org/api/theme/default/style.css"]
 OSM_JS_URLS = [STATIC_URL + "chimere/js/OpenLayers.js",
+               STATIC_URL + "chimere/js/SimplePanZoom.js",
                "http://www.openstreetmap.org/openlayers/OpenStreetMap.js"]
 
 GPSBABEL = '/usr/bin/gpsbabel'