582fdc5451
Le viewport est élargi de 20 % pour précharger les bords, sans aucun bornage. Au-delà d'un certain dézoom, la bbox sortait des limites géographiques : zoom 2 (monde) -> -164,-88.4,144,110.4 /api/clusters rejette en 400 toute coordonnée hors [-90,90] / [-180,180]. Vérifié contre la vraie validation : les zooms 3 et 4 passent, les zooms 1 et 2 renvoient « Coordinates out of range ». L'utilisateur qui dézoomait ne voyait donc plus aucun point, sans le moindre message. Leaflet renvoie par ailleurs des longitudes au-delà de ±180 quand la vue chevauche plusieurs copies du monde ; le bornage seul produirait alors un intervalle vide, que l'API rejette aussi. On retombe dans ce cas sur la bande complète, que la vue couvre de toute façon. Le calcul part dans pure.js, conformément à la convention du fichier, avec des cas limites et une propriété fast-check : aucune vue Leaflet imaginable ne doit produire une bbox que l'API refuse. Vérifié que cette propriété échoue bien sur l'ancienne implémentation (contre-exemple : east = 180.00000000000003). Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
1649 lines
53 KiB
JavaScript
1649 lines
53 KiB
JavaScript
/* Black Metal Map UI — clusters/heat/timeline/filter/sort/highlight */
|
|
/* Performance-optimized with viewport-based loading */
|
|
|
|
const API_BASE = "https://bm.nicolasfryder.ovh";
|
|
|
|
// --- i18n ---
|
|
const SUPPORTED_LANGS = ["fr", "en", "de", "es", "it", "pl", "nl", "ro", "pt", "cs", "sv", "hu", "da", "fi", "sk", "hr", "sl", "lt", "lv", "et", "nb"];
|
|
|
|
function detectLang() {
|
|
const langs = navigator.languages?.length ? navigator.languages : [navigator.language || "en"];
|
|
for (const l of langs) {
|
|
const code = l.split("-")[0].toLowerCase();
|
|
if (SUPPORTED_LANGS.includes(code)) return code;
|
|
}
|
|
return "en";
|
|
}
|
|
|
|
let currentLang = localStorage.getItem("lang") || detectLang();
|
|
|
|
function t(key) {
|
|
return window.LOCALES?.[currentLang]?.[key] ?? window.LOCALES?.["en"]?.[key] ?? key;
|
|
}
|
|
|
|
function applyI18n() {
|
|
document.documentElement.lang = currentLang;
|
|
document.querySelectorAll("[data-i18n]").forEach(el => {
|
|
el.textContent = t(el.dataset.i18n);
|
|
});
|
|
document.querySelectorAll("[data-i18n-placeholder]").forEach(el => {
|
|
el.placeholder = t(el.dataset.i18nPlaceholder);
|
|
});
|
|
// Sort select options (can't use data-i18n on options in all browsers)
|
|
const sel = document.getElementById("sortSelect");
|
|
if (sel) {
|
|
[["sort_az",0],["sort_status",1],["sort_genre",2],["sort_country",3],["sort_year",4]].forEach(([k,i]) => {
|
|
if (sel.options[i]) sel.options[i].text = t(k);
|
|
});
|
|
}
|
|
}
|
|
const DARK_TILES = "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png";
|
|
const DARK_ATTRIB = '© OpenStreetMap contributors © CARTO';
|
|
|
|
// --- Configuration ---
|
|
const USE_VIEWPORT_LOADING = true; // Enable viewport-based loading
|
|
const INITIAL_LOAD_LIMIT = 5000; // Initial bands to load for filters
|
|
const VIEWPORT_DEBOUNCE_MS = 300; // Debounce for viewport changes
|
|
|
|
// --- State ---
|
|
let allBands = []; // all loaded bands (geocoded + non geocoded)
|
|
let geocodedBands = []; // subset lat/lon ok
|
|
let noLocationBands = []; // subset missing coords
|
|
let viewportBands = []; // bands in current viewport
|
|
|
|
let filtered = [];
|
|
const markersById = new Map(); // ma_id -> marker
|
|
const listElById = new Map(); // ma_id -> element
|
|
const coordIndex = new Map(); // "lat,lon" -> bands[]
|
|
|
|
let heatLayer = null;
|
|
let clusterLayer = null;
|
|
let currentMode = "clusters";
|
|
|
|
// All heat points (for full heatmap even when viewing clusters)
|
|
let allHeatPoints = [];
|
|
let heatPointsLoaded = false;
|
|
|
|
const statusEnabled = new Map();
|
|
const genreEnabled = new Map();
|
|
const countryEnabled = new Map();
|
|
const macroGenreEnabled = new Map();
|
|
const themeEnabled = new Map();
|
|
|
|
let yearRange = { min: null, max: null }; // global
|
|
let yearFilter = { min: null, max: null }; // current
|
|
|
|
let macroActiveCount = 0;
|
|
|
|
// Facet data from server (for filters)
|
|
let facetData = null;
|
|
|
|
// Loading state
|
|
let isLoadingViewport = false;
|
|
let pendingViewportLoad = false;
|
|
let currentViewportData = [];
|
|
|
|
// --- Utils ---
|
|
const $ = (id) => document.getElementById(id);
|
|
const appEl = $("app");
|
|
|
|
async function loadGoatCounterFooterStats() {
|
|
const totalEl = document.getElementById("gcTotal");
|
|
const monthEl = document.getElementById("gcMonth");
|
|
if (!totalEl || !monthEl) return;
|
|
|
|
// 1er jour du mois courant (ce mois-ci)
|
|
const d = new Date();
|
|
const yyyy = d.getFullYear();
|
|
const mm = String(d.getMonth() + 1).padStart(2, "0");
|
|
const startOfMonth = `${yyyy}-${mm}-01`;
|
|
|
|
const base = "https://metalfromeurope.goatcounter.com/counter/";
|
|
const totalUrl = `${base}TOTAL.json`;
|
|
const monthUrl = `${base}TOTAL.json?start=${encodeURIComponent(startOfMonth)}`;
|
|
|
|
try {
|
|
const [t, m] = await Promise.all([
|
|
fetch(totalUrl, { cache: "no-store" }).then(r => (r.ok ? r.json() : Promise.reject(r.status))),
|
|
fetch(monthUrl, { cache: "no-store" }).then(r => (r.ok ? r.json() : Promise.reject(r.status))),
|
|
]);
|
|
|
|
// GoatCounter renvoie `count` comme string formatée (séparateurs milliers). :contentReference[oaicite:2]{index=2}
|
|
totalEl.textContent = t.count ?? "—";
|
|
monthEl.textContent = m.count ?? "—";
|
|
} catch (e) {
|
|
console.warn("GoatCounter footer stats failed:", e);
|
|
totalEl.textContent = "—";
|
|
monthEl.textContent = "—";
|
|
}
|
|
}
|
|
|
|
// Debounce function for search
|
|
let searchDebounceTimer = null;
|
|
function debounce(func, delay) {
|
|
return function(...args) {
|
|
clearTimeout(searchDebounceTimer);
|
|
searchDebounceTimer = setTimeout(() => func.apply(this, args), delay);
|
|
};
|
|
}
|
|
|
|
// Les helpers purs vivent dans pure.js (testés unitairement). app.js garde
|
|
// l'état (les Map de facettes cochées) et ne fait que le lui passer.
|
|
const escapeHtml = BMPure.escapeHtml;
|
|
const norm = BMPure.norm;
|
|
const parseYear = BMPure.parseYear;
|
|
const splitThemes = BMPure.splitThemes;
|
|
|
|
function currentQuery() {
|
|
return norm($("q").value).toLowerCase();
|
|
}
|
|
|
|
function bandMatchesQuery(b, q) { return BMPure.matchesQuery(b, q); }
|
|
function bandMatchesStatus(b) { return BMPure.matchesFacet(b.status, statusEnabled, "Unknown"); }
|
|
function bandMatchesCountry(b) { return BMPure.matchesFacet(b.country, countryEnabled, "??"); }
|
|
function bandMatchesMacroGenre(b) { return BMPure.matchesMacroGenre(b, MACRO_GENRES, macroGenreEnabled, macroActiveCount); }
|
|
|
|
function bandMatchesGenre(b) {
|
|
if (!bandMatchesMacroGenre(b)) return false;
|
|
return BMPure.matchesFacet(b.genre, genreEnabled, "Unknown");
|
|
}
|
|
|
|
function bandMatchesTheme(b) { return BMPure.matchesTheme(b, themeEnabled); }
|
|
function bandMatchesYear(b) { return BMPure.matchesYear(b, yearFilter, yearRange); }
|
|
|
|
function keyFromLatLon(lat, lon) { return BMPure.keyFromLatLon(lat, lon); }
|
|
|
|
const MACRO_GENRES = [
|
|
{ key: "Black", terms: ["black"] },
|
|
{ key: "Death", terms: ["death"] },
|
|
{ key: "Doom/Stoner/Sludge", terms: ["doom", "stoner", "sludge"] },
|
|
{ key: "Electronic/Industrial", terms: ["electronic", "industrial", "electro"] },
|
|
{ key: "Experimental/Avant-garde", terms: ["experimental", "avant", "avant-garde", "avantgarde"] },
|
|
{ key: "Folk/Viking/Pagan", terms: ["folk", "viking", "pagan"] },
|
|
{ key: "Gothic", terms: ["gothic"] },
|
|
{ key: "Grindcore", terms: ["grind"] },
|
|
{ key: "Groove", terms: ["groove"] },
|
|
{ key: "Heavy", terms: ["heavy"] },
|
|
{ key: "Metalcore/Deathcore", terms: ["metalcore", "deathcore"] },
|
|
{ key: "Power", terms: ["power"] },
|
|
{ key: "Progressive", terms: ["progressive", "prog"] },
|
|
{ key: "Speed", terms: ["speed"] },
|
|
{ key: "Symphonic", terms: ["symphonic"] },
|
|
{ key: "Thrash", terms: ["thrash"] },
|
|
];
|
|
|
|
// --- API ---
|
|
async function apiGet(path, timeoutMs = 15000) {
|
|
const url = `${API_BASE}${path}`;
|
|
// Timeout explicite : sans lui, une API qui ne répond jamais laisse l'UI (et
|
|
// le rechargement du viewport de la carte) bloquée indéfiniment.
|
|
const ctrl = new AbortController();
|
|
const t = setTimeout(() => ctrl.abort(), timeoutMs);
|
|
try {
|
|
const r = await fetch(url, { mode: "cors", signal: ctrl.signal });
|
|
if (!r.ok) throw new Error(`API ${path} failed: ${r.status}`);
|
|
return await r.json();
|
|
} finally {
|
|
clearTimeout(t);
|
|
}
|
|
}
|
|
|
|
async function loadStats() {
|
|
// tolérant : si /api/stats n'existe pas encore, on ignore
|
|
try {
|
|
const j = await apiGet("/api/stats");
|
|
if (j && j.ok) {
|
|
$("total").textContent = String(j.total || 0);
|
|
$("geocoded").textContent = String(j.geocoded || 0);
|
|
$("noLocCount").textContent = String(j.no_location || 0);
|
|
}
|
|
} catch (_) {
|
|
// Silently ignore stats errors
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Load facet data for filters (fast, minimal data)
|
|
*/
|
|
async function loadFacets() {
|
|
try {
|
|
const j = await apiGet("/api/facets");
|
|
if (j.ok) {
|
|
facetData = j;
|
|
console.log("Facets loaded:", {
|
|
statuses: j.statuses?.length,
|
|
countries: j.countries?.length,
|
|
genres: j.genres?.length,
|
|
yearRange: j.year_range
|
|
});
|
|
}
|
|
} catch (e) {
|
|
console.warn("Failed to load facets, will compute from bands:", e);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Parse band data from API response
|
|
*/
|
|
function parseBandData(x) {
|
|
const status = x.status || x.data?.status || x.data?.band_status || x.data?.status_label;
|
|
|
|
return {
|
|
ma_id: Number(x.ma_id),
|
|
name: norm(x.name),
|
|
url: x.url || (x.data?.url) || (x.data?.band_page?.url) || null,
|
|
country: norm(x.country || x.data?.country),
|
|
status: norm(status),
|
|
genre: norm(x.genre || x.data?.genre || x.data?.genres || x.data?.style),
|
|
themes: splitThemes(x.themes || x.data?.themes || x.data?.theme || x.data?.thematic),
|
|
location_text: norm(x.location_text || x.data?.location_text || x.data?.location),
|
|
formed_year: parseYear(x.formed_year ?? x.data?.formed_year ?? x.data?.formed ?? x.data?.formation_year ?? x.data?.year_formed),
|
|
lat: (x.lat == null ? null : Number(x.lat)),
|
|
lon: (x.lon == null ? null : Number(x.lon)),
|
|
// Localisation précise (band_locations) : présent quand le point vient
|
|
// d'un step géocodé plutôt que du point unique du groupe.
|
|
location_raw: x.location_raw != null ? norm(x.location_raw) : null,
|
|
step_label: x.step_label != null ? norm(x.step_label) : null,
|
|
data: x.data || {},
|
|
geocoded_at: x.geocoded_at || null,
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Load initial sample of bands for quick startup
|
|
*/
|
|
async function loadBands() {
|
|
// Load a limited set initially for faster startup
|
|
const limit = USE_VIEWPORT_LOADING ? INITIAL_LOAD_LIMIT : 200000;
|
|
const j = await apiGet(`/api/bands?limit=${limit}`);
|
|
const items = j.items || j.bands || [];
|
|
|
|
console.log(`Loaded ${items.length} bands initially`);
|
|
|
|
allBands = items.map(parseBandData);
|
|
|
|
geocodedBands = allBands.filter(b => Number.isFinite(b.lat) && Number.isFinite(b.lon));
|
|
noLocationBands = allBands.filter(b => !(Number.isFinite(b.lat) && Number.isFinite(b.lon)));
|
|
|
|
// Update counts
|
|
$("total").textContent = String(allBands.length);
|
|
$("geocoded").textContent = String(geocodedBands.length);
|
|
$("noLocCount").textContent = String(noLocationBands.length);
|
|
}
|
|
|
|
/**
|
|
* Load all heat points for the full heatmap (done once in background)
|
|
*/
|
|
async function loadAllHeatPoints() {
|
|
if (heatPointsLoaded) return;
|
|
|
|
try {
|
|
console.log("Loading all bands for heatmap...");
|
|
const j = await apiGet("/api/bands?limit=200000");
|
|
const items = j.items || [];
|
|
|
|
allHeatPoints = [];
|
|
|
|
// If allBands is empty, populate it
|
|
if (!allBands.length) {
|
|
allBands = items.map(parseBandData);
|
|
geocodedBands = allBands.filter(b => Number.isFinite(b.lat) && Number.isFinite(b.lon));
|
|
noLocationBands = allBands.filter(b => !(Number.isFinite(b.lat) && Number.isFinite(b.lon)));
|
|
}
|
|
|
|
// Index by coords for heatmap intensity
|
|
const coordCounts = new Map();
|
|
|
|
for (const x of items) {
|
|
const lat = x.lat == null ? null : Number(x.lat);
|
|
const lon = x.lon == null ? null : Number(x.lon);
|
|
|
|
if (Number.isFinite(lat) && Number.isFinite(lon)) {
|
|
const key = `${lat.toFixed(4)},${lon.toFixed(4)}`;
|
|
coordCounts.set(key, (coordCounts.get(key) || 0) + 1);
|
|
}
|
|
}
|
|
|
|
// Convert to heat points
|
|
for (const [key, count] of coordCounts) {
|
|
const [lat, lon] = key.split(",").map(Number);
|
|
allHeatPoints.push([lat, lon, count]);
|
|
}
|
|
|
|
heatPointsLoaded = true;
|
|
console.log(`Loaded ${allHeatPoints.length} unique heat points from ${items.length} bands`);
|
|
|
|
// Update stats
|
|
$("total").textContent = String(items.length);
|
|
$("geocoded").textContent = String(geocodedBands.length);
|
|
$("noLocCount").textContent = String(noLocationBands.length);
|
|
|
|
// Rebuild heatmap if in heat mode
|
|
if (currentMode === "heat") {
|
|
buildHeatLayer(allHeatPoints);
|
|
}
|
|
} catch (e) {
|
|
console.error("Failed to load heat points:", e);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Load bands for current viewport from server
|
|
*/
|
|
async function loadViewportBands() {
|
|
if (!USE_VIEWPORT_LOADING) return;
|
|
if (isLoadingViewport) {
|
|
pendingViewportLoad = true;
|
|
return;
|
|
}
|
|
|
|
isLoadingViewport = true;
|
|
|
|
try {
|
|
const bounds = map.getBounds();
|
|
const zoom = map.getZoom();
|
|
|
|
// Élargie de 20 % pour précharger les bords, puis bornée : voir
|
|
// BMPure.viewportBbox pour le détail (une bbox hors bornes fait répondre
|
|
// 400 à l'API, et la carte reste vide sans message).
|
|
const { minLon, minLat, maxLon, maxLat } = BMPure.viewportBbox({
|
|
south: bounds.getSouth(), west: bounds.getWest(),
|
|
north: bounds.getNorth(), east: bounds.getEast(),
|
|
}, 0.2);
|
|
|
|
const bbox = [minLon, minLat, maxLon, maxLat].join(",");
|
|
|
|
// Build query params for filters
|
|
const params = new URLSearchParams({
|
|
bbox,
|
|
zoom: String(Math.floor(zoom))
|
|
});
|
|
|
|
// Add active filters
|
|
const activeStatuses = Array.from(statusEnabled.entries())
|
|
.filter(([, v]) => v)
|
|
.map(([k]) => k);
|
|
if (activeStatuses.length && activeStatuses.length < statusEnabled.size) {
|
|
params.set("status", activeStatuses.join(","));
|
|
}
|
|
|
|
const activeCountries = Array.from(countryEnabled.entries())
|
|
.filter(([, v]) => v)
|
|
.map(([k]) => k);
|
|
if (activeCountries.length && activeCountries.length < countryEnabled.size) {
|
|
params.set("countries", activeCountries.join(","));
|
|
}
|
|
|
|
if (yearFilter.min != null && yearFilter.max != null) {
|
|
if (yearFilter.min !== yearRange.min) params.set("year_min", String(yearFilter.min));
|
|
if (yearFilter.max !== yearRange.max) params.set("year_max", String(yearFilter.max));
|
|
}
|
|
|
|
// Add genre filter if macro genres are active
|
|
if (macroActiveCount > 0) {
|
|
const activeTerms = MACRO_GENRES
|
|
.filter(m => macroGenreEnabled.get(m.key) === true)
|
|
.flatMap(m => m.terms);
|
|
if (activeTerms.length) {
|
|
params.set("genre", activeTerms[0]); // API supports single genre filter
|
|
}
|
|
}
|
|
|
|
const url = `/api/clusters?${params.toString()}`;
|
|
console.log("Loading viewport:", url);
|
|
|
|
const j = await apiGet(url);
|
|
|
|
if (j.ok) {
|
|
currentViewportData = j.items || [];
|
|
|
|
if (j.type === "bands") {
|
|
// High zoom: got individual bands
|
|
viewportBands = currentViewportData.map(parseBandData);
|
|
rebuildLayersFromBands(viewportBands);
|
|
} else {
|
|
// Low zoom: got clusters
|
|
rebuildLayersFromClusters(currentViewportData);
|
|
}
|
|
|
|
$("count").textContent = String(j.count || currentViewportData.length || 0);
|
|
}
|
|
} catch (e) {
|
|
console.error("Failed to load viewport bands:", e);
|
|
} finally {
|
|
isLoadingViewport = false;
|
|
|
|
if (pendingViewportLoad) {
|
|
pendingViewportLoad = false;
|
|
setTimeout(loadViewportBands, 100);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Create a cluster marker (zoomable, not final location)
|
|
* These have a dashed border to indicate they can be zoomed
|
|
* Burgundy/dark red color, always white text
|
|
*/
|
|
function createClusterMarker(lat, lon, count, bands) {
|
|
// Size based on count (logarithmic scale)
|
|
const size = Math.min(24 + Math.log2(count + 1) * 8, 55);
|
|
|
|
// Constant burgundy/dark red color for all clusters
|
|
const color = 'rgba(120, 40, 60, 0.92)';
|
|
const borderColor = 'rgba(180, 80, 100, 0.9)';
|
|
const textColor = '#fff';
|
|
|
|
// Create custom div icon with count - dashed border indicates "zoomable"
|
|
const icon = L.divIcon({
|
|
className: 'cluster-marker cluster-zoomable',
|
|
html: `<div style="
|
|
width: ${size}px;
|
|
height: ${size}px;
|
|
background: ${color};
|
|
border: 3px dashed ${borderColor};
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: ${Math.max(11, size / 3)}px;
|
|
font-weight: bold;
|
|
color: ${textColor};
|
|
box-shadow: 0 3px 12px rgba(0,0,0,0.4);
|
|
cursor: zoom-in;
|
|
transition: transform 0.15s ease;
|
|
" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">${count > 999 ? Math.round(count/1000) + 'k' : count}</div>`,
|
|
iconSize: [size, size],
|
|
iconAnchor: [size/2, size/2]
|
|
});
|
|
|
|
const marker = L.marker([lat, lon], { icon });
|
|
|
|
// Store data for click handling
|
|
marker.__bands = bands;
|
|
marker.__count = count;
|
|
marker.__isCluster = true; // Flag to identify as zoomable cluster
|
|
|
|
// Click handler - always zoom for clusters
|
|
marker.on("click", (e) => {
|
|
L.DomEvent.stopPropagation(e);
|
|
map.setView([lat, lon], map.getZoom() + 2, { animate: true });
|
|
});
|
|
|
|
return marker;
|
|
}
|
|
|
|
/**
|
|
* Create a location marker (final level - shows popup with all bands)
|
|
* These have a solid border and bright red color to indicate they show details
|
|
*/
|
|
function createLocationMarker(lat, lon, count, bands, locationName) {
|
|
// Size based on count (smaller than clusters)
|
|
const size = Math.min(18 + Math.log2(count + 1) * 6, 42);
|
|
|
|
// Bright red color for final locations
|
|
let color, borderColor;
|
|
if (count === 1) {
|
|
color = 'rgba(180, 30, 30, 0.9)';
|
|
borderColor = 'rgba(255, 100, 100, 0.9)';
|
|
} else if (count < 5) {
|
|
color = 'rgba(198, 26, 26, 0.9)';
|
|
borderColor = 'rgba(255, 120, 120, 0.9)';
|
|
} else if (count < 20) {
|
|
color = 'rgba(210, 50, 50, 0.9)';
|
|
borderColor = 'rgba(255, 150, 150, 0.9)';
|
|
} else {
|
|
color = 'rgba(220, 80, 80, 0.9)';
|
|
borderColor = 'rgba(255, 180, 180, 0.95)';
|
|
}
|
|
|
|
// Create custom div icon with count - solid border indicates "clickable for details"
|
|
const icon = L.divIcon({
|
|
className: 'cluster-marker cluster-location',
|
|
html: `<div style="
|
|
width: ${size}px;
|
|
height: ${size}px;
|
|
background: ${color};
|
|
border: 2px solid ${borderColor};
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: ${Math.max(10, size / 3.2)}px;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.5);
|
|
cursor: pointer;
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
" onmouseover="this.style.transform='scale(1.15)';this.style.boxShadow='0 4px 16px rgba(198,26,26,0.6)'" onmouseout="this.style.transform='scale(1)';this.style.boxShadow='0 2px 8px rgba(0,0,0,0.5)'">${count}</div>`,
|
|
iconSize: [size, size],
|
|
iconAnchor: [size/2, size/2]
|
|
});
|
|
|
|
const marker = L.marker([lat, lon], { icon });
|
|
|
|
// Store data
|
|
marker.__bands = bands;
|
|
marker.__count = count;
|
|
marker.__isCluster = false; // Flag to identify as final location
|
|
marker.__locationName = locationName;
|
|
|
|
// Build popup HTML with ALL bands (scrollable)
|
|
const bandListHtml = bands.map(b => {
|
|
const maUrl = b.url || (b.ma_id ? `https://www.metal-archives.com/bands/x/${b.ma_id}` : null);
|
|
const genre = b.genre || '—';
|
|
const status = b.status || '—';
|
|
const year = Number.isFinite(b.formed_year) ? b.formed_year : '—';
|
|
|
|
if (maUrl) {
|
|
return `<a href="${escapeHtml(maUrl)}" target="_blank" rel="noopener noreferrer" style="display:block;padding:6px 8px;margin:2px 0;background:rgba(255,255,255,0.03);border-radius:4px;text-decoration:none;transition:background 0.15s;" onmouseover="this.style.background='rgba(198,26,26,0.15)'" onmouseout="this.style.background='rgba(255,255,255,0.03)'">
|
|
<div style="color:#e9eef5;font-weight:600;font-size:13px;">${escapeHtml(b.name || 'Unknown')}</div>
|
|
<div style="color:#888;font-size:11px;margin-top:2px;">${escapeHtml(genre)} · ${escapeHtml(status)} · ${year}</div>
|
|
</a>`;
|
|
}
|
|
return `<div style="display:block;padding:6px 8px;margin:2px 0;background:rgba(255,255,255,0.03);border-radius:4px;">
|
|
<div style="color:#e9eef5;font-weight:600;font-size:13px;">${escapeHtml(b.name || 'Unknown')}</div>
|
|
<div style="color:#888;font-size:11px;margin-top:2px;">${escapeHtml(genre)} · ${escapeHtml(status)} · ${year}</div>
|
|
</div>`;
|
|
}).join("");
|
|
|
|
const popupHtml = `
|
|
<div style="min-width:280px; max-width:350px;">
|
|
<div style="font-weight:900; margin-bottom:8px; padding-bottom:8px; font-size:14px; color:#c61a1a; border-bottom:1px solid rgba(255,255,255,0.1);">
|
|
📍 ${escapeHtml(locationName || t('location_fallback'))}
|
|
<span style="font-weight:normal;color:#a2b0c2;font-size:12px;margin-left:8px;">${count} ${count === 1 ? t('group_s') : t('group_p')}</span>
|
|
</div>
|
|
<div style="max-height:300px; overflow-y:auto; margin:-4px;">
|
|
${bandListHtml}
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Bind popup
|
|
marker.bindPopup(popupHtml, {
|
|
maxWidth: 380,
|
|
maxHeight: 400,
|
|
className: 'location-popup'
|
|
});
|
|
|
|
// Click handler - update sidebar list AND open popup
|
|
marker.on("click", (e) => {
|
|
L.DomEvent.stopPropagation(e);
|
|
const gLabel = count === 1 ? t('group_s') : t('group_p');
|
|
const hint = locationName ? `${count} ${gLabel} — ${locationName}` : `${count} ${gLabel}`;
|
|
renderList(bands, hint);
|
|
// Small delay to ensure popup opens correctly
|
|
setTimeout(() => marker.openPopup(), 10);
|
|
});
|
|
|
|
return marker;
|
|
}
|
|
|
|
/**
|
|
* Check if all bands share the same location_text
|
|
*/
|
|
function bandsShareLocation(bands) {
|
|
if (!bands || bands.length === 0) return false;
|
|
if (bands.length === 1) return true;
|
|
|
|
const firstLoc = norm(bands[0]?.location_text || '');
|
|
if (!firstLoc) return false;
|
|
|
|
return bands.every(b => norm(b?.location_text || '') === firstLoc);
|
|
}
|
|
|
|
/**
|
|
* Rebuild layers from cluster data (server-side aggregated)
|
|
*/
|
|
function rebuildLayersFromClusters(clusters) {
|
|
markersById.clear();
|
|
coordIndex.clear();
|
|
clusterLayer.clearLayers();
|
|
|
|
for (const cluster of clusters) {
|
|
const { lat, lon, count, sample_bands, location_text } = cluster;
|
|
|
|
if (!Number.isFinite(lat) || !Number.isFinite(lon)) continue;
|
|
|
|
// Parse sample bands
|
|
const bands = (sample_bands || []).map(b => {
|
|
if (typeof b === 'string') {
|
|
try { return JSON.parse(b); } catch { return null; }
|
|
}
|
|
return b;
|
|
}).filter(Boolean);
|
|
|
|
const bandCount = count || bands.length;
|
|
|
|
// Check if all bands share the same location
|
|
const allSameLocation = bandsShareLocation(bands);
|
|
const locationName = allSameLocation ? (location_text || bands[0]?.location_text || null) : null;
|
|
|
|
// Use location marker (popup) if all bands share same location
|
|
// Use cluster marker (zoom) if bands come from different locations
|
|
const useLocationMarker = allSameLocation;
|
|
|
|
const marker = useLocationMarker
|
|
? createLocationMarker(lat, lon, bandCount, bands, locationName)
|
|
: createClusterMarker(lat, lon, bandCount, bands);
|
|
|
|
clusterLayer.addLayer(marker);
|
|
|
|
// Store reference for each band in cluster
|
|
for (const b of bands) {
|
|
if (b.ma_id) markersById.set(b.ma_id, marker);
|
|
}
|
|
}
|
|
|
|
if (currentMode === "clusters") {
|
|
if (!map.hasLayer(clusterLayer)) map.addLayer(clusterLayer);
|
|
}
|
|
|
|
$("unique").textContent = String(clusters.length);
|
|
|
|
// Render list with visible bands
|
|
const visibleBands = clusters.flatMap(c => c.sample_bands || [])
|
|
.map(b => typeof b === 'string' ? JSON.parse(b) : b)
|
|
.filter(Boolean);
|
|
renderList(visibleBands.slice(0, 200));
|
|
}
|
|
|
|
/**
|
|
* Rebuild layers from individual band data
|
|
*/
|
|
function rebuildLayersFromBands(bands) {
|
|
markersById.clear();
|
|
coordIndex.clear();
|
|
clusterLayer.clearLayers();
|
|
|
|
// Index by coords
|
|
for (const b of bands) {
|
|
if (!Number.isFinite(b.lat) || !Number.isFinite(b.lon)) continue;
|
|
const k = keyFromLatLon(b.lat, b.lon);
|
|
if (!coordIndex.has(k)) coordIndex.set(k, []);
|
|
coordIndex.get(k).push(b);
|
|
}
|
|
|
|
for (const [k, coordBands] of coordIndex.entries()) {
|
|
const [la, lo] = k.split(",").map(Number);
|
|
|
|
if (!Number.isFinite(la) || !Number.isFinite(lo)) continue;
|
|
|
|
const locationName = coordBands[0]?.location_text || null;
|
|
|
|
// Always use location marker for individual bands (final level)
|
|
const marker = createLocationMarker(la, lo, coordBands.length, coordBands, locationName);
|
|
|
|
for (const b of coordBands) markersById.set(b.ma_id, marker);
|
|
|
|
clusterLayer.addLayer(marker);
|
|
}
|
|
|
|
if (currentMode === "clusters") {
|
|
if (!map.hasLayer(clusterLayer)) map.addLayer(clusterLayer);
|
|
}
|
|
|
|
$("count").textContent = String(bands.length);
|
|
$("unique").textContent = String(coordIndex.size);
|
|
renderList(bands);
|
|
}
|
|
|
|
/**
|
|
* Rebuild layers from locally filtered data (legacy mode)
|
|
*/
|
|
function rebuildLayers() {
|
|
markersById.clear();
|
|
coordIndex.clear();
|
|
|
|
clusterLayer.clearLayers();
|
|
|
|
if (currentMode === "clusters") {
|
|
if (!map.hasLayer(clusterLayer)) map.addLayer(clusterLayer);
|
|
} else if (map.hasLayer(clusterLayer)) {
|
|
map.removeLayer(clusterLayer);
|
|
}
|
|
|
|
// index by coords
|
|
for (const b of filtered) {
|
|
const k = keyFromLatLon(b.lat, b.lon);
|
|
if (!coordIndex.has(k)) coordIndex.set(k, []);
|
|
coordIndex.get(k).push(b);
|
|
}
|
|
|
|
console.log(`Rebuilding layers: ${filtered.length} bands, ${coordIndex.size} unique coords`);
|
|
|
|
let markerCount = 0;
|
|
const heatPoints = [];
|
|
let heatMax = 1;
|
|
for (const [k, bands] of coordIndex.entries()) {
|
|
const [la, lo] = k.split(",").map(Number);
|
|
|
|
// Validate coordinates
|
|
if (!Number.isFinite(la) || !Number.isFinite(lo)) {
|
|
console.warn(`Invalid coords for key ${k}:`, { la, lo });
|
|
continue;
|
|
}
|
|
|
|
const intensity = bands.length;
|
|
heatPoints.push([la, lo, intensity]);
|
|
if (intensity > heatMax) heatMax = intensity;
|
|
|
|
const locationName = bands[0]?.location_text || null;
|
|
|
|
// Use location marker (final level) for all in legacy mode
|
|
const marker = createLocationMarker(la, lo, bands.length, bands, locationName);
|
|
markerCount++;
|
|
|
|
for (const b of bands) markersById.set(b.ma_id, marker);
|
|
|
|
clusterLayer.addLayer(marker);
|
|
}
|
|
|
|
console.log(`Added ${markerCount} markers to clusterLayer`);
|
|
|
|
// heatmap (use all points if loaded, otherwise use filtered)
|
|
if (heatPointsLoaded) {
|
|
buildHeatLayer(allHeatPoints);
|
|
} else {
|
|
buildHeatLayer(heatPoints, heatMax);
|
|
}
|
|
|
|
if (currentMode === "heat") {
|
|
if (heatLayer && !map.hasLayer(heatLayer)) map.addLayer(heatLayer);
|
|
} else if (heatLayer && map.hasLayer(heatLayer)) {
|
|
map.removeLayer(heatLayer);
|
|
}
|
|
|
|
// counters
|
|
$("count").textContent = String(filtered.length);
|
|
$("unique").textContent = String(coordIndex.size);
|
|
}
|
|
|
|
// --- Map init ---
|
|
const map = L.map("map", {
|
|
preferCanvas: true,
|
|
tap: true, // Enable tap for mobile
|
|
touchZoom: true,
|
|
dragging: true,
|
|
zoomControl: false // Disable default, we'll add our own on the right
|
|
}).setView([50.2, 10.2], 4);
|
|
|
|
// Add zoom control on the right side
|
|
L.control.zoom({
|
|
position: 'topright'
|
|
}).addTo(map);
|
|
|
|
L.tileLayer(DARK_TILES, { maxZoom: 19, attribution: DARK_ATTRIB }).addTo(map);
|
|
|
|
// Force map to render properly on mobile
|
|
setTimeout(() => {
|
|
if (map && map.invalidateSize) {
|
|
map.invalidateSize(true);
|
|
}
|
|
}, 100);
|
|
|
|
// Also invalidate on window resize
|
|
window.addEventListener('resize', () => {
|
|
if (map && map.invalidateSize) {
|
|
map.invalidateSize();
|
|
}
|
|
});
|
|
|
|
// Invalidate when page becomes visible (mobile browsers)
|
|
document.addEventListener('visibilitychange', () => {
|
|
if (!document.hidden && map && map.invalidateSize) {
|
|
setTimeout(() => map.invalidateSize(true), 100);
|
|
}
|
|
});
|
|
|
|
// Layer for custom cluster markers
|
|
clusterLayer = L.layerGroup();
|
|
map.addLayer(clusterLayer);
|
|
|
|
// Debounced viewport change handler
|
|
let viewportDebounceTimer = null;
|
|
function onViewportChange() {
|
|
if (!USE_VIEWPORT_LOADING) return;
|
|
|
|
clearTimeout(viewportDebounceTimer);
|
|
viewportDebounceTimer = setTimeout(() => {
|
|
loadViewportBands();
|
|
}, VIEWPORT_DEBOUNCE_MS);
|
|
}
|
|
|
|
// Listen for map movements
|
|
map.on("moveend", onViewportChange);
|
|
map.on("zoomend", onViewportChange);
|
|
|
|
function buildHeatLayer(points, maxIntensity) {
|
|
if (!points || !points.length) {
|
|
if (heatLayer) map.removeLayer(heatLayer);
|
|
return;
|
|
}
|
|
|
|
// Calcul des statistiques pour calibrer l'échelle
|
|
const intensities = points.map(p => p[2]).sort((a, b) => b - a);
|
|
const actualMax = intensities[0] || 1;
|
|
const p95 = intensities[Math.floor(intensities.length * 0.05)] || 1; // 95e percentile
|
|
const p90 = intensities[Math.floor(intensities.length * 0.10)] || 1; // 90e percentile
|
|
const p75 = intensities[Math.floor(intensities.length * 0.25)] || 1; // 75e percentile
|
|
const p50 = intensities[Math.floor(intensities.length * 0.5)] || 1; // Médiane
|
|
|
|
// Utilise le 75e percentile pour une heatmap moins saturée
|
|
// Multiplié par 2 pour étaler davantage les couleurs
|
|
const max = Math.max(15, (maxIntensity || p75) * 2);
|
|
|
|
console.log(`Heatmap: ${points.length} points, actualMax=${actualMax}, p95=${p95}, p90=${p90}, p75=${p75}, p50=${p50}, using max=${max}`);
|
|
|
|
if (heatLayer) map.removeLayer(heatLayer);
|
|
heatLayer = L.heatLayer(points, {
|
|
radius: 20, // Réduit de 28 à 20 pour moins de chevauchement
|
|
blur: 18, // Réduit de 22 à 18
|
|
maxZoom: 10, // Augmenté de 8 à 10 pour garder l'effet plus longtemps
|
|
minOpacity: 0.15, // Réduit de 0.25 à 0.15 pour moins de saturation
|
|
max: max,
|
|
gradient: {
|
|
0.0: '#000033', // Bleu très foncé (presque invisible)
|
|
0.15: '#000066', // Bleu foncé
|
|
0.3: '#0066cc', // Bleu moyen
|
|
0.45: '#00ccff', // Cyan
|
|
0.58: '#44ff44', // Vert
|
|
0.72: '#ffff00', // Jaune
|
|
0.86: '#ff8800', // Orange
|
|
1.0: '#ff0000' // Rouge
|
|
}
|
|
});
|
|
|
|
if (currentMode === "heat") {
|
|
map.addLayer(heatLayer);
|
|
}
|
|
}
|
|
|
|
function setMode(mode) {
|
|
// mode: "clusters" | "heat"
|
|
currentMode = mode;
|
|
const cOn = mode === "clusters";
|
|
|
|
if (cOn) {
|
|
if (!map.hasLayer(clusterLayer)) map.addLayer(clusterLayer);
|
|
if (heatLayer && map.hasLayer(heatLayer)) map.removeLayer(heatLayer);
|
|
} else {
|
|
if (map.hasLayer(clusterLayer)) map.removeLayer(clusterLayer);
|
|
if (!heatPointsLoaded) {
|
|
loadAllHeatPoints();
|
|
} else {
|
|
buildHeatLayer(allHeatPoints);
|
|
if (heatLayer && !map.hasLayer(heatLayer)) map.addLayer(heatLayer);
|
|
}
|
|
}
|
|
}
|
|
|
|
// --- UI widgets (multiselect) ---
|
|
function buildMultiSelect(containerId, items, enabledMap, labelFn, options = {}) {
|
|
const container = $(containerId);
|
|
if (!container) return;
|
|
|
|
const summaryEl = options.summaryEl || null;
|
|
const emptyLabel = options.emptyLabel || "Aucun élément";
|
|
|
|
container.innerHTML = `
|
|
<div class="ms-head">
|
|
<input class="ms-search" type="search" placeholder="Chercher…" />
|
|
<div class="ms-actions">
|
|
<button class="btn-mini" type="button" data-act="all">Tout</button>
|
|
<button class="btn-mini" type="button" data-act="none">Rien</button>
|
|
</div>
|
|
</div>
|
|
<div class="ms-list"></div>
|
|
`;
|
|
|
|
const searchEl = container.querySelector(".ms-search");
|
|
const listEl = container.querySelector(".ms-list");
|
|
|
|
function updateSummary() {
|
|
if (!summaryEl) return;
|
|
const total = items.length;
|
|
if (!total) {
|
|
summaryEl.textContent = "Aucun";
|
|
return;
|
|
}
|
|
const selected = items.filter(it => enabledMap.get(it.key) !== false).length;
|
|
if (selected === total) summaryEl.textContent = "Tous";
|
|
else if (selected === 0) summaryEl.textContent = "Aucun";
|
|
else summaryEl.textContent = `${selected}/${total}`;
|
|
}
|
|
|
|
function render() {
|
|
const q = norm(searchEl.value).toLowerCase();
|
|
listEl.innerHTML = "";
|
|
|
|
if (!items.length) {
|
|
listEl.innerHTML = `<div class="ms-empty">${escapeHtml(emptyLabel)}</div>`;
|
|
updateSummary();
|
|
return;
|
|
}
|
|
|
|
const filteredItems = items.filter(it => labelFn(it).toLowerCase().includes(q));
|
|
if (!filteredItems.length) {
|
|
listEl.innerHTML = `<div class="ms-empty">Aucun résultat</div>`;
|
|
updateSummary();
|
|
return;
|
|
}
|
|
|
|
for (const it of filteredItems) {
|
|
const key = it.key;
|
|
const on = enabledMap.get(key) === true;
|
|
const div = document.createElement("div");
|
|
div.className = `ms-item ${on ? "on" : ""}`;
|
|
div.dataset.key = key;
|
|
div.innerHTML = `
|
|
<div>${escapeHtml(labelFn(it))}</div>
|
|
<div class="count-badge">${it.count}</div>
|
|
`;
|
|
div.addEventListener("click", () => {
|
|
enabledMap.set(key, !(enabledMap.get(key) === true));
|
|
render();
|
|
applyFilters();
|
|
});
|
|
listEl.appendChild(div);
|
|
}
|
|
|
|
updateSummary();
|
|
}
|
|
|
|
container.querySelector('[data-act="all"]').addEventListener("click", () => {
|
|
for (const it of items) enabledMap.set(it.key, true);
|
|
render();
|
|
applyFilters();
|
|
});
|
|
container.querySelector('[data-act="none"]').addEventListener("click", () => {
|
|
for (const it of items) enabledMap.set(it.key, false);
|
|
render();
|
|
applyFilters();
|
|
});
|
|
searchEl.addEventListener("input", render);
|
|
|
|
render();
|
|
}
|
|
|
|
function buildStatusToggles(statusItems) {
|
|
const grid = $("statusGrid");
|
|
grid.innerHTML = "";
|
|
for (const it of statusItems) {
|
|
statusEnabled.set(it.key, true);
|
|
const btn = document.createElement("div");
|
|
btn.className = "toggle on";
|
|
btn.dataset.status = it.key;
|
|
btn.innerHTML = `<span class="box"></span><span>${escapeHtml(it.key)}</span><span class="count-badge">${it.count}</span>`;
|
|
btn.addEventListener("click", () => {
|
|
const cur = statusEnabled.get(it.key) === true;
|
|
statusEnabled.set(it.key, !cur);
|
|
btn.classList.toggle("on", !cur);
|
|
applyFilters();
|
|
});
|
|
grid.appendChild(btn);
|
|
}
|
|
}
|
|
|
|
function buildMacroGenreButtons(genreFacets = []) {
|
|
const container = $("macroGenres");
|
|
if (!container) return;
|
|
container.innerHTML = "";
|
|
macroActiveCount = 0;
|
|
|
|
const counts = new Map();
|
|
for (const m of MACRO_GENRES) counts.set(m.key, 0);
|
|
|
|
// Calculate macro genre counts from genre facets
|
|
for (const facet of genreFacets) {
|
|
const g = (facet.key || "").toLowerCase();
|
|
if (!g) continue;
|
|
for (const m of MACRO_GENRES) {
|
|
if (m.terms.some(t => g.includes(t))) {
|
|
counts.set(m.key, (counts.get(m.key) || 0) + facet.count);
|
|
}
|
|
}
|
|
}
|
|
|
|
for (const m of MACRO_GENRES) {
|
|
macroGenreEnabled.set(m.key, false);
|
|
const btn = document.createElement("button");
|
|
btn.type = "button";
|
|
btn.className = "macro-btn";
|
|
btn.dataset.key = m.key;
|
|
btn.innerHTML = `<span>${escapeHtml(m.key)}</span><span class="count-badge">${counts.get(m.key) || 0}</span>`;
|
|
btn.addEventListener("click", () => {
|
|
const cur = macroGenreEnabled.get(m.key) === true;
|
|
macroGenreEnabled.set(m.key, !cur);
|
|
btn.classList.toggle("on", !cur);
|
|
macroActiveCount += cur ? -1 : 1;
|
|
applyFilters();
|
|
});
|
|
container.appendChild(btn);
|
|
}
|
|
}
|
|
|
|
function setupDropdown(triggerId, panelId) {
|
|
const trigger = $(triggerId);
|
|
const panel = $(panelId);
|
|
if (!trigger || !panel) return;
|
|
trigger.addEventListener("click", () => {
|
|
const nowCollapsed = panel.classList.toggle("is-collapsed");
|
|
trigger.setAttribute("aria-expanded", String(!nowCollapsed));
|
|
});
|
|
}
|
|
|
|
// --- List + details + highlight ---
|
|
function sortBands(arr) {
|
|
return BMPure.sortBands(arr, $("sortSelect")?.value || "az");
|
|
}
|
|
|
|
function setActive(ma_id) {
|
|
// list highlight
|
|
for (const [id, el] of listElById.entries()) el.classList.toggle("active", id === ma_id);
|
|
|
|
// marker highlight
|
|
const m = markersById.get(ma_id);
|
|
if (m && m.setStyle) {
|
|
m.setStyle({ radius: 8, fillOpacity: 0.85, weight: 2 });
|
|
// reset others
|
|
for (const [id, mm] of markersById.entries()) {
|
|
if (id !== ma_id && mm.setStyle) mm.setStyle({ radius: 6, fillOpacity: 0.55, weight: 1 });
|
|
}
|
|
}
|
|
}
|
|
|
|
function renderList(items, hintOverride) {
|
|
const list = $("list");
|
|
list.innerHTML = "";
|
|
listElById.clear();
|
|
|
|
const sorted = sortBands(items);
|
|
$("selectionHint").textContent = hintOverride || `${sorted.length} ${t("results_label")}`;
|
|
|
|
const q = currentQuery();
|
|
|
|
for (const b of sorted.slice(0, 4000)) {
|
|
const div = document.createElement("div");
|
|
div.className = "band";
|
|
div.dataset.id = String(b.ma_id);
|
|
|
|
const name = escapeHtml(b.name || "Unknown");
|
|
const genre = escapeHtml(b.genre || "—");
|
|
const loc = escapeHtml(b.location_text || "—");
|
|
const st = escapeHtml(b.status || "—");
|
|
const yr = Number.isFinite(b.formed_year) ? String(b.formed_year) : "—";
|
|
|
|
div.innerHTML = `
|
|
<div class="name"><span class="sigil"></span><div>${name}</div></div>
|
|
<div class="meta">
|
|
<div><b>${escapeHtml(b.country || "—")}</b> • <b>${st}</b> • ${yr}</div>
|
|
<div>${genre}</div>
|
|
<div>${loc}</div>
|
|
</div>
|
|
`;
|
|
|
|
div.addEventListener("mouseenter", () => {
|
|
setActive(b.ma_id);
|
|
const m = markersById.get(b.ma_id);
|
|
if (m) m.openPopup?.();
|
|
});
|
|
|
|
div.addEventListener("click", () => {
|
|
setActive(b.ma_id);
|
|
const m = markersById.get(b.ma_id);
|
|
if (m && m.getLatLng) {
|
|
map.setView(m.getLatLng(), Math.max(map.getZoom(), 8), { animate: true });
|
|
m.openPopup?.();
|
|
} else if (Number.isFinite(b.lat) && Number.isFinite(b.lon)) {
|
|
map.setView([b.lat, b.lon], Math.max(map.getZoom(), 10), { animate: true });
|
|
}
|
|
});
|
|
|
|
list.appendChild(div);
|
|
listElById.set(b.ma_id, div);
|
|
|
|
// highlight visuel dans liste
|
|
if (q && bandMatchesQuery(b, q)) {
|
|
div.style.boxShadow = "0 0 0 1px rgba(198,26,26,0.15) inset";
|
|
}
|
|
}
|
|
}
|
|
|
|
function applyFilters() {
|
|
const q = currentQuery();
|
|
|
|
console.log("Applying filters...", {
|
|
query: q,
|
|
useViewportLoading: USE_VIEWPORT_LOADING
|
|
});
|
|
|
|
if (USE_VIEWPORT_LOADING) {
|
|
// With viewport loading, trigger a reload from server
|
|
loadViewportBands();
|
|
} else {
|
|
// Legacy mode: filter locally loaded data
|
|
filtered = geocodedBands
|
|
.filter(b => bandMatchesQuery(b, q))
|
|
.filter(b => bandMatchesCountry(b))
|
|
.filter(b => bandMatchesStatus(b))
|
|
.filter(b => bandMatchesGenre(b))
|
|
.filter(b => bandMatchesTheme(b))
|
|
.filter(b => bandMatchesYear(b));
|
|
|
|
console.log(`Filtered: ${filtered.length} bands match filters`);
|
|
|
|
rebuildLayers();
|
|
renderList(filtered);
|
|
}
|
|
}
|
|
|
|
// --- Modal for no coords ---
|
|
const modalBackdrop = $("modalBackdrop");
|
|
const modalBody = $("modalBody");
|
|
const modalClose = $("modalClose");
|
|
const modalTitle = $("modalTitle");
|
|
|
|
async function loadNoLocationBands() {
|
|
try {
|
|
modalBody.innerHTML = "<div style='padding:20px;color:rgba(162,176,194,0.85);'>Chargement...</div>";
|
|
|
|
const j = await apiGet("/api/bands?limit=10000&geocoded=0");
|
|
const items = j.items || [];
|
|
|
|
modalBody.innerHTML = "";
|
|
|
|
if (!items.length) {
|
|
modalBody.innerHTML = `<div style="padding:10px;color:rgba(162,176,194,0.85);">Aucun groupe sans coordonnées</div>`;
|
|
return;
|
|
}
|
|
|
|
for (const x of items.slice(0, 500)) {
|
|
const div = document.createElement("div");
|
|
div.className = "band";
|
|
const maUrl = x.ma_id ? `https://www.metal-archives.com/bands/x/${x.ma_id}` : "#";
|
|
div.innerHTML = `
|
|
<div class="name">
|
|
<span class="sigil"></span>
|
|
<a href="${escapeHtml(maUrl)}" target="_blank" rel="noopener noreferrer">${escapeHtml(x.name || "Unknown")}</a>
|
|
</div>
|
|
<div class="meta">
|
|
<div><b>${escapeHtml(x.country || "—")}</b> • <b>${escapeHtml(x.status || "—")}</b></div>
|
|
<div><b>Genre:</b> ${escapeHtml(x.genre || "—")}</div>
|
|
<div><b>Lieu:</b> ${escapeHtml(x.location_text || "—")}</div>
|
|
</div>
|
|
`;
|
|
modalBody.appendChild(div);
|
|
}
|
|
|
|
if (items.length > 500) {
|
|
const more = document.createElement("div");
|
|
more.style.cssText = "padding:10px;color:rgba(162,176,194,0.85);text-align:center;";
|
|
more.textContent = `... et ${items.length - 500} autres`;
|
|
modalBody.appendChild(more);
|
|
}
|
|
} catch (e) {
|
|
modalBody.innerHTML = `<div style="padding:10px;color:rgba(162,176,194,0.85);">Erreur: ${escapeHtml(e.message)}</div>`;
|
|
}
|
|
}
|
|
|
|
function closeModal() {
|
|
modalBackdrop.classList.remove("on");
|
|
modalBackdrop.setAttribute("aria-hidden", "true");
|
|
}
|
|
|
|
modalClose?.addEventListener("click", closeModal);
|
|
modalBackdrop?.addEventListener("click", (e) => {
|
|
if (e.target === modalBackdrop) closeModal();
|
|
});
|
|
|
|
// Info modal (legal/FAQ)
|
|
const infoBackdrop = $("infoBackdrop");
|
|
const infoBody = $("infoBody");
|
|
const infoClose = $("infoClose");
|
|
const infoTitle = $("infoTitle");
|
|
|
|
// LEGAL_HTML and FAQ_HTML are now generated per-language in locales.js via t('legal_html') / t('faq_html')
|
|
|
|
function openInfoModal(title, html) {
|
|
if (!infoBackdrop || !infoBody || !infoTitle) return;
|
|
infoTitle.textContent = title;
|
|
infoBody.innerHTML = html;
|
|
infoBackdrop.classList.add("on");
|
|
infoBackdrop.setAttribute("aria-hidden", "false");
|
|
}
|
|
|
|
function closeInfoModal() {
|
|
if (!infoBackdrop) return;
|
|
infoBackdrop.classList.remove("on");
|
|
infoBackdrop.setAttribute("aria-hidden", "true");
|
|
}
|
|
|
|
if (infoClose) infoClose.addEventListener("click", closeInfoModal);
|
|
if (infoBackdrop) {
|
|
infoBackdrop.addEventListener("click", (e) => {
|
|
if (e.target === infoBackdrop) closeInfoModal();
|
|
});
|
|
}
|
|
|
|
document.addEventListener("keydown", (e) => {
|
|
if (e.key === "Escape") {
|
|
closeModal();
|
|
closeInfoModal();
|
|
}
|
|
});
|
|
|
|
// Sidebar toggle
|
|
function setSidebarCollapsed(collapsed) {
|
|
if (!appEl) return;
|
|
appEl.classList.toggle("sidebar-collapsed", collapsed);
|
|
const toggle = $("sidebarToggle");
|
|
if (toggle) {
|
|
toggle.setAttribute("aria-expanded", String(!collapsed));
|
|
// Update button text
|
|
const label = toggle.querySelector(".label");
|
|
if (label) {
|
|
label.textContent = collapsed ? t("options_btn") : t("close_btn");
|
|
}
|
|
}
|
|
// Refresh map size after sidebar animation
|
|
setTimeout(() => map?.invalidateSize?.(), 220);
|
|
}
|
|
|
|
const sidebarToggle = $("sidebarToggle");
|
|
if (sidebarToggle) {
|
|
sidebarToggle.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const collapsed = appEl.classList.contains("sidebar-collapsed");
|
|
setSidebarCollapsed(!collapsed);
|
|
});
|
|
}
|
|
|
|
// Note: Sidebar closing is now controlled only via the toggle button
|
|
// We removed the overlay auto-close behavior since users want to interact
|
|
// with the map while the sidebar is open
|
|
|
|
// Collapse sidebar by default on smaller screens
|
|
if (window.matchMedia("(max-width: 1200px)").matches) {
|
|
setTimeout(() => {
|
|
setSidebarCollapsed(true);
|
|
}, 100);
|
|
}
|
|
|
|
// Language dropdown (flag-icons custom widget)
|
|
const LANG_FLAGS = { en:"gb", fr:"fr", de:"de", es:"es", it:"it", pl:"pl", nl:"nl", ro:"ro", pt:"pt", cs:"cz", sv:"se", hu:"hu", da:"dk", fi:"fi", sk:"sk", hr:"hr", sl:"si", lt:"lt", lv:"lv", et:"ee", nb:"no" };
|
|
|
|
function syncLangTrigger(lang) {
|
|
const trigger = document.getElementById("langTrigger");
|
|
if (!trigger) return;
|
|
const flagEl = trigger.querySelector(".lang-flag");
|
|
if (flagEl) flagEl.className = `fi fi-${LANG_FLAGS[lang] || "un"} lang-flag`;
|
|
const codeEl = trigger.querySelector(".lang-code");
|
|
if (codeEl) codeEl.textContent = lang.toUpperCase();
|
|
document.querySelectorAll(".lang-opt").forEach(b => {
|
|
const isCurrent = b.dataset.lang === lang;
|
|
b.classList.toggle("current", isCurrent);
|
|
// Le conteneur est un role="listbox" : les lecteurs d'écran s'appuient sur
|
|
// aria-selected, pas sur la classe CSS, pour annoncer la langue active.
|
|
b.setAttribute("aria-selected", String(isCurrent));
|
|
});
|
|
}
|
|
|
|
const langTrigger = document.getElementById("langTrigger");
|
|
const langOptions = document.getElementById("langOptions");
|
|
if (langTrigger && langOptions) {
|
|
langTrigger.addEventListener("click", (e) => {
|
|
e.stopPropagation();
|
|
const open = langOptions.classList.toggle("hidden") === false;
|
|
langTrigger.setAttribute("aria-expanded", String(open));
|
|
});
|
|
document.addEventListener("click", () => {
|
|
langOptions.classList.add("hidden");
|
|
langTrigger.setAttribute("aria-expanded", "false");
|
|
});
|
|
langOptions.querySelectorAll(".lang-opt").forEach(btn => {
|
|
btn.addEventListener("click", (e) => {
|
|
e.stopPropagation();
|
|
currentLang = btn.dataset.lang;
|
|
localStorage.setItem("lang", currentLang);
|
|
langOptions.classList.add("hidden");
|
|
langTrigger.setAttribute("aria-expanded", "false");
|
|
syncLangTrigger(currentLang);
|
|
applyI18n();
|
|
});
|
|
});
|
|
syncLangTrigger(currentLang);
|
|
}
|
|
applyI18n();
|
|
|
|
// Legal/FAQ links
|
|
const openLegal = $("openLegal");
|
|
if (openLegal) openLegal.addEventListener("click", () => openInfoModal(t("legal_title"), t("legal_html")));
|
|
|
|
const openFaq = $("openFaq");
|
|
if (openFaq) openFaq.addEventListener("click", () => openInfoModal(t("faq_title"), t("faq_html")));
|
|
|
|
// Setup dropdowns
|
|
setupDropdown("countryToggle", "countrySelect");
|
|
setupDropdown("genreToggle", "genreSelect");
|
|
setupDropdown("themeToggle", "themeSelect");
|
|
|
|
// --- Buttons / controls ---
|
|
$("btnNoLocation")?.addEventListener("click", () => {
|
|
modalTitle.textContent = t("without_coords_modal");
|
|
modalBackdrop.classList.add("on");
|
|
modalBackdrop.setAttribute("aria-hidden", "false");
|
|
loadNoLocationBands();
|
|
});
|
|
|
|
// Search with suggestions
|
|
const searchInput = $("q");
|
|
const suggestionsEl = $("searchSuggestions");
|
|
|
|
function showSearchSuggestions(query) {
|
|
if (!query || query.length < 2 || !allBands.length) {
|
|
suggestionsEl?.classList.remove("visible");
|
|
return;
|
|
}
|
|
|
|
const matches = allBands
|
|
.filter(b => bandMatchesQuery(b, query))
|
|
.slice(0, 8); // Show max 8 suggestions
|
|
|
|
if (!matches.length) {
|
|
suggestionsEl?.classList.remove("visible");
|
|
return;
|
|
}
|
|
|
|
if (suggestionsEl) {
|
|
suggestionsEl.innerHTML = matches.map(b => {
|
|
const statusText = b.status || "Unknown";
|
|
const yearText = Number.isFinite(b.formed_year) ? b.formed_year : "—";
|
|
return `
|
|
<div class="suggestion-item" data-id="${b.ma_id}">
|
|
<div class="suggestion-name">${escapeHtml(b.name)}</div>
|
|
<div class="suggestion-meta">
|
|
${escapeHtml(b.country || "—")} • ${escapeHtml(statusText)} • ${yearText} • ${escapeHtml(b.genre || "—")}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join("");
|
|
|
|
// Add click handlers
|
|
suggestionsEl.querySelectorAll(".suggestion-item").forEach(el => {
|
|
el.addEventListener("click", () => {
|
|
const bandId = Number(el.dataset.id);
|
|
const band = allBands.find(b => b.ma_id === bandId);
|
|
if (band && Number.isFinite(band.lat) && Number.isFinite(band.lon)) {
|
|
const marker = markersById.get(bandId);
|
|
if (marker && marker.getLatLng) {
|
|
map.setView(marker.getLatLng(), 10, { animate: true });
|
|
marker.openPopup();
|
|
setActive(bandId);
|
|
} else {
|
|
map.setView([band.lat, band.lon], 12, { animate: true });
|
|
}
|
|
}
|
|
suggestionsEl.classList.remove("visible");
|
|
if (searchInput) searchInput.value = band?.name || "";
|
|
});
|
|
});
|
|
|
|
suggestionsEl.classList.add("visible");
|
|
}
|
|
}
|
|
|
|
const debouncedSearch = debounce(() => {
|
|
applyFilters();
|
|
}, 400); // 400ms delay
|
|
|
|
const debouncedSuggestions = debounce((query) => {
|
|
showSearchSuggestions(query);
|
|
}, 200); // 200ms delay for suggestions
|
|
|
|
searchInput?.addEventListener("input", (e) => {
|
|
const query = e.target.value.toLowerCase().trim();
|
|
debouncedSuggestions(query);
|
|
debouncedSearch();
|
|
});
|
|
|
|
searchInput?.addEventListener("focus", () => {
|
|
const query = searchInput.value.toLowerCase().trim();
|
|
if (query.length >= 2) {
|
|
showSearchSuggestions(query);
|
|
}
|
|
});
|
|
|
|
// Close suggestions when clicking outside
|
|
document.addEventListener("click", (e) => {
|
|
if (!searchInput?.contains(e.target) && !suggestionsEl?.contains(e.target)) {
|
|
suggestionsEl?.classList.remove("visible");
|
|
}
|
|
});
|
|
|
|
$("sortSelect")?.addEventListener("change", () => {
|
|
// Re-render list with current data
|
|
const visibleBands = currentViewportData.flatMap(c => c.sample_bands || [c])
|
|
.map(b => typeof b === 'string' ? JSON.parse(b) : b)
|
|
.filter(Boolean);
|
|
renderList(visibleBands.slice(0, 200));
|
|
});
|
|
|
|
const heatToggle = $("toggleHeat");
|
|
if (heatToggle) {
|
|
heatToggle.addEventListener("change", () => setMode(heatToggle.checked ? "heat" : "clusters"));
|
|
}
|
|
|
|
$("btnReset")?.addEventListener("click", () => {
|
|
if (filtered.length) {
|
|
const pts = filtered.map(b => L.latLng(b.lat, b.lon));
|
|
const bounds = L.latLngBounds(pts);
|
|
if (bounds.isValid()) map.fitBounds(bounds.pad(0.12));
|
|
} else if (geocodedBands.length) {
|
|
const pts = geocodedBands.map(b => L.latLng(b.lat, b.lon));
|
|
const bounds = L.latLngBounds(pts);
|
|
if (bounds.isValid()) map.fitBounds(bounds.pad(0.12));
|
|
} else {
|
|
map.setView([50.2, 10.2], 4, { animate: true });
|
|
}
|
|
});
|
|
|
|
map.on("click", () => {
|
|
const visibleBands = currentViewportData.flatMap(c => c.sample_bands || [c])
|
|
.map(b => typeof b === 'string' ? JSON.parse(b) : b)
|
|
.filter(Boolean);
|
|
renderList(visibleBands.slice(0, 200));
|
|
});
|
|
|
|
// --- Boot ---
|
|
function computeFacetCounts(arr, getKey) {
|
|
const m = new Map();
|
|
for (const b of arr) {
|
|
const val = getKey(b);
|
|
const k = val ? norm(val) : "Unknown";
|
|
m.set(k, (m.get(k) || 0) + 1);
|
|
}
|
|
return [...m.entries()]
|
|
.map(([key, count]) => ({ key, count }))
|
|
.sort((a,b) => b.count - a.count);
|
|
}
|
|
|
|
function computeTokenFacetCounts(arr, getTokens) {
|
|
const m = new Map();
|
|
for (const b of arr) {
|
|
const tokens = getTokens(b) || [];
|
|
if (!tokens.length) {
|
|
// Count bands without tokens as "Unknown"
|
|
m.set("Unknown", (m.get("Unknown") || 0) + 1);
|
|
} else {
|
|
for (const t of tokens) {
|
|
const k = norm(t) || "Unknown";
|
|
m.set(k, (m.get(k) || 0) + 1);
|
|
}
|
|
}
|
|
}
|
|
return [...m.entries()]
|
|
.map(([key, count]) => ({ key, count }))
|
|
.sort((a,b) => b.count - a.count);
|
|
}
|
|
|
|
/**
|
|
* Build timeline slider from year range (from facets or computed)
|
|
*/
|
|
function buildTimelineFromRange() {
|
|
const slider = $("yearSlider");
|
|
slider.innerHTML = "";
|
|
|
|
if (!yearRange.min || !yearRange.max) {
|
|
$("yearMin").textContent = "—";
|
|
$("yearMax").textContent = "—";
|
|
$("yearHint").textContent = t("year_data_missing");
|
|
slider.innerHTML = `<div class="timeline-empty">${t("year_data_unavailable")}</div>`;
|
|
return;
|
|
}
|
|
|
|
const { min, max } = yearRange;
|
|
|
|
console.log(`Timeline: ${min} - ${max}`);
|
|
|
|
$("yearMin").textContent = String(min);
|
|
$("yearMax").textContent = String(max);
|
|
$("yearHint").textContent = t("all_years_label");
|
|
|
|
noUiSlider.create(slider, {
|
|
start: [min, max],
|
|
connect: true,
|
|
step: 1,
|
|
range: { min, max },
|
|
behaviour: "tap-drag",
|
|
tooltips: false,
|
|
});
|
|
|
|
slider.noUiSlider.on("update", (vals) => {
|
|
const a = Math.round(Number(vals[0]));
|
|
const b = Math.round(Number(vals[1]));
|
|
yearFilter = { min: a, max: b };
|
|
$("yearHint").textContent = (a === min && b === max) ? t("all_years_label") : `${a} → ${b}`;
|
|
});
|
|
|
|
slider.noUiSlider.on("change", () => {
|
|
console.log(`Year filter changed: ${yearFilter.min} - ${yearFilter.max}`);
|
|
applyFilters();
|
|
});
|
|
}
|
|
|
|
async function boot() {
|
|
try {
|
|
console.log("Boot: Loading data...");
|
|
console.log("Viewport loading mode:", USE_VIEWPORT_LOADING ? "ENABLED" : "DISABLED");
|
|
|
|
// Wait for fonts to load (can affect layout)
|
|
if (document.fonts && document.fonts.ready) {
|
|
await document.fonts.ready;
|
|
}
|
|
|
|
// Load facets and stats first (fast)
|
|
await Promise.all([
|
|
loadFacets(),
|
|
loadStats()
|
|
]);
|
|
loadGoatCounterFooterStats(); // pas besoin d'await
|
|
// Build filters from facets if available, otherwise load bands first
|
|
let statuses, genres, countries, themes;
|
|
|
|
if (facetData) {
|
|
console.log("Using server-side facets for filters");
|
|
statuses = facetData.statuses.map(s => ({ key: s.value, count: s.count }));
|
|
countries = facetData.countries.map(c => ({ key: c.value, count: c.count }));
|
|
genres = facetData.genres.map(g => ({ key: g.value, count: g.count }));
|
|
themes = []; // Themes need to be computed from bands
|
|
|
|
// Set year range from facets
|
|
if (facetData.year_range) {
|
|
yearRange = {
|
|
min: facetData.year_range.min_year,
|
|
max: facetData.year_range.max_year
|
|
};
|
|
yearFilter = { ...yearRange };
|
|
}
|
|
} else {
|
|
// Fallback: load bands and compute facets locally
|
|
console.log("Loading bands for local facet computation...");
|
|
await loadBands();
|
|
statuses = computeFacetCounts(allBands, b => b.status);
|
|
genres = computeFacetCounts(allBands, b => b.genre);
|
|
countries = computeFacetCounts(allBands, b => b.country);
|
|
themes = computeTokenFacetCounts(allBands, b => b.themes);
|
|
|
|
}
|
|
|
|
console.log(`Boot: Facets ready - ${statuses.length} statuses, ${countries.length} countries, ${genres.length} genres`);
|
|
|
|
// Init enabled maps = true
|
|
for (const it of genres) genreEnabled.set(it.key, true);
|
|
for (const it of countries) countryEnabled.set(it.key, true);
|
|
for (const it of themes) themeEnabled.set(it.key, true);
|
|
|
|
buildStatusToggles(statuses);
|
|
buildMacroGenreButtons(genres);
|
|
buildMultiSelect("genreSelect", genres, genreEnabled, (it) => it.key, { summaryEl: $("genreSummary") });
|
|
buildMultiSelect("countrySelect", countries, countryEnabled, (it) => it.key, { summaryEl: $("countrySummary") });
|
|
|
|
if (themes.length) {
|
|
$("themeBox").style.display = "";
|
|
buildMultiSelect("themeSelect", themes, themeEnabled, (it) => it.key, { summaryEl: $("themeSummary"), emptyLabel: "Aucun thème" });
|
|
} else {
|
|
$("themeBox").style.display = "none";
|
|
}
|
|
|
|
// Build timeline from facet data or computed range
|
|
buildTimelineFromRange();
|
|
|
|
// Set mode BEFORE applying filters
|
|
setMode(heatToggle && heatToggle.checked ? "heat" : "clusters");
|
|
|
|
// Force map size calculation
|
|
console.log("Forcing map size recalculation...");
|
|
if (map && map.invalidateSize) {
|
|
map.invalidateSize(true);
|
|
}
|
|
|
|
// Initial data load
|
|
console.log("Boot: Loading initial viewport data...");
|
|
|
|
if (USE_VIEWPORT_LOADING) {
|
|
// Load viewport data
|
|
await loadViewportBands();
|
|
} else {
|
|
// Legacy: use all loaded bands
|
|
if (!allBands.length) await loadBands();
|
|
applyFilters();
|
|
}
|
|
|
|
console.log("Boot: Initial load complete");
|
|
|
|
// Fit to Europe by default
|
|
setTimeout(() => {
|
|
if (map && map.invalidateSize) {
|
|
map.invalidateSize(true);
|
|
}
|
|
// Default view: Europe
|
|
map.setView([50.2, 10.2], 4);
|
|
}, 100);
|
|
|
|
// Load all bands in background for heatmap and search
|
|
setTimeout(() => loadAllHeatPoints(), 1000);
|
|
|
|
} catch (err) {
|
|
console.error("Boot error:", err);
|
|
$("list").innerHTML = `<div style="padding:20px;color:rgba(162,176,194,0.85);">Erreur de chargement: ${escapeHtml(err.message || String(err))}</div>`;
|
|
}
|
|
}
|
|
|
|
// Make sure DOM is ready before booting
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', boot);
|
|
} else {
|
|
boot();
|
|
}
|