libre-charge-map/js/main.js
2024-12-11 17:32:48 +01:00

423 lines
13 KiB
JavaScript

/**
* 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 = '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
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
// https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png
// https://tile.openstreetmap.org/{z}/{x}/{y}.png
// 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'
const tileServer = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'
// Créer la carte centrée sur Rouen
var map = L.map('map').setView([49.4438, 1.0993], initialZoom)
// 'https://overpass-api.de/api/interpreter?data=[out:json][timeout:25];' +
// 'area(id:3600075628)->.searchArea;' +
// 'node[amenity=charging_station](area.searchArea);' +
// 'out body geom;'
L.tileLayer(tileServer, {
maxZoom: 19,
attribution: osmMention,
}).addTo(map)
function buildOverpassApiUrl (map, overpassQuery) {
var baseUrl = 'https://overpass-api.de/api/interpreter'
var bounds = map.getBounds().getSouth() + ',' + map.getBounds().getWest() + ',' + map.getBounds().getNorth() + ',' + map.getBounds().getEast()
var resultUrl, query = ''
if (overrideQuery) {
query = `?data=[out:json][timeout:15];(
node[amenity=charging_station](${bounds});
);out body geom;`
} else {
var nodeQuery = 'node[' + overpassQuery + '](' + bounds + ');'
var wayQuery = 'way[' + overpassQuery + '](' + bounds + ');'
var relationQuery = 'relation[' + overpassQuery + '](' + bounds + ');'
query = '?data=[out:json][timeout:15];(' + nodeQuery + wayQuery + relationQuery + ');out body geom;'
}
resultUrl = baseUrl + query
return resultUrl
}
const tags_to_display_in_popup = [
'name',
'capacity',
'date_start',
'charging_station:output',
'socket:type_2',
'socket:type2:output',
'socket:typee',
'socket:typee:output',
'socket:type2_combo',
'socket:type2_combo:output',
'socket:chademo',
'operator', 'ref:EU:EVSE',
'network',
'opening_hours',
'contact',
'phone',
'contact:phone',
'website',
'contact:website',
'ref',
'fee',
'payment',
'payment:contactless',
'authentication:app',
'authentication:debit_card',
]
function supprimerMarqueurs (map) {
map.eachLayer((layer) => {
if (layer instanceof L.Marker) {
layer.remove()
}
})
}
const colors = [
'#36423d',
'#4e8a8d',
'#2999b3',
'#1782dd',
'#2900ff',
'#8000ff',
]
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
*
*/
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)
value = '' + value
if (value.replace) {
value = value.replace(' ')
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)
}
}
}
}
return outputPower
}
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])
return colors[index]
}
// autrement, sans puissance max trouvée, on met la couleur des indéfinis
return unknown_color
}
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' }
},
filter: function (feature, layer) {
var isPolygon = (feature.geometry) && (feature.geometry.type !== undefined) && (feature.geometry.type === 'Polygon')
if (isPolygon) {
feature.geometry.type = 'Point'
var polygonCenter = L.latLngBounds(feature.geometry.coordinates[0]).getCenter()
feature.geometry.coordinates = [polygonCenter.lat, polygonCenter.lng]
}
return true
},
onzoomend: function (event) {
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)
// ne montrer que certains champs dans la popup
tags_to_display_in_popup.forEach(function (key) {
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>'
}
popupContent = popupContent + '<br/><strong class="popup-key">' + key + ' :</strong><span class="popup-value">' + value + '</span>'
}
}
})
// popupContent = popupContent + '</dl>'
layer.bindPopup(popupContent)
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=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 radius = 20
if (outPowerGuessed > 300) {
radius = 200
} 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,
fillOpacity: 0.8,
radius: radius
}).addTo(map)
circle.bindPopup(html)
circle.on({
mouseover: function () {
this.openPopup()
},
mouseout: function () {
setTimeout(() => this.closePopup(), 3000)
},
click: function () {
this.openPopup()
},
})
},
})
}
function makeCssClassFromTags (tags) {
console.log('tags', tags)
let tagKeys = Object.keys(tags)
console.log('tagKeys', tagKeys)
if (!tags) {
return ''
}
let listOfClasses = []
tagKeys.forEach((element) => {
listOfClasses.push('tag-' + element + '_' + tags[element].replace(':', '--').replace(' ', '-'))
})
return listOfClasses.join(' ')
}
function getIconFromTags (tags) {
let iconFileName = ''
// let iconFileName = 'icon_restaurant.png';
if (tags['man_made']) {
iconFileName = 'fountain.png'
}
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 () {
// ne pas charger si on recherche déjà
if (!isLoading) {
isLoading = true
$('#spinning_icon').fadeIn()
var queryTextfieldValue = $('#query-textfield').val()
var overpassApiUrl = buildOverpassApiUrl(map, queryTextfieldValue)
$.get(overpassApiUrl, function (geoDataPointsFromApi) {
displayPointsFromApi(geoDataPointsFromApi)
$('#spinning_icon').fadeOut()
$('#message-loading').fadeOut()
isLoading = false
}) // end of the getting from overpass API
}
}
$('#spinning_icon').hide()
$('#message-loading').hide()
loadOverpassQuery()