tykayn/libre-charge-map
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

add josm remote

Browse Source
This commit is contained in:
Tykayn 2024-12-12 00:27:27 +01:00 committed by tykayn
parent a08141ab65
commit a073e0887d
2 changed files with 80 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
index.html
View File

@ -62,9 +62,17 @@
<div class="bottom-content"> <div class="bottom-content">
<p> <h1>
Carte des IRVE Carte des IRVE
</p> </h1>
<!-- <a href="#" class="button edit-button josm" data-href="http://127.0.0.1:8111/load_and_zoom?left=1.1486915000000002&top=49.4144783&right=1.1506915&bottom=49.412478300000004&select=12014929487">-->
<!--test télécommande josm-->
<!-- </a>-->
<div id="infos_carte"></div>
<div id="filter"> <div id="filter">
filtres: <br> filtres: <br>
prise: type 2, type CCS<br> prise: type 2, type CCS<br>
@ -79,8 +87,8 @@
<!-- 100kW--> <!-- 100kW-->
<!-- </button>--> <!-- </button>-->
<!-- ,--> <!-- ,-->
<button class="button" id="toggleMinPower_300"> <button class="button" id="toggle_high_power">
fais voir les plus de 300kW, j'ai pas le time! fais voir les plus de 100kW, j'ai pas le time!
</button> </button>
<br> <br>
<span class="marker-demo"> <span class="marker-demo">

84
js/main.js
View File

@ -34,18 +34,18 @@ let filteredMarkers = L.layerGroup().addTo(map)
function buildOverpassApiUrl (map, overpassQuery) { function buildOverpassApiUrl (map, overpassQuery) {
var baseUrl = 'https://overpass-api.de/api/interpreter' let baseUrl = 'https://overpass-api.de/api/interpreter'
var bounds = map.getBounds().getSouth() + ',' + map.getBounds().getWest() + ',' + map.getBounds().getNorth() + ',' + map.getBounds().getEast() let bounds = map.getBounds().getSouth() + ',' + map.getBounds().getWest() + ',' + map.getBounds().getNorth() + ',' + map.getBounds().getEast()
var resultUrl, query = '' let resultUrl, query = ''
if (overrideQuery) { if (overrideQuery) {
query = `?data=[out:json][timeout:15];( query = `?data=[out:json][timeout:15];(
node[amenity=charging_station](${bounds}); node[amenity=charging_station](${bounds});
);out body geom;` );out body geom;`
} else { } else {
var nodeQuery = 'node[' + overpassQuery + '](' + bounds + ');' let nodeQuery = 'node[' + overpassQuery + '](' + bounds + ');'
var wayQuery = 'way[' + overpassQuery + '](' + bounds + ');' let wayQuery = 'way[' + overpassQuery + '](' + bounds + ');'
var relationQuery = 'relation[' + overpassQuery + '](' + bounds + ');' let relationQuery = 'relation[' + overpassQuery + '](' + bounds + ');'
query = '?data=[out:json][timeout:15];(' + nodeQuery + wayQuery + relationQuery + ');out body geom;' query = '?data=[out:json][timeout:15];(' + nodeQuery + wayQuery + relationQuery + ');out body geom;'
} }
@ -80,6 +80,18 @@ const tags_to_display_in_popup = [
'authentication:app', 'authentication:app',
'authentication:debit_card', 'authentication:debit_card',
] ]
const margin_josm_bbox= 0.00001
function createJOSMEditLink(feature) {
console.log('createJOSMEditLink feature', feature)
var coordinates = feature.geometry.coordinates;
var nodeId = feature.properties.id;
var left = coordinates[0] - margin_josm_bbox;
var right = coordinates[0] + margin_josm_bbox;
var bottom = coordinates[1] - margin_josm_bbox;
var top = coordinates[1] + margin_josm_bbox;
var josmUrl = `http://127.0.0.1:8111/load_and_zoom?left=${left}&top=${top}&right=${right}&bottom=${bottom}&select=${nodeId}`;
return josmUrl;
}
function supprimerMarqueurs (map) { function supprimerMarqueurs (map) {
map.eachLayer((layer) => { map.eachLayer((layer) => {
@ -100,6 +112,7 @@ const colors = [
function guessOutputPowerFromFeature (feature) { function guessOutputPowerFromFeature (feature) {
let outputPower = 0 let outputPower = 0
let power = 0
if (feature.properties && feature.properties.tags) { if (feature.properties && feature.properties.tags) {
/** /**
* fouiller dans les tags les valeurs explicites de puissance déclarée. * fouiller dans les tags les valeurs explicites de puissance déclarée.
@ -131,7 +144,7 @@ function guessOutputPowerFromFeature (feature) {
value = value.replace(' ') value = value.replace(' ')
value = value.replace('kW', '') value = value.replace('kW', '')
} }
var power = parseInt(value) let power = parseInt(value)
// deviner les types de prises présents // deviner les types de prises présents
if (power) { if (power) {
@ -155,7 +168,7 @@ function getColor (feature) {
feature.properties.tags.has_output_of_irve_specified = outputPower feature.properties.tags.has_output_of_irve_specified = outputPower
if (outputPower) { if (outputPower) {
var index = Math.min(Math.floor(outputPower / 10), colors.length - 1) let index = Math.min(Math.floor(outputPower / 10), colors.length - 1)
console.log('outputPower', outputPower) console.log('outputPower', outputPower)
// console.log('colors[index]', colors[index]) // console.log('colors[index]', colors[index])
return colors[index] return colors[index]
@ -273,13 +286,26 @@ ${count_estimated_type2combo} (${calculerPourcentage(count_estimated_type2combo,
let geojsondata; let geojsondata;
function bindEventsOnJosmRemote () {
let josm_remote_buttons = $(`.josm`)
console.log('josm_remote_buttons',josm_remote_buttons[0])
$(josm_remote_buttons[0]).on('click',()=>{
console.log('link', josm_remote_buttons[0])
let josm_link = $(josm_remote_buttons[0]).attr('data-href')
console.log('lancer la télécommande josm', josm_link)
$.get(josm_link, (res)=>{
console.log('res', res)
})
})
}
function displayPointsFromApi (points) { function displayPointsFromApi (points) {
geojsondata = osmtogeojson(points) geojsondata = osmtogeojson(points)
console.log('resultAsGeojson', geojsondata) console.log('resultAsGeojson', geojsondata)
displayStatsFromGeoJson(geojsondata) displayStatsFromGeoJson(geojsondata)
var resultLayer = L.geoJson(geojsondata, { let resultLayer = L.geoJson(geojsondata, {
style: function (feature) { style: function (feature) {
return { color: '#f00' } return { color: '#f00' }
}, },
@ -290,14 +316,17 @@ function displayPointsFromApi (points) {
* @returns {boolean} * @returns {boolean}
*/ */
filter: function (feature, layer) { filter: function (feature, layer) {
var isPolygon = (feature.geometry) && (feature.geometry.type !== undefined) && (feature.geometry.type === 'Polygon') let isPolygon = (feature.geometry) && (feature.geometry.type !== undefined) && (feature.geometry.type === 'Polygon')
if (isPolygon) { if (isPolygon) {
feature.geometry.type = 'Point' feature.geometry.type = 'Point'
var polygonCenter = L.latLngBounds(feature.geometry.coordinates[0]).getCenter() let polygonCenter = L.latLngBounds(feature.geometry.coordinates[0]).getCenter()
feature.geometry.coordinates = [polygonCenter.lat, polygonCenter.lng] feature.geometry.coordinates = [polygonCenter.lat, polygonCenter.lng]
} }
return true return true
}, },
onmoveend: function(event){
console.log('déplacement terminé')
},
onzoomend: function (event) { onzoomend: function (event) {
console.log('event', event) console.log('event', event)
}, },
@ -327,7 +356,9 @@ function displayPointsFromApi (points) {
if (!popupContent) { if (!popupContent) {
popupContent = `<span class="no-data"> Aucune information renseignée, <a class="edit-button" href="https://www.openstreetmap.org/edit?editor=remote&node=${feature.properties.id}">ajoutez la dans OpenStreetMap!</a></span>` popupContent = `<span class="no-data"> Aucune information renseignée, <a class="edit-button" href="https://www.openstreetmap.org/edit?editor=remote&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><a class="edit-button" href="https://www.openstreetmap.org/edit?editor=remote&node=${feature.properties.id}">JOSM</a> <span class="color-indication" style="background-color: ${color};">${displayOutPowerGuessed}</span><span class="popup-content">${popupContent}</span>` let link_josm = createJOSMEditLink(feature)
console.log('link_josm', link_josm)
let html = `<a class="edit-button" href="https://www.openstreetmap.org/edit?editor=id&node=${feature.properties.id}">✏️</a><a class="edit-button josm" data-href="${link_josm}" href="#">JOSM</a> <span class="color-indication" style="background-color: ${color};">${displayOutPowerGuessed}</span><span class="popup-content">${popupContent}</span>`
let radius = 20 let radius = 20
if (outPowerGuessed > 300) { if (outPowerGuessed > 300) {
@ -355,6 +386,7 @@ function displayPointsFromApi (points) {
circle.on({ circle.on({
mouseover: function () { mouseover: function () {
this.openPopup() this.openPopup()
bindEventsOnJosmRemote()
}, },
mouseout: function () { mouseout: function () {
setTimeout(() => this.closePopup(), 3000) setTimeout(() => this.closePopup(), 3000)
@ -365,6 +397,10 @@ function displayPointsFromApi (points) {
}) })
}, },
}) })
// link josm buttons to get request
} }
function makeCssClassFromTags (tags) { function makeCssClassFromTags (tags) {
@ -415,7 +451,7 @@ function addFilteredMarkers (showHighPower) {
geojsondata.features.forEach(function (feature) { geojsondata.features.forEach(function (feature) {
if (feature.properties.puissance_haute === showHighPower) { if (feature.properties.puissance_haute === showHighPower) {
counter++ counter++
var marker = L.marker(feature.geometry.coordinates).bindPopup(feature.properties.puissance_haute ? 'Puissance haute' : 'Puissance normale') let marker = L.marker(feature.geometry.coordinates).bindPopup(feature.properties.puissance_haute ? 'Puissance haute' : 'Puissance normale')
filteredMarkers.addLayer(marker) filteredMarkers.addLayer(marker)
} }
}) })
@ -430,8 +466,8 @@ function loadOverpassQuery () {
if (!isLoading) { if (!isLoading) {
isLoading = true isLoading = true
$('#spinning_icon').fadeIn() $('#spinning_icon').fadeIn()
var queryTextfieldValue = $('#query-textfield').val() let queryTextfieldValue = $('#query-textfield').val()
var overpassApiUrl = buildOverpassApiUrl(map, queryTextfieldValue) let overpassApiUrl = buildOverpassApiUrl(map, queryTextfieldValue)
$.get(overpassApiUrl, function (geoDataPointsFromApi) { $.get(overpassApiUrl, function (geoDataPointsFromApi) {
displayPointsFromApi(geoDataPointsFromApi) displayPointsFromApi(geoDataPointsFromApi)
@ -445,4 +481,20 @@ function loadOverpassQuery () {
$('#spinning_icon').hide() $('#spinning_icon').hide()
$('#message-loading').hide() $('#message-loading').hide()
loadOverpassQuery() function onMapMoveEnd () {
let center = map.getCenter();
let zoom = map.getZoom();
let infos = `Lat: ${center.lat}, Lon: ${center.lng}, Zoom : ${zoom}`
if (zoom > 10) {
loadOverpassQuery()
}else{
infos += "(zoomez au niveau 11 ou plus pour charger les stations en vous déplaçant)"
}
$("#infos_carte").html();
}
map.on('moveend', onMapMoveEnd);
$(document).ready(function() {
bindEventsOnJosmRemote();
onMapMoveEnd()
});