generate_clubs_map.py

import pandas as pd
import folium
from folium.plugins import MarkerCluster
import os
import json

def create_clubs_map(csv_file="clubs_data.csv", output_file="clubs_map.html"):
    """
    Create an interactive map with working filters using separate marker clusters.
    """
    
    # Read the CSV data
    try:
        df = pd.read_csv(csv_file)
        print(f"✅ Loaded {len(df)} clubs from {csv_file}")
    except FileNotFoundError:
        print(f"❌ Error: {csv_file} not found. Please run fetch_clubs.py first.")
        return
    except Exception as e:
        print(f"❌ Error reading CSV: {e}")
        return
    
    # Filter out clubs with invalid coordinates
    valid_coords = df.dropna(subset=['latitude', 'longitude'])
    invalid_count = len(df) - len(valid_coords)
    if invalid_count > 0:
        print(f"⚠️  Warning: {invalid_count} clubs have invalid coordinates and will be excluded")
    
    if len(valid_coords) == 0:
        print("❌ Error: No valid coordinates found")
        return
    
    # Calculate center point for the map
    center_lat = valid_coords['latitude'].mean()
    center_lon = valid_coords['longitude'].mean()
    
    # Create the base map
    m = folium.Map(
        location=[center_lat, center_lon],
        zoom_start=8,
        tiles='CartoDB Positron'
    )
    
    # Get unique venue types and statuses for filtering
    venue_types = sorted(valid_coords['venueType'].dropna().unique())
    statuses = sorted(valid_coords['status'].dropna().unique())
    
    print(f"📊 Found {len(venue_types)} venue types: {venue_types}")
    print(f"📊 Found {len(statuses)} statuses: {statuses}")
    
    # Define colors for different venue types
    venue_colors = {
        'SCHOOL': 'blue',
        'LIBRARY': 'red', 
        'TECH_HUB': 'purple',
        'COLLEGE_OR_UNIVERSITY': 'orange',
        'PUBLIC_SPACE': 'darkgreen',
        'OTHER': 'gray'
    }
    
    # Create a single main marker cluster for all clubs
    main_cluster = MarkerCluster(name='All Clubs', overlay=True, control=True).add_to(m)
    
    # Prepare club data for JavaScript search
    club_data = []
    
    # Add markers for each club
    for idx, club in valid_coords.iterrows():
        venue_type = club['venueType'] if pd.notna(club['venueType']) else 'OTHER'
        status = club['status'] if pd.notna(club['status']) else 'UNKNOWN'
        color = venue_colors.get(venue_type, 'gray')  # Color by venue type
        
        # Create popup content
        club_uuid = club['uuid'] if pd.notna(club['uuid']) else ''
        codeclub_url = f"https://codeclub.org/en/clubs/{club_uuid}" if club_uuid else "#"
        
        popup_content = f"""
        <div style="width: 280px;">
            <h3 style="margin: 0 0 10px 0; color: #2c3e50;">{club['name']}</h3>
            <p><strong>Municipality:</strong> {club['municipality']}</p>
            <p><strong>Venue Type:</strong> <span style="color: {color}; font-weight: bold;">{venue_type.replace('_', ' ').title()}</span></p>
            <p><strong>Status:</strong> {status.replace('_', ' ').title()}</p>
            <p><strong>Looking for Volunteers:</strong> {'Yes' if club['lookingForVolunteers'] else 'No'}</p>
            {f"<p><strong>Champion/Organiser:</strong> {club['champion_or_organiser']}</p>" if pd.notna(club['champion_or_organiser']) else ""}
            <p><strong>Coordinates:</strong> {club['latitude']:.6f}, {club['longitude']:.6f}</p>
            <div style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee;">
                <a href="{codeclub_url}" target="_blank" style="display: inline-block; background-color: #41b452; color: white; padding: 8px 12px; text-decoration: none; border-radius: 4px; font-size: 12px; font-weight: bold; margin-right: 8px; margin-bottom: 5px;">
                    📋 View on Code Club
                </a>
                <a href="https://partners.codeclub.org/clubs/{club_uuid}" target="_blank" style="display: inline-block; background-color: #2c3e50; color: white; padding: 8px 12px; text-decoration: none; border-radius: 4px; font-size: 12px; font-weight: bold; margin-bottom: 5px;">
                    🏢 Partner Portal
                </a>
            </div>
        </div>
        """
        
        # Create marker
        marker = folium.Marker(
            location=[club['latitude'], club['longitude']],
            popup=folium.Popup(popup_content, max_width=300),
            tooltip=f"{club['name']} ({venue_type})",
            icon=folium.Icon(color=color, icon='map-marker')
        )
        
        # Add to main cluster for proper clustering
        marker.add_to(main_cluster)
        
        # Store club data for search
        club_info = {
            'name': club['name'] if pd.notna(club['name']) else 'Unknown Club',
            'municipality': club['municipality'] if pd.notna(club['municipality']) else 'Unknown',
            'venueType': venue_type,
            'status': status,
            'latitude': club['latitude'],
            'longitude': club['longitude'],
            'champion': club.get('champion_or_organiser', '') if pd.notna(club.get('champion_or_organiser', '')) else '',
            'lookingForVolunteers': club['lookingForVolunteers'] if pd.notna(club['lookingForVolunteers']) else False
        }
        club_data.append(club_info)
    
    # Add tile layers with CartoDB Positron as default (add it last)
    folium.TileLayer('OpenStreetMap', name='OpenStreetMap', overlay=False, control=True).add_to(m)
    folium.TileLayer('cartodbdark_matter', name='CartoDB Dark Matter', overlay=False, control=True).add_to(m)
    folium.TileLayer('cartodbpositron', name='CartoDB Positron (Default)', overlay=False, control=True).add_to(m)
    
    # Add layer control
    folium.LayerControl().add_to(m)
    
    # Add search box and controls
    search_html = f'''
    <div style="position: fixed; 
                top: 10px; left: 10px; width: 300px; height: auto; 
                background-color: white; border:2px solid grey; z-index:9999; 
                font-size:14px; padding: 15px; border-radius: 5px; box-shadow: 0 0 15px rgba(0,0,0,0.2);">
    
    <div style="margin-bottom: 15px;">
        <label for="searchInput" style="display: block; margin-bottom: 5px; font-weight: bold;">Search by Club Name:</label>
        <input type="text" id="searchInput" placeholder="Type club name..." 
               style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px;">
        <div id="searchResults" style="max-height: 150px; overflow-y: auto; margin-top: 5px; border: 1px solid #eee; border-radius: 4px; display: none;"></div>
    </div>
    
    <div style="margin-bottom: 15px;">
        <p style="margin: 2px 0; font-size: 12px; color: #7f8c8d;">Markers are color-coded by venue type:</p>
        <p style="margin: 2px 0; font-size: 12px;"><span style="color: blue;">●</span> Schools (357 clubs)</p>
        <p style="margin: 2px 0; font-size: 12px;"><span style="color: red;">●</span> Libraries (9 clubs)</p>
        <p style="margin: 2px 0; font-size: 12px;"><span style="color: purple;">●</span> Tech Hubs (7 clubs)</p>
        <p style="margin: 2px 0; font-size: 12px;"><span style="color: gray;">●</span> Other venues (5 clubs)</p>
        <p style="margin: 2px 0; font-size: 12px;"><span style="color: darkgreen;">●</span> Public Spaces (3 clubs)</p>
        <p style="margin: 2px 0; font-size: 12px;"><span style="color: orange;">●</span> Colleges/Universities (1 club)</p>
    </div>
    </div>
    '''
    
    # Add CSS for green clusters
    cluster_css = '''
    <style>
    .marker-cluster-small {
        background-color: rgba(65, 180, 82, 0.6) !important;
    }
    .marker-cluster-small div {
        background-color: rgba(65, 180, 82, 0.8) !important;
    }
    .marker-cluster-medium {
        background-color: rgba(65, 180, 82, 0.6) !important;
    }
    .marker-cluster-medium div {
        background-color: rgba(65, 180, 82, 0.8) !important;
    }
    .marker-cluster-large {
        background-color: rgba(65, 180, 82, 0.6) !important;
    }
    .marker-cluster-large div {
        background-color: rgba(65, 180, 82, 0.8) !important;
    }
    /* Override any existing cluster styles */
    .leaflet-marker-icon.marker-cluster {
        background-color: rgba(65, 180, 82, 0.6) !important;
    }
    .leaflet-marker-icon.marker-cluster div {
        background-color: rgba(65, 180, 82, 0.8) !important;
    }
    </style>
    '''
    
    m.get_root().html.add_child(folium.Element(cluster_css))
    m.get_root().html.add_child(folium.Element(search_html))
    
    # Add JavaScript for search functionality
    search_js = f'''
    <script>
    // Club data for search
    const clubData = {json.dumps(club_data)};
    
    // Search functionality
    function searchClubs(query) {{
        const resultsDiv = document.getElementById('searchResults');
        
        if (query.length < 2) {{
            resultsDiv.style.display = 'none';
            return;
        }}
        
        const results = clubData.filter(club => 
            club.name.toLowerCase().includes(query.toLowerCase()) ||
            club.municipality.toLowerCase().includes(query.toLowerCase())
        );
        
        if (results.length === 0) {{
            resultsDiv.innerHTML = '<div style="padding: 10px; color: #666;">No clubs found</div>';
        }} else {{
            resultsDiv.innerHTML = results.slice(0, 10).map(club => `
                <div style="padding: 8px; border-bottom: 1px solid #eee; cursor: pointer; background-color: #f9f9f9;" 
                     onmouseover="this.style.backgroundColor='#e9e9e9'" 
                     onmouseout="this.style.backgroundColor='#f9f9f9'"
                     onclick="zoomToClub(${{club.latitude}}, ${{club.longitude}}, '${{club.name}}')">
                    <strong>${{club.name}}</strong><br>
                    <small style="color: #666;">${{club.municipality}} - ${{club.venueType.replace(/_/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase())}}</small><br>
                    <small style="color: #888;">Status: ${{club.status.replace(/_/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase())}}</small>
                </div>
            `).join('');
        }}
        
        resultsDiv.style.display = 'block';
    }}
    
    // Zoom to specific club
    function zoomToClub(lat, lng, name) {{
        console.log('Attempting to zoom to:', name, 'at', lat, lng);
        
        // Hide search results and update input
        document.getElementById('searchResults').style.display = 'none';
        document.getElementById('searchInput').value = name;
        
        // Wait for map to be ready, then try to zoom
        setTimeout(function() {{
            // Try to find the map in various ways
            let map = null;
            
            // Method 1: Look for Leaflet map in global scope
            if (typeof window.map !== 'undefined' && window.map.setView) {{
                map = window.map;
            }}
            // Method 2: Look for map in folium container
            else {{
                const mapContainer = document.querySelector('.folium-map');
                if (mapContainer && mapContainer._leaflet_id) {{
                    // Try to get the map from the container
                    for (let key in mapContainer) {{
                        if (key.startsWith('_leaflet_') && mapContainer[key] && mapContainer[key].setView) {{
                            map = mapContainer[key];
                            break;
                        }}
                    }}
                }}
            }}
            
            // Method 3: Look for map in window object
            if (!map) {{
                for (let key in window) {{
                    if (window[key] && typeof window[key] === 'object' && window[key].setView) {{
                        map = window[key];
                        break;
                    }}
                }}
            }}
            
            if (map && typeof map.setView === 'function') {{
                try {{
                    map.setView([lat, lng], 15);
                    console.log('Successfully zoomed to:', name);
                    
                    // Try to find and open the popup for this club
                    setTimeout(function() {{
                        // Look for markers in all layers
                        let targetMarker = null;
                        map.eachLayer(function(layer) {{
                            if (layer instanceof L.MarkerClusterGroup) {{
                                layer.eachLayer(function(marker) {{
                                    if (marker instanceof L.Marker) {{
                                        const markerLat = marker.getLatLng().lat;
                                        const markerLng = marker.getLatLng().lng;
                                        // Check if this marker is close to our target coordinates
                                        if (Math.abs(markerLat - lat) < 0.0001 && Math.abs(markerLng - lng) < 0.0001) {{
                                            targetMarker = marker;
                                        }}
                                    }}
                                }});
                            }} else if (layer instanceof L.Marker) {{
                                const markerLat = layer.getLatLng().lat;
                                const markerLng = layer.getLatLng().lng;
                                if (Math.abs(markerLat - lat) < 0.0001 && Math.abs(markerLng - lng) < 0.0001) {{
                                    targetMarker = layer;
                                }}
                            }}
                        }});
                        
                        if (targetMarker && targetMarker.openPopup) {{
                            targetMarker.openPopup();
                            console.log('Opened popup for:', name);
                        }}
                    }}, 500);
                    
                }} catch (error) {{
                    console.log('Error zooming:', error);
                    // Try alternative zoom method
                    try {{
                        map.panTo([lat, lng]);
                        map.setZoom(15);
                        console.log('Successfully panned to:', name);
                        
                        // Try to find and open popup after pan
                        setTimeout(function() {{
                            let targetMarker = null;
                            map.eachLayer(function(layer) {{
                                if (layer instanceof L.MarkerClusterGroup) {{
                                    layer.eachLayer(function(marker) {{
                                        if (marker instanceof L.Marker) {{
                                            const markerLat = marker.getLatLng().lat;
                                            const markerLng = marker.getLatLng().lng;
                                            if (Math.abs(markerLat - lat) < 0.0001 && Math.abs(markerLng - lng) < 0.0001) {{
                                                targetMarker = marker;
                                            }}
                                        }}
                                    }});
                                }} else if (layer instanceof L.Marker) {{
                                    const markerLat = layer.getLatLng().lat;
                                    const markerLng = layer.getLatLng().lng;
                                    if (Math.abs(markerLat - lat) < 0.0001 && Math.abs(markerLng - lng) < 0.0001) {{
                                        targetMarker = layer;
                                    }}
                                }}
                            }});
                            
                            if (targetMarker && targetMarker.openPopup) {{
                                targetMarker.openPopup();
                                console.log('Opened popup for:', name);
                            }}
                        }}, 500);
                        
                    }} catch (error2) {{
                        console.log('Error with panTo:', error2);
                        alert(`Found: ${{name}}\\nCoordinates: ${{lat}}, ${{lng}}`);
                    }}
                }}
            }} else {{
                console.log('Map not found, showing coordinates');
                alert(`Found: ${{name}}\\nCoordinates: ${{lat}}, ${{lng}}\\n\\nPlease manually navigate to these coordinates.`);
            }}
        }}, 1000);
    }}
    
    // Event listeners
    document.addEventListener('DOMContentLoaded', function() {{
        const searchInput = document.getElementById('searchInput');
        
        if (searchInput) {{
            searchInput.addEventListener('input', function(e) {{
                searchClubs(e.target.value);
            }});
        }}
        
        // Close search results when clicking outside
        document.addEventListener('click', function(e) {{
            const searchBox = document.getElementById('searchInput');
            const searchResults = document.getElementById('searchResults');
            
            if (searchBox && searchResults && !searchBox.contains(e.target) && !searchResults.contains(e.target)) {{
                searchResults.style.display = 'none';
            }}
        }});
        
    }});
    </script>
    '''
    
    m.get_root().html.add_child(folium.Element(search_js))
    
    # Save the map
    m.save(output_file)
    print(f"✅ Interactive map saved to {output_file}")
    print(f"📊 Map shows {len(valid_coords)} clubs across {valid_coords['municipality'].nunique()} municipalities")
    print(f"🔍 Search functionality: Search by club name or municipality")
    print(f"🎨 Color-coded by {len(venue_types)} venue types")
    print(f"🎛️ Layer control: Switch between map styles")
    
    # Print detailed statistics
    print("\n📈 Detailed Statistics:")
    print(f"   • Total clubs: {len(valid_coords)}")
    print(f"   • Municipalities: {valid_coords['municipality'].nunique()}")
    print(f"   • Venue types: {len(venue_types)}")
    print(f"   • Status types: {len(statuses)}")
    
    print("\n🏢 Venue Type Distribution:")
    venue_counts = valid_coords['venueType'].value_counts()
    for venue_type, count in venue_counts.items():
        print(f"   • {venue_type.replace('_', ' ').title()}: {count} clubs")
    
    print("\n📊 Status Distribution:")
    status_counts = valid_coords['status'].value_counts()
    for status, count in status_counts.items():
        print(f"   • {status.replace('_', ' ').title()}: {count} clubs")
    
    print(f"\n🌍 Map center: {center_lat:.4f}, {center_lon:.4f}")
    print(f"📁 Open {output_file} in your web browser to view the interactive map!")
    print(f"💡 Use the search box to find specific clubs!")

def main():
    """Main function to generate the clubs map."""
    print("🗺️  Generating Code Clubs Interactive Map...")
    print("=" * 50)
    print("🔍 Features: Search + Working layer control + Venue type colors")
    print("=" * 50)
    
    # Check if CSV file exists
    if not os.path.exists("clubs_data.csv"):
        print("❌ clubs_data.csv not found. Please run fetch_clubs.py first to get the data.")
        return
    
    # Generate the map
    create_clubs_map()

if __name__ == "__main__":
    main()