mirror of
https://forge.chapril.org/tykayn/libre-charge-map
synced 2025-06-20 01:34:43 +02:00
display stats
This commit is contained in:
Tykayn
tykayn
parent
9f7209e652
commit
8289b47f89
4 changed files with 359 additions and 73 deletions
191
js/main.js
191
js/main.js
|
|
@ -1,5 +1,9 @@
|
|||
//import * as geoDataPointsFromApi from './data.json';
|
||||
|
||||
/**
|
||||
* rechercher les bornes de recharge,
|
||||
* afficher des cercles colorés selon la puissance max de la station
|
||||
* lister les bornes trouvées dans la page
|
||||
* @type {boolean}
|
||||
*/
|
||||
const overrideQuery = true
|
||||
const initialZoom = 12
|
||||
const osmMention = '© <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
|
|
@ -24,10 +28,6 @@ L.tileLayer(tileServer, {
|
|||
attribution: osmMention,
|
||||
}).addTo(map)
|
||||
|
||||
// if (overrideQuery) {
|
||||
// $('#overpass-api-controls').hide();
|
||||
// }
|
||||
|
||||
function buildOverpassApiUrl (map, overpassQuery) {
|
||||
|
||||
var baseUrl = 'https://overpass-api.de/api/interpreter'
|
||||
|
|
@ -36,8 +36,8 @@ function buildOverpassApiUrl (map, overpassQuery) {
|
|||
|
||||
if (overrideQuery) {
|
||||
query = `?data=[out:json][timeout:15];(
|
||||
node[amenity=charging_station](${bounds});
|
||||
);out body geom;`
|
||||
node[amenity=charging_station](${bounds});
|
||||
);out body geom;`
|
||||
} else {
|
||||
var nodeQuery = 'node[' + overpassQuery + '](' + bounds + ');'
|
||||
var wayQuery = 'way[' + overpassQuery + '](' + bounds + ');'
|
||||
|
|
@ -91,30 +91,31 @@ const colors = [
|
|||
'#2999b3',
|
||||
'#1782dd',
|
||||
'#2900ff',
|
||||
'#8000ff',
|
||||
]
|
||||
|
||||
function guessOutputPowerFromFeature(feature){
|
||||
function guessOutputPowerFromFeature (feature) {
|
||||
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
|
||||
* - 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;
|
||||
let found_type_2 = false
|
||||
let found_type_chademo = false
|
||||
for (var tag in feature.properties.tags) {
|
||||
if(tag.indexOf('type2') !== -1){
|
||||
if (tag.indexOf('type2') !== -1) {
|
||||
// console.log('tag type2', tag)
|
||||
found_type_2=true;
|
||||
found_type_2 = true
|
||||
power = 43
|
||||
}
|
||||
if(tag.indexOf('chademo') !== -1){
|
||||
found_type_chademo=true;
|
||||
if (tag.indexOf('chademo') !== -1) {
|
||||
found_type_chademo = true
|
||||
console.log('tag chademo', tag)
|
||||
power = 63
|
||||
}
|
||||
|
|
@ -129,9 +130,8 @@ function guessOutputPowerFromFeature(feature){
|
|||
var power = parseInt(value)
|
||||
// deviner les types de prises présents
|
||||
|
||||
if(power)
|
||||
{
|
||||
console.log('power', power )
|
||||
if (power) {
|
||||
console.log('power', power)
|
||||
console.log('outputPower', outputPower)
|
||||
}
|
||||
if (power > outputPower) {
|
||||
|
|
@ -141,19 +141,19 @@ function guessOutputPowerFromFeature(feature){
|
|||
}
|
||||
}
|
||||
}
|
||||
return outputPower
|
||||
return outputPower
|
||||
}
|
||||
|
||||
function getColor (feature) {
|
||||
|
||||
let outputPower = guessOutputPowerFromFeature(feature)
|
||||
feature.properties.tags.has_output_of_irve_specified = outputPower
|
||||
if(outputPower){
|
||||
if (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]
|
||||
var index = Math.min(Math.floor(outputPower / 10), colors.length - 1)
|
||||
console.log('outputPower', outputPower)
|
||||
// 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
|
||||
|
|
@ -162,6 +162,93 @@ function getColor (feature) {
|
|||
function displayPointsFromApi (points) {
|
||||
|
||||
var resultAsGeojson = osmtogeojson(points)
|
||||
console.log('resultAsGeojson', 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
|
||||
|
||||
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++
|
||||
}
|
||||
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++
|
||||
}
|
||||
})
|
||||
|
||||
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/>' +
|
||||
''
|
||||
|
||||
$('#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)
|
||||
}
|
||||
|
||||
displayStatsFromGeoJson(resultAsGeojson)
|
||||
var resultLayer = L.geoJson(resultAsGeojson, {
|
||||
style: function (feature) {
|
||||
return { color: '#f00' }
|
||||
|
|
@ -188,8 +275,8 @@ function displayPointsFromApi (points) {
|
|||
if (tags_to_display_in_popup.indexOf(key)) {
|
||||
let value = feature.properties.tags[key]
|
||||
if (value) {
|
||||
if(value.indexOf('http') !== -1){
|
||||
value = '<a href="'+value+'">'+value+'</a>'
|
||||
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>'
|
||||
}
|
||||
|
|
@ -198,20 +285,17 @@ function displayPointsFromApi (points) {
|
|||
// popupContent = popupContent + '</dl>'
|
||||
layer.bindPopup(popupContent)
|
||||
|
||||
let iconSiZePx = 20
|
||||
|
||||
let rest_name = ''
|
||||
let outPowerGuessed = guessOutputPowerFromFeature(feature)
|
||||
let color = getColor(feature)
|
||||
let displayOutPowerGuessed = '? kW';
|
||||
if(outPowerGuessed){
|
||||
displayOutPowerGuessed = outPowerGuessed+' kW max'
|
||||
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>'
|
||||
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>'
|
||||
}
|
||||
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> <br/><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, {
|
||||
|
|
@ -223,7 +307,8 @@ function displayPointsFromApi (points) {
|
|||
iconSize: ['auto', 'auto'],
|
||||
}),
|
||||
})
|
||||
if(outPowerGuessed){
|
||||
|
||||
if (outPowerGuessed) {
|
||||
|
||||
marker.bindTooltip(outPowerGuessed + ' kW max',
|
||||
{
|
||||
|
|
@ -233,26 +318,20 @@ function displayPointsFromApi (points) {
|
|||
)
|
||||
|
||||
}
|
||||
marker.addTo(map)
|
||||
marker.addTo(map)
|
||||
|
||||
|
||||
let radius = 10
|
||||
let radius = 20
|
||||
if (outPowerGuessed > 300) {
|
||||
radius = 200
|
||||
}
|
||||
else if (outPowerGuessed > 200) {
|
||||
} else if (outPowerGuessed > 200) {
|
||||
radius = 250
|
||||
}
|
||||
else if (outPowerGuessed > 100) {
|
||||
} else if (outPowerGuessed > 100) {
|
||||
radius = 150
|
||||
}
|
||||
else if (outPowerGuessed > 50) {
|
||||
} else if (outPowerGuessed > 50) {
|
||||
radius = 100
|
||||
}
|
||||
else if (outPowerGuessed > 20) {
|
||||
} else if (outPowerGuessed > 20) {
|
||||
radius = 50
|
||||
}
|
||||
else if (outPowerGuessed > 7) {
|
||||
} else if (outPowerGuessed > 7) {
|
||||
radius = 20
|
||||
}
|
||||
|
||||
|
|
@ -263,7 +342,6 @@ function displayPointsFromApi (points) {
|
|||
radius: radius
|
||||
}).addTo(map)
|
||||
|
||||
|
||||
circle.bindPopup(html)
|
||||
circle.on({
|
||||
mouseover: function () {
|
||||
|
|
@ -305,11 +383,18 @@ function getIconFromTags (tags) {
|
|||
return iconFileName
|
||||
}
|
||||
|
||||
$('#toggleMinPower_50').click(toggleMinPower(50))
|
||||
$('#toggleMinPower_100').click(toggleMinPower(100))
|
||||
$('#toggleMinPower_300').click(toggleMinPower(300))
|
||||
$('#query-button').click(function () {
|
||||
supprimerMarqueurs(map)
|
||||
loadOverpassQuery()
|
||||
})
|
||||
|
||||
function toggleMinPower (minPower) {
|
||||
console.log('toggle', minPower)
|
||||
}
|
||||
|
||||
let isLoading = false
|
||||
|
||||
function loadOverpassQuery () {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue