out color and radius depending on faster abilities

js/main.js

@@ -46,7 +46,6 @@ function buildOverpassApiUrl (map, overpassQuery) {
 	return resultUrl
 }
 
-
 const tags_to_display_in_popup = ['capacity', 'socket:type_2',
 	'socket:type2:output',
 	'charging_station:output',
@@ -54,10 +53,58 @@ const tags_to_display_in_popup = ['capacity', 'socket:type_2',
 	'socket:type2_combo',
 	'socket:chademo',
 	'operator', 'ref:EU:EVSE',
-'network',
+	'network',
 	'contact',
 	'phone']
 
+function supprimerMarqueurs (map) {
+	map.eachLayer((layer) => {
+		if (layer instanceof L.Marker) {
+			layer.remove()
+		}
+	})
+}
+
+const colors = [
+	'#fe8e5d',
+	'#fec35d',
+	'#b7a543',
+	'#7fb743',
+	'#0fae50',
+	'#08c1c7',
+	'#0081f0',
+]
+function getColor (feature) {
+	var outputPower = 0
+	if (feature.properties && feature.properties.tags) {
+		for (var tag in feature.properties.tags) {
+			let value = feature.properties.tags[tag]
+			if (value && tag.toLowerCase().indexOf('output')!==-1) {
+				console.log('tag contient output', tag, value)
+				value = ''+value
+				if(value.replace){
+					value = value.replace(' ')
+					value = value.replace('kW', '')
+				}
+				var power = parseInt(value)
+				if (power > outputPower) {
+					outputPower = power
+					console.log('power', power)
+				}
+			}
+		}
+	}
+	if(!outputPower){
+		console.log('pas de outputPower', outputPower)
+		return 'white'
+	}
+	feature.properties.tags.has_output_of_irve_specified = outputPower
+	var index = Math.min(Math.floor(outputPower / 10), colors.length - 1)
+	console.log('outputPower', outputPower)
+	console.log('colors[index]', colors[index])
+	return colors[index]
+}
+
 function displayPointsFromApi (points) {
 
 	var resultAsGeojson = osmtogeojson(points)
@@ -79,7 +126,7 @@ function displayPointsFromApi (points) {
 		},
 		onEachFeature: function (feature, layer) {
 			var popupContent = ''
-			console.log('feature.properties', feature.properties)
+			// 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
@@ -101,10 +148,10 @@ function displayPointsFromApi (points) {
 			let html = '<a class="edit-button" href="https://www.openstreetmap.org/edit?editor=id&node=' + feature.properties.id + '">' +
 				'✏️</a> <br/>' + popupContent
 
-			console.log('layer', layer)
+			// console.log('layer', layer)
 			var label = L.marker(layer._latlng, {
 				icon: L.divIcon({
-					iconUrl: '/img/beer.jpg' ,
+					iconUrl: '/img/beer.jpg',
 					//+ getIconFromTags(feature.properties.tags),
 					// className: 'label ' + makeCssClassFromTags(feature.properties.tags),
 
@@ -112,13 +159,19 @@ function displayPointsFromApi (points) {
 				}),
 			}).addTo(map)
 
+			let color = getColor(feature)
+			let radius = 20;
+			if(color=='#0081f0'){
+				radius = 200;
+			} else if(color=='#08c1c7'){
+				radius = 100;
+			}
 			let circle = L.circle(layer._latlng, {
-	color: '#c00',
+				color: color,
-	fillColor: '#f00',
+				fillColor: color,
-	fillOpacity: 0.5,
+				fillOpacity: 0.8,
-	radius: 10
+				radius: radius
-}).addTo(map)
+			}).addTo(map)
-
 
 			// var myIcon = L.icon({
 			// 	// iconUrl: 'https://cipherbliss.com/ou-manger/img/' + getIconFromTags(feature.properties.tags),
@@ -176,6 +229,7 @@ function getIconFromTags (tags) {
 }
 
 $('#query-button').click(function () {
+	supprimerMarqueurs(map)
 	loadOverpassQuery()
 })
 
@@ -194,11 +248,13 @@ function loadOverpassQuery () {
 
 			displayPointsFromApi(geoDataPointsFromApi)
 			$('#spinning_icon').fadeOut()
+			$('#message-loading').fadeOut()
 			isLoading = false
 		}) // end of the getting from overpass API
 	}
 }
 
 $('#spinning_icon').hide()
+$('#message-loading').hide()
 
 loadOverpassQuery()

styles/style.css

@@ -72,6 +72,9 @@ h2 {
 	display: inline;
 }
 
+.has_output_of_irve_specified{
+	box-shadow: 0 0 15rem darkred;
+}
 /*img.leaflet-marker-icon {*/
 /*	background: #fff;*/
 /*	-webkit-border-radius: 100%;*/
@@ -181,3 +184,7 @@ a {
 .bottom-content{
 	padding: 0 2rem 4rem;
 }
+
+#star{
+	left: 10rem;
+}