libre-charge-map/index.html

169 lines
5.3 KiB
HTML
Raw Normal View History

2024-10-17 15:01:47 +02:00
<!DOCTYPE html>
2024-10-17 23:57:47 +02:00
<html lang='fr'>
<head>
<title>LibreChargeMap - OSM Bliss</title>
<meta charset='utf-8'>
2024-10-17 15:01:47 +02:00
<meta
name='viewport'
2024-10-17 23:57:47 +02:00
content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
2024-10-17 15:01:47 +02:00
<link
rel='stylesheet'
2024-10-17 23:57:47 +02:00
href='styles/leaflet.css'/>
2024-10-17 15:01:47 +02:00
<link
rel='stylesheet'
2024-10-17 23:57:47 +02:00
href='styles/style.css'/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=5.0">
2024-10-17 15:01:47 +02:00
<link rel="shortcut icon" href="img/french.png">
2024-10-17 23:57:47 +02:00
</head>
2024-10-17 15:01:47 +02:00
<body>
2024-10-17 23:57:47 +02:00
<div id='map'>
2024-10-17 15:01:47 +02:00
2024-10-17 23:57:47 +02:00
<div class='leaflet-control-container'>
<div class='leaflet-top leaflet-right'>
2024-10-17 15:01:47 +02:00
<div
id='overpass-api-controls'
2024-10-17 23:57:47 +02:00
class='leaflet-bar leaflet-control'>
2024-10-17 15:01:47 +02:00
<input
id='query-button'
type='button'
2024-11-26 21:31:43 +01:00
value='Chercher'>
2024-10-17 23:57:47 +02:00
</div>
2024-10-17 15:01:47 +02:00
<div class="research_display">
2024-10-17 23:57:47 +02:00
<div id='spinning_icon'>
2024-10-17 15:01:47 +02:00
<div class='message-loading'>
chargement en cours...
</div>
<svg
id='star'
width='4cm'
height='4cm'
viewBox='0 0 700 400'
xmlns='http://www.w3.org/2000/svg'
2024-10-17 23:57:47 +02:00
version='1.1'>
2024-10-17 15:01:47 +02:00
<polygon
fill='red'
stroke='red'
stroke-width='10'
points='350,75 379,161 469,161 397,215
423,301 350,250 277,301 303,215
2024-10-17 23:57:47 +02:00
231,161 321,161'/>
2024-10-17 15:01:47 +02:00
2024-10-17 23:57:47 +02:00
</svg>
</div>
2024-10-17 15:01:47 +02:00
</div>
2024-10-17 23:57:47 +02:00
</div>
</div>
2024-10-17 15:01:47 +02:00
</div>
2024-10-17 23:57:47 +02:00
<div class="bottom-content">
2024-12-12 00:27:27 +01:00
<h1>
2024-12-16 12:13:19 +01:00
<img class="icon-img" src="img/prise-de-courant.png" alt="prise"> Libre Charge Map
2024-12-12 00:27:27 +01:00
</h1>
2024-12-16 12:13:19 +01:00
<div id="bars_power">
</div>
2024-12-12 09:50:54 +01:00
<div id="round_power_legend">
2024-12-11 17:32:48 +01:00
<br>
<span class="marker-demo">
<span class="map-marker-circle-demo color-unknown"></span> ?
</span>
<span class="marker-demo">
<span class="map-marker-circle-demo color-1"></span> > 7 kW
</span>
<span class="marker-demo">
<span class="map-marker-circle-demo color-2"></span> > 20 kW
</span>
<span class="marker-demo">
<span class="map-marker-circle-demo color-3"></span> > 50 kW
</span>
<span class="marker-demo">
<span class="map-marker-circle-demo color-4"></span> > 100 kW
</span>
<span class="marker-demo">
<span class="map-marker-circle-demo color-5"></span> > 200 kW
</span>
<span class="marker-demo">
<span class="map-marker-circle-demo color-6"></span> > 300 kW
</span>
</div>
2024-12-16 12:13:19 +01:00
<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">
<img class="icon-img" src="img/type2_combo.svg" alt="prise">
<img class="icon-img" src="img/socket_type2.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">
effacer les marqueurs
</button>
<button id="toggle">
toggle : montrer les stations avec à minima 150kW de puissance dispo
</button>
2024-12-12 09:50:54 +01:00
<div id="infos_carte"></div>
<div id="filter">
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>
2024-12-11 17:32:48 +01:00
<h2>
2024-12-11 23:13:15 +01:00
Puissances des stations:
2024-12-11 17:32:48 +01:00
</h2>
2024-12-12 09:50:54 +01:00
2024-12-11 17:32:48 +01:00
<div id="found_charging_stations">
2024-10-17 23:57:47 +02:00
</div>
<h2 class="title">
À propos de ce plan</h2>
<p>
La carte thématique proposant des points de charge pour véhicule électrique, basée sur les données
d'OpenStreetMap.
</p>
<br>
Fait par <a href="https://mastodon.cipherbliss.com/@tykayn">Tykayn</a> - <a href="https://www.cipherbliss.com">www.cipherbliss.com</a>.
<a href="https://forge.chapril.org/tykayn/">Sources disponibles sur la forge du Chapril.</a>
2024-12-16 12:13:19 +01:00
<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>
2024-10-17 23:57:47 +02:00
</div>
<script src='js/leaflet.js'></script>
<script src='js/jquery-3.2.1.min.js'></script>
<script src='js/osmtogeojson.js'></script>
2024-10-17 15:01:47 +02:00
<script
type='module'
2024-10-17 23:57:47 +02:00
src='js/main.js'></script>
2024-10-17 15:01:47 +02:00
<script>
</script>
</body>
</html>