libre-charge-map/index.html

191 lines
6.7 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'>
2025-04-18 17:53:07 +02:00
2024-10-17 23:57:47 +02:00
<head>
<title>LibreChargeMap - OSM Bliss</title>
<meta charset='utf-8'>
2024-12-23 00:02:46 +01:00
<meta property="og:type" content="website">
<meta property="og:title" content="LibreChargeMap - OSM Bliss">
<meta property="og:description"
2025-04-18 17:53:07 +02:00
content="Carte mondiale visualisant les bornes de recharges pour véhicule électrique à partir des données OpenStreetMap.">
2024-12-23 00:02:46 +01:00
<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">
2025-04-18 17:53:07 +02:00
<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' />
2024-10-17 23:57:47 +02:00
<meta name="viewport"
2025-04-18 17:53:07 +02:00
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>
2025-04-18 17:53:07 +02:00
2024-12-28 17:59:15 +01:00
<body class="side-panel-open">
2024-10-17 15:01:47 +02:00
2025-04-18 17:53:07 +02:00
<div id="bars_power">
</div>
<header>
<h1>
<img class="icon-img" src="img/prise-de-courant.png" alt="prise"> Libre Charge Map
</h1>
</header>
2024-10-17 15:01:47 +02:00
2024-12-28 17:00:21 +01:00
2025-04-18 17:53:07 +02:00
<main>
<button id="toggleSidePanel">
</button>
<div id="zoomMessage">
Zoomez pour voir les stations de recharge
</div>
<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'>
2025-04-18 17:53:07 +02:00
<polygon fill='red' stroke='red' stroke-width='10' points='350,75 379,161 469,161 397,215
2024-12-28 17:00:21 +01:00
423,301 350,250 277,301 303,215
2025-04-18 17:53:07 +02:00
231,161 321,161' />
2025-04-18 17:53:07 +02:00
</svg>
</div>
</div>
2025-04-18 17:53:07 +02:00
<div id='count_features_fond'>
</div>
<div id='map'>
2025-04-18 17:53:07 +02:00
<div class='leaflet-control-container'>
<div class='leaflet-top leaflet-right'>
2025-04-18 17:53:07 +02:00
</div>
2024-10-17 15:01:47 +02:00
</div>
2025-04-18 17:53:07 +02:00
2024-10-17 23:57:47 +02:00
</div>
2025-04-18 17:53:07 +02:00
</main>
2025-04-18 17:53:07 +02:00
<div class="side-panel">
2025-04-18 17:53:07 +02:00
<form onclick="searchLocation()">
<!-- <fieldset>-->
<input type="text" id="searchLocation" placeholder="Rechercher un lieu" class="search-input">
<button id="searchButton" class="rounded-button">🔍 Rechercher</button>
<select id="searchResults" class="search-results" size="5" style="display: none;"></select>
<!-- </fieldset>-->
</form>
2024-12-16 12:13:19 +01:00
2025-04-18 17:53:07 +02:00
<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>
2024-12-16 12:13:19 +01:00
2025-04-18 17:53:07 +02: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>
2024-12-31 23:47:08 +01:00
2024-12-23 00:30:04 +01:00
2024-12-16 12:13:19 +01:00
2025-04-18 17:53:07 +02:00
<div id="current_station_infos"></div>
<div id="infos_carte"></div>
<div id="filters">
2025-04-18 18:00:08 +02:00
<!-- <h2>
2025-04-18 17:53:07 +02:00
⚙️ Filtres:
2025-04-18 18:00:08 +02:00
</h2> -->
2025-04-18 17:53:07 +02:00
<div class="filter-group">
2025-04-18 23:36:04 +02:00
<!-- TODO ajouter des filtres selon la puissance et le type de socket -->
2025-04-18 23:43:48 +02:00
2025-04-18 17:53:07 +02:00
</div>
<br>
<!-- TODO filtrer les bornes selon la puissance -->
2024-12-12 09:50:54 +01:00
2025-04-18 17:53:07 +02:00
</div>
<div id="statsChargingStation">
2024-12-11 17:32:48 +01:00
2025-04-18 17:53:07 +02:00
<h2 id="toggle-stats" style="cursor: pointer;">
🚀 Puissances des stations: 🔽
</h2>
2025-04-18 17:53:07 +02:00
<div id="found_charging_stations">
2025-04-18 17:53:07 +02:00
</div>
2024-12-28 13:29:29 +01:00
</div>
2025-04-18 17:53:07 +02:00
<hr>
<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. 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>.
2025-04-18 23:36:04 +02:00
<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.
2025-04-18 17:53:07 +02:00
</p>
2025-04-18 23:36:04 +02:00
<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>
2025-04-18 17:53:07 +02:00
<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>
<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>
2025-04-18 23:36:04 +02:00
</p>
2024-10-17 23:57:47 +02:00
</div>
2025-04-18 17:53:07 +02:00
2025-04-18 17:53:07 +02:00
<script src='js/leaflet.js'></script>
<script src='js/jquery-3.2.1.min.js'></script>
2024-12-23 00:02:46 +01:00
2025-04-18 17:53:07 +02:00
<script src="https://unpkg.com/leaflet-geosearch@3.1.0/dist/bundle.min.js"></script>
2024-12-23 00:02:46 +01:00
2025-04-18 17:53:07 +02:00
<script src='js/osmtogeojson.js'></script>
<script type='module' src='js/lcm_main.js'></script>
<script>
2024-10-17 15:01:47 +02:00
2025-04-18 17:53:07 +02:00
</script>
2024-10-17 15:01:47 +02:00
</body>
2025-04-18 17:53:07 +02:00
2025-04-18 22:54:54 +02:00
</html>