1

I'm interested in detecting when a user moves or pans a map so that I can run a new query on a database based on their location. However, the following code causes the panning and zooming controls to go crazy:

map.events.register("moveend", map, function(){              
    getValues(map.center);               
    });

If I comment out these lines, there appears to be no problem. If they are included, after two pans or zooms, the map suddenly jumps to half-way around the world (it looks similar to 0 lat, 0 long). I'm unsure what I am doing incorrectly.

The other problem I have regarding the pan/zooming is that the movend does not really seem to wait until the user has finished moving or panning. Queries seem to be fired off even as the map is being moved and panned. Again, I'm not sure if this is a problem with how I am detecting this but it does not seem to behave as I thought it would.

EDIT: Including getValues function also:

getValues = function(c){

    c.transform(map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326") )
    console.log(c.lat, c.lon)

    $.ajax({ 
            type: "POST",
            url: "php/query.php" ,  
            data:{x: c.lat, y:c.lon},  
            async: true,
            success: function(r){
                    console.log(r);
            }, 
        dataType:'json'
        }); 

    }

2 Answers 2

5

I've used this event successfully. A delay method similar to the one here can help any thrashing. The actual method looks like this:

delay: function( timeout, id, callback )
    {
            this.delays = this.delays || [];
            var delay = this.delays[ id ];
            if ( delay )
            {
                    clearTimeout ( delay );
            }
            delay = setTimeout ( callback, timeout );
            this.delays[ id ] = delay;
    }

Usage Example:

delay(1000, "uniqueId", function() {
    getValues(map.getCenter()); 
});

I suspect your getValues method is modifying the map causing the moveend event to fire.

2
  • Thanks for the suggestion @ca0v. Do you place your example delay within the map.events.register("moveend", map, function(){ ... }) function? I would be surprised if my getValues method moves the map.
    – djq
    Aug 16, 2012 at 19:53
  • yes - register("moveend", map, function() { $.delay(...) }) where "$" is a reference to the object containing the delay function. This is necessary because of the this.delays references.
    – ca0v
    Aug 16, 2012 at 20:03
2

I see your problem. Try map.getCenter(). You are transforming the map center point which is likely the cause of your problem.

2
  • Yes, that does fix the 'thrashing'. However, on the third zoom/pan it throws the map to some random place in the world which stops when I comment out the map.events.... piece as far as I can tell.
    – djq
    Aug 16, 2012 at 20:14
  • Update the source in the question so I can see that you've replace map.center with map.getCenter().
    – ca0v
    Aug 16, 2012 at 20:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.