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}`;
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 {

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

@ -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 %}