How to show zoom level on openlayers (js/html file only)?

Question

looking for some help on this. I know it is something along the lines of

new OpenLayers.Control.ZoomStatus({
  autoActivate: true
})

Looking to add a div for the zoom status also: or what would be the best approach?

If someone could offer some insight, it would be appreciated. Couldn't find the answer in the documentation.

Answer 1

I don't believe in the current version of openlayers that this control has been implmented.

The best way is to probably add your own element on your map to display the Zoom level and use

map.getZoom()

To work out what the zoom level is to display it. Two ways you could approach it. One ios to extend the OpenLayers.Control.Zoom class and add your own functions to the draw onZoomClick funtction. Then add your control to your map in place of the Normal OpenLayers.Control.zoom

The second would be to add an event to your map to capture a zoom event and update your element to display the zoom level there. To do this you would use the map.events.register() call on your map.

The code to do the update should look something like this

 var zoomLevel = map.getZoom();
  document.getElementById('ZoomElement').innerHTML =  'Current Zoom: ' + zoomlevel + 'of ' + (map.numZoomLevels + 1);

Answer 2

Updating @Darkcylde for OL6. getZoom acts on View now.

And I added getting the zoom in tenths. And I just have the number showing, but that's a minor change

map.on('rendercomplete',function(e) {
  var zoomLevel = map.getView().getZoom();
  var zoomRounded = Math.round(zoomLevel*10)/10;
  document.getElementById('ZoomElement').innerHTML = zoomRounded;
})