refacto naming exports js librechargemap with lcm_ prefix
This commit is contained in:
parent
7100bc1d52
commit
c194a858b1
@ -20,7 +20,7 @@ La carte ne charge les points que si on se trouve à un zoom assez proche. Vous
|
||||
|
||||
Chaque point dispose d'un lien dans une popup d'information, afin de modifier le dit point d'intérêt sur le site d'OSM ou dans l'éditeur JOSM si vous l'avez ouvert et activé la télécommande.
|
||||
|
||||
Toute la logique est dans js/main.js
|
||||
Toute la logique est dans js/lcm_main.js
|
||||
Vous pouvez modifier les paramètres en entête de fichier pour choisir les tuiles de la carte, le lieu de départ, des données de points pré chargées...
|
||||
|
||||
# statistiques
|
||||
|
||||
78
index.html
78
index.html
@ -5,7 +5,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: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">
|
||||
@ -41,38 +42,38 @@
|
||||
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
|
||||
<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
|
||||
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'>
|
||||
|
||||
|
||||
|
||||
</svg>
|
||||
</div>
|
||||
</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">
|
||||
@ -102,10 +103,13 @@
|
||||
|
||||
<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>
|
||||
|
||||
<form onclick="searchLocation()">
|
||||
<fieldset>
|
||||
<input type="text" id="searchLocation" placeholder="Rechercher un lieu" class="search-input">
|
||||
<button id="searchButton" class="rounded-button">🔍 Ville</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
<button id="removeMarkers" class="rounded-button">
|
||||
🗑️ Effacer les marqueurs
|
||||
</button>
|
||||
@ -122,13 +126,13 @@
|
||||
📤 Partager l'URL
|
||||
</button>
|
||||
|
||||
<!-- <button id="toggle">-->
|
||||
<!-- toggle : montrer les stations avec à minima 150kW de puissance dispo-->
|
||||
<!-- </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:
|
||||
@ -167,9 +171,9 @@
|
||||
<h2 id="toggle-stats" style="cursor: pointer;">
|
||||
Puissances des stations: 🔽
|
||||
</h2>
|
||||
|
||||
|
||||
<div id="found_charging_stations">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
@ -194,7 +198,7 @@
|
||||
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>
|
||||
@ -204,7 +208,7 @@
|
||||
<script src='js/osmtogeojson.js'></script>
|
||||
<script
|
||||
type='module'
|
||||
src='js/main.js'></script>
|
||||
src='js/lcm_main.js'></script>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import utils from './utils.js'
|
||||
import lcm_utils from './lcm_utils.js'
|
||||
|
||||
let unknown_color = '#c0b1b1' // color for unknown power output of the station
|
||||
const colors = [
|
||||
@ -14,14 +14,14 @@ const error_color = '#ff1414'
|
||||
// 2024-12-16: au delà d'une valeur de 400kW on peut dire qu'il existe une erreur de saisie, nous n'avons pas de chargeur de 1800kW en production.
|
||||
const max_out_legit_power = 400
|
||||
|
||||
const colorUtils = {
|
||||
const lcm_color_utils = {
|
||||
colors,
|
||||
/**
|
||||
* trouver une couleur correspondant
|
||||
*/
|
||||
getColor: (feature) => {
|
||||
|
||||
let outputPower = utils.guessOutputPowerFromFeature(feature)
|
||||
let outputPower = lcm_utils.guessOutputPowerFromFeature(feature)
|
||||
feature.properties.tags.has_output_of_irve_specified = outputPower
|
||||
if (outputPower) {
|
||||
|
||||
@ -50,4 +50,4 @@ const colorUtils = {
|
||||
},
|
||||
}
|
||||
|
||||
export default colorUtils
|
||||
export default lcm_color_utils
|
||||
@ -1,4 +1,4 @@
|
||||
const config = {
|
||||
const lcm_config = {
|
||||
osmMention:'© <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
||||
showHighPower : true,
|
||||
overrideQuery : true,
|
||||
@ -41,4 +41,4 @@ const config = {
|
||||
]
|
||||
}
|
||||
|
||||
export default config
|
||||
export default lcm_config
|
||||
@ -4,12 +4,10 @@
|
||||
* lister les bornes trouvées dans la page
|
||||
* @type {boolean}
|
||||
*/
|
||||
import config from './config.js'
|
||||
import utils from './utils.js'
|
||||
import colorUtils from './color-utils.js'
|
||||
import { sendToJOSM, createJOSMEditLink } from './editor.js'
|
||||
import {isContentEditable} from "@testing-library/user-event/dist/utils";
|
||||
|
||||
import lcm_config from './lcm_config.js'
|
||||
import lcm_utils from './lcm_utils.js'
|
||||
import lcm_color_utils from './lcm_color_utils.js'
|
||||
import { sendToJOSM, createJOSMEditLink } from './lcm_editor.js'
|
||||
let geojsondata;
|
||||
let lastLatLng;
|
||||
|
||||
@ -34,6 +32,9 @@ L.control.scale().addTo(map)
|
||||
*/
|
||||
let filterStatesAvailable = ['hide', 'show', 'showOnly']
|
||||
|
||||
let filters_features = {
|
||||
display_unknown_max_power_station : filterStatesAvailable[1]
|
||||
}
|
||||
let display_type2_sockets = 'show';
|
||||
let display_type2_combo_sockets = 'show';
|
||||
let display_unknown_max_power_station = 'show';
|
||||
@ -47,8 +48,8 @@ let display_chelou = 'show'; // les stations avec une valeur suspecte, plus de 4
|
||||
|
||||
|
||||
function setRandomView() {
|
||||
let randomCity = utils.cities[Math.floor(Math.random() * utils.cities.length)];
|
||||
map = map.setView(randomCity.coords, config.initialZoom);
|
||||
let randomCity = lcm_utils.cities[Math.floor(Math.random() * lcm_utils.cities.length)];
|
||||
map = map.setView(randomCity.coords, lcm_config.initialZoom);
|
||||
}
|
||||
|
||||
function setCoordinatesOfLeafletMapFromQueryParameters() {
|
||||
@ -80,25 +81,25 @@ function updateURLWithMapCoordinatesAndZoom() {
|
||||
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
|
||||
|
||||
var osm = L.tileLayer(config.tileServers.osm, {
|
||||
attribution: config.osmMention + '© <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
|
||||
var osm = L.tileLayer(lcm_config.tileServers.osm, {
|
||||
attribution: lcm_config.osmMention + '© <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
|
||||
})
|
||||
|
||||
var cycle = L.tileLayer(config.tileServers.cycle, {
|
||||
attribution: config.osmMention + '© <a href="https://www.opencyclemap.org/">OpenCycleMap</a> contributors'
|
||||
var cycle = L.tileLayer(lcm_config.tileServers.cycle, {
|
||||
attribution: lcm_config.osmMention + '© <a href="https://www.opencyclemap.org/">OpenCycleMap</a> contributors'
|
||||
})
|
||||
|
||||
var transport = L.tileLayer(config.tileServers.transport, {
|
||||
attribution: config.osmMention
|
||||
var transport = L.tileLayer(lcm_config.tileServers.transport, {
|
||||
attribution: lcm_config.osmMention
|
||||
})
|
||||
|
||||
let tileGrey =
|
||||
L.tileLayer(config.tileServers.cartodb, {
|
||||
attribution: config.osmMention
|
||||
L.tileLayer(lcm_config.tileServers.cartodb, {
|
||||
attribution: lcm_config.osmMention
|
||||
})
|
||||
let stamen =
|
||||
L.tileLayer(config.tileServers.stamen, {
|
||||
attribution: config.osmMention
|
||||
L.tileLayer(lcm_config.tileServers.stamen, {
|
||||
attribution: lcm_config.osmMention
|
||||
})
|
||||
var baseLayers = {
|
||||
'Grey': tileGrey,
|
||||
@ -126,7 +127,7 @@ function buildOverpassApiUrl(map, overpassQuery) {
|
||||
let bounds = south + ',' + west + ',' + north + ',' + east;
|
||||
let resultUrl, query = '';
|
||||
|
||||
if (config.overrideQuery) {
|
||||
if (lcm_config.overrideQuery) {
|
||||
query = `?data=[out:json][timeout:15];(
|
||||
nwr[amenity=charging_station](${bounds});
|
||||
);out body geom;`;
|
||||
@ -191,7 +192,7 @@ function displayStatsFromGeoJson(resultAsGeojson) {
|
||||
found_type2 = true;
|
||||
}
|
||||
});
|
||||
let outputPower = utils.guessOutputPowerFromFeature(feature);
|
||||
let outputPower = lcm_utils.guessOutputPowerFromFeature(feature);
|
||||
if (found_type2_combo) {
|
||||
count_found_type2combo++;
|
||||
}
|
||||
@ -201,6 +202,12 @@ function displayStatsFromGeoJson(resultAsGeojson) {
|
||||
if (outputPower == 0) {
|
||||
count_output_unknown++;
|
||||
}
|
||||
// filtres
|
||||
// filtrer les valeurs inconnues
|
||||
|
||||
if(filters_features.display_unknown_max_power_station === 'hide'){
|
||||
return;
|
||||
}
|
||||
if (outputPower >= 200 && !found_type2_combo) {
|
||||
count_estimated_type2combo++;
|
||||
}
|
||||
@ -342,8 +349,8 @@ function makePopupOfFeature(feature) {
|
||||
popupContent += '</div>'
|
||||
popupContent += '<div class="key-values" >'
|
||||
// ne montrer que certains champs dans la popup
|
||||
config.tags_to_display_in_popup.forEach(function (key) {
|
||||
if (config.tags_to_display_in_popup.indexOf(key)) {
|
||||
lcm_config.tags_to_display_in_popup.forEach(function (key) {
|
||||
if (lcm_config.tags_to_display_in_popup.indexOf(key)) {
|
||||
let value = feature.properties.tags[key]
|
||||
if (value) {
|
||||
if (value.indexOf('http') !== -1) {
|
||||
@ -363,8 +370,8 @@ function eachFeature(feature, layer) {
|
||||
let popupContent = makePopupOfFeature(feature);
|
||||
layer.bindPopup(popupContent);
|
||||
|
||||
let outPowerGuessed = utils.guessOutputPowerFromFeature(feature);
|
||||
let color = colorUtils.getColor(feature);
|
||||
let outPowerGuessed = lcm_utils.guessOutputPowerFromFeature(feature);
|
||||
let color = lcm_color_utils.getColor(feature);
|
||||
let displayOutPowerGuessed = '? kW';
|
||||
if (outPowerGuessed) {
|
||||
displayOutPowerGuessed = outPowerGuessed + ' kW max';
|
||||
@ -403,9 +410,13 @@ function eachFeature(feature, layer) {
|
||||
if (!outPowerGuessed) {
|
||||
radius = radius * ratio_circle;
|
||||
} else {
|
||||
if(outPowerGuessed> config.max_possible_station_output ){
|
||||
/**
|
||||
* limiter la taille du cercle pour les valeurs aberrantes
|
||||
* les mettre en valeur en les plafonnant à 1 de plus que le maximum attendu en lcm_config
|
||||
*/
|
||||
if(outPowerGuessed> lcm_config.max_possible_station_output ){
|
||||
console.error("valeur suspecte outPowerGuessed",outPowerGuessed, feature)
|
||||
outPowerGuessed = config.max_possible_station_output +1
|
||||
outPowerGuessed = lcm_config.max_possible_station_output +1
|
||||
}
|
||||
|
||||
radius = outPowerGuessed * ratio_circle;
|
||||
@ -1,4 +1,4 @@
|
||||
const utils = {
|
||||
const lcm_utils = {
|
||||
/**
|
||||
* fouiller dans les tags les valeurs explicites de puissance déclarée.
|
||||
* Deviner aussi les puissances non déclarées:
|
||||
@ -87,4 +87,4 @@ const utils = {
|
||||
{name: 'Reims', coords: [49.2500, 4.0333]}
|
||||
]
|
||||
}
|
||||
export default utils
|
||||
export default lcm_utils
|
||||
@ -1,5 +1,5 @@
|
||||
import utils from '../js/utils'
|
||||
import colorUtils from '../js/color-utils'
|
||||
import lcm_utils from '../js/lcm_utils'
|
||||
import lcm_color_utils from '../js/lcm_color_utils'
|
||||
|
||||
describe('testing on features', () => {
|
||||
const featureWithOutput = {
|
||||
@ -26,68 +26,68 @@ describe('testing on features', () => {
|
||||
|
||||
describe('testing outputPower', () => {
|
||||
it('finds max outputpower when existing', () => {
|
||||
let outputFound = utils.guessOutputPowerFromFeature(featureWithOutput)
|
||||
let outputFound = lcm_utils.guessOutputPowerFromFeature(featureWithOutput)
|
||||
expect(outputFound).toEqual(30)
|
||||
})
|
||||
})
|
||||
describe('testing corresponding color', () => {
|
||||
|
||||
it('finds undefined color', () => {
|
||||
let color = colorUtils.getColor(featureWithoutOutput)
|
||||
let color = lcm_color_utils.getColor(featureWithoutOutput)
|
||||
expect(color).toEqual('#c0b1b1')
|
||||
})
|
||||
it('finds bad color', () => {
|
||||
let color = colorUtils.getColor(featureWithBadOutput)
|
||||
let color = lcm_color_utils.getColor(featureWithBadOutput)
|
||||
expect(color).toEqual('#ff1414')
|
||||
})
|
||||
|
||||
it('finds first color for 3 kW', () => {
|
||||
let localFeature = Object.create(featureWithOutput)
|
||||
localFeature.properties.tags['socket:type2:output'] = "3 kW"
|
||||
let outputFound = utils.guessOutputPowerFromFeature(featureWithOutput)
|
||||
let outputFound = lcm_utils.guessOutputPowerFromFeature(featureWithOutput)
|
||||
expect(outputFound).toEqual(3)
|
||||
let color = colorUtils.getColor(localFeature)
|
||||
expect(color).toEqual(colorUtils.colors[0])
|
||||
let color = lcm_color_utils.getColor(localFeature)
|
||||
expect(color).toEqual(lcm_color_utils.colors[0])
|
||||
})
|
||||
it('finds 2nd color for 20 kW', () => {
|
||||
let localFeature = Object.create(featureWithOutput)
|
||||
localFeature.properties.tags['socket:type2:output'] = "20 kW"
|
||||
let outputFound = utils.guessOutputPowerFromFeature(featureWithOutput)
|
||||
let outputFound = lcm_utils.guessOutputPowerFromFeature(featureWithOutput)
|
||||
expect(outputFound).toEqual(20)
|
||||
let color = colorUtils.getColor(localFeature)
|
||||
expect(color).toEqual(colorUtils.colors[1])
|
||||
let color = lcm_color_utils.getColor(localFeature)
|
||||
expect(color).toEqual(lcm_color_utils.colors[1])
|
||||
})
|
||||
it('finds 3nd color for 50 kW', () => {
|
||||
let localFeature = Object.create(featureWithOutput)
|
||||
localFeature.properties.tags['socket:type2:output'] = "50 kW"
|
||||
let outputFound = utils.guessOutputPowerFromFeature(featureWithOutput)
|
||||
let outputFound = lcm_utils.guessOutputPowerFromFeature(featureWithOutput)
|
||||
expect(outputFound).toEqual(50)
|
||||
let color = colorUtils.getColor(localFeature)
|
||||
expect(color).toEqual(colorUtils.colors[2])
|
||||
let color = lcm_color_utils.getColor(localFeature)
|
||||
expect(color).toEqual(lcm_color_utils.colors[2])
|
||||
})
|
||||
it('finds 3nd color for 100 kW', () => {
|
||||
let localFeature = Object.create(featureWithOutput)
|
||||
localFeature.properties.tags['socket:type2:output'] = "100 kW"
|
||||
let outputFound = utils.guessOutputPowerFromFeature(featureWithOutput)
|
||||
let outputFound = lcm_utils.guessOutputPowerFromFeature(featureWithOutput)
|
||||
expect(outputFound).toEqual(100)
|
||||
let color = colorUtils.getColor(localFeature)
|
||||
expect(color).toEqual(colorUtils.colors[3])
|
||||
let color = lcm_color_utils.getColor(localFeature)
|
||||
expect(color).toEqual(lcm_color_utils.colors[3])
|
||||
})
|
||||
it('finds 4nd color for 200 kW', () => {
|
||||
let localFeature = Object.create(featureWithOutput)
|
||||
localFeature.properties.tags['socket:type2:output'] = "200 kW"
|
||||
let outputFound = utils.guessOutputPowerFromFeature(featureWithOutput)
|
||||
let outputFound = lcm_utils.guessOutputPowerFromFeature(featureWithOutput)
|
||||
expect(outputFound).toEqual(200)
|
||||
let color = colorUtils.getColor(localFeature)
|
||||
expect(color).toEqual(colorUtils.colors[4])
|
||||
let color = lcm_color_utils.getColor(localFeature)
|
||||
expect(color).toEqual(lcm_color_utils.colors[4])
|
||||
})
|
||||
it('finds 5th color for 300 kW', () => {
|
||||
let localFeature = Object.create(featureWithOutput)
|
||||
localFeature.properties.tags['socket:type2:output'] = "300 kW"
|
||||
let outputFound = utils.guessOutputPowerFromFeature(featureWithOutput)
|
||||
let outputFound = lcm_utils.guessOutputPowerFromFeature(featureWithOutput)
|
||||
expect(outputFound).toEqual(300)
|
||||
let color = colorUtils.getColor(localFeature)
|
||||
expect(color).toEqual(colorUtils.colors[5])
|
||||
let color = lcm_color_utils.getColor(localFeature)
|
||||
expect(color).toEqual(lcm_color_utils.colors[5])
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user