mirror of
https://forge.chapril.org/tykayn/libre-charge-map
synced 2025-06-20 01:34:43 +02:00
filter min power slider, display count of hidden stations
This commit is contained in:
Tykayn
tykayn
parent
33c4bd0668
commit
a114635fce
10 changed files with 177 additions and 51 deletions
81
index.html
81
index.html
|
|
@ -139,53 +139,56 @@
|
|||
<br>
|
||||
<!-- TODO filtrer les bornes selon la puissance -->
|
||||
|
||||
<div id="statsChargingStation">
|
||||
|
||||
</div>
|
||||
<div id="statsChargingStation">
|
||||
<h2 id="toggle-stats" style="cursor: pointer;">
|
||||
🚀 Puissances des stations: 🔽
|
||||
</h2>
|
||||
|
||||
<h2 id="toggle-stats" style="cursor: pointer;">
|
||||
🚀 Puissances des stations: 🔽
|
||||
</h2>
|
||||
|
||||
<div id="found_charging_stations">
|
||||
<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>.
|
||||
<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>
|
||||
<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>
|
||||
</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>.
|
||||
<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>
|
||||
<span class="small">
|
||||
|
||||
<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">
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -7,12 +7,12 @@ const lcm_config = {
|
|||
hide_osmose_markers_if_close_to_existing_charging_stations_distance: 10, // meters
|
||||
|
||||
filter_max_output: true,
|
||||
filter_max_output_min: 1,
|
||||
filter_max_output_max: 401,
|
||||
filter_max_output_min: 0,
|
||||
filter_max_output_max: 499,
|
||||
filter_max_output_default_value: 1,
|
||||
filter_unknown_output: true,
|
||||
|
||||
max_possible_station_output: 400,
|
||||
max_possible_station_output: 499,
|
||||
tileServers: {
|
||||
osm: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
cycle: 'https://{s}.tile.thunderforest.org/cycle/{z}/{x}/{y}.png',
|
||||
|
|
|
|||
|
|
@ -344,6 +344,9 @@ function calculerPourcentage(partie, total, reduc) {
|
|||
// Ajouter une variable globale pour stocker le nombre d'issues Osmose
|
||||
let osmoseIssuesCount = 0;
|
||||
|
||||
// Ajouter une variable globale pour stocker le nombre de stations affichées
|
||||
let displayedStationsCount = 0;
|
||||
|
||||
function displayStatsFromGeoJson(resultAsGeojson) {
|
||||
let count = resultAsGeojson.features.length;
|
||||
let count_station_output = 0;
|
||||
|
|
@ -463,6 +466,7 @@ function displayStatsFromGeoJson(resultAsGeojson) {
|
|||
|
||||
// Remplacer la ligne existante par un appel à updateCounters
|
||||
updateCounters();
|
||||
|
||||
}
|
||||
|
||||
// Ajouter une fonction pour mettre à jour les compteurs
|
||||
|
|
@ -506,6 +510,9 @@ function displayPointsFromApi(points, convert_to_osm_json) {
|
|||
geojsondata = osmtogeojson(points);
|
||||
}
|
||||
|
||||
// Réinitialiser le compteur avant d'afficher les points
|
||||
displayedStationsCount = 0;
|
||||
|
||||
displayStatsFromGeoJson(geojsondata);
|
||||
|
||||
let resultLayer = L.geoJson(geojsondata, {
|
||||
|
|
@ -530,6 +537,9 @@ function displayPointsFromApi(points, convert_to_osm_json) {
|
|||
},
|
||||
onEachFeature: eachFeature,
|
||||
});
|
||||
|
||||
// Mettre à jour le compteur de stations filtrées
|
||||
updateFilteredStationsCount();
|
||||
}
|
||||
|
||||
function makePopupOfFeature(feature) {
|
||||
|
|
@ -580,7 +590,6 @@ function eachFeature(feature, layer) {
|
|||
|
||||
// Filtrage par puissance
|
||||
if (outPowerGuessed === 0 || outPowerGuessed === null) {
|
||||
// Gestion des stations à puissance inconnue
|
||||
if (display_unknown_max_power_station === 'hide') {
|
||||
return;
|
||||
}
|
||||
|
|
@ -591,6 +600,9 @@ function eachFeature(feature, layer) {
|
|||
}
|
||||
}
|
||||
|
||||
// Incrémenter le compteur de stations affichées
|
||||
displayedStationsCount++;
|
||||
|
||||
let link_josm = createJOSMEditLink(feature);
|
||||
|
||||
let popupContent = makePopupOfFeature(feature);
|
||||
|
|
@ -840,7 +852,8 @@ function refreshDisplay(convert_points_to_osm = false) {
|
|||
supprimerMarqueurs();
|
||||
if (geojsondata) {
|
||||
displayPointsFromApi(geojsondata, convert_points_to_osm);
|
||||
updateCounters(); // Mettre à jour les compteurs après le filtrage
|
||||
updateCounters();
|
||||
updateFilteredStationsCount();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1260,6 +1273,12 @@ function init() {
|
|||
"Bornes potentielles (Osmose)": osmose_markers
|
||||
};
|
||||
|
||||
// const baseLayersControl = L.control.layers(baseLayers, null, {
|
||||
// collapsed: true,
|
||||
// className: 'leaflet-control-layers base-layers',
|
||||
// id: 'base-layers-control'
|
||||
// }).addTo(map);
|
||||
|
||||
const overlayControl = L.control.layers(null, overlayMaps, {
|
||||
collapsed: true,
|
||||
className: 'leaflet-control-layers overlay-layers',
|
||||
|
|
@ -1333,4 +1352,18 @@ init()
|
|||
|
||||
// Créer un nouveau pane pour les marqueurs Osmose avec un zIndex plus élevé
|
||||
map.createPane('osmosePane');
|
||||
map.getPane('osmosePane').style.zIndex = 1000;
|
||||
map.getPane('osmosePane').style.zIndex = 1000;
|
||||
|
||||
// Ajouter une nouvelle fonction pour mettre à jour le compteur de stations filtrées
|
||||
function updateFilteredStationsCount() {
|
||||
const totalStations = geojsondata ? geojsondata.features.length : 0;
|
||||
const filterStats = `<div class="filter-stats">${displayedStationsCount} stations sur ${totalStations} trouvées</div>`;
|
||||
|
||||
// Mettre à jour ou créer l'élément après le slider
|
||||
let existingStats = $('.filter-stats');
|
||||
if (existingStats.length) {
|
||||
existingStats.replaceWith(filterStats);
|
||||
} else {
|
||||
$('#filter_max_output_display').after(filterStats);
|
||||
}
|
||||
}
|
||||
|
|
@ -3,4 +3,9 @@
|
|||
height: 10px;
|
||||
background: #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.filter-stats {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
}
|
||||
|
|
@ -1,10 +1,14 @@
|
|||
/* Style pour mobile ---------------------------------- */
|
||||
@media (max-width: 1200px) {
|
||||
@media (max-width: 700px) {
|
||||
header h1 {
|
||||
width: 100vw;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
#searchButton {
|
||||
margin-top: 0rem;
|
||||
}
|
||||
|
||||
#bars_power {
|
||||
position: absolute;
|
||||
top: 59.1vh;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,12 @@ overrides leaflet
|
|||
border: solid 3px white;
|
||||
}
|
||||
|
||||
.leaflet-control-layers {
|
||||
&.leaflet-control-layers-toggle {
|
||||
background: url('img/burger.png');
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles pour les contrôles de couches */
|
||||
.leaflet-control-layers {
|
||||
&.base-layers {
|
||||
|
|
@ -51,4 +57,36 @@ overrides leaflet
|
|||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Styles pour les contrôles de calques
|
||||
.leaflet-control-layers {
|
||||
&.base-layers {
|
||||
.leaflet-control-layers-toggle {
|
||||
background-image: url('../img/burger.png') !important;
|
||||
background-size: 20px 20px !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.overlay-layers {
|
||||
.leaflet-control-layers-toggle {
|
||||
background-image: url('../img/pizza.png') !important;
|
||||
background-size: 20px 20px !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-color: #3f74aa !important;
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Style commun pour le conteneur
|
||||
background: white;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
|
@ -19,7 +19,10 @@
|
|||
|
||||
#searchButton {
|
||||
margin-right: 0rem;
|
||||
margin-top: -4.8rem;
|
||||
margin-top: -3.2rem;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
background: var(--link-color);
|
||||
}
|
||||
|
||||
#count_features_fond {
|
||||
|
|
|
|||
|
|
@ -650,6 +650,9 @@ header {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@import '_osmose.scss';
|
||||
@import '_recherche.scss';
|
||||
|
|
@ -657,4 +660,4 @@ header {
|
|||
@import '_mobile.scss';
|
||||
@import '_overrides.scss';
|
||||
@import '_responsive.scss';
|
||||
@import '_animations.scss';
|
||||
@import '_animations.scss';
|
||||
|
|
|
|||
|
|
@ -508,6 +508,9 @@ header {
|
|||
height: 0.4rem;
|
||||
overflow: hidden; }
|
||||
|
||||
.small {
|
||||
font-size: 0.8rem; }
|
||||
|
||||
.osmose-marker-drop:hover .osmose-marker-inner {
|
||||
animation: bounce 0.5s ease infinite;
|
||||
background-color: #9F2BFF; }
|
||||
|
|
@ -569,7 +572,10 @@ header {
|
|||
|
||||
#searchButton {
|
||||
margin-right: 0rem;
|
||||
margin-top: -4.8rem; }
|
||||
margin-top: -3.2rem;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
background: var(--link-color); }
|
||||
|
||||
#count_features_fond {
|
||||
position: fixed;
|
||||
|
|
@ -600,12 +606,19 @@ header {
|
|||
background: #ccc;
|
||||
border-radius: 5px; }
|
||||
|
||||
.filter-stats {
|
||||
font-size: 0.8rem;
|
||||
color: #666; }
|
||||
|
||||
/* Style pour mobile ---------------------------------- */
|
||||
@media (max-width: 1200px) {
|
||||
@media (max-width: 700px) {
|
||||
header h1 {
|
||||
width: 100vw;
|
||||
font-size: 1.5rem; }
|
||||
|
||||
#searchButton {
|
||||
margin-top: 0rem; }
|
||||
|
||||
#bars_power {
|
||||
position: absolute;
|
||||
top: 59.1vh;
|
||||
|
|
@ -672,6 +685,9 @@ overrides leaflet
|
|||
.leaflet-interactive {
|
||||
border: solid 3px white; }
|
||||
|
||||
.leaflet-control-layers.leaflet-control-layers-toggle {
|
||||
background: url("img/burger.png"); }
|
||||
|
||||
/* Styles pour les contrôles de couches */
|
||||
.leaflet-control-layers.base-layers {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 9l10-5 10 5-10 5-10-5zm0 6l10 5 10-5M2 12l10 5 10-5"/></svg>');
|
||||
|
|
@ -702,6 +718,27 @@ overrides leaflet
|
|||
margin-left: 5px;
|
||||
font-size: 12px; }
|
||||
|
||||
.leaflet-control-layers {
|
||||
background: white;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); }
|
||||
.leaflet-control-layers.base-layers .leaflet-control-layers-toggle {
|
||||
background-image: url("../img/burger.png") !important;
|
||||
background-size: 20px 20px !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
width: 30px !important;
|
||||
height: 30px !important; }
|
||||
.leaflet-control-layers.overlay-layers .leaflet-control-layers-toggle {
|
||||
background-image: url("../img/pizza.png") !important;
|
||||
background-size: 20px 20px !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-color: #3f74aa !important;
|
||||
width: 30px !important;
|
||||
height: 30px !important; }
|
||||
|
||||
@keyframes rainbow-border {
|
||||
0% {
|
||||
border-left-color: #ff0000; }
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue