I this javascript for leaflet.js I want to add a marker to the center of a clicked grid square rather than give it a yellow fill when the housesButton is selected - '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 update color for parks
function houseSquareClick(e) {
  if (gridClickEnabled) {
    var clickedSquare = e.target.feature;
    clickedSquare.properties = {fillColor: 'yellow', fillOpacity: 1 }; // Change color to green
    e.target.setStyle(clickedSquare.properties); // Update style on map
  }
}

// Function to handle square click and update color for parks
function parkSquareClick(e) {
  if (gridClickEnabled) {
    var clickedSquare = e.target.feature;
    clickedSquare.properties = {fillColor: 'green', fillOpacity: 1 }; // Change color to green
    e.target.setStyle(clickedSquare.properties); // Update style on 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: 'black', 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: 1, fillOpacity: 0 }; // Initial style for squares
  }
}).addTo(map);
'