diff --git a/index.html b/index.html index 963a256..1a4d811 100644 --- a/index.html +++ b/index.html @@ -27,24 +27,16 @@ +
+ Zoomez pour voir les stations de recharge +
- - - - - - - - - +
-
-
- chargement en cours... -
+
-
- +

prise Libre Charge Map

@@ -157,12 +148,15 @@
-

- Puissances des stations: -

- -
+
+

+ Puissances des stations: 🔽 +

+ +
+ +

diff --git a/js/main.js b/js/main.js index e33c242..6d304d8 100644 --- a/js/main.js +++ b/js/main.js @@ -592,10 +592,11 @@ function onMapMoveEnd() { let center = map.getCenter() let zoom = map.getZoom() let infos = `Lat: ${center.lat}, Lon: ${center.lng}, Zoom : ${zoom}` - if (zoom > 10) { - loadOverpassQuery() + if (zoom < 10) { + $('#zoomMessage').show() } else { - infos += '(zoomez au niveau 11 ou plus pour charger les stations en vous déplaçant)' + $('#zoomMessage').hide() + loadOverpassQuery() } $('#infos_carte').html(infos) updateURLWithMapCoordinatesAndZoom() @@ -661,3 +662,15 @@ function cycleVariableState(filterVariableName, selectorId) { 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('🔼', '🔽')); + } +}); diff --git a/styles/style.css b/styles/style.css index 12fbd24..28f2d2c 100644 --- a/styles/style.css +++ b/styles/style.css @@ -15,11 +15,11 @@ html, p { } p { - font-size: 1.25rem; + font-size: 1rem; } #map { - height: 80vh; + height: 95vh; width: 100%; margin: 0; border: solid 2px; @@ -300,14 +300,11 @@ button { } .bar { - display: inline-block; height: 1em; text-align: right; padding: 0.55rem; padding-right: 0.25rem; float: left; - /*background: grey;*/ - /*border-right: 1px solid white;*/ } .key-values { @@ -366,19 +363,78 @@ button { color: orange; } .filter-group button.filter-state-hide{ - /*color: #670a0a;*/ background: #fff; } .filter-group button.filter-state-show{ color: green; - /*background: #96b1ea;*/ - } .filter-group button.filter-state-showOnly{ color: orange; - /*background: #96b1ea;*/ } .leaflet-control-layers-toggle{ 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; + } } \ No newline at end of file