OpenLayers 3: setCenter seems not to work in jsfiddle

Question

I'm trying to replicate an example from the OpenLayers Examples, specifically this one: http://openlayers.org/en/v3.0.0/examples/animation.html

The problem is that in my jsfiddle I cannot get all the buttons to work properly. For some reason the rotate buttons work but all the other ones do not. My fiddle is right here; http://jsfiddle.net/TimLucas/m6cju630/1/

It seems to be a problem with some view.setCenter since this is the only thing different in the functions calling the other buttons ('rotate to Madrid', etc.). I was searching for other examples where this function does work, but I cannot find any differences between the function in my fiddle that does not work and fiddles that do seem to get this functionality working (such as http://jsfiddle.net/ygtxwodL/). Can anyone see what I am doing wrong?

I am rather new to JavaScript so apologies for any obvious mistakes.

Answer 1

You need to change the scope of your view so it's available to those listener events. Just make a the view global by declaring it outside the Map definition.

See http://jsfiddle.net/4gjhwbne/

i.e. change

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.MapQuest({layer: 'osm'})
    })
  ],
  view: new ol.View({
    center: amsterdam,
    zoom: 10
  })
});

to

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

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.MapQuest({layer: 'osm'})
    })
  ],
  view: view
});

P.S. try using some browser developer tools, like Firebug or Chrome's developer tools to see what's going on