thrillwiki_django_no_react/templates/maps/universal_map.html

{% extends 'base/base.html' %}
{% load static %}

{% block title %}{{ page_title }} - ThrillWiki{% endblock %}

{% block extra_head %}
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<!-- Leaflet MarkerCluster CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />

<style>
.map-container {
    height: 70vh;
    min-height: 500px;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.map-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.dark .map-controls {
    background: rgba(31, 41, 55, 0.95);
}

.filter-pill {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200 cursor-pointer transition-colors;
}

.filter-pill.active {
    @apply bg-blue-500 text-white dark:bg-blue-600;
}

.filter-pill:hover {
    @apply bg-gray-200 dark:bg-gray-600;
}

.filter-pill.active:hover {
    @apply bg-blue-600 dark:bg-blue-700;
}

.location-info-popup {
    max-width: 300px;
}

.location-info-popup h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.location-info-popup p {
    margin: 0.25rem 0;
    font-size: 0.9rem;
    color: #666;
}

.dark .location-info-popup p {
    color: #ccc;
}
</style>
{% endblock %}

{% block content %}
<div class="container px-4 mx-auto">
    <!-- Header -->
    <div class="flex flex-col items-start justify-between gap-4 mb-6 md:flex-row md:items-center">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">{{ page_title }}</h1>
            <p class="mt-2 text-gray-600 dark:text-gray-400">
                Explore theme parks, rides, and attractions from around the world
            </p>
        </div>
        <div class="flex gap-3">
            <a href="{% url 'maps:park_map' %}" 
               class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors">
                <i class="mr-2 fas fa-map-marker-alt"></i>Parks Only
            </a>
            <a href="{% url 'maps:location_list' %}" 
               class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors">
                <i class="mr-2 fas fa-list"></i>List View
            </a>
        </div>
    </div>

    <!-- Filters Panel -->
    <div class="p-4 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
        <form id="map-filters" 
              hx-get="{% url 'maps:htmx_filter' %}"
              hx-trigger="change, submit"
              hx-target="#map-container"
              hx-swap="none"
              hx-push-url="false">
            
            <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 lg:grid-cols-4">
                <!-- Search -->
                <div>
                    <label for="search" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Search</label>
                    <input type="text" name="q" id="search" 
                           class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                           placeholder="Search locations..."
                           hx-get="{% url 'maps:htmx_search' %}"
                           hx-trigger="input changed delay:500ms"
                           hx-target="#search-results"
                           hx-indicator="#search-loading">
                </div>
                
                <!-- Country -->
                <div>
                    <label for="country" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Country</label>
                    <input type="text" name="country" id="country" 
                           class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                           placeholder="Filter by country...">
                </div>
                
                <!-- State/Region -->
                <div>
                    <label for="state" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">State/Region</label>
                    <input type="text" name="state" id="state" 
                           class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                           placeholder="Filter by state...">
                </div>
                
                <!-- Clustering Toggle -->
                <div class="flex items-end">
                    <label class="flex items-center cursor-pointer">
                        <input type="checkbox" name="cluster" value="true" id="cluster-toggle" 
                               class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700" 
                               checked>
                        <span class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-300">Enable Clustering</span>
                    </label>
                </div>
            </div>

            <!-- Location Type Filters -->
            <div class="mb-4">
                <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Location Types</label>
                <div class="flex flex-wrap gap-2">
                    {% for type in location_types %}
                    <label class="filter-pill" data-type="{{ type }}">
                        <input type="checkbox" name="types" value="{{ type }}" 
                               class="hidden location-type-checkbox" 
                               {% if type in initial_location_types %}checked{% endif %}>
                        <i class="mr-2 fas fa-{% if type == 'park' %}map-marker-alt{% elif type == 'ride' %}rocket{% elif type == 'company' %}building{% else %}map-pin{% endif %}"></i>
                        {{ type|title }}
                    </label>
                    {% endfor %}
                </div>
            </div>
        </form>

        <!-- Search Results -->
        <div id="search-results" class="mt-4"></div>
        <div id="search-loading" class="htmx-indicator">
            <div class="flex items-center justify-center p-4">
                <div class="w-6 h-6 border-2 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
                <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">Searching...</span>
            </div>
        </div>
    </div>

    <!-- Map Container -->
    <div class="relative">
        <div id="map-container" class="map-container"></div>
        
        <!-- Map Loading Indicator -->
        <div id="map-loading" class="htmx-indicator absolute inset-0 flex items-center justify-center bg-gray-100 dark:bg-gray-800 rounded-lg">
            <div class="text-center">
                <div class="w-8 h-8 mx-auto mb-4 border-4 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
                <p class="text-sm text-gray-600 dark:text-gray-400">Loading map data...</p>
            </div>
        </div>
    </div>

    <!-- Location Details Modal -->
    <div id="location-modal" class="fixed inset-0 z-50 hidden">
        <!-- Modal content will be loaded here via HTMX -->
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<!-- Leaflet MarkerCluster JS -->
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>

<script>
// Map initialization and management
class ThrillWikiMap {
    constructor(containerId, options = {}) {
        this.containerId = containerId;
        this.options = {
            center: [39.8283, -98.5795], // Center of USA
            zoom: 4,
            enableClustering: true,
            ...options
        };
        this.map = null;
        this.markers = new L.MarkerClusterGroup();
        this.currentData = [];
        this.init();
    }
    
    init() {
        // Initialize the map
        this.map = L.map(this.containerId, {
            center: this.options.center,
            zoom: this.options.zoom,
            zoomControl: false
        });
        
        // Add custom zoom control
        L.control.zoom({
            position: 'bottomright'
        }).addTo(this.map);
        
        // Add tile layers with dark mode support
        const lightTiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors',
            className: 'map-tiles'
        });
        
        const darkTiles = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
            attribution: '© OpenStreetMap contributors, © CARTO',
            className: 'map-tiles-dark'
        });
        
        // Set initial tiles based on theme
        if (document.documentElement.classList.contains('dark')) {
            darkTiles.addTo(this.map);
        } else {
            lightTiles.addTo(this.map);
        }
        
        // Listen for theme changes
        this.observeThemeChanges(lightTiles, darkTiles);
        
        // Add markers cluster group
        this.map.addLayer(this.markers);
        
        // Bind map events
        this.bindEvents();
        
        // Load initial data
        this.loadMapData();
    }
    
    observeThemeChanges(lightTiles, darkTiles) {
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.attributeName === 'class') {
                    if (document.documentElement.classList.contains('dark')) {
                        this.map.removeLayer(lightTiles);
                        this.map.addLayer(darkTiles);
                    } else {
                        this.map.removeLayer(darkTiles);
                        this.map.addLayer(lightTiles);
                    }
                }
            });
        });
        
        observer.observe(document.documentElement, {
            attributes: true,
            attributeFilter: ['class']
        });
    }
    
    bindEvents() {
        // Update map when bounds change
        this.map.on('moveend zoomend', () => {
            this.updateMapBounds();
        });
        
        // Handle filter form changes
        document.getElementById('map-filters').addEventListener('htmx:afterRequest', (event) => {
            if (event.detail.successful) {
                this.loadMapData();
            }
        });
    }
    
    async loadMapData() {
        try {
            document.getElementById('map-loading').style.display = 'flex';
            
            const formData = new FormData(document.getElementById('map-filters'));
            const params = new URLSearchParams();
            
            // Add form data to params
            for (let [key, value] of formData.entries()) {
                params.append(key, value);
            }
            
            // Add map bounds
            const bounds = this.map.getBounds();
            params.append('north', bounds.getNorth());
            params.append('south', bounds.getSouth());
            params.append('east', bounds.getEast());
            params.append('west', bounds.getWest());
            params.append('zoom', this.map.getZoom());
            
            const response = await fetch(`{{ map_api_urls.locations }}?${params}`);
            const data = await response.json();
            
            if (data.status === 'success') {
                this.updateMarkers(data.data);
            } else {
                console.error('Map data error:', data.message);
            }
        } catch (error) {
            console.error('Failed to load map data:', error);
        } finally {
            document.getElementById('map-loading').style.display = 'none';
        }
    }
    
    updateMarkers(data) {
        // Clear existing markers
        this.markers.clearLayers();
        
        // Add location markers
        if (data.locations) {
            data.locations.forEach(location => {
                this.addLocationMarker(location);
            });
        }
        
        // Add cluster markers
        if (data.clusters) {
            data.clusters.forEach(cluster => {
                this.addClusterMarker(cluster);
            });
        }
    }
    
    addLocationMarker(location) {
        const icon = this.getLocationIcon(location.type);
        const marker = L.marker([location.latitude, location.longitude], { icon });
        
        // Create popup content
        const popupContent = this.createPopupContent(location);
        marker.bindPopup(popupContent);
        
        // Add click handler for detailed view
        marker.on('click', () => {
            this.showLocationDetails(location.type, location.id);
        });
        
        this.markers.addLayer(marker);
    }
    
    addClusterMarker(cluster) {
        const marker = L.marker([cluster.latitude, cluster.longitude], {
            icon: L.divIcon({
                className: 'cluster-marker',
                html: `<div class="cluster-marker-inner">${cluster.count}</div>`,
                iconSize: [40, 40]
            })
        });
        
        marker.bindPopup(`${cluster.count} locations in this area`);
        this.markers.addLayer(marker);
    }
    
    getLocationIcon(type) {
        const iconMap = {
            'park': '🎢',
            'ride': '🎠',
            'company': '🏢',
            'generic': '📍'
        };
        
        return L.divIcon({
            className: 'location-marker',
            html: `<div class="location-marker-inner">${iconMap[type] || '📍'}</div>`,
            iconSize: [30, 30],
            iconAnchor: [15, 15]
        });
    }
    
    createPopupContent(location) {
        return `
            <div class="location-info-popup">
                <h3>${location.name}</h3>
                ${location.formatted_location ? `<p><i class="fas fa-map-marker-alt mr-1"></i>${location.formatted_location}</p>` : ''}
                ${location.operator ? `<p><i class="fas fa-building mr-1"></i>${location.operator}</p>` : ''}
                ${location.ride_count ? `<p><i class="fas fa-rocket mr-1"></i>${location.ride_count} rides</p>` : ''}
                <div class="mt-2">
                    <button onclick="thrillwikiMap.showLocationDetails('${location.type}', ${location.id})" 
                            class="px-3 py-1 text-sm text-white bg-blue-600 rounded hover:bg-blue-700">
                        View Details
                    </button>
                </div>
            </div>
        `;
    }
    
    showLocationDetails(type, id) {
        htmx.ajax('GET', `{% url 'maps:htmx_location_detail' 'TYPE' 0 %}`.replace('TYPE', type).replace('0', id), {
            target: '#location-modal',
            swap: 'innerHTML'
        }).then(() => {
            document.getElementById('location-modal').classList.remove('hidden');
        });
    }
    
    updateMapBounds() {
        // This could trigger an HTMX request to update data based on new bounds
        // For now, we'll just reload data when the map moves significantly
        clearTimeout(this.boundsUpdateTimeout);
        this.boundsUpdateTimeout = setTimeout(() => {
            this.loadMapData();
        }, 1000);
    }
}

// Initialize map when page loads
document.addEventListener('DOMContentLoaded', function() {
    window.thrillwikiMap = new ThrillWikiMap('map-container', {
        {% if initial_bounds %}
        center: [{{ initial_bounds.north|add:initial_bounds.south|floatformat:6|div:2 }}, {{ initial_bounds.east|add:initial_bounds.west|floatformat:6|div:2 }}],
        {% endif %}
        enableClustering: {{ enable_clustering|yesno:"true,false" }}
    });
    
    // Handle filter pill toggles
    document.querySelectorAll('.filter-pill').forEach(pill => {
        const checkbox = pill.querySelector('input[type="checkbox"]');
        
        // Set initial state
        if (checkbox.checked) {
            pill.classList.add('active');
        }
        
        pill.addEventListener('click', () => {
            checkbox.checked = !checkbox.checked;
            pill.classList.toggle('active', checkbox.checked);
            
            // Trigger form change
            document.getElementById('map-filters').dispatchEvent(new Event('change'));
        });
    });
    
    // Close modal handler
    document.addEventListener('click', (e) => {
        if (e.target.id === 'location-modal') {
            document.getElementById('location-modal').classList.add('hidden');
        }
    });
});
</script>

<style>
.cluster-marker {
    background: transparent;
    border: none;
}

.cluster-marker-inner {
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.location-marker {
    background: transparent;
    border: none;
}

.location-marker-inner {
    font-size: 20px;
    text-align: center;
    line-height: 30px;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}

.dark .cluster-marker-inner {
    border-color: #374151;
}
</style>
{% endblock %}