display max guessed output

index.html

@@ -29,7 +29,7 @@
                 <input
                         id='query-button'
                         type='button'
-                        value='🍽️ Chercher'>
+                        value='Chercher'>
             </div>
 
             <div class="research_display">
@@ -63,13 +63,13 @@
 <div class="bottom-content">
 
     <p>
-        Carte des IRVE de Rouen
+        Carte des IRVE
     </p>
     <div id="filter">
         filtres: <br>
-        prise: type 2, type CCS
+        prise: type 2, type CCS<br>
-        cable: attaché, à fournir
+        cable: attaché, à fournir<br>
-        puissance: min 50kW, 100kW, 300kW, 400kW
+        puissance: min 50kW, 100kW, 300kW, 400kW<br>
     </div>
     <h2 class="title">
         À propos de ce plan</h2>

js/main.js

@@ -1,9 +1,9 @@
 //import * as geoDataPointsFromApi from './data.json';
 
 const overrideQuery = true
-const initialZoom = 14
+const initialZoom = 12
 const osmMention = '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-let unknown_color = '#676767' // color for unknown power output of the station
+let unknown_color = '#c0b1b1' // color for unknown power output of the station
 
 // serveurs de tuiles: https://wiki.openstreetmap.org/wiki/Tile_servers
 // https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png
@@ -86,19 +86,38 @@ function supprimerMarqueurs (map) {
 }
 
 const colors = [
-	'#fe8e5d',
+	'#36423d',
-	'#fec35d',
+	'#4e8a8d',
-	'#b7a543',
+	'#2999b3',
-	'#7fb743',
+	'#1782dd',
-	'#0fae50',
+	'#2900ff',
-	'#08c1c7',
-	'#0081f0',
 ]
 
-function getColor (feature) {
+function guessOutputPowerFromFeature(feature){
-	var outputPower = 0
+	let outputPower = 0
 	if (feature.properties && feature.properties.tags) {
+		/**
+		 * fouiller dans les tags les valeurs explicites de puissance déclarée.
+		 * Deviner aussi les puissances non déclarées:
+		 *  - type 2 présent, max 43kW
+		 *  - type Chademo présent, max 63kW
+		 *  https://forum.openstreetmap.fr/t/bornes-de-recharges-et-puissance-chargeurs-quel-est-votre-avis/27828
+		 *
+		 */
+
+		let found_type_2 = false;
+		let found_type_chademo = false;
 		for (var tag in feature.properties.tags) {
+			if(tag.indexOf('type2') !== -1){
+				// console.log('tag type2', tag)
+				found_type_2=true;
+				power = 43
+			}
+			if(tag.indexOf('chademo') !== -1){
+				found_type_chademo=true;
+				console.log('tag chademo', tag)
+				power = 63
+			}
 			let value = feature.properties.tags[tag]
 			if (value && tag.toLowerCase().indexOf('output') !== -1) {
 				console.log('tag contient output', tag, value)
@@ -108,6 +127,13 @@ function getColor (feature) {
 					value = value.replace('kW', '')
 				}
 				var power = parseInt(value)
+				// deviner les types de prises présents
+
+				if(power)
+				{
+					console.log('power', power )
+					console.log('outputPower', outputPower)
+				}
 				if (power > outputPower) {
 					outputPower = power
 					console.log('power', power)
@@ -115,16 +141,22 @@ function getColor (feature) {
 			}
 		}
 	}
-	if (!outputPower) {
+		return outputPower
-		console.log('pas de outputPower', outputPower)
+}
 
-		return unknown_color
+function getColor (feature) {
-	}
+
+	let outputPower = guessOutputPowerFromFeature(feature)
 	feature.properties.tags.has_output_of_irve_specified = outputPower
+	if(outputPower){
+
 	var index = Math.min(Math.floor(outputPower / 10), colors.length - 1)
 	console.log('outputPower', outputPower)
-	console.log('colors[index]', colors[index])
+	// console.log('colors[index]', colors[index])
 	return colors[index]
+	}
+	// autrement, sans puissance max trouvée, on met la couleur des indéfinis
+	return unknown_color
 }
 
 function displayPointsFromApi (points) {
@@ -156,7 +188,10 @@ function displayPointsFromApi (points) {
 				if (tags_to_display_in_popup.indexOf(key)) {
 					let value = feature.properties.tags[key]
 					if (value) {
-						popupContent = popupContent + '<br/><strong class="popup-key">' + key + ' :</strong> ' + value + ''
+						if(value.indexOf('http') !== -1){
+							value = '<a href="'+value+'">'+value+'</a>'
+						}
+						popupContent = popupContent + '<br/><strong class="popup-key">' + key + ' :</strong><span class="popup-value">' + value + '</span>'
 					}
 				}
 			})
@@ -166,12 +201,20 @@ function displayPointsFromApi (points) {
 			let iconSiZePx = 20
 
 			let rest_name = ''
-
+			let outPowerGuessed = guessOutputPowerFromFeature(feature)
+			let color = getColor(feature)
+			let displayOutPowerGuessed = '? kW';
+			if(outPowerGuessed){
+				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=id&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 + '">' +
-				'✏️</a> <br/>' + popupContent
+				'✏️</a> <span class="color-indication" style="background-color: '+color+';">'+displayOutPowerGuessed+'</span> <br/>' + popupContent
 
 			// console.log('layer', layer)
-			var label = L.marker(layer._latlng, {
+			let marker = L.marker(layer._latlng, {
 				icon: L.divIcon({
 					iconUrl: '/img/beer.jpg',
 					//+ getIconFromTags(feature.properties.tags),
@@ -179,15 +222,40 @@ function displayPointsFromApi (points) {
 
 					iconSize: ['auto', 'auto'],
 				}),
-			}).addTo(map)
+			})
+			if(outPowerGuessed){
 
-			let color = getColor(feature)
+				marker.bindTooltip(outPowerGuessed + ' kW max',
-			let radius = 50
+					{
-			if (color == '#0081f0') {
+						permanent: false,
+						direction: 'right'
+					}
+				)
+
+			}
+				marker.addTo(map)
+
+
+			let radius = 10
+			if (outPowerGuessed > 300) {
 				radius = 200
-			} else if (color == '#08c1c7') {
+			}
+			else if (outPowerGuessed > 200) {
+				radius = 250
+			}
+			else if (outPowerGuessed > 100) {
+				radius = 150
+			}
+			else if (outPowerGuessed > 50) {
 				radius = 100
 			}
+			else if (outPowerGuessed > 20) {
+				radius = 50
+			}
+			else if (outPowerGuessed > 7) {
+				radius = 20
+			}
+
 			let circle = L.circle(layer._latlng, {
 				color: color,
 				fillColor: color,
@@ -195,19 +263,6 @@ function displayPointsFromApi (points) {
 				radius: radius
 			}).addTo(map)
 
-			// var myIcon = L.icon({
-			// 	// iconUrl: 'https://cipherbliss.com/ou-manger/img/' + getIconFromTags(feature.properties.tags),
-			// 	iconSize: [iconSiZePx, iconSiZePx],
-			// 	iconAnchor: [iconSiZePx / 2, iconSiZePx / 2],
-			// 	popupAnchor: [iconSiZePx / 2, iconSiZePx / 2],
-			// 	className: makeCssClassFromTags(feature.properties.tags),
-			//
-			// })
-
-			// let regular_marker = L.marker(layer._latlng, {
-			// title: rest_name,
-			// icon: myIcon
-			// }).addTo(map)
 
 			circle.bindPopup(html)
 			circle.on({

styles/style.css

@@ -61,10 +61,11 @@ h2 {
 
 #overpass-api-controls {
 	position: fixed;
-	top: 8em;
+	top: 0;
-	left: 4em;
+	right: 1em;
 	padding: 10px;
-	background-color: rgb(255, 255, 255);
+	background-color: transparent;
+	border: 0;
 	z-index: 10;
 }
 
@@ -72,9 +73,10 @@ h2 {
 	display: inline;
 }
 
-.has_output_of_irve_specified{
+.has_output_of_irve_specified {
 	box-shadow: 0 0 15rem darkred;
 }
+
 /*img.leaflet-marker-icon {*/
 /*	background: #fff;*/
 /*	-webkit-border-radius: 100%;*/
@@ -100,8 +102,8 @@ img.leaflet-marker-icon.tag-socket\:type2_yes {
 #query-button,
 .edit-button {
 	background: #497cd3;
-	padding: 0.5em;
+	padding: 0.5em 1em;
-	border-radius: 0.25em;
+	border-radius: 2em;
 	color: white;
 	border: solid 1px #497cd3ff;
 	float: right;
@@ -139,10 +141,12 @@ img.leaflet-marker-icon.tag-socket\:type2_yes {
 a {
 	color: #38f;
 }
-.leaflet-control-custom{
+
+.leaflet-control-custom {
 	padding: 1rem;
 	background: white;
 }
+
 #spinning_icon {
 	position: fixed;
 	top: 11rem;
@@ -172,19 +176,51 @@ a {
 }
 
 .leaflet-popup-content {
-	min-width: 15rem;
+	min-width: 10rem;
-	min-height: 10rem;
+	max-width: 20rem;
+	min-height: 5rem;
+	max-height: 10rem;
+	overflow: auto;
+	word-break: break-all;
+	word-wrap: break-word;
 }
 
 .popup-key {
 	min-width: 6rem;
-	display: inline-block
+	display: inline-block;
 }
-
+.popup-value{
-.bottom-content{
+	min-width: 10rem;
+	text-align: right;
+	display: inline-block;
+}
+.bottom-content {
 	padding: 0 2rem 4rem;
 }
 
-#star{
+#star {
 	left: 10rem;
 }
+
+.color-indication {
+	min-width: 1rem;
+	height: 1rem;
+	padding: 1rem;
+	border-radius: 2rem;
+	display: block;
+	float: right;
+	margin: 0.5rem;
+	color: white;
+	text-shadow: 0 0 0.5rem #222;
+}
+
+.no-data {
+	border-left: 3px solid dodgerblue;
+	padding: 1em 2rem;
+	min-height: 4rem;
+
+}
+
+.no-data a {
+	color: dodgerblue;
+}