add panoramax link, enable filter unknown, count displayed

index.html

@@ -61,6 +61,8 @@
             </svg>
         </div>
     </div>
+    <div id='count_features_fond'>
+    </div>
     <div id='map'>
 
         <div class='leaflet-control-container'>
@@ -105,10 +107,10 @@
             href="https://openstreetmap.org">OpenStreetMap</a></p>
 
     <form onclick="searchLocation()">
-        <fieldset>
+<!--        <fieldset>-->
             <input type="text" id="searchLocation" placeholder="Rechercher un lieu" class="search-input">
-            <button id="searchButton" class="rounded-button">🔍 Ville</button>
+            <button id="searchButton" class="rounded-button">➤ Ville</button>
-        </fieldset>
+<!--        </fieldset>-->
     </form>
     <button id="removeMarkers" class="rounded-button">
         🗑️ Effacer les marqueurs
@@ -135,12 +137,12 @@
 
     <div id="filters">
         <h2>
-            🔍 Filtres:
+            ⚙️ Filtres:
         </h2>
         <div class="filter-group">
             qualité
-            <button id="filterUnkown">kW max inconnu</button>
+            <button id="filterUnkown">❓ kW max inconnu</button>
-            <button id="filterChelou">les valeurs chelou</button>
+<!--            <button id="filterChelou">les valeurs chelou</button>-->
         </div>
         <!--        TODO add more filters-->
         <!--        <div class="filter-group">-->
@@ -169,7 +171,7 @@
     <div id="statsChargingStation">
 
         <h2 id="toggle-stats" style="cursor: pointer;">
-            Puissances des stations: 🔽
+            🚀 Puissances des stations: 🔽
         </h2>
 
         <div id="found_charging_stations">

js/lcm_config.js

@@ -6,15 +6,15 @@ const lcm_config = {
 	max_possible_station_output : 400,
 	tileServers:{
 		osm : 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-		cycle : 'https://{s}.tile.thunderforest.org/{z}/{x}/{y}.png',
+		cycle : 'https://{s}.tile.thunderforest.org/cycle/{z}/{x}/{y}.png',
 		cartodb : 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
 		stamen : 'https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',
 		transport : 'https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png'
 	},
 	tags_to_display_in_popup: [
+		'description',
 		'name',
 		'capacity',
-		'description',
 		'date_start',
 		'charging_station:output',
 		'socket:type_2',

js/lcm_main.js

@@ -109,7 +109,7 @@ var baseLayers = {
     'Transport': transport
 }
 let overlays = {
-    stations_bof: all_stations_markers
+    stations: all_stations_markers
 }
 
 const layerControl = L.control.layers(baseLayers, overlays, {collapsed: true}).addTo(map)
@@ -180,6 +180,8 @@ function displayStatsFromGeoJson(resultAsGeojson) {
     let count_found_type2combo = 0;
     let count_found_type2 = 0;
 
+    $('#count_features_fond').html('⚡'+count+' stations');
+
     resultAsGeojson.features.map(feature => {
         let found_type2_combo = false;
         let found_type2 = false;
@@ -205,9 +207,6 @@ function displayStatsFromGeoJson(resultAsGeojson) {
         // filtres
         // filtrer les valeurs inconnues
 
-        if(filters_features.display_unknown_max_power_station === 'hide'){
-            return;
-        }
         if (outputPower >= 200 && !found_type2_combo) {
             count_estimated_type2combo++;
         }
@@ -296,8 +295,8 @@ function bindEventsOnJosmRemote() {
 }
 
 
-function displayPointsFromApi(points) {
+function displayPointsFromApi(points, convert_to_osm_json) {
-    if (points) {
+    if (points && convert_to_osm_json) {
         geojsondata = osmtogeojson(points);
     }
 
@@ -375,14 +374,35 @@ function eachFeature(feature, layer) {
     let displayOutPowerGuessed = '? kW';
     if (outPowerGuessed) {
         displayOutPowerGuessed = outPowerGuessed + ' kW max';
+        if(display_unknown_max_power_station === 'show_only'){
+            return;
+        }
+    }
+    else{
+        // on cache cette station si on ne veut pas voir les stations à la puissance inconnue
+        if(display_unknown_max_power_station === 'hide'){
+            return;
+        }
     }
     if (!popupContent) {
         popupContent = `<span class="no-data"> Aucune information renseignée,
 <a class="edit-button" href="https://www.openstreetmap.org/edit?editor=remote&node=${feature.properties.id}">ajoutez la dans OpenStreetMap!</a></span>`;
     }
 
-    let html = ` <a href="https://www.openstreetmap.org/directions?from=&to=${feature.geometry.coordinates[1]},${feature.geometry.coordinates[0]}&engine=fossgis_osrm_car#map=14/${feature.geometry.coordinates[1]}/${feature.geometry.coordinates[0]}" class="navigation-link by-car" title="itinéraire en voiture vers cette station"> 🚗</a><a href="https://www.openstreetmap.org/directions?from=&to=${feature.geometry.coordinates[1]},${feature.geometry.coordinates[0]}&engine=fossgis_osrm_bike#map=14/${feature.geometry.coordinates[1]}/${feature.geometry.coordinates[0]}" class="navigation-link by-car" title="itinéraire en vélo vers cette station">🚴‍♀️</a><a href="https://www.openstreetmap.org/directions?from=&to=${feature.geometry.coordinates[1]},${feature.geometry.coordinates[0]}&engine=fossgis_osrm_foot#map=14/${feature.geometry.coordinates[1]}/${feature.geometry.coordinates[0]}" class="navigation-link by-car" title="itinéraire à pied vers cette station">👠</a>
+    // Ajout du lien vers Panoramax
-<a class="edit-button" href="https://www.openstreetmap.org/edit?editor=id&node=${feature.properties.id}">✏️</a><a class="edit-button josm" data-href="${link_josm}" href="#">JOSM</a> <span class="color-indication" style="background-color: ${color};">${displayOutPowerGuessed}</span><span class="popup-content">${popupContent}</span>`;
+    const panoramaxLink = `https://api.panoramax.xyz/#focus=map&map=16.7/${feature.geometry.coordinates[1]}/${feature.geometry.coordinates[0]}&speed=250`;
+
+
+
+    let html = ` <a href="https://www.openstreetmap.org/directions?from=&to=${feature.geometry.coordinates[1]},${feature.geometry.coordinates[0]}&engine=fossgis_osrm_car#map=14/${feature.geometry.coordinates[1]}/${feature.geometry.coordinates[0]}" class="navigation-link by-car" title="itinéraire en voiture vers cette station"> 🚗</a>
+<a href="https://www.openstreetmap.org/directions?from=&to=${feature.geometry.coordinates[1]},${feature.geometry.coordinates[0]}&engine=fossgis_osrm_bike#map=14/${feature.geometry.coordinates[1]}/${feature.geometry.coordinates[0]}" class="navigation-link by-car" title="itinéraire en vélo vers cette station">🚴‍♀️</a>
+<a href="https://www.openstreetmap.org/directions?from=&to=${feature.geometry.coordinates[1]},${feature.geometry.coordinates[0]}&engine=fossgis_osrm_foot#map=14/${feature.geometry.coordinates[1]}/${feature.geometry.coordinates[0]}" class="navigation-link by-car" title="itinéraire à pied vers cette station">👠</a>
+<a class="edit-button" href="https://www.openstreetmap.org/edit?editor=id&node=${feature.properties.id}">✏️</a>
+<a class="edit-button josm" data-href="${link_josm}" href="#">JOSM</a>
+<a href="${panoramaxLink}" target="_blank" class="panoramax-link" title="Voir sur Panoramax">
+<img src="styles/images/panoramax.ico" alt="icone"></a>
+<span class="color-indication" style="background-color: ${color};">${displayOutPowerGuessed}</span>
+<span class="popup-content">${popupContent}</span>`;
 
     let zoom = map.getZoom();
     let radius = 20;
@@ -508,7 +528,7 @@ function loadOverpassQuery() {
 
         $.get(overpassApiUrl, function (geoDataPointsFromApi) {
             geojsondata = geoDataPointsFromApi;
-            refreshDisplay();
+            refreshDisplay(true);
             $('#spinning_icon').fadeOut();
             $('#message-loading').fadeOut();
             isLoading = false;
@@ -516,9 +536,9 @@ function loadOverpassQuery() {
     }
 }
 
-function refreshDisplay() {
+function refreshDisplay(convert_points_to_osm=false) {
     supprimerMarqueurs();
-    displayPointsFromApi(geojsondata);
+    displayPointsFromApi(geojsondata,convert_points_to_osm);
 }
 
 
@@ -728,7 +748,10 @@ function copyCurrentUrl() {
     document.body.removeChild(dummy);
 }
 
-function searchLocation() {
+function searchLocation(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    
     const location = document.getElementById('searchLocation').value;
     if (!location) {
         alert('Veuillez entrer un lieu à rechercher.');

styles/style.css

@@ -547,4 +547,13 @@ header img{
     margin-bottom: 10px;
     border: 1px solid var(--button-border);
     border-radius: 5px;
+}
+#count_features_fond{
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+    z-index: 10;
+    background: white;
+    padding: 1rem;
+    border-radius: 8px;
 }