From c2cb88e9aa6e797843913e38f23e583a9810f872 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Tue, 26 Nov 2024 21:31:43 +0100 Subject: [PATCH] display max guessed output --- index.html | 10 ++-- js/main.js | 131 +++++++++++++++++++++++++++++++++-------------- styles/style.css | 62 +++++++++++++++++----- 3 files changed, 147 insertions(+), 56 deletions(-) diff --git a/index.html b/index.html index 7b0ecb7..2ffffde 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,7 @@ + value='Chercher'>
@@ -63,13 +63,13 @@

- Carte des IRVE de Rouen + Carte des IRVE

filtres:
- prise: type 2, type CCS - cable: attaché, à fournir - puissance: min 50kW, 100kW, 300kW, 400kW + prise: type 2, type CCS
+ cable: attaché, à fournir
+ puissance: min 50kW, 100kW, 300kW, 400kW

À propos de ce plan

diff --git a/js/main.js b/js/main.js index f97a09e..0968e6c 100644 --- a/js/main.js +++ b/js/main.js @@ -1,9 +1,9 @@ //import * as geoDataPointsFromApi from './data.json'; const overrideQuery = true -const initialZoom = 14 +const initialZoom = 12 const osmMention = '© OpenStreetMap 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 + '
' + key + ' : ' + value + '' + if(value.indexOf('http') !== -1){ + value = ''+value+'' + } + popupContent = popupContent + '
' + key + ' :' + value + '' } } }) @@ -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 = ' Aucune information renseignée, ajoutez la dans OpenStreetMap!' + } let html = '' + - '✏️
' + popupContent + '✏️ '+displayOutPowerGuessed+'
' + 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({ diff --git a/styles/style.css b/styles/style.css index 8e90649..28478fe 100644 --- a/styles/style.css +++ b/styles/style.css @@ -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; +}