mirror of
https://forge.chapril.org/tykayn/libre-charge-map
synced 2025-06-20 01:34:43 +02:00
336 lines
No EOL
14 KiB
HTML
336 lines
No EOL
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang='fr'>
|
|
|
|
<head>
|
|
<title>LibreChargeMap - OSM Bliss</title>
|
|
<meta charset='utf-8'>
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="LibreChargeMap - OSM Bliss">
|
|
<meta property="og:description"
|
|
content="Carte mondiale visualisant les bornes de recharges pour véhicule électrique à partir des données OpenStreetMap.">
|
|
<meta property="og:image" content="https://libre-charge-map.cipherbliss.com/libre-charge-map_overview.jpg">
|
|
<meta property="og:image:width" content="3436">
|
|
<meta property="og:image:height" content="1086">
|
|
|
|
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
|
|
<link rel='stylesheet' href='styles/leaflet.css' />
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch@3.1.0/dist/geosearch.css" />
|
|
<link rel='stylesheet' 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">
|
|
<link rel="shortcut icon" href="img/french.png">
|
|
</head>
|
|
|
|
<body class="side-panel-open">
|
|
|
|
<div id="bars_power">
|
|
</div>
|
|
<header>
|
|
<h1>
|
|
<img class="icon-img" src="img/prise-de-courant.png" alt="prise"> Libre Charge Map
|
|
</h1>
|
|
</header>
|
|
<div class="research_display">
|
|
<div id='spinning_icon'>
|
|
<svg id='star' width='4cm' height='4cm' viewBox='0 0 700 400' xmlns='http://www.w3.org/2000/svg'
|
|
version='1.1'>
|
|
<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
|
|
231,161 321,161' />
|
|
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<main>
|
|
|
|
|
|
<!-- <button id="toggleSidePanel">
|
|
☰
|
|
</button> -->
|
|
<div id="zoomMessage">
|
|
Zoomez pour voir les stations de recharge
|
|
</div>
|
|
|
|
|
|
<div id='map'>
|
|
|
|
<div class='leaflet-control-container'>
|
|
<div class='leaflet-top leaflet-right'>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<div class="side-panel">
|
|
|
|
<form>
|
|
<!-- <fieldset>-->
|
|
<input type="text" id="searchLocation" placeholder="Rechercher un lieu" class="search-input">
|
|
<button id="searchButton" class="rounded-button">🔍</button>
|
|
<select id="searchResults" class="search-results" size="5" style="display: none;"></select>
|
|
<!-- </fieldset>-->
|
|
</form>
|
|
<div id="current_station_infos"></div>
|
|
<div id="routing_infos"></div>
|
|
<div id="round_power_legend">
|
|
<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>
|
|
|
|
<p>Cartes des stations de recharge pour véhicules électriques basée sur les données collaboratives <a
|
|
href="https://openstreetmap.org">OpenStreetMap</a></p>
|
|
|
|
|
|
|
|
|
|
<!-- <div id="infos_carte"></div> -->
|
|
|
|
<div id="filters">
|
|
<h2 id="toggleFilter">
|
|
⚙️ Filtres:
|
|
</h2>
|
|
<div class="filter-group">
|
|
<p>
|
|
<label for="filter_max_output">
|
|
Afficher les stations avec une puissance supérieure à:
|
|
</label>
|
|
<input type="range" min="1" max="500" value="1" class="slider" id="filter_max_output_slider">
|
|
|
|
<span id="filter_max_output_display">
|
|
1 kW
|
|
</span>
|
|
|
|
|
|
</p>
|
|
<p>
|
|
<label for="average_charge_kwh">
|
|
Consommation moyenne sur une charge rapide (kWh) :
|
|
</label>
|
|
<input type="number" id="average_charge_kwh" min="1" max="200" value="26" step="1"
|
|
style="width: 4em;">
|
|
<span class="infos">
|
|
En moyenne, les Français réalisent 6 trajets de plus de 80km par an. En s'arrêtant toutes les
|
|
deux heures sur une voie rapide on recharge en moyenne 26 kWh en quelques minutes, ce qui ne
|
|
rallonge pas le trajet.
|
|
<br>
|
|
Les charges lentes sont plutôt destinées à être utilisées dans les lieux où l'on s'arrête pour
|
|
la nuit, ou bien où l'on séjourne plus longtemps.
|
|
</span>
|
|
</p>
|
|
<div class="filter-battery" id="filterBattery">
|
|
<h3>Paramètres de la batterie</h3>
|
|
<p>
|
|
<label for="battery_capacity">
|
|
Capacité de la batterie (kWh) :
|
|
</label>
|
|
<input type="number" id="battery_capacity" min="20" max="200" value="40" step="1"
|
|
style="width: 4em;">
|
|
</p>
|
|
<p>
|
|
<label for="battery_start_level">
|
|
Niveau de départ (%) :
|
|
</label>
|
|
<input type="number" id="battery_start_level" min="0" max="100" value="90" step="1"
|
|
style="width: 4em;">
|
|
</p>
|
|
<p>
|
|
<label for="consumption_per_km">
|
|
Consommation (Wh/km) :
|
|
</label>
|
|
<input type="number" id="consumption_per_km" min="100" max="300" value="160" step="1"
|
|
style="width: 4em;">
|
|
</p>
|
|
<p>
|
|
<label for="min_battery_level">
|
|
Niveau minimum recommandé (%) :
|
|
</label>
|
|
<input type="number" id="min_battery_level" min="0" max="100" value="15" step="1"
|
|
style="width: 4em;">
|
|
</p>
|
|
<p>
|
|
<label for="charge_to_level">
|
|
Niveau de charge visé (%) :
|
|
</label>
|
|
<input type="number" id="charge_to_level" min="0" max="100" value="80" step="1"
|
|
style="width: 4em;">
|
|
</p>
|
|
<p>
|
|
<label for="max_charge_power">
|
|
Puissance de charge maximale (kW) :
|
|
</label>
|
|
<input type="number" id="max_charge_power" min="1" max="350" value="50" step="1"
|
|
style="width: 4em;">
|
|
</p>
|
|
</div>
|
|
<div class="filter-display" id="filterDisplay">
|
|
<h3>Options d'affichage</h3>
|
|
<label>
|
|
<input type="checkbox" id="display_charges">
|
|
<span class="checkbox-custom"></span>
|
|
<span>Afficher les tarifs des stations</span>
|
|
</label>
|
|
</div>
|
|
<div class="filter-sockets" id="filterSockets">
|
|
|
|
<h3>Types de prises</h3>
|
|
|
|
<label>
|
|
<input type="checkbox" id="filterCableAttached">
|
|
<span class="checkbox-custom"></span>
|
|
<img class="icon-img" src="img/vending_machine.png" alt="cable">
|
|
<span>Avec câble attaché</span>
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="filterCCS">
|
|
<span class="checkbox-custom"></span>
|
|
<img class="icon-img" src="img/type2_combo.svg" alt="prise">
|
|
<span>CCS</span>
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="filterType1">
|
|
<span class="checkbox-custom"></span>
|
|
<span>Type 1</span>
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="filterType2">
|
|
<span class="checkbox-custom"></span>
|
|
<img class="icon-img" src="img/Type2_socket.svg" alt="prise">
|
|
<span>Type 2</span>
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="filterType3">
|
|
<span class="checkbox-custom"></span>
|
|
<span>Type 3</span>
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="filterDomestic">
|
|
<span class="checkbox-custom"></span>
|
|
<img class="icon-img" src="img/socket_typee.svg" alt="prise">
|
|
<span>E / Domestique</span>
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="filterChademo">
|
|
<span class="checkbox-custom"></span>
|
|
<img class="icon-img" src="img/chademo.svg" alt="prise">
|
|
<span>CHAdeMO</span>
|
|
</label>
|
|
|
|
</div>
|
|
<hr>
|
|
<h3>Qualité des données</h3>
|
|
<label for="filterBadTags">
|
|
<input type="checkbox" id="filterBadTags">
|
|
<span class="checkbox-custom"></span>
|
|
<span>Afficher les alertes de problèmes de qualité</span>
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="filterUnkown">
|
|
<span class="checkbox-custom"></span>
|
|
<span>❓ kW max inconnu</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="statsChargingStation">
|
|
|
|
<button id="setRandomView" title="Afficher une ville aléatoire">
|
|
<span class="icon-img">🎲</span>
|
|
</button>
|
|
<button id="removeMarkers" title="Supprimer les points de charge">
|
|
<span class="icon-img">🗑️</span>
|
|
</button>
|
|
<h2 id="toggle-stats" style="cursor: pointer;">
|
|
🚀 Puissances des stations: 🔽
|
|
</h2>
|
|
|
|
<div id="found_charging_stations">
|
|
|
|
</div>
|
|
<div class="footland">
|
|
|
|
<hr>
|
|
<a href="/stats.html">
|
|
<h2 class="title">
|
|
📊 Statistiques</h2>
|
|
</a>
|
|
<p>
|
|
La carte thématique proposant des points de charge pour véhicule électrique, basée sur les données
|
|
d'OpenStreetMap. Voir la documentation OSM concernant <a
|
|
href="https://wiki.openstreetmap.org/wiki/Key:socket:*">les sockets</a> et les
|
|
<a href="https://wiki.openstreetmap.org/wiki/FR:Tag:amenity%3Dcharging_station">
|
|
stations de recharge pour véhicules électriques
|
|
</a>.
|
|
<br>
|
|
Les analyses Osmose proposent l'intégration de stations de recharges issues de l'open data sur les
|
|
IRVE
|
|
de
|
|
Data Gouv. Vous pouvez les désactiver dans les filtres de calques. Quand les stations existantes
|
|
sont
|
|
activées, seules les analyses osmoses avec un minimum de distance sont affichées.
|
|
</p>
|
|
<p>
|
|
|
|
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>
|
|
|
|
<br>
|
|
<span class="small">
|
|
|
|
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>
|
|
</span>
|
|
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div id='count_features_fond'>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
|
|
|
|
|
|
|
|
|
|
<script src='js/leaflet.js'></script>
|
|
<script src='js/jquery-3.2.1.min.js'></script>
|
|
|
|
<script src="https://unpkg.com/leaflet-geosearch@3.1.0/dist/bundle.min.js"></script>
|
|
|
|
<script src='js/osmtogeojson.js'></script>
|
|
<script type='module' src='js/lcm_main.js'></script>
|
|
<script>
|
|
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |