tykayn/libre-charge-map
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

display max guessed output

Browse Source
This commit is contained in:
Tykayn 2024-11-26 21:31:43 +01:00 committed by tykayn
parent 0d9d327c5a
commit c2cb88e9aa
3 changed files with 147 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -29,7 +29,7 @@
<input
id='query-button'
type='button'
value='🍽️ Chercher'>
value='Chercher'>
</div>
<div class="research_display">
@ -63,13 +63,13 @@
<div class="bottom-content">
<p>
Carte des IRVE de Rouen
Carte des IRVE
</p>
<div id="filter">
filtres: <br>
prise: type 2, type CCS
cable: attaché, à fournir
puissance: min 50kW, 100kW, 300kW, 400kW
prise: type 2, type CCS<br>
cable: attaché, à fournir<br>
puissance: min 50kW, 100kW, 300kW, 400kW<br>
</div>
<h2 class="title">
À propos de ce plan</h2>

131
js/main.js
View File

@ -1,9 +1,9 @@
//import * as geoDataPointsFromApi from './data.json';
const overrideQuery = true
const initialZoom = 14
const initialZoom = 12
const osmMention = '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
let unknown_color = '#676767' // color for unknown power output of the station
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
@ -86,19 +86,38 @@ function supprimerMarqueurs (map) {
}
const colors = [
'#fe8e5d',
'#fec35d',
'#b7a543',
'#7fb743',
'#0fae50',
'#08c1c7',
'#0081f0',
'#36423d',
'#4e8a8d',
'#2999b3',
'#1782dd',
'#2900ff',
]
function getColor (feature) {
var outputPower = 0
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)
@ -108,6 +127,13 @@ function getColor (feature) {
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)
@ -115,16 +141,22 @@ function getColor (feature) {
}
}
}
if (!outputPower) {
console.log('pas de outputPower', outputPower)
return outputPower
}
return unknown_color
}
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])
// 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) {
@ -156,7 +188,10 @@ function displayPointsFromApi (points) {
if (tags_to_display_in_popup.indexOf(key)) {
let value = feature.properties.tags[key]
if (value) {
popupContent = popupContent + '<br/><strong class="popup-key">' + key + ' :</strong> ' + 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>'
}
}
})
@ -166,12 +201,20 @@ function displayPointsFromApi (points) {
let iconSiZePx = 20
let rest_name = ''
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=id&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> <br/>' + popupContent
'✏️</a> <span class="color-indication" style="background-color: '+color+';">'+displayOutPowerGuessed+'</span> <br/>' + popupContent
// console.log('layer', layer)
var label = L.marker(layer._latlng, {
let marker = L.marker(layer._latlng, {
icon: L.divIcon({
iconUrl: '/img/beer.jpg',
//+ getIconFromTags(feature.properties.tags),
@ -179,15 +222,40 @@ function displayPointsFromApi (points) {
iconSize: ['auto', 'auto'],
}),
}).addTo(map)
})
if(outPowerGuessed){
let color = getColor(feature)
let radius = 50
if (color == '#0081f0') {
marker.bindTooltip(outPowerGuessed + ' kW max',
{
permanent: false,
direction: 'right'
}
)
}
marker.addTo(map)
let radius = 10
if (outPowerGuessed > 300) {
radius = 200
} else if (color == '#08c1c7') {
}
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,
@ -195,19 +263,6 @@ function displayPointsFromApi (points) {
radius: radius
}).addTo(map)
// var myIcon = L.icon({
// // iconUrl: 'https://cipherbliss.com/ou-manger/img/' + getIconFromTags(feature.properties.tags),
// iconSize: [iconSiZePx, iconSiZePx],
// iconAnchor: [iconSiZePx / 2, iconSiZePx / 2],
// popupAnchor: [iconSiZePx / 2, iconSiZePx / 2],
// className: makeCssClassFromTags(feature.properties.tags),
//
// })
// let regular_marker = L.marker(layer._latlng, {
// title: rest_name,
// icon: myIcon
// }).addTo(map)
circle.bindPopup(html)
circle.on({

62
styles/style.css
View File

@ -61,10 +61,11 @@ h2 {
#overpass-api-controls {
position: fixed;
top: 8em;
left: 4em;
top: 0;
right: 1em;
padding: 10px;
background-color: rgb(255, 255, 255);
background-color: transparent;
border: 0;
z-index: 10;
}
@ -72,9 +73,10 @@ h2 {
display: inline;
}
.has_output_of_irve_specified{
.has_output_of_irve_specified {
box-shadow: 0 0 15rem darkred;
}
/*img.leaflet-marker-icon {*/
/* background: #fff;*/
/* -webkit-border-radius: 100%;*/
@ -100,8 +102,8 @@ img.leaflet-marker-icon.tag-socket\:type2_yes {
#query-button,
.edit-button {
background: #497cd3;
padding: 0.5em;
border-radius: 0.25em;
padding: 0.5em 1em;
border-radius: 2em;
color: white;
border: solid 1px #497cd3ff;
float: right;
@ -139,10 +141,12 @@ img.leaflet-marker-icon.tag-socket\:type2_yes {
a {
color: #38f;
}
.leaflet-control-custom{
.leaflet-control-custom {
padding: 1rem;
background: white;
}
#spinning_icon {
position: fixed;
top: 11rem;
@ -172,19 +176,51 @@ a {
}
.leaflet-popup-content {
min-width: 15rem;
min-height: 10rem;
min-width: 10rem;
max-width: 20rem;
min-height: 5rem;
max-height: 10rem;
overflow: auto;
word-break: break-all;
word-wrap: break-word;
}
.popup-key {
min-width: 6rem;
display: inline-block
display: inline-block;
}
.bottom-content{
.popup-value{
min-width: 10rem;
text-align: right;
display: inline-block;
}
.bottom-content {
padding: 0 2rem 4rem;
}
#star{
#star {
left: 10rem;
}
.color-indication {
min-width: 1rem;
height: 1rem;
padding: 1rem;
border-radius: 2rem;
display: block;
float: right;
margin: 0.5rem;
color: white;
text-shadow: 0 0 0.5rem #222;
}
.no-data {
border-left: 3px solid dodgerblue;
padding: 1em 2rem;
min-height: 4rem;
}
.no-data a {
color: dodgerblue;
}