dd stat bar power out

index.html

@@ -71,16 +71,16 @@
         cable: attaché, à fournir<br>
         puissance:
         min
-        <button class="button" id="toggleMinPower_50">
+<!--        <button class="button" id="toggleMinPower_50">-->
-            50kW
+<!--            keep cool, montre les stations entre 3 et 50kW max-->
-        </button>
+<!--        </button>-->
-        ,
+<!--        ,-->
-        <button class="button" id="toggleMinPower_100">
+<!--        <button class="button" id="toggleMinPower_100">-->
-            100kW
+<!--            100kW-->
-        </button>
+<!--        </button>-->
-        ,
+<!--        ,-->
-        <button class="button" id="toggleMinPower_100">
+        <button class="button" id="toggleMinPower_300">
-            300kW
+            fais voir les plus de 300kW, j'ai pas le time!
         </button>
         <br>
         <span class="marker-demo">
@@ -106,8 +106,18 @@
         </span>
     </div>
     <h2>
-        Bornes trouvées dans les recherches:
+        Puissances des stations:
     </h2>
+    <div id="bars_power">
+<!--        <div class="bars-proportion">-->
+<!--            <div class="bar color-unknown" style="width: 50%">10</div>-->
+<!--            <div class="bar color-power-lesser-than-50" style="width: 10%">3</div>-->
+<!--            <div class="bar color-power-lesser-than-100" style="width: 30%"></div>-->
+<!--            <div class="bar color-power-lesser-than-200" style="width: 40%"></div>-->
+<!--            <div class="bar color-power-lesser-than-300" style="width: 20%"></div>-->
+<!--            <div class="bar color-power-lesser-than-max" style="width: 10%"></div>-->
+<!--        </div>-->
+    </div>
     <div id="found_charging_stations">
 
     </div>

js/main.js

@@ -4,6 +4,8 @@
  * lister les bornes trouvées dans la page
  * @type {boolean}
  */
+
+let showHighPower = true
 const overrideQuery = true
 const initialZoom = 12
 const osmMention = '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
@@ -28,6 +30,8 @@ L.tileLayer(tileServer, {
 	attribution: osmMention,
 }).addTo(map)
 
+let filteredMarkers = L.layerGroup().addTo(map)
+
 function buildOverpassApiUrl (map, overpassQuery) {
 
 	var baseUrl = 'https://overpass-api.de/api/interpreter'
@@ -141,6 +145,7 @@ function guessOutputPowerFromFeature (feature) {
 			}
 		}
 	}
+	feature.properties.outputPower = outputPower
 	return outputPower
 }
 
@@ -159,100 +164,131 @@ function getColor (feature) {
 	return unknown_color
 }
 
-function displayPointsFromApi (points) {
+let coef_reduction_bars = 0.8
 
-	var resultAsGeojson = osmtogeojson(points)
+function calculerPourcentage (partie, total, reduc) {
-	console.log('resultAsGeojson', resultAsGeojson)
+	if (total === 0) {
+		return 'Division par zéro impossible'
+	}
+	let coef_reduction = 1
+	if (reduc) {
+		coef_reduction = coef_reduction_bars
+	}
+	return ((partie / total) * 100 * coef_reduction).toFixed(1)
+}
 
-	function displayStatsFromGeoJson (resultAsGeojson) {
+function displayStatsFromGeoJson (resultAsGeojson) {
 
-		let count = resultAsGeojson.features.length
+	let count = resultAsGeojson.features.length
-		let count_station_output = 0
+	let count_station_output = 0
-		let count_ref_eu = 0
+	let count_ref_eu = 0
-		let output_more_than_300 = 0
+	let output_more_than_300 = 0
-		let output_more_than_100 = 0
+	let output_more_than_200 = 0
-		let output_more_than_50 = 0
+	let output_more_than_100 = 0
-		let count_output_unknown = 0
+	let output_more_than_50 = 0
-		let count_estimated_type2combo = 0
+	let count_station_outputoutput_between_1_and_50 = 0
-		let count_found_type2combo = 0
+	let count_output_unknown = 0
-		let count_found_type2 = 0
+	let count_estimated_type2combo = 0
+	let count_found_type2combo = 0
+	let count_found_type2 = 0
 
-		resultAsGeojson.features.map(feature => {
+	resultAsGeojson.features.map(feature => {
-			let found_type2_combo = false;
+		let found_type2_combo = false
-			// trouver si les tags présentent un type combo
+		// trouver si les tags présentent un type combo
-			let found_type2 = false;
+		let found_type2 = false
-			// trouver si les tags présentent un type 2
+		// trouver si les tags présentent un type 2
-			let keys_of_object = Object.keys(feature.properties.tags)
+		let keys_of_object = Object.keys(feature.properties.tags)
-			keys_of_object.map(tagKey=>{
+		keys_of_object.map(tagKey => {
-				// console.log('tagKey', tagKey)
+			// console.log('tagKey', tagKey)
-				if(tagKey.indexOf('type2_combo')!==-1){
+			if (tagKey.indexOf('type2_combo') !== -1) {
-					found_type2_combo = true
+				found_type2_combo = true
-					console.log('tagkey trouvé combo',tagKey				)
+				console.log('tagkey trouvé combo', tagKey)
-				}
-				if(tagKey.indexOf('type2')!==-1){
-					found_type2 = true
-				}
-			})
-			let outputPower = guessOutputPowerFromFeature(feature)
-			if(found_type2_combo){
-				count_found_type2combo++
 			}
-			if(found_type2){
+			if (tagKey.indexOf('type2') !== -1) {
-				count_found_type2++
+				found_type2 = true
-			}
-			if(outputPower == 0){
-				count_output_unknown++
-			}
-			if(outputPower>200 && ! found_type2_combo){
-				/**
-				 * si on trouve une puissance supérieure à 200kW on peut partir du principe que la station dispose d'une prise type_2_combo à minima
-				 */
-				count_estimated_type2combo++
-			}
-			if(outputPower>50){
-				output_more_than_50++
-			}
-			else if(outputPower>100){
-				output_more_than_100++
-			}
-			else if(outputPower>300){
-				output_more_than_300++
-			}
-			if (feature.properties.tags['charging_station:output']) {
-				count_station_output++
-			}
-			if (feature.properties.tags['ref:EU:EVSE']) {
-				count_ref_eu++
 			}
 		})
-
+		let outputPower = guessOutputPowerFromFeature(feature)
-		let stats_content = 'Statistiques des <strong>' + count + '</strong> stations trouvées: <br/>' +
+		if (found_type2_combo) {
-			count_station_output + ' (' + calculerPourcentage(count_station_output, count) + '%)' + ' ont une info de puissance max délivrée <i>charging_station:output</i>. <br/>' +
+			count_found_type2combo++
-			count_ref_eu + ' (' + calculerPourcentage(count_ref_eu, count) + '%)' + ' ont une référence européenne <i>ref:EU:EVSE</i>. <br/>' +
-			count_output_unknown + ' (' + calculerPourcentage(count_output_unknown, count) + '%)' + ' ont une puissance max inconnue <i>*output*</i>. <br/>' +
-			output_more_than_300 + ' (' + calculerPourcentage(output_more_than_300, count) + '%)' + ' ont une puissance max supérieure à 300 kW <i>*output*</i>. <br/>' +
-			output_more_than_100 + ' (' + calculerPourcentage(output_more_than_100, count) + '%)' + ' ont une puissance max supérieure à 100 kW <i>*output*</i>. <br/>' +
-			output_more_than_50 + ' (' + calculerPourcentage(output_more_than_50, count) + '%)' + ' ont une puissance max supérieure à 50 kW <i>*output*</i>. <br/>' +
-			count_found_type2combo + ' (' + calculerPourcentage(count_found_type2combo, count) + '%)' + ' ont un prise combo définie <i>*type2_combo*</i>. <br/>' +
-			count_estimated_type2combo + ' (' + calculerPourcentage(count_estimated_type2combo, count) + '%)' + ' ont une prise combo présumée à partir de la puissance max trouvée mais non spécifiée <i>*type2_combo*</i>. <br/>' +
-			count_found_type2 + ' (' + calculerPourcentage(count_found_type2, count) + '%)' + ' ont un prise type2 définie <i>*type2*</i>. <br/>' +
-			''
-
-		$('#found_charging_stations').html(stats_content)
-	}
-
-	function calculerPourcentage (partie, total) {
-		if (total === 0) {
-			return 'Division par zéro impossible'
 		}
-		return ((partie / total) * 100).toFixed(1)
+		if (found_type2) {
-	}
+			count_found_type2++
+		}
+		if (outputPower == 0) {
+			count_output_unknown++
+		}
+		if (outputPower >= 200 && !found_type2_combo) {
+			/**
+			 * si on trouve une puissance supérieure à 200kW on peut partir du principe que la station dispose d'une prise type_2_combo à minima
+			 */
+			count_estimated_type2combo++
+		}
+		if (outputPower > 0 && outputPower < 50) {
+			count_station_outputoutput_between_1_and_50++
+		}
+		if (outputPower >= 50 && outputPower < 100) {
+			output_more_than_50++
+		} else if (outputPower >= 100 && outputPower < 200) {
+			output_more_than_100++
+		} else if (outputPower >= 200 && outputPower < 300) {
+			output_more_than_200++
+		} else if (outputPower >= 300) {
+			feature.properties.puissance_haute = true
+			output_more_than_300++
+		}
+		if (feature.properties.tags['charging_station:output']) {
+			count_station_output++
+		}
+		if (feature.properties.tags['ref:EU:EVSE']) {
+			count_ref_eu++
+		}
+	})
+	let bar_powers = `<div class="bars-container">
+<div class="bar color-unknown" style="width: ${calculerPourcentage(count_output_unknown, count, true)}%">${count_output_unknown}</div>
+<div class="bar color-power-lesser-than-50" style="width: ${calculerPourcentage(count_station_outputoutput_between_1_and_50, count, true)}%">${count_station_outputoutput_between_1_and_50}</div>
+<div class="bar color-power-lesser-than-100" style="width: ${calculerPourcentage(output_more_than_50, count, true)}%">${output_more_than_50}</div>
+<div class="bar color-power-lesser-than-200" style="width: ${calculerPourcentage(output_more_than_100, count, true)}%">${output_more_than_100}</div>
+<div class="bar color-power-lesser-than-300" style="width: ${calculerPourcentage(output_more_than_200, count, true)}%">${output_more_than_200}</div>
+<div class="bar color-power-lesser-than-max" style="width: ${calculerPourcentage(output_more_than_300, count, true)}%">${output_more_than_300}</div>
+</div>
+`
 
-	displayStatsFromGeoJson(resultAsGeojson)
+	let stats_content = `<div class="stats">
-	var resultLayer = L.geoJson(resultAsGeojson, {
+Statistiques des <strong>${count}</strong> stations trouvées: <br/>
+${count_station_output} (${calculerPourcentage(count_station_output, count)}%) ont une info de puissance max délivrée <i>charging_station:output</i>. <br/>
+${count_ref_eu} (${calculerPourcentage(count_ref_eu, count)}%) ont une référence européenne <i>ref:EU:EVSE</i>. <br/>
+${count_output_unknown} (${calculerPourcentage(count_output_unknown, count)}%) ont une puissance max inconnue <i>*output*</i>. <br/>
+${output_more_than_300} (${calculerPourcentage(output_more_than_300, count)}%) ont une puissance max supérieure à 300 kW <i>*output*</i>. <br/>
+${output_more_than_200} (${calculerPourcentage(output_more_than_200, count)}%) ont une puissance max supérieure à 200 kW <i>*output*</i>. <br/>
+${output_more_than_100} (${calculerPourcentage(output_more_than_100, count)}%) ont une puissance max supérieure à 100 kW <i>*output*</i>. <br/>
+${output_more_than_50} (${calculerPourcentage(output_more_than_50, count)}%) ont une puissance max supérieure à 50 kW <i>*output*</i>. <br/>
+${count_found_type2combo} (${calculerPourcentage(count_found_type2combo, count)}%) ont un prise combo définie <i>*type2_combo*</i>. <br/>
+${count_estimated_type2combo} (${calculerPourcentage(count_estimated_type2combo, count)}%) ont une prise combo présumée à partir de la puissance max trouvée mais non spécifiée <i>*type2_combo*</i>. <br/>${count_found_type2} (${calculerPourcentage(count_found_type2, count)}%) ont un prise type2 définie <i>*type2*</i>. <br/>
+</div>`
+
+	$('#found_charging_stations').html(stats_content)
+	$('#bars_power').html(bar_powers)
+}
+
+let geojsondata;
+
+function displayPointsFromApi (points) {
+
+	geojsondata = osmtogeojson(points)
+	console.log('resultAsGeojson', geojsondata)
+
+	displayStatsFromGeoJson(geojsondata)
+	var resultLayer = L.geoJson(geojsondata, {
 		style: function (feature) {
 			return { color: '#f00' }
 		},
+		/**
+		 * enlever les polygones, ne garder que les points
+		 * @param feature
+		 * @param layer
+		 * @returns {boolean}
+		 */
 		filter: function (feature, layer) {
 			var isPolygon = (feature.geometry) && (feature.geometry.type !== undefined) && (feature.geometry.type === 'Polygon')
 			if (isPolygon) {
@@ -266,10 +302,7 @@ function displayPointsFromApi (points) {
 			console.log('event', event)
 		},
 		onEachFeature: function (feature, layer) {
-			var popupContent = ''
+			let popupContent = ''
-			// console.log('feature.properties', feature.properties)
-			// popupContent = popupContent + '<dt>@id</dt><dd> capacité: ' + feature.properties.tags['capacity'] + '</dd>'
-			var keys = Object.keys(feature.properties.tags)
 			// ne montrer que certains champs dans la popup
 			tags_to_display_in_popup.forEach(function (key) {
 				if (tags_to_display_in_popup.indexOf(key)) {
@@ -292,33 +325,9 @@ function displayPointsFromApi (points) {
 				displayOutPowerGuessed = outPowerGuessed + ' kW max'
 			}
 			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>'
+				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 class="edit-button" href="https://www.openstreetmap.org/edit?editor=id&node=' + feature.properties.id + '">' +
+			let html = `<a class="edit-button" href="https://www.openstreetmap.org/edit?editor=id&node=${feature.properties.id}">✏️</a><a class="edit-button" href="https://www.openstreetmap.org/edit?editor=remote&node=${feature.properties.id}">JOSM</a> <span class="color-indication" style="background-color: ${color};">${displayOutPowerGuessed}</span><span class="popup-content">${popupContent}</span>`
-				'✏️</a> <span class="color-indication" style="background-color: ' + color + ';">' + displayOutPowerGuessed + '</span><span class="popup-content">' + popupContent + '</span>'
-
-			// console.log('layer', layer)
-			let marker = L.marker(layer._latlng, {
-				icon: L.divIcon({
-					iconUrl: '/img/beer.jpg',
-					//+ getIconFromTags(feature.properties.tags),
-					// className: 'label ' + makeCssClassFromTags(feature.properties.tags),
-
-					iconSize: ['auto', 'auto'],
-				}),
-			})
-
-			if (outPowerGuessed) {
-
-				marker.bindTooltip(outPowerGuessed + ' kW max',
-					{
-						permanent: false,
-						direction: 'right'
-					}
-				)
-
-			}
-			marker.addTo(map)
 
 			let radius = 20
 			if (outPowerGuessed > 300) {
@@ -383,16 +392,34 @@ function getIconFromTags (tags) {
 	return iconFileName
 }
 
-$('#toggleMinPower_50').click(toggleMinPower(50))
+// $('#toggleMinPower_50').on('click', toggleMinPower(50))
-$('#toggleMinPower_100').click(toggleMinPower(100))
+// $('#toggleMinPower_100').on('click', toggleMinPower(100))
-$('#toggleMinPower_300').click(toggleMinPower(300))
+// document.getElementById('toggleMinPower_300').addEventListener('click', toggleMinPower(showHighPower))
-$('#query-button').click(function () {
+$('#query-button').on('click', function () {
 	supprimerMarqueurs(map)
 	loadOverpassQuery()
 })
 
-function toggleMinPower (minPower) {
+function toggleMinPower (showHighPower) {
-	console.log('toggle', minPower)
+	console.log('toggle', showHighPower)
+	showHighPower = !showHighPower;
+	addFilteredMarkers(showHighPower);
+	this.textContent = showHighPower ? "Montrer puissance haute" : "Montrer puissance normale";
+}
+
+function addFilteredMarkers (showHighPower) {
+	filteredMarkers.clearLayers() // Supprimer les marqueurs existants
+
+	console.log('addFilteredMarkers: clear des marqueurs fait')
+	let counter = 0
+	geojsondata.features.forEach(function (feature) {
+		if (feature.properties.puissance_haute === showHighPower) {
+			counter++
+			var marker = L.marker(feature.geometry.coordinates).bindPopup(feature.properties.puissance_haute ? 'Puissance haute' : 'Puissance normale')
+			filteredMarkers.addLayer(marker)
+		}
+	})
+	console.log('addFilteredMarkers: ', counter)
 }
 
 let isLoading = false
@@ -407,7 +434,6 @@ function loadOverpassQuery () {
 		var overpassApiUrl = buildOverpassApiUrl(map, queryTextfieldValue)
 
 		$.get(overpassApiUrl, function (geoDataPointsFromApi) {
-
 			displayPointsFromApi(geoDataPointsFromApi)
 			$('#spinning_icon').fadeOut()
 			$('#message-loading').fadeOut()

styles/style.css

@@ -88,7 +88,7 @@ img.leaflet-marker-icon.tag-socket\:type2_yes {
 	background: #497cd3;
 	padding: 0.5em 1em;
 	border-radius: 2em;
-	color: white;
+	color: white !important;
 	border: solid 1px #497cd3ff;
 	float: right;
 }
@@ -235,27 +235,51 @@ marqueurs
 	background: #c0b1b1;
 }
 
+
 .map-marker-circle-demo.color-1 {
 	background: #36423d;
 }
+.color-power-lesser-than-50,
 .map-marker-circle-demo.color-2 {
 	background: #4e8a8d;
 }
+.color-power-lesser-than-100,
 .map-marker-circle-demo.color-3 {
 	background: #2999b3;
 }
+.color-power-lesser-than-200,
 .map-marker-circle-demo.color-4 {
 	background: #1782dd;
 }
+.color-power-lesser-than-300,
 .map-marker-circle-demo.color-5 {
 	background: #2900ff;
 }
+.color-power-lesser-than-max,
 .map-marker-circle-demo.color-6 {
 	background: #8000ff;
 }
 
+#found_charging_stations{
+	margin-top: 2rem;
+}
 
 button{
 	cursor: pointer;
 	padding: 0.5rem;
 }
+
+#bars_power{
+	margin: 1rem 0;
+	height: 3rem;
+}
+.bar{
+	display: inline-block;
+	height: 1em;
+	text-align:right;
+	padding:0.55rem;
+	padding-right:0.25rem;
+	float:left;
+	/*background: grey;*/
+	/*border-right: 1px solid white;*/
+}