display ? on unknown
This commit is contained in:
parent
d2154d9120
commit
0d940850b5
36
index.html
36
index.html
@ -119,24 +119,24 @@
|
||||
<button id="filterUnkown">kW max inconnu</button>
|
||||
<button id="filterChelou">les valeurs chelou</button>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
prise:
|
||||
<button id="filterType2">type 2</button>
|
||||
<button id="filterType2_cable">type 2 avec câble</button>
|
||||
<button id="filterType2_combo">type CCS</button>
|
||||
<button id="filterType2_combo_cable">type CCS avec câble</button>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
|
||||
puissance:
|
||||
<button id="filterLower50kw">- de 50kW</button>
|
||||
<button id="filterUpper50kw">+ de 50kW</button>
|
||||
<button id="filterLower200kw">- de 200 kW</button>
|
||||
<button id="filterUpper200kw">+ de 200 kW</button>
|
||||
<button class="button" id="toggle_high_power">
|
||||
fais voir les plus de 300kW CCS, j'ai pas le time!
|
||||
</button>
|
||||
</div>
|
||||
<!-- TODO add more filters-->
|
||||
<!-- <div class="filter-group">-->
|
||||
<!-- prise:-->
|
||||
<!-- <button id="filterType2">type 2</button>-->
|
||||
<!-- <button id="filterType2_cable">type 2 avec câble</button>-->
|
||||
<!-- <button id="filterType2_combo">type CCS</button>-->
|
||||
<!-- <button id="filterType2_combo_cable">type CCS avec câble</button>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="filter-group">-->
|
||||
<!-- puissance:-->
|
||||
<!-- <button id="filterLower50kw">- de 50kW</button>-->
|
||||
<!-- <button id="filterUpper50kw">+ de 50kW</button>-->
|
||||
<!-- <button id="filterLower200kw">- de 200 kW</button>-->
|
||||
<!-- <button id="filterUpper200kw">+ de 200 kW</button>-->
|
||||
<!-- <button class="button" id="toggle_high_power">-->
|
||||
<!-- fais voir les plus de 300kW CCS, j'ai pas le time!-->
|
||||
<!-- </button>-->
|
||||
<!-- </div>-->
|
||||
<br>
|
||||
<!-- TODO filtrer les bornes selon la puissance -->
|
||||
|
||||
|
||||
@ -2,6 +2,13 @@ const config = {
|
||||
osmMention:'© <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
||||
showHighPower : true,
|
||||
overrideQuery : true,
|
||||
initialZoom : 12
|
||||
initialZoom : 12,
|
||||
tileServers:{
|
||||
osm : 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
cycle : 'https://{s}.tile.opencyclemap.org/{z}/{x}/{y}.png',
|
||||
cartodb : 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
|
||||
stamen : 'https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',
|
||||
transport : 'https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png'
|
||||
}
|
||||
}
|
||||
export default config
|
||||
|
||||
322
js/main.js
322
js/main.js
@ -11,13 +11,15 @@ import colorUtils from './color-utils.js'
|
||||
console.log('config', config)
|
||||
let geojsondata
|
||||
|
||||
|
||||
|
||||
|
||||
// serveurs de tuiles: https://wiki.openstreetmap.org/wiki/Tile_servers
|
||||
// https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png
|
||||
// https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png
|
||||
// https://tile.openstreetmap.org/{z}/{x}/{y}.png
|
||||
// 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'
|
||||
const tileServer = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'
|
||||
const tileServer_stamen = 'https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png'
|
||||
|
||||
|
||||
// Créer la carte centrée sur Rouen
|
||||
// Liste des 20 villes les plus peuplées de France avec leurs coordonnées géographiques
|
||||
@ -31,6 +33,8 @@ L.control.scale().addTo(map)
|
||||
* à appliquer à chaque rafraîchissement des points geojson
|
||||
* TODO: make buttons and filter in refresh circles
|
||||
*/
|
||||
let filterStatesAvailable = ['hide', 'show', 'showOnly']
|
||||
|
||||
let display_type2_sockets = 'show';
|
||||
let display_type2_combo_sockets = 'show';
|
||||
let display_unknown_max_power_station = 'show';
|
||||
@ -42,7 +46,6 @@ let display_lower_than_200kw = 'show';
|
||||
let display_higer_than_200kw = 'show';
|
||||
let display_chelou = 'show'; // les stations avec une valeur suspecte, plus de 400kW
|
||||
|
||||
let filterStatesAvailable = ['hide', 'show', 'showOnly']
|
||||
|
||||
function setRandomView() {
|
||||
console.log('set random view')
|
||||
@ -81,29 +84,28 @@ function updateURLWithMapCoordinatesAndZoom() {
|
||||
|
||||
// Construit l'URL avec les paramètres de coordonnées et de zoom
|
||||
const url = `#coords=1&lat=${center.lat}&lng=${center.lng}&zoom=${zoom}`
|
||||
// console.log('updateURLWithMapCoordinatesAndZoom url', url)
|
||||
// Met à jour l'URL de la page
|
||||
history.replaceState(null, null, url)
|
||||
}
|
||||
|
||||
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
var osm = L.tileLayer(config.tileServers.osm, {
|
||||
attribution: config.osmMention + '© <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 + '© <a href="https://www.opencyclemap.org/">OpenCycleMap</a> contributors'
|
||||
})
|
||||
|
||||
var transport = L.tileLayer('https://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png', {
|
||||
var transport = L.tileLayer(config.tileServers.transport, {
|
||||
attribution: config.osmMention
|
||||
})
|
||||
|
||||
let tileGrey =
|
||||
L.tileLayer(tileServer, {
|
||||
L.tileLayer(config.tileServers.cartodb, {
|
||||
attribution: config.osmMention
|
||||
})
|
||||
let stamen =
|
||||
L.tileLayer(tileServer_stamen, {
|
||||
L.tileLayer(config.tileServers.stamen, {
|
||||
attribution: config.osmMention
|
||||
})
|
||||
var baseLayers = {
|
||||
@ -114,10 +116,10 @@ var baseLayers = {
|
||||
'Transport': transport
|
||||
}
|
||||
|
||||
let stations_bof = L.layerGroup().addTo(map) // layer group pour tous les marqueurs
|
||||
let all_stations_markers = L.layerGroup().addTo(map) // layer group pour tous les marqueurs
|
||||
let stations_much_speed_wow = L.layerGroup().addTo(map) // layer group des stations rapides
|
||||
|
||||
let overlays = {stations_bof, stations_much_speed_wow} // Si vous avez des calques superposables, ajoutez-les ici
|
||||
let overlays = {stations_bof: all_stations_markers, stations_much_speed_wow} // Si vous avez des calques superposables, ajoutez-les ici
|
||||
|
||||
const layerControl = L.control.layers(baseLayers, overlays, {collapsed: true}).addTo(map)
|
||||
tileGrey.addTo(map)
|
||||
@ -146,6 +148,7 @@ function buildOverpassApiUrl(map, overpassQuery) {
|
||||
const tags_to_display_in_popup = [
|
||||
'name',
|
||||
'capacity',
|
||||
'description',
|
||||
'date_start',
|
||||
'charging_station:output',
|
||||
'socket:type_2',
|
||||
@ -184,7 +187,7 @@ function createJOSMEditLink(feature) {
|
||||
}
|
||||
|
||||
function supprimerMarqueurs() {
|
||||
stations_bof.clearLayers()
|
||||
all_stations_markers.clearLayers()
|
||||
stations_much_speed_wow.clearLayers()
|
||||
|
||||
map.eachLayer((layer) => {
|
||||
@ -279,7 +282,7 @@ function displayStatsFromGeoJson(resultAsGeojson) {
|
||||
<div class="bar color-power-lesser-than-50" style="width: ${calculerPourcentage(count_station_outputoutput_between_1_and_50, count, true)}%">${count_station_outputoutput_between_1_and_50 ? count_station_outputoutput_between_1_and_50 : ''}</div>
|
||||
<div class="bar color-power-lesser-than-100" style="width: ${calculerPourcentage(output_more_than_50, count, true)}%">${output_more_than_50 ? output_more_than_50 : ''}</div>
|
||||
<div class="bar color-power-lesser-than-200" style="width: ${calculerPourcentage(output_more_than_100, count, true)}%">${output_more_than_100 ? output_more_than_100 : ''}</div>
|
||||
<div class="bar color-power-lesser-than-300" style="width: ${calculerPourcentage(output_more_than_200, count, true)}%">${output_more_than_200? output_more_than_200 : '' | ''}</div>
|
||||
<div class="bar color-power-lesser-than-300" style="width: ${calculerPourcentage(output_more_than_200, count, true)}%">${output_more_than_200 ? output_more_than_200 : '' | ''}</div>
|
||||
<div class="bar color-power-lesser-than-max" style="width: ${calculerPourcentage(output_more_than_300, count, true)}%">${output_more_than_300 ? output_more_than_300 : ''}</div>
|
||||
</div>
|
||||
`
|
||||
@ -315,7 +318,6 @@ function bindEventsOnJosmRemote() {
|
||||
}
|
||||
|
||||
|
||||
|
||||
function displayPointsFromApi(points = geojsondata) {
|
||||
|
||||
|
||||
@ -337,6 +339,7 @@ function displayPointsFromApi(points = geojsondata) {
|
||||
filter: function (feature, layer) {
|
||||
let isPolygon = (feature.geometry) && (feature.geometry.type !== undefined) && (feature.geometry.type === 'Polygon')
|
||||
if (isPolygon) {
|
||||
console.log('polygon feature', feature)
|
||||
feature.geometry.type = 'Point'
|
||||
let polygonCenter = L.latLngBounds(feature.geometry.coordinates[0]).getCenter()
|
||||
feature.geometry.coordinates = [polygonCenter.lat, polygonCenter.lng]
|
||||
@ -350,137 +353,156 @@ function displayPointsFromApi(points = geojsondata) {
|
||||
supprimerMarqueurs()
|
||||
displayPointsFromApi()
|
||||
},
|
||||
onEachFeature: function (feature, layer) {
|
||||
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()
|
||||
},
|
||||
})
|
||||
},
|
||||
onEachFeature: eachFeature,
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
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) {
|
||||
let tagKeys = Object.keys(tags)
|
||||
if (!tags) {
|
||||
@ -542,8 +564,8 @@ function loadOverpassQuery() {
|
||||
let overpassApiUrl = buildOverpassApiUrl(map, queryTextfieldValue)
|
||||
|
||||
$.get(overpassApiUrl, function (geoDataPointsFromApi) {
|
||||
supprimerMarqueurs()
|
||||
displayPointsFromApi(geoDataPointsFromApi)
|
||||
geojsondata = geoDataPointsFromApi
|
||||
refreshDisplay()
|
||||
$('#spinning_icon').fadeOut()
|
||||
$('#message-loading').fadeOut()
|
||||
isLoading = false
|
||||
@ -551,6 +573,12 @@ function loadOverpassQuery() {
|
||||
}
|
||||
}
|
||||
|
||||
function refreshDisplay() {
|
||||
supprimerMarqueurs()
|
||||
console.log('geojsondata', geojsondata)
|
||||
displayPointsFromApi(geojsondata)
|
||||
}
|
||||
|
||||
|
||||
function onMapMoveEnd() {
|
||||
let center = map.getCenter()
|
||||
@ -585,17 +613,20 @@ $(document).ready(function () {
|
||||
// boutons de toggle et de cycle de visibilité
|
||||
//
|
||||
$('#filterUnkown').on('click', function () {
|
||||
cycleVariableState(display_unknown_max_power_station, '#filterUnkown')
|
||||
console.log('filterUnkown', filterUnkown)
|
||||
display_unknown_max_power_station = cycleVariableState(display_unknown_max_power_station, '#filterUnkown')
|
||||
showActiveFilter(display_unknown_max_power_station, '#filterUnkown')
|
||||
refreshDisplay()
|
||||
})
|
||||
showActiveFilter(display_unknown_max_power_station, '#filterUnkown')
|
||||
})
|
||||
|
||||
function showActiveFilter(filterVariableName, selectorId) {
|
||||
$(selectorId).attr('class', 'filter-state-' + filterVariableName )
|
||||
$(selectorId).attr('class', 'filter-state-' + filterVariableName)
|
||||
}
|
||||
|
||||
function cycleVariableState(filterVariableName, selectorId) {
|
||||
console.log('filterVariableName', filterVariableName, filterStatesAvailable)
|
||||
if (filterVariableName) {
|
||||
if (filterVariableName == filterStatesAvailable[0]) {
|
||||
filterVariableName = filterStatesAvailable[1]
|
||||
@ -609,6 +640,7 @@ function cycleVariableState(filterVariableName, selectorId) {
|
||||
}
|
||||
showActiveFilter(filterVariableName, selectorId)
|
||||
|
||||
console.log('filterVariableName after', filterVariableName)
|
||||
return filterVariableName
|
||||
}
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.6 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
BIN
styles/images/marker-icon.png
Normal file
BIN
styles/images/marker-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
@ -346,16 +346,35 @@ button {
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.filter-group button:after{
|
||||
position: relative;
|
||||
float:right;
|
||||
left: 1rem;
|
||||
top: 1rem;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.filter-group button.filter-state-hide:after{
|
||||
content: "cacher";
|
||||
color: grey;
|
||||
}
|
||||
.filter-group button.filter-state-show:after{
|
||||
content: "montrer";
|
||||
color: green;
|
||||
}
|
||||
.filter-group button.filter-state-showOnly:after{
|
||||
content: "montrer uniquement";
|
||||
color: orange;
|
||||
}
|
||||
.filter-group button.filter-state-hide{
|
||||
color: #670a0a;
|
||||
/*color: #670a0a;*/
|
||||
background: #fff;
|
||||
}
|
||||
.filter-group button.filter-state-show{
|
||||
color: green;
|
||||
background: #96b1ea;
|
||||
/*background: #96b1ea;*/
|
||||
|
||||
}
|
||||
.filter-group button.filter-state-showOnly{
|
||||
color: orange;
|
||||
background: #96b1ea;
|
||||
/*background: #96b1ea;*/
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user