dd stat bar power out
This commit is contained in:
parent
8289b47f89
commit
a08141ab65
32
index.html
32
index.html
@ -71,16 +71,16 @@
|
||||
cable: attaché, à fournir<br>
|
||||
puissance:
|
||||
min
|
||||
<button class="button" id="toggleMinPower_50">
|
||||
50kW
|
||||
</button>
|
||||
,
|
||||
<button class="button" id="toggleMinPower_100">
|
||||
100kW
|
||||
</button>
|
||||
,
|
||||
<button class="button" id="toggleMinPower_100">
|
||||
300kW
|
||||
<!-- <button class="button" id="toggleMinPower_50">-->
|
||||
<!-- keep cool, montre les stations entre 3 et 50kW max-->
|
||||
<!-- </button>-->
|
||||
<!-- ,-->
|
||||
<!-- <button class="button" id="toggleMinPower_100">-->
|
||||
<!-- 100kW-->
|
||||
<!-- </button>-->
|
||||
<!-- ,-->
|
||||
<button class="button" id="toggleMinPower_300">
|
||||
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>
|
||||
|
||||
160
js/main.js
160
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 = '© <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,10 +164,18 @@ 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) {
|
||||
|
||||
@ -170,17 +183,19 @@ function displayPointsFromApi (points) {
|
||||
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;
|
||||
let found_type2_combo = false
|
||||
// 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
|
||||
let keys_of_object = Object.keys(feature.properties.tags)
|
||||
keys_of_object.map(tagKey => {
|
||||
@ -203,19 +218,23 @@ function displayPointsFromApi (points) {
|
||||
if (outputPower == 0) {
|
||||
count_output_unknown++
|
||||
}
|
||||
if(outputPower>200 && ! found_type2_combo){
|
||||
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){
|
||||
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){
|
||||
} else if (outputPower >= 100 && outputPower < 200) {
|
||||
output_more_than_100++
|
||||
}
|
||||
else if(outputPower>300){
|
||||
} 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']) {
|
||||
@ -225,34 +244,51 @@ function displayPointsFromApi (points) {
|
||||
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>
|
||||
`
|
||||
|
||||
let stats_content = '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_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/>' +
|
||||
''
|
||||
let stats_content = `<div class="stats">
|
||||
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)
|
||||
}
|
||||
|
||||
function calculerPourcentage (partie, total) {
|
||||
if (total === 0) {
|
||||
return 'Division par zéro impossible'
|
||||
}
|
||||
return ((partie / total) * 100).toFixed(1)
|
||||
}
|
||||
let geojsondata;
|
||||
|
||||
displayStatsFromGeoJson(resultAsGeojson)
|
||||
var resultLayer = L.geoJson(resultAsGeojson, {
|
||||
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 + '<dt>@id</dt><dd> capacité: ' + feature.properties.tags['capacity'] + '</dd>'
|
||||
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 = '<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 + '">' +
|
||||
'✏️</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 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>`
|
||||
|
||||
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()
|
||||
|
||||
@ -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;*/
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user