display ? on unknown

2024-12-22 23:39:17 +01:00 · 2024-12-22 23:39:17 +01:00 · 0d940850b5
commit 0d940850b5
parent d2154d9120
7 changed files with 225 additions and 167 deletions
--- a/index.html
+++ b/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">
-            prise:
-            <button id="filterType2">type 2</button>
-            <button id="filterType2_cable">type 2 avec câble</button>
-            <button id="filterType2_combo">type CCS</button>
-            <button id="filterType2_combo_cable">type CCS avec câble</button>
-        </div>
-        <div class="filter-group">
-
-            puissance:
-            <button id="filterLower50kw">- de 50kW</button>
-            <button id="filterUpper50kw">+ de 50kW</button>
-            <button id="filterLower200kw">- de 200 kW</button>
-            <button id="filterUpper200kw">+ de 200 kW</button>
-            <button class="button" id="toggle_high_power">
-                fais voir les plus de 300kW CCS, j'ai pas le time!
-            </button>
-        </div>
+<!--        TODO add more filters-->
+<!--        <div class="filter-group">-->
+<!--            prise:-->
+<!--            <button id="filterType2">type 2</button>-->
+<!--            <button id="filterType2_cable">type 2 avec câble</button>-->
+<!--            <button id="filterType2_combo">type CCS</button>-->
+<!--            <button id="filterType2_combo_cable">type CCS avec câble</button>-->
+<!--        </div>-->
+<!--        <div class="filter-group">-->
+<!--            puissance:-->
+<!--            <button id="filterLower50kw">- de 50kW</button>-->
+<!--            <button id="filterUpper50kw">+ de 50kW</button>-->
+<!--            <button id="filterLower200kw">- de 200 kW</button>-->
+<!--            <button id="filterUpper200kw">+ de 200 kW</button>-->
+<!--            <button class="button" id="toggle_high_power">-->
+<!--                fais voir les plus de 300kW CCS, j'ai pas le time!-->
+<!--            </button>-->
+<!--        </div>-->
        <br>
        <!--        TODO filtrer les bornes selon la puissance -->

--- a/js/config.js
+++ b/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
--- a/js/main.js
+++ b/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) => {
@ -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()
-            displayPointsFromApi(geoDataPointsFromApi)
+            geojsondata = 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,8 +613,10 @@ $(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')
 })
@ -596,6 +626,7 @@ function showActiveFilter(filterVariableName, selectorId) {
 }

 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
 }

--- a/styles/images/layers.png
+++ b/styles/images/layers.png
--- a/styles/images/map-marker.png
+++ b/styles/images/map-marker.png
--- a/styles/images/marker-icon.png
+++ b/styles/images/marker-icon.png
--- a/styles/style.css
+++ b/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;*/
 }