OpenLayers OpenLayers

Ticket #1400: panels.patch

File panels.patch, 14.1 kB (added by crschmidt, 6 months ago)

  • theme/default/style.css

    old new  
    230230    font-size: 1px; 
    231231    filter: alpha(opacity=50); 
    232232}     
     233 
     234.olControlPanPanel { 
     235    top: 10px; 
     236    left: 5px; 
     237}   
     238 
     239.olControlPanPanel div { 
     240    height: 18px; 
     241    width: 18px; 
     242    cursor: pointer; 
     243    position: absolute; 
     244} 
     245 
     246.olControlPanPanel .olControlPanButtonNorthItemInactive { 
     247    top: 0px; 
     248    left: 9px; 
     249    background-image: url("img/north-mini.png"); 
     250} 
     251.olControlPanPanel .olControlPanButtonSouthItemInactive { 
     252    top: 36px; 
     253    left: 9px; 
     254    background-image: url("img/south-mini.png"); 
     255} 
     256.olControlPanPanel .olControlPanButtonWestItemInactive { 
     257    position: absolute; 
     258    top: 18px; 
     259    left: 0px; 
     260    background-image: url("img/west-mini.png"); 
     261} 
     262.olControlPanPanel .olControlPanButtonEastItemInactive { 
     263    top: 18px; 
     264    left: 18px; 
     265    background-image: url("img/east-mini.png"); 
     266} 
     267 
     268.olControlZoomPanel { 
     269 top: 71px; 
     270 left: 14px; 
     271}  
     272 
     273.olControlZoomPanel div { 
     274    position: absolute; 
     275    height: 18px; 
     276    width: 18px; 
     277    cursor: pointer; 
     278} 
     279 
     280.olControlZoomPanel .olControlZoomInButtonItemInactive { 
     281    top: 0px; 
     282    left: 0px; 
     283    background-image: url("img/zoom-plus-mini.png"); 
     284} 
     285 
     286.olControlZoomPanel .olControlZoomToMaxExtentItemInactive { 
     287    top: 18px; 
     288    left: 0px; 
     289    background-image: url("img/zoom-world-mini.png"); 
     290} 
     291 
     292.olControlZoomPanel .olControlZoomOutButtonItemInactive { 
     293    top: 36px; 
     294    left: 0px; 
     295    background-image: url("img/zoom-minus-mini.png"); 
     296} 

  • lib/OpenLayers/Control/ZoomPanel.js

    old new  
     1/** 
     2 * @requires OpenLayers/Control/Panel.js 
     3 * @requires OpenLayers/Control/ZoomInButton.js 
     4 * @requires OpenLayers/Control/ZoomOutButton.js 
     5 * @requires OpenLayers/Control/ZoomToMaxExtent.js 
     6 */ 
     7 
     8/** 
     9 * Class: OpenLayers.Control.ZoomPanel 
     10 */ 
     11OpenLayers.Control.ZoomPanel = OpenLayers.Class(OpenLayers.Control.Panel, { 
     12 
     13    /** 
     14     * Constructor: OpenLayers.Control.ZoomPanel  
     15     * Add our two mousedefaults controls. 
     16     * 
     17     * Parameters: 
     18     * options - {Object} An optional object whose properties will be used 
     19     *     to extend the control. 
     20     */ 
     21    initialize: function(options) { 
     22        OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]); 
     23        this.addControls([ 
     24          new OpenLayers.Control.ZoomInButton(), 
     25          new OpenLayers.Control.ZoomToMaxExtent(), 
     26          new OpenLayers.Control.ZoomOutButton() 
     27        ]); 
     28    }, 
     29 
     30    /** 
     31     * Method: draw  
     32     * calls the default draw, and then activates mouse defaults. 
     33     */ 
     34    draw: function() { 
     35        var div = OpenLayers.Control.Panel.prototype.draw.apply(this, arguments); 
     36        return div; 
     37    }, 
     38 
     39    CLASS_NAME: "OpenLayers.Control.ZoomPanel" 
     40}); 

  • lib/OpenLayers/Control/ZoomInButton.js

    old new  
     1/** 
     2 *  
     3 * @requires OpenLayers/Control/Control.js 
     4 */ 
     5 
     6/** 
     7 * Class: OpenLayers.Control.ZoomInButton 
     8 */ 
     9OpenLayers.Control.ZoomInButton = OpenLayers.Class(OpenLayers.Control, { 
     10 
     11    /* Property: type 
     12     * The type of OpenLayers.Control -- When are added to a Control.Panel 
     13     * the panel uses this to determine how to handle our events 
     14     * {String} 
     15     */ 
     16    type: OpenLayers.Control.TYPE_BUTTON, 
     17     
     18    /** 
     19     * Method: trigger 
     20     */ 
     21    trigger: function(){ 
     22        this.map.zoomIn(); 
     23    }, 
     24 
     25    CLASS_NAME: "OpenLayers.Control.ZoomInButton" 
     26}); 

  • lib/OpenLayers/Control/ZoomOutButton.js

    old new  
     1/** 
     2 *  
     3 * @requires OpenLayers/Control/Control.js 
     4 */ 
     5 
     6/** 
     7 * Class: OpenLayers.Control.ZoomInButton 
     8 */ 
     9OpenLayers.Control.ZoomOutButton = OpenLayers.Class(OpenLayers.Control, { 
     10 
     11    /* Property: type 
     12     * The type of OpenLayers.Control -- When are added to a Control.Panel 
     13     * the panel uses this to determine how to handle our events 
     14     * {String} 
     15     */ 
     16    type: OpenLayers.Control.TYPE_BUTTON, 
     17     
     18    /** 
     19     * Method: trigger 
     20     */ 
     21    trigger: function(){ 
     22        this.map.zoomOut(); 
     23    }, 
     24 
     25    CLASS_NAME: "OpenLayers.Control.ZoomOutButton" 
     26}); 

  • lib/OpenLayers/Control/PanButton.js

    old new  
     1/** 
     2 *  
     3 * @requires OpenLayers/Control/Control.js 
     4 */ 
     5 
     6/** 
     7 * Class: OpenLayers.Control.PanButton 
     8 */ 
     9OpenLayers.Control.PanButton = OpenLayers.Class(OpenLayers.Control, { 
     10 
     11    /**  
     12     * APIProperty: slideFactor 
     13     * {Integer} Number of pixels by which we'll pan the map in any direction  
     14     *     on clicking the arrow buttons.  
     15     */ 
     16    slideFactor: 50, 
     17 
     18    /**  
     19     * Property: direction 
     20     * {String} in {'NORTH', 'SOUTH', 'EAST', 'WEST'} 
     21     */ 
     22    direction: null, 
     23 
     24    /* Property: type 
     25     * The type of OpenLayers.Control -- When are added to a Control.Panel 
     26     * the panel uses this to determine how to handle our events 
     27     * {String} 
     28     */ 
     29    type: OpenLayers.Control.TYPE_BUTTON, 
     30 
     31    /** 
     32     * Constructor: OpenLayers.Control.PanButton  
     33     * Add our two mousedefaults controls. 
     34     * 
     35     * Parameters: 
     36     * direction - {String} The direction this button should pan 
     37     * options - {Object} An optional object whose properties will be used 
     38     *     to extend the control. 
     39     */ 
     40    initialize: function(dir, options) { 
     41     
     42        this.direction = dir; 
     43         
     44        switch(this.direction){ 
     45            case OpenLayers.Control.PanButton.NORTH: 
     46                this.CLASS_NAME += "North"; 
     47                break; 
     48            case OpenLayers.Control.PanButton.SOUTH: 
     49                this.CLASS_NAME += "South"; 
     50                break; 
     51            case OpenLayers.Control.PanButton.EAST: 
     52                this.CLASS_NAME += "East"; 
     53                break; 
     54            case OpenLayers.Control.PanButton.WEST: 
     55                this.CLASS_NAME += "West"; 
     56                break; 
     57        } 
     58         
     59        OpenLayers.Control.prototype.initialize.apply(this, [options]); 
     60         
     61        if(options && options.displayClass){ 
     62            this.displayClass = options.displayClass; 
     63        } 
     64    }, 
     65     
     66    /** 
     67     * Method: trigger 
     68     */ 
     69    trigger: function(){ 
     70     
     71        switch (this.direction) { 
     72            case OpenLayers.Control.PanButton.NORTH:  
     73                this.map.pan(0, -this.slideFactor); 
     74                break; 
     75            case OpenLayers.Control.PanButton.SOUTH:  
     76                this.map.pan(0, this.slideFactor); 
     77                break; 
     78            case OpenLayers.Control.PanButton.WEST:  
     79                this.map.pan(-this.slideFactor, 0); 
     80                break; 
     81            case OpenLayers.Control.PanButton.EAST:  
     82                this.map.pan(this.slideFactor, 0); 
     83                break; 
     84        } 
     85    }, 
     86 
     87    CLASS_NAME: "OpenLayers.Control.PanButton" 
     88}); 
     89 
     90OpenLayers.Control.PanButton.NORTH = "NORTH"; 
     91OpenLayers.Control.PanButton.SOUTH = "SOUTH"; 
     92OpenLayers.Control.PanButton.EAST = "EAST"; 
     93OpenLayers.Control.PanButton.WEST = "WEST"; 

  • lib/OpenLayers/Control/PanPanel.js

    old new  
     1/** 
     2 * @requires OpenLayers/Control/Panel.js 
     3 * @requires OpenLayers/Control/PanButton.js 
     4 */ 
     5 
     6/** 
     7 * Class: OpenLayers.Control.PanPanel 
     8 */ 
     9OpenLayers.Control.PanPanel = OpenLayers.Class(OpenLayers.Control.Panel, { 
     10 
     11    /** 
     12     * Constructor: OpenLayers.Control.PanPanel  
     13     * Add our two mousedefaults controls. 
     14     * 
     15     * Parameters: 
     16     * options - {Object} An optional object whose properties will be used 
     17     *     to extend the control. 
     18     */ 
     19    initialize: function(options) { 
     20        OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]); 
     21        this.addControls([ 
     22          new OpenLayers.Control.PanButton(OpenLayers.Control.PanButton.NORTH), 
     23          new OpenLayers.Control.PanButton(OpenLayers.Control.PanButton.SOUTH), 
     24          new OpenLayers.Control.PanButton(OpenLayers.Control.PanButton.EAST), 
     25          new OpenLayers.Control.PanButton(OpenLayers.Control.PanButton.WEST) 
     26        ]); 
     27    }, 
     28 
     29    /** 
     30     * Method: draw  
     31     * calls the default draw, and then activates mouse defaults. 
     32     */ 
     33    draw: function() { 
     34        var div = OpenLayers.Control.Panel.prototype.draw.apply(this, arguments); 
     35        return div; 
     36    }, 
     37 
     38    CLASS_NAME: "OpenLayers.Control.PanPanel" 
     39}); 

  • lib/OpenLayers.js

    old new  
    203203            "OpenLayers/Layer/WFS.js", 
    204204            "OpenLayers/Control/MouseToolbar.js", 
    205205            "OpenLayers/Control/NavToolbar.js", 
     206            "OpenLayers/Control/PanPanel.js", 
     207            "OpenLayers/Control/PanButton.js", 
     208            "OpenLayers/Control/ZoomInButton.js", 
     209            "OpenLayers/Control/ZoomOutButton.js", 
     210            "OpenLayers/Control/ZoomPanel.js", 
    206211            "OpenLayers/Control/EditingToolbar.js", 
    207212            "OpenLayers/Lang.js", 
    208213            "OpenLayers/Lang/en.js" 

  • examples/pan-zoom-panels.html

    old new  
     1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
     2    "http://www.w3.org/TR/html4/loose.dtd"> 
     3<html> 
     4<head> 
     5    <title>Pan and Zoom Panels</title> 
     6    <style> 
     7    #mapDiv { 
     8        height: 256px; 
     9        width: 512px; 
     10    } 
     11    </style> 
     12    <script type="text/javascript" src="../lib/OpenLayers.js"></script> 
     13    <script> 
     14    var map; 
     15    var lon = 5; 
     16    var lat = 40; 
     17    var zoom = 5; 
     18    function init(){ 
     19        map = new OpenLayers.Map( 'mapDiv', {controls: []} ); 
     20         
     21        var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
     22                  "http://labs.metacarta.com/wms/vmap0", 
     23                  {layers: 'basic'} ); 
     24        map.addLayers([wms]); 
     25         
     26        map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); 
     27        map.addControl( new OpenLayers.Control.PanPanel() ); 
     28        map.addControl( new OpenLayers.Control.ZoomPanel() ); 
     29    } 
     30    </script> 
     31</head> 
     32<body onload='init();'> 
     33<h1>Pan and Zoom Panels</h1> 
     34<div id="mapDiv"></div> 
     35<p>The pan and zoom panels allow you to use CSS styling to change the 
     36   look and feel of the panels, including changing their position 
     37   and their icons without needing to change any code. 
     38</p>    
     39</body> 
     40</html>