gwadaking/radarsargasses
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: supprimer le pattern dots, réduire opacité observations

Browse Source 
Les dots couvraient tout le tile Sentinel (pas seulement les pixels
sargasses), saturant la vue. Fill opacity réduit à 0.5 pour laisser
respirer la carte sous-jacente.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Gwadaking
2026-04-02 16:42:33 -04:00
parent 6bf6762dac
commit 8a60c783b1
4 changed files with 773 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
backend/public/assets/index-Crs1I2FK.js Normal file
View File

File diff suppressed because one or more lines are too long

756
backend/public/assets/maplibre-gl-pixJZiWd.js Normal file
View File

File diff suppressed because one or more lines are too long

2
backend/public/index.html
View File

@@ -8,7 +8,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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"> <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-CyPsbTID.js"></script> <script type="module" crossorigin src="/assets/index-Crs1I2FK.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-RGvCvNm_.css"> <link rel="stylesheet" crossorigin href="/assets/index-RGvCvNm_.css">
</head> </head>
<body> <body>

47
frontend/src/components/Map/SargassesMap.jsx
View File

@@ -69,15 +69,14 @@ function cartoonizeStyle(style) {
const OBS_FILTER = ['any', ['!', ['has', 'afai']], ['>', ['get', 'afai'], 0]]; const OBS_FILTER = ['any', ['!', ['has', 'afai']], ['>', ['get', 'afai'], 0]];
// ── Layer style factories ────────────────────────────────────────────────── // ── Layer style factories ──────────────────────────────────────────────────
const makeLayerStyles = (isPrediction, opacity, hasPattern) => ({ const makeLayerStyles = (isPrediction, opacity) => ({
fill: { fill: {
id: isPrediction ? 'forecasts-fill' : 'observations-fill', id: isPrediction ? 'forecasts-fill' : 'observations-fill',
type: 'fill', type: 'fill',
source: isPrediction ? 'forecasts' : 'observations', source: isPrediction ? 'forecasts' : 'observations',
...(!isPrediction ? { filter: OBS_FILTER } : {}),
paint: { paint: {
'fill-color': isPrediction ? '#818cf8' : '#f4a020', 'fill-color': isPrediction ? '#818cf8' : '#f4a020',
'fill-opacity': (isPrediction ? 0.55 : 0.7) * opacity, 'fill-opacity': (isPrediction ? 0.45 : 0.5) * opacity,
'fill-opacity-transition': { duration: 350 }, 'fill-opacity-transition': { duration: 350 },
}, },
}, },
@@ -85,29 +84,14 @@ const makeLayerStyles = (isPrediction, opacity, hasPattern) => ({
id: isPrediction ? 'forecasts-line' : 'observations-line', id: isPrediction ? 'forecasts-line' : 'observations-line',
type: 'line', type: 'line',
source: isPrediction ? 'forecasts' : 'observations', source: isPrediction ? 'forecasts' : 'observations',
...(!isPrediction ? { filter: OBS_FILTER } : {}),
paint: { paint: {
'line-color': isPrediction ? '#6366f1' : '#c47a10', 'line-color': isPrediction ? '#6366f1' : '#c47a10',
'line-width': isPrediction ? 2 : 3.5, 'line-width': isPrediction ? 2 : 2.5,
'line-opacity': opacity, 'line-opacity': opacity * 0.85,
'line-opacity-transition': { duration: 350 }, 'line-opacity-transition': { duration: 350 },
'line-dasharray': isPrediction ? [4, 3] : [1], 'line-dasharray': isPrediction ? [4, 3] : [1],
}, },
}, },
// Dot texture overlay for observations
...(!isPrediction && hasPattern ? {
dots: {
id: 'observations-dots',
type: 'fill',
source: 'observations',
filter: OBS_FILTER,
paint: {
'fill-pattern': 'sargasse-dots',
'fill-opacity': opacity * 0.7,
'fill-opacity-transition': { duration: 350 },
},
},
} : {}),
}); });
// ── SVG Markers ─────────────────────────────────────────────────────────── // ── SVG Markers ───────────────────────────────────────────────────────────
@@ -169,7 +153,6 @@ export default function SargassesMap({ onSpotSelect, selectedSpotId, activeStep,
const [viewState, setViewState] = useState(INITIAL_VIEW); const [viewState, setViewState] = useState(INITIAL_VIEW);
const [layerOpacity, setLayerOpacity] = useState(1); const [layerOpacity, setLayerOpacity] = useState(1);
const [mapStyle, setMapStyle] = useState(FALLBACK_STYLE); const [mapStyle, setMapStyle] = useState(FALLBACK_STYLE);
const [patternReady, setPatternReady] = useState(false);
// Load cartoon map style // Load cartoon map style
useEffect(() => { useEffect(() => {
@@ -249,27 +232,12 @@ export default function SargassesMap({ onSpotSelect, selectedSpotId, activeStep,
? { lng: spot.longitude, lat: spot.latitude } ? { lng: spot.longitude, lat: spot.latitude }
: null; : null;
const handleMapLoad = useCallback((e) => { const handleMapLoad = useCallback(() => {
const map = e.target;
// Create dot pattern for sargasse texture
const canvas = document.createElement('canvas');
canvas.width = 12; canvas.height = 12;
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(255, 255, 255, 0.22)';
ctx.beginPath();
ctx.arc(6, 6, 2.5, 0, Math.PI * 2);
ctx.fill();
try {
map.addImage('sargasse-dots', ctx.getImageData(0, 0, 12, 12));
setPatternReady(true);
} catch (_) {}
loadLayers(); loadLayers();
}, [loadLayers]); }, [loadLayers]);
const OBS_STYLES = makeLayerStyles(false, layerOpacity, patternReady); const OBS_STYLES = makeLayerStyles(false, layerOpacity);
const FORE_STYLES = makeLayerStyles(true, layerOpacity, false); const FORE_STYLES = makeLayerStyles(true, layerOpacity);
return ( return (
<Map <Map
@@ -286,7 +254,6 @@ export default function SargassesMap({ onSpotSelect, selectedSpotId, activeStep,
{obsGeoJSON && ( {obsGeoJSON && (
<Source id="observations" type="geojson" data={obsGeoJSON}> <Source id="observations" type="geojson" data={obsGeoJSON}>
<Layer {...OBS_STYLES.fill} /> <Layer {...OBS_STYLES.fill} />
{patternReady && <Layer {...OBS_STYLES.dots} />}
<Layer {...OBS_STYLES.line} /> <Layer {...OBS_STYLES.line} />
</Source> </Source>
)} )}