From f92721131b8872fcc54e1ce51d0cdec6f5d863b0 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Mon, 23 Dec 2024 00:02:46 +0100
Subject: [PATCH] opengraph image, icon on menu

---
 index.html       | 48 +++++++++++++++++++++++++++++-------------------
 js/config.js     |  2 +-
 js/main.js       | 15 ++++++---------
 styles/style.css |  6 +++++-
 4 files changed, 41 insertions(+), 30 deletions(-)
diff --git a/index.html b/index.html
index d4b2196..bf1e57f 100644
--- a/index.html
+++ b/index.html
@@ -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>
 
 
diff --git a/js/config.js b/js/config.js
index 9d9422c..de9ff23 100644
--- a/js/config.js
+++ b/js/config.js
@@ -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'
diff --git a/js/main.js b/js/main.js
index 9c2df2e..4d50a07 100644
--- a/js/main.js
+++ b/js/main.js
@@ -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) {
diff --git a/styles/style.css b/styles/style.css
index 5c92c3f..cd2ab86 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -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;
 }
\ No newline at end of file
