From 61b7dc601f5fdb6699809f1b1bdb5845bba1f798 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Sat, 28 Dec 2024 17:59:15 +0100 Subject: [PATCH] responsive style --- index.html | 25 ++- js/editor.js | 43 ++++- js/main.js | 471 ++++++++++++++++++++--------------------------- js/utils.js | 2 +- styles/style.css | 145 ++++++++++----- 5 files changed, 350 insertions(+), 336 deletions(-) diff --git a/index.html b/index.html index ba96a7a..fb904c1 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@ content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=5.0"> - +
@@ -102,14 +102,10 @@

Cartes des stations de recharge pour véhicules électriques basée sur les données collaborative OpenStreetMap

-
- type2 - - prise - prise - prise - prise -
+
+ + +
@@ -122,6 +118,9 @@ + @@ -183,11 +182,19 @@
Fait par Tykayn - www.cipherbliss.com. Sources disponibles sur la forge du Chapril. +
+ type2 + prise + prise + prise + prise +

icones câble électrique Energie icônes créées par rukanicon - Flaticon + diff --git a/js/editor.js b/js/editor.js index f979fda..70c5804 100644 --- a/js/editor.js +++ b/js/editor.js @@ -2,28 +2,51 @@ * Fonctions liées à l'édition des données OSM et à l'interaction avec JOSM */ -export function sendToJOSM(map) { + +/** + * Envoyer les bornes de recharge de la zone visible à JOSM + * @param {*} map + */ +function sendToJOSM(map) { const bounds = map.getBounds(); const bbox = `${bounds.getWest()},${bounds.getSouth()},${bounds.getEast()},${bounds.getNorth()}`; - const josmUrl = `http://127.0.0.1:8111/load_and_zoom?left=${bounds.getWest()}&right=${bounds.getEast()}&top=${bounds.getNorth()}&bottom=${bounds.getSouth()}&select=node[amenity=charging_station]&changeset_hashtags=IRVE&layer_name=irve-depuis-OSM`; + const josmUrl = `http://127.0.0.1:8111/load_and_zoom?left=${bounds.getWest()}&right=${bounds.getEast()}&top=${bounds.getNorth()}&bottom=${bounds.getSouth()}&select=node[amenity=charging_station]`; - return fetch(josmUrl) + fetch(josmUrl) .then(response => { if (response.ok) { - console.log('Données envoyées à JOSM avec succès'); - return true; + alert('Données envoyées à JOSM avec succès !'); } else { - console.error('Erreur : JOSM doit être ouvert avec l\'option "Contrôle à distance" activée'); - throw new Error('JOSM non accessible'); + alert('Erreur : JOSM doit être ouvert avec l\'option "Contrôle à distance" activée'); } }) .catch(error => { console.error('Erreur JOSM:', error); - throw error; + alert('Erreur : JOSM doit être ouvert avec l\'option "Contrôle à distance" activée'); }); } -export default { - sendToJOSM + +const margin_josm_bbox = 0.00001 + +/** + * lien pour éditer une station de recharge dans JOSM + * @param {*} feature + * @returns + */ +function createJOSMEditLink(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?changeset_hashtags=IRVE&layer_name=irve-depuis-OSM&left=${left}&top=${top}&right=${right}&bottom=${bottom}&select=${nodeId}` + return josmUrl +} + +export { + sendToJOSM, + createJOSMEditLink }; \ No newline at end of file diff --git a/js/main.js b/js/main.js index f20a8a8..16ba970 100644 --- a/js/main.js +++ b/js/main.js @@ -7,9 +7,8 @@ import config from './config.js' import utils from './utils.js' import colorUtils from './color-utils.js' -import editor from './editor.js' +import { sendToJOSM, createJOSMEditLink } from './editor.js' -console.log('config', config) let geojsondata; let lastLatLng; @@ -47,32 +46,21 @@ let display_chelou = 'show'; // les stations avec une valeur suspecte, plus de 4 function setRandomView() { - console.log('set random view') -// Choix au hasard d'une ville parmi la liste - let randomCity = utils.cities[Math.floor(Math.random() * utils.cities.length)] - console.log('randomCity', randomCity) - map = map.setView(randomCity.coords, config.initialZoom) + let randomCity = utils.cities[Math.floor(Math.random() * utils.cities.length)]; + map = map.setView(randomCity.coords, config.initialZoom); } function setCoordinatesOfLeafletMapFromQueryParameters() { - // Récupère les paramètres de l'URL - // console.log('window.location', window.location.href, window) - const urlParams = new URLSearchParams(window.location.href) + const urlParams = new URLSearchParams(window.location.href); + const lat = urlParams.get('lat'); + const lng = urlParams.get('lng'); + const zoom = urlParams.get('zoom'); - // console.log('urlParams', urlParams) - // Récupère les coordonnées et le zoom à partir des paramètres de l'URL - const lat = urlParams.get('lat') - const lng = urlParams.get('lng') - const zoom = urlParams.get('zoom') - - // console.log('lat,lng,zoom', lat, lng, zoom) // Vérifie si les paramètres sont présents et valides if (lat && lng && zoom) { - // Initialise la carte avec les coordonnées et le zoom récupérés - map = map.setView([lat, lng], zoom) + map = map.setView([lat, lng], zoom); } else { - // Affiche une erreur si les paramètres sont absents ou invalides - console.error('Les paramètres de coordonnées et de zoom doivent être présents dans l\'URL.') - setRandomView() + console.error('Les paramètres de coordonnées et de zoom doivent être présents dans l\'URL.'); + setRandomView(); } } @@ -127,56 +115,40 @@ tileGrey.addTo(map) function buildOverpassApiUrl(map, overpassQuery) { - - let baseUrl = 'https://overpass-api.de/api/interpreter' - // Ajouter une marge de 2 kilomètres autour des bounds - // Conversion approximative: 1 degré = 111km à l'équateur - const kilometersMarginForLoading = 2 - const marginInDegrees = kilometersMarginForLoading / 111 // 2 kilomètres convertis en degrés - const south = map.getBounds().getSouth() - marginInDegrees - const west = map.getBounds().getWest() - marginInDegrees - const north = map.getBounds().getNorth() + marginInDegrees - const east = map.getBounds().getEast() + marginInDegrees - let bounds = south + ',' + west + ',' + north + ',' + east - let resultUrl, query = '' + let baseUrl = 'https://overpass-api.de/api/interpreter'; + const kilometersMarginForLoading = 2; + const marginInDegrees = kilometersMarginForLoading / 111; + const south = map.getBounds().getSouth() - marginInDegrees; + const west = map.getBounds().getWest() - marginInDegrees; + const north = map.getBounds().getNorth() + marginInDegrees; + const east = map.getBounds().getEast() + marginInDegrees; + let bounds = south + ',' + west + ',' + north + ',' + east; + let resultUrl, query = ''; if (config.overrideQuery) { query = `?data=[out:json][timeout:15];( nwr[amenity=charging_station](${bounds}); - );out body geom;` + );out body geom;`; } else { - 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;' - + 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;'; } - resultUrl = baseUrl + query - return resultUrl + resultUrl = baseUrl + query; + return resultUrl; } -const margin_josm_bbox = 0.00001 -function createJOSMEditLink(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?changeset_hashtags=IRVE&layer_name=irve-depuis-OSM&left=${left}&top=${top}&right=${right}&bottom=${bottom}&select=${nodeId}` - return josmUrl -} function supprimerMarqueurs() { - all_stations_markers.clearLayers() - // stations_much_speed_wow.clearLayers() + all_stations_markers.clearLayers(); map.eachLayer((layer) => { if (layer instanceof L.Marker) { - layer.remove() + layer.remove(); } - }) + }); } let coef_reduction_bars = 0.8 @@ -193,72 +165,65 @@ function calculerPourcentage(partie, total, reduc) { } function displayStatsFromGeoJson(resultAsGeojson) { - - let count = resultAsGeojson.features.length - let count_station_output = 0 - let count_ref_eu = 0 - let output_more_than_300 = 0 - let output_more_than_200 = 0 - let output_more_than_100 = 0 - let output_more_than_50 = 0 - let count_station_outputoutput_between_1_and_50 = 0 - let count_output_unknown = 0 - let count_estimated_type2combo = 0 - let count_found_type2combo = 0 - let count_found_type2 = 0 + let count = resultAsGeojson.features.length; + let count_station_output = 0; + let count_ref_eu = 0; + let output_more_than_300 = 0; + let output_more_than_200 = 0; + let output_more_than_100 = 0; + let output_more_than_50 = 0; + let count_station_outputoutput_between_1_and_50 = 0; + let count_output_unknown = 0; + let count_estimated_type2combo = 0; + let count_found_type2combo = 0; + let count_found_type2 = 0; resultAsGeojson.features.map(feature => { - let found_type2_combo = false - // trouver si les tags présentent un type combo - let found_type2 = false - // trouver si les tags présentent un type 2 - let keys_of_object = Object.keys(feature.properties.tags) + let found_type2_combo = false; + let found_type2 = false; + let keys_of_object = Object.keys(feature.properties.tags); keys_of_object.map(tagKey => { - // console.log('tagKey', tagKey) if (tagKey.indexOf('type2_combo') !== -1) { - found_type2_combo = true - // console.log('tagkey trouvé combo', tagKey) + found_type2_combo = true; } if (tagKey.indexOf('type2') !== -1) { - found_type2 = true + found_type2 = true; } - }) - let outputPower = utils.guessOutputPowerFromFeature(feature) + }); + let outputPower = utils.guessOutputPowerFromFeature(feature); if (found_type2_combo) { - count_found_type2combo++ + count_found_type2combo++; } if (found_type2) { - count_found_type2++ + count_found_type2++; } if (outputPower == 0) { - count_output_unknown++ + count_output_unknown++; } if (outputPower >= 200 && !found_type2_combo) { - /** - * si on trouve une puissance supérieure à 200kW on peut partir du principe que la station dispose d'une prise type_2_combo à minima - */ - count_estimated_type2combo++ + count_estimated_type2combo++; } if (outputPower > 0 && outputPower < 50) { - count_station_outputoutput_between_1_and_50++ + count_station_outputoutput_between_1_and_50++; } if (outputPower >= 50 && outputPower < 100) { - output_more_than_50++ + output_more_than_50++; } else if (outputPower >= 100 && outputPower < 200) { - output_more_than_100++ + output_more_than_100++; } else if (outputPower >= 200 && outputPower < 300) { - output_more_than_200++ + output_more_than_200++; } else if (outputPower >= 300) { - feature.properties.puissance_haute = true - output_more_than_300++ + feature.properties.puissance_haute = true; + output_more_than_300++; } if (feature.properties.tags['charging_station:output']) { - count_station_output++ + count_station_output++; } if (feature.properties.tags['ref:EU:EVSE']) { - count_ref_eu++ + count_ref_eu++; } - }) + }); + let bar_powers = `
${count_output_unknown}
${count_station_outputoutput_between_1_and_50 ? count_station_outputoutput_between_1_and_50 : ''}
@@ -266,8 +231,7 @@ function displayStatsFromGeoJson(resultAsGeojson) {
${output_more_than_100 ? output_more_than_100 : ''}
${output_more_than_200 ? output_more_than_200 : '' | ''}
${output_more_than_300 ? output_more_than_300 : ''}
-
-` +`; let stats_content = `
@@ -307,35 +271,16 @@ function displayStatsFromGeoJson(resultAsGeojson) {
${calculerPourcentage(output_more_than_300, count)}%
-
` + `; - /** - - let stats_content = `
-Statistiques des ${count} stations trouvées:
-${count_station_output} (${calculerPourcentage(count_station_output, count)}%) ont une info de puissance max délivrée charging_station:output.
-${count_ref_eu} (${calculerPourcentage(count_ref_eu, count)}%) ont une référence européenne ref:EU:EVSE.
-${count_output_unknown} (${calculerPourcentage(count_output_unknown, count)}%) ont une puissance max inconnue *output*.
-${output_more_than_300} (${calculerPourcentage(output_more_than_300, count)}%) ont une puissance max supérieure à 300 kW *output*.
-${output_more_than_200} (${calculerPourcentage(output_more_than_200, count)}%) ont une puissance max supérieure à 200 kW *output*.
-${output_more_than_100} (${calculerPourcentage(output_more_than_100, count)}%) ont une puissance max supérieure à 100 kW *output*.
-${output_more_than_50} (${calculerPourcentage(output_more_than_50, count)}%) ont une puissance max supérieure à 50 kW *output*.
-${count_found_type2combo} (${calculerPourcentage(count_found_type2combo, count)}%) ont un prise combo définie *type2_combo*.
-${count_estimated_type2combo} (${calculerPourcentage(count_estimated_type2combo, count)}%) ont une prise combo présumée à partir de la puissance max trouvée mais non spécifiée *type2_combo*.
${count_found_type2} (${calculerPourcentage(count_found_type2, count)}%) ont un prise type2 définie *type2*.
-
` - * - */ - $('#found_charging_stations').html(stats_content) - $('#bars_power').html(bar_powers) + $('#found_charging_stations').html(stats_content); + $('#bars_power').html(bar_powers); } function bindEventsOnJosmRemote() { let josm_remote_buttons = $(`#sendToJOSM`) - // 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) }) @@ -344,45 +289,34 @@ function bindEventsOnJosmRemote() { function displayPointsFromApi(points) { - - if (points) { - geojsondata = osmtogeojson(points) + geojsondata = osmtogeojson(points); } - // console.log('resultAsGeojson', geojsondata) - displayStatsFromGeoJson(geojsondata) + displayStatsFromGeoJson(geojsondata); let resultLayer = L.geoJson(geojsondata, { style: function (feature) { - return {color: '#f00'} + return {color: '#f00'}; }, - /** - * enlever les polygones, ne garder que les points - * @param feature - * @param layer - * @returns {boolean} - */ filter: function (feature, layer) { - let 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) { - console.log('polygon feature', feature) - feature.geometry.type = 'Point' - let polygonCenter = L.latLngBounds(feature.geometry.coordinates[0]).getCenter() - feature.geometry.coordinates = [polygonCenter.lat, polygonCenter.lng] + feature.geometry.type = 'Point'; + let polygonCenter = L.latLngBounds(feature.geometry.coordinates[0]).getCenter(); + feature.geometry.coordinates = [polygonCenter.lat, polygonCenter.lng]; } - return true + return true; }, onmoveend: function (event) { - // console.log('déplacement terminé') + // console.log('déplacement terminé'); }, onzoomend: function (event) { - supprimerMarqueurs() - displayPointsFromApi() + supprimerMarqueurs(); + displayPointsFromApi(); }, onEachFeature: eachFeature, - }) - + }); } function makePopupOfFeature(feature) { @@ -423,85 +357,62 @@ function makePopupOfFeature(feature) { } function eachFeature(feature, layer) { + let link_josm = createJOSMEditLink(feature); - let link_josm = createJOSMEditLink(feature) + let popupContent = makePopupOfFeature(feature); + layer.bindPopup(popupContent); - let popupContent = makePopupOfFeature(feature) - layer.bindPopup(popupContent) - - let outPowerGuessed = utils.guessOutputPowerFromFeature(feature) - let color = colorUtils.getColor(feature) - let displayOutPowerGuessed = '? kW' + let outPowerGuessed = utils.guessOutputPowerFromFeature(feature); + let color = colorUtils.getColor(feature); + let displayOutPowerGuessed = '? kW'; if (outPowerGuessed) { - displayOutPowerGuessed = outPowerGuessed + ' kW max' + displayOutPowerGuessed = outPowerGuessed + ' kW max'; } if (!popupContent) { popupContent = ` Aucune information renseignée, -ajoutez la dans OpenStreetMap!` +ajoutez la dans OpenStreetMap!`; } - // boutons d'itinéraire let html = ` 🚗🚴‍♀️👠 -✏️JOSM ${displayOutPowerGuessed}${popupContent}` +✏️JOSM ${displayOutPowerGuessed}${popupContent}`; - let zoom = map.getZoom() - let radius = 20 - let opacity = 0.5 - let ratio_circle = 10 + let zoom = map.getZoom(); + let radius = 20; + let opacity = 0.5; + let ratio_circle = 10; - // quand on est loin, montrer d'avantage de couleur, pas le centre if (zoom < 13) { - ratio_circle = 5 + ratio_circle = 5; } else if (zoom < 15) { - ratio_circle = 1 - opacity = 0.25 + ratio_circle = 1; + opacity = 0.25; } else if (zoom <= 16) { - ratio_circle = 0.5 + ratio_circle = 0.5; } else if (zoom <= 18) { - ratio_circle = 0.25 + ratio_circle = 0.25; } - // console.log('ratio_circle', ratio_circle, feature.properties) - if (!layer._latlng) { - console.error('pas de latlng du layer', layer) - if (lastLatLng) { - layer._latlng = lastLatLng + if (!layer._latlng) { + if (lastLatLng) { + layer._latlng = lastLatLng; } } else { - console.log('layer._latlng', layer._latlng) - lastLatLng = layer._latlng + lastLatLng = layer._latlng; } if (!outPowerGuessed) { - radius = radius * ratio_circle + radius = radius * ratio_circle; } else { - radius = outPowerGuessed * ratio_circle + radius = outPowerGuessed * ratio_circle; } - // if (outPowerGuessed >= 300) { - // radius = 70 * ratio_circle - // } else if (outPowerGuessed >= 200) { - // radius = 60 * ratio_circle - // } else if (outPowerGuessed >= 100) { - // radius = 50 * ratio_circle - // } else if (outPowerGuessed >= 50) { - // radius = 40 * ratio_circle - // } else if (outPowerGuessed >= 20) { - // radius = 30 * ratio_circle - // } else if (outPowerGuessed >= 7) { - // radius = 20 * ratio_circle - // } - let circle = L.circle(layer._latlng, { color: color, fillColor: color, fillOpacity: opacity, colorOpacity: opacity, radius: radius - }).addTo(all_stations_markers) + }).addTo(all_stations_markers); - - // montrer les détails quand on est proche - // afficher moins de couleur, montrer le centre plus précis if (zoom > 15) { let circle_center = L.circle(layer._latlng, { color: 'black', @@ -509,34 +420,22 @@ function eachFeature(feature, layer) { fillOpacity: 1, radius: 0.1 }).addTo(all_stations_markers); - // if (!outPowerGuessed) { - // - // circle_center.bindTooltip("?", { - // permanent: true, - // className: "my-label", - // offset: [0, 0] - // }); - // } - // circle_center.addTo(all_stations_markers); - - } - - circle.bindPopup(html) + circle.bindPopup(html); circle.on({ mouseover: function () { - this.openPopup() - bindEventsOnJosmRemote() + this.openPopup(); + bindEventsOnJosmRemote(); }, mouseout: function () { - // setTimeout(() => this.closePopup(), 15000) + // setTimeout(() => this.closePopup(), 15000); }, click: function () { - this.openPopup() - bindEventsOnJosmRemote() + this.openPopup(); + bindEventsOnJosmRemote(); }, - }) + }); } function makeCssClassFromTags(tags) { @@ -563,52 +462,46 @@ function getIconFromTags(tags) { } function toggleMinPower(showHighPower) { - console.log('toggle', showHighPower) - showHighPower = !showHighPower - addFilteredMarkers(showHighPower) - this.textContent = showHighPower ? 'Montrer puissance haute' : 'Montrer puissance normale' + showHighPower = !showHighPower; + addFilteredMarkers(showHighPower); + this.textContent = showHighPower ? 'Montrer puissance haute' : 'Montrer puissance normale'; } function addFilteredMarkers(showHighPower) { - allMarkers.clearLayers() // Supprimer les marqueurs existants + allMarkers.clearLayers(); - console.log('addFilteredMarkers: clear des marqueurs fait') - let counter = 0 + let counter = 0; geojsondata.features.forEach(function (feature) { if (feature.properties.puissance_haute === showHighPower) { - counter++ - let marker = L.marker(feature.geometry.coordinates).bindPopup(feature.properties.puissance_haute ? 'Puissance haute' : 'Puissance normale') - allMarkers.addLayer(marker) + counter++; + let marker = L.marker(feature.geometry.coordinates).bindPopup(feature.properties.puissance_haute ? 'Puissance haute' : 'Puissance normale'); + allMarkers.addLayer(marker); } - }) - console.log('addFilteredMarkers: ', counter) + }); } let isLoading = false function loadOverpassQuery() { - - // ne pas charger si on recherche déjà if (!isLoading) { - isLoading = true - $('#spinning_icon').fadeIn() - let queryTextfieldValue = $('#query-textfield').val() - let overpassApiUrl = buildOverpassApiUrl(map, queryTextfieldValue) + isLoading = true; + $('#spinning_icon').fadeIn(); + let queryTextfieldValue = $('#query-textfield').val(); + let overpassApiUrl = buildOverpassApiUrl(map, queryTextfieldValue); $.get(overpassApiUrl, function (geoDataPointsFromApi) { - geojsondata = geoDataPointsFromApi - refreshDisplay() - $('#spinning_icon').fadeOut() - $('#message-loading').fadeOut() - isLoading = false - }) // end of the getting from overpass API + geojsondata = geoDataPointsFromApi; + refreshDisplay(); + $('#spinning_icon').fadeOut(); + $('#message-loading').fadeOut(); + isLoading = false; + }); } } function refreshDisplay() { - supprimerMarqueurs() - console.log('geojsondata', geojsondata) - displayPointsFromApi(geojsondata) + supprimerMarqueurs(); + displayPointsFromApi(geojsondata); } @@ -644,40 +537,34 @@ setCoordinatesOfLeafletMapFromQueryParameters() $(document).ready(function () { - bindEventsOnJosmRemote() - onMapMoveEnd() - map.on('moveend', onMapMoveEnd) - $('#spinning_icon').hide() - // $('#messageLoading').hide() + bindEventsOnJosmRemote(); + onMapMoveEnd(); + map.on('moveend', onMapMoveEnd); + $('#spinning_icon').hide(); $('#removeMarkers').on('click', function () { - supprimerMarqueurs() - }) + supprimerMarqueurs(); + }); $('#load').on('click', function () { - loadOverpassQuery() - }) + loadOverpassQuery(); + }); $('#toggleSidePanel').on('click', function () { - $('body').toggleClass('side-panel-open') - }) - // filtres - // boutons de toggle et de cycle de visibilité - // + $('body').toggleClass('side-panel-open'); + }); $('#chercherButton').on('click', function () { - supprimerMarqueurs() - loadOverpassQuery() - }) + supprimerMarqueurs(); + loadOverpassQuery(); + }); $('#setRandomView').on('click', function () { - setRandomView() - loadOverpassQuery() - }) + setRandomView(); + loadOverpassQuery(); + }); $('#filterUnkown').on('click', function () { - console.log('filterUnkown', filterUnkown) - display_unknown_max_power_station = cycleVariableState(display_unknown_max_power_station, '#filterUnkown') - showActiveFilter(display_unknown_max_power_station, '#filterUnkown') - refreshDisplay() - }) - showActiveFilter(display_unknown_max_power_station, '#filterUnkown') - -}) + display_unknown_max_power_station = cycleVariableState(display_unknown_max_power_station, '#filterUnkown'); + showActiveFilter(display_unknown_max_power_station, '#filterUnkown'); + refreshDisplay(); + }); + showActiveFilter(display_unknown_max_power_station, '#filterUnkown'); +}); function showActiveFilter(filterVariableName, selectorId) { $(selectorId).attr('class', 'filter-state-' + filterVariableName) @@ -796,12 +683,50 @@ function init() { }); document.getElementById('sendToJOSM').addEventListener('click', () => { - editor.sendToJOSM(map) - .then(() => { - alert('Données envoyées à JOSM avec succès !'); - }) - .catch(() => { - alert('Erreur : JOSM doit être ouvert avec l\'option "Contrôle à distance" activée'); - }); + sendToJOSM(map); }); + + $('#searchButton').on('click', searchLocation); + $('#shareUrl').on('click', copyCurrentUrl); + + document.getElementById('searchButton').addEventListener('click', searchLocation); +} + +function copyCurrentUrl() { + const url = window.location.href; + var dummy = document.createElement('input'), + text = window.location.href; + + document.body.appendChild(dummy); + dummy.value = text; + dummy.select(); + document.execCommand('copy'); + document.body.removeChild(dummy); +} + +function searchLocation() { + const location = document.getElementById('searchLocation').value; + if (!location) { + alert('Veuillez entrer un lieu à rechercher.'); + return; + } + + const url = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(location)}`; + + fetch(url) + .then(response => response.json()) + .then(data => { + if (data.length > 0) { + const place = data[0]; + const lat = parseFloat(place.lat); + const lon = parseFloat(place.lon); + map.setView([lat, lon], 13); // Ajustez le niveau de zoom selon vos besoins + } else { + alert('Lieu non trouvé. Veuillez essayer un autre terme de recherche.'); + } + }) + .catch(error => { + console.error('Erreur lors de la recherche du lieu :', error); + alert('Erreur lors de la recherche du lieu.'); + }); } diff --git a/js/utils.js b/js/utils.js index 93dee61..3406ae0 100644 --- a/js/utils.js +++ b/js/utils.js @@ -56,7 +56,7 @@ const utils = { } } } - console.log('outputPower', outputPower) + feature.properties.outputPower = outputPower return outputPower }, diff --git a/styles/style.css b/styles/style.css index 1c2022e..13ca87c 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,7 +1,26 @@ +:root { + --background-color: #222; + --text-color: #ddd; + --icon-background: white; + --icon-border: cornflowerblue; + --button-background: #497cd3; + --button-hover-background: #0d377b; + --button-border: #497cd3ff; + --link-color: #38f; + --popup-background: white; + --zoom-message-background: rgba(255, 255, 255, 0.9); + --zoom-message-border: #ff0000; + --color-indication-background: #c0b1b1; + --no-data-border: dodgerblue; + --no-data-link-color: dodgerblue; + --food-marker-color: #fff; +} + html, body { height: 100%; width: 100%; - background: #222; + background: var(--background-color); + box-sizing: border-box; } body { @@ -31,7 +50,7 @@ p { #heading { background: #000; - color: #ddd; + color: var(--text-color); min-height: 5%; height: 4rem; width: 100%; @@ -43,11 +62,12 @@ p { height: 0.25rem !important; display: inline-block; margin-right: 1rem; - background: white; + background: var(--icon-background); border-radius: 100%; padding: 0.25rem; margin-top: -0.5rem; float: left; + border-color: var(--icon-border); } .title { @@ -86,16 +106,17 @@ img.leaflet-marker-icon.tag-socket\:type2_yes { .rounded-button, .navigation-link, .edit-button { - background: #497cd3; + background: var(--button-background); padding: 0.5em 1em; border-radius: 2em; color: white !important; - border: solid 1px #497cd3ff; + border: solid 1px var(--button-border); float: right; } .side-panel button { - min-width: 10em; + min-width: 15em; + margin-bottom: 0.5em; } .navigation-link { @@ -114,7 +135,7 @@ img.leaflet-marker-icon.tag-socket\:type2_yes { button:hover, .edit-button:hover { - background: #0d377b; + background: var(--button-hover-background); border: solid 1px #08285c; cursor: pointer; } @@ -139,12 +160,12 @@ button:hover, } a { - color: #38f; + color: var(--link-color); } .leaflet-control-custom { padding: 1rem; - background: white; + background: var(--popup-background); } #spinning_icon { @@ -226,21 +247,21 @@ a { } .no-data { - border-left: 3px solid dodgerblue; + border-left: 3px solid var(--no-data-border); padding: 1em 2rem; min-height: 4rem; } .no-data a { - color: dodgerblue; + color: var(--no-data-link-color); } /** marqueurs */ .marker-demo { - margin-right: 3rem; + margin-right: 1rem; } .map-marker-circle-demo { @@ -252,7 +273,7 @@ marqueurs } .color-unknown { - background: #c0b1b1; + background: var(--color-indication-background); } @@ -343,7 +364,6 @@ button { button + button{ margin-left: 1rem; - } .filter-group button{ padding: 1rem 2rem; @@ -391,7 +411,7 @@ button + button{ left: 0; top: 0; width: 20vw; - height: 100vh; + height: 74vh; background: white; box-shadow: -2px 0 5px rgba(0,0,0,0.2); overflow-y: auto; @@ -431,13 +451,13 @@ header{ bottom: 5rem; left: 50%; transform: translateX(-50%); - background: rgba(255,255,255,0.9); + background: var(--zoom-message-background); padding: 1rem 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); text-align: center; z-index: 10; - border-left: 4px solid #ff0000; + border-left: 4px solid var(--zoom-message-border); animation: rainbow-border 4s linear infinite; } @@ -452,6 +472,65 @@ header img{ float: left; margin-right: 1rem; } + + +#map { + z-index: 1; + top: 5.55rem; +} +.side-panel #map{ + margin-left: 20vw; +} + + +.rounded-button { + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 1rem; + cursor: pointer; + transition: background-color 0.3s; +} + +.rounded-button:hover { + background-color: #0d377b; +} +/* Style pour mobile */ +@media (max-width: 1200px) { + body{ + /* border: solid 3px blue; */ + } + .side-panel { + margin: 0; + position: static; + width: 95%; + height: auto; + transform: none; + box-shadow: 0 -2px 5px rgba(0,0,0,0.2); + margin-top: 20px; + } + + .side-panel.active { + transform: none; + } + .side-panel-open #map, + #map { + margin: 0; + left: 0; + top: 0; + width: 100vw; + height: 90vh; + height: 55vh; + } + header{ + position: static; + } + #toggleSidePanel{ + + right: 4.6rem; + top: 1.3rem; + } +} @keyframes rainbow-border { 0% { border-left-color: #ff0000; } 17% { border-left-color: #ff8000; } @@ -462,30 +541,10 @@ header img{ 100% { border-left-color: #ff0000; } } -#map { - z-index: 1; - top: 5.55rem; -} -.side-panel #map{ - margin-left: 20vw; -} - -/* Style pour mobile */ -@media (max-width: 768px) { - .side-panel { - position: static; - width: 100%; - height: auto; - transform: none; - box-shadow: 0 -2px 5px rgba(0,0,0,0.2); - margin-top: 20px; - } - - .side-panel.active { - transform: none; - } - - #map { - margin-right: 0; - } +.search-input { + width: calc(100% - 40px); + padding: 10px; + margin-bottom: 10px; + border: 1px solid var(--button-border); + border-radius: 5px; } \ No newline at end of file