Zoom & Pan Settings with Leaflet

Basic Webmapping with Leaflet
Written By lmeisterlin

Included in this tutorial:

  • Why Adjust Zoom & Pan? 

  • Zoom Settings: Setting Initial Zoom Level, Restricting Zoom Range

  • Control Panning Behavior: Creating a Bounding Box, Locking the Map View

Software version in examples: Leaflet 1.9.4

Credits: Steven Dela Cruz Duncan & L. Meisterlin (2025)

 

This tutorial explores how to control zoom levels and panning behavior to better manage users’ interaction with your web map. These settings are especially useful for focusing your map on a specific area.

This tutorial builds upon the basic Leaflet web map developed in earlier related tutorials:

Why Adjust Zoom & Pan? 

Zoom levels and panning behavior help guide users’ attention, protect map boundaries, and enhance the user experience. For example, if you're building a map focused on a single neighborhood, you may want to limit the ability to zoom out too far or pan beyond the area.

Zoom Settings

Setting Initial Zoom Level 

Leaflet’s setView() method defines both the center of the map and the zoom level. 

Here’s how it works:

  1. Inside the parentheses after setView(), the first argument is an array of latitude and longitude coordinates. These numbers determine where your map is centered, in WGS84 coordinates.

  2. The second argument is the zoom level. It determines how close in the map starts.

In this example, the code centers our map on the Bronx with a zoom level of 14:

var map = L.map('map').setView([40.8170, -73.9106], 14); // Zoom level 14

Higher numbers zoom in closer. Lower numbers zoom out. 

Below, you’ll see a comparison of the same coordinates at a zoom level of 12 versus 14. 

zoom level of 12

zoom level of 14

Restricting Zoom Range

To control how much users can zoom in or out, use minZoom and maxZoom options:

var map = L.map('map', {
    center: [40.8170, -73.9106],
    zoom: 14,
    minZoom: 12,
    maxZoom: 17
});

This restricts zooming to a range between levels 12 (zoomed out) and 14 (zoomed in). A quick way to verify if your parameters are working correctly is to check whether the zoom buttons become grayed out—this indicates that the map has reached the minimum or maximum zoom level you’ve specified.

zooming in restricted

zooming out restricted

Control Panning Behavior

Creating a Bounding Box

You can stop users from dragging the map too far from your area of interest by setting a bounding box, which is established by the coordinates of the southwest and northeast corners (in WGS84):

var bounds = L.latLngBounds(
    L.latLng(40.80, -73.93), // Southwest corner
    L.latLng(40.83, -73.89)  // Northeast corner
);

map.setMaxBounds(bounds);

restricting how far users can pan the map

Locking the Map View

To keep the map completely locked within the bounding box area, add this extra code:

map.setMaxBounds(bounds);
map.on('drag', function() {
    map.panInsideBounds(bounds, { animate: false });
});

This prevents users from panning outside the designated boundary.

setting map boundaries to keep the view within a specific area








 
lmeisterlin
Previous

Adding GeoJSON Points to a Leaflet Map
Next

Using the Hotspot Analysis tool for Getis-Ord Gi*