338 lines
9.1 KiB
JavaScript
338 lines
9.1 KiB
JavaScript
//import * as geoDataPointsFromApi from './data.json';
|
|
|
|
const overrideQuery = true
|
|
const initialZoom = 12
|
|
const osmMention = '© <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
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
|
|
// https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png
|
|
// https://tile.openstreetmap.org/{z}/{x}/{y}.png
|
|
// 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'
|
|
const tileServer = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'
|
|
|
|
// Créer la carte centrée sur Rouen
|
|
var map = L.map('map').setView([49.4438, 1.0993], initialZoom)
|
|
// 'https://overpass-api.de/api/interpreter?data=[out:json][timeout:25];' +
|
|
// 'area(id:3600075628)->.searchArea;' +
|
|
// 'node[amenity=charging_station](area.searchArea);' +
|
|
// 'out body geom;'
|
|
|
|
L.tileLayer(tileServer, {
|
|
maxZoom: 19,
|
|
attribution: osmMention,
|
|
}).addTo(map)
|
|
|
|
// if (overrideQuery) {
|
|
// $('#overpass-api-controls').hide();
|
|
// }
|
|
|
|
function buildOverpassApiUrl (map, overpassQuery) {
|
|
|
|
var baseUrl = 'https://overpass-api.de/api/interpreter'
|
|
var bounds = map.getBounds().getSouth() + ',' + map.getBounds().getWest() + ',' + map.getBounds().getNorth() + ',' + map.getBounds().getEast()
|
|
var resultUrl, query = ''
|
|
|
|
if (overrideQuery) {
|
|
query = `?data=[out:json][timeout:15];(
|
|
node[amenity=charging_station](${bounds});
|
|
);out body geom;`
|
|
} else {
|
|
var nodeQuery = 'node[' + overpassQuery + '](' + bounds + ');'
|
|
var wayQuery = 'way[' + overpassQuery + '](' + bounds + ');'
|
|
var relationQuery = 'relation[' + overpassQuery + '](' + bounds + ');'
|
|
query = '?data=[out:json][timeout:15];(' + nodeQuery + wayQuery + relationQuery + ');out body geom;'
|
|
|
|
}
|
|
resultUrl = baseUrl + query
|
|
return resultUrl
|
|
}
|
|
|
|
const tags_to_display_in_popup = [
|
|
'name',
|
|
'capacity',
|
|
'date_start',
|
|
'charging_station:output',
|
|
'socket:type_2',
|
|
'socket:type2:output',
|
|
'socket:typee',
|
|
'socket:typee:output',
|
|
'socket:type2_combo',
|
|
'socket:type2_combo:output',
|
|
'socket:chademo',
|
|
'operator', 'ref:EU:EVSE',
|
|
'network',
|
|
'opening_hours',
|
|
'contact',
|
|
'phone',
|
|
'contact:phone',
|
|
'website',
|
|
'contact:website',
|
|
'ref',
|
|
'fee',
|
|
'payment',
|
|
'payment:contactless',
|
|
'authentication:app',
|
|
'authentication:debit_card',
|
|
]
|
|
|
|
function supprimerMarqueurs (map) {
|
|
map.eachLayer((layer) => {
|
|
if (layer instanceof L.Marker) {
|
|
layer.remove()
|
|
}
|
|
})
|
|
}
|
|
|
|
const colors = [
|
|
'#36423d',
|
|
'#4e8a8d',
|
|
'#2999b3',
|
|
'#1782dd',
|
|
'#2900ff',
|
|
]
|
|
|
|
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)
|
|
value = '' + value
|
|
if (value.replace) {
|
|
value = value.replace(' ')
|
|
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)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return outputPower
|
|
}
|
|
|
|
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])
|
|
return colors[index]
|
|
}
|
|
// autrement, sans puissance max trouvée, on met la couleur des indéfinis
|
|
return unknown_color
|
|
}
|
|
|
|
function displayPointsFromApi (points) {
|
|
|
|
var resultAsGeojson = osmtogeojson(points)
|
|
var resultLayer = L.geoJson(resultAsGeojson, {
|
|
style: function (feature) {
|
|
return { color: '#f00' }
|
|
},
|
|
filter: function (feature, layer) {
|
|
var isPolygon = (feature.geometry) && (feature.geometry.type !== undefined) && (feature.geometry.type === 'Polygon')
|
|
if (isPolygon) {
|
|
feature.geometry.type = 'Point'
|
|
var polygonCenter = L.latLngBounds(feature.geometry.coordinates[0]).getCenter()
|
|
feature.geometry.coordinates = [polygonCenter.lat, polygonCenter.lng]
|
|
}
|
|
return true
|
|
},
|
|
onzoomend: function (event) {
|
|
console.log('event', event)
|
|
},
|
|
onEachFeature: function (feature, layer) {
|
|
var popupContent = ''
|
|
// console.log('feature.properties', feature.properties)
|
|
// popupContent = popupContent + '<dt>@id</dt><dd> capacité: ' + feature.properties.tags['capacity'] + '</dd>'
|
|
var keys = Object.keys(feature.properties.tags)
|
|
// ne montrer que certains champs dans la popup
|
|
tags_to_display_in_popup.forEach(function (key) {
|
|
if (tags_to_display_in_popup.indexOf(key)) {
|
|
let value = feature.properties.tags[key]
|
|
if (value) {
|
|
if(value.indexOf('http') !== -1){
|
|
value = '<a href="'+value+'">'+value+'</a>'
|
|
}
|
|
popupContent = popupContent + '<br/><strong class="popup-key">' + key + ' :</strong><span class="popup-value">' + value + '</span>'
|
|
}
|
|
}
|
|
})
|
|
// popupContent = popupContent + '</dl>'
|
|
layer.bindPopup(popupContent)
|
|
|
|
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 = '<span class="no-data"> Aucune information renseignée, <a class="edit-button" href="https://www.openstreetmap.org/edit?editor=id&node=' + feature.properties.id + '">ajoutez la dans OpenStreetMap!</a></span>'
|
|
}
|
|
let html = '<a class="edit-button" href="https://www.openstreetmap.org/edit?editor=id&node=' + feature.properties.id + '">' +
|
|
'✏️</a> <span class="color-indication" style="background-color: '+color+';">'+displayOutPowerGuessed+'</span> <br/><span class="popup-content">' + popupContent +'</span>'
|
|
|
|
// console.log('layer', layer)
|
|
let marker = L.marker(layer._latlng, {
|
|
icon: L.divIcon({
|
|
iconUrl: '/img/beer.jpg',
|
|
//+ getIconFromTags(feature.properties.tags),
|
|
// className: 'label ' + makeCssClassFromTags(feature.properties.tags),
|
|
|
|
iconSize: ['auto', 'auto'],
|
|
}),
|
|
})
|
|
if(outPowerGuessed){
|
|
|
|
marker.bindTooltip(outPowerGuessed + ' kW max',
|
|
{
|
|
permanent: false,
|
|
direction: 'right'
|
|
}
|
|
)
|
|
|
|
}
|
|
marker.addTo(map)
|
|
|
|
|
|
let radius = 10
|
|
if (outPowerGuessed > 300) {
|
|
radius = 200
|
|
}
|
|
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,
|
|
fillOpacity: 0.8,
|
|
radius: radius
|
|
}).addTo(map)
|
|
|
|
|
|
circle.bindPopup(html)
|
|
circle.on({
|
|
mouseover: function () {
|
|
this.openPopup()
|
|
},
|
|
mouseout: function () {
|
|
setTimeout(() => this.closePopup(), 3000)
|
|
},
|
|
click: function () {
|
|
this.openPopup()
|
|
},
|
|
})
|
|
},
|
|
})
|
|
}
|
|
|
|
function makeCssClassFromTags (tags) {
|
|
console.log('tags', tags)
|
|
let tagKeys = Object.keys(tags)
|
|
console.log('tagKeys', tagKeys)
|
|
if (!tags) {
|
|
return ''
|
|
}
|
|
let listOfClasses = []
|
|
|
|
tagKeys.forEach((element) => {
|
|
listOfClasses.push('tag-' + element + '_' + tags[element].replace(':', '--').replace(' ', '-'))
|
|
})
|
|
|
|
return listOfClasses.join(' ')
|
|
}
|
|
|
|
function getIconFromTags (tags) {
|
|
let iconFileName = ''
|
|
// let iconFileName = 'icon_restaurant.png';
|
|
if (tags['man_made']) {
|
|
iconFileName = 'fountain.png'
|
|
}
|
|
return iconFileName
|
|
}
|
|
|
|
$('#query-button').click(function () {
|
|
supprimerMarqueurs(map)
|
|
loadOverpassQuery()
|
|
})
|
|
|
|
let isLoading = false
|
|
|
|
function loadOverpassQuery () {
|
|
|
|
// ne pas charger si on recherche déjà
|
|
if (!isLoading) {
|
|
isLoading = true
|
|
$('#spinning_icon').fadeIn()
|
|
var queryTextfieldValue = $('#query-textfield').val()
|
|
var overpassApiUrl = buildOverpassApiUrl(map, queryTextfieldValue)
|
|
|
|
$.get(overpassApiUrl, function (geoDataPointsFromApi) {
|
|
|
|
displayPointsFromApi(geoDataPointsFromApi)
|
|
$('#spinning_icon').fadeOut()
|
|
$('#message-loading').fadeOut()
|
|
isLoading = false
|
|
}) // end of the getting from overpass API
|
|
}
|
|
}
|
|
|
|
$('#spinning_icon').hide()
|
|
$('#message-loading').hide()
|
|
|
|
loadOverpassQuery()
|