Skip to content

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

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.



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


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 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);
User contributions licensed under: CC BY-SA
1 People found this is helpful