From 55cad6d6ccbddf84388b5b8b6bb8af8f7ca46d44 Mon Sep 17 00:00:00 2001
From: kdeterme <karl.determe@gmail.com>
Date: Mon, 21 Sep 2026 19:12:50 +0200
Subject: [PATCH] refactor: increase map marker badge size, font size, and
 update zoom layout parameters

---
 loko/home/static/home/home_index.js      | 41 ++++++++++++------------
 loko/home/templates/home/home_index.html |  2 +-
 2 files changed, 21 insertions(+), 22 deletions(-)

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 @@
 
     </script>
     <script src="{% static 'interventions/status_colors.js' %}"></script>
-    <script src="{% static 'home/home_index.js' %}?v=20260921_3"></script>
+    <script src="{% static 'home/home_index.js' %}?v=20260921_4"></script>
 {% endblock script %}