diff --git a/js/main.js b/js/main.js
index 0b4381f..0b9eb49 100644
--- a/js/main.js
+++ b/js/main.js
@@ -46,7 +46,6 @@ function buildOverpassApiUrl (map, overpassQuery) {
return resultUrl
}
-
const tags_to_display_in_popup = ['capacity', 'socket:type_2',
'socket:type2:output',
'charging_station:output',
@@ -54,10 +53,58 @@ const tags_to_display_in_popup = ['capacity', 'socket:type_2',
'socket:type2_combo',
'socket:chademo',
'operator', 'ref:EU:EVSE',
-'network',
+ 'network',
'contact',
'phone']
+function supprimerMarqueurs (map) {
+ map.eachLayer((layer) => {
+ if (layer instanceof L.Marker) {
+ layer.remove()
+ }
+ })
+}
+
+const colors = [
+ '#fe8e5d',
+ '#fec35d',
+ '#b7a543',
+ '#7fb743',
+ '#0fae50',
+ '#08c1c7',
+ '#0081f0',
+]
+function getColor (feature) {
+ var outputPower = 0
+ if (feature.properties && feature.properties.tags) {
+ for (var tag in feature.properties.tags) {
+ 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)
+ if (power > outputPower) {
+ outputPower = power
+ console.log('power', power)
+ }
+ }
+ }
+ }
+ if(!outputPower){
+ console.log('pas de outputPower', outputPower)
+ return 'white'
+ }
+ feature.properties.tags.has_output_of_irve_specified = 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]
+}
+
function displayPointsFromApi (points) {
var resultAsGeojson = osmtogeojson(points)
@@ -79,7 +126,7 @@ function displayPointsFromApi (points) {
},
onEachFeature: function (feature, layer) {
var popupContent = ''
- console.log('feature.properties', feature.properties)
+ // console.log('feature.properties', feature.properties)
// popupContent = popupContent + '
@id capacité: ' + feature.properties.tags['capacity'] + ''
var keys = Object.keys(feature.properties.tags)
// ne montrer que certains champs dans la popup
@@ -101,24 +148,30 @@ function displayPointsFromApi (points) {
let html = '' +
'✏️
' + popupContent
- console.log('layer', layer)
+ // console.log('layer', layer)
var label = L.marker(layer._latlng, {
icon: L.divIcon({
- iconUrl: '/img/beer.jpg' ,
- //+ getIconFromTags(feature.properties.tags),
+ iconUrl: '/img/beer.jpg',
+ //+ getIconFromTags(feature.properties.tags),
// className: 'label ' + makeCssClassFromTags(feature.properties.tags),
iconSize: ['auto', 'auto'],
}),
}).addTo(map)
+ let color = getColor(feature)
+ let radius = 20;
+ if(color=='#0081f0'){
+ radius = 200;
+ } else if(color=='#08c1c7'){
+ radius = 100;
+ }
let circle = L.circle(layer._latlng, {
- color: '#c00',
- fillColor: '#f00',
- fillOpacity: 0.5,
- radius: 10
-}).addTo(map)
-
+ color: color,
+ fillColor: color,
+ fillOpacity: 0.8,
+ radius: radius
+ }).addTo(map)
// var myIcon = L.icon({
// // iconUrl: 'https://cipherbliss.com/ou-manger/img/' + getIconFromTags(feature.properties.tags),
@@ -130,8 +183,8 @@ function displayPointsFromApi (points) {
// })
// let regular_marker = L.marker(layer._latlng, {
- // title: rest_name,
- // icon: myIcon
+ // title: rest_name,
+ // icon: myIcon
// }).addTo(map)
circle.bindPopup(html)
@@ -176,6 +229,7 @@ function getIconFromTags (tags) {
}
$('#query-button').click(function () {
+ supprimerMarqueurs(map)
loadOverpassQuery()
})
@@ -194,11 +248,13 @@ function loadOverpassQuery () {
displayPointsFromApi(geoDataPointsFromApi)
$('#spinning_icon').fadeOut()
+ $('#message-loading').fadeOut()
isLoading = false
}) // end of the getting from overpass API
}
}
$('#spinning_icon').hide()
+$('#message-loading').hide()
loadOverpassQuery()
diff --git a/styles/style.css b/styles/style.css
index bd88c57..8e90649 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -72,6 +72,9 @@ h2 {
display: inline;
}
+.has_output_of_irve_specified{
+ box-shadow: 0 0 15rem darkred;
+}
/*img.leaflet-marker-icon {*/
/* background: #fff;*/
/* -webkit-border-radius: 100%;*/
@@ -181,3 +184,7 @@ a {
.bottom-content{
padding: 0 2rem 4rem;
}
+
+#star{
+ left: 10rem;
+}