libre-charge-map/index.html

<!DOCTYPE html>
<html lang='fr'>
<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'/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=5.0">
    <link rel="shortcut icon" href="img/french.png">
</head>
<body class="side-panel-open">


<header>
    <h1>
        <img class="icon-img" src="img/prise-de-courant.png" alt="prise"> Libre Charge Map
    </h1>
</header>
<main>

    <button id="toggleSidePanel">
        ☰
    </button>
    <div id="zoomMessage">
        Zoomez pour voir les stations de recharge
    </div>
    <div class="research_display">
                <div id='spinning_icon'> 
                    <svg
                            id='star'
                            width='4cm'
                            height='4cm'
                            viewBox='0 0 700 400'
                            xmlns='http://www.w3.org/2000/svg'
                            version='1.1'>
                        <polygon
                        fill='red'
                        stroke='red'
                                stroke-width='10'
                                points='350,75  379,161 469,161 397,215
                                423,301 350,250 277,301 303,215
                                231,161 321,161'/>
                                
                            </svg>
                </div>
            </div>
<div id='map'>
    
    <div class='leaflet-control-container'>
        <div class='leaflet-top leaflet-right'>
            
            
        </div>
    </div>
    
</div>
</main>
<div class="side-panel">
    
    <div id="bars_power">
    </div>
    <div id="round_power_legend">
        <br>
        <span class="marker-demo">
            <span class="map-marker-circle-demo color-unknown"></span> ?
        </span>
        <span class="marker-demo">
            <span class="map-marker-circle-demo color-1"></span> > 7 kW
        </span>
        <span class="marker-demo">
            <span class="map-marker-circle-demo color-2"></span> > 20 kW
        </span>
        <span class="marker-demo">
            <span class="map-marker-circle-demo color-3"></span> > 50 kW
        </span>
        <span class="marker-demo">
            <span class="map-marker-circle-demo color-4"></span> > 100 kW
        </span>
        <span class="marker-demo">
            <span class="map-marker-circle-demo color-5"></span> > 200 kW
        </span>
        <span class="marker-demo">
            <span class="map-marker-circle-demo color-6"></span> > 300 kW
        </span>
    </div>

    <p>Cartes des stations de recharge pour véhicules électriques basée sur les données collaborative <a
            href="https://openstreetmap.org">OpenStreetMap</a></p>
            <form  onclick="searchLocation()">
                <input type="text" id="searchLocation" placeholder="Rechercher un lieu" class="search-input">
                <button id="searchButton" class="rounded-button">🔍 Rechercher</button>
            </form>
    <button id="removeMarkers" class="rounded-button">
        🗑️ Effacer les marqueurs
    </button>
    <button id="chercherButton" class="rounded-button">
        🔄 Recharger
    </button>
    <button id="setRandomView" class="rounded-button">
        🎲 Une ville au hasard
    </button>
    <button id="sendToJOSM" class="rounded-button">
        🗺️ Éditer dans JOSM
    </button>
    <button id="shareUrl" class="rounded-button">
        📤 Partager l'URL
    </button>

<!--    <button id="toggle">-->
<!--        toggle : montrer les stations avec à minima 150kW de puissance dispo-->
<!--    </button>-->


    <div id="infos_carte"></div>
    
    <div id="filters">
        <h2>
            🔍 Filtres:
        </h2>
        <div class="filter-group">
            qualité
            <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>-->
        <br>
        <!--        TODO filtrer les bornes selon la puissance -->


    </div>

    <div id="statsChargingStation">

        <h2 id="toggle-stats" style="cursor: pointer;">
            Puissances des stations: 🔽
        </h2>
        
        <div id="found_charging_stations">
            
        </div>
    </div>
    <hr>
    <h2 class="title">
        À propos de ce plan</h2>
    <p>
        La carte thématique proposant des points de charge pour véhicule électrique, basée sur les données
        d'OpenStreetMap.
    </p>
    <br>
    Fait par <a href="https://mastodon.cipherbliss.com/@tykayn">Tykayn</a> - <a href="https://www.cipherbliss.com">www.cipherbliss.com</a>.
    <a href="https://forge.chapril.org/tykayn/">Sources disponibles sur la forge du Chapril.</a>
    <div class="icones">
        <img class="icon-img" src="img/Type2_Connector_Outline.svg" alt="type2">

        <img class="icon-img" src="img/type2_combo.svg" alt="prise">
        <img class="icon-img" src="img/Type2_socket.svg" alt="prise">
        <img class="icon-img" src="img/socket_typee.svg" alt="prise">
        <img class="icon-img" src="img/chademo.svg" alt="prise">
    </div>
    <br>
    icones
    câble électrique <a href="https://www.flaticon.com/fr/icones-gratuites/energie" title="energie icônes">Energie
    icônes créées par rukanicon - Flaticon</a>
    
</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>


</script>
</body>
</html>
init depuis meltingpot 2024-10-17 15:01:47 +02:00			`<!DOCTYPE html>`
red dots 2024-10-17 23:57:47 +02:00			`<html lang='fr'>`
			`<head>`
			`<title>LibreChargeMap - OSM Bliss</title>`
			`<meta charset='utf-8'>`
opengraph image, icon on menu 2024-12-23 00:02:46 +01:00			`<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">`

init depuis meltingpot 2024-10-17 15:01:47 +02:00			`<meta`
			`name='viewport'`
red dots 2024-10-17 23:57:47 +02:00			`content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>`
init depuis meltingpot 2024-10-17 15:01:47 +02:00			`<link`
			`rel='stylesheet'`
red dots 2024-10-17 23:57:47 +02:00			`href='styles/leaflet.css'/>`
opengraph image, icon on menu 2024-12-23 00:02:46 +01:00			`<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch@3.1.0/dist/geosearch.css"/>`
init depuis meltingpot 2024-10-17 15:01:47 +02:00			`<link`
			`rel='stylesheet'`
red dots 2024-10-17 23:57:47 +02:00			`href='styles/style.css'/>`
			`<meta name="viewport"`
			`content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=5.0">`
init depuis meltingpot 2024-10-17 15:01:47 +02:00			`<link rel="shortcut icon" href="img/french.png">`
red dots 2024-10-17 23:57:47 +02:00			`</head>`
responsive style 2024-12-28 17:59:15 +01:00			`<body class="side-panel-open">`
init depuis meltingpot 2024-10-17 15:01:47 +02:00

up 2024-12-28 17:00:21 +01:00			`<header>`
			`<h1>`
			`<img class="icon-img" src="img/prise-de-courant.png" alt="prise"> Libre Charge Map`
			`</h1>`
			`</header>`
			`<main>`

			`<button id="toggleSidePanel">`
			`☰`
			`</button>`
up bandeau latéral 2024-12-28 13:29:29 +01:00			`<div id="zoomMessage">`
			`Zoomez pour voir les stations de recharge`
			`</div>`
up 2024-12-28 17:00:21 +01:00			`<div class="research_display">`
up bandeau latéral 2024-12-28 13:29:29 +01:00			`<div id='spinning_icon'>`
init depuis meltingpot 2024-10-17 15:01:47 +02:00			`<svg`
			`id='star'`
			`width='4cm'`
			`height='4cm'`
			`viewBox='0 0 700 400'`
			`xmlns='http://www.w3.org/2000/svg'`
red dots 2024-10-17 23:57:47 +02:00			`version='1.1'>`
init depuis meltingpot 2024-10-17 15:01:47 +02:00			`<polygon`
up 2024-12-28 17:00:21 +01:00			`fill='red'`
			`stroke='red'`
init depuis meltingpot 2024-10-17 15:01:47 +02:00			`stroke-width='10'`
			`points='350,75 379,161 469,161 397,215`
up 2024-12-28 17:00:21 +01:00			`423,301 350,250 277,301 303,215`
			`231,161 321,161'/>`

			`</svg>`
red dots 2024-10-17 23:57:47 +02:00			`</div>`
init depuis meltingpot 2024-10-17 15:01:47 +02:00			`</div>`
up 2024-12-28 17:00:21 +01:00			`<div id='map'>`

			`<div class='leaflet-control-container'>`
			`<div class='leaflet-top leaflet-right'>`


red dots 2024-10-17 23:57:47 +02:00			`</div>`
			`</div>`
up 2024-12-28 17:00:21 +01:00
init depuis meltingpot 2024-10-17 15:01:47 +02:00			`</div>`
up 2024-12-28 17:00:21 +01:00			`</main>`
up bandeau latéral 2024-12-28 13:29:29 +01:00			`<div class="side-panel">`
up 2024-12-28 17:00:21 +01:00
add icons 2024-12-16 12:13:19 +01:00			`<div id="bars_power">`
			`</div>`
up remote link 2024-12-12 09:50:54 +01:00			`<div id="round_power_legend">`
display stats 2024-12-11 17:32:48 +01:00			`<br>`
			`<span class="marker-demo">`
			`<span class="map-marker-circle-demo color-unknown"></span> ?`
			`</span>`
			`<span class="marker-demo">`
			`<span class="map-marker-circle-demo color-1"></span> > 7 kW`
			`</span>`
			`<span class="marker-demo">`
			`<span class="map-marker-circle-demo color-2"></span> > 20 kW`
			`</span>`
			`<span class="marker-demo">`
			`<span class="map-marker-circle-demo color-3"></span> > 50 kW`
			`</span>`
			`<span class="marker-demo">`
			`<span class="map-marker-circle-demo color-4"></span> > 100 kW`
			`</span>`
			`<span class="marker-demo">`
			`<span class="map-marker-circle-demo color-5"></span> > 200 kW`
			`</span>`
			`<span class="marker-demo">`
			`<span class="map-marker-circle-demo color-6"></span> > 300 kW`
			`</span>`
			`</div>`
add icons 2024-12-16 12:13:19 +01:00
			`<p>Cartes des stations de recharge pour véhicules électriques basée sur les données collaborative <a`
			`href="https://openstreetmap.org">OpenStreetMap</a></p>`
responsive style 2024-12-28 17:59:15 +01:00			`<form onclick="searchLocation()">`
			`<input type="text" id="searchLocation" placeholder="Rechercher un lieu" class="search-input">`
			`<button id="searchButton" class="rounded-button">🔍 Rechercher</button>`
			`</form>`
buttons style 2024-12-23 00:32:17 +01:00			`<button id="removeMarkers" class="rounded-button">`
bouton ville au hasard, chercher 2024-12-23 00:30:04 +01:00			`🗑️ Effacer les marqueurs`
add icons 2024-12-16 12:13:19 +01:00			`</button>`
buttons style 2024-12-23 00:32:17 +01:00			`<button id="chercherButton" class="rounded-button">`
bouton ville au hasard, chercher 2024-12-23 00:30:04 +01:00			`🔄 Recharger`
			`</button>`
buttons style 2024-12-23 00:32:17 +01:00			`<button id="setRandomView" class="rounded-button">`
bouton ville au hasard, chercher 2024-12-23 00:30:04 +01:00			`🎲 Une ville au hasard`
add icons 2024-12-16 12:13:19 +01:00			`</button>`
up 2024-12-28 17:00:21 +01:00			`<button id="sendToJOSM" class="rounded-button">`
			`🗺️ Éditer dans JOSM`
			`</button>`
responsive style 2024-12-28 17:59:15 +01:00			`<button id="shareUrl" class="rounded-button">`
			`📤 Partager l'URL`
			`</button>`
add icons 2024-12-16 12:13:19 +01:00
bouton ville au hasard, chercher 2024-12-23 00:30:04 +01:00			`<!-- <button id="toggle">-->`
			`<!-- toggle : montrer les stations avec à minima 150kW de puissance dispo-->`
			`<!-- </button>-->`

add icons 2024-12-16 12:13:19 +01:00
up remote link 2024-12-12 09:50:54 +01:00			`<div id="infos_carte"></div>`
up 2024-12-28 17:00:21 +01:00
change display depending on zoom, start filter cycle 2024-12-22 00:02:33 +01:00			`<div id="filters">`
up 2024-12-28 17:00:21 +01:00			`<h2>`
			`🔍 Filtres:`
			`</h2>`
change display depending on zoom, start filter cycle 2024-12-22 00:02:33 +01:00			`<div class="filter-group">`
			`qualité`
			`<button id="filterUnkown">kW max inconnu</button>`
			`<button id="filterChelou">les valeurs chelou</button>`
			`</div>`
opengraph image, icon on menu 2024-12-23 00:02:46 +01:00			`<!-- 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>-->`
change display depending on zoom, start filter cycle 2024-12-22 00:02:33 +01:00			`<br>`
			`<!-- TODO filtrer les bornes selon la puissance -->`

up remote link 2024-12-12 09:50:54 +01:00
			`</div>`
change display depending on zoom, start filter cycle 2024-12-22 00:02:33 +01:00
up bandeau latéral 2024-12-28 13:29:29 +01:00			`<div id="statsChargingStation">`
display stats 2024-12-11 17:32:48 +01:00
up bandeau latéral 2024-12-28 13:29:29 +01:00			`<h2 id="toggle-stats" style="cursor: pointer;">`
			`Puissances des stations: 🔽`
			`</h2>`

			`<div id="found_charging_stations">`

			`</div>`
red dots 2024-10-17 23:57:47 +02:00			`</div>`
change display depending on zoom, start filter cycle 2024-12-22 00:02:33 +01:00			`<hr>`
red dots 2024-10-17 23:57:47 +02:00			`<h2 class="title">`
			`À propos de ce plan</h2>`
			`<p>`
			`La carte thématique proposant des points de charge pour véhicule électrique, basée sur les données`
			`d'OpenStreetMap.`
			`</p>`
			`<br>`
			`Fait par <a href="https://mastodon.cipherbliss.com/@tykayn">Tykayn</a> - <a href="https://www.cipherbliss.com">www.cipherbliss.com</a>.`
			`<a href="https://forge.chapril.org/tykayn/">Sources disponibles sur la forge du Chapril.</a>`
responsive style 2024-12-28 17:59:15 +01:00			`<div class="icones">`
			`<img class="icon-img" src="img/Type2_Connector_Outline.svg" alt="type2">`
red dots 2024-10-17 23:57:47 +02:00
responsive style 2024-12-28 17:59:15 +01:00			`<img class="icon-img" src="img/type2_combo.svg" alt="prise">`
			`<img class="icon-img" src="img/Type2_socket.svg" alt="prise">`
			`<img class="icon-img" src="img/socket_typee.svg" alt="prise">`
			`<img class="icon-img" src="img/chademo.svg" alt="prise">`
			`</div>`
add icons 2024-12-16 12:13:19 +01:00			`<br>`
			`icones`
change display depending on zoom, start filter cycle 2024-12-22 00:02:33 +01:00			`câble électrique <a href="https://www.flaticon.com/fr/icones-gratuites/energie" title="energie icônes">Energie`
			`icônes créées par rukanicon - Flaticon</a>`
responsive style 2024-12-28 17:59:15 +01:00
red dots 2024-10-17 23:57:47 +02:00			`</div>`
			`<script src='js/leaflet.js'></script>`
			`<script src='js/jquery-3.2.1.min.js'></script>`
opengraph image, icon on menu 2024-12-23 00:02:46 +01:00
			`<script src="https://unpkg.com/leaflet-geosearch@3.1.0/dist/bundle.min.js"></script>`

red dots 2024-10-17 23:57:47 +02:00			`<script src='js/osmtogeojson.js'></script>`
init depuis meltingpot 2024-10-17 15:01:47 +02:00			`<script`
			`type='module'`
red dots 2024-10-17 23:57:47 +02:00			`src='js/main.js'></script>`
init depuis meltingpot 2024-10-17 15:01:47 +02:00			`<script>`


			`</script>`
			`</body>`
			`</html>`