in this javascript for leaflet.js I am adding an image overlay when grid squares are clicked. How can I detect when four squares have been clicked in a 2x2 pattern - 'var map = L.tileLayer('', {
  maxZoom: 20,
  subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
});

// initialize the map on the "map" div with a given center and zoom
var map = L.map('map', {
  layers: [map]
}).setView([-5.0750, 19.4250], 13);

// Flag to track grid click event state (combined for roads and parks)
var gridClickEnabled = false;

// Function to handle square click and add an image overlay at the center for houses
function houseSquareClick(e) {
  if (gridClickEnabled) {
    var clickedSquare = e.target.feature;
    
    // Get the center of the clicked square
    var centerCoords = turf.centroid(clickedSquare);
    
    // Get the bounding box of the clicked square
    var bbox = e.target.getBounds();
    
  var imageUrl = 'https://cdn.glitch.global/12fb2e80-41df-442d-8bf7-be84a3d85f59/_5bf487a3-e022-43b0-bbbb-29c7d2337032.jpeg?v=1713694179855';
var latLngBounds = L.latLngBounds([[bbox.getSouth(), bbox.getWest()], [bbox.getNorth(), bbox.getEast()]]);

var imageOverlay = L.imageOverlay(imageUrl, latLngBounds, {
    opacity: 0.8,
    interactive: true
}).addTo(map);

  }
}

// Function to handle square click and update color for parks
// Function to handle square click and add an image overlay at the center for houses
function parkSquareClick(e) {
  if (gridClickEnabled) {
    var clickedSquare = e.target.feature;
    
    // Get the center of the clicked square
    var centerCoords = turf.centroid(clickedSquare);
    
    // Get the bounding box of the clicked square
    var bbox = e.target.getBounds();
    
  var imageUrl = 'https://cdn.glitch.global/12fb2e80-41df-442d-8bf7-be84a3d85f59/_a771ce0e-61e1-44e5-860f-716e495098e7.jpeg?v=1713694447500';
var latLngBounds = L.latLngBounds([[bbox.getSouth(), bbox.getWest()], [bbox.getNorth(), bbox.getEast()]]);

var imageOverlay = L.imageOverlay(imageUrl, latLngBounds, {
    opacity: 0.8,
    interactive: true
}).addTo(map);

  }
}

// Function to handle square click and update color for roads (optional)
function squareClick(e) {
  if (gridClickEnabled) {
    var clickedSquare = e.target.feature;
    clickedSquare.properties = {fillColor: 'gray', fillOpacity: 1 }; // Change color to black
    e.target.setStyle(clickedSquare.properties); // Update style on map
  }
}

// Get references to the button elements
var parksButton = document.getElementById("parksButton");
var roadsButton = document.getElementById("roadsButton");
var housesButton = document.getElementById("housesButton");


// Function to toggle grid click event based on button
function toggleGridClick(featureType) { // Renamed for clarity
  
   // Update gridClickEnabled based on button click, but only if different from current state
  if (featureType === "parks") {
    gridClickEnabled = !gridClickEnabled || featureType !== "roads" || featureType !== "houses"; // Handle all three features
  } else if (featureType === "roads") {
    gridClickEnabled = !gridClickEnabled || featureType !== "parks" || featureType !== "houses"; // Handle all three features
  } else if (featureType === "houses") { // New feature type for houses
    gridClickEnabled = !gridClickEnabled || featureType !== "parks" || featureType !== "roads"; // Handle all three features
  }


  map.eachLayer(function(layer) { // Check for existing square grid layer
    if (layer.feature && layer.feature.geometry.type === 'Polygon') {
      layer.off('click'); // Remove all click listeners before adding a new one

      if (gridClickEnabled) {
        if (featureType === "parks") {
          layer.on('click', parkSquareClick); // Add click listener for parks
          parksButton.innerText = "Parks On";
          roadsButton.innerText = "Roads Off";
          housesButton.innerText = "Houses Off";
          // Update button text
        } else if (featureType === "roads") { // Optional for roads button
          layer.on('click', squareClick); // Add click listener for roads
          roadsButton.innerText = "Roads On";
          parksButton.innerText = "Parks Off";
          housesButton.innerText = "Houses Off";
          // Update button text (optional)
        }else if (featureType === "houses") { // New click listener for houses
          layer.on('click', houseSquareClick); // Add click listener for houses
          housesButton.innerText = "Houses On";
          parksButton.innerText = "Parks Off";
          roadsButton.innerText = "Roads Off"; // Update button text for houses
        }
      } else {
        parksButton.innerText = "Parks Off"; // Update button text
        roadsButton.innerText = "Roads Off"; // Update button text (optional)
        housesButton.innerText = "Houses Off"; // Update button text (optional)
      }
    }
  });
}

// Add click event listeners to the buttons
parksButton.addEventListener("click", function() {
  toggleGridClick("parks");
});
roadsButton.addEventListener("click", function() {
  toggleGridClick("roads"); // Optional for roads button
});
housesButton.addEventListener("click", function() {
  toggleGridClick("houses"); 
});

// Square Grid
var bbox = [19.35, -5, 19.5, -5.15];
var cellSide = 1;
var options = {units: 'kilometers'};
var squareGrid = turf.squareGrid(bbox, cellSide, options);

// Add GeoJSON layer with click event handler (optional, can be removed)
L.geoJSON(squareGrid, {
  style: function (feature) {
    return {weight: 0.5, fillOpacity: 0 }; // Initial style for squares
  }
}).addTo(map);
'