In this javascript for leaflet.js the 'develop land' button is not adding building polygons to the map because  the trackcoordinates are not being properly defined. 'var money = 100000;
var numberOfCarriages = 1;
var speed = 60;
var dailybonus = 0;
var selectedMarker = null; // Variable to store the selected marker


const map = L.map("map").setView([54.2231637, -1.9381623], 6);
// Add custom zoom control to the map with position set to ‘topright’
const customZoomControl = L.control.zoom({ position: "topright" }).addTo(map);

// Remove the default zoom control from the map
map.removeControl(map.zoomControl);

let clickedPoints = [];
let isLineDrawn = false;
let marker; // Declare the marker variable
let progress = 0;
let cafeOneBonus = 0;
let cafeTwoBonus = 0;
let hotelOneBonus = 0;
let hotelTwoBonus = 0;
let buildingRadius = 0;
let buildingRadius2 = 0;
let trackcoordinates; // Define globally

// Function to create circle markers with click functionality
function createCircleMarkers(geojson) {
  return L.geoJSON(geojson, {
    pointToLayer: function (feature, latlng) {
      const circleMarker = L.circleMarker(latlng, {
        radius: 4,
        fillColor: "#ff7800",
        color: "#000",
        weight: 0.2,
        opacity: 1,
        fillOpacity: 0.8,
      });

      // Attach the feature to the circle marker
      circleMarker.feature = feature;

      circleMarker.on("mouseover", function () {
        this.bindPopup(feature.properties.city).openPopup();
      });

      circleMarker.on("click", function (e) {
        if (!isLineDrawn && selectedMarker !== e.target) {
          clickedPoints.push(e.target); // Push the circle marker with attached feature

          if (clickedPoints.length === 2) {
            const firstCityCoords =
              clickedPoints[0].feature.geometry.coordinates;
            const secondCityCoords =
              clickedPoints[1].feature.geometry.coordinates;

            const polyline = L.polyline(
              clickedPoints.map((p) => p.getLatLng())
            ).addTo(map);


     //create a bounding box from the polyline to query overpass api
            
            // Get the coordinates of the polyline
const polylineCoordinates = polyline.getLatLngs();

// Create an empty bounding box
let bounds = L.latLngBounds([]);

// Extend the bounding box with polyline coordinates
polylineCoordinates.forEach(coord => {
  bounds.extend(coord);
});

// Get the coordinates of the bounding box corners
const southWest = bounds.getSouthWest();
const northEast = bounds.getNorthEast();

// Use the bounding box coordinates to query the Overpass API
const overpassQuery = `
[out:json];
way["building"](${southWest.lat},${southWest.lng},${northEast.lat},${northEast.lng});
out body;
>;
out skel qt;
`;
  
            // Make the Overpass API fetch call
fetch('https://overpass-api.de/api/interpreter', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: 'data=' + encodeURIComponent(overpassQuery)
})
.then(response => response.json())
.then((data) => {
                          // Process the data returned by the Overpass API
                          data.elements.forEach((element) => {
                            if (element.type === "way") {
                              // Extract coordinates from the way element
                              const trackcoordinates = element.nodes.map(
                                (nodeId) => {
                                  const node = data.elements.find(
                                    (node) => node.id === nodeId
                                  );
                                  return [node.lat, node.lon];
                                }
                              );

                            
                            }
                          });
                        })

.catch(error => {
  console.error('Error fetching data from Overpass API:', error);
});

       
            
    
            const firstCity = clickedPoints[0].feature.properties.city;
            const secondCity = clickedPoints[1].feature.properties.city;

            clickedPoints = [];
            isLineDrawn = true;
            
        

            // Remove click event listener after a line has been drawn
            map.off("click");
            // Set the map bounds to show the area with the polyline
            map.fitBounds(polyline.getBounds());
            money = money - 50000; // Subtract 50000 from money
            const moneyDisplay = document.getElementById("moneydisplay");
            const moneyString = `£${money}`; // Assuming money is a number
            moneyDisplay.textContent = moneyString;

            const instructionsElement = document.getElementById("instructions");

            // Clear any existing content in the instructions element:
            instructionsElement.innerHTML = "";

            // Create separate paragraph elements:
            const congratulationsParagraph = document.createElement("p");
            congratulationsParagraph.textContent = `Congratulations you have built your first train line from ${firstCity} to ${secondCity}!`;

            const costsParagraph = document.createElement("p");
            costsParagraph.textContent = `Your construction costs were £50,000. You have £50,000 remaining.`;

            const buyTrainParagraph = document.createElement("p");
            buyTrainParagraph.textContent = "You now need to buy a train.";
            const newTrainParagraph = document.createElement("p");
            newTrainParagraph.textContent =
              "At this time you can only afford to buy the train engine the Sleeping Lion. The Sleeping Lion has a traveling speed of 60 miles per hour. It can pull four carriages. Which means your train will have a capacity of around 120 seated passengers";
            const traincost = document.createElement("p");
            traincost.textContent = `The Sleeping Lion will cost you £30,000 to purchase. Do you wish to buy the Sleeping Lion?`;

            // Append paragraphs to the instructions element:
            instructionsElement.appendChild(congratulationsParagraph);
            instructionsElement.appendChild(costsParagraph);
            instructionsElement.appendChild(buyTrainParagraph);
            instructionsElement.appendChild(newTrainParagraph);
            instructionsElement.appendChild(traincost);

            // Add button element:
            const buyButton = document.createElement("button");
            buyButton.id = "buybutton";
            buyButton.textContent = "Buy Train";

            // Append the button element to the instructions element:
            instructionsElement.appendChild(buyButton);

            //buybutton event listener

            document
              .getElementById("buybutton")
              .addEventListener("click", function () {
                // Check if you have enough money before purchase
                money = money - 30000; // Subtract 30000 from money
                const moneyDisplay = document.getElementById("moneydisplay");
                const moneyString = `£${money}`;
                moneyDisplay.textContent = moneyString;
                // Update instructions content after successful purchase
                instructionsElement.innerHTML = ""; // Clear previous content

                const successMessage = document.createElement("p");
                successMessage.textContent = `You now have a train line from ${firstCity} to ${secondCity} and a train! Press the button below to begin operations.`;
                instructionsElement.appendChild(successMessage);

                // Add button element:
                const trainButton = document.createElement("button");
                trainButton.id = "trainbutton";
                trainButton.textContent = "Start Train";

                // Append the button element to the instructions element:
                instructionsElement.appendChild(trainButton);

                trainButton.addEventListener("click", function () {
                  console.log("Train Started");

                  //emptyinstructions add improvement buttons
                  instructionsElement.innerHTML = ""; // Clear previous content

                  //randomgeneration of dailybonus
                  function generateDailyBonus(minBonus, maxBonus) {
                    const randomNumber =
                      Math.floor(Math.random() * (maxBonus - minBonus + 1)) +
                      minBonus;
                    dailybonus += randomNumber;
                    console.log(`Daily bonus of ${randomNumber} added!`);
                  }
                  
                  function buildingmanager() {
  // Create the button element
  const developButton = document.createElement("button");
  developButton.textContent = "Develop Land";
  developButton.id = "developLandButton"; // Optional: Add an ID for styling

  // Add event listener to run polyline code on click
  developButton.addEventListener('click', () => {
    // Create a polyline for the buildings
    const polyline = L.polyline(trackcoordinates, {
      color: "#333333",
      weight: 1,
    }).addTo(map);
  });

  // Append the button to the instructionsElement
  instructionsElement.appendChild(developButton);
}



                  //buy carriages

                  //add carriages button

                  const carriageButton = document.createElement("button");
                  carriageButton.id = "trainbutton";
                  carriageButton.textContent = "Buy Train Carriage";

                  const carriageMessage = document.createElement("p");
                  carriageMessage.textContent = `Buy another passenger carriage for your train for £20,000`;

                  instructionsElement.appendChild(carriageMessage);

                  // Append the button element to the instructions element:
                  instructionsElement.appendChild(carriageButton);
                  //cariagebutton logic

                  carriageButton.addEventListener("click", () => {
                    console.log("Carriage Bought");

                    // Check if enough money is available
                    if (money >= 20000) {
                      // Check if maximum number of carriages reached
                      if (numberOfCarriages < 4) {
                        numberOfCarriages++;
                        money -= 20000; // Subtract 20000 from money

                        const moneyDisplay =
                          document.getElementById("moneydisplay");
                        const moneyString = `£${money}`;
                        moneyDisplay.textContent = moneyString;

                        // Update marker content using the previously retrieved reference
                        markerContent.textContent = numberOfCarriages;
                        
                         // Remove button and message if max carriages reached after purchase
      if (numberOfCarriages === 4) {
        instructionsElement.removeChild(carriageButton);
        instructionsElement.removeChild(carriageMessage);
        buildingmanager()
      }
                        
                      } else {
                        console.log(
                          "Maximum number of carriages reached! You can't buy more."
                        );
                        
                        instructionsElement.removeChild(carriageButton);
                        instructionsElement.removeChild(carriageMessage);
                      }
                    }
                  });

                  //buy station cafes

                  //add station one cafe button
                  const stationOneMessage = document.createElement("p");
                  stationOneMessage.textContent = `Open a cafe in ${firstCity} Station for £2,500.`;

                  instructionsElement.appendChild(stationOneMessage);

                  // Add button element:
                  const cafeOneButton = document.createElement("button");
                  cafeOneButton.id = "trainbutton";
                  cafeOneButton.textContent = "Buy Cafe";

                  // Append the button element to the instructions element:
                  instructionsElement.appendChild(cafeOneButton);

                  //cafeonelogic
                  cafeOneButton.addEventListener("click", () => {
                    if (money >= 2500) {
                      // add a random number between 2000 and 7000 to dailbonus
                      generateDailyBonus(2000, 7000); // Call with cafe bonus range
                      cafeOneBonus = dailybonus;
                      console.log("Cafe one bought");
                      money -= 2500;

                      const moneyDisplay =
                        document.getElementById("moneydisplay");
                      const moneyString = `£${money}`;
                      moneyDisplay.textContent = moneyString;
                      instructionsElement.removeChild(cafeOneButton);
                      instructionsElement.removeChild(stationOneMessage);

                      //fetch data from Overpass API around first station

                      buildingRadius += 150;

                      const overpassQuery = `
[out:json];
way["building"](around:${buildingRadius},${firstCityCoords[1]},${firstCityCoords[0]});
out body;
>;
out skel qt;
`;

                      fetch("https://overpass-api.de/api/interpreter", {
                        method: "POST",
                        headers: {
                          "Content-Type": "application/x-www-form-urlencoded",
                        },
                        body: "data=" + encodeURIComponent(overpassQuery),
                      })
                        .then((response) => response.json())
                        .then((data) => {
                          // Process the data returned by the Overpass API
                          data.elements.forEach((element) => {
                            if (element.type === "way") {
                              // Extract coordinates from the way element
                              const coordinates = element.nodes.map(
                                (nodeId) => {
                                  const node = data.elements.find(
                                    (node) => node.id === nodeId
                                  );
                                  return [node.lat, node.lon];
                                }
                              );

                              // Create a polyline for the buildings
                              const polyline = L.polyline(coordinates, {
                                color: "#333333",
                                weight: 1,
                              }).addTo(map);
                            }
                          });
                        })
                        .catch((error) => {
                          console.error("Error fetching data:", error);
                        });
                    } else {
                    }
                  });

                  //add station two cafe buttons
                  const stationTwoMessage = document.createElement("p");
                  stationTwoMessage.textContent = `Open a cafe in ${secondCity} Station for £2,500.`;

                  instructionsElement.appendChild(stationTwoMessage);

                  // Add button element:
                  const cafeTwoButton = document.createElement("button");
                  cafeTwoButton.id = "trainbutton";
                  cafeTwoButton.textContent = "Buy Cafe";

                  // Append the button element to the instructions element:
                  instructionsElement.appendChild(cafeTwoButton);

                  //cafetwologic
                  cafeTwoButton.addEventListener("click", () => {
                    if (money >= 2500) {
                      // Generate a random number between 2000 (inclusive) and 7000 (exclusive)
                      generateDailyBonus(2000, 7000); // Call with cafe bonus range
                      cafeTwoBonus = dailybonus;
                      console.log("Cafe two bought");
                      money -= 2500;
                      const moneyDisplay =
                        document.getElementById("moneydisplay");
                      const moneyString = `£${money}`;
                      moneyDisplay.textContent = moneyString;
                      instructionsElement.removeChild(cafeTwoButton);
                      instructionsElement.removeChild(stationTwoMessage);

                      //fetch data from Overpass API around first station

                      buildingRadius2 += 150;

                      const overpassQuery = `
[out:json];
way["building"](around:${buildingRadius2},${secondCityCoords[1]},${secondCityCoords[0]});
out body;
>;
out skel qt;
`;

                      fetch("https://overpass-api.de/api/interpreter", {
                        method: "POST",
                        headers: {
                          "Content-Type": "application/x-www-form-urlencoded",
                        },
                        body: "data=" + encodeURIComponent(overpassQuery),
                      })
                        .then((response) => response.json())
                        .then((data) => {
                          // Process the data returned by the Overpass API
                          data.elements.forEach((element) => {
                            if (element.type === "way") {
                              // Extract coordinates from the way element
                              const coordinates = element.nodes.map(
                                (nodeId) => {
                                  const node = data.elements.find(
                                    (node) => node.id === nodeId
                                  );
                                  return [node.lat, node.lon];
                                }
                              );

                              // Create a polyline for the road
                              const polyline = L.polyline(coordinates, {
                                color: "#333333",
                                weight: 1,
                              }).addTo(map);
                              
                            }
                          });
                        });
                    } else {
                    }
                  });

                  //buyhotel
                  const hoteloneMessage = document.createElement("p");
                  hoteloneMessage.textContent = `Open a hotel in ${firstCity} Station for £10,000.`;

                  instructionsElement.appendChild(hoteloneMessage);

                  // Add button element:
                  const hoteloneButton = document.createElement("button");
                  hoteloneButton.id = "trainbutton";
                  hoteloneButton.textContent = "Buy Hotel";

                  // Append the button element to the instructions element:
                  instructionsElement.appendChild(hoteloneButton);
                  //hotelonelogic
                  hoteloneButton.addEventListener("click", () => {
                    if (money >= 10000) {
                      generateDailyBonus(8000, 24000); // Call with cafe bonus range
                      hotelOneBonus = dailybonus;
                      money -= 10000;
                      const moneyDisplay =
                        document.getElementById("moneydisplay");
                      const moneyString = `£${money}`;
                      moneyDisplay.textContent = moneyString;
                      instructionsElement.removeChild(hoteloneButton);
                      instructionsElement.removeChild(hoteloneMessage);

                      //fetch data from Overpass API around first station

                      buildingRadius += 200;

                      const overpassQuery = `
[out:json];
way["building"](around:${buildingRadius},${firstCityCoords[1]},${firstCityCoords[0]});
out body;
>;
out skel qt;
`;

                      fetch("https://overpass-api.de/api/interpreter", {
                        method: "POST",
                        headers: {
                          "Content-Type": "application/x-www-form-urlencoded",
                        },
                        body: "data=" + encodeURIComponent(overpassQuery),
                      })
                        .then((response) => response.json())
                        .then((data) => {
                          // Process the data returned by the Overpass API
                          data.elements.forEach((element) => {
                            if (element.type === "way") {
                              // Extract coordinates from the way element
                              const coordinates = element.nodes.map(
                                (nodeId) => {
                                  const node = data.elements.find(
                                    (node) => node.id === nodeId
                                  );
                                  return [node.lat, node.lon];
                                }
                              );

                              // Create a polyline for the road
                              const polyline = L.polyline(coordinates, {
                                color: "#333333",
                                weight: 1,
                              }).addTo(map);
                            }
                          });
                        });
                    } else {
                    }
                  });

                  const hoteltwoMessage = document.createElement("p");
                  hoteltwoMessage.textContent = `Open a hotel in ${secondCity} Station for £10,000.`;

                  instructionsElement.appendChild(hoteltwoMessage);

                  // Add button element:
                  const hoteltwoButton = document.createElement("button");
                  hoteltwoButton.id = "trainbutton";
                  hoteltwoButton.textContent = "Buy Hotel";

                  // Append the button element to the instructions element:
                  instructionsElement.appendChild(hoteltwoButton);
                  //hotelonelogic
                  hoteltwoButton.addEventListener("click", () => {
                    if (money >= 10000) {
                      generateDailyBonus(8000, 24000); // Call with cafe bonus range
                      hotelTwoBonus = dailybonus;
                      money -= 10000;
                      const moneyDisplay =
                        document.getElementById("moneydisplay");
                      const moneyString = `£${money}`;
                      moneyDisplay.textContent = moneyString;
                      instructionsElement.removeChild(hoteltwoButton);
                      instructionsElement.removeChild(hoteltwoMessage);

                      //fetch data from Overpass API around first station

                      buildingRadius2 += 200;

                      const overpassQuery = `
[out:json];
way["building"](around:${buildingRadius2},${secondCityCoords[1]},${secondCityCoords[0]});
out body;
>;
out skel qt;
`;

                      fetch("https://overpass-api.de/api/interpreter", {
                        method: "POST",
                        headers: {
                          "Content-Type": "application/x-www-form-urlencoded",
                        },
                        body: "data=" + encodeURIComponent(overpassQuery),
                      })
                        .then((response) => response.json())
                        .then((data) => {
                          // Process the data returned by the Overpass API
                          data.elements.forEach((element) => {
                            if (element.type === "way") {
                              // Extract coordinates from the way element
                              const coordinates = element.nodes.map(
                                (nodeId) => {
                                  const node = data.elements.find(
                                    (node) => node.id === nodeId
                                  );
                                  return [node.lat, node.lon];
                                }
                              );

                              // Create a polyline for the road
                              const polyline = L.polyline(coordinates, {
                                color: "#333333",
                                weight: 1,
                              }).addTo(map);
                            }
                          });
                        });
                    } else {
                    }
                  });

                  // starttrain
                  const firstPoint = L.latLng(
                    firstCityCoords[1],
                    firstCityCoords[0]
                  );
                  const secondPoint = L.latLng(
                    secondCityCoords[1],
                    secondCityCoords[0]
                  );

                  const intervalDuration = 10; // milliseconds per frame
                  const distance = firstPoint.distanceTo(secondPoint);
                  const steps = ((distance / speed) * 1000) / intervalDuration; // Assuming speed of 35 miles per hour
                  const latStep = (secondPoint.lat - firstPoint.lat) / steps;
                  const lngStep = (secondPoint.lng - firstPoint.lng) / steps;

                  const marker = L.marker(firstPoint, {
                    icon: L.divIcon({
                      className: "circle-marker", // Add a CSS class for styling (optional)
                      html: `<b>${numberOfCarriages}</b>`, // Include the number inside a bold tag
                      iconSize: [20, 20], // Adjust iconSize as needed (optional)
                    }),
                  }).addTo(map);
                  
                           // Assuming the marker variable is defined in this scope
                  const markerContent = marker.getElement().querySelector("b"); // Assuming bold tag for number

                  const moveMarker = (speed) => {
                    if (progress < steps) {
                      const newLat = firstPoint.lat + latStep * progress;
                      const newLng = firstPoint.lng + lngStep * progress;
                      const newLatLng = L.latLng(newLat, newLng);

                      marker.setLatLng(newLatLng); // Update the marker's position

                      progress++;
                      setTimeout(function () {
                        moveMarker(speed);
                      }, intervalDuration);
                    } else {
                      // Marker reaches the second point, update money
                      money +=
                        Math.floor(Math.random() * (2000 - 1000 + 1)) +
                        1000 * numberOfCarriages;
                      const moneyDisplay =
                        document.getElementById("moneydisplay");
                      const moneyString = `£${money}`;
                      moneyDisplay.textContent = moneyString;

                      // Wait two seconds before animating back and call moveBackMarker recursively
                      setTimeout(() => {
                        moveBackMarker(speed);
                      }, 2000); // Wait for 2 seconds (2000 milliseconds)
                    }
                  };

                  const moveBackMarker = (speed) => {
                    // Corrected calculation for animating back from second point to first
                    if (progress > 0) {
                      const newLat =
                        secondPoint.lat - latStep * (steps - progress);
                      const newLng =
                        secondPoint.lng - lngStep * (steps - progress);
                      const newLatLng = L.latLng(newLat, newLng);

                      marker.setLatLng(newLatLng); // Update the marker's position

                      progress--;
                      setTimeout(function () {
                        moveBackMarker(speed);
                      }, intervalDuration);
                    } else {
                      console.log("Reached starting point again.");
                      // Add random number to money and update display
                      money +=
                        Math.floor(Math.random() * (2000 - 1000 + 1)) +
                        1000 * numberOfCarriages;
                      const moneyDisplay =
                        document.getElementById("moneydisplay");
                      const moneyString = `£${money}`;
                      moneyDisplay.textContent = moneyString;

                      // Reset progress for next round trip
                      progress = 0;

                      // Recursively call moveMarker to start next animation cycle
                      moveMarker(speed);
                    }
                  };
                  moveMarker(speed); // Start the animation
                });
              });
          }
          
          else {
      selectedMarker = e.target; // Set the clicked marker as selected
      // Optional visual indication for selection (e.g., reduce opacity)
    }
          
        }
      });

      return circleMarker;
    },
  });
}

fetch("gb.geojson")
  .then((response) => response.json())
  .then((geojson) => {
    L.geoJSON(geojson, {
      fillColor: "none", // Style for polygon (empty fill)
      weight: 1,
      color: "#000",
      opacity: 1,
      fillOpacity: 0,
    }).addTo(map);
  })
  .catch((error) => {
    console.error("Error loading GeoJSON:", error);
  });

fetch("cities.geojson")
  .then((response) => response.json())
  .then((geojson) => {
    createCircleMarkers(geojson).addTo(map);
  })
  .catch((error) => {
    console.error("Error loading GeoJSON:", error);
  });

//24 hour clock display

const TIME_MULTIPLIER = 60 * 10; // 10 minutes = 600 seconds

// Function to format time in 24-hour format with leading zeros
function formatTime(hours, minutes) {
  // Handle the case where minutes reach 60 (should display the next hour)
  if (minutes === 60) {
    hours++;
    minutes = 0;
  }
  return `${hours.toString().padStart(2, "0")}:${minutes
    .toString()
    .padStart(2, "0")}`;
}

// Function to update the clock display and handle daily bonus
function updateClock() {
  const currentTime = new Date();

  // Simulate game time by multiplying actual time with multiplier
  const gameTime = new Date(currentTime.getTime() * TIME_MULTIPLIER);

  // Get hours and minutes in 24-hour format
  let hours = gameTime.getHours();
  // Get minutes and force them to the nearest multiple of 10 (ending in 0)
  let minutes = Math.floor(gameTime.getMinutes() / 10) * 10;
  // Format the time string with fixed minute handling
  const formattedTime = formatTime(hours, minutes);

  // Update the content of the div with the formatted time
  document.getElementById("timedisplay").textContent = formattedTime;

  // Check if it's midnight (00:00)
  if (hours === 0 && minutes === 0) {
    // Generate random daily bonus (modify as needed)
    money += cafeOneBonus + cafeTwoBonus + hotelOneBonus;
    const moneyDisplay = document.getElementById("moneydisplay");
    const moneyString = `£${money}`;
    moneyDisplay.textContent = moneyString;
    console.log(
      `Daily bonus of ${
        cafeOneBonus + cafeTwoBonus + hotelOneBonus + hotelTwoBonus
      } added! Total money: ${money}`
    ); // You can replace console.log with your desired action
  }
}

// Call the updateClock function initially
updateClock();

// Update the clock every second to simulate smooth time progression
setInterval(updateClock, 1000);

'