change display depending on zoom, start filter cycle

2024-12-22 00:02:33 +01:00 · 2024-12-22 00:02:33 +01:00 · 2a8b533e08
commit 2a8b533e08
parent 8009f5acbb
5 changed files with 1369 additions and 600 deletions
--- a/index.html
+++ b/index.html
@ -27,14 +27,14 @@
                    id='overpass-api-controls'
                    class='leaflet-bar leaflet-control'>
                <input
-                        id='query-button'
+                        id='chercherButton'
                        type='button'
                        value='Chercher'>
            </div>

            <div class="research_display">
                <div id='spinning_icon'>
-                    <div class='message-loading'>
+                    <div class='messageLoading'>
                        chargement en cours...
                    </div>
                    <svg
@ -94,15 +94,15 @@

    <p>Cartes des stations de recharge pour véhicules électriques basée sur les données collaborative <a
            href="https://openstreetmap.org">OpenStreetMap</a></p>
-<div class="icones">
-    <img class="icon-img" src="img/Type2_Connector_Outline.svg" alt="type2">
+    <div class="icones">
+        <img class="icon-img" src="img/Type2_Connector_Outline.svg" alt="type2">

-    <img class="icon-img" src="img/type2_combo.svg" alt="prise">
-    <img class="icon-img" src="img/Type2_socket.svg" alt="prise">
-    <img class="icon-img" src="img/socket_typee.svg" alt="prise">
-    <img class="icon-img" src="img/chademo.svg" alt="prise">
-</div>
-    <button id="test">
+        <img class="icon-img" src="img/type2_combo.svg" alt="prise">
+        <img class="icon-img" src="img/Type2_socket.svg" alt="prise">
+        <img class="icon-img" src="img/socket_typee.svg" alt="prise">
+        <img class="icon-img" src="img/chademo.svg" alt="prise">
+    </div>
+    <button id="removeMarkers">
        effacer les marqueurs
    </button>

@ -112,26 +112,37 @@


    <div id="infos_carte"></div>
-    <div id="filter">
+    <div id="filters">
        filtres: <br>
-        prise: type 2, type CCS<br>
-        cable: attaché, à fournir<br>
-        puissance:
-        min
-<!--        <button class="button" id="toggleMinPower_50">-->
-<!--            keep cool, montre les stations entre 3 et 50kW max-->
-<!--        </button>-->
-<!--        ,-->
-<!--        <button class="button" id="toggleMinPower_100">-->
-<!--            100kW-->
-<!--        </button>-->
-<!--        ,-->
-<!--        TODO filtrer les bornes selon la puissance -->
-<!--        <button class="button" id="toggle_high_power">-->
-<!--            fais voir les plus de 100kW, j'ai pas le time!-->
-<!--        </button>-->
+        <div class="filter-group">
+            qualité
+            <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>
+        <br>
+        <!--        TODO filtrer les bornes selon la puissance -->
+

    </div>
+
    <h2>
        Puissances des stations:
    </h2>
@ -139,6 +150,7 @@
    <div id="found_charging_stations">

    </div>
+    <hr>
    <h2 class="title">
        À propos de ce plan</h2>
    <p>
@ -151,7 +163,8 @@

    <br>
    icones
-    câble électrique <a href="https://www.flaticon.com/fr/icones-gratuites/energie" title="energie icônes">Energie icônes créées par rukanicon - Flaticon</a>
+    câble électrique <a href="https://www.flaticon.com/fr/icones-gratuites/energie" title="energie icônes">Energie
+    icônes créées par rukanicon - Flaticon</a>
 </div>
 <script src='js/leaflet.js'></script>
 <script src='js/jquery-3.2.1.min.js'></script>
--- a/js/main.js
+++ b/js/main.js
@ -25,235 +25,257 @@ const tileServer_stamen = 'https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png
 // Initialisation de la carte avec la vue centrée sur la ville choisie
 let map = L.map('map')
 L.control.scale().addTo(map)
+L.control.zoom().addTo(map)

-function setRandomView () {
-	console.log('set random view')
+/**
+ * filtres à toggle par des boutons dans la page
+ * à appliquer à chaque rafraîchissement des points geojson
+ * TODO: make buttons and filter in refresh circles
+ */
+let display_type2_sockets = 'show';
+let display_type2_combo_sockets = 'show';
+let display_unknown_max_power_station = 'show';
+let display_known_max_power_station = 'show';
+let display_type2_combo_sockets_with_cable = 'show';
+let display_lower_than_50kw = 'show';
+let display_higer_than_50kw = 'show';
+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')
 // 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)]
+    console.log('randomCity', randomCity)
+    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)
+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)

-	// 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('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)
-	} 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.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)
+    } 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()
+    }
 }

-function updateURLWithMapCoordinatesAndZoom () {
-	// Récupère les coordonnées et le niveau de zoom de la carte
-	const center = map.getCenter()
-	const zoom = map.getZoom()
+function updateURLWithMapCoordinatesAndZoom() {
+    // Récupère les coordonnées et le niveau de zoom de la carte
+    const center = map.getCenter()
+    const zoom = map.getZoom()

-	// 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)
+    // 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', {
-	attribution: config.osmMention + '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
+    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', {
-	attribution: config.osmMention + '&copy; <a href="https://www.opencyclemap.org/">OpenCycleMap</a> contributors'
+    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', {
-	attribution: config.osmMention
+    attribution: config.osmMention
 })

 let tileGrey =
-	L.tileLayer(tileServer, {
-		attribution: config.osmMention
-	})
+    L.tileLayer(tileServer, {
+        attribution: config.osmMention
+    })
 let stamen =
-	L.tileLayer(tileServer_stamen, {
-		attribution: config.osmMention
-	})
+    L.tileLayer(tileServer_stamen, {
+        attribution: config.osmMention
+    })
 var baseLayers = {
-	'Grey': tileGrey,
-	'Stamen': stamen,
-	'OpenStreetMap': osm,
-	// 'OpenCycleMap': cycle,
-	'Transport': transport
+    'Grey': tileGrey,
+    'Stamen': stamen,
+    'OpenStreetMap': osm,
+    // 'OpenCycleMap': cycle,
+    'Transport': transport
 }

 let stations_bof = 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, stations_much_speed_wow} // Si vous avez des calques superposables, ajoutez-les ici

-const layerControl = L.control.layers(baseLayers, overlays, { collapsed: true }).addTo(map)
+const layerControl = L.control.layers(baseLayers, overlays, {collapsed: true}).addTo(map)
 tileGrey.addTo(map)

-function buildOverpassApiUrl (map, overpassQuery) {
+function buildOverpassApiUrl(map, overpassQuery) {

-	let baseUrl = 'https://overpass-api.de/api/interpreter'
-	let bounds = map.getBounds().getSouth() + ',' + map.getBounds().getWest() + ',' + map.getBounds().getNorth() + ',' + map.getBounds().getEast()
-	let resultUrl, query = ''
+    let baseUrl = 'https://overpass-api.de/api/interpreter'
+    let bounds = map.getBounds().getSouth() + ',' + map.getBounds().getWest() + ',' + map.getBounds().getNorth() + ',' + map.getBounds().getEast()
+    let resultUrl, query = ''

-	if (config.overrideQuery) {
-		query = `?data=[out:json][timeout:15];(
+    if (config.overrideQuery) {
+        query = `?data=[out:json][timeout:15];(
   nwr[amenity=charging_station](${bounds});
   );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;'
+    } 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;'

-	}
-	resultUrl = baseUrl + query
-	return resultUrl
+    }
+    resultUrl = baseUrl + query
+    return resultUrl
 }

 const tags_to_display_in_popup = [
-	'name',
-	'capacity',
-	'date_start',
-	'charging_station:output',
-	'socket:type_2',
-	'socket:type2:output',
-	'socket:typee',
-	'socket:typee:output',
-	'socket:type2_combo',
-	'socket:type2_combo:output',
-	'socket:chademo',
-	'operator', 'ref:EU:EVSE',
-	'network',
-	'opening_hours',
-	'contact',
-	'phone',
-	'contact:phone',
-	'website',
-	'contact:website',
-	'ref',
-	'fee',
-	'payment',
-	'payment:contactless',
-	'authentication:app',
-	'authentication:debit_card',
+    'name',
+    'capacity',
+    'date_start',
+    'charging_station:output',
+    'socket:type_2',
+    'socket:type2:output',
+    'socket:typee',
+    'socket:typee:output',
+    'socket:type2_combo',
+    'socket:type2_combo:output',
+    'socket:chademo',
+    'operator', 'ref:EU:EVSE',
+    'network',
+    'opening_hours',
+    'contact',
+    'phone',
+    'contact:phone',
+    'website',
+    'contact:website',
+    'ref',
+    'fee',
+    'payment',
+    'payment:contactless',
+    'authentication:app',
+    'authentication:debit_card',
 ]
 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 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 (map) {
-	map.eachLayer((layer) => {
-		if (layer instanceof L.Marker) {
-			layer.remove()
-		}
-	})
+function supprimerMarqueurs() {
+    stations_bof.clearLayers()
+    stations_much_speed_wow.clearLayers()
+
+    map.eachLayer((layer) => {
+        if (layer instanceof L.Marker) {
+            layer.remove()
+        }
+    })
 }

 let coef_reduction_bars = 0.8

-function calculerPourcentage (partie, total, reduc) {
-	if (total === 0) {
-		return 'Division par zéro impossible'
-	}
-	let coef_reduction = 1
-	if (reduc) {
-		coef_reduction = coef_reduction_bars
-	}
-	return ((partie / total) * 100 * coef_reduction).toFixed(1)
+function calculerPourcentage(partie, total, reduc) {
+    if (total === 0) {
+        return 'Division par zéro impossible'
+    }
+    let coef_reduction = 1
+    if (reduc) {
+        coef_reduction = coef_reduction_bars
+    }
+    return ((partie / total) * 100 * coef_reduction).toFixed(1)
 }

-function displayStatsFromGeoJson (resultAsGeojson) {
+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)
-		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)
-			}
-			if (tagKey.indexOf('type2') !== -1) {
-				found_type2 = true
-			}
-		})
-		let outputPower = utils.guessOutputPowerFromFeature(feature)
-		if (found_type2_combo) {
-			count_found_type2combo++
-		}
-		if (found_type2) {
-			count_found_type2++
-		}
-		if (outputPower == 0) {
-			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++
-		}
-		if (outputPower > 0 && outputPower < 50) {
-			count_station_outputoutput_between_1_and_50++
-		}
-		if (outputPower >= 50 && outputPower < 100) {
-			output_more_than_50++
-		} else if (outputPower >= 100 && outputPower < 200) {
-			output_more_than_100++
-		} else if (outputPower >= 200 && outputPower < 300) {
-			output_more_than_200++
-		} else if (outputPower >= 300) {
-			feature.properties.puissance_haute = true
-			output_more_than_300++
-		}
-		if (feature.properties.tags['charging_station:output']) {
-			count_station_output++
-		}
-		if (feature.properties.tags['ref:EU:EVSE']) {
-			count_ref_eu++
-		}
-	})
-	let bar_powers = `<div class="bars-container">
+    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)
+        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)
+            }
+            if (tagKey.indexOf('type2') !== -1) {
+                found_type2 = true
+            }
+        })
+        let outputPower = utils.guessOutputPowerFromFeature(feature)
+        if (found_type2_combo) {
+            count_found_type2combo++
+        }
+        if (found_type2) {
+            count_found_type2++
+        }
+        if (outputPower == 0) {
+            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++
+        }
+        if (outputPower > 0 && outputPower < 50) {
+            count_station_outputoutput_between_1_and_50++
+        }
+        if (outputPower >= 50 && outputPower < 100) {
+            output_more_than_50++
+        } else if (outputPower >= 100 && outputPower < 200) {
+            output_more_than_100++
+        } else if (outputPower >= 200 && outputPower < 300) {
+            output_more_than_200++
+        } else if (outputPower >= 300) {
+            feature.properties.puissance_haute = true
+            output_more_than_300++
+        }
+        if (feature.properties.tags['charging_station:output']) {
+            count_station_output++
+        }
+        if (feature.properties.tags['ref:EU:EVSE']) {
+            count_ref_eu++
+        }
+    })
+    let bar_powers = `<div class="bars-container">
 <div class="bar color-unknown" style="width: ${calculerPourcentage(count_output_unknown, count, true)}%">${count_output_unknown}</div>
 <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}</div>
 <div class="bar color-power-lesser-than-100" style="width: ${calculerPourcentage(output_more_than_50, count, true)}%">${output_more_than_50}</div>
@ -263,7 +285,7 @@ function displayStatsFromGeoJson (resultAsGeojson) {
 </div>
 `

-	let stats_content = `<div class="stats">
+    let stats_content = `<div class="stats">
 Statistiques des <strong>${count}</strong> stations trouvées: <br/>
 ${count_station_output} (${calculerPourcentage(count_station_output, count)}%) ont une info de puissance max délivrée <i>charging_station:output</i>. <br/>
 ${count_ref_eu} (${calculerPourcentage(count_ref_eu, count)}%) ont une référence européenne <i>ref:EU:EVSE</i>. <br/>
@ -276,269 +298,305 @@ ${count_found_type2combo} (${calculerPourcentage(count_found_type2combo, count)}
 ${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 <i>*type2_combo*</i>. <br/>${count_found_type2} (${calculerPourcentage(count_found_type2, count)}%) ont un prise type2 définie <i>*type2*</i>. <br/>
 </div>`

-	$('#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 = $(`.josm`)
-	// 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)
-		})
-	})
+function bindEventsOnJosmRemote() {
+    let josm_remote_buttons = $(`.josm`)
+    // 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)
+        })
+    })
 }

-const ratio_circle = 0.9
+let ratio_circle = 2

-function displayPointsFromApi (points) {
+function displayPointsFromApi(points) {

-	geojsondata = osmtogeojson(points)
-	// console.log('resultAsGeojson', geojsondata)
+    geojsondata = osmtogeojson(points)
+    // console.log('resultAsGeojson', geojsondata)

-	displayStatsFromGeoJson(geojsondata)
-	let resultLayer = L.geoJson(geojsondata, {
-		style: function (feature) {
-			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')
-			if (isPolygon) {
-				feature.geometry.type = 'Point'
-				let polygonCenter = L.latLngBounds(feature.geometry.coordinates[0]).getCenter()
-				feature.geometry.coordinates = [polygonCenter.lat, polygonCenter.lng]
-			}
-			return true
-		},
-		onmoveend: function (event) {
-			// console.log('déplacement terminé')
-		},
-		onzoomend: function (event) {
-			// console.log('event', event)
-		},
-		onEachFeature: function (feature, layer) {
-			let popupContent = ''
+    displayStatsFromGeoJson(geojsondata)

-			popupContent += '<div class="sockets-list" >'
-			let type2 = feature.properties.tags['socket:type2']
-			let type2_combo = feature.properties.tags['socket:type2_combo']
-			if (type2) {
-				popupContent += ' <img class="icon-img" src="img/Type2_socket.svg" alt="prise de type 2">'
-				if (type2 !== 'yes') {
-					popupContent += '<span class="socket-counter">x ' + type2 + '</span>'
-				}
-			}
-			if (feature.properties.tags['socket:type2_combo']) {
+    let resultLayer = L.geoJson(geojsondata, {
+        style: function (feature) {
+            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')
+            if (isPolygon) {
+                feature.geometry.type = 'Point'
+                let polygonCenter = L.latLngBounds(feature.geometry.coordinates[0]).getCenter()
+                feature.geometry.coordinates = [polygonCenter.lat, polygonCenter.lng]
+            }
+            return true
+        },
+        onmoveend: function (event) {
+            // console.log('déplacement terminé')
+        },
+        onzoomend: function (event) {
+            // console.log('event', event)
+        },
+        onEachFeature: function (feature, layer) {
+            let popupContent = ''

-				popupContent += ' <img class="icon-img" src="img/type2_combo.svg" alt="prise de type 2 combo CCS">'
-				if (type2_combo !== 'yes') {
-					popupContent += '<span class="socket-counter">x ' + type2_combo + '</span>'
-				}
-			}
-			popupContent += '</div>'
-			popupContent += '<div class="key-values" >'
-			// ne montrer que certains champs dans la popup
-			tags_to_display_in_popup.forEach(function (key) {
-				if (tags_to_display_in_popup.indexOf(key)) {
-					let value = feature.properties.tags[key]
-					if (value) {
-						if (value.indexOf('http') !== -1) {
-							value = '<a href="' + value + '">' + value + '</a>'
-						}
-						popupContent = popupContent + '<br/><strong class="popup-key">' + key + ' :</strong><span class="popup-value">' + value + '</span>'
-					}
-				}
-			})
-			popupContent += '</div>'
-			layer.bindPopup(popupContent)
+            popupContent += '<div class="sockets-list" >'
+            let type2 = feature.properties.tags['socket:type2']
+            let type2_combo = feature.properties.tags['socket:type2_combo']
+            if (type2) {
+                popupContent += ' <img class="icon-img" src="img/Type2_socket.svg" alt="prise de type 2">'
+                if (type2 !== 'yes') {
+                    popupContent += '<span class="socket-counter">x ' + type2 + '</span>'
+                }
+            }
+            if (feature.properties.tags['socket:type2_combo']) {

-			let outPowerGuessed = utils.guessOutputPowerFromFeature(feature)
-			let color = colorUtils.getColor(feature)
-			let displayOutPowerGuessed = '? kW'
-			if (outPowerGuessed) {
-				displayOutPowerGuessed = outPowerGuessed + ' kW max'
-			}
-			if (!popupContent) {
-				popupContent = `<span class="no-data"> Aucune information renseignée,
+                popupContent += ' <img class="icon-img" src="img/type2_combo.svg" alt="prise de type 2 combo CCS">'
+                if (type2_combo !== 'yes') {
+                    popupContent += '<span class="socket-counter">x ' + type2_combo + '</span>'
+                }
+            }
+            popupContent += '</div>'
+            popupContent += '<div class="key-values" >'
+            // ne montrer que certains champs dans la popup
+            tags_to_display_in_popup.forEach(function (key) {
+                if (tags_to_display_in_popup.indexOf(key)) {
+                    let value = feature.properties.tags[key]
+                    if (value) {
+                        if (value.indexOf('http') !== -1) {
+                            value = '<a href="' + value + '">' + value + '</a>'
+                        }
+                        popupContent = popupContent + '<br/><strong class="popup-key">' + key + ' :</strong><span class="popup-value">' + value + '</span>'
+                    }
+                }
+            })
+            popupContent += '</div>'
+            layer.bindPopup(popupContent)
+
+            let outPowerGuessed = utils.guessOutputPowerFromFeature(feature)
+            let color = colorUtils.getColor(feature)
+            let displayOutPowerGuessed = '? kW'
+            if (outPowerGuessed) {
+                displayOutPowerGuessed = outPowerGuessed + ' kW max'
+            }
+            if (!popupContent) {
+                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 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>
+            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>
 <a class="edit-button" href="https://www.openstreetmap.org/edit?editor=id&node=${feature.properties.id}">✏️</a><a class="edit-button josm" data-href="${link_josm}" href="#">JOSM</a> <span class="color-indication" style="background-color: ${color};">${displayOutPowerGuessed}</span><span class="popup-content">${popupContent}</span>`

-			let radius = 20
-			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 zoom = map.getZoom()
+            let radius = 20
+            let opacity = 0.5

-			let zoom = map.getZoom()
-			let opacity = 0.1
+            // quand on est loin, montrer d'avantage de couleur, pas le centre
+            if (zoom < 13) {
+                ratio_circle = 6
+            } else if (zoom < 15) {
+                ratio_circle = 4
+            }
+            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
+            }

-			if (zoom < 16) {
-				opacity = 0.5
-			}
+            let circle = L.circle(layer._latlng, {
+                color: color,
+                fillColor: color,
+                fillOpacity: opacity,
+                colorOpacity: opacity,
+                radius: radius
+            }).addTo(stations_bof)

-			let circle = L.circle(layer._latlng, {
-				color: color,
-				fillColor: color,
-				fillOpacity: opacity,
-				colorOpacity: opacity,
-				radius: radius
-			}).addTo(map)

-			let circle_center = L.circle(layer._latlng, {
-				color: 'black',
-				fillColor: color,
-				fillOpacity: 1,
-				radius: 0.1
-			}).addTo(map)
+            // montrer les détails quand on est proche
+            // afficher moins de couleur, montrer le centre plus précis
+            if (zoom > 15) {
+                opacity = 0.25
+                let circle_center = L.circle(layer._latlng, {
+                    color: 'black',
+                    fillColor: color,
+                    fillOpacity: 1,
+                    radius: 0.1
+                }).addTo(stations_bof)

-			circle.bindPopup(html)
-			circle.on({
-				mouseover: function () {
-					this.openPopup()
-					bindEventsOnJosmRemote()
-				},
-				mouseout: function () {
-					// setTimeout(() => this.closePopup(), 15000)
-				},
-				click: function () {
-					this.openPopup()
-					bindEventsOnJosmRemote()
-				},
-			})
-		},
-	})
+            }
+
+
+            circle.bindPopup(html)
+            circle.on({
+                mouseover: function () {
+                    this.openPopup()
+                    bindEventsOnJosmRemote()
+                },
+                mouseout: function () {
+                    // setTimeout(() => this.closePopup(), 15000)
+                },
+                click: function () {
+                    this.openPopup()
+                    bindEventsOnJosmRemote()
+                },
+            })
+        },
+    })

 }

-function makeCssClassFromTags (tags) {
-	// console.log('tags', tags)
-	let tagKeys = Object.keys(tags)
-	// console.log('tagKeys', tagKeys)
-	if (!tags) {
-		return ''
-	}
-	let listOfClasses = []
+function makeCssClassFromTags(tags) {
+    // console.log('tags', tags)
+    let tagKeys = Object.keys(tags)
+    // console.log('tagKeys', tagKeys)
+    if (!tags) {
+        return ''
+    }
+    let listOfClasses = []

-	tagKeys.forEach((element) => {
-		listOfClasses.push('tag-' + element + '_' + tags[element].replace(':', '--').replace(' ', '-'))
-	})
+    tagKeys.forEach((element) => {
+        listOfClasses.push('tag-' + element + '_' + tags[element].replace(':', '--').replace(' ', '-'))
+    })

-	return listOfClasses.join(' ')
+    return listOfClasses.join(' ')
 }

-function getIconFromTags (tags) {
-	let iconFileName = ''
-	// let iconFileName = 'icon_restaurant.png';
-	if (tags['man_made']) {
-		iconFileName = 'fountain.png'
-	}
-	return iconFileName
+function getIconFromTags(tags) {
+    let iconFileName = ''
+    // let iconFileName = 'icon_restaurant.png';
+    if (tags['man_made']) {
+        iconFileName = 'fountain.png'
+    }
+    return iconFileName
 }

 // $('#toggleMinPower_50').on('click', toggleMinPower(50))
 // $('#toggleMinPower_100').on('click', toggleMinPower(100))
 // document.getElementById('toggleMinPower_300').addEventListener('click', toggleMinPower(showHighPower))

-function toggleMinPower (showHighPower) {
-	console.log('toggle', showHighPower)
-	showHighPower = !showHighPower
-	addFilteredMarkers(showHighPower)
-	this.textContent = showHighPower ? 'Montrer puissance haute' : 'Montrer puissance normale'
+function toggleMinPower(showHighPower) {
+    console.log('toggle', showHighPower)
+    showHighPower = !showHighPower
+    addFilteredMarkers(showHighPower)
+    this.textContent = showHighPower ? 'Montrer puissance haute' : 'Montrer puissance normale'
 }

-function addFilteredMarkers (showHighPower) {
-	allMarkers.clearLayers() // Supprimer les marqueurs existants
+function addFilteredMarkers(showHighPower) {
+    allMarkers.clearLayers() // Supprimer les marqueurs existants

-	console.log('addFilteredMarkers: clear des marqueurs fait')
-	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)
-		}
-	})
-	console.log('addFilteredMarkers: ', counter)
+    console.log('addFilteredMarkers: clear des marqueurs fait')
+    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)
+        }
+    })
+    console.log('addFilteredMarkers: ', counter)
 }

 let isLoading = false

-function loadOverpassQuery () {
+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)
+    // 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)

-		$.get(overpassApiUrl, function (geoDataPointsFromApi) {
-			displayPointsFromApi(geoDataPointsFromApi)
-			$('#spinning_icon').fadeOut()
-			$('#message-loading').fadeOut()
-			isLoading = false
-		}) // end of the getting from overpass API
-	}
+        $.get(overpassApiUrl, function (geoDataPointsFromApi) {
+            supprimerMarqueurs()
+            displayPointsFromApi(geoDataPointsFromApi)
+            $('#spinning_icon').fadeOut()
+            $('#message-loading').fadeOut()
+            isLoading = false
+        }) // end of the getting from overpass API
+    }
 }

-$('#spinning_icon').hide()
-$('#message-loading').hide()

-function onMapMoveEnd () {
-	let center = map.getCenter()
-	let zoom = map.getZoom()
-	let infos = `Lat: ${center.lat}, Lon: ${center.lng}, Zoom : ${zoom}`
-	if (zoom > 10) {
-		loadOverpassQuery()
-	} else {
-		infos += '(zoomez au niveau 11 ou plus pour charger les stations en vous déplaçant)'
-	}
-	$('#infos_carte').html(infos)
-	updateURLWithMapCoordinatesAndZoom()
+function onMapMoveEnd() {
+    let center = map.getCenter()
+    let zoom = map.getZoom()
+    let infos = `Lat: ${center.lat}, Lon: ${center.lng}, Zoom : ${zoom}`
+    if (zoom > 10) {
+        loadOverpassQuery()
+    } else {
+        infos += '(zoomez au niveau 11 ou plus pour charger les stations en vous déplaçant)'
+    }
+    $('#infos_carte').html(infos)
+    updateURLWithMapCoordinatesAndZoom()

 }

 setCoordinatesOfLeafletMapFromQueryParameters()

-map.on('moveend', onMapMoveEnd)

 $(document).ready(function () {
-	bindEventsOnJosmRemote()
-	onMapMoveEnd()
+    bindEventsOnJosmRemote()
+    onMapMoveEnd()
+    map.on('moveend', onMapMoveEnd)
+    $('#spinning_icon').hide()
+    // $('#messageLoading').hide()
+    $('#removeMarkers').on('click', function () {
+        supprimerMarqueurs()
+    })
+    $('#load').on('click', function () {
+        loadOverpassQuery()
+    })
+    // filtres
+    // boutons de toggle et de cycle de visibilité
+    //
+    $('#filterUnkown').on('click', function () {
+        cycleVariableState(display_unknown_max_power_station, '#filterUnkown')
+        showActiveFilter(display_unknown_max_power_station, '#filterUnkown')
+    })
 })
-/*
-boutons de toggle
- */

-// test
-$('#test').on('click', function () {
-	console.log('filteredMarkers', allMarkers)
+function showActiveFilter(filterVariableName, selectorId) {
+    $(selectorId).classList = 'filter-state-' + filterVariableName
+}
+
+function cycleVariableState(filterVariableName, selectorId) {
+    if (filterVariableName) {
+        if (filterVariableName == filterStatesAvailable[0]) {
+            filterVariableName = filterStatesAvailable[1]
+        } else if (filterVariableName == filterStatesAvailable[1]) {
+            filterVariableName = filterStatesAvailable[2]
+        } else if (filterVariableName == filterStatesAvailable[2]) {
+            filterVariableName = filterStatesAvailable[0]
+        }
+    } else {
+        filterVariableName = filterStatesAvailable[0]
+    }
+    showActiveFilter(filterVariableName, selectorId)
+
+    return filterVariableName
+}

-	supprimerMarqueurs(map)
-	// loadOverpassQuery()
-})
--- a/package-lock.json
+++ b/package-lock.json
@ -14,7 +14,8 @@
        "@testing-library/user-event": "^13.1.9",
        "babel-jest": "^27.0.2",
        "jest": "^27.0.3",
-        "jest-html-reporter": "^3.4.1"
+        "jest-html-reporter": "^3.4.1",
+        "serve": "^14.2.4"
      }
    },
    "node_modules/@adobe/css-tools": {
@ -2525,6 +2526,12 @@
      "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==",
      "dev": true
    },
+    "node_modules/@zeit/schemas": {
+      "version": "2.36.0",
+      "resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.36.0.tgz",
+      "integrity": "sha512-7kjMwcChYEzMKjeex9ZFXkt1AyNov9R5HZtjBKVsmVpw7pa7ZtlCGvCBC2vnnXctaYN+aRI61HjIqeetZW5ROg==",
+      "dev": true
+    },
    "node_modules/abab": {
      "version": "2.0.6",
      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@ -2532,6 +2539,19 @@
      "deprecated": "Use your platform's native atob() and btoa() methods instead",
      "dev": true
    },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "dev": true,
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/acorn": {
      "version": "8.14.0",
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
@ -2587,6 +2607,31 @@
        "node": ">= 6.0.0"
      }
    },
+    "node_modules/ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-align": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
+      "integrity": "sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^4.1.0"
+      }
+    },
    "node_modules/ansi-escapes": {
      "version": "4.3.2",
      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@ -2639,6 +2684,32 @@
        "node": ">= 8"
      }
    },
+    "node_modules/arch": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
+      "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
+    },
    "node_modules/argparse": {
      "version": "1.0.10",
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
@ -2807,6 +2878,143 @@
      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
      "dev": true
    },
+    "node_modules/boxen": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/boxen/-/boxen-7.0.0.tgz",
+      "integrity": "sha512-j//dBVuyacJbvW+tvZ9HuH03fZ46QcaKvvhZickZqtB271DxJ7SNRSNxrV/dZX0085m7hISRZWbzWlJvx/rHSg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-align": "^3.0.1",
+        "camelcase": "^7.0.0",
+        "chalk": "^5.0.1",
+        "cli-boxes": "^3.0.0",
+        "string-width": "^5.1.2",
+        "type-fest": "^2.13.0",
+        "widest-line": "^4.0.1",
+        "wrap-ansi": "^8.0.1"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/boxen/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/boxen/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/boxen/node_modules/camelcase": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-7.0.1.tgz",
+      "integrity": "sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/boxen/node_modules/chalk": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.4.1.tgz",
+      "integrity": "sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==",
+      "dev": true,
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/boxen/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true
+    },
+    "node_modules/boxen/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/boxen/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/boxen/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/boxen/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
    "node_modules/brace-expansion": {
      "version": "1.1.11",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -2882,6 +3090,15 @@
      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
      "dev": true
    },
+    "node_modules/bytes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+      "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
    "node_modules/callsites": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@ -2936,6 +3153,21 @@
        "url": "https://github.com/chalk/chalk?sponsor=1"
      }
    },
+    "node_modules/chalk-template": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/chalk-template/-/chalk-template-0.4.0.tgz",
+      "integrity": "sha512-/ghrgmhfY8RaSdeo43hNXxpoHAtxdbskUHjPpfqUWGttFgycUhYPGx3YZBCnUCvOa7Doivn1IZec3DEGFoMgLg==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk-template?sponsor=1"
+      }
+    },
    "node_modules/char-regex": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
@ -2966,6 +3198,35 @@
      "integrity": "sha512-cuSVIHi9/9E/+821Qjdvngor+xpnlwnuwIyZOaLmHBVdXL+gP+I6QQB9VkO7RI77YIcTV+S1W9AreJ5eN63JBA==",
      "dev": true
    },
+    "node_modules/cli-boxes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-3.0.0.tgz",
+      "integrity": "sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/clipboardy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-3.0.0.tgz",
+      "integrity": "sha512-Su+uU5sr1jkUy1sGRpLKjKrvEOVXgSgiSInwa/qeID6aJ07yh+5NWc3h2QfjHjBnfX4LhtFcuAWKUsJ3r+fjbg==",
+      "dev": true,
+      "dependencies": {
+        "arch": "^2.2.0",
+        "execa": "^5.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/cliui": {
      "version": "7.0.4",
      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@ -3023,12 +3284,66 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/compressible": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
+      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
+      "dev": true,
+      "dependencies": {
+        "mime-db": ">= 1.43.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/compression": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
+      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
+      "dev": true,
+      "dependencies": {
+        "accepts": "~1.3.5",
+        "bytes": "3.0.0",
+        "compressible": "~2.0.16",
+        "debug": "2.6.9",
+        "on-headers": "~1.0.2",
+        "safe-buffer": "5.1.2",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/compression/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/compression/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true
+    },
    "node_modules/concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
      "dev": true
    },
+    "node_modules/content-disposition": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
+      "integrity": "sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/convert-source-map": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@ -3155,6 +3470,15 @@
      "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==",
      "dev": true
    },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
    "node_modules/deepmerge": {
      "version": "4.3.1",
      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@ -3219,6 +3543,12 @@
        "node": ">=8"
      }
    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true
+    },
    "node_modules/electron-to-chromium": {
      "version": "1.5.74",
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.74.tgz",
@ -3413,6 +3743,12 @@
        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
      }
    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
    "node_modules/fast-json-stable-stringify": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@ -3712,6 +4048,12 @@
      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
      "dev": true
    },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true
+    },
    "node_modules/is-arrayish": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@ -3733,6 +4075,21 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true,
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/is-fullwidth-code-point": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@ -3760,6 +4117,18 @@
        "node": ">=0.12.0"
      }
    },
+    "node_modules/is-port-reachable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-port-reachable/-/is-port-reachable-4.0.0.tgz",
+      "integrity": "sha512-9UoipoxYmSk6Xy7QFgRv2HDyaysmgSG75TFQs6S+3pDM7ZhKTF/bskZV+0UlABHzKjNVhPjYCLfeZUEg1wXxig==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/is-potential-custom-element-name": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@ -3784,6 +4153,18 @@
      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
      "dev": true
    },
+    "node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/isexe": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@ -5341,6 +5722,12 @@
      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
      "dev": true
    },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
    "node_modules/json5": {
      "version": "2.2.3",
      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@ -5525,6 +5912,15 @@
        "node": "*"
      }
    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/mkdirp": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
@ -5549,6 +5945,15 @@
      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
      "dev": true
    },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/node-int64": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
@ -5588,6 +5993,15 @@
      "integrity": "sha512-F1I/bimDpj3ncaNDhfyMWuFqmQDBwDB0Fogc2qpL3BWvkQteFD/8BzWuIRl83rq0DXfm8SGt/HFhLXZyljTXcQ==",
      "dev": true
    },
+    "node_modules/on-headers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
    "node_modules/once": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@ -5690,6 +6104,12 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/path-is-inside": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
+      "integrity": "sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==",
+      "dev": true
+    },
    "node_modules/path-key": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@ -5705,6 +6125,12 @@
      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
      "dev": true
    },
+    "node_modules/path-to-regexp": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-3.3.0.tgz",
+      "integrity": "sha512-qyCH421YQPS2WFDxDjftfc1ZR5WKQzVzqsp4n9M2kQhVOo/ByahFoUNJfl58kOcEGfQ//7weFTDhm+ss8Ecxgw==",
+      "dev": true
+    },
    "node_modules/picocolors": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@ -5824,6 +6250,39 @@
      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
      "dev": true
    },
+    "node_modules/range-parser": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
+      "integrity": "sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "dev": true,
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
+    "node_modules/rc/node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/react-is": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -5893,6 +6352,28 @@
        "node": ">=4"
      }
    },
+    "node_modules/registry-auth-token": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.3.2.tgz",
+      "integrity": "sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==",
+      "dev": true,
+      "dependencies": {
+        "rc": "^1.1.6",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/registry-url": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.1.0.tgz",
+      "integrity": "sha512-ZbgR5aZEdf4UKZVBPYIgaglBmSF2Hi94s2PcIHhRGFjKYu+chjJdYfHn4rt3hB6eCKLJ8giVIIfgMa1ehDfZKA==",
+      "dev": true,
+      "dependencies": {
+        "rc": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/regjsgen": {
      "version": "0.8.0",
      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.8.0.tgz",
@ -5932,6 +6413,15 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/requires-port": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@ -6001,6 +6491,12 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
+    },
    "node_modules/safer-buffer": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@ -6028,6 +6524,79 @@
        "semver": "bin/semver.js"
      }
    },
+    "node_modules/serve": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/serve/-/serve-14.2.4.tgz",
+      "integrity": "sha512-qy1S34PJ/fcY8gjVGszDB3EXiPSk5FKhUa7tQe0UPRddxRidc2V6cNHPNewbE1D7MAkgLuWEt3Vw56vYy73tzQ==",
+      "dev": true,
+      "dependencies": {
+        "@zeit/schemas": "2.36.0",
+        "ajv": "8.12.0",
+        "arg": "5.0.2",
+        "boxen": "7.0.0",
+        "chalk": "5.0.1",
+        "chalk-template": "0.4.0",
+        "clipboardy": "3.0.0",
+        "compression": "1.7.4",
+        "is-port-reachable": "4.0.0",
+        "serve-handler": "6.1.6",
+        "update-check": "1.5.4"
+      },
+      "bin": {
+        "serve": "build/main.js"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/serve-handler": {
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.6.tgz",
+      "integrity": "sha512-x5RL9Y2p5+Sh3D38Fh9i/iQ5ZK+e4xuXRd/pGbM4D13tgo/MGwbttUk8emytcr1YYzBYs+apnUngBDFYfpjPuQ==",
+      "dev": true,
+      "dependencies": {
+        "bytes": "3.0.0",
+        "content-disposition": "0.5.2",
+        "mime-types": "2.1.18",
+        "minimatch": "3.1.2",
+        "path-is-inside": "1.0.2",
+        "path-to-regexp": "3.3.0",
+        "range-parser": "1.2.0"
+      }
+    },
+    "node_modules/serve-handler/node_modules/mime-db": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
+      "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-handler/node_modules/mime-types": {
+      "version": "2.1.18",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz",
+      "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==",
+      "dev": true,
+      "dependencies": {
+        "mime-db": "~1.33.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve/node_modules/chalk": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.0.1.tgz",
+      "integrity": "sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w==",
+      "dev": true,
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
    "node_modules/shebang-command": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@ -6441,6 +7010,25 @@
        "browserslist": ">= 4.21.0"
      }
    },
+    "node_modules/update-check": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/update-check/-/update-check-1.5.4.tgz",
+      "integrity": "sha512-5YHsflzHP4t1G+8WGPlvKbJEbAJGCgw+Em+dGR1KmBUbr1J36SJBqlHLjR7oob7sco5hWHGQVcr9B2poIVDDTQ==",
+      "dev": true,
+      "dependencies": {
+        "registry-auth-token": "3.3.2",
+        "registry-url": "3.1.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
    "node_modules/url-parse": {
      "version": "1.5.10",
      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
@ -6480,6 +7068,15 @@
        "node": ">= 8"
      }
    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
    "node_modules/w3c-hr-time": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@ -6564,6 +7161,71 @@
        "node": ">= 8"
      }
    },
+    "node_modules/widest-line": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-4.0.1.tgz",
+      "integrity": "sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/widest-line/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/widest-line/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true
+    },
+    "node_modules/widest-line/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/widest-line/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
    "node_modules/wrap-ansi": {
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -10,7 +10,8 @@
    "@testing-library/user-event": "^13.1.9",
    "babel-jest": "^27.0.2",
    "jest": "^27.0.3",
-    "jest-html-reporter": "^3.4.1"
+    "jest-html-reporter": "^3.4.1",
+    "serve": "^14.2.4"
  },
  "scripts": {
    "test": "jest"
--- a/styles/style.css
+++ b/styles/style.css
@ -1,326 +1,361 @@
 html, body {
-	height: 100%;
-	width: 100%;
-	background: #ccc;
+    height: 100%;
+    width: 100%;
+    background: #ccc;
 }

 body {
-	padding: 0;
-	margin: 0;
+    padding: 0;
+    margin: 0;
 }

 html, p {
-	font-family: Calibri, Roboto, Arial, "Ubuntu Mono";
-	font-size: 1rem;
+    font-family: Calibri, Roboto, Arial, "Ubuntu Mono";
+    font-size: 1rem;
 }

 p {
-	font-size: 1.25rem;
+    font-size: 1.25rem;
 }

 #map {
-	height: 70%;
-	width: 100%;
-	margin: 0;
-	border: solid 2px;
+    height: 80vh;
+    width: 100%;
+    margin: 0;
+    border: solid 2px;
 }

 .padded {
-	padding: 1rem;
+    padding: 1rem;
 }

 #heading {
-	background: #000;
-	color: #ddd;
-	min-height: 5%;
-	height: 4rem;
-	width: 100%;
-	padding-left: 1em;
+    background: #000;
+    color: #ddd;
+    min-height: 5%;
+    height: 4rem;
+    width: 100%;
+    padding-left: 1em;
 }

 .icon {
-	width: 0.25rem !important;
-	height: 0.25rem !important;
-	display: inline-block;
-	margin-right: 1rem;
-	background: white;
-	border-radius: 100%;
-	padding: 0.25rem;
-	margin-top: -0.5rem;
-	float: left;
+    width: 0.25rem !important;
+    height: 0.25rem !important;
+    display: inline-block;
+    margin-right: 1rem;
+    background: white;
+    border-radius: 100%;
+    padding: 0.25rem;
+    margin-top: -0.5rem;
+    float: left;
 }

 .title {
-	margin-right: 1em;
-	line-height: 1.5rem;
+    margin-right: 1em;
+    line-height: 1.5rem;
 }

 h2 {
-	font-weight: normal;
+    font-weight: normal;
 }

 #overpass-api-controls {
-	position: fixed;
-	top: -0.5rem;
-	left: 4em;
-	padding: 10px;
-	background-color: transparent;
-	border: 0;
-	z-index: 10;
+    position: fixed;
+    top: -0.5rem;
+    left: 4em;
+    padding: 10px;
+    background-color: transparent;
+    border: 0;
+    z-index: 10;
 }

 #overpass-api-controls a {
-	display: inline;
+    display: inline;
 }

 .has_output_of_irve_specified {
-	box-shadow: 0 0 15rem darkred;
+    box-shadow: 0 0 15rem darkred;
 }

 img.leaflet-marker-icon.tag-socket\:type2_yes {
-	box-shadow: 0 0 0.5em cornflowerblue;
-	border-color: cornflowerblue;
-	border-width: 3px;
+    box-shadow: 0 0 0.5em cornflowerblue;
+    border-color: cornflowerblue;
+    border-width: 3px;
 }

-#query-button,
+#chercherButton,
 .navigation-link,
 .edit-button {
-	background: #497cd3;
-	padding: 0.5em 1em;
-	border-radius: 2em;
-	color: white !important;
-	border: solid 1px #497cd3ff;
-	float: right;
-}
-#query-button{
-	min-width: 10em;
-}
-.navigation-link{
-	background: white;
-	border-radius: 0.25em;
-	float:none;
-	position:relative;
-	top: 5em;
-	right: -7.9rem;
-}
-.navigation-link:hover{
-	border: black;
-	background: #96b1ea;
+    background: #497cd3;
+    padding: 0.5em 1em;
+    border-radius: 2em;
+    color: white !important;
+    border: solid 1px #497cd3ff;
+    float: right;
 }

-#query-button:hover,
+#chercherButton {
+    min-width: 10em;
+}
+
+.navigation-link {
+    background: white;
+    border-radius: 0.25em;
+    float: none;
+    position: relative;
+    top: 5em;
+    right: -7.9rem;
+}
+
+.navigation-link:hover {
+    border: black;
+    background: #96b1ea;
+}
+
+#chercherButton:hover,
 .edit-button:hover {
-	background: #0d377b;
-	border: solid 1px #08285c;
-	cursor: pointer;
+    background: #0d377b;
+    border: solid 1px #08285c;
+    cursor: pointer;
 }

 .edit-button {
-	margin-left: 1ch;
+    margin-left: 1ch;

 }


 .pull-left {
-	float: left;
+    float: left;
 }

@keyframes spin {
-	0% {
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(359deg);
-	}
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(359deg);
+    }
 }

 a {
-	color: #38f;
+    color: #38f;
 }

 .leaflet-control-custom {
-	padding: 1rem;
-	background: white;
+    padding: 1rem;
+    background: white;
 }

 #spinning_icon {
-	position: fixed;
-	bottom: 11rem;
-	left: 20.5rem;
-	z-index: 10;
-	background: white;
-	font-size: 2rem;
+    position: fixed;
+    bottom: 11rem;
+    left: 20.5rem;
+    z-index: 10;
+    background: white;
+    font-size: 2rem;
 }

 #spinning_icon svg {
-	position: fixed;
-	top: 0.5rem;
-	right: 3rem;
-	background: white;
-	border-radius: 100%;
-	width: 3rem;
-	height: 3rem;
+    position: fixed;
+    top: 0.5rem;
+    right: 3rem;
+    background: white;
+    border-radius: 100%;
+    width: 3rem;
+    height: 3rem;
 }

 #spinning_icon svg {
-	animation: spin 2s linear infinite;
+    animation: spin 2s linear infinite;
 }

 #footer {
-	max-width: 70ch;
-	margin: 0 auto;
+    max-width: 70ch;
+    margin: 0 auto;
 }

 .leaflet-popup-content {
-	min-width: 15rem;
-	word-break: break-all;
-	word-wrap: break-word;
+    min-width: 15rem;
+    word-break: break-all;
+    word-wrap: break-word;
 }

 .popup-content {
-	width: 100%;
-	display: block;
-	overflow: auto;
-	min-width: 10rem;
-	max-width: 20rem;
-	min-height: 5rem;
-	max-height: 10rem;
+    width: 100%;
+    display: block;
+    overflow: auto;
+    min-width: 10rem;
+    max-width: 20rem;
+    min-height: 5rem;
+    max-height: 10rem;
 }

 .popup-key {
-	width: 50%;
-	display: inline-block;
+    width: 50%;
+    display: inline-block;
 }

 .popup-value {
-	width: 42%;
-	text-align: right;
-	display: inline-block;
-	padding-right: 1rem;
+    width: 42%;
+    text-align: right;
+    display: inline-block;
+    padding-right: 1rem;
 }

 .bottom-content {
-	padding: 0 2rem 4rem;
+    padding: 0 2rem 4rem;
 }

 #star {
-	left: 10rem;
+    left: 10rem;
 }

 .color-indication {
-	min-width: 1rem;
-	max-width: 5rem;
-	height: 1rem;
-	padding: 1rem;
-	border-radius: 2rem;
-	display: block;
-	position: relative;
-	top: -2rem;
-	color: white;
-	text-shadow: 0 0 0.5rem #222;
-	clear: right;
+    min-width: 1rem;
+    max-width: 5rem;
+    height: 1rem;
+    padding: 1rem;
+    border-radius: 2rem;
+    display: block;
+    position: relative;
+    top: -2rem;
+    color: white;
+    text-shadow: 0 0 0.5rem #222;
+    clear: right;
 }

 .no-data {
-	border-left: 3px solid dodgerblue;
-	padding: 1em 2rem;
-	min-height: 4rem;
+    border-left: 3px solid dodgerblue;
+    padding: 1em 2rem;
+    min-height: 4rem;

 }

 .no-data a {
-	color: dodgerblue;
+    color: dodgerblue;
 }

 /**
 marqueurs
 */
 .marker-demo {
-	margin-right: 3rem;
+    margin-right: 3rem;
 }
+
 .map-marker-circle-demo {
-	border-radius: 100%;
-	display: inline-block;
-	width: 1rem;
-	height: 1rem;
-	background: #fff;
+    border-radius: 100%;
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    background: #fff;
 }
-.color-unknown{
-	background: #c0b1b1;
+
+.color-unknown {
+    background: #c0b1b1;
 }


 .map-marker-circle-demo.color-1 {
-	background: #36423d;
+    background: #36423d;
 }
+
 .color-power-lesser-than-50,
 .map-marker-circle-demo.color-2 {
-	background: #4e8a8d;
+    background: #4e8a8d;
 }
+
 .color-power-lesser-than-100,
 .map-marker-circle-demo.color-3 {
-	background: #2999b3;
+    background: #2999b3;
 }
+
 .color-power-lesser-than-200,
 .map-marker-circle-demo.color-4 {
-	background: #1782dd;
+    background: #1782dd;
 }
+
 .color-power-lesser-than-300,
 .map-marker-circle-demo.color-5 {
-	background: #2900ff;
+    background: #2900ff;
 }
+
 .color-power-lesser-than-max,
 .map-marker-circle-demo.color-6 {
-	background: #8000ff;
+    background: #8000ff;
 }

-#found_charging_stations{
-	margin-top: 2rem;
+#found_charging_stations {
+    margin-top: 2rem;
 }

-button{
-	cursor: pointer;
-	padding: 0.5rem;
+button {
+    cursor: pointer;
+    padding: 0.5rem;
 }

-#bars_power{
-	margin: 1rem 0;
-	height: 3rem;
-}
-.bar{
-	display: inline-block;
-	height: 1em;
-	text-align:right;
-	padding:0.55rem;
-	padding-right:0.25rem;
-	float:left;
-	/*background: grey;*/
-	/*border-right: 1px solid white;*/
+#bars_power {
+    margin: 1rem 0;
+    height: 3rem;
 }

-.key-values{
-	max-height: 4rem;
-	overflow: auto;
-	width: 100%;
-	display: block;
+.bar {
+    display: inline-block;
+    height: 1em;
+    text-align: right;
+    padding: 0.55rem;
+    padding-right: 0.25rem;
+    float: left;
+    /*background: grey;*/
+    /*border-right: 1px solid white;*/
 }

-.icon-img{
-	width: 3rem;
-	height: 3rem;
-	fill: #000;
+.key-values {
+    max-height: 4rem;
+    overflow: auto;
+    width: 100%;
+    display: block;
 }
-.sockets-list{
-	margin-top: 0.25rem;
+
+.icon-img {
+    width: 3rem;
+    height: 3rem;
+    fill: #000;
 }
-.socket-counter{
-	background: #dedede;
-	margin-top: 1rem;
-	margin-left: -1rem;
-	border-radius: 1rem;
-	padding: 0.25rem;
+
+.sockets-list {
+    margin-top: 0.25rem;
 }
-.leaflet-interactive{
-	border:solid 3px white;
+
+.socket-counter {
+    background: #dedede;
+    margin-top: 1rem;
+    margin-left: -1rem;
+    border-radius: 1rem;
+    padding: 0.25rem;
 }
+
+.leaflet-interactive {
+    border: solid 3px white;
+}
+
+#infos_carte{
+    padding: 1rem 0;
+}
+.filter-group button{
+    padding: 1rem 2rem;
+    border-radius: 0.25rem;
+}
+.filter-group button.filter-state-hide{
+    color: #670a0a;
+    background: #fff;
+}
+.filter-group button.filter-state-display{
+    color: green;
+    background: #96b1ea;
+
+}
+.filter-group button.filter-state-showOnly{
+    color: orange;
+    background: #96b1ea;
+}