diff --git a/index.html b/index.html index e5c0773..4bdc540 100644 --- a/index.html +++ b/index.html @@ -144,16 +144,29 @@
qualité +
+
+ WIP: + mapcomplete + JOSM + id +
+ + + i + mettre un marqueur aux stations qui n'ont pas d'information de câble + +
- - - - - - - + + + + + + + diff --git a/js/lcm_main.js b/js/lcm_main.js index 11556f0..6e6d8dc 100644 --- a/js/lcm_main.js +++ b/js/lcm_main.js @@ -38,6 +38,7 @@ let filters_features = { let display_type2_sockets = 'show'; let display_type2_combo_sockets = 'show'; let display_unknown_max_power_station = 'show'; +let display_alert_cable_missing = 'show'; let display_known_max_power_station = 'show'; let display_type2_combo_sockets_with_cable = 'show'; let display_lower_than_50kw = 'show'; @@ -75,6 +76,7 @@ function updateURLWithMapCoordinatesAndZoom() { const url = `#coords=1&lat=${center.lat}&lng=${center.lng}&zoom=${zoom}` // Met à jour l'URL de la page history.replaceState(null, null, url) + updateExternalEditorsLinks() } @@ -363,6 +365,11 @@ function makePopupOfFeature(feature) { return popupContent; } +/** + * application des filtres dans la sélection des bornes à afficher + * @param feature + * @param layer + */ function eachFeature(feature, layer) { let link_josm = createJOSMEditLink(feature); @@ -384,6 +391,9 @@ function eachFeature(feature, layer) { return; } } + /** + * bornes sans informations, suggérer d'ajouter des tags dans OSM + */ if (!popupContent) { popupContent = ` Aucune information renseignée, ajoutez la dans OpenStreetMap!`; @@ -442,6 +452,47 @@ function eachFeature(feature, layer) { radius = outPowerGuessed * ratio_circle; } + + /** + * 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) + + let keys = Object.keys(feature.properties) + console.log('feature.properties', keys) + if(keys.indexOf('type2_cable') === -1 ){ + let circle_alert = L.circle(layer._latlng, { + color: 'red', + fillColor: 'orange', + fillOpacity: 1, + colorOpacity: 0.5, + radius: 20 + }) + + circle_alert.bindPopup("information de câble manquante"); + circle_alert.on({ + mouseover: function () { + this.openPopup(); + bindEventsOnJosmRemote(); + }, + mouseout: function () { + // setTimeout(() => this.closePopup(), 15000); + }, + click: function () { + this.openPopup(); + bindEventsOnJosmRemote(); + }, + }); + + circle_alert.addTo(all_stations_markers); + } + } + + /** + * affichage des marqueurs de stations de recharge + */ let circle = L.circle(layer._latlng, { color: color, fillColor: color, @@ -473,6 +524,7 @@ function eachFeature(feature, layer) { bindEventsOnJosmRemote(); }, }); + } function makeCssClassFromTags(tags) { @@ -564,6 +616,7 @@ function onMapMoveEnd() { if (!window.lastKnownPosition) { window.lastKnownPosition = center; updateURLWithMapCoordinatesAndZoom(); + } else { // Calculer la distance en km entre l'ancienne et la nouvelle position const distanceKm = map.distance(center, window.lastKnownPosition) / 1000; @@ -585,6 +638,10 @@ $(document).ready(function () { onMapMoveEnd(); map.on('moveend', onMapMoveEnd); $('#spinning_icon').hide(); + + /** + * boutons de changement de filtres et de rechargement des bornes à l'affichage + */ $('#removeMarkers').on('click', function () { supprimerMarqueurs(); }); @@ -607,6 +664,14 @@ $(document).ready(function () { showActiveFilter(display_unknown_max_power_station, '#filterUnkown'); refreshDisplay(); }); + /** + * toggle des alertes de tags décrivant la présence de cable + */ + $('#cableMissing').on('click', function () { + display_alert_cable_missing = ! display_alert_cable_missing; + showActiveFilter(display_alert_cable_missing, '#cableMissing'); + refreshDisplay(); + }); showActiveFilter(display_unknown_max_power_station, '#filterUnkown'); }); @@ -614,6 +679,28 @@ function showActiveFilter(filterVariableName, selectorId) { $(selectorId).attr('class', 'filter-state-' + filterVariableName) } +/** + * mettre à jour les liens vers des éditeurs externes + */ +function updateExternalEditorsLinks(){ + + const center = map.getCenter() + const zoom = map.getZoom() + + 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 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) +} + function cycleVariableState(filterVariableName, selectorId) { console.log('filterVariableName', filterVariableName, filterStatesAvailable) @@ -728,6 +815,15 @@ function init() { alert('Erreur : JOSM doit être ouvert avec l\'option "Contrôle à distance" activée'); }); }); + $('#josmLink').on('click', () => { + sendToJOSM(map, geojsondata) + .then(() => { + console.log('Données envoyées à JOSM avec succès !'); + }) + .catch(() => { + alert('Erreur : JOSM doit être ouvert avec l\'option "Contrôle à distance" activée'); + }); + }); $('#searchButton').on('click', searchLocation); $('#shareUrl').on('click', copyCurrentUrl); diff --git a/styles/main.scss b/styles/main.scss index 372cb01..94556cf 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -1,19 +1,19 @@ :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; + --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; } * { @@ -255,9 +255,6 @@ a { } .color-indication { - min-width: 1rem; - max-width: 5rem; - height: 1rem; padding: 1rem; border-radius: 2rem; display: block; @@ -266,6 +263,10 @@ a { color: white; text-shadow: 0 0 0.5rem #222; clear: right; + min-width: 7rem; + max-width: 5rem; + height: 3rem; + } .no-data { @@ -474,6 +475,7 @@ header { #map { margin-left: 28.8vw; top: 5.55rem; + width: 71.2vw; } } @@ -571,6 +573,29 @@ header { margin-right: 1rem; } +.info { + + .i{ + border-radius:100%; + background: #dedede; + padding: 1ch; + width: 5ch; + margin-left: 1ch; + display: inline-block; + text-align: center; + } + .tooltip { + opacity: 0 + } + + &:hover { + .tooltip { + opacity: 1; + transition: opacity 0.3s ease-in-out; + } + } +} + /** overrides leaflet */ @@ -616,6 +641,7 @@ overrides leaflet height: 55vh; } + header { position: static; } diff --git a/styles/style.css b/styles/style.css index 7edc52b..677412d 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,19 +1,19 @@ :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; + --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; } * { @@ -248,9 +248,6 @@ a { } .color-indication { - min-width: 1rem; - max-width: 5rem; - height: 1rem; padding: 1rem; border-radius: 2rem; display: block; @@ -259,6 +256,9 @@ a { color: white; text-shadow: 0 0 0.5rem #222; clear: right; + min-width: 7rem; + max-width: 5rem; + height: 3rem; } .no-data { @@ -456,6 +456,7 @@ header { .side-panel-open #map { margin-left: 28.8vw; top: 5.55rem; + width: 71.2vw; } #infos_carte { @@ -548,6 +549,23 @@ header img { margin-right: 1rem; } +.info .i { + border-radius: 100%; + background: #dedede; + padding: 1ch; + width: 5ch; + margin-left: 1ch; + display: inline-block; + text-align: center; +} +.info .tooltip { + opacity: 0; +} +.info:hover .tooltip { + opacity: 1; + transition: opacity 0.3s ease-in-out; +} + /** overrides leaflet */ diff --git a/styles/style.css.map b/styles/style.css.map index 9d6b59a..3984706 100644 --- a/styles/style.css.map +++ b/styles/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EAOE;;AANA;EACE;EACA;EACA;;;AAMJ;EACE;;;AAGF;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ;AAAA;AAAA;AAIA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAIA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AACA;EACE;IACE;IACA;;EAGF;IACE;IACA;;EAGF;AACE;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EAOE;;AANA;EACE;EACA;EACA;;;AAMJ;EACE;;;AAGF;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ;AAAA;AAAA;AAIA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAIA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;;;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAIA;EACE;EACA;;;AAKN;AAAA;AAAA;AAIA;EACE;;;AAGF;AACA;EACE;IACE;IACA;;EAGF;IACE;IACA;;EAGF;AACE;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;;EAIF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE","file":"style.css"} \ No newline at end of file