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> <head>
<title>LibreChargeMap - OSM Bliss</title> <title>LibreChargeMap - OSM Bliss</title>
<meta charset='utf-8'> <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 <meta
name='viewport' name='viewport'
content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'> content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
<link <link
rel='stylesheet' rel='stylesheet'
href='styles/leaflet.css'/> href='styles/leaflet.css'/>
<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch@3.1.0/dist/geosearch.css"/>
<link <link
rel='stylesheet' rel='stylesheet'
href='styles/style.css'/> href='styles/style.css'/>
@ -119,24 +127,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>
<!-- TODO add more filters--> <!-- TODO add more filters-->
<!-- <div class="filter-group">--> <!-- <div class="filter-group">-->
<!-- prise:--> <!-- prise:-->
<!-- <button id="filterType2">type 2</button>--> <!-- <button id="filterType2">type 2</button>-->
<!-- <button id="filterType2_cable">type 2 avec câble</button>--> <!-- <button id="filterType2_cable">type 2 avec câble</button>-->
<!-- <button id="filterType2_combo">type CCS</button>--> <!-- <button id="filterType2_combo">type CCS</button>-->
<!-- <button id="filterType2_combo_cable">type CCS avec câble</button>--> <!-- <button id="filterType2_combo_cable">type CCS avec câble</button>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="filter-group">--> <!-- <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 -->
@ -168,11 +176,13 @@
</div> </div>
<script src='js/leaflet.js'></script> <script src='js/leaflet.js'></script>
<script src='js/jquery-3.2.1.min.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 src='js/osmtogeojson.js'></script>
<script <script
type='module' type='module'
src='js/main.js'></script> src='js/main.js'></script>
<script> <script>

2
js/config.js
View File

@ -5,7 +5,7 @@ const config = {
initialZoom : 12, initialZoom : 12,
tileServers:{ tileServers:{
osm : 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 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', 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', stamen : 'https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',
transport : '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 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
@ -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) // console.log('resultAsGeojson', geojsondata)
displayStatsFromGeoJson(geojsondata) displayStatsFromGeoJson(geojsondata)
@ -475,7 +475,7 @@ function eachFeature(feature, layer) {
}) })
if (!outPowerGuessed) { if (!outPowerGuessed) {
circle_center.bindTooltip("?" , { circle_center.bindTooltip("?", {
permanent: true, permanent: true,
className: "my-label", className: "my-label",
offset: [0, 0] offset: [0, 0]
@ -526,10 +526,6 @@ function getIconFromTags(tags) {
return iconFileName 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) { function toggleMinPower(showHighPower) {
console.log('toggle', showHighPower) console.log('toggle', showHighPower)
showHighPower = !showHighPower showHighPower = !showHighPower
@ -619,6 +615,7 @@ $(document).ready(function () {
refreshDisplay() refreshDisplay()
}) })
showActiveFilter(display_unknown_max_power_station, '#filterUnkown') showActiveFilter(display_unknown_max_power_station, '#filterUnkown')
}) })
function showActiveFilter(filterVariableName, selectorId) { function showActiveFilter(filterVariableName, selectorId) {

6
styles/style.css
View File

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