tykayn/osm-labo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

up command and labourage

Browse source
This commit is contained in:
Tykayn 2025-08-08 18:51:44 +02:00 • committed by tykayn
parent 8cfea30fdf
commit a81112a018
5 changed files with 279 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

79
templates/public/cities.html.twig
View file

@ -11,6 +11,43 @@
width: 100%;
margin-bottom: 1rem;
}
.map-legend {
background: white;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
position: absolute;
bottom: 20px;
right: 20px;
z-index: 1;
}
.legend-title {
font-weight: bold;
margin-bottom: 5px;
text-align: center;
}
.legend-gradient {
display: flex;
justify-content: space-between;
align-items: center;
}
.legend-item {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 5px;
}
.legend-color {
width: 20px;
height: 20px;
border-radius: 50%;
margin-bottom: 2px;
}
</style>
{% endblock %}
@ -37,17 +74,28 @@
<div class="map-container">
<div id="citiesMap"></div>
<div class="map-legend">
<div class="legend-item">
<div class="legend-color" style="background-color: #28a745;"></div>
<span>Complétion > 80%</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #17a2b8;"></div>
<span>Complétion 50-80%</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #ffc107;"></div>
<span>Complétion < 50%</span>
<div class="legend-title">Pourcentage de complétion</div>
<div class="legend-gradient">
<div class="legend-item">
<div class="legend-color" style="background-color: #808080;"></div>
<span>0%</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #6a9a40;"></div>
<span>25%</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #55b400;"></div>
<span>50%</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #40ce00;"></div>
<span>75%</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #00aa00;"></div>
<span>100%</span>
</div>
</div>
</div>
</div>
@ -109,13 +157,8 @@
{% if citiesForMap is not empty %}
{% for city in citiesForMap %}
{% if city.lat and city.lon %}
// Determine marker color based on completion percentage
{% if city.completionPercent > 80 %}
color = '#28a745'; // Green for high completion
{% elseif city.completionPercent > 50 %}
color = '#17a2b8'; // Blue for medium completion
{% endif %}
// Use the marker color calculated in the controller
color = '{{ city.markerColor }}';
// Create marker and popup
new maplibregl.Marker({color: color})