Mouse Drag Coordinates

5 messages Options
Embed this post
Permalink
Dave Thomas

Mouse Drag Coordinates

Reply Threaded More More options
Print post
Permalink

Hi Everyone,

Hi have what I though would be a simple task but its proving to be a little more frustrating than I anticipated.

What I need to do is get the coordinates for pan events so that I know the coordinates of when the drag started and when it ended. The logical way to do this as far as I thought was to listen for the mousedown (or movestart) and mouseup (or moveend) events and get the coordinates from there. Its not behaving the way I anticipated though. I've tried a whole bunch of different ideas - four of which I'll list here. Surely one of these is close. I think the first two are the closest.

I'd very much appreciate any input that may help.

Many Thanks
Dave

Method 1. Not all Events are recevied and of the ones that are I can't get the coordinates from all of them.

  • click: yes
  • mousemove: yes
  • mouseup: yes
  • mousedown: no
  • movestart: yes - but coordinates recevied are NAN
  • moveend: yes - but coordinates received are NAN
       var options =
       {   
           ... other settings....
    
          eventListeners: {
             "movestart": doEvent
          }
       };
    
       function doEvent(event) {
          var obj = this.events.getMousePosition(event);
          alert(obj);
        }
    

    Method 2. Same results as Method 1

       map.events.register("mousemove", map, function(e) {
          var position = this.events.getMousePosition(e);
          alert(position);
       });
    
    

    Method 3. Clicks are called but not mousedowns.

       OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
          defaultHandlerOptions: {
             'single': true,
             'double': false,
             'pixelTolerance': 0,
             'stopSingle': false,
             'stopDouble': false
          },
    
          initialize: function(options) {
             this.handlerOptions = OpenLayers.Util.extend(
             {}, this.defaultHandlerOptions
                );
             OpenLayers.Control.prototype.initialize.apply(
                this, arguments
                );
             this.handler = new OpenLayers.Handler.Click(
                this, {
                'click': this.doClick,
                'down': this.doDown,
                'mousedown': this.doMouseDown
             }, this.handlerOptions
                );
          },
    
          doClick: function(e) {
             alert('click');
          },
          doDown: function(e) {
             alert('down');
          },
          doMouseDown: function(e) {
             alert('mouseDown');
          }
       });
    
    Method 4. Callbacks are only received if Navigation is deactivated.
       OpenLayers.Control.Drag = OpenLayers.Class(OpenLayers.Control, {
           defaultHandlerOptions: {
               stopDown: false
           },
    
           initialize: function(options) {
               this.handlerOptions = OpenLayers.Util.extend(
                   {}, this.defaultHandlerOptions
               );
               OpenLayers.Control.prototype.initialize.apply(
                   this, arguments
               );
               this.handler = new OpenLayers.Handler.Drag(
                   this, {
                       'down': this.doDown,
                       'up': this.doUp,
                       'move': this.doMove,
                       'done': this.doDone
                   }, this.handlerOptions
               );
           },
    
           doDown: function(e) {
               alert('down');
           },
          doUp: function(e) {
               alert('up')
          },
          doMove: function(e) {
               alert('move');
           },
          doDone: function(e) {
               alert('done');
           }
       });
    
    
  • Eric Lemoine-2-2

    Re: Mouse Drag Coordinates

    Reply Threaded More More options
    Print post
    Permalink
    On Friday, October 30, 2009, Dave Thomas <[hidden email]> wrote:
    >
    > Hi Everyone,

    Hi


    >
    > Hi have what I though would be a simple task but its proving to be a little more frustrating than I anticipated.
    >
    > What I need to do is get the coordinates for pan events so that I know the coordinates of when the drag started and when it ended. The logical way to do this as far as I thought was to listen for the mousedown (or movestart) and mouseup (or moveend) events and get the coordinates from there. Its not behaving the way I anticipated though. I've tried a whole bunch of different ideas - four of which I'll list here. Surely one of these is close.  I think the first two are the closest.
    >
    > I'd very much appreciate any input that may help.
    >
    > Many Thanks
    > Dave
    >
    >
    >
    > Method 1. Not all Events are recevied and of the ones that are I can't get the coordinates from all of them.
    >
    > click: yes
    > mousemove: yes
    > mouseup: yes
    > mousedown: no
    > movestart: yes - but coordinates recevied are NAN
    > moveend: yes - but coordinates received are NAN
    >
    >
    >    var options =
    >    {
    >        ... other settings....
    >
    >       eventListeners: {
    >          "movestart": doEvent
    >       }
    >    };
    >
    >    function doEvent(event) {
    >       var obj = this.events.getMousePosition(event)


    getMousePosition works with browser events only.


    >       alert(obj);
    >     }
    >
    >
    > Method 2. Same results as Method 1
    >
    >
    >    map.events.register("mousemove", map, function(e) {
    >       var position = this.events.getMousePosition(e);
    >       alert(position);
    >    });
    >
    >
    >
    >
    > Method 3. Clicks are called but not mousedowns.
    >
    >
    >    OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
    >       defaultHandlerOptions: {
    >          'single': true,
    >          'double': false,
    >          'pixelTolerance': 0,
    >          'stopSingle': false,
    >          'stopDouble': false
    >       },
    >
    >       initialize: function(options) {
    >          this.handlerOptions = OpenLayers.Util.extend(
    >          {}, this.defaultHandlerOptions
    >             );
    >          OpenLayers.Control.prototype.initialize.apply(
    >             this, arguments
    >             );
    >          this.handler = new OpenLayers.Handler.Click(
    >             this, {
    >             'click': this.doClick,
    >             'down': this.doDown,
    >             'mousedown': this.doMouseDown
    >          }, this.handlerOptions
    >             );
    >       },
    >
    >       doClick: function(e) {
    >          alert('click');
    >       },
    >       doDown: function(e) {
    >          alert('down');
    >       },
    >       doMouseDown: function(e) {
    >          alert('mouseDown');
    >       }
    >    });
    >
    >
    > Method 4.  Callbacks are only received if Navigation is deactivated.
    >
    >
    >    OpenLayers.Control.Drag = OpenLayers.Class(OpenLayers.Control, {
    >        defaultHandlerOptions: {
    >            stopDown: false
    >        },
    >
    >        initialize: function(options) {
    >            this.handlerOptions = OpenLayers.Util.extend(
    >                {}, this.defaultHandlerOptions
    >            );
    >            OpenLayers.Control.prototype.initialize.apply(
    >                this, arguments
    >            );
    >            this.handler = new OpenLayers.Handler.Drag(
    >                this, {
    >                    'down': this.doDown,
    >                    'up': this.doUp,
    >                    'move': this.doMove,
    >                    'done': this.doDone
    >                }, this.handlerOptions
    >            );
    >        },
    >
    >        doDown: function(e) {
    >            alert('down');
    >        },
    >       doUp: function(e) {
    >            alert('up')
    >       },
    >       doMove: function(e) {
    >            alert('move');
    >        },
    >       doDone: function(e) {
    >            alert('done');
    >        }
    >    });

    implementing a specific control based on a Drag handler is what I'd go
    with. You can look at the DragPan control to know how to use the Drag
    handler - I tend to think that you could rely on the "move" and "done"
    callbacks only. Now regarding the conflict with the Navigation
    control: have you tried making sure your control is activated *before*
    the Navigation control?

    Cheers,

    --
    Eric Lemoine

    Camptocamp France SAS
    Savoie Technolac, BP 352
    73377 Le Bourget du Lac, Cedex

    Tel : 00 33 4 79 44 44 96
    Mail : [hidden email]
    http://www.camptocamp.com
    _______________________________________________
    Users mailing list
    [hidden email]
    http://openlayers.org/mailman/listinfo/users
    Dave Thomas

    Re: Mouse Drag Coordinates

    Reply Threaded More More options
    Print post
    Permalink

    Eric Lemoine-2-2 wrote:
    implementing a specific control based on a Drag handler is what I'd go
    with. You can look at the DragPan control to know how to use the Drag
    handler - I tend to think that you could rely on the "move" and "done"
    callbacks only. Now regarding the conflict with the Navigation
    control: have you tried making sure your control is activated *before*
    the Navigation control?
    Thanks for the response Eric. Based on your suggestion we'll go with the Drag handler method.
    I actually deactivate the navigation on initialisation and only activate at run time when a button is clicked.

    To be sure though, I removed it from the controls property object that was being passed to the Map constructor via options and constructed it the same was as the drag handler so I had this...

     var drag = new OpenLayers.Control.Drag();
       map.addControl(drag);
       drag.activate();

       var nav = new OpenLayers.Control.Navigation();
       map.addControl(nav);
       nav.deactivate();

    Still however, if I activate the navigation control, the callbacks aren't received by my drag handler.

    Many thanks
    Dave
    Eric Lemoine-2-2

    Re: Mouse Drag Coordinates

    Reply Threaded More More options
    Print post
    Permalink
    On Fri, Oct 30, 2009 at 1:27 PM, Dave Thomas <[hidden email]> wrote:

    >
    >
    >
    > Eric Lemoine-2-2 wrote:
    >>
    >> implementing a specific control based on a Drag handler is what I'd go
    >> with. You can look at the DragPan control to know how to use the Drag
    >> handler - I tend to think that you could rely on the "move" and "done"
    >> callbacks only. Now regarding the conflict with the Navigation
    >> control: have you tried making sure your control is activated *before*
    >> the Navigation control?
    >>
    >
    > Thanks for the response Eric. Based on your suggestion we'll go with the
    > Drag handler method.
    > I actually deactivate the navigation on initialisation and only activate at
    > run time when a button is clicked.
    >
    > To be sure though, I removed it from the controls property object that was
    > being passed to the Map constructor via options and constructed it the same
    > was as the drag handler so I had this...
    >
    >  var drag = new OpenLayers.Control.Drag();
    >   map.addControl(drag);
    >   drag.activate();
    >
    >   var nav = new OpenLayers.Control.Navigation();
    >   map.addControl(nav);
    >   nav.deactivate();

    what if you activate your drag control *after* you activate the
    navigation control?

    --
    Eric Lemoine

    Camptocamp France SAS
    Savoie Technolac, BP 352
    73377 Le Bourget du Lac, Cedex

    Tel : 00 33 4 79 44 44 96
    Mail : [hidden email]
    http://www.camptocamp.com
    _______________________________________________
    Users mailing list
    [hidden email]
    http://openlayers.org/mailman/listinfo/users
    Dave Thomas

    Re: Mouse Drag Coordinates

    Reply Threaded More More options
    Print post
    Permalink
    Unfortunately Eric, I'm a little too far beyond where I was before to be able to test that now.

     What I ended up doing was essentally copying the DragPan class and customising it with the callbacks I needed. It proved to be more predictable and controllable for me in this instance so found it to be an adequate solution.


    Thanks for all your help anyhow. It was the DragPan reference that got me out of this.


    Eric Lemoine-2-2 wrote:
    On Fri, Oct 30, 2009 at 1:27 PM, Dave Thomas <davidt@integeo.com> wrote:
    >
    >
    >
    > Eric Lemoine-2-2 wrote:
    >>
    >> implementing a specific control based on a Drag handler is what I'd go
    >> with. You can look at the DragPan control to know how to use the Drag
    >> handler - I tend to think that you could rely on the "move" and "done"
    >> callbacks only. Now regarding the conflict with the Navigation
    >> control: have you tried making sure your control is activated *before*
    >> the Navigation control?
    >>
    >
    > Thanks for the response Eric. Based on your suggestion we'll go with the
    > Drag handler method.
    > I actually deactivate the navigation on initialisation and only activate at
    > run time when a button is clicked.
    >
    > To be sure though, I removed it from the controls property object that was
    > being passed to the Map constructor via options and constructed it the same
    > was as the drag handler so I had this...
    >
    >  var drag = new OpenLayers.Control.Drag();
    >   map.addControl(drag);
    >   drag.activate();
    >
    >   var nav = new OpenLayers.Control.Navigation();
    >   map.addControl(nav);
    >   nav.deactivate();

    what if you activate your drag control *after* you activate the
    navigation control?

    --
    Eric Lemoine

    Camptocamp France SAS
    Savoie Technolac, BP 352
    73377 Le Bourget du Lac, Cedex

    Tel : 00 33 4 79 44 44 96
    Mail : eric.lemoine@camptocamp.com
    http://www.camptocamp.com
    _______________________________________________
    Users mailing list
    Users@openlayers.org
    http://openlayers.org/mailman/listinfo/users