Leaflet Examples

bounding-box-distance-change.js

// Variable to store the previous bounds
let previousBounds = null;

// Event listener for the 'moveend' event of the map
map.on('moveend', () => {
  const currentBounds = map.getBounds();
  
  // Check if there are previous bounds
  if (previousBounds) {
    const distance = getDistance(previousBounds, currentBounds);
    const threshold = 25 * 1609.34; // 1 mile is approximately 1609.34 meters

    if (distance > threshold) {
      // Map has moved outside the threshold distance
      // Perform your desired actions here
      console.log('Map moved outside threshold distance');
    }
  }
  
  // Store the current bounds as previous bounds
  previousBounds = currentBounds;
});

// Function to calculate the distance between two bounds
function getDistance(bounds1, bounds2) {
  const center1 = bounds1.getCenter();
  const center2 = bounds2.getCenter();

  // Use a suitable distance calculation method, such as haversine formula
  // Here's an example using Leaflet's built-in distanceTo method
  return center1.distanceTo(center2);
}

trigger-zoom-out-not-in.js

// Variable to store the previous zoom level
let previousZoom = null;

// Event listener for the 'zoomend' event of the map
map.on('zoomend', () => {
  const currentZoom = map.getZoom();
  
  // Check if there are previous zoom level
  if (previousZoom !== null && currentZoom < previousZoom) {
    // Map has zoomed out
    // Perform your desired actions here
    console.log('Map zoomed out');
  }
  
  // Store the current zoom level as previous zoom level
  previousZoom = currentZoom;
});