tykayn/libre-charge-map
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

display ? on unknown

Browse Source
This commit is contained in:
Tykayn 2024-12-22 23:39:17 +01:00 committed by tykayn
parent d2154d9120
commit 0d940850b5
7 changed files with 225 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
index.html
View File

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

9
js/config.js
View File

@ -2,6 +2,13 @@ const config = {
osmMention:'&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors', osmMention:'&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
showHighPower : true, showHighPower : true,
overrideQuery : 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 export default config

322
js/main.js
View File

@ -11,13 +11,15 @@ import colorUtils from './color-utils.js'
console.log('config', config) console.log('config', config)
let geojsondata let geojsondata
// serveurs de tuiles: https://wiki.openstreetmap.org/wiki/Tile_servers // serveurs de tuiles: https://wiki.openstreetmap.org/wiki/Tile_servers
// https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png // https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png
// https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png // https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png
// https://tile.openstreetmap.org/{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' // '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 // Créer la carte centrée sur Rouen
// Liste des 20 villes les plus peuplées de France avec leurs coordonnées géographiques // 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 * à appliquer à chaque rafraîchissement des points geojson
* TODO: make buttons and filter in refresh circles * TODO: make buttons and filter in refresh circles
*/ */
let filterStatesAvailable = ['hide', 'show', 'showOnly']
let display_type2_sockets = 'show'; let display_type2_sockets = 'show';
let display_type2_combo_sockets = 'show'; let display_type2_combo_sockets = 'show';
let display_unknown_max_power_station = '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_higer_than_200kw = 'show';
let display_chelou = 'show'; // les stations avec une valeur suspecte, plus de 400kW let display_chelou = 'show'; // les stations avec une valeur suspecte, plus de 400kW
let filterStatesAvailable = ['hide', 'show', 'showOnly']
function setRandomView() { function setRandomView() {
console.log('set random view') console.log('set random view')
@ -81,29 +84,28 @@ function updateURLWithMapCoordinatesAndZoom() {
// Construit l'URL avec les paramètres de coordonnées et de zoom // 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}` const url = `#coords=1&lat=${center.lat}&lng=${center.lng}&zoom=${zoom}`
// console.log('updateURLWithMapCoordinatesAndZoom url', url)
// Met à jour l'URL de la page // Met à jour l'URL de la page
history.replaceState(null, null, url) 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' 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' 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 attribution: config.osmMention
}) })
let tileGrey = let tileGrey =
L.tileLayer(tileServer, { L.tileLayer(config.tileServers.cartodb, {
attribution: config.osmMention attribution: config.osmMention
}) })
let stamen = let stamen =
L.tileLayer(tileServer_stamen, { L.tileLayer(config.tileServers.stamen, {
attribution: config.osmMention attribution: config.osmMention
}) })
var baseLayers = { var baseLayers = {
@ -114,10 +116,10 @@ var baseLayers = {
'Transport': transport '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 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) const layerControl = L.control.layers(baseLayers, overlays, {collapsed: true}).addTo(map)
tileGrey.addTo(map) tileGrey.addTo(map)
@ -146,6 +148,7 @@ function buildOverpassApiUrl(map, overpassQuery) {
const tags_to_display_in_popup = [ const tags_to_display_in_popup = [
'name', 'name',
'capacity', 'capacity',
'description',
'date_start', 'date_start',
'charging_station:output', 'charging_station:output',
'socket:type_2', 'socket:type_2',
@ -184,7 +187,7 @@ function createJOSMEditLink(feature) {
} }
function supprimerMarqueurs() { function supprimerMarqueurs() {
stations_bof.clearLayers() all_stations_markers.clearLayers()
stations_much_speed_wow.clearLayers() stations_much_speed_wow.clearLayers()
map.eachLayer((layer) => { map.eachLayer((layer) => {
@ -279,7 +282,7 @@ function displayStatsFromGeoJson(resultAsGeojson) {
<div class="bar color-power-lesser-than-50" style="width: ${calculerPourcentage(count_station_outputoutput_between_1_and_50, count, true)}%">${count_station_outputoutput_between_1_and_50 ? count_station_outputoutput_between_1_and_50 : ''}</div> <div class="bar color-power-lesser-than-50" style="width: ${calculerPourcentage(count_station_outputoutput_between_1_and_50, count, true)}%">${count_station_outputoutput_between_1_and_50 ? count_station_outputoutput_between_1_and_50 : ''}</div>
<div class="bar color-power-lesser-than-100" style="width: ${calculerPourcentage(output_more_than_50, count, true)}%">${output_more_than_50 ? output_more_than_50 : ''}</div> <div class="bar color-power-lesser-than-100" style="width: ${calculerPourcentage(output_more_than_50, count, true)}%">${output_more_than_50 ? output_more_than_50 : ''}</div>
<div class="bar color-power-lesser-than-200" style="width: ${calculerPourcentage(output_more_than_100, count, true)}%">${output_more_than_100 ? output_more_than_100 : ''}</div> <div class="bar color-power-lesser-than-200" style="width: ${calculerPourcentage(output_more_than_100, count, true)}%">${output_more_than_100 ? output_more_than_100 : ''}</div>
<div class="bar color-power-lesser-than-300" style="width: ${calculerPourcentage(output_more_than_200, count, true)}%">${output_more_than_200? output_more_than_200 : '' | ''}</div> <div class="bar color-power-lesser-than-300" style="width: ${calculerPourcentage(output_more_than_200, count, true)}%">${output_more_than_200 ? output_more_than_200 : '' | ''}</div>
<div class="bar color-power-lesser-than-max" style="width: ${calculerPourcentage(output_more_than_300, count, true)}%">${output_more_than_300 ? output_more_than_300 : ''}</div> <div class="bar color-power-lesser-than-max" style="width: ${calculerPourcentage(output_more_than_300, count, true)}%">${output_more_than_300 ? output_more_than_300 : ''}</div>
</div> </div>
` `
@ -315,7 +318,6 @@ function bindEventsOnJosmRemote() {
} }
function displayPointsFromApi(points = geojsondata) { function displayPointsFromApi(points = geojsondata) {
@ -337,6 +339,7 @@ function displayPointsFromApi(points = geojsondata) {
filter: function (feature, layer) { filter: function (feature, layer) {
let isPolygon = (feature.geometry) && (feature.geometry.type !== undefined) && (feature.geometry.type === 'Polygon') let isPolygon = (feature.geometry) && (feature.geometry.type !== undefined) && (feature.geometry.type === 'Polygon')
if (isPolygon) { if (isPolygon) {
console.log('polygon feature', feature)
feature.geometry.type = 'Point' feature.geometry.type = 'Point'
let polygonCenter = L.latLngBounds(feature.geometry.coordinates[0]).getCenter() let polygonCenter = L.latLngBounds(feature.geometry.coordinates[0]).getCenter()
feature.geometry.coordinates = [polygonCenter.lat, polygonCenter.lng] feature.geometry.coordinates = [polygonCenter.lat, polygonCenter.lng]
@ -350,137 +353,156 @@ function displayPointsFromApi(points = geojsondata) {
supprimerMarqueurs() supprimerMarqueurs()
displayPointsFromApi() displayPointsFromApi()
}, },
onEachFeature: function (feature, layer) { onEachFeature: eachFeature,
let 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']) {
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 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 zoom = map.getZoom()
let radius = 20
let opacity = 0.5
let ratio_circle = 10
// quand on est loin, montrer d'avantage de couleur, pas le centre
if (zoom < 13) {
ratio_circle = 5
}
else if (zoom < 15) {
ratio_circle = 1
opacity = 0.25
}
else if (zoom <= 16) {
ratio_circle = 0.5
}
else if (zoom <= 18) {
ratio_circle = 0.25
}
console.log('ratio_circle', ratio_circle)
radius = outPowerGuessed * ratio_circle
// 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 circle = L.circle(layer._latlng, {
color: color,
fillColor: color,
fillOpacity: opacity,
colorOpacity: opacity,
radius: radius
}).addTo(stations_bof)
// 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()
},
})
},
}) })
} }
function makePopupOfFeature(feature) {
let 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']) {
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>'
return popupContent;
}
function eachFeature(feature, layer) {
let link_josm = createJOSMEditLink(feature)
let popupContent = makePopupOfFeature(feature)
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>`
}
// 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>
<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 zoom = map.getZoom()
let radius = 20
let opacity = 0.5
let ratio_circle = 10
// quand on est loin, montrer d'avantage de couleur, pas le centre
if (zoom < 13) {
ratio_circle = 5
} else if (zoom < 15) {
ratio_circle = 1
opacity = 0.25
} else if (zoom <= 16) {
ratio_circle = 0.5
} 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
// } 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 circle = L.circle(layer._latlng, {
color: color,
fillColor: color,
fillOpacity: opacity,
colorOpacity: opacity,
radius: radius
}).addTo(all_stations_markers)
// 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
})
if (!outPowerGuessed) {
circle_center.bindTooltip("?" , {
permanent: true,
className: "my-label",
offset: [0, 0]
});
}
circle_center.addTo(all_stations_markers);
}
circle.bindPopup(html)
circle.on({
mouseover: function () {
this.openPopup()
bindEventsOnJosmRemote()
},
mouseout: function () {
// setTimeout(() => this.closePopup(), 15000)
},
click: function () {
this.openPopup()
bindEventsOnJosmRemote()
},
})
}
function makeCssClassFromTags(tags) { function makeCssClassFromTags(tags) {
let tagKeys = Object.keys(tags) let tagKeys = Object.keys(tags)
if (!tags) { if (!tags) {
@ -542,8 +564,8 @@ function loadOverpassQuery() {
let overpassApiUrl = buildOverpassApiUrl(map, queryTextfieldValue) let overpassApiUrl = buildOverpassApiUrl(map, queryTextfieldValue)
$.get(overpassApiUrl, function (geoDataPointsFromApi) { $.get(overpassApiUrl, function (geoDataPointsFromApi) {
supprimerMarqueurs() geojsondata = geoDataPointsFromApi
displayPointsFromApi(geoDataPointsFromApi) refreshDisplay()
$('#spinning_icon').fadeOut() $('#spinning_icon').fadeOut()
$('#message-loading').fadeOut() $('#message-loading').fadeOut()
isLoading = false isLoading = false
@ -551,6 +573,12 @@ function loadOverpassQuery() {
} }
} }
function refreshDisplay() {
supprimerMarqueurs()
console.log('geojsondata', geojsondata)
displayPointsFromApi(geojsondata)
}
function onMapMoveEnd() { function onMapMoveEnd() {
let center = map.getCenter() let center = map.getCenter()
@ -585,17 +613,20 @@ $(document).ready(function () {
// boutons de toggle et de cycle de visibilité // boutons de toggle et de cycle de visibilité
// //
$('#filterUnkown').on('click', function () { $('#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') showActiveFilter(display_unknown_max_power_station, '#filterUnkown')
refreshDisplay()
}) })
showActiveFilter(display_unknown_max_power_station, '#filterUnkown') showActiveFilter(display_unknown_max_power_station, '#filterUnkown')
}) })
function showActiveFilter(filterVariableName, selectorId) { function showActiveFilter(filterVariableName, selectorId) {
$(selectorId).attr('class', 'filter-state-' + filterVariableName ) $(selectorId).attr('class', 'filter-state-' + filterVariableName)
} }
function cycleVariableState(filterVariableName, selectorId) { function cycleVariableState(filterVariableName, selectorId) {
console.log('filterVariableName', filterVariableName, filterStatesAvailable)
if (filterVariableName) { if (filterVariableName) {
if (filterVariableName == filterStatesAvailable[0]) { if (filterVariableName == filterStatesAvailable[0]) {
filterVariableName = filterStatesAvailable[1] filterVariableName = filterStatesAvailable[1]
@ -609,6 +640,7 @@ function cycleVariableState(filterVariableName, selectorId) {
} }
showActiveFilter(filterVariableName, selectorId) showActiveFilter(filterVariableName, selectorId)
console.log('filterVariableName after', filterVariableName)
return filterVariableName return filterVariableName
} }

BIN
styles/images/layers.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 27 KiB

BIN
styles/images/map-marker.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
styles/images/marker-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

25
styles/style.css
View File

@ -346,16 +346,35 @@ button {
padding: 1rem 2rem; padding: 1rem 2rem;
border-radius: 0.25rem; 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{ .filter-group button.filter-state-hide{
color: #670a0a; /*color: #670a0a;*/
background: #fff; background: #fff;
} }
.filter-group button.filter-state-show{ .filter-group button.filter-state-show{
color: green; color: green;
background: #96b1ea; /*background: #96b1ea;*/
} }
.filter-group button.filter-state-showOnly{ .filter-group button.filter-state-showOnly{
color: orange; color: orange;
background: #96b1ea; /*background: #96b1ea;*/
} }