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

fix: corriger null paint et line-dasharray invalide dans cartoonizeStyle

Browse Source
This commit is contained in:
Gwadaking
2026-04-03 19:27:15 -04:00
parent 8bf6e20ddf
commit 22a3ce23a4
5 changed files with 777 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,6 +13,8 @@ function cartoonizeStyle(style) {
const LAND_MID = '#5fb040', BEACH = '#f0e9b0';
const ROAD_MAIN = '#f5c842', ROAD_SEC = '#f0e0a0';
const p = (layer) => layer.paint ?? {};
const layers = style.layers.map(layer => {
const id = (layer.id || '').toLowerCase();
const sl = (layer['source-layer'] || '').toLowerCase();
@@ -26,22 +28,22 @@ function cartoonizeStyle(style) {
id.includes('-water') || id.includes('ocean') || id.includes('lake')
);
if (isWaterFill) {
return { ...layer, paint: { 'fill-color': OCEAN, 'fill-antialias': true, 'fill-opacity': 1 } };
return { ...layer, paint: { 'fill-color': OCEAN, 'fill-opacity': 1 } };
}
const isLandFill = layer.type === 'fill' && (
id === 'earth' || id === 'land' || sl === 'earth' || id.includes('landmass')
);
if (isLandFill) return { ...layer, paint: { ...layer.paint, 'fill-color': LAND } };
if (isLandFill) return { ...layer, paint: { ...p(layer), 'fill-color': LAND } };
const isGreenLanduse = layer.type === 'fill' && (
id.includes('park') || id.includes('forest') || id.includes('wood') ||
id.includes('national') || id.includes('grass') || id.includes('vegetation')
);
if (isGreenLanduse) return { ...layer, paint: { ...layer.paint, 'fill-color': LAND_MID, 'fill-opacity': 0.8 } };
if (isGreenLanduse) return { ...layer, paint: { ...p(layer), 'fill-color': LAND_MID, 'fill-opacity': 0.8 } };
if (layer.type === 'fill' && (id.includes('beach') || id.includes('sand'))) {
return { ...layer, paint: { ...layer.paint, 'fill-color': BEACH } };
return { ...layer, paint: { ...p(layer), 'fill-color': BEACH } };
}
const isCoastLine = layer.type === 'line' && (
@@ -52,10 +54,10 @@ function cartoonizeStyle(style) {
}
if (layer.type === 'line' && (id.includes('motorway') || id.includes('trunk') || id.includes('primary'))) {
return { ...layer, paint: { ...layer.paint, 'line-color': ROAD_MAIN } };
return { ...layer, paint: { ...p(layer), 'line-color': ROAD_MAIN } };
}
if (layer.type === 'line' && (id.includes('secondary') || id.includes('tertiary'))) {
return { ...layer, paint: { ...layer.paint, 'line-color': ROAD_SEC } };
return { ...layer, paint: { ...p(layer), 'line-color': ROAD_SEC } };
}
return layer;
@@ -89,7 +91,7 @@ const makeLayerStyles = (isPrediction, opacity) => ({
'line-width': isPrediction ? 2 : 2.5,
'line-opacity': opacity * 0.85,
'line-opacity-transition': { duration: 350 },
'line-dasharray': isPrediction ? [4, 3] : [1],
...(isPrediction ? { 'line-dasharray': [4, 3] } : {}),
},
},
});