Zoom in/out on click in OpenLayers 3?

Question

How to zoom in map in OpenLayerss 3 on click of button?

I want to zoom in and zoom out the map on custom buttons instead of + and - buttons which are on default map.

I tried with:

onclick="map.zoomIn();"

But it's not working, though it was working in OpenLayers 2.

Answer 1

If you want to zoom in if you click on the map the following should work:

map.on('click', function() {
    map.getView().setZoom(map.getView().getZoom()+1);    
});

Answer 2

If you want a smooth zoom:

map.getView().animate({
  zoom: map.getView().getZoom() + 1,
  duration: 250
})

Answer 3

I have legacy openlayers code v.3.2.0 and there is no .animate, this code worked:

var zoomAnimation = ol.animation.zoom({
   resolution: map.getView().getResolution()
});

map.beforeRender(zoomAnimation);
map.getView().setResolution(map.getView().getResolution() * 2 );