diff --git a/index.html b/index.html index f4f7b02..57d8f72 100644 --- a/index.html +++ b/index.html @@ -71,16 +71,16 @@ cable: attaché, à fournir
puissance: min - - , - - , -
@@ -106,8 +106,18 @@

- Bornes trouvées dans les recherches: + Puissances des stations:

+
+ + + + + + + + +
diff --git a/js/main.js b/js/main.js index 4187178..e6e47ae 100644 --- a/js/main.js +++ b/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 = '© OpenStreetMap 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) - console.log('resultAsGeojson', resultAsGeojson) +function calculerPourcentage (partie, total, reduc) { + 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_station_output = 0 - let count_ref_eu = 0 - let output_more_than_300 = 0 - let output_more_than_100 = 0 - let output_more_than_50 = 0 - let count_output_unknown = 0 - let count_estimated_type2combo = 0 - let count_found_type2combo = 0 - let count_found_type2 = 0 + let count = resultAsGeojson.features.length + let count_station_output = 0 + let count_ref_eu = 0 + let output_more_than_300 = 0 + let output_more_than_200 = 0 + let output_more_than_100 = 0 + let output_more_than_50 = 0 + let count_station_outputoutput_between_1_and_50 = 0 + let count_output_unknown = 0 + let count_estimated_type2combo = 0 + let count_found_type2combo = 0 + let count_found_type2 = 0 - resultAsGeojson.features.map(feature => { - let found_type2_combo = false; - // trouver si les tags présentent un type combo - let found_type2 = false; - // trouver si les tags présentent un type 2 - let keys_of_object = Object.keys(feature.properties.tags) - keys_of_object.map(tagKey=>{ - // console.log('tagKey', tagKey) - if(tagKey.indexOf('type2_combo')!==-1){ - found_type2_combo = true - 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++ + resultAsGeojson.features.map(feature => { + let found_type2_combo = false + // trouver si les tags présentent un type combo + let found_type2 = false + // trouver si les tags présentent un type 2 + let keys_of_object = Object.keys(feature.properties.tags) + keys_of_object.map(tagKey => { + // console.log('tagKey', tagKey) + if (tagKey.indexOf('type2_combo') !== -1) { + found_type2_combo = true + console.log('tagkey trouvé combo', tagKey) } - 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>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++ + if (tagKey.indexOf('type2') !== -1) { + found_type2 = true } }) - - let stats_content = 'Statistiques des ' + count + ' stations trouvées:
' + - count_station_output + ' (' + calculerPourcentage(count_station_output, count) + '%)' + ' ont une info de puissance max délivrée charging_station:output.
' + - count_ref_eu + ' (' + calculerPourcentage(count_ref_eu, count) + '%)' + ' ont une référence européenne ref:EU:EVSE.
' + - count_output_unknown + ' (' + calculerPourcentage(count_output_unknown, count) + '%)' + ' ont une puissance max inconnue *output*.
' + - output_more_than_300 + ' (' + calculerPourcentage(output_more_than_300, count) + '%)' + ' ont une puissance max supérieure à 300 kW *output*.
' + - output_more_than_100 + ' (' + calculerPourcentage(output_more_than_100, count) + '%)' + ' ont une puissance max supérieure à 100 kW *output*.
' + - output_more_than_50 + ' (' + calculerPourcentage(output_more_than_50, count) + '%)' + ' ont une puissance max supérieure à 50 kW *output*.
' + - count_found_type2combo + ' (' + calculerPourcentage(count_found_type2combo, count) + '%)' + ' ont un prise combo définie *type2_combo*.
' + - 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 *type2_combo*.
' + - count_found_type2 + ' (' + calculerPourcentage(count_found_type2, count) + '%)' + ' ont un prise type2 définie *type2*.
' + - '' - - $('#found_charging_stations').html(stats_content) - } - - function calculerPourcentage (partie, total) { - if (total === 0) { - return 'Division par zéro impossible' + let outputPower = guessOutputPowerFromFeature(feature) + if (found_type2_combo) { + count_found_type2combo++ } - 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 = `
+
${count_output_unknown}
+
${count_station_outputoutput_between_1_and_50}
+
${output_more_than_50}
+
${output_more_than_100}
+
${output_more_than_200}
+
${output_more_than_300}
+
+` - displayStatsFromGeoJson(resultAsGeojson) - var resultLayer = L.geoJson(resultAsGeojson, { + let stats_content = `
+Statistiques des ${count} stations trouvées:
+${count_station_output} (${calculerPourcentage(count_station_output, count)}%) ont une info de puissance max délivrée charging_station:output.
+${count_ref_eu} (${calculerPourcentage(count_ref_eu, count)}%) ont une référence européenne ref:EU:EVSE.
+${count_output_unknown} (${calculerPourcentage(count_output_unknown, count)}%) ont une puissance max inconnue *output*.
+${output_more_than_300} (${calculerPourcentage(output_more_than_300, count)}%) ont une puissance max supérieure à 300 kW *output*.
+${output_more_than_200} (${calculerPourcentage(output_more_than_200, count)}%) ont une puissance max supérieure à 200 kW *output*.
+${output_more_than_100} (${calculerPourcentage(output_more_than_100, count)}%) ont une puissance max supérieure à 100 kW *output*.
+${output_more_than_50} (${calculerPourcentage(output_more_than_50, count)}%) ont une puissance max supérieure à 50 kW *output*.
+${count_found_type2combo} (${calculerPourcentage(count_found_type2combo, count)}%) ont un prise combo définie *type2_combo*.
+${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 *type2_combo*.
${count_found_type2} (${calculerPourcentage(count_found_type2, count)}%) ont un prise type2 définie *type2*.
+
` + + $('#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 = '' - // console.log('feature.properties', feature.properties) - // popupContent = popupContent + '
@id
capacité: ' + feature.properties.tags['capacity'] + '
' - var keys = Object.keys(feature.properties.tags) + let popupContent = '' // 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 = ' Aucune information renseignée, ajoutez la dans OpenStreetMap!' + popupContent = ` Aucune information renseignée, ajoutez la dans OpenStreetMap!` } - let html = '' + - '✏️ ' + displayOutPowerGuessed + '' + popupContent + '' - - // 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 html = `✏️JOSM ${displayOutPowerGuessed}${popupContent}` let radius = 20 if (outPowerGuessed > 300) { @@ -383,16 +392,34 @@ function getIconFromTags (tags) { return iconFileName } -$('#toggleMinPower_50').click(toggleMinPower(50)) -$('#toggleMinPower_100').click(toggleMinPower(100)) -$('#toggleMinPower_300').click(toggleMinPower(300)) -$('#query-button').click(function () { +// $('#toggleMinPower_50').on('click', toggleMinPower(50)) +// $('#toggleMinPower_100').on('click', toggleMinPower(100)) +// document.getElementById('toggleMinPower_300').addEventListener('click', toggleMinPower(showHighPower)) +$('#query-button').on('click', function () { supprimerMarqueurs(map) loadOverpassQuery() }) -function toggleMinPower (minPower) { - console.log('toggle', minPower) +function toggleMinPower (showHighPower) { + 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() diff --git a/styles/style.css b/styles/style.css index 39e141e..d93e3c1 100644 --- a/styles/style.css +++ b/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;*/ +}