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

1
backend/public/assets/index-D676BouX.css Normal file
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

4
backend/public/index.html
View File

@@ -8,8 +8,8 @@
<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-Crs1I2FK.js"></script> <script type="module" crossorigin src="/assets/index-DJWsPHf5.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-RGvCvNm_.css"> <link rel="stylesheet" crossorigin href="/assets/index-D676BouX.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

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

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