display ? on unknown

index.html

@@ -119,24 +119,24 @@
             <button id="filterUnkown">kW max inconnu</button>
             <button id="filterChelou">les valeurs chelou</button>
         </div>
-        <div class="filter-group">
+<!--        TODO add more filters-->
-            prise:
+<!--        <div class="filter-group">-->
-            <button id="filterType2">type 2</button>
+<!--            prise:-->
-            <button id="filterType2_cable">type 2 avec câble</button>
+<!--            <button id="filterType2">type 2</button>-->
-            <button id="filterType2_combo">type CCS</button>
+<!--            <button id="filterType2_cable">type 2 avec câble</button>-->
-            <button id="filterType2_combo_cable">type CCS avec câble</button>
+<!--            <button id="filterType2_combo">type CCS</button>-->
-        </div>
+<!--            <button id="filterType2_combo_cable">type CCS avec câble</button>-->
-        <div class="filter-group">
+<!--        </div>-->
-
+<!--        <div class="filter-group">-->
-            puissance:
+<!--            puissance:-->
-            <button id="filterLower50kw">- de 50kW</button>
+<!--            <button id="filterLower50kw">- de 50kW</button>-->
-            <button id="filterUpper50kw">+ de 50kW</button>
+<!--            <button id="filterUpper50kw">+ de 50kW</button>-->
-            <button id="filterLower200kw">- de 200 kW</button>
+<!--            <button id="filterLower200kw">- de 200 kW</button>-->
-            <button id="filterUpper200kw">+ de 200 kW</button>
+<!--            <button id="filterUpper200kw">+ de 200 kW</button>-->
-            <button class="button" id="toggle_high_power">
+<!--            <button class="button" id="toggle_high_power">-->
-                fais voir les plus de 300kW CCS, j'ai pas le time!
+<!--                fais voir les plus de 300kW CCS, j'ai pas le time!-->
-            </button>
+<!--            </button>-->
-        </div>
+<!--        </div>-->
         <br>
         <!--        TODO filtrer les bornes selon la puissance -->
 

js/config.js

@@ -2,6 +2,13 @@ const config = {
 	osmMention:'&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
 	showHighPower : true,
 	overrideQuery : true,
-	initialZoom : 12
+	initialZoom : 12,
+	tileServers:{
+		osm : 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+		cycle : 'https://{s}.tile.opencyclemap.org/{z}/{x}/{y}.png',
+		cartodb : 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
+		stamen : 'https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',
+		transport : 'https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png'
+	}
 }
 export default config

js/main.js

@@ -11,13 +11,15 @@ import colorUtils from './color-utils.js'
 console.log('config', config)
 let geojsondata
 
+
+
+
 // serveurs de tuiles: https://wiki.openstreetmap.org/wiki/Tile_servers
 // https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png
 // https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png
 // https://tile.openstreetmap.org/{z}/{x}/{y}.png
 // 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'
-const tileServer = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'
+
-const tileServer_stamen = 'https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png'
 
 // Créer la carte centrée sur Rouen
 // Liste des 20 villes les plus peuplées de France avec leurs coordonnées géographiques
@@ -31,6 +33,8 @@ L.control.scale().addTo(map)
  * à appliquer à chaque rafraîchissement des points geojson
  * TODO: make buttons and filter in refresh circles
  */
+let filterStatesAvailable = ['hide', 'show', 'showOnly']
+
 let display_type2_sockets = 'show';
 let display_type2_combo_sockets = 'show';
 let display_unknown_max_power_station = 'show';
@@ -42,7 +46,6 @@ let display_lower_than_200kw = 'show';
 let display_higer_than_200kw = 'show';
 let display_chelou = 'show'; // les stations avec une valeur suspecte, plus de 400kW
 
-let filterStatesAvailable = ['hide', 'show', 'showOnly']
 
 function setRandomView() {
     console.log('set random view')
@@ -81,29 +84,28 @@ function updateURLWithMapCoordinatesAndZoom() {
 
     // Construit l'URL avec les paramètres de coordonnées et de zoom
     const url = `#coords=1&lat=${center.lat}&lng=${center.lng}&zoom=${zoom}`
-    // console.log('updateURLWithMapCoordinatesAndZoom url', url)
     // Met à jour l'URL de la page
     history.replaceState(null, null, url)
 }
 
-var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+var osm = L.tileLayer(config.tileServers.osm, {
     attribution: config.osmMention + '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
 })
 
-var cycle = L.tileLayer('https://{s}.tile.opencyclemap.org/{z}/{x}/{y}.png', {
+var cycle = L.tileLayer(config.tileServers.cycle, {
     attribution: config.osmMention + '&copy; <a href="https://www.opencyclemap.org/">OpenCycleMap</a> contributors'
 })
 
-var transport = L.tileLayer('https://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png', {
+var transport = L.tileLayer(config.tileServers.transport, {
     attribution: config.osmMention
 })
 
 let tileGrey =
-    L.tileLayer(tileServer, {
+    L.tileLayer(config.tileServers.cartodb, {
         attribution: config.osmMention
     })
 let stamen =
-    L.tileLayer(tileServer_stamen, {
+    L.tileLayer(config.tileServers.stamen, {
         attribution: config.osmMention
     })
 var baseLayers = {
@@ -114,10 +116,10 @@ var baseLayers = {
     'Transport': transport
 }
 
-let stations_bof = L.layerGroup().addTo(map) // layer group pour tous les marqueurs
+let all_stations_markers = L.layerGroup().addTo(map) // layer group pour tous les marqueurs
 let stations_much_speed_wow = L.layerGroup().addTo(map) // layer group des stations rapides
 
-let overlays = {stations_bof, stations_much_speed_wow} // Si vous avez des calques superposables, ajoutez-les ici
+let overlays = {stations_bof: all_stations_markers, stations_much_speed_wow} // Si vous avez des calques superposables, ajoutez-les ici
 
 const layerControl = L.control.layers(baseLayers, overlays, {collapsed: true}).addTo(map)
 tileGrey.addTo(map)
@@ -146,6 +148,7 @@ function buildOverpassApiUrl(map, overpassQuery) {
 const tags_to_display_in_popup = [
     'name',
     'capacity',
+    'description',
     'date_start',
     'charging_station:output',
     'socket:type_2',
@@ -184,7 +187,7 @@ function createJOSMEditLink(feature) {
 }
 
 function supprimerMarqueurs() {
-    stations_bof.clearLayers()
+    all_stations_markers.clearLayers()
     stations_much_speed_wow.clearLayers()
 
     map.eachLayer((layer) => {
@@ -279,7 +282,7 @@ function displayStatsFromGeoJson(resultAsGeojson) {
 <div class="bar color-power-lesser-than-50" style="width: ${calculerPourcentage(count_station_outputoutput_between_1_and_50, count, true)}%">${count_station_outputoutput_between_1_and_50 ? count_station_outputoutput_between_1_and_50 : ''}</div>
 <div class="bar color-power-lesser-than-100" style="width: ${calculerPourcentage(output_more_than_50, count, true)}%">${output_more_than_50 ? output_more_than_50 : ''}</div>
 <div class="bar color-power-lesser-than-200" style="width: ${calculerPourcentage(output_more_than_100, count, true)}%">${output_more_than_100 ? output_more_than_100 : ''}</div>
-<div class="bar color-power-lesser-than-300" style="width: ${calculerPourcentage(output_more_than_200, count, true)}%">${output_more_than_200? output_more_than_200 : '' | ''}</div>
+<div class="bar color-power-lesser-than-300" style="width: ${calculerPourcentage(output_more_than_200, count, true)}%">${output_more_than_200 ? output_more_than_200 : '' | ''}</div>
 <div class="bar color-power-lesser-than-max" style="width: ${calculerPourcentage(output_more_than_300, count, true)}%">${output_more_than_300 ? output_more_than_300 : ''}</div>
 </div>
 `
@@ -315,7 +318,6 @@ function bindEventsOnJosmRemote() {
 }
 
 
-
 function displayPointsFromApi(points = geojsondata) {
 
 
@@ -337,6 +339,7 @@ function displayPointsFromApi(points = geojsondata) {
         filter: function (feature, layer) {
             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]
@@ -350,7 +353,12 @@ function displayPointsFromApi(points = geojsondata) {
             supprimerMarqueurs()
             displayPointsFromApi()
         },
-        onEachFeature: function (feature, layer) {
+        onEachFeature: eachFeature,
+    })
+
+}
+
+function makePopupOfFeature(feature) {
     let popupContent = ''
 
     popupContent += '<div class="sockets-list" >'
@@ -384,6 +392,14 @@ function displayPointsFromApi(points = geojsondata) {
         }
     })
     popupContent += '</div>'
+    return popupContent;
+}
+
+function eachFeature(feature, layer) {
+
+    let link_josm = createJOSMEditLink(feature)
+
+    let popupContent = makePopupOfFeature(feature)
     layer.bindPopup(popupContent)
 
     let outPowerGuessed = utils.guessOutputPowerFromFeature(feature)
@@ -396,8 +412,6 @@ function displayPointsFromApi(points = geojsondata) {
         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 link_josm = createJOSMEditLink(feature)
-            // console.log('link_josm', link_josm)
     // boutons d'itinéraire
 
     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>
@@ -411,19 +425,20 @@ function displayPointsFromApi(points = geojsondata) {
     // quand on est loin, montrer d'avantage de couleur, pas le centre
     if (zoom < 13) {
         ratio_circle = 5
-            }
+    } else if (zoom < 15) {
-            else if (zoom < 15) {
         ratio_circle = 1
         opacity = 0.25
-            }
+    } else if (zoom <= 16) {
-            else if (zoom <= 16) {
         ratio_circle = 0.5
-            }
+    } else if (zoom <= 18) {
-            else if (zoom <= 18) {
         ratio_circle = 0.25
     }
     console.log('ratio_circle', ratio_circle)
+    if (!outPowerGuessed) {
+        radius = radius * ratio_circle
+    } else {
         radius = outPowerGuessed * ratio_circle
+    }
 
     // if (outPowerGuessed >= 300) {
     //     radius = 70 * ratio_circle
@@ -445,7 +460,7 @@ function displayPointsFromApi(points = geojsondata) {
         fillOpacity: opacity,
         colorOpacity: opacity,
         radius: radius
-            }).addTo(stations_bof)
+    }).addTo(all_stations_markers)
 
 
     // montrer les détails quand on est proche
@@ -457,7 +472,17 @@ function displayPointsFromApi(points = geojsondata) {
             fillColor: color,
             fillOpacity: 1,
             radius: 0.1
-                }).addTo(stations_bof)
+        })
+        if (!outPowerGuessed) {
+
+            circle_center.bindTooltip("?" , {
+                permanent: true,
+                className: "my-label",
+                offset: [0, 0]
+            });
+        }
+        circle_center.addTo(all_stations_markers);
+
 
     }
 
@@ -476,9 +501,6 @@ function displayPointsFromApi(points = geojsondata) {
             bindEventsOnJosmRemote()
         },
     })
-        },
-    })
-
 }
 
 function makeCssClassFromTags(tags) {
@@ -542,8 +564,8 @@ function loadOverpassQuery() {
         let overpassApiUrl = buildOverpassApiUrl(map, queryTextfieldValue)
 
         $.get(overpassApiUrl, function (geoDataPointsFromApi) {
-            supprimerMarqueurs()
+            geojsondata = geoDataPointsFromApi
-            displayPointsFromApi(geoDataPointsFromApi)
+            refreshDisplay()
             $('#spinning_icon').fadeOut()
             $('#message-loading').fadeOut()
             isLoading = false
@@ -551,6 +573,12 @@ function loadOverpassQuery() {
     }
 }
 
+function refreshDisplay() {
+    supprimerMarqueurs()
+    console.log('geojsondata', geojsondata)
+    displayPointsFromApi(geojsondata)
+}
+
 
 function onMapMoveEnd() {
     let center = map.getCenter()
@@ -585,17 +613,20 @@ $(document).ready(function () {
     // boutons de toggle et de cycle de visibilité
     //
     $('#filterUnkown').on('click', function () {
-        cycleVariableState(display_unknown_max_power_station, '#filterUnkown')
+        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')
 })
 
 function showActiveFilter(filterVariableName, selectorId) {
-    $(selectorId).attr('class', 'filter-state-' + filterVariableName )
+    $(selectorId).attr('class', 'filter-state-' + filterVariableName)
 }
 
 function cycleVariableState(filterVariableName, selectorId) {
+    console.log('filterVariableName', filterVariableName, filterStatesAvailable)
     if (filterVariableName) {
         if (filterVariableName == filterStatesAvailable[0]) {
             filterVariableName = filterStatesAvailable[1]
@@ -609,6 +640,7 @@ function cycleVariableState(filterVariableName, selectorId) {
     }
     showActiveFilter(filterVariableName, selectorId)
 
+    console.log('filterVariableName after', filterVariableName)
     return filterVariableName
 }
 

styles/style.css

@@ -346,16 +346,35 @@ button {
     padding: 1rem 2rem;
     border-radius: 0.25rem;
 }
+.filter-group button:after{
+    position: relative;
+    float:right;
+    left: 1rem;
+    top: 1rem;
+    font-size: 0.9em;
+}
+.filter-group button.filter-state-hide:after{
+    content: "cacher";
+    color: grey;
+}
+.filter-group button.filter-state-show:after{
+    content: "montrer";
+    color: green;
+}
+.filter-group button.filter-state-showOnly:after{
+    content: "montrer uniquement";
+    color: orange;
+}
 .filter-group button.filter-state-hide{
-    color: #670a0a;
+    /*color: #670a0a;*/
     background: #fff;
 }
 .filter-group button.filter-state-show{
     color: green;
-    background: #96b1ea;
+    /*background: #96b1ea;*/
 
 }
 .filter-group button.filter-state-showOnly{
     color: orange;
-    background: #96b1ea;
+    /*background: #96b1ea;*/
 }