Control.Zoom
Quick answer
L.control.zoom renders the plus and minus buttons that zoom the map and remains the primary zoom entry point on touch devices. It disables its buttons automatically at minZoom and maxZoom. Both button labels and hover titles are customizable on each instance.
L.control.zoom( options ) → Control.Zoom
Key points
- zoomInText and zoomOutText accept HTML, so icons and glyphs need no extra CSS.
- Set the map option zoomControl to false before placing the control in another corner.
- Button stepping follows zoomSnap, including fractional values such as 0.5.
Example
var map = L.map('map', {
center: [39.907359, 116.391263],
zoom: 12,
zoomControl: false,
zoomSnap: 0.5
});
L.control.zoom({
position: 'bottomright',
zoomInText: '<span aria-hidden="true">＋</span>',
zoomInTitle: '放大一级',
zoomOutText: '<span aria-hidden="true">－</span>',
zoomOutTitle: '缩小一级'
}).addTo(map);
/* 按钮会在达到 minZoom / maxZoom 时自动禁用，无需自己判断 */
map.setMinZoom(10);
map.setMaxZoom(17);Notes
- Hand-written zoom controls lose automatic button disabling and touch-friendly sizing.
- zoomInTitle is invisible on mobile, so the icon itself must communicate the action.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Control.Zoom. https://www.jingweizhi.com/en/leaflet/api/control-zoom.html (accessed 2026-11-03).