Map Zoom Level – Using Browser’s Developer Tools to See Zoom Level of Current Map

javascriptmapbox-glmapbox-gl-jsopenstreetmapzoom

What I'm looking for

Where a map is being served by Mapbox in my browser is there anywhere within the Chrome/Firefox Developer Tools where it shows the current zoom level as displayed on screen?

What I've tried

I can see what zoom level the map starts at (within the code for website) and could manually count the number of clicks or scrolls I make. I know there is a listener function that knows what zoom level I'm on and trying find if that is reported in the console or other part of the Developer Tools panel

Why I'm looking for it

I'm trying to get a feel for what data to show at what zoom level so looking a precedent websites.

Best Answer

With raster tiles you can usually see it on the tile URLs. For example the tile https://a.tile.openstreetmap.org/16/35270/21925.png corresponds to zoom level 16. This works for all XYZ tile servers. For details see slippy map tilenames.

Related Solutions

[GIS] Capturing/overriding mousewheel zoom in openlayers

I was able to accomplish this by defining my own control derived from Navigation control.

var NavigationControl = OpenLayers.Class(OpenLayers.Control.Navigation, {
  wheelDown: function(evt, delta) {
    if (canZoomOut()) {
      return OpenLayers.Control.Navigation.prototype.wheelDown.apply(this,arguments);
    } else {
      console.log('Blocked user of zooming out');
    }
  }
});

map.addControl(new NavigationControl());

This of course will work only as long as Navigation control defines wheelDown - function. If Navigation control is modified in later OpenLayers version then this will brake as well.

[GIS] Leaflet: Map focus issue after enabling a custom ZoomToArea control in Firefox

It seems one solution is to prevent this dragging issue upfront, at the document level, rather than retroactively treat the symptom and push focus back to the Leaflet map element/object using javascript..

It finally occurred to me to google "javascript firefox disable image drag", and that lead me to a generic solution over at SO.

If you're looking for a raw javascript solution, plant this little gatekeeper somewhere near the top of your initializing code:

document.ondragstart = function() { return false; };

Or alternatively, if you prefer a JQuery solution, use this:

$(document).on("dragstart", function() {
     return false;
});

With respect to my plugin, I added the override as the first line of code.

It works beautifully, and it didn't seem to break any other functionality. However I'm unclear why this is necessary for Firefox while the other browsers are unaffected by it.

Best Answer

Related Solutions

[GIS] Capturing/overriding mousewheel zoom in openlayers

[GIS] Leaflet: Map focus issue after enabling a custom ZoomToArea control in Firefox

Related Question