How to Synchronize Four Leaflet Maps with Real-Time Zoom and Pan on a Single Page

Creating interactive maps for web applications is easier than ever with Leaflet, a lightweight, open-source JavaScript library. In this tutorial, we’ll show you how to display four synchronized Leaflet maps on a single page, where panning or zooming one map instantly updates the others in real-time. By using the zoom event (instead of zoomend), we ensure immediate synchronization during zoom interactions, providing a seamless user experience.

Why Synchronize Multiple Leaflet Maps?

Synchronizing multiple maps allows users to compare different map views or datasets for the same geographic area. For example, you might display street maps, satellite imagery, or data layers (e.g., weather, traffic) side-by-side, with all maps staying aligned as the user navigates. Real-time synchronization enhances usability, making it perfect for applications like:

Geographic Comparison: View different map styles or layers simultaneously.
Data Visualization: Compare datasets like population density or environmental data.
Educational Tools: Display historical and modern maps for teaching purposes.

In this guide, we’ll create four Leaflet maps in a 2x2 grid, synchronized for both panning and zooming in real-time, using the latest Leaflet version (1.9.4) as of May 2025.

The Code: Four Synchronized Leaflet Maps

Below is the complete code to create four synchronized Leaflet maps on a single page. The maps are arranged in a 2x2 grid, and any pan or zoom action on one map instantly updates the others.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Four Synchronized Leaflet Maps</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style>
        body {
            margin: 0;
            padding: 10px;
            box-sizing: border-box;
        }
        #map-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 10px;
            height: 95vh;
        }
        .map {
            width: 100%;
            height: 100%;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="map-container">
        <div id="map1" class="map"></div>
        <div id="map2" class="map"></div>
        <div id="map3" class="map"></div>
        <div id="map4" class="map"></div>
    </div>

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
        // Initialize four Leaflet maps
        const maps = [
            L.map('map1').setView([51.505, -0.09], 13),
            L.map('map2').setView([51.505, -0.09], 13),
            L.map('map3').setView([51.505, -0.09], 13),
            L.map('map4').setView([51.505, -0.09], 13)
        ];

        // Add OpenStreetMap tiles to each map
        maps.forEach(map => {
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);
        });

        // Flag to prevent infinite event loops
        let isUpdating = false;

        // Function to sync all maps
        function syncMaps(sourceMap) {
            if (isUpdating) return;
            isUpdating = true;

            const center = sourceMap.getCenter();
            const zoom = sourceMap.getZoom();

            maps.forEach(map => {
                if (map !== sourceMap) {
                    map.setView(center, zoom, { animate: false });
                }
            });

            isUpdating = false;
        }

        // Add event listeners for move and zoom events
        maps.forEach(map => {
            map.on('move', () => syncMaps(map));
            map.on('zoom', () => syncMaps(map));
        });
    </script>
</body>
</html>

How the Code Works

Here’s a breakdown of the code to help you understand its components:

HTML Structure:
- A div with id="map-container" uses CSS Grid to create a 2x2 layout for four map containers (map1, map2, map3, map4).
- Each map div has a map class for consistent styling.
CSS Styling:
- The grid layout ensures equal-sized maps with a 10px gap between them.
- Maps fill their containers, with a light border for clarity and a height of 95vh to nearly fill the viewport.
JavaScript Logic:
- Initialization: Four Leaflet maps are created, all centered on London ([51.505, -0.09]) with an initial zoom level of 13.
- Tile Layer: Each map uses OpenStreetMap tiles for consistent visuals.
- Synchronization: The syncMaps function updates all maps (except the source map) to match the center and zoom of the interacted map. The isUpdating flag prevents infinite event loops caused by cascading updates.
- Event Listeners: The move event handles panning, and the zoom event ensures real-time synchronization during zooming (not waiting for zoom completion).

Key Features

Real-Time Synchronization: Panning or zooming one map instantly updates the other three, thanks to the zoom event.
Performance Optimization: The isUpdating flag prevents redundant updates, ensuring smooth performance.
Responsive Design: The CSS Grid layout adapts to various screen sizes, making it mobile-friendly.
No Animation: The animate: false option in setView ensures smooth updates during continuous interactions.

How to Use the Code

Copy the code above into a file named index.html.
Open it in a modern browser (e.g., Chrome, Firefox, Edge).
Pan or zoom any map, and watch the other three maps synchronize instantly in real-time.

Use Cases for Synchronized Maps

Comparative Mapping: Display different map styles (e.g., street, satellite, terrain) for the same geographic area.
Data Analysis: Visualize multiple datasets, such as traffic patterns or weather data, side-by-side.
Interactive Dashboards: Build real-time geographic visualizations for business or research applications.
Educational Tools: Compare historical and modern maps for teaching geography or history.

Browser Support

As of May 2025, Leaflet (version 1.9.4) is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. Ensure an internet connection to load the Leaflet library and OpenStreetMap tiles via CDNs. For older browsers, consider adding fallbacks or polyfills.

Extending the Example

You can enhance this setup with additional features:

Custom Tile Layers: Use different providers like Mapbox or Esri for each map.
Toggle Synchronization: Add a button to enable/disable sync for specific maps.
Markers and Overlays: Include synchronized markers, popups, or data layers for richer visualizations.
Dynamic Zoom Limits: Set minimum and maximum zoom levels to control user interactions.

Performance Considerations

Using the zoom event (instead of zoomend) ensures real-time updates but may trigger more frequent events, especially during smooth zooming. The isUpdating flag mitigates performance issues by preventing recursive updates. Test on your target devices to ensure smooth performance, especially on low-end hardware.

Conclusion

Synchronizing four Leaflet maps with real-time zoom and pan is a powerful way to create interactive, comparative map experiences. By using the zoom and move events, this implementation ensures instant updates across all maps, enhancing user engagement. The provided code is ready to use, fully tested, and can be customized for advanced use cases. Copy it, test it, and elevate your web application with synchronized maps!

Call to Action: Try the code above and share your synchronized map projects in the comments! Have questions or want to add features like custom layers or markers? Let us know, and we’ll guide you through the next steps.