mirror of
https://forge.chapril.org/tykayn/libre-charge-map
synced 2025-06-20 01:34:43 +02:00
🎨 displace search to top
This commit is contained in:
Tykayn
tykayn
parent
e0a042c28b
commit
b30985b581
7 changed files with 581 additions and 291 deletions
402
index.html
402
index.html
|
|
@ -1,133 +1,224 @@
|
|||
<!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.">
|
||||
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, 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">
|
||||
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">
|
||||
|
||||
|
||||
<header>
|
||||
<h1>
|
||||
<img class="icon-img" src="img/prise-de-courant.png" alt="prise"> Libre Charge Map
|
||||
</h1>
|
||||
</header>
|
||||
<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'>
|
||||
<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>
|
||||
<div id='count_features_fond'>
|
||||
</div>
|
||||
<div id='map'>
|
||||
|
||||
<div class='leaflet-control-container'>
|
||||
<div class='leaflet-top leaflet-right'>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<div class="side-panel">
|
||||
|
||||
<div id="bars_power">
|
||||
</div>
|
||||
<div id="round_power_legend">
|
||||
<header>
|
||||
<h1>
|
||||
<img class="icon-img" src="img/prise-de-courant.png" alt="prise"> Libre Charge Map
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<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'>
|
||||
<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>
|
||||
<div id='count_features_fond'>
|
||||
</div>
|
||||
<div id='map'>
|
||||
|
||||
<div class='leaflet-control-container'>
|
||||
<div class='leaflet-top leaflet-right'>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="side-panel">
|
||||
|
||||
<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>
|
||||
|
||||
<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 collaborative <a
|
||||
href="https://openstreetmap.org">OpenStreetMap</a></p>
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="current_station_infos"></div>
|
||||
<div id="infos_carte"></div>
|
||||
|
||||
<div id="filters">
|
||||
<h2>
|
||||
⚙️ Filtres:
|
||||
</h2>
|
||||
<div class="filter-group">
|
||||
qualité
|
||||
<button id="filterUnkown">❓ kW max inconnu</button>
|
||||
<br>
|
||||
<fieldset class="wip">
|
||||
WIP:
|
||||
<a href="" id="mapCompleteLink" class="external-editor">mapcomplete</a>
|
||||
<a href="" id="josmLink" class="external-editor">JOSM</a>
|
||||
<a href="" id="idLink" class="external-editor">id</a>
|
||||
<br>
|
||||
<button id="cableMissing">sans information de câble</button>
|
||||
<i class="info">
|
||||
<span class="i">i</span>
|
||||
<span class="tooltip">mettre un marqueur aux stations qui n'ont pas d'information de
|
||||
câble</span>
|
||||
</i>
|
||||
</fieldset>
|
||||
<!-- <button id="filterChelou">les valeurs chelou</button>-->
|
||||
</div>
|
||||
<!-- TODO add more filters-->
|
||||
<!-- <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>
|
||||
|
||||
<div id="statsChargingStation">
|
||||
|
||||
<h2 id="toggle-stats" style="cursor: pointer;">
|
||||
🚀 Puissances des stations: 🔽
|
||||
</h2>
|
||||
|
||||
<div id="found_charging_stations">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<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>.
|
||||
</p>
|
||||
<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>
|
||||
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>
|
||||
<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>
|
||||
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<div class="filters-box">
|
||||
<button id="removeMarkers" class="rounded-button">
|
||||
🗑️ Effacer les marqueurs
|
||||
<button id="removeMarkers" class="rounded-button" title="Effacer les marqueurs">
|
||||
🗑️
|
||||
<!-- Effacer les marqueurs -->
|
||||
</button>
|
||||
<button id="chercherButton" class="rounded-button">
|
||||
🔄 Recharger
|
||||
<button id="chercherButton" class="rounded-button" title="Recharger">
|
||||
🔄
|
||||
<!-- Recharger -->
|
||||
</button>
|
||||
<button id="setRandomView" class="rounded-button">
|
||||
🎲 Une ville au hasard
|
||||
<button id="setRandomView" class="rounded-button" title="Une ville au hasard">
|
||||
🎲
|
||||
<!-- Une ville au hasard -->
|
||||
</button>
|
||||
<button id="sendToJOSM" class="rounded-button">
|
||||
🗺️ Éditer dans JOSM
|
||||
<button id="sendToJOSM" class="rounded-button" title="Éditer dans JOSM">
|
||||
🗺️
|
||||
<!-- Éditer dans JOSM -->
|
||||
</button>
|
||||
<button id="shareUrl" class="rounded-button">
|
||||
📤 Partager l'URL
|
||||
<button id="shareUrl" class="rounded-button" title="Partager l'URL">
|
||||
📤
|
||||
<!-- Partager l'URL -->
|
||||
</button>
|
||||
|
||||
<!-- <button id="toggle">-->
|
||||
|
|
@ -136,104 +227,17 @@
|
|||
|
||||
</div>
|
||||
|
||||
<div id="current_station_infos"></div>
|
||||
<div id="infos_carte"></div>
|
||||
<script src='js/leaflet.js'></script>
|
||||
<script src='js/jquery-3.2.1.min.js'></script>
|
||||
|
||||
<div id="filters">
|
||||
<h2>
|
||||
⚙️ Filtres:
|
||||
</h2>
|
||||
<div class="filter-group">
|
||||
qualité
|
||||
<button id="filterUnkown">❓ kW max inconnu</button>
|
||||
<br>
|
||||
<fieldset class="wip">
|
||||
WIP:
|
||||
<a href="" id="mapCompleteLink" class="external-editor">mapcomplete</a>
|
||||
<a href="" id="josmLink" class="external-editor">JOSM</a>
|
||||
<a href="" id="idLink" class="external-editor">id</a>
|
||||
<br>
|
||||
<button id="cableMissing">sans information de câble</button>
|
||||
<i class="info">
|
||||
<span class="i">i</span>
|
||||
<span class="tooltip">mettre un marqueur aux stations qui n'ont pas d'information de câble</span>
|
||||
</i>
|
||||
</fieldset>
|
||||
<!-- <button id="filterChelou">les valeurs chelou</button>-->
|
||||
</div>
|
||||
<!-- TODO add more filters-->
|
||||
<!-- <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 -->
|
||||
<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>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="statsChargingStation">
|
||||
|
||||
<h2 id="toggle-stats" style="cursor: pointer;">
|
||||
🚀 Puissances des stations: 🔽
|
||||
</h2>
|
||||
|
||||
<div id="found_charging_stations">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<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>.
|
||||
</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>
|
||||
<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>
|
||||
|
||||
</div>
|
||||
<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>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue