split templates

oedb/resources/demo/static/map_by_what.js

@@ -0,0 +1,302 @@
+// Initialize the map
+const map = new maplibregl.Map({
+    container: 'map',
+    style: 'https://tiles.openfreemap.org/styles/liberty',
+    center: [2.3522, 48.8566], // Default center (Paris)
+    zoom: 4
+});
+
+// Add navigation controls
+map.addControl(new maplibregl.NavigationControl());
+
+// Add attribution control with OpenStreetMap attribution
+map.addControl(new maplibregl.AttributionControl({
+    customAttribution: '© <a href="https://www.openstreetmap.org/copyright" >OpenStreetMap</a> contributors'
+}));
+
+// Store all events and their types
+let allEvents = null;
+let eventTypes = new Set();
+let eventsByType = {};
+let markersByType = {};
+let colorsByType = {};
+
+// Generate a color for each event type
+function getColorForType(type, index) {
+    // Predefined colors for better visual distinction
+    const colors = [
+        '#FF5722', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5',
+        '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50',
+        '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800'
+    ];
+    
+    return colors[index % colors.length];
+}
+
+// Fetch events when the map is loaded
+map.on('load', function() {
+    fetchEvents();
+});
+
+// Function to fetch events from the API
+function fetchEvents() {
+    // Update event info
+    document.getElementById('event-info').innerHTML = '<p>Loading events...</p>';
+    
+    // Fetch events from the public API - using limit=1000 to get more events
+    fetch('https://api.openeventdatabase.org/event?limit=1000')
+        .then(response => response.json())
+        .then(data => {
+            if (data.features && data.features.length > 0) {
+                // Store all events
+                allEvents = data;
+                
+                // Process events by type
+                processEventsByType(data);
+                
+                // Create filter UI
+                createFilterUI();
+                
+                // Add all events to the map initially
+                addAllEventsToMap();
+                
+                // Fit map to events bounds
+                fitMapToBounds(data);
+                
+                // Update event info
+                document.getElementById('event-info').innerHTML = 
+                    `<p>Found ${data.features.length} events across ${eventTypes.size} different types.</p>`;
+            } else {
+                document.getElementById('event-info').innerHTML = '<p>No events found.</p>';
+                document.getElementById('filter-list').innerHTML = '<li>No event types available.</li>';
+            }
+        })
+        .catch(error => {
+            console.error('Error fetching events:', error);
+            document.getElementById('event-info').innerHTML = 
+                `<p>Error loading events: ${error.message}</p>`;
+        });
+}
+
+// Process events by their "what" type
+function processEventsByType(data) {
+    eventTypes = new Set();
+    eventsByType = {};
+    
+    // Group events by their "what" type
+    data.features.forEach(feature => {
+        const properties = feature.properties;
+        const what = properties.what || 'Unknown';
+        
+        // Add to set of event types
+        eventTypes.add(what);
+        
+        // Add to events by type
+        if (!eventsByType[what]) {
+            eventsByType[what] = [];
+        }
+        eventsByType[what].push(feature);
+    });
+    
+    // Assign colors to each type
+    let index = 0;
+    eventTypes.forEach(type => {
+        colorsByType[type] = getColorForType(type, index);
+        index++;
+    });
+}
+
+// Create the filter UI
+function createFilterUI() {
+    const filterList = document.getElementById('filter-list');
+    filterList.innerHTML = '';
+    
+    // Sort event types alphabetically
+    const sortedTypes = Array.from(eventTypes).sort();
+    
+    // Create a checkbox for each event type
+    sortedTypes.forEach(type => {
+        const count = eventsByType[type].length;
+        const color = colorsByType[type];
+        
+        const li = document.createElement('li');
+        li.className = 'filter-item';
+        
+        const checkbox = document.createElement('input');
+        checkbox.type = 'checkbox';
+        checkbox.id = `filter-${type}`;
+        checkbox.checked = true;
+        checkbox.addEventListener('change', () => {
+            toggleEventType(type, checkbox.checked);
+        });
+        
+        const colorDot = document.createElement('span');
+        colorDot.className = 'color-dot';
+        colorDot.style.backgroundColor = color;
+        
+        const label = document.createElement('label');
+        label.htmlFor = `filter-${type}`;
+        label.appendChild(colorDot);
+        label.appendChild(document.createTextNode(type));
+        
+        const countSpan = document.createElement('span');
+        countSpan.className = 'filter-count';
+        countSpan.textContent = `(${count})`;
+        label.appendChild(countSpan);
+        
+        li.appendChild(checkbox);
+        li.appendChild(label);
+        filterList.appendChild(li);
+    });
+    
+    // Add event listeners for select/deselect all buttons
+    document.getElementById('select-all').addEventListener('click', selectAllEventTypes);
+    document.getElementById('deselect-all').addEventListener('click', deselectAllEventTypes);
+}
+
+// Add all events to the map
+function addAllEventsToMap() {
+    // Clear existing markers
+    clearAllMarkers();
+    
+    // Add markers for each event type
+    Object.keys(eventsByType).forEach(type => {
+        addEventsOfTypeToMap(type);
+    });
+}
+
+// Add events of a specific type to the map
+function addEventsOfTypeToMap(type) {
+    if (!markersByType[type]) {
+        markersByType[type] = [];
+    }
+    
+    const events = eventsByType[type];
+    const color = colorsByType[type];
+    
+    events.forEach(feature => {
+        const coordinates = feature.geometry.coordinates.slice();
+        const properties = feature.properties;
+        
+        // Create popup content
+        let popupContent = '<div class="event-popup">';
+        popupContent += `<h3>${properties.label || 'Event'}</h3>`;
+        popupContent += `<p><strong>Type:</strong> ${type}</p>`;
+        
+        // Display all properties
+        popupContent += '<div style="max-height: 300px; overflow-y: auto;">';
+        popupContent += '<table style="width: 100%; border-collapse: collapse;">';
+        
+        // Sort properties alphabetically for better organization
+        const sortedKeys = Object.keys(properties).sort();
+        
+        for (const key of sortedKeys) {
+            // Skip the label as it's already displayed as the title
+            if (key === 'label') continue;
+            
+            const value = properties[key];
+            let displayValue;
+            
+            // Format the value based on its type
+            if (value === null || value === undefined) {
+                displayValue = '<em>null</em>';
+            } else if (typeof value === 'object') {
+                displayValue = `<pre style="margin: 0; white-space: pre-wrap;">${JSON.stringify(value, null, 2)}</pre>`;
+            } else if (typeof value === 'string' && value.startsWith('http')) {
+                displayValue = `<a href="${value}" >${value}</a>`;
+            } else {
+                displayValue = String(value);
+            }
+            
+            popupContent += `
+            <tr style="border-bottom: 1px solid #eee;">
+                <td style="padding: 4px; font-weight: bold; vertical-align: top;">${key}:</td>
+                <td style="padding: 4px;">${displayValue}</td>
+            </tr>`;
+        }
+        
+        popupContent += '</table>';
+        popupContent += '</div>';
+        
+        popupContent += '</div>';
+        
+        // Create popup
+        const popup = new maplibregl.Popup({
+            closeButton: true,
+            closeOnClick: true
+        }).setHTML(popupContent);
+        
+        // Add marker with popup
+        const marker = new maplibregl.Marker({
+            color: color
+        })
+        .setLngLat(coordinates)
+        .setPopup(popup)
+        .addTo(map);
+        
+        // Store marker reference
+        markersByType[type].push(marker);
+    });
+}
+
+// Toggle visibility of events by type
+function toggleEventType(type, visible) {
+    if (!markersByType[type]) return;
+    
+    markersByType[type].forEach(marker => {
+        if (visible) {
+            marker.addTo(map);
+        } else {
+            marker.remove();
+        }
+    });
+}
+
+// Select all event types
+function selectAllEventTypes() {
+    const checkboxes = document.querySelectorAll('#filter-list input[type="checkbox"]');
+    checkboxes.forEach(checkbox => {
+        checkbox.checked = true;
+        const type = checkbox.id.replace('filter-', '');
+        toggleEventType(type, true);
+    });
+}
+
+// Deselect all event types
+function deselectAllEventTypes() {
+    const checkboxes = document.querySelectorAll('#filter-list input[type="checkbox"]');
+    checkboxes.forEach(checkbox => {
+        checkbox.checked = false;
+        const type = checkbox.id.replace('filter-', '');
+        toggleEventType(type, false);
+    });
+}
+
+// Clear all markers from the map
+function clearAllMarkers() {
+    Object.keys(markersByType).forEach(type => {
+        if (markersByType[type]) {
+            markersByType[type].forEach(marker => marker.remove());
+        }
+    });
+    markersByType = {};
+}
+
+// Function to fit map to events bounds
+function fitMapToBounds(geojson) {
+    if (geojson.features.length === 0) return;
+    
+    // Create a bounds object
+    const bounds = new maplibregl.LngLatBounds();
+    
+    // Extend bounds with each feature
+    geojson.features.forEach(feature => {
+        bounds.extend(feature.geometry.coordinates);
+    });
+    
+    // Fit map to bounds with padding
+    map.fitBounds(bounds, {
+        padding: 50,
+        maxZoom: 12
+    });
+}