https://coastalmonitoringac.netlify.app/historical_photos/showPhotos.js

1// This script should be called in the main.js file and call the fuctions to display the 360 photos
2
3// Import the getIconSize function
4import { getIconSize } from "../generalFunctions/getIconSize.js";
5import { createLegend } from "../generalFunctions/createLegend.js";
6
7// Create base icons without size (we'll update it dynamically)
8let drone = L.icon({
9  iconUrl: "./icons/drone_topo.png",
10  shadowSize: [20, 20],
11  popupAnchor: [0, 0],
12});
13
14let customIcon = L.icon({
15  iconUrl: "./icons/360-degree.png",
16  shadowSize: [20, 20],
17  popupAnchor: [0, 0],
18});
19
20export let photos = (photos360, map) => {
21  // Create legend items for the different photo types
22  const legendItems = [
23    {
24      src: "./icons/360-degree.png",
25      alt: "360° Photo",
26      text: "360° Photo",
27    },
28    {
29      src: "./icons/drone_topo.png",
30      alt: "Drone Survey",
31      text: "Drone Survey",
32    },
33  ];
34
35  // Add the legend to the map
36  createLegend(map, legendItems);
37
38  // Function to update markers on zoom
39  const updateMarkers = (markers) => {
40    const zoom = map.getZoom();
41    const { size, anchor } = getIconSize(zoom);
42
43    markers.forEach((marker) => {
44      const icon = marker.getIcon();
45      icon.options.iconSize = size;
46      icon.options.iconAnchor = anchor;
47      marker.setIcon(icon);
48    });
49  };
50
51  // Store all markers in an array
52  let markers = [];
53
54  for (let i = 0; i < photos360.length; i++) {
55    let beachName = photos360[i].beach;
56    let details = photos360[i].Details || "";
57    let photoType = photos360[i].type;
58    let markerIcon = photoType === "360" ? customIcon : drone;
59
60    // Set initial size based on current zoom
61    const { size, anchor } = getIconSize(map.getZoom());
62    markerIcon.options.iconSize = size;
63    markerIcon.options.iconAnchor = anchor;
64
65    // Extract and format date from title (format: name_YYYYMMDD)
66    let formattedDate;
67
68    // If drone metadata → use surveyDates array
69    if (photoType === "drone" && photos360[i].surveyDates) {
70      formattedDate = photos360[i].surveyDates.join("<br>");
71    } else {
72      // Existing behaviour for 360° photos
73      const dateStr = photos360[i].title.split("_")[1];
74      formattedDate = dateStr
75        ? `${dateStr.slice(0, 4)}/${dateStr.slice(4, 6)}/${dateStr.slice(6, 8)}`
76        : "Date not available";
77    }
78
79    // Format coordinates
80    const [lat, lon] = photos360[i].coordinates;
81    const coords = `${lat.toFixed(6)}, ${lon.toFixed(6)}`;
82
83    const popupContent = `
84      <div class="photo-popup">
85        <div class="popup-content">
86          <div style='background-color: white; color: black; padding: 10px;'>
87
88            <b>Beach:</b><br>
89            <span class="popup-value">${beachName}</span><br>
90
91            <b>Details:</b><br>
92            <span class="popup-value">${details}</span><br>
93
94            <b>Coordinates:</b><br>
95            <span class="popup-value">${coords}</span><br>
96
97            <b>${photoType === "360" ? "Date" : "Dates"}:</b><br>
98            <span class="popup-value">${formattedDate}</span><br>
99
100            ${
101              photoType === "360" && photos360[i].link
102                ? `<div style='text-align: center; margin-top: 8px;'>
103                    <button style='background-color: #00304b; color: white; padding: 5px 10px; border-radius: 5px; border: none; cursor: pointer;' onclick="window.open('${photos360[i].link}', '_blank')">
104                      View 360° Photo
105                    </button>
106                  </div>`
107                : ""
108            }
109
110          </div>
111        </div>
112      </div>
113    `;
114
115
116
117    let tmpMarker = L.marker(photos360[i].coordinates, {
118      icon: markerIcon,
119      title: photos360[i].title,
120    })
121      .bindPopup(popupContent)
122      .addTo(map);
123
124    markers.push(tmpMarker);
125  }
126
127  // Add zoom event listener
128  map.on("zoomend", () => updateMarkers(markers));
129};