out color and radius depending on faster abilities
This commit is contained in:
parent
8f47bd6996
commit
499d79f18d
84
js/main.js
84
js/main.js
@ -46,7 +46,6 @@ function buildOverpassApiUrl (map, overpassQuery) {
|
|||||||
return resultUrl
|
return resultUrl
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const tags_to_display_in_popup = ['capacity', 'socket:type_2',
|
const tags_to_display_in_popup = ['capacity', 'socket:type_2',
|
||||||
'socket:type2:output',
|
'socket:type2:output',
|
||||||
'charging_station:output',
|
'charging_station:output',
|
||||||
@ -54,10 +53,58 @@ const tags_to_display_in_popup = ['capacity', 'socket:type_2',
|
|||||||
'socket:type2_combo',
|
'socket:type2_combo',
|
||||||
'socket:chademo',
|
'socket:chademo',
|
||||||
'operator', 'ref:EU:EVSE',
|
'operator', 'ref:EU:EVSE',
|
||||||
'network',
|
'network',
|
||||||
'contact',
|
'contact',
|
||||||
'phone']
|
'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) {
|
function displayPointsFromApi (points) {
|
||||||
|
|
||||||
var resultAsGeojson = osmtogeojson(points)
|
var resultAsGeojson = osmtogeojson(points)
|
||||||
@ -79,7 +126,7 @@ function displayPointsFromApi (points) {
|
|||||||
},
|
},
|
||||||
onEachFeature: function (feature, layer) {
|
onEachFeature: function (feature, layer) {
|
||||||
var popupContent = ''
|
var popupContent = ''
|
||||||
console.log('feature.properties', feature.properties)
|
// console.log('feature.properties', feature.properties)
|
||||||
// popupContent = popupContent + '<dt>@id</dt><dd> capacité: ' + feature.properties.tags['capacity'] + '</dd>'
|
// popupContent = popupContent + '<dt>@id</dt><dd> capacité: ' + feature.properties.tags['capacity'] + '</dd>'
|
||||||
var keys = Object.keys(feature.properties.tags)
|
var keys = Object.keys(feature.properties.tags)
|
||||||
// ne montrer que certains champs dans la popup
|
// ne montrer que certains champs dans la popup
|
||||||
@ -101,24 +148,30 @@ function displayPointsFromApi (points) {
|
|||||||
let html = '<a class="edit-button" href="https://www.openstreetmap.org/edit?editor=id&node=' + feature.properties.id + '">' +
|
let html = '<a class="edit-button" href="https://www.openstreetmap.org/edit?editor=id&node=' + feature.properties.id + '">' +
|
||||||
'✏️</a> <br/>' + popupContent
|
'✏️</a> <br/>' + popupContent
|
||||||
|
|
||||||
console.log('layer', layer)
|
// console.log('layer', layer)
|
||||||
var label = L.marker(layer._latlng, {
|
var label = L.marker(layer._latlng, {
|
||||||
icon: L.divIcon({
|
icon: L.divIcon({
|
||||||
iconUrl: '/img/beer.jpg' ,
|
iconUrl: '/img/beer.jpg',
|
||||||
//+ getIconFromTags(feature.properties.tags),
|
//+ getIconFromTags(feature.properties.tags),
|
||||||
// className: 'label ' + makeCssClassFromTags(feature.properties.tags),
|
// className: 'label ' + makeCssClassFromTags(feature.properties.tags),
|
||||||
|
|
||||||
iconSize: ['auto', 'auto'],
|
iconSize: ['auto', 'auto'],
|
||||||
}),
|
}),
|
||||||
}).addTo(map)
|
}).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, {
|
let circle = L.circle(layer._latlng, {
|
||||||
color: '#c00',
|
color: color,
|
||||||
fillColor: '#f00',
|
fillColor: color,
|
||||||
fillOpacity: 0.5,
|
fillOpacity: 0.8,
|
||||||
radius: 10
|
radius: radius
|
||||||
}).addTo(map)
|
}).addTo(map)
|
||||||
|
|
||||||
|
|
||||||
// var myIcon = L.icon({
|
// var myIcon = L.icon({
|
||||||
// // iconUrl: 'https://cipherbliss.com/ou-manger/img/' + getIconFromTags(feature.properties.tags),
|
// // 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, {
|
// let regular_marker = L.marker(layer._latlng, {
|
||||||
// title: rest_name,
|
// title: rest_name,
|
||||||
// icon: myIcon
|
// icon: myIcon
|
||||||
// }).addTo(map)
|
// }).addTo(map)
|
||||||
|
|
||||||
circle.bindPopup(html)
|
circle.bindPopup(html)
|
||||||
@ -176,6 +229,7 @@ function getIconFromTags (tags) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
$('#query-button').click(function () {
|
$('#query-button').click(function () {
|
||||||
|
supprimerMarqueurs(map)
|
||||||
loadOverpassQuery()
|
loadOverpassQuery()
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -194,11 +248,13 @@ function loadOverpassQuery () {
|
|||||||
|
|
||||||
displayPointsFromApi(geoDataPointsFromApi)
|
displayPointsFromApi(geoDataPointsFromApi)
|
||||||
$('#spinning_icon').fadeOut()
|
$('#spinning_icon').fadeOut()
|
||||||
|
$('#message-loading').fadeOut()
|
||||||
isLoading = false
|
isLoading = false
|
||||||
}) // end of the getting from overpass API
|
}) // end of the getting from overpass API
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$('#spinning_icon').hide()
|
$('#spinning_icon').hide()
|
||||||
|
$('#message-loading').hide()
|
||||||
|
|
||||||
loadOverpassQuery()
|
loadOverpassQuery()
|
||||||
|
@ -72,6 +72,9 @@ h2 {
|
|||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.has_output_of_irve_specified{
|
||||||
|
box-shadow: 0 0 15rem darkred;
|
||||||
|
}
|
||||||
/*img.leaflet-marker-icon {*/
|
/*img.leaflet-marker-icon {*/
|
||||||
/* background: #fff;*/
|
/* background: #fff;*/
|
||||||
/* -webkit-border-radius: 100%;*/
|
/* -webkit-border-radius: 100%;*/
|
||||||
@ -181,3 +184,7 @@ a {
|
|||||||
.bottom-content{
|
.bottom-content{
|
||||||
padding: 0 2rem 4rem;
|
padding: 0 2rem 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#star{
|
||||||
|
left: 10rem;
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user