- 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 + '
' + value + ''
+ if(value.indexOf('http') !== -1){
+ value = '
'+value+''
+ }
+ popupContent = popupContent + '
'
}
}
})
@@ -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;
+}