Valogeo/loko
Valogeo/loko
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: increase map marker badge size, font size, and update zoom layout parameters

Browse source
This commit is contained in:
kdeterme 2026-09-21 19:12:50 +02:00
parent c726d8f37c
commit 55cad6d6cc
2 changed files with 21 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
loko/home/static/home/home_index.js
View file

@ -83,10 +83,10 @@ if (mapContainer && typeof maplibregl !== 'undefined') {
const imageName = `marker-${thematicKey}-${opKey}`; const imageName = `marker-${thematicKey}-${opKey}`;
if (mapInstance.hasImage(imageName)) return Promise.resolve(); if (mapInstance.hasImage(imageName)) return Promise.resolve();
const canvasSize = 44; const canvasSize = 64;
const center = canvasSize / 2; const center = canvasSize / 2;
const radius = 16; const radius = 25;
const iconSize = 19; const iconSize = 22;
return new Promise((resolve) => { return new Promise((resolve) => {
const img = new Image(); const img = new Image();
@ -96,9 +96,9 @@ if (mapContainer && typeof maplibregl !== 'undefined') {
ctx.clearRect(0, 0, canvasSize, canvasSize); ctx.clearRect(0, 0, canvasSize, canvasSize);
// 1. Ombre subtile sous le badge pour décoller du fond cartographique clair // 1. Ombre subtile sous le badge pour décoller du fond cartographique clair
ctx.shadowColor = 'rgba(0, 0, 0, 0.30)'; ctx.shadowColor = 'rgba(0, 0, 0, 0.32)';
ctx.shadowBlur = 3.5; ctx.shadowBlur = 4;
ctx.shadowOffsetY = 1.2; ctx.shadowOffsetY = 1.5;
// 2. Disque plein de la couleur de la thématique // 2. Disque plein de la couleur de la thématique
ctx.beginPath(); ctx.beginPath();
@ -108,11 +108,11 @@ if (mapContainer && typeof maplibregl !== 'undefined') {
// 3. Bordure blanche nette // 3. Bordure blanche nette
ctx.shadowColor = 'transparent'; ctx.shadowColor = 'transparent';
ctx.lineWidth = 2.2; ctx.lineWidth = 3;
ctx.strokeStyle = '#ffffff'; ctx.strokeStyle = '#ffffff';
ctx.stroke(); 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); drawIconFn(ctx);
} }
@ -137,7 +137,7 @@ if (mapContainer && typeof maplibregl !== 'undefined') {
canvas.height = canvasSize; canvas.height = canvasSize;
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
drawBadge(ctx, (c) => { drawBadge(ctx, (c) => {
c.font = '12px "bootstrap-icons"'; c.font = '14px "bootstrap-icons"';
c.fillStyle = '#ffffff'; c.fillStyle = '#ffffff';
c.textAlign = 'center'; c.textAlign = 'center';
c.textBaseline = 'middle'; c.textBaseline = 'middle';
@ -340,22 +340,21 @@ if (mapContainer && typeof maplibregl !== 'undefined') {
], ],
'icon-size': [ 'icon-size': [
'interpolate', ['linear'], ['zoom'], 'interpolate', ['linear'], ['zoom'],
10, 0.58, // ~13px 10, 0.52, // ~13px diamètre (rayon 6.5px)
13, 0.72, // ~16px 13, 0.76, // ~19px diamètre (rayon 9.5px)
15, 0.88, // ~19px 15, 1.00, // ~25px diamètre (rayon 12.5px)
18, 1.10 // ~24px 18, 1.36 // ~34px diamètre (rayon 17.0px)
], ],
'icon-allow-overlap': false, 'icon-allow-overlap': true,
'icon-ignore-placement': false, 'icon-ignore-placement': true,
'icon-padding': 3,
'icon-anchor': 'center' 'icon-anchor': 'center'
}, },
paint: { 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': [ 'icon-opacity': [
'interpolate', ['linear'], ['zoom'], 'interpolate', ['linear'], ['zoom'],
14.2, 0, 13.8, 0,
15.4, 1 15.2, 1
] ]
} }
}); });
@ -395,8 +394,8 @@ if (mapContainer && typeof maplibregl !== 'undefined') {
map.setLayoutProperty('activity-points', 'visibility', 'visible'); map.setLayoutProperty('activity-points', 'visibility', 'visible');
map.setPaintProperty('activity-points', 'icon-opacity', [ map.setPaintProperty('activity-points', 'icon-opacity', [
'interpolate', ['linear'], ['zoom'], 'interpolate', ['linear'], ['zoom'],
14.2, 0, 13.8, 0,
15.4, 1 15.2, 1
]); ]);
} }
} else { } else {

2
loko/home/templates/home/home_index.html
View file

@ -186,5 +186,5 @@
</script> </script>
<script src="{% static 'interventions/status_colors.js' %}"></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 %} {% endblock script %}