diff --git a/loko/home/static/home/home_index.js b/loko/home/static/home/home_index.js
index 1c6e6a6..6436641 100644
--- a/loko/home/static/home/home_index.js
+++ b/loko/home/static/home/home_index.js
@@ -83,10 +83,10 @@ if (mapContainer && typeof maplibregl !== 'undefined') {
const imageName = `marker-${thematicKey}-${opKey}`;
if (mapInstance.hasImage(imageName)) return Promise.resolve();
- const canvasSize = 44;
+ const canvasSize = 64;
const center = canvasSize / 2;
- const radius = 16;
- const iconSize = 19;
+ const radius = 25;
+ const iconSize = 22;
return new Promise((resolve) => {
const img = new Image();
@@ -96,9 +96,9 @@ if (mapContainer && typeof maplibregl !== 'undefined') {
ctx.clearRect(0, 0, canvasSize, canvasSize);
// 1. Ombre subtile sous le badge pour décoller du fond cartographique clair
- ctx.shadowColor = 'rgba(0, 0, 0, 0.30)';
- ctx.shadowBlur = 3.5;
- ctx.shadowOffsetY = 1.2;
+ ctx.shadowColor = 'rgba(0, 0, 0, 0.32)';
+ ctx.shadowBlur = 4;
+ ctx.shadowOffsetY = 1.5;
// 2. Disque plein de la couleur de la thématique
ctx.beginPath();
@@ -108,11 +108,11 @@ if (mapContainer && typeof maplibregl !== 'undefined') {
// 3. Bordure blanche nette
ctx.shadowColor = 'transparent';
- ctx.lineWidth = 2.2;
+ ctx.lineWidth = 3;
ctx.strokeStyle = '#ffffff';
ctx.stroke();
- // 4. Dessin de l'icône au centre
+ // 4. Dessin de l'icône au centre avec padding généreux
drawIconFn(ctx);
}
@@ -137,7 +137,7 @@ if (mapContainer && typeof maplibregl !== 'undefined') {
canvas.height = canvasSize;
const ctx = canvas.getContext('2d');
drawBadge(ctx, (c) => {
- c.font = '12px "bootstrap-icons"';
+ c.font = '14px "bootstrap-icons"';
c.fillStyle = '#ffffff';
c.textAlign = 'center';
c.textBaseline = 'middle';
@@ -340,22 +340,21 @@ if (mapContainer && typeof maplibregl !== 'undefined') {
],
'icon-size': [
'interpolate', ['linear'], ['zoom'],
- 10, 0.58, // ~13px
- 13, 0.72, // ~16px
- 15, 0.88, // ~19px
- 18, 1.10 // ~24px
+ 10, 0.52, // ~13px diamètre (rayon 6.5px)
+ 13, 0.76, // ~19px diamètre (rayon 9.5px)
+ 15, 1.00, // ~25px diamètre (rayon 12.5px)
+ 18, 1.36 // ~34px diamètre (rayon 17.0px)
],
- 'icon-allow-overlap': false,
- 'icon-ignore-placement': false,
- 'icon-padding': 3,
+ 'icon-allow-overlap': true,
+ 'icon-ignore-placement': true,
'icon-anchor': 'center'
},
paint: {
- // En mode Heatmap : les symboles s'estompent à distance pour dégager la vue thermique
+ // En mode Heatmap : les symboles s'estompent au dézoom pour laisser le champ libre à la heatmap
'icon-opacity': [
'interpolate', ['linear'], ['zoom'],
- 14.2, 0,
- 15.4, 1
+ 13.8, 0,
+ 15.2, 1
]
}
});
@@ -395,8 +394,8 @@ if (mapContainer && typeof maplibregl !== 'undefined') {
map.setLayoutProperty('activity-points', 'visibility', 'visible');
map.setPaintProperty('activity-points', 'icon-opacity', [
'interpolate', ['linear'], ['zoom'],
- 14.2, 0,
- 15.4, 1
+ 13.8, 0,
+ 15.2, 1
]);
}
} else {
diff --git a/loko/home/templates/home/home_index.html b/loko/home/templates/home/home_index.html
index 53f0a2d..24f38aa 100644
--- a/loko/home/templates/home/home_index.html
+++ b/loko/home/templates/home/home_index.html
@@ -186,5 +186,5 @@
-
+
{% endblock script %}