pretix-map 0.1.2__py3-none-any.whl → 0.1.4__py3-none-any.whl

pretix_mapplugin/static/pretix_mapplugin/js/salesmap.js

@@ -1,105 +1,118 @@
-// Wait for the DOM to be fully loaded before running map code
 document.addEventListener('DOMContentLoaded', function () {
-    console.log("Sales Map JS Loaded (FINAL TEST - INCLUDING TOGGLE)");
+    console.log("Sales Map JS Loaded (Cluster Toggle & Heatmap Opts)");
+
+    // --- L.Icon.Default setup ---
+    try {
+        delete L.Icon.Default.prototype._getIconUrl;
+        L.Icon.Default.mergeOptions({
+            iconRetinaUrl: '/static/leaflet/images/marker-icon-2x.png',
+            iconUrl: '/static/leaflet/images/marker-icon.png',
+            shadowUrl: '/static/leaflet/images/marker-shadow.png',
+            iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34],
+            tooltipAnchor: [16, -28], shadowSize: [41, 41]
+        });
+        console.log("Set Leaflet default icon image paths explicitly.");
+    } catch (e) {
+        console.error("Error setting icon path:", e);
+    }
+    // --- End L.Icon.Default setup ---
+
 
     // --- Configuration ---
     const mapContainerId = 'sales-map-container';
     const statusOverlayId = 'map-status-overlay';
-    const toggleButtonId = 'view-toggle-btn';
+    const viewToggleButtonId = 'view-toggle-btn';
+    const clusterToggleButtonId = 'cluster-toggle-btn';
+    const heatmapOptionsPanelId = 'heatmap-options-panel';
     const initialZoom = 5;
-    const defaultMapView = 'pins'; // Can be 'pins' or 'heatmap'
-    const heatmapOptions = {
-        radius: 25,
-        blur: 15,
-        maxZoom: 18,
-        // max: 1.0, // Let leaflet-heat calculate max based on data density
-        minOpacity: 0.2
+    const defaultMapView = 'pins';
+
+    // --- Globals & State ---
+    let map = null;
+    let coordinateData = [];
+    let pinLayer = null;
+    let heatmapLayer = null;
+    let currentView = defaultMapView;
+    let dataUrl = null;
+    let isClusteringEnabled = true;
+    let heatmapOptions = {
+        radius: 25, blur: 15, maxZoom: 18, minOpacity: 0.2
     };
 
-    // --- Globals ---
-    let map = null; // Leaflet map instance
-    let coordinateData = []; // To store fetched [{lat: Y, lon: X, tooltip: Z}, ...] objects
-    let pinLayer = null; // Layer for markers/clusters
-    let heatmapLayer = null; // Layer for heatmap
-    let currentView = defaultMapView; // Track current view state
-    let dataUrl = null; // To store the API endpoint URL
-
+    // --- DOM Elements ---
     const mapElement = document.getElementById(mapContainerId);
     const statusOverlay = document.getElementById(statusOverlayId);
-    const toggleButton = document.getElementById(toggleButtonId);
-
-    // --- Helper to update status overlay ---
+    const viewToggleButton = document.getElementById(viewToggleButtonId);
+    const clusterToggleButton = document.getElementById(clusterToggleButtonId);
+    const heatmapOptionsPanel = document.getElementById(heatmapOptionsPanelId);
+    const heatmapRadiusInput = document.getElementById('heatmap-radius');
+    const heatmapBlurInput = document.getElementById('heatmap-blur');
+    const heatmapMaxZoomInput = document.getElementById('heatmap-maxZoom');
+    const radiusValueSpan = document.getElementById('radius-value');
+    const blurValueSpan = document.getElementById('blur-value');
+    const maxZoomValueSpan = document.getElementById('maxzoom-value');
+
+    // --- Status Update Helpers ---
     function updateStatus(message, isError = false) {
         if (statusOverlay) {
             const p = statusOverlay.querySelector('p');
             if (p) {
                 p.textContent = message;
-                p.className = isError ? 'text-danger' : ''; // Apply error class if needed
+                p.className = isError ? 'text-danger' : '';
             }
-            statusOverlay.style.display = 'flex'; // Make sure it's visible
+            statusOverlay.style.display = 'flex';
         } else {
             console.warn("Status overlay element not found.");
         }
     }
 
-    // --- Helper to hide status overlay ---
     function hideStatus() {
         if (statusOverlay) {
-            statusOverlay.style.display = 'none'; // Hide the overlay
+            statusOverlay.style.display = 'none';
         }
     }
 
+    // --- End Status Helpers ---
+
+
     // --- Initialization ---
     function initializeMap() {
-        console.log("Initializing Leaflet map...");
-
         if (!mapElement) {
-            console.error(`Map container element #${mapContainerId} not found.`);
-            return; // Stop initialization if container is missing
+            console.error(`Map container #${mapContainerId} not found.`);
+            return;
         }
         if (!statusOverlay) {
-            console.warn("Status overlay not found");
-        }
-        if (!toggleButton) {
-            // Log a warning but don't necessarily stop if button is missing
-            console.warn(`Toggle button #${toggleButtonId} not found.`);
+            console.warn("Status overlay element not found.");
         }
+        if (!viewToggleButton) console.warn("View toggle button not found.");
+        if (!clusterToggleButton) console.warn("Cluster toggle button not found.");
+        if (!heatmapOptionsPanel) console.warn("Heatmap options panel not found.");
+        if (!heatmapRadiusInput || !heatmapBlurInput || !heatmapMaxZoomInput) console.warn("Heatmap input elements missing.");
 
-        // --- Get the data URL from the container's data attribute ---
         dataUrl = mapElement.dataset.dataUrl;
         if (!dataUrl) {
-            console.error("Data URL not found in container's data-data-url attribute! Cannot fetch data.");
             updateStatus("Configuration Error: Missing data source URL.", true);
-            return; // Stop initialization if data URL is missing
+            return;
         }
         console.log(`Data URL found: ${dataUrl}`);
-        // --- End data URL retrieval ---
-
-        // Set Leaflet default image path (if needed, depends on static file setup)
-        L.Icon.Default.imagePath = '/static/leaflet/images/'; // Ensure this path is correct
-        console.log("Set Leaflet default imagePath to:", L.Icon.Default.imagePath);
-
-        console.log("Initializing Leaflet map...");
         updateStatus("Initializing map...");
+
         try {
-            map = L.map(mapContainerId).setView([48.85, 2.35], initialZoom); // Default center
+            map = L.map(mapContainerId).setView([48.85, 2.35], initialZoom);
             console.log("L.map() called successfully.");
 
-            console.log("Adding Tile Layer...");
             L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+                maxZoom: 18,
+            }).on('load', function () {
+                console.log('Base tiles loaded.');
             }).addTo(map);
             console.log("Tile layer added successfully.");
 
-            // Setup toggle button listener if it exists
-            if (toggleButton) {
-                setupToggleButton(); // Call setup function
-            } else {
-                console.log("Toggle button not found, skipping listener setup.");
-            }
-
-            // Fetch data and populate the map layers
-            fetchCoordinateData();
+            if (viewToggleButton) setupViewToggleButton();
+            if (clusterToggleButton) setupClusterToggleButton();
+            setupHeatmapControls();
+            fetchDataAndDraw();
 
         } catch (error) {
             console.error("ERROR during Leaflet initialization:", error);
@@ -107,137 +120,116 @@ document.addEventListener('DOMContentLoaded', function () {
         }
     }
 
-    // --- Data Fetching ---
-    function fetchCoordinateData() {
-        // dataUrl should be set during initialization
-        if (!dataUrl) {
-            console.error("Cannot fetch data: dataUrl is not set.");
-            return;
-        }
 
+    // --- Data Fetching & Initial Drawing ---
+    function fetchDataAndDraw() {
+        if (!dataUrl) return;
         console.log("Fetching coordinates from:", dataUrl);
-        updateStatus("Loading ticket locations..."); // Update status
+        updateStatus("Loading ticket locations...");
+        if (viewToggleButton) viewToggleButton.disabled = true;
+        if (clusterToggleButton) clusterToggleButton.disabled = true;
+        disableHeatmapControls(true);
 
         fetch(dataUrl)
             .then(response => {
-                if (!response.ok) {
-                    // Throw an error with status text to be caught below
-                    throw new Error(`HTTP error! Status: ${response.status} ${response.statusText}`);
-                }
+                if (!response.ok) throw new Error(`HTTP error! Status: ${response.status} ${response.statusText}`);
                 return response.json();
             })
             .then(data => {
-                if (data.error) { // Check for application-level errors from the backend
-                    throw new Error(`API Error: ${data.error}`);
-                }
-                // --- Adjust check for the new data structure ---
+                if (data.error) throw new Error(`API Error: ${data.error}`);
                 if (!data || !data.locations || !Array.isArray(data.locations)) {
-                    console.warn("Invalid or empty data format received:", data);
-                    updateStatus("No valid geocoded ticket locations found.", false); // Inform user
-                    if (toggleButton) toggleButton.disabled = true; // Disable button if no data
-                    coordinateData = []; // Ensure it's empty
-                    return; // Stop processing if data is missing/invalid
+                    console.warn("Invalid data format:", data);
+                    updateStatus("No valid locations found.", false);
+                    coordinateData = [];
+                    hideStatus();
+                    return;
                 }
                 if (data.locations.length === 0) {
-                    console.log("No coordinate data received (empty list).");
-                    updateStatus("No geocoded ticket locations found for this event.", false);
-                    if (toggleButton) toggleButton.disabled = true;
+                    console.log("No locations received.");
+                    updateStatus("No locations found for event.", false);
                     coordinateData = [];
+                    hideStatus();
                     return;
                 }
-                // --- End structure check ---
 
-                coordinateData = data.locations; // Store the [{lat: Y, lon: X, tooltip: Z}, ...] array
+                coordinateData = data.locations;
                 console.log(`Received ${coordinateData.length} coordinates.`);
 
-                // --- Create layers (but don't add to map yet) ---
-                createMapLayers();
+                if (viewToggleButton) viewToggleButton.disabled = false;
+                if (clusterToggleButton) clusterToggleButton.disabled = (currentView !== 'pins');
+                disableHeatmapControls(false);
 
-                // --- Show the default view ---
+                createAllLayers();
                 showCurrentView();
-
-                // Adjust map bounds to fit markers if coordinates were found
                 adjustMapBounds();
-
-                // Enable button if it was disabled and we got data
-                if (toggleButton) toggleButton.disabled = false;
                 hideStatus();
 
-                // Force redraw just in case (sometimes needed after dynamic content/bounds changes)
                 setTimeout(function () {
                     console.log("Forcing map.invalidateSize() after data load...");
-                    console.log("Map container element just before invalidateSize:", document.getElementById(mapContainerId)); // Check if it exists here
-                    if (map && document.getElementById(mapContainerId)) { // Add check before calling
+                    const container = document.getElementById(mapContainerId);
+                    if (map && container && container.offsetWidth > 0) {
                         map.invalidateSize();
                     } else {
-                        console.warn("Skipping invalidateSize because map or container is missing.");
+                        console.warn(`Skipping invalidateSize. Map: ${!!map}, Container: ${!!container}, OffsetWidth: ${container ? container.offsetWidth : 'N/A'}`);
                     }
                 }, 100);
-
             })
             .catch(error => {
-                console.error('Error fetching or processing coordinate data:', error);
-                console.log("Map container element during fetch error:", document.getElementById(mapContainerId)); // Check if it exists here
-                updateStatus(`Error loading map data: ${error.message}. Please try again later.`, true); // Show error in overlay
-                if (toggleButton) toggleButton.disabled = true;
+                console.error('Error fetching/processing data:', error);
+                updateStatus(`Error loading map data: ${error.message}.`, true);
             });
     }
 
-    // --- Layer Creation ---
-    function createMapLayers() {
-        if (!map || coordinateData.length === 0) {
-            console.log("Skipping layer creation (no map or data).");
+
+    // --- Layer Creation Functions ---
+    function createAllLayers() {
+        createPinLayer();
+        createHeatmapLayer();
+        console.log("Layers created/updated.");
+    }
+
+    function createPinLayer() {
+        console.log(`Creating pin layer (Clustering: ${isClusteringEnabled})...`);
+        pinLayer = null;
+        if (coordinateData.length === 0) {
+            console.warn("No data for pin layer.");
             return;
         }
-
-        // 1. Create Pin Layer (using MarkerCluster)
-        console.log("Creating pin layer instance (marker cluster)...");
-        pinLayer = L.markerClusterGroup(); // Initialize cluster group
-        coordinateData.forEach((loc, index) => { // loc is now {lat, lon, tooltip, order_url}
+        const markers = [];
+        coordinateData.forEach((loc, index) => {
             try {
-                if (loc.lat == null || loc.lon == null) { /* ... skip invalid ... */
-                    return;
-                }
-                const latLng = L.latLng(loc.lat, loc.lon);
-                if (isNaN(latLng.lat) || isNaN(latLng.lng)) { /* ... skip invalid ... */
-                    return;
-                }
-
-                const marker = L.marker(latLng);
-
-                // --- Use the enhanced tooltip from backend ---
-                // Leaflet tooltips handle HTML content by default
-                if (loc.tooltip) {
-                    marker.bindTooltip(loc.tooltip);
-                }
-                // --- End Tooltip ---
-
-                // --- Add Click Listener to open order URL ---
-                if (loc.order_url) { // Only add listener if URL was successfully generated
-                    marker.on('click', function () {
-                        console.log(`Marker clicked, opening URL: ${loc.order_url}`);
-                        // Open in a new tab, which is usually better for control panel links
-                        window.open(loc.order_url, '_blank');
-                        // If you prefer opening in the same tab:
-                        // window.location.href = loc.order_url;
-                    });
-                } else {
-                    // Log if URL is missing for a marker, maybe backend issue
-                    console.warn(`Order URL missing for coordinate index ${index}, click disabled for this marker.`);
+                if (loc.lat == null || loc.lon == null || isNaN(loc.lat) || isNaN(loc.lon)) return;
+                const marker = L.marker(L.latLng(loc.lat, loc.lon));
+                if (loc.tooltip) marker.bindTooltip(loc.tooltip);
+                if (loc.order_url) {
+                    marker.on('click', () => window.open(loc.order_url, '_blank'));
                 }
-                // --- End Click Listener ---
-
-                pinLayer.addLayer(marker); // Add marker to cluster group
-
+                markers.push(marker);
             } catch (e) {
-                console.error(`Error creating marker for coordinate ${index}:`, loc, e);
+                console.error(`Error creating marker ${index}:`, e);
             }
         });
-        console.log("Pin layer instance created with markers (incl. tooltips and clicks).");
-
+        if (markers.length === 0) {
+            console.warn("No valid markers created.");
+            return;
+        }
+        if (isClusteringEnabled) {
+            pinLayer = L.markerClusterGroup();
+            pinLayer.addLayers(markers);
+            console.log("Marker cluster populated.");
+        } else {
+            pinLayer = L.layerGroup(markers);
+            console.log("Simple layer group populated.");
+        }
+    }
 
-        // 2. Create Heatmap Layer (No changes needed here)
-        console.log("Creating heatmap layer instance...");
+    function createHeatmapLayer() {
+        console.log("Creating heatmap layer...");
+        heatmapLayer = null;
+        if (coordinateData.length === 0) {
+            console.warn("No data for heatmap.");
+            return;
+        }
         try {
             const heatPoints = coordinateData.map(loc => {
                 if (loc.lat != null && loc.lon != null && !isNaN(loc.lat) && !isNaN(loc.lon)) {
@@ -245,35 +237,59 @@ document.addEventListener('DOMContentLoaded', function () {
                 }
                 return null;
             }).filter(p => p !== null);
-
             if (heatPoints.length > 0) {
                 heatmapLayer = L.heatLayer(heatPoints, heatmapOptions);
-                console.log("Heatmap layer instance created.");
-            } else { /* ... handle no valid points ... */
-                heatmapLayer = null;
+                console.log("Heatmap created:", heatmapOptions);
+            } else {
+                console.warn("No valid points for heatmap.");
             }
-        } catch (e) { /* ... error handling ... */
-            heatmapLayer = null;
+        } catch (e) {
+            console.error("Error creating heatmap:", e);
         }
+    }
 
-        console.log("Map layer instances created/updated.");
+
+    // --- Layer Update Functions ---
+    function redrawPinLayer() {
+        if (!map) return;
+        console.log("Redrawing pin layer...");
+        if (pinLayer && map.hasLayer(pinLayer)) map.removeLayer(pinLayer);
+        pinLayer = null;
+        createPinLayer();
+        if (currentView === 'pins' && pinLayer) {
+            console.log("Adding new pin layer.");
+            map.addLayer(pinLayer);
+        }
     }
 
-    // --- Adjust Map Bounds ---
+    function updateHeatmap() {
+        if (!map || !heatmapLayer) {
+            console.warn("Cannot update heatmap.");
+            return;
+        }
+        console.log("Updating heatmap opts:", heatmapOptions);
+        try {
+            heatmapLayer.setOptions(heatmapOptions);
+            console.log("Heatmap opts updated.");
+        } catch (e) {
+            console.error("Error setting heatmap opts:", e);
+        }
+    }
+
+
+    // --- Adjust Map Bounds (Corrected) ---
     function adjustMapBounds() {
         if (!map || coordinateData.length === 0) return;
-
         try {
             let bounds = null;
-            // Prefer using marker cluster bounds if available and valid
-            if (pinLayer && typeof pinLayer.getBounds === 'function') {
+            if (currentView === 'pins' && pinLayer && typeof pinLayer.getBounds === 'function') {
                 bounds = pinLayer.getBounds();
-                console.log("Attempting to get bounds from pin layer (marker cluster).");
+                console.log("Attempting bounds from pin layer.");
             }
-
-            // If no valid bounds from cluster, or only heatmap exists, calculate from raw data
+            // Calculate from raw if pin layer bounds unavailable/invalid or if in heatmap view
             if (!bounds || !bounds.isValid()) {
-                console.log("Pin layer bounds invalid or unavailable, calculating bounds from raw coordinates.");
+                console.log("Calculating bounds from raw coordinates.");
+                // Filter valid lat/lon pairs
                 const latLngs = coordinateData
                     .map(loc => {
                         if (loc.lat != null && loc.lon != null && !isNaN(loc.lat) && !isNaN(loc.lon)) {
@@ -282,97 +298,155 @@ document.addEventListener('DOMContentLoaded', function () {
                         return null;
                     })
                     .filter(p => p !== null);
-
-                if (latLngs.length > 0) {
-                    bounds = L.latLngBounds(latLngs);
-                }
+                if (latLngs.length > 0) bounds = L.latLngBounds(latLngs);
             }
 
-            // Fit map to bounds if valid bounds were found
+            // Apply bounds if valid
             if (bounds && bounds.isValid()) {
-                console.log("Fitting map to calculated bounds...");
-                map.fitBounds(bounds, {padding: [50, 50]}); // Add padding
+                console.log("Fitting map to bounds...");
+                map.fitBounds(bounds, {padding: [50, 50]});
                 console.log("Bounds fitted.");
-            } else if (coordinateData.length === 1) {
-                // Special case for a single point
-                console.log("Only one valid coordinate, setting view directly.");
+                // Handle single point case
+            } else if (coordinateData.filter(loc => loc.lat != null && loc.lon != null && !isNaN(loc.lat) && !isNaN(loc.lon)).length === 1) {
+                console.log("Setting view for single coordinate.");
+                // --- Corrected logic to find the single valid coordinate ---
                 const singleCoord = coordinateData.find(loc => loc.lat != null && loc.lon != null && !isNaN(loc.lat) && !isNaN(loc.lon));
-                if (singleCoord) {
-                    map.setView([singleCoord.lat, singleCoord.lon], 13); // Zoom level 13 for single point
-                } else {
-                    console.warn("Could not find the single valid coordinate to set view.");
-                }
+                // --- End Correction ---
+                if (singleCoord) map.setView([singleCoord.lat, singleCoord.lon], 13);
+                else console.warn("Could not find single valid coordinate to set view.");
+                // Removed extra ')' here
             } else {
-                console.warn("Could not determine valid bounds to fit the map.");
+                console.warn("Could not determine valid bounds.");
             }
         } catch (e) {
             console.error("Error fitting map bounds:", e);
         }
-    }
+    } // End adjustMapBounds function
+
 
-    // --- View Toggling ---
-    function setupToggleButton() {
-        updateButtonText(); // Set initial text
-        toggleButton.addEventListener('click', () => {
-            console.log("Toggle button clicked!");
+    // --- Control Setup Functions ---
+    function setupViewToggleButton() {
+        updateViewToggleButtonText();
+        viewToggleButton.addEventListener('click', () => {
+            console.log("View toggle clicked!");
             currentView = (currentView === 'pins') ? 'heatmap' : 'pins';
-            showCurrentView(); // Update the map layers
-            updateButtonText(); // Update the button text
+            showCurrentView();
+            updateViewToggleButtonText();
+            if (clusterToggleButton) clusterToggleButton.disabled = (currentView !== 'pins');
+        });
+        console.log("View toggle listener setup.");
+    }
+
+    function setupClusterToggleButton() {
+        updateClusterToggleButtonText();
+        clusterToggleButton.disabled = (currentView !== 'pins');
+        clusterToggleButton.addEventListener('click', () => {
+            if (currentView !== 'pins') return;
+            console.log("Cluster toggle clicked!");
+            isClusteringEnabled = !isClusteringEnabled;
+            redrawPinLayer();
+            updateClusterToggleButtonText();
+        });
+        console.log("Cluster toggle listener setup.");
+    }
+
+    function setupHeatmapControls() {
+        if (!heatmapRadiusInput || !heatmapBlurInput || !heatmapMaxZoomInput || !radiusValueSpan || !blurValueSpan || !maxZoomValueSpan) {
+            console.error("Heatmap controls missing.");
+            return;
+        }
+        radiusValueSpan.textContent = heatmapOptions.radius;
+        heatmapRadiusInput.value = heatmapOptions.radius;
+        blurValueSpan.textContent = heatmapOptions.blur;
+        heatmapBlurInput.value = heatmapOptions.blur;
+        maxZoomValueSpan.textContent = heatmapOptions.maxZoom;
+        heatmapMaxZoomInput.value = heatmapOptions.maxZoom;
+        heatmapRadiusInput.addEventListener('input', (e) => {
+            const v = parseFloat(e.target.value);
+            heatmapOptions.radius = v;
+            radiusValueSpan.textContent = v;
+            updateHeatmap();
+        });
+        heatmapBlurInput.addEventListener('input', (e) => {
+            const v = parseFloat(e.target.value);
+            heatmapOptions.blur = v;
+            blurValueSpan.textContent = v;
+            updateHeatmap();
+        });
+        heatmapMaxZoomInput.addEventListener('input', (e) => {
+            const v = parseInt(e.target.value, 10);
+            heatmapOptions.maxZoom = v;
+            maxZoomValueSpan.textContent = v;
+            updateHeatmap();
         });
-        console.log("Toggle button listener setup complete.");
+        console.log("Heatmap control listeners setup.");
     }
 
+    function disableHeatmapControls(disabled) {
+        if (heatmapRadiusInput) heatmapRadiusInput.disabled = disabled;
+        if (heatmapBlurInput) heatmapBlurInput.disabled = disabled;
+        if (heatmapMaxZoomInput) heatmapMaxZoomInput.disabled = disabled;
+    }
+
+
+    // --- View Switching Logic ---
     function showCurrentView() {
         console.log(`Showing view: ${currentView}`);
         if (!map) {
-            console.warn("Map not initialized, cannot show view.");
+            console.warn("Map not init.");
             return;
         }
-
-        // --- Safely remove existing layers ---
-        console.log("Removing existing layers (if present)...");
-        if (pinLayer && map.hasLayer(pinLayer)) {
-            map.removeLayer(pinLayer);
-            console.log("Removed pin layer");
-        }
-        if (heatmapLayer && map.hasLayer(heatmapLayer)) {
-            map.removeLayer(heatmapLayer);
-            console.log("Removed heatmap layer");
-        }
-        // --- End removal ---
-
-        // --- Add the selected layer ---
+        console.log("Removing layers...");
+        if (pinLayer && map.hasLayer(pinLayer)) map.removeLayer(pinLayer);
+        if (heatmapLayer && map.hasLayer(heatmapLayer)) map.removeLayer(heatmapLayer);
         console.log(`Adding ${currentView} layer...`);
-        try {
-            if (currentView === 'pins' && pinLayer) {
-                map.addLayer(pinLayer);
-                console.log("Added pin layer to map.");
-            } else if (currentView === 'heatmap' && heatmapLayer) {
-                map.addLayer(heatmapLayer);
-                console.log("Added heatmap layer to map.");
-            } else {
-                console.warn(`Cannot add layer for view "${currentView}": Corresponding layer instance is missing or null.`);
-                // Maybe display a message if no layers could be shown?
-                mapElement.innerHTML += '<p style="position: absolute; top: 10px; left: 50px; background: yellow; padding: 5px; z-index: 1000;">No data to display for this view.</p>';
-                setTimeout(() => { // Clear message after a few seconds
-                    const msgElement = mapElement.querySelector('p[style*="yellow"]');
-                    if (msgElement) msgElement.remove();
-                }, 3000);
+        let layerToAdd = null;
+        if (currentView === 'pins') {
+            layerToAdd = pinLayer;
+            if (heatmapOptionsPanel) heatmapOptionsPanel.style.display = 'none';
+            if (clusterToggleButton) {
+                clusterToggleButton.style.display = 'inline-block';
+                clusterToggleButton.disabled = false;
             }
-        } catch (e) {
-            console.error(`Error adding ${currentView} layer:`, e);
+        } else {
+            layerToAdd = heatmapLayer;
+            if (heatmapOptionsPanel) heatmapOptionsPanel.style.display = 'block';
+            if (clusterToggleButton) {
+                clusterToggleButton.style.display = 'none';
+                clusterToggleButton.disabled = true;
+            }
+        }
+        if (layerToAdd) {
+            try {
+                map.addLayer(layerToAdd);
+                console.log(`Added ${currentView} layer.`);
+            } catch (e) {
+                console.error(`Error adding ${currentView}:`, e);
+                updateStatus(`Error display ${currentView}.`, true);
+            }
+        } else {
+            console.warn(`Layer instance missing for ${currentView}.`);
+            updateStatus(`No data for ${currentView}.`, false);
         }
-        // --- End adding ---
     }
 
-    function updateButtonText() {
-        if (!toggleButton) return;
-        const nextViewText = (currentView === 'pins') ? 'Heatmap' : 'Pin';
-        toggleButton.textContent = `Switch to ${nextViewText} View`;
-        console.log(`Button text updated to: ${toggleButton.textContent}`);
+
+    // --- Button Text Update Functions ---
+    function updateViewToggleButtonText() {
+        if (!viewToggleButton) return;
+        const next = (currentView === 'pins') ? 'Heatmap' : 'Pin';
+        viewToggleButton.textContent = `Switch to ${next} View`;
+        console.log(`View Btn text: ${viewToggleButton.textContent}`);
+    }
+
+    function updateClusterToggleButtonText() {
+        if (!clusterToggleButton) return;
+        clusterToggleButton.textContent = isClusteringEnabled ? 'Disable Clustering' : 'Enable Clustering';
+        console.log(`Cluster Btn text: ${clusterToggleButton.textContent}`);
     }
 
-    // --- Start ---
+
+    // --- Start Initialization ---
     initializeMap();
 
 }); // End DOMContentLoaded