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

opengraph image, icon on menu

Browse Source
This commit is contained in:
Tykayn 2024-12-23 00:02:46 +01:00 committed by tykayn
parent 0d940850b5
commit f92721131b
4 changed files with 41 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
index.html
View File

@ -3,12 +3,20 @@
<head>
<title>LibreChargeMap - OSM Bliss</title>
<meta charset='utf-8'>
<meta property="og:type" content="website">
<meta property="og:title" content="LibreChargeMap - OSM Bliss">
<meta property="og:description" content="Carte mondiale visualisant les bornes de recharges pour véhicule électrique à partir des données OpenStreetMap.">
<meta property="og:image" content="https://libre-charge-map.cipherbliss.com/libre-charge-map_overview.jpg">
<meta property="og:image:width" content="3436">
<meta property="og:image:height" content="1086">
<meta
name='viewport'
content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
<link
rel='stylesheet'
href='styles/leaflet.css'/>
<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch@3.1.0/dist/geosearch.css"/>
<link
rel='stylesheet'
href='styles/style.css'/>
@ -119,24 +127,24 @@
<button id="filterUnkown">kW max inconnu</button>
<button id="filterChelou">les valeurs chelou</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>-->
<!-- 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 -->
@ -168,11 +176,13 @@
</div>
<script src='js/leaflet.js'></script>
<script src='js/jquery-3.2.1.min.js'></script>
<script src="https://unpkg.com/leaflet-geosearch@3.1.0/dist/bundle.min.js"></script>
<script src='js/osmtogeojson.js'></script>
<script
type='module'
src='js/main.js'></script>
<script>

2
js/config.js
View File

@ -5,7 +5,7 @@ const config = {
initialZoom : 12,
tileServers:{
osm : 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
cycle : 'https://{s}.tile.opencyclemap.org/{z}/{x}/{y}.png',
cycle : 'https://{s}.tile.thunderforest.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'

15
js/main.js
View File

@ -12,8 +12,6 @@ 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
@ -318,10 +316,12 @@ function bindEventsOnJosmRemote() {
}
function displayPointsFromApi(points = geojsondata) {
function displayPointsFromApi(points) {
geojsondata = osmtogeojson(points)
if (points) {
geojsondata = osmtogeojson(points)
}
// console.log('resultAsGeojson', geojsondata)
displayStatsFromGeoJson(geojsondata)
@ -475,7 +475,7 @@ function eachFeature(feature, layer) {
})
if (!outPowerGuessed) {
circle_center.bindTooltip("?" , {
circle_center.bindTooltip("?", {
permanent: true,
className: "my-label",
offset: [0, 0]
@ -526,10 +526,6 @@ function getIconFromTags(tags) {
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
@ -619,6 +615,7 @@ $(document).ready(function () {
refreshDisplay()
})
showActiveFilter(display_unknown_max_power_station, '#filterUnkown')
})
function showActiveFilter(filterVariableName, selectorId) {

6
styles/style.css
View File

@ -330,7 +330,7 @@ button {
.socket-counter {
background: #dedede;
margin-top: 1rem;
margin-left: -1rem;
margin-left: -0.25rem;
border-radius: 1rem;
padding: 0.25rem;
}
@ -377,4 +377,8 @@ button {
.filter-group button.filter-state-showOnly{
color: orange;
/*background: #96b1ea;*/
}
.leaflet-control-layers-toggle{
background-size:contain;
}