mirror of
https://forge.chapril.org/tykayn/libre-charge-map
synced 2025-06-20 01:34:43 +02:00
up style detail
This commit is contained in:
Tykayn
tykayn
parent
6ac7a95020
commit
7c809b9629
3 changed files with 93 additions and 60 deletions
|
|
@ -22,7 +22,7 @@ const lcm_color_utils = {
|
|||
getColor: (feature) => {
|
||||
|
||||
let outputPower = lcm_utils.guessOutputPowerFromFeature(feature)
|
||||
feature.properties.tags.has_output_of_irve_specified = outputPower
|
||||
// feature.properties.tags.has_output_of_irve_specified = outputPower
|
||||
if (outputPower) {
|
||||
|
||||
if (outputPower > max_out_legit_power) {
|
||||
|
|
|
|||
131
js/lcm_main.js
131
js/lcm_main.js
|
|
@ -7,7 +7,8 @@
|
|||
import lcm_config from './lcm_config.js'
|
||||
import lcm_utils from './lcm_utils.js'
|
||||
import lcm_color_utils from './lcm_color_utils.js'
|
||||
import { sendToJOSM, createJOSMEditLink } from './lcm_editor.js'
|
||||
import {sendToJOSM, createJOSMEditLink} from './lcm_editor.js'
|
||||
|
||||
let geojsondata;
|
||||
let lastLatLng;
|
||||
|
||||
|
|
@ -33,7 +34,7 @@ L.control.scale().addTo(map)
|
|||
let filterStatesAvailable = ['hide', 'show', 'showOnly']
|
||||
|
||||
let filters_features = {
|
||||
display_unknown_max_power_station : filterStatesAvailable[1]
|
||||
display_unknown_max_power_station: filterStatesAvailable[1]
|
||||
}
|
||||
let display_type2_sockets = 'show';
|
||||
let display_type2_combo_sockets = 'show';
|
||||
|
|
@ -141,8 +142,7 @@ function buildOverpassApiUrl(map, overpassQuery) {
|
|||
}
|
||||
resultUrl = baseUrl + query;
|
||||
return resultUrl;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function supprimerMarqueurs() {
|
||||
|
|
@ -182,7 +182,7 @@ function displayStatsFromGeoJson(resultAsGeojson) {
|
|||
let count_found_type2combo = 0;
|
||||
let count_found_type2 = 0;
|
||||
|
||||
$('#count_features_fond').html('⚡'+count+' stations');
|
||||
$('#count_features_fond').html('⚡' + count + ' stations');
|
||||
|
||||
resultAsGeojson.features.map(feature => {
|
||||
let found_type2_combo = false;
|
||||
|
|
@ -381,13 +381,12 @@ function eachFeature(feature, layer) {
|
|||
let displayOutPowerGuessed = '? kW';
|
||||
if (outPowerGuessed) {
|
||||
displayOutPowerGuessed = outPowerGuessed + ' kW max';
|
||||
if(display_unknown_max_power_station === 'show_only'){
|
||||
if (display_unknown_max_power_station === 'show_only') {
|
||||
return;
|
||||
}
|
||||
}
|
||||
else{
|
||||
} else {
|
||||
// on cache cette station si on ne veut pas voir les stations à la puissance inconnue
|
||||
if(display_unknown_max_power_station === 'hide'){
|
||||
if (display_unknown_max_power_station === 'hide') {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
|
@ -403,7 +402,6 @@ function eachFeature(feature, layer) {
|
|||
const panoramaxLink = `https://api.panoramax.xyz/#focus=map&map=16.7/${feature.geometry.coordinates[1]}/${feature.geometry.coordinates[0]}&speed=250`;
|
||||
|
||||
|
||||
|
||||
let html = ` <a href="https://www.openstreetmap.org/directions?from=&to=${feature.geometry.coordinates[1]},${feature.geometry.coordinates[0]}&engine=fossgis_osrm_car#map=14/${feature.geometry.coordinates[1]}/${feature.geometry.coordinates[0]}" class="navigation-link by-car" title="itinéraire en voiture vers cette station"> 🚗</a>
|
||||
<a href="https://www.openstreetmap.org/directions?from=&to=${feature.geometry.coordinates[1]},${feature.geometry.coordinates[0]}&engine=fossgis_osrm_bike#map=14/${feature.geometry.coordinates[1]}/${feature.geometry.coordinates[0]}" class="navigation-link by-car" title="itinéraire en vélo vers cette station">🚴♀️</a>
|
||||
<a href="https://www.openstreetmap.org/directions?from=&to=${feature.geometry.coordinates[1]},${feature.geometry.coordinates[0]}&engine=fossgis_osrm_foot#map=14/${feature.geometry.coordinates[1]}/${feature.geometry.coordinates[0]}" class="navigation-link by-car" title="itinéraire à pied vers cette station">👠</a>
|
||||
|
|
@ -412,7 +410,7 @@ function eachFeature(feature, layer) {
|
|||
<a href="${panoramaxLink}" target="_blank" class="panoramax-link" title="Voir sur Panoramax">
|
||||
<img src="styles/images/panoramax.ico" alt="icone"></a>
|
||||
<span class="color-indication" style="background-color: ${color};">${displayOutPowerGuessed}</span>
|
||||
<button id="fullDetails" >détails</button>
|
||||
<button class="edit-button" id="fullDetails" >détails</button>
|
||||
<span class="popup-content">${popupContent}</span>`;
|
||||
|
||||
let zoom = map.getZoom();
|
||||
|
|
@ -445,9 +443,9 @@ function eachFeature(feature, layer) {
|
|||
* limiter la taille du cercle pour les valeurs aberrantes
|
||||
* les mettre en valeur en les plafonnant à 1 de plus que le maximum attendu en lcm_config
|
||||
*/
|
||||
if(outPowerGuessed> lcm_config.max_possible_station_output ){
|
||||
console.error("valeur suspecte outPowerGuessed",outPowerGuessed, feature)
|
||||
outPowerGuessed = lcm_config.max_possible_station_output +1
|
||||
if (outPowerGuessed > lcm_config.max_possible_station_output) {
|
||||
console.error("valeur suspecte outPowerGuessed", outPowerGuessed, feature)
|
||||
outPowerGuessed = lcm_config.max_possible_station_output + 1
|
||||
}
|
||||
|
||||
radius = outPowerGuessed * ratio_circle;
|
||||
|
|
@ -458,15 +456,13 @@ function eachFeature(feature, layer) {
|
|||
* gestion des marqueurs d'alertes
|
||||
*/
|
||||
// info de câble manquant
|
||||
if(display_alert_cable_missing){
|
||||
console.log('display_alert_cable_missing', display_alert_cable_missing)
|
||||
if (display_alert_cable_missing) {
|
||||
|
||||
let keys = Object.keys(feature.properties)
|
||||
console.log('feature.properties', keys)
|
||||
/**
|
||||
* on considère l'information de câble manquante uniquement dans le cas où une info de socket de type 2 est présente mais pas le tag socket:type2_cable.
|
||||
*/
|
||||
if(keys.indexOf('socket:type2') !==-1 && keys.indexOf('socket:type2_cable') === -1 ){
|
||||
if (keys.indexOf('socket:type2') !== -1 && keys.indexOf('socket:type2_cable') === -1) {
|
||||
let circle_alert = L.circle(layer._latlng, {
|
||||
color: 'red',
|
||||
fillColor: 'orange',
|
||||
|
|
@ -524,6 +520,7 @@ function eachFeature(feature, layer) {
|
|||
mouseover: function () {
|
||||
this.openPopup();
|
||||
bindEventsOnJosmRemote();
|
||||
bindFullDetails(feature);
|
||||
},
|
||||
mouseout: function () {
|
||||
// setTimeout(() => this.closePopup(), 15000);
|
||||
|
|
@ -531,17 +528,37 @@ function eachFeature(feature, layer) {
|
|||
click: function () {
|
||||
this.openPopup();
|
||||
bindEventsOnJosmRemote();
|
||||
bindFullDetails(feature);
|
||||
},
|
||||
});
|
||||
|
||||
}
|
||||
function bindFullDetails(feature){
|
||||
|
||||
$('#fullDetails'.on('click', ()=>{
|
||||
function bindFullDetails(feature) {
|
||||
|
||||
$('#current_station_infos').html('<pre>'+feature.properties+'</pre>')
|
||||
}))
|
||||
$('#fullDetails').on('click', () => {
|
||||
console.log('details', feature)
|
||||
console.log("$('#current_station_infos')", $('#current_station_infos')[0])
|
||||
|
||||
let content = '<table>' +
|
||||
'<tbody>' + ''
|
||||
|
||||
let ii=0
|
||||
let keys = Object.keys(feature.properties.tags)
|
||||
keys.forEach( (elem, val) => {
|
||||
console.log('elem, val', elem, val)
|
||||
content += '<tr><td>'+elem+'</td><td>'+feature.properties.tags[elem]+'</td></tr>';
|
||||
ii++;
|
||||
})
|
||||
content += '</tbody>' +
|
||||
'</table>'
|
||||
|
||||
console.log('content', content)
|
||||
$('#current_station_infos')[0].innerHTML = `<h2>Détails</h2>
|
||||
${content}`
|
||||
})
|
||||
}
|
||||
|
||||
function makeCssClassFromTags(tags) {
|
||||
let tagKeys = Object.keys(tags)
|
||||
if (!tags) {
|
||||
|
|
@ -603,9 +620,9 @@ function loadOverpassQuery() {
|
|||
}
|
||||
}
|
||||
|
||||
function refreshDisplay(convert_points_to_osm=false) {
|
||||
function refreshDisplay(convert_points_to_osm = false) {
|
||||
supprimerMarqueurs();
|
||||
displayPointsFromApi(geojsondata,convert_points_to_osm);
|
||||
displayPointsFromApi(geojsondata, convert_points_to_osm);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -635,7 +652,7 @@ function onMapMoveEnd() {
|
|||
} else {
|
||||
// Calculer la distance en km entre l'ancienne et la nouvelle position
|
||||
const distanceKm = map.distance(center, window.lastKnownPosition) / 1000;
|
||||
|
||||
|
||||
// Ne mettre à jour que si on s'est déplacé de plus de 2km
|
||||
if (distanceKm > 2) {
|
||||
window.lastKnownPosition = center;
|
||||
|
|
@ -683,7 +700,7 @@ $(document).ready(function () {
|
|||
* toggle des alertes de tags décrivant la présence de cable
|
||||
*/
|
||||
$('#cableMissing').on('click', function () {
|
||||
display_alert_cable_missing = ! display_alert_cable_missing;
|
||||
display_alert_cable_missing = !display_alert_cable_missing;
|
||||
showActiveFilter(display_alert_cable_missing, '#cableMissing');
|
||||
refreshDisplay();
|
||||
});
|
||||
|
|
@ -697,21 +714,22 @@ function showActiveFilter(filterVariableName, selectorId) {
|
|||
/**
|
||||
* mettre à jour les liens vers des éditeurs externes
|
||||
*/
|
||||
function updateExternalEditorsLinks(){
|
||||
function updateExternalEditorsLinks() {
|
||||
|
||||
const center = map.getCenter()
|
||||
const zoom = map.getZoom()
|
||||
|
||||
mapCompleteLink(center.lat,center.lng,zoom)
|
||||
idLink(center.lat,center.lng,zoom)
|
||||
mapCompleteLink(center.lat, center.lng, zoom)
|
||||
idLink(center.lat, center.lng, zoom)
|
||||
|
||||
}
|
||||
function mapCompleteLink(lat,lon,zoom){
|
||||
$("mapCompleteLink").attr('href', `https://mapcomplete.org/charging_stations?z=${zoom}&lat=${lat}&lon=${lon}`)
|
||||
|
||||
function mapCompleteLink(lat, lon, zoom) {
|
||||
$("mapCompleteLink").attr('href', `https://mapcomplete.org/charging_stations?z=${zoom}&lat=${lat}&lon=${lon}`)
|
||||
}
|
||||
|
||||
function idLink(lat,lon,zoom){
|
||||
let href= `https://www.openstreetmap.org/edit?editor=id#map=${zoom}/${lat}/${lon}`
|
||||
function idLink(lat, lon, zoom) {
|
||||
let href = `https://www.openstreetmap.org/edit?editor=id#map=${zoom}/${lat}/${lon}`
|
||||
console.log('idlink', href)
|
||||
$("idLink").attr('href', href)
|
||||
}
|
||||
|
|
@ -737,15 +755,15 @@ function cycleVariableState(filterVariableName, selectorId) {
|
|||
}
|
||||
|
||||
// toggle des stats
|
||||
$('#toggle-stats').on('click', function() {
|
||||
$('#toggle-stats').on('click', function () {
|
||||
$('#found_charging_stations').slideToggle();
|
||||
|
||||
|
||||
// Change le symbole de la flèche
|
||||
let text = $(this).text();
|
||||
if(text.includes('🔽')) {
|
||||
if (text.includes('🔽')) {
|
||||
$(this).text(text.replace('🔽', '🔼'));
|
||||
} else {
|
||||
$(this).text(text.replace('🔼', '🔽'));
|
||||
$(this).text(text.replace('🔼', '🔽'));
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -762,7 +780,7 @@ const foodIcon = L.divIcon({
|
|||
function searchFoodPlaces(map) {
|
||||
const bounds = map.getBounds();
|
||||
const bbox = bounds.getSouth() + ',' + bounds.getWest() + ',' + bounds.getNorth() + ',' + bounds.getEast();
|
||||
|
||||
|
||||
const query = `
|
||||
[out:json][timeout:25];
|
||||
(
|
||||
|
|
@ -786,17 +804,17 @@ function searchFoodPlaces(map) {
|
|||
const properties = feature.properties;
|
||||
const name = properties.tags.name || 'Sans nom';
|
||||
const type = properties.tags.amenity;
|
||||
|
||||
|
||||
const marker = L.marker([coords[1], coords[0]], {
|
||||
icon: foodIcon
|
||||
});
|
||||
|
||||
|
||||
marker.bindPopup(`
|
||||
<strong>${name}</strong><br>
|
||||
Type: ${type}<br>
|
||||
${properties.tags.cuisine ? 'Cuisine: ' + properties.tags.cuisine : ''}
|
||||
`);
|
||||
|
||||
|
||||
food_places_markers.addLayer(marker);
|
||||
});
|
||||
})
|
||||
|
|
@ -816,10 +834,9 @@ function init() {
|
|||
"Stations de recharge": all_stations_markers,
|
||||
"Restaurants et cafés": food_places_markers
|
||||
};
|
||||
|
||||
|
||||
L.control.layers(null, overlayMaps).addTo(map);
|
||||
|
||||
|
||||
|
||||
$('#sendToJOSM').on('click', () => {
|
||||
sendToJOSM(map, geojsondata)
|
||||
|
|
@ -848,10 +865,10 @@ function init() {
|
|||
|
||||
|
||||
function copyCurrentUrl() {
|
||||
const url = window.location.href;
|
||||
const url = window.location.href;
|
||||
var dummy = document.createElement('input'),
|
||||
text = window.location.href;
|
||||
|
||||
text = window.location.href;
|
||||
|
||||
document.body.appendChild(dummy);
|
||||
dummy.value = text;
|
||||
dummy.select();
|
||||
|
|
@ -862,7 +879,7 @@ function copyCurrentUrl() {
|
|||
function searchLocation(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
|
||||
const location = document.getElementById('searchLocation').value;
|
||||
if (!location) {
|
||||
alert('Veuillez entrer un lieu à rechercher.');
|
||||
|
|
@ -872,13 +889,13 @@ function searchLocation(event) {
|
|||
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
|
||||
.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.');
|
||||
}
|
||||
|
|
@ -887,6 +904,6 @@ function searchLocation(event) {
|
|||
console.error('Erreur lors de la recherche du lieu :', error);
|
||||
alert('Erreur lors de la recherche du lieu.');
|
||||
});
|
||||
}
|
||||
|
||||
init()
|
||||
}
|
||||
|
||||
init()
|
||||
|
|
@ -56,6 +56,21 @@ p {
|
|||
border: solid 2px;
|
||||
}
|
||||
|
||||
|
||||
table {
|
||||
tr {
|
||||
td {
|
||||
border-bottom: #ccc 1px solid;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
tr:nth-of-type(odd) {
|
||||
background: #dedede;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.padded {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
|
@ -575,8 +590,8 @@ header {
|
|||
|
||||
.info {
|
||||
|
||||
.i{
|
||||
border-radius:100%;
|
||||
.i {
|
||||
border-radius: 100%;
|
||||
background: #dedede;
|
||||
padding: 1ch;
|
||||
width: 5ch;
|
||||
|
|
@ -584,6 +599,7 @@ header {
|
|||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
opacity: 0
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue