change display depending on zoom, start filter cycle

This commit is contained in:
Tykayn 2024-12-22 00:02:33 +01:00 committed by tykayn
parent 8009f5acbb
commit 2a8b533e08
5 changed files with 1369 additions and 600 deletions

View file

@ -27,14 +27,14 @@
id='overpass-api-controls'
class='leaflet-bar leaflet-control'>
<input
id='query-button'
id='chercherButton'
type='button'
value='Chercher'>
</div>
<div class="research_display">
<div id='spinning_icon'>
<div class='message-loading'>
<div class='messageLoading'>
chargement en cours...
</div>
<svg
@ -94,15 +94,15 @@
<p>Cartes des stations de recharge pour véhicules électriques basée sur les données collaborative <a
href="https://openstreetmap.org">OpenStreetMap</a></p>
<div class="icones">
<img class="icon-img" src="img/Type2_Connector_Outline.svg" alt="type2">
<div class="icones">
<img class="icon-img" src="img/Type2_Connector_Outline.svg" alt="type2">
<img class="icon-img" src="img/type2_combo.svg" alt="prise">
<img class="icon-img" src="img/Type2_socket.svg" alt="prise">
<img class="icon-img" src="img/socket_typee.svg" alt="prise">
<img class="icon-img" src="img/chademo.svg" alt="prise">
</div>
<button id="test">
<img class="icon-img" src="img/type2_combo.svg" alt="prise">
<img class="icon-img" src="img/Type2_socket.svg" alt="prise">
<img class="icon-img" src="img/socket_typee.svg" alt="prise">
<img class="icon-img" src="img/chademo.svg" alt="prise">
</div>
<button id="removeMarkers">
effacer les marqueurs
</button>
@ -112,26 +112,37 @@
<div id="infos_carte"></div>
<div id="filter">
<div id="filters">
filtres: <br>
prise: type 2, type CCS<br>
cable: attaché, à fournir<br>
puissance:
min
<!-- <button class="button" id="toggleMinPower_50">-->
<!-- keep cool, montre les stations entre 3 et 50kW max-->
<!-- </button>-->
<!-- ,-->
<!-- <button class="button" id="toggleMinPower_100">-->
<!-- 100kW-->
<!-- </button>-->
<!-- ,-->
<!-- TODO filtrer les bornes selon la puissance -->
<!-- <button class="button" id="toggle_high_power">-->
<!-- fais voir les plus de 100kW, j'ai pas le time!-->
<!-- </button>-->
<div class="filter-group">
qualité
<button id="filterUnkown">kW max inconnu</button>
<button id="filterChelou">les valeurs chelou</button>
</div>
<div class="filter-group">
prise:
<button id="filterType2">type 2</button>
<button id="filterType2_cable">type 2 avec câble</button>
<button id="filterType2_combo">type CCS</button>
<button id="filterType2_combo_cable">type CCS avec câble</button>
</div>
<div class="filter-group">
puissance:
<button id="filterLower50kw">- de 50kW</button>
<button id="filterUpper50kw">+ de 50kW</button>
<button id="filterLower200kw">- de 200 kW</button>
<button id="filterUpper200kw">+ de 200 kW</button>
<button class="button" id="toggle_high_power">
fais voir les plus de 300kW CCS, j'ai pas le time!
</button>
</div>
<br>
<!-- TODO filtrer les bornes selon la puissance -->
</div>
<h2>
Puissances des stations:
</h2>
@ -139,6 +150,7 @@
<div id="found_charging_stations">
</div>
<hr>
<h2 class="title">
À propos de ce plan</h2>
<p>
@ -151,7 +163,8 @@
<br>
icones
câble électrique <a href="https://www.flaticon.com/fr/icones-gratuites/energie" title="energie icônes">Energie icônes créées par rukanicon - Flaticon</a>
câble électrique <a href="https://www.flaticon.com/fr/icones-gratuites/energie" title="energie icônes">Energie
icônes créées par rukanicon - Flaticon</a>
</div>
<script src='js/leaflet.js'></script>
<script src='js/jquery-3.2.1.min.js'></script>