fix: masquer les zones d'observation sans sargasses (afaiIndex = 0)

Passe afaiIndex en propriété GeoJSON et applique un filtre MapLibre
sur les layers observation : seules les features avec afai > 0 sont
affichées. Fallback : si la propriété est absente, affichage normal.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Gwadaking
2026-04-02 16:21:15 -04:00
parent 7169dffc67
commit 3f1e49bb3b
4 changed files with 781 additions and 2 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -8,7 +8,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Fredoka:wght@400;500;600&display=swap" rel="stylesheet">
<script type="module" crossorigin src="/assets/index-B_-zKuKT.js"></script>
<script type="module" crossorigin src="/assets/index-DwKkpLRn.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-RGvCvNm_.css">
</head>
<body>

View File

@@ -64,12 +64,17 @@ function cartoonizeStyle(style) {
return { ...style, layers };
}
// Filtre : affiche uniquement les features avec sargasses (afai > 0),
// ou si la propriété est absente (données legacy sans afaiIndex).
const OBS_FILTER = ['any', ['!', ['has', 'afai']], ['>', ['get', 'afai'], 0]];
// ── Layer style factories ──────────────────────────────────────────────────
const makeLayerStyles = (isPrediction, opacity, hasPattern) => ({
fill: {
id: isPrediction ? 'forecasts-fill' : 'observations-fill',
type: 'fill',
source: isPrediction ? 'forecasts' : 'observations',
...(!isPrediction ? { filter: OBS_FILTER } : {}),
paint: {
'fill-color': isPrediction ? '#818cf8' : '#f4a020',
'fill-opacity': (isPrediction ? 0.55 : 0.7) * opacity,
@@ -80,6 +85,7 @@ const makeLayerStyles = (isPrediction, opacity, hasPattern) => ({
id: isPrediction ? 'forecasts-line' : 'observations-line',
type: 'line',
source: isPrediction ? 'forecasts' : 'observations',
...(!isPrediction ? { filter: OBS_FILTER } : {}),
paint: {
'line-color': isPrediction ? '#6366f1' : '#c47a10',
'line-width': isPrediction ? 2 : 3.5,
@@ -94,6 +100,7 @@ const makeLayerStyles = (isPrediction, opacity, hasPattern) => ({
id: 'observations-dots',
type: 'fill',
source: 'observations',
filter: OBS_FILTER,
paint: {
'fill-pattern': 'sargasse-dots',
'fill-opacity': opacity * 0.7,
@@ -227,7 +234,14 @@ export default function SargassesMap({ onSpotSelect, selectedSpotId, activeStep,
const toFeatureCollection = (items = []) => {
const features = (items ?? []).filter(i => i.geometry)
.map(i => ({ type: 'Feature', geometry: i.geometry, properties: {} }));
.map(i => ({
type: 'Feature',
geometry: i.geometry,
properties: {
// afai absent → null → filtre "!has" prend le relais (affichage normal)
afai: typeof i.afaiIndex === 'number' ? i.afaiIndex : null,
},
}));
return features.length ? { type: 'FeatureCollection', features } : null;
};