in this javascript for leaflet.js is there a way to use the grid square id of the added house image overlays in the 'if (houseImageOverlays.length === 4)' to check if the four added house image overlays are in a 2x2 grid 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;


// Array to keep track of house image overlays
var houseImageOverlays = [];

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);

    // Add the image overlay to the array and log the ID
    houseImageOverlays.push(imageOverlay);
    console.log("House image added for square ID:", clickedSquare.properties.id);

    if (houseImageOverlays.length === 4) {
      console.log('Four house image overlays have been added to the map');
    }
  }
}



// Function to handle square click and update color for parks
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).features.map(function(feature, index) {
    feature.properties = { id: index }; // Add property with sequential ID
    return feature;
});

// Extract IDs into an array
var squareIds = squareGrid.map(feature => feature.properties.id);

// Add GeoJSON layer with click event handler (optional, can be removed)
L.geoJSON(squareGrid, {
  style: function (feature) {
    return { weight: 0.5, fillOpacity: 0 }; // Style for squares
  },
  onEachFeature: function (feature, layer) {
    layer.on('click', function(e) {
      console.log("Clicked Square ID:", feature.properties.id);
    });
  }
}).addTo(map);
'