map.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/x-icon" href="/img/tree.png">
  <title>NYC Birthday Tree Finder</title>

  <!-- Leaflet CSS -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
  />

  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 16px;
    }

    #controls {
      margin-bottom: 12px;
    }

    #map {
      height: 600px;
      width: 100%;
    }

    input, button {
      padding: 8px;
      font-size: 16px;
    }

    button {
      cursor: pointer;
    }

    pre {
      background: #f4f4f4;
      padding: 12px;
      overflow-x: auto;
    }
  </style>
</head>
<body>

  <h2>NYC Birthday Tree Explorer 🌳</h2>

  <div id="controls">
    <label>
      Birthday:
      <input type="date" id="birthday" />
    </label>
    <button onclick="submitBirthday()">Find My Tree</button>
  </div>

  <div id="map"></div>

  <h3>Raw Response</h3>
  <pre id="output"></pre>

  <!-- Leaflet JS -->
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

  <script>
    const map = L.map("map").setView([40.7128, -74.0060], 12);

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution: "© OpenStreetMap contributors"
    }).addTo(map);

    let markers = [];

    function clearMarkers() {
      markers.forEach(m => map.removeLayer(m));
      markers = [];
    }

    let treeIcon = L.icon({
      iconUrl: 'img/tree.png',
      iconSize:     [32 , 25], // size of the icon
      iconAnchor:   [16 , 25], // point of the icon which will correspond to marker's location. Also the center point
      popupAnchor:  [0 , -25] // point from which the popup should open relative to the iconAnchor
    });

    let restIcon = L.icon({
      iconUrl: 'img/eating.png',
      iconSize:     [32 , 25], // size of the icon
      iconAnchor:   [16 , 25], // point of the icon which will correspond to marker's location. Also the center point
      popupAnchor:  [0 , -25] // point from which the popup should open relative to the iconAnchor
    });

    let parkingIcon = L.icon({
      iconUrl: 'img/parking.png',
      iconSize:     [32 , 25], // size of the icon
      iconAnchor:   [16 , 25], // point of the icon which will correspond to marker's location. Also the center point
      popupAnchor:  [0 , -25] // point from which the popup should open relative to the iconAnchor
    });

    async function submitBirthday() {
      const birthdayInput = document.getElementById("birthday").value;
      if (!birthdayInput) {
        alert("Please enter a birthday");
        return;
      }

      // Convert YYYY-MM-DD to MM/DD/YYYY
      const [year, month, day] = birthdayInput.split("-");
      const formattedBirthday = `${month}/${day}/${year}`;

      const response = await fetch("http://localhost:8000/query", {
        method: "POST",
        headers: {
          "accept": "application/json",
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          birthday: formattedBirthday
        })
      });

      const data = await response.json();
      document.getElementById("output").textContent =
        JSON.stringify(data, null, 2);
      
      renderMap(data);
    }

    function renderMap(data) {
      clearMarkers();
      const tree = data.birthday_tree;
      const restaurant = data.nearby_problem_restaurant;
      const parking = data.nearby_parking_space;

      if (tree?.location) {
        const treeMarker = L.marker([
          tree.location.latitude,
          tree.location.longitude
        ], { icon: treeIcon })
          .addTo(map)
          .bindPopup(
            `<b>Birthday Tree</b><br/>
             <b>Species:</b> ${tree.species}<br/>
             <b>Address:</b> ${tree.location.address}<br/>
             <b>Zip:</b> ${tree.location.postcode}`
          );

        markers.push(treeMarker);
        map.setView([tree.location.latitude, tree.location.longitude], 15);
      }

      if (restaurant?.Latitude && restaurant?.Longitude) {
        const restaurantMarker = L.marker([
          restaurant.Latitude,
          restaurant.Longitude
        ], { icon: restIcon })
          .addTo(map)
          .bindPopup(
            `<b>Very good and totally not bad restaurant</b><br/>
             <b>Cuisine type:</b> ${restaurant["CUISINE DESCRIPTION"]}<br/>
             <b>Resturant name:</b> ${restaurant["RESTURANT NAME"]}<br/>
             <b>Totally not violations:</b> ${restaurant["VIOLATION DESCRIPTION"]}`
          );

        markers.push(restaurantMarker);
      }

      if (parking?.Latitude && parking?.Longitude) {
        const parkingMarker = L.marker([
          parking.Latitude,
          parking.Longitude
        ], { icon: parkingIcon })
          .addTo(map)
          .bindPopup(
            `<b>Parking Space</b><br/>
             <b>Street:</b> ${parking.On_Street}<br/>
             <b>Borough:</b> ${parking.Borough}<br/>
             <b>Note:</b> ${parking.Meter_Hours}`
          );

        markers.push(parkingMarker);
      }
    }
  </script>

</body>
</html>