Default minzoom of -2 prevents NavigationControl button from being disabled

[sgurin]

Hi, guys.

On the example, https://docs.mapbox.com/mapbox-gl-js/example/navigation/ disable state is stetted on the zoom-in button when you rich the limit https://prnt.sc/qlwb9i but when you zoom out https://prnt.sc/qlwby0 nothing happened with zoom out button. So, how we can disable the zoom out button?

[ryanhamley]

Good catch. This is a little tricky. As of #9028, the map's default minZoom is actually -2, not 0. You can reset that by calling map.setMinZoom(0) if you don't need the ability to show your map on small viewports. However, the amount you can zoom out on a map is determined in part by the size of the viewport, even when it's large. Unless the map is displayed at an exact multiple of a 512x512 square, it will be impossible to hit exactly z0 so the zoom out button won't be disabled.

I can think of a couple ways to solve this:

1. we could have a concept of "effective min zoom" which is the zoom that the map is actually able to reach at its current size and disable the zoom out button when that limit is reached

2. we could provide a method to manually disable the zoom buttons so developers can disable them as necessary. something like navControl.zoomOutButton.disable(). this one is technically possible now via a "private" method but we could expose and document it

[sgurin]

Hi @ryanhamley

Thanks a lot for such a detail explanation.

So, there are no methods to disable the zoom out button when your rich min zoom?

From my point zoom out button should have the same behavior as zoom in. It is confusing users when you click on it and nothing happens.

[ryanhamley]

So, there are no methods to disable the zoom out button when your rich min zoom?
From my point zoom out button should have the same behavior as zoom in. It is confusing users when you click on it and nothing happens.

The zoom out button does behave the same as the zoom in button. The problem is that it's not always (or even usually) possible to actually reach the map's minZoom. If you were to set maxZoom: 22 and minZoom: 15 for example, you'd see the buttons being disabled as expected when you reach the appropriate zoom levels. It's always possible to reach the maxZoom since it's not determined by viewport size, but since the minZoom is determined in part by viewport size, it's not guaranteed that the map's minZoom is actually reachable. That's the source of this particular bug.

[sgurin]

Hi, @ryanhamley

I see. Thanks for clarification.

What about boundaries? Will the bug be the same when we rich the limits of the area?

[ryanhamley]

Setting a boundary area wouldn't automatically change the behavior of the zoom buttons.

mapbox-gl-js/src/ui/control/navigation_control.js

Lines 77 to 81 in 74b1573

	_updateZoomButtons() {
	const zoom = this._map.getZoom();
	this._zoomInButton.disabled = zoom === this._map.getMaxZoom();
	this._zoomOutButton.disabled = zoom === this._map.getMinZoom();
	}

This is the code in question. You can see that the only determining factor in disabling the buttons is whether or not the current map zoom equals the map's minZoom or maxZoom. A bounding box doesn't change the map's min and max zoom. However, if you had a bounding box and set the map's min and max zoom to be equal to the min and max zoom levels that showed the entire bounded area, then yes, you could set up the controls to automatically disable the zoom out button when the maximum extent of the area is shown.

In general, the bug you've shown here only exhibits itself if the minZoom is very low, probably less than 2 in most cases. So if your map has a higher zoom level, you likely wouldn't experience this bug.