tykayn/libre-charge-map
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

up bandeau latéral

Browse Source
This commit is contained in:
Tykayn 2024-12-28 13:29:29 +01:00 committed by tykayn
parent 12b399615c
commit ce029e2c76
3 changed files with 95 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
index.html
View File

@ -27,24 +27,16 @@
<body> <body>
<div id="zoomMessage">
Zoomez pour voir les stations de recharge
</div>
<div id='map'> <div id='map'>
<div class='leaflet-control-container'> <div class='leaflet-control-container'>
<div class='leaflet-top leaflet-right'> <div class='leaflet-top leaflet-right'>
<!-- <div-->
<!-- id='overpass-api-controls'-->
<!-- class='leaflet-bar leaflet-control'>-->
<!-- <input-->
<!-- id='chercherButton'-->
<!-- type='button'-->
<!-- value='Chercher'>-->
<!-- </div>-->
<div class="research_display"> <div class="research_display">
<div id='spinning_icon'> <div id='spinning_icon'>
<div class='messageLoading'>
chargement en cours...
</div>
<svg <svg
id='star' id='star'
width='4cm' width='4cm'
@ -68,8 +60,7 @@
</div> </div>
<div class="bottom-content"> <div class="side-panel">
<h1> <h1>
<img class="icon-img" src="img/prise-de-courant.png" alt="prise"> Libre Charge Map <img class="icon-img" src="img/prise-de-courant.png" alt="prise"> Libre Charge Map
</h1> </h1>
@ -157,13 +148,16 @@
</div> </div>
<h2> <div id="statsChargingStation">
Puissances des stations:
<h2 id="toggle-stats" style="cursor: pointer;">
Puissances des stations: 🔽
</h2> </h2>
<div id="found_charging_stations"> <div id="found_charging_stations">
</div> </div>
</div>
<hr> <hr>
<h2 class="title"> <h2 class="title">
À propos de ce plan</h2> À propos de ce plan</h2>

19
js/main.js
View File

@ -592,10 +592,11 @@ function onMapMoveEnd() {
let center = map.getCenter() let center = map.getCenter()
let zoom = map.getZoom() let zoom = map.getZoom()
let infos = `Lat: ${center.lat}, Lon: ${center.lng}, Zoom : ${zoom}` let infos = `Lat: ${center.lat}, Lon: ${center.lng}, Zoom : ${zoom}`
if (zoom > 10) { if (zoom < 10) {
loadOverpassQuery() $('#zoomMessage').show()
} else { } else {
infos += '(zoomez au niveau 11 ou plus pour charger les stations en vous déplaçant)' $('#zoomMessage').hide()
loadOverpassQuery()
} }
$('#infos_carte').html(infos) $('#infos_carte').html(infos)
updateURLWithMapCoordinatesAndZoom() updateURLWithMapCoordinatesAndZoom()
@ -661,3 +662,15 @@ function cycleVariableState(filterVariableName, selectorId) {
return filterVariableName return filterVariableName
} }
// toggle des stats
$('#toggle-stats').on('click', function() {
$('#found_charging_stations').slideToggle();
// Change le symbole de la flèche
let text = $(this).text();
if(text.includes('🔽')) {
$(this).text(text.replace('🔽', '🔼'));
} else {
$(this).text(text.replace('🔼', '🔽'));
}
});

74
styles/style.css
View File

@ -15,11 +15,11 @@ html, p {
} }
p { p {
font-size: 1.25rem; font-size: 1rem;
} }
#map { #map {
height: 80vh; height: 95vh;
width: 100%; width: 100%;
margin: 0; margin: 0;
border: solid 2px; border: solid 2px;
@ -300,14 +300,11 @@ button {
} }
.bar { .bar {
display: inline-block;
height: 1em; height: 1em;
text-align: right; text-align: right;
padding: 0.55rem; padding: 0.55rem;
padding-right: 0.25rem; padding-right: 0.25rem;
float: left; float: left;
/*background: grey;*/
/*border-right: 1px solid white;*/
} }
.key-values { .key-values {
@ -366,19 +363,78 @@ button {
color: orange; color: orange;
} }
.filter-group button.filter-state-hide{ .filter-group button.filter-state-hide{
/*color: #670a0a;*/
background: #fff; background: #fff;
} }
.filter-group button.filter-state-show{ .filter-group button.filter-state-show{
color: green; color: green;
/*background: #96b1ea;*/
} }
.filter-group button.filter-state-showOnly{ .filter-group button.filter-state-showOnly{
color: orange; color: orange;
/*background: #96b1ea;*/
} }
.leaflet-control-layers-toggle{ .leaflet-control-layers-toggle{
background-size:contain; background-size:contain;
} }
.side-panel {
font-size: 1rem;
position: fixed;
left: 0;
top: 0;
width: 20vw;
height: 100vh;
background: white;
box-shadow: -2px 0 5px rgba(0,0,0,0.2);
overflow-y: auto;
padding: 20px;
z-index: 1000;
}
#zoomMessage{
position: fixed;
bottom: 5rem;
left: 50%;
transform: translateX(-50%);
background: rgba(255,255,255,0.9);
padding: 1rem 2rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
text-align: center;
z-index: 10;
border-left: 4px solid #ff0000;
animation: rainbow-border 4s linear infinite;
}
@keyframes rainbow-border {
0% { border-left-color: #ff0000; }
17% { border-left-color: #ff8000; }
33% { border-left-color: #ffff00; }
50% { border-left-color: #00ff00; }
67% { border-left-color: #0000ff; }
83% { border-left-color: #8000ff; }
100% { border-left-color: #ff0000; }
}
#map {
z-index: 1;
margin-right: 300px; /* Pour laisser de la place au panneau */
}
/* Style pour mobile */
@media (max-width: 768px) {
.side-panel {
position: static;
width: 100%;
height: auto;
transform: none;
box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
margin-top: 20px;
}
.side-panel.active {
transform: none;
}
#map {
margin-right: 0;
}
}