From a073e0887d1b2f76c213a69ce24721426c8fa377 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Thu, 12 Dec 2024 00:27:27 +0100 Subject: [PATCH] add josm remote --- index.html | 16 ++++++++--- js/main.js | 84 +++++++++++++++++++++++++++++++++++++++++++----------- 2 files changed, 80 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index 57d8f72..9e2b32e 100644 --- a/index.html +++ b/index.html @@ -62,9 +62,17 @@
-

+

Carte des IRVE -

+

+ + + + + + + +
filtres:
prise: type 2, type CCS
@@ -79,8 +87,8 @@ -
diff --git a/js/main.js b/js/main.js index e6e47ae..c3b064e 100644 --- a/js/main.js +++ b/js/main.js @@ -34,18 +34,18 @@ let filteredMarkers = L.layerGroup().addTo(map) 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 = '' + let baseUrl = 'https://overpass-api.de/api/interpreter' + let bounds = map.getBounds().getSouth() + ',' + map.getBounds().getWest() + ',' + map.getBounds().getNorth() + ',' + map.getBounds().getEast() + let 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 + ');' + let nodeQuery = 'node[' + overpassQuery + '](' + bounds + ');' + let wayQuery = 'way[' + overpassQuery + '](' + bounds + ');' + let relationQuery = 'relation[' + overpassQuery + '](' + bounds + ');' 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: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) { map.eachLayer((layer) => { @@ -100,6 +112,7 @@ const colors = [ function guessOutputPowerFromFeature (feature) { let outputPower = 0 + let power = 0 if (feature.properties && feature.properties.tags) { /** * 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('kW', '') } - var power = parseInt(value) + let power = parseInt(value) // deviner les types de prises présents if (power) { @@ -155,7 +168,7 @@ function getColor (feature) { feature.properties.tags.has_output_of_irve_specified = 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('colors[index]', colors[index]) return colors[index] @@ -273,13 +286,26 @@ ${count_estimated_type2combo} (${calculerPourcentage(count_estimated_type2combo, 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) { geojsondata = osmtogeojson(points) console.log('resultAsGeojson', geojsondata) displayStatsFromGeoJson(geojsondata) - var resultLayer = L.geoJson(geojsondata, { + let resultLayer = L.geoJson(geojsondata, { style: function (feature) { return { color: '#f00' } }, @@ -290,14 +316,17 @@ function displayPointsFromApi (points) { * @returns {boolean} */ 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) { 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] } return true }, + onmoveend: function(event){ + console.log('déplacement terminé') + }, onzoomend: function (event) { console.log('event', event) }, @@ -327,7 +356,9 @@ function displayPointsFromApi (points) { if (!popupContent) { popupContent = ` Aucune information renseignée, ajoutez la dans OpenStreetMap!` } - let html = `✏️JOSM ${displayOutPowerGuessed}${popupContent}` + let link_josm = createJOSMEditLink(feature) + console.log('link_josm', link_josm) + let html = `✏️JOSM ${displayOutPowerGuessed}${popupContent}` let radius = 20 if (outPowerGuessed > 300) { @@ -355,6 +386,7 @@ function displayPointsFromApi (points) { circle.on({ mouseover: function () { this.openPopup() + bindEventsOnJosmRemote() }, mouseout: function () { setTimeout(() => this.closePopup(), 3000) @@ -365,6 +397,10 @@ function displayPointsFromApi (points) { }) }, }) + + // link josm buttons to get request + + } function makeCssClassFromTags (tags) { @@ -415,7 +451,7 @@ function addFilteredMarkers (showHighPower) { geojsondata.features.forEach(function (feature) { if (feature.properties.puissance_haute === showHighPower) { 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) } }) @@ -430,8 +466,8 @@ function loadOverpassQuery () { if (!isLoading) { isLoading = true $('#spinning_icon').fadeIn() - var queryTextfieldValue = $('#query-textfield').val() - var overpassApiUrl = buildOverpassApiUrl(map, queryTextfieldValue) + let queryTextfieldValue = $('#query-textfield').val() + let overpassApiUrl = buildOverpassApiUrl(map, queryTextfieldValue) $.get(overpassApiUrl, function (geoDataPointsFromApi) { displayPointsFromApi(geoDataPointsFromApi) @@ -445,4 +481,20 @@ function loadOverpassQuery () { $('#spinning_icon').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() +});