OpenLayers OpenLayers

Ticket #1484: ticket1484.patch

File ticket1484.patch, 11.8 kB (added by bartvde, 9 months ago)

preliminary patch to give an idea about the approach

  • lib/OpenLayers/Handler.js

    old new  
    4444    control: null, 
    4545 
    4646    /** 
     47     * APIProperty: cursors 
     48     * {Array} an array specifying the mouse cursors to use on the map div  
     49    */ 
     50    cursors: null, 
     51 
     52    /** 
    4753     * Property: map 
    4854     * {<OpenLayers.Map>} 
    4955     */ 
    …… 
    221227        this.map.events.unregister(name, this, method);    
    222228        this.map.events.unregister(name, this, this.setEvent); 
    223229    }, 
     230 
     231    /** 
     232     * Method: setCursor 
     233     * Set the mouse cursor on the map div 
     234     * 
     235     * Parameters: 
     236     * functionName - {String} the name of the function (e.g. mousedown) 
     237    */ 
     238    setCursor: function(functionName) { 
     239        if (this.cursors && this.cursors[functionName]) { 
     240            this.map.div.style.cursor = this.cursors[functionName]; 
     241        } 
     242    }, 
    224243     
    225244    /** 
    226245     * Method: setEvent 

  • lib/OpenLayers/Control.js

    old new  
    114114    handler: null, 
    115115 
    116116    /** 
     117     * APIProperty: cursor 
     118     * {String} cursor which will be set on the map div upon activation. 
     119    */ 
     120    cursor: null, 
     121 
     122    /** 
    117123     * APIProperty: eventListeners 
    118124     * {Object} If set as an option at construction, the eventListeners 
    119125     *     object will be registered with <OpenLayers.Events.on>.  Object 
    …… 
    291297     *            false if the control was already active. 
    292298     */ 
    293299    activate: function () { 
     300        if (this.cursor) { 
     301            this.map.div.style.cursor = this.cursor; 
     302        } else { 
     303            this.map.div.style.cursor = 'default'; 
     304        } 
    294305        if (this.active) { 
    295306            return false; 
    296307        } 

  • lib/OpenLayers/Control/DragPan.js

    old new  
    3535     */     
    3636    draw: function() { 
    3737        this.handler = new OpenLayers.Handler.Drag(this, 
    38                             {"move": this.panMap, "done": this.panMapDone}); 
     38                            {"move": this.panMap, "done": this.panMapDone},  
     39                            this.handlerOptions); 
    3940    }, 
    4041 
    4142    /** 

  • lib/OpenLayers/Handler/Box.js

    old new  
    7777        this.map.viewPortDiv.appendChild(this.zoomBox); 
    7878 
    7979        // TBD: use CSS classes instead 
    80         this.map.div.style.cursor = "crosshair"; 
    8180    }, 
    8281 
    8382    /** 
    …… 
    114113        }  
    115114        this.removeBox(); 
    116115 
    117         // TBD: use CSS classes instead 
    118         this.map.div.style.cursor = ""; 
    119  
    120116        this.callback("done", [result]); 
    121117    }, 
    122118 

  • lib/OpenLayers/Handler/Drag.js

    old new  
    154154     * {Boolean} Let the event propagate. 
    155155     */ 
    156156    mousedown: function (evt) { 
     157        this.setCursor('mousedown'); 
    157158        var propagate = true; 
    158159        this.dragging = false; 
    159160        if (this.checkModifiers(evt) && OpenLayers.Event.isLeftClick(evt)) { 
    160161            this.started = true; 
    161162            this.start = evt.xy; 
    162163            this.last = evt.xy; 
    163             // TBD replace with CSS classes 
    164             this.map.div.style.cursor = "move"; 
    165164            this.down(evt); 
    166165            this.callback("down", [evt.xy]); 
    167166            OpenLayers.Event.stop(evt); 
    …… 
    217216     * {Boolean} Let the event propagate. 
    218217     */ 
    219218    mouseup: function (evt) { 
     219        this.setCursor('mouseup'); 
    220220        if (this.started) { 
    221221            var dragged = (this.start != this.last); 
    222222            this.started = false; 
    223223            this.dragging = false; 
    224             // TBD replace with CSS classes 
    225             this.map.div.style.cursor = ""; 
    226224            this.up(evt); 
    227225            this.callback("up", [evt.xy]); 
    228226            if(dragged) { 
    …… 
    248246            var dragged = (this.start != this.last); 
    249247            this.started = false;  
    250248            this.dragging = false; 
    251             // TBD replace with CSS classes 
    252             this.map.div.style.cursor = ""; 
    253249            this.out(evt); 
    254250            this.callback("out", []); 
    255251            if(dragged) { 

  • examples/cursor.html

    old new  
     1<html xmlns="http://www.w3.org/1999/xhtml"> 
     2  <head> 
     3    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> 
     4    <style type="text/css"> 
     5        #map { 
     6            width: 800px; 
     7            height: 475px; 
     8            border: 1px solid black; 
     9        } 
     10        .olControlPanel { 
     11          cursor: pointer; 
     12        } 
     13        .olControlPanel div {  
     14          display:block; 
     15          width:  30px; 
     16          height: 30px; 
     17          margin: 5px; 
     18        } 
     19         
     20        .olControlPanel .olControlDragPanItemActive {  
     21          border: 1px red solid; 
     22          background-color: #EEEEEE; 
     23          background-image: url("../theme/default/img/icn-drag.png"); 
     24        } 
     25        .olControlPanel .olControlDragPanItemInactive {  
     26          background-color: #EEEEEE; 
     27          background-image: url("../theme/default/img/icn-drag.png"); 
     28        } 
     29        .olControlPanel .olControlZoomBoxItemInactive {  
     30          background-color: #EEEEEE; 
     31          background-image: url("../theme/default/img/icn-zoomin.png"); 
     32        } 
     33        .olControlPanel .olControlZoomBoxItemActive {  
     34          border: 1px red solid; 
     35          background-color: #EEEEEE; 
     36          background-image: url("../theme/default/img/icn-zoomin.png"); 
     37        } 
     38        .olControlPanel .olControlZoomOutBoxItemActive { 
     39          border: 1px red solid; 
     40          background-color: #EEEEEE; 
     41          background-image: url("../theme/default/img/icn-zoomout.png"); 
     42        } 
     43        .olControlPanel .olControlZoomOutBoxItemInactive { 
     44          background-color: #EEEEEE; 
     45          background-image: url("../theme/default/img/icn-zoomout.png"); 
     46        } 
     47        
     48    </style> 
     49    <script src="../lib/Firebug/firebug.js"></script> 
     50    <script src="../lib/OpenLayers.js"></script> 
     51    <script type="text/javascript"> 
     52        var lon = 5; 
     53        var lat = 40; 
     54        var zoom = 5; 
     55        var map, layer; 
     56 
     57        function init(){ 
     58            map = new OpenLayers.Map( 'map', { controls: [] } ); 
     59            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",  
     60                    "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); 
     61            map.addLayer(layer); 
     62 
     63            vlayer = new OpenLayers.Layer.Vector( "Editable" ); 
     64            map.addLayer(vlayer); 
     65             
     66             
     67            zb = new OpenLayers.Control.ZoomBox( 
     68                {title:"Zoom in box", 
     69                cursor: 'url(../theme/default/img/zoomin.cur),auto'}); 
     70            var panel = new OpenLayers.Control.Panel({defaultControl: zb}); 
     71            panel.addControls([ 
     72                zb, 
     73                new OpenLayers.Control.ZoomBox({title:"Zoom out box", displayClass: 'olControlZoomOutBox', out: true, cursor: 'url(../theme/default/img/zoomout.cur),auto'}), 
     74                new OpenLayers.Control.DragPan( 
     75                    {title:'Drag map', cursor: 'url(../theme/default/img/pan.cur),auto', handlerOptions: {cursors: {mousedown: 'url(../theme/default/img/pandown.cur),auto', mouseup: 'url(../theme/default/img/pan.cur),auto' } }}) 
     76            ]); 
     77            map.addControl(panel); 
     78 
     79            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); 
     80        } 
     81    </script> 
     82  </head> 
     83  <body onload="init()"> 
     84    <h3 id="title">Custom cursors for controls</h3> 
     85    <p id="shortdesc"> 
     86       Use custom cursors for your controls. 
     87    </p>   
     88    <div id="panel"></div> 
     89    <div id="map"></div> 
     90  </body> 
     91</html> 

  • examples/click.html

    old new  
    3030                    );  
    3131                    this.handler = new OpenLayers.Handler.Click( 
    3232                        this, { 
    33                             'click': this.trigger 
     33                            'click': this.trigger, 
    3434                        }, this.handlerOptions 
    3535                    ); 
    3636                },  
    …… 
    3939                    var lonlat = map.getLonLatFromViewPortPx(e.xy); 
    4040                    alert("You clicked near " + lonlat.lat + " N, " + 
    4141                                              + lonlat.lon + " E"); 
    42                 } 
     42                }, 
    4343 
    4444            }); 
    4545            var map;