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; +}