ol.animation.pan doesn't work

Question

I'm trying to animate my map but I'm having problems to do it. I've seen the openlayers 3 example but I have had to change some things to adapt them to my web and now it doesn't work. This is my code:

var name_button_see_pozo = ".verpozo"; // Class

$(document).on('ready',function(){
    $(name_button_see_pozo).on('click',function(e){
        e.preventDefault();

        // take coordinates and zoom from url:
        if (window.location.hash !== '') {
            var hash = window.location.hash.replace('#', '');
            var parts = hash.split(';');
            if (parts.length === 3) {
                zoom = parseInt(parts[0], 10);
                center = [
                    parseFloat(parts[1]),
                    parseFloat(parts[2])
                ];
            }
        }

        var view = new ol.View({
            center: center,
            zoom: zoom
        });

        var pan = ol.animation.pan({
            duration: 2000,
            source: /** @type {ol.Coordinate} */ (view.getCenter())
        });
        map.beforeRender(pan);

        var utm = "+proj=utm +zone=30";
        var wgs84 = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";
        var coorx = 728404.43590;
        var coory = 4371594.36768;
        var lonlat= proj4(utm,wgs84,[coorx, coory]);        
        var center_pozo = ol.proj.transform([lonlat[0], lonlat[1]], 'EPSG:4326', 'EPSG:3857');

        view.setCenter(center_pozo);
    });
});

Firtly, I take the zoom and coordinates (EPSG:3857) from the url and I establish it as the center of my map (I want to start the animation from there). Then, I put the panning method and finally, I calculate the coordinates of the point where I want to finish the animation (center_pozo).

I don't know why it doesn't work. I have seen the value of the variables with console.log and all is correct. If I click on the button, it doesn't do anything.

Does anyone know how to solve this? And what am I doing wrong?

Thank you very much!

oterral oterral · Accepted Answer · 2015-04-22T07:03:21

Sorry I don't have the right to add only a comment. Your code seems good, see this jsfiddle.

Verify your proj4 version or if the starting and final coordinates are really different.

  var pan = ol.animation.pan({
        duration: 2000,
        source: /** @type {ol.Coordinate} */ (view.getCenter())
      });
      map.beforeRender(pan);

      var utm = "+proj=utm +zone=30";
      var wgs84 = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";
      var coorx = 728404.43590;
      var coory = 4371594.36768;
      var lonlat= proj4(utm,wgs84,[coorx, coory]);        
      var center_pozo = ol.proj.transform([lonlat[0], lonlat[1]], 'EPSG:4326', 'EPSG:3857');
      view.setCenter(center_pozo);

ol.animation.pan doesn't work

1 Answers