id (String)
	
__typename
	
capturedAt
	
category
	
contactInfo
	
createdAt
	
currency
	
description
	
forSale
	
isOwn
	
isPublic
	
knowWhat
	
latitude
	
longitude
	
originalUri
	
ownerUsername
	
price
	
s3Key
	
title
	
updatedAt
	
uploadedAt
	
uploadStatus

id (String)
	
__typename
	
capturedAt
	
category
	
contactInfo
	
createdAt
	
currency
	
description
	
forSale
	
isOwn
	
isPublic
	
knowWhat
	
latitude
	
longitude
	
originalUri
	
ownerUsername
	
price
	
s3Key
	
title
	
updatedAt
	
uploadedAt
	
uploadStatus

ebff8a05-ee4a-4f60-b745-6aa95a796c95
Photo
2025-09-04T12:51:55.445Z
COMPONENT
Baron100@gmx.co.uk
2025-09-04T12:53:08.112Z
USD
Wheel
true
true
true
true
53.7142195
-2.0852214
file:///data/user/0/com.blackbox.whatsthis/cache/Camera/00a8dee7-113a-4ad6-a89b-873f2a6fd066.jpg
3418c498-7051-7002-2816-fb2537ba3a18
1
photos/1756990315445.jpg
Wheel
2025-09-04T12:53:08.112Z
2025-09-04T12:53:05.261Z
completed
28687ac2-b6ae-4058-8815-931ff7b196c6
Photo
2025-08-18T14:05:25.335Z
2025-08-18T14:15:09.174Z
USD
<empty>
false
false
true
false
54.2909618
-0.8498601
file:///data/user/0/com.blackbox.whatsthis/cache/Camera/7a8608eb-f6ee-486b-ab37-45099ef80ee1.jpg
64884418-6091-7041-46d2-37278eb3d00d
photos/1755525925335.jpg
Lodges 1
2025-08-18T14:15:09.174Z
2025-08-18T14:15:07.983Z
completed
9308c7a0-e8be-47a4-9e66-f8dff566dc06
Photo
2025-08-21T10:49:29.216Z
TOOL
Baron100@gmx.co.uk
2025-08-21T10:50:42.656Z
USD
Vac pump
true
true
true
true
53.7142256
-2.0852014
file:///data/user/0/com.blackbox.whatsthis/cache/Camera/74fe80cf-fee8-4b6d-bb0b-c77344c684b9.jpg
3418c498-7051-7002-2816-fb2537ba3a18
250
photos/1755773369216.jpg
Pump
2025-08-21T12:26:27.341Z
2025-08-21T12:26:25.004Z
completed
e0949602-b532-43e4-8903-75c69269efee
Photo
2025-08-21T10:51:21.643Z
TOOL
Baron100@gmx.co.uk
2025-08-21T10:52:28.443Z
USD
What's this?
true
true
true
true
53.7142256
-2.0852014
file:///data/user/0/com.blackbox.whatsthis/cache/Camera/bf22d258-e707-4018-8da4-2211cb636ba9.jpg
3418c498-7051-7002-2816-fb2537ba3a18
250
photos/1755773481643.jpg
Dunno
2025-08-21T10:52:28.443Z
2025-08-21T10:52:26.723Z
completed
c9c87422-66de-4e34-8e12-844ef86b968b
Photo
2025-12-26T14:02:27.423Z
2026-01-07T10:08:57.119Z
USD
A bar
false
false
true
true
54.5985496
-5.9314324
file:///data/user/0/com.blackbox.whatsthis/cache/Camera/72f62928-ae6c-46ba-a89a-c4a93803ab2a.jpg
2418e468-70b1-7081-dddc-72ae31eb93c2
photos/1766757747423.jpg
Fountain Lane
2026-01-07T10:08:57.119Z
2026-01-07T10:08:55.577Z
completed
e033878e-0ce0-4c79-a9e7-84947ac3b89a
Photo
2025-12-28T17:25:31.966Z
OTHER
2025-12-28T17:27:07.271Z
USD
A glass
false
true
true
true
54.600391
-5.9821984
file:///data/user/0/com.blackbox.whatsthis/cache/Camera/1944bf9c-be4d-45ed-885b-bcdc639802dd.jpg
2418e468-70b1-7081-dddc-72ae31eb93c2
photos/1766942731966.jpg
A glass
2025-12-28T17:27:07.271Z
2025-12-28T17:27:06.075Z
completed
84dbfe51-ff75-47b5-aadc-109028685389
Photo
2025-09-07T00:50:44.527Z
2025-09-07T00:51:11.360Z
USD
<empty>
false
false
true
false
53.711535
-1.2383125
file:///data/user/0/com.blackbox.whatsthis/cache/Camera/10295c70-f14d-4b49-9faa-1f5ca81dbc87.jpg
64884418-6091-7041-46d2-37278eb3d00d
photos/1757206244527.jpg
2025-09-07T00:51:11.360Z
2025-09-07T00:51:10.576Z
completed
5083d54f-14f8-4349-8991-504caa4bfe50
Photo
2025-08-18T14:06:17.205Z
2025-08-18T14:15:35.428Z
USD
<empty>
false
false
true
false
54.2909618
-0.8498601
file:///data/user/0/com.blackbox.whatsthis/cache/Camera/d155017a-7b71-490e-98e8-4984369fa24f.jpg
64884418-6091-7041-46d2-37278eb3d00d
photos/1755525977205.jpg
Lodges 2
2025-08-18T14:15:35.428Z
2025-08-18T14:15:35.024Z
completed
47e51722-7123-43a8-9434-0da52b305860
Photo
2025-08-19T13:14:30.340Z
FURNITURE
2025-08-19T16:40:07.345Z
USD
<empty>
false
false
true
false
53.7422181
-2.002401
file:///data/user/0/com.blackbox.whatsthis/cache/Camera/d643e044-06a3-430f-9217-da38303f2df2.jpg
64884418-6091-7041-46d2-37278eb3d00d
photos/1755609270340.jpg
2025-08-19T16:40:07.345Z
2025-08-19T16:40:07.504Z
completed
d1c15740-c119-4575-8c0f-3bc21293cc23
Photo
2025-09-04T10:03:01.726Z
2025-09-04T10:04:00.567Z
USD
Cafe tod
false
false
true
true
53.7122339
-2.1003307
file:///data/user/0/com.blackbox.whatsthis/cache/Camera/8042a7ad-6af6-45e2-8753-511ee7a799ad.jpg
3418c498-7051-7002-2816-fb2537ba3a18
photos/1756980181726.jpg
Cafe
2025-09-04T10:04:00.567Z
2025-09-04T10:03:58.716Z
completed
26082a22-04f9-405b-a8bf-c0f2b43faeaa
Photo
2025-08-18T22:47:04.701Z
ELECTRONICS
2025-08-18T22:50:27.036Z
USD
<empty>
false
false
true
false
38.9352251
-76.9825613
file:///data/user/0/com.blackbox.whatsthis/cache/Camera/6e52907d-ebb5-4864-907c-8ee88333bb05.jpg
f478f478-1061-70c7-4609-b58207229b78
photos/1755557224701.jpg
2025-08-18T22:50:27.036Z
2025-08-18T22:50:26.944Z
completed
d094545b-0a02-4f4d-abcd-535bcfd82c78
Photo
2025-08-18T14:06:48.526Z
2025-08-18T14:15:23.786Z
USD
<empty>
false
true
true
false
54.2909618
-0.8498601
file:///data/user/0/com.blackbox.whatsthis/cache/Camera/c6d26148-2420-4e15-9d0d-a77920b98bc5.jpg
64884418-6091-7041-46d2-37278eb3d00d
photos/1755526008526.jpg
Walk to the New inn
2025-08-18T14:15:23.786Z
2025-08-18T14:15:22.350Z
completed
4f612a67-d259-48f1-9885-70418146259c
Photo
2025-08-19T12:27:54.804Z
ANTIQUE
2025-08-19T12:29:12.224Z
USD
Ashtray
false
true
true
true
53.7142153
-2.0852204
file:///data/user/0/com.blackbox.whatsthis/cache/Camera/6a031a52-ad30-4255-a587-71568d4eee2e.jpg
3418c498-7051-7002-2816-fb2537ba3a18
photos/1755606474803.jpg
Unique ashtray
2025-08-19T12:29:12.224Z
2025-08-19T12:29:09.199Z
completed
beb07d25-eb90-4cab-b7e1-b13650289980
Photo
2025-08-29T11:33:07.468Z
ANIMAL
2025-08-29T11:33:53.009Z
USD
Dog
false
true
true
true
53.7142248
-2.0851987
file:///data/user/0/com.blackbox.whatsthis/cache/Camera/cf99f785-e94f-4db0-bf76-13807f3e2a00.jpg
3418c498-7051-7002-2816-fb2537ba3a18
photos/1756467187468.jpg
Bear
2025-08-29T11:33:53.009Z
2025-08-29T11:33:49.902Z
completed
5b1c98b0-7c22-4a47-8d15-35dd7da9a50d
Photo
2025-08-18T22:41:28.121Z
OTHER
2025-08-18T22:42:19.914Z
USD
Beer
false
true
true
true
38.9352373
-76.9825757
file:///data/user/0/com.blackbox.whatsthis/cache/Camera/b991ca76-2833-48b8-8c09-9c20597485d0.jpg
f478f478-1061-70c7-4609-b58207229b78
photos/1755556888121.jpg
2025-08-18T22:42:19.914Z
2025-08-18T22:42:19.751Z
completed
fa56d15b-a406-4c73-a0d2-f3b633fb22d5
Photo
2025-08-20T11:47:09.729Z
TOOL
2025-08-20T11:48:12.765Z
USD
Grinder
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WhatsThis - Live Map Viewer</title>
    <link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@500;700&family=Manrope:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css" />
    <style>
        :root {
            --teal: #1f5b4a;
            --clay: #c98546;
            --cream: #f6efe1;
            --stone: #5a5550;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: var(--cream);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: bounce;
        }
        
        #map {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
        }
        
        .overlay {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(246, 239, 225, 0.95);
            padding: 20px;
            border-radius: 16px;
            box-shadow: 0 14px 26px rgba(47, 42, 36, 0.15);
            z-index: 1000;
            max-width: 320px;
            max-height: calc(100vh - 40px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            transition: transform 0.3s ease;
        }
        
        .overlay.hidden {
            transform: translateX(-360px);
        }
        
        .toggle-btn {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(246, 239, 225, 0.95);
            border: none;
            padding: 12px;
            border-radius: 12px;
            cursor: pointer;
            font-size: 1.2rem;
            box-shadow: 0 4px 12px rgba(47, 42, 36, 0.15);
            z-index: 999;
            transition: left 0.3s ease;
        }
        
        .toggle-btn.overlay-visible {
            left: 360px;
        }
        
        .overlay h1 {
            font-size: 1.5rem;
            color: var(--teal);
            margin-bottom: 8px;
        }
        
        .overlay p {
            color: var(--stone);
            font-size: 0.9rem;
            margin-bottom: 12px;
        }
        
        .stats {
            display: flex;
            gap: 16px;
            margin-top: 12px;
        }
        
        .stat {
            text-align: center;
        }
        
        .stat-number {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--teal);
        }
        
        .stat-label {
            font-size: 0.8rem;
            color: var(--stone);
        }
        
        .loading {
            color: var(--clay);
            font-weight: 600;
        }
        
        .error {
            background: rgba(201, 133, 70, 0.2);
            padding: 12px;
            border-radius: 8px;
            color: var(--clay);
            margin-top: 12px;
        }
        
        .leaflet-popup-content-wrapper {
            border-radius: 12px;
            padding: 0;
        }
        
        .popup-content {
            padding: 12px;
        }
        
        .popup-content img {
            width: 100%;
            max-width: 250px;
            border-radius: 8px;
            margin-bottom: 8px;
        }
        
        .popup-title {
            font-weight: 600;
            color: var(--teal);
            margin-bottom: 4px;
        }
        
        .popup-category {
            display: inline-block;
            background: rgba(31, 91, 74, 0.12);
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 0.8rem;
            margin-bottom: 8px;
        }
        
        .popup-price {
            color: var(--clay);
            font-weight: 600;
            font-size: 1.1rem;
        }
        
        .map-switch {
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid rgba(90, 85, 80, 0.2);
        }
        
        .map-switch a {
            display: inline-block;
            padding: 8px 16px;
            background: var(--teal);
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 600;
            transition: background 0.2s;
        }
        
        .map-switch a:hover {
            background: var(--clay);
        }
        
        @media (max-width: 720px) {
            .overlay {
                max-width: calc(100% - 40px);
            }
        }
    </style>
</head>
<body>
    <div id="map"></div>
    
    <button class="toggle-btn overlay-visible" onclick="toggleOverlay()" aria-label="Toggle legend">☰</button>
    
    <div class="overlay" id="overlay">
        <h1>📍 WhatsThis Live</h1>
        <p>Explore geotagged discoveries from the community</p>

        <div id="status" class="loading">Loading photos...</div>
        <div class="stats">
            <div class="stat">
                <div class="stat-number" id="photoCount">0</div>
                <div class="stat-label">Photos</div>
            </div>
            <div class="stat">
                <div class="stat-number" id="locationCount">0</div>
                <div class="stat-label">Locations</div>
            </div>
        </div>
        <div class="map-switch">
            <a href="index.html">🏠 Back to Home</a>
        </div>
        <div class="map-switch">
            <a href="viewer-google.html">🌍 Switch to Google Maps</a>
        </div>
    </div>

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
    <script>
        const API_URL = 'https://jf87jgefr0.execute-api.us-east-1.amazonaws.com/main/photos';
        const API_KEY = 'BnrYPwc7bu5VeCoTAKEmT6KspHaklHkD1DN04AzL';
        const BUCKET_URL = 'https://amplify-d1u3qpprv2f0fu-ma-whatsthisphotosbucket532-mcxpp8fywwkj.s3.us-east-1.amazonaws.com';

        // Initialize map
        const map = L.map('map').setView([51.505, -0.09], 3);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        async function loadPhotos() {
            try {
                console.log('Fetching photos from API...');
                const response = await fetch(API_URL, {
                    method: 'GET',
                    headers: {
                        'x-api-key': API_KEY
                    }
                });

                console.log('Response status:', response.status);
                let result = await response.json();
                console.log('Raw result:', result);
                
                // Handle double-wrapped response from API Gateway
                if (result.body && typeof result.body === 'string') {
                    console.log('Unwrapping double-encoded response');
                    result = JSON.parse(result.body);
                }
                
                console.log('Parsed result:', result);
                const photos = result.photos;
                console.log('Photos array:', photos);
                
                if (!photos || photos.length === 0) {
                    document.getElementById('status').innerHTML = '<div class="error">No photos found. Upload some from the mobile app!</div>';
                    return;
                }
                
                // Track unique locations
                const locations = new Set();
                let validPhotos = 0;
                
                // Create marker cluster group
                const markers = L.markerClusterGroup({
                    maxClusterRadius: 50,
                    spiderfyOnMaxZoom: true,
                    showCoverageOnHover: false
                });
                
                // Add markers for each photo
                for (const photo of photos) {
                    console.log('Processing photo:', photo.id, 'imageUrl:', photo.imageUrl);
                    if (photo.latitude && photo.longitude) {
                        validPhotos++;
                        locations.add(`${photo.latitude},${photo.longitude}`);
                        
                        // Use signed URL from API
                        const imageUrl = photo.imageUrl;
                        console.log('Adding marker at:', photo.latitude, photo.longitude, 'with image:', imageUrl);
                        
                        // Create popup content
                        const popupContent = `
                            <div class="popup-content">
                                <img src="${imageUrl}" alt="${photo.title || 'Photo'}" onerror="this.style.display='none'" />
                                <div class="popup-title">${photo.title || 'Untitled'}</div>
                                ${photo.category ? `<div class="popup-category">${photo.category}</div>` : ''}
                                ${photo.description ? `<p style="font-size: 0.9rem; color: var(--stone);">${photo.description}</p>` : ''}
                                ${photo.forSale && photo.price ? `<div class="popup-price">${photo.currency || '$'}${photo.price}</div>` : ''}
                            </div>
                        `;
                        
                        // Create custom icon with photo thumbnail
                        const icon = L.divIcon({
                            className: 'photo-marker',
                            html: `<img src="${imageUrl}" style="width:50px;height:50px;border-radius:50%;border:3px solid white;box-shadow:0 2px 8px rgba(0,0,0,0.3);object-fit:cover;cursor:pointer;" />`,
                            iconSize: [50, 50],
                            iconAnchor: [25, 25]
                        });
                        
                        // Add marker to cluster group
                        const marker = L.marker([photo.latitude, photo.longitude], { icon })
                            .bindPopup(popupContent, { maxWidth: 300 });
                        markers.addLayer(marker);
                    }
                }
                
                // Add cluster group to map
                map.addLayer(markers);
                
                console.log('Total valid photos:', validPhotos, 'Unique locations:', locations.size);
                // Update stats
                document.getElementById('photoCount').textContent = validPhotos;
                document.getElementById('locationCount').textContent = locations.size;
                document.getElementById('status').textContent = `Showing ${validPhotos} live discoveries`;
                
                // Fit map to markers if we have photos
                if (validPhotos > 0) {
                    const bounds = L.latLngBounds(photos
                        .filter(p => p.latitude && p.longitude)
                        .map(p => [p.latitude, p.longitude])
                    );
                    map.fitBounds(bounds, { padding: [50, 50] });
                }
                
            } catch (error) {
                console.error('Error loading photos:', error);
                document.getElementById('status').innerHTML = `<div class="error">Error: ${error.message}</div>`;
            }
        }

        // Load photos on page load
        loadPhotos();
        
        function toggleOverlay() {
            const overlay = document.getElementById('overlay');
            const btn = document.querySelector('.toggle-btn');
            overlay.classList.toggle('hidden');
            btn.classList.toggle('overlay-visible');
        }
    </script>
</body>
</html>