diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..6d2198e --- /dev/null +++ b/.gitignore @@ -0,0 +1,132 @@ +### Node template +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-debug.log* +.pnpm-debug.log* + +# Diagnostic reports (https://nodejs.org/api/report.html) +report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage +*.lcov + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Snowpack dependency directory (https://snowpack.dev/) +web_modules/ + +# TypeScript cache +*.tsbuildinfo + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional stylelint cache +.stylelintcache + +# Microbundle cache +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variable files +.env +.env.development.local +.env.test.local +.env.production.local +.env.local + +# parcel-bundler cache (https://parceljs.org/) +.cache +.parcel-cache + +# Next.js build output +.next +out + +# Nuxt.js build / generate output +.nuxt +dist + +# Gatsby files +.cache/ +# Comment in the public line in if your project uses Gatsby and not Next.js +# https://nextjs.org/blog/next-9-1#public-directory-support +# public + +# vuepress build output +.vuepress/dist + +# vuepress v2.x temp and cache directory +.temp +.cache + +# Docusaurus cache and generated files +.docusaurus + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ + +# TernJS port file +.tern-port + +# Stores VSCode versions used for testing VSCode extensions +.vscode-test + +# yarn v2 +.yarn/cache +.yarn/unplugged +.yarn/build-state.yml +.yarn/install-state.gz +.pnp.* + diff --git a/index.html b/index.html index 2ffffde..f4f7b02 100644 --- a/index.html +++ b/index.html @@ -69,7 +69,47 @@ filtres:
prise: type 2, type CCS
cable: attaché, à fournir
- puissance: min 50kW, 100kW, 300kW, 400kW
+ puissance: + min + + , + + , + +
+ + ? + + + > 7 kW + + + > 20 kW + + + > 50 kW + + + > 100 kW + + + > 200 kW + + + > 300 kW + + +

+ Bornes trouvées dans les recherches: +

+
+

À propos de ce plan

diff --git a/js/main.js b/js/main.js index 5c6389c..4187178 100644 --- a/js/main.js +++ b/js/main.js @@ -1,5 +1,9 @@ -//import * as geoDataPointsFromApi from './data.json'; - +/** + * rechercher les bornes de recharge, + * afficher des cercles colorés selon la puissance max de la station + * lister les bornes trouvées dans la page + * @type {boolean} + */ const overrideQuery = true const initialZoom = 12 const osmMention = '© OpenStreetMap contributors' @@ -24,10 +28,6 @@ L.tileLayer(tileServer, { attribution: osmMention, }).addTo(map) -// if (overrideQuery) { -// $('#overpass-api-controls').hide(); -// } - function buildOverpassApiUrl (map, overpassQuery) { var baseUrl = 'https://overpass-api.de/api/interpreter' @@ -36,8 +36,8 @@ function buildOverpassApiUrl (map, overpassQuery) { if (overrideQuery) { query = `?data=[out:json][timeout:15];( - node[amenity=charging_station](${bounds}); - );out body geom;` + node[amenity=charging_station](${bounds}); + );out body geom;` } else { var nodeQuery = 'node[' + overpassQuery + '](' + bounds + ');' var wayQuery = 'way[' + overpassQuery + '](' + bounds + ');' @@ -91,30 +91,31 @@ const colors = [ '#2999b3', '#1782dd', '#2900ff', + '#8000ff', ] -function guessOutputPowerFromFeature(feature){ +function guessOutputPowerFromFeature (feature) { let outputPower = 0 if (feature.properties && feature.properties.tags) { /** * fouiller dans les tags les valeurs explicites de puissance déclarée. * Deviner aussi les puissances non déclarées: - * - type 2 présent, max 43kW - * - type Chademo présent, max 63kW - * https://forum.openstreetmap.fr/t/bornes-de-recharges-et-puissance-chargeurs-quel-est-votre-avis/27828 + * - type 2 présent, max 43kW + * - type Chademo présent, max 63kW + * https://forum.openstreetmap.fr/t/bornes-de-recharges-et-puissance-chargeurs-quel-est-votre-avis/27828 * */ - let found_type_2 = false; - let found_type_chademo = false; + let found_type_2 = false + let found_type_chademo = false for (var tag in feature.properties.tags) { - if(tag.indexOf('type2') !== -1){ + if (tag.indexOf('type2') !== -1) { // console.log('tag type2', tag) - found_type_2=true; + found_type_2 = true power = 43 } - if(tag.indexOf('chademo') !== -1){ - found_type_chademo=true; + if (tag.indexOf('chademo') !== -1) { + found_type_chademo = true console.log('tag chademo', tag) power = 63 } @@ -129,9 +130,8 @@ function guessOutputPowerFromFeature(feature){ var power = parseInt(value) // deviner les types de prises présents - if(power) - { - console.log('power', power ) + if (power) { + console.log('power', power) console.log('outputPower', outputPower) } if (power > outputPower) { @@ -141,19 +141,19 @@ function guessOutputPowerFromFeature(feature){ } } } - return outputPower + return outputPower } function getColor (feature) { let outputPower = guessOutputPowerFromFeature(feature) feature.properties.tags.has_output_of_irve_specified = outputPower - if(outputPower){ + if (outputPower) { - var index = Math.min(Math.floor(outputPower / 10), colors.length - 1) - console.log('outputPower', outputPower) - // console.log('colors[index]', colors[index]) - return colors[index] + var index = Math.min(Math.floor(outputPower / 10), colors.length - 1) + console.log('outputPower', outputPower) + // console.log('colors[index]', colors[index]) + return colors[index] } // autrement, sans puissance max trouvée, on met la couleur des indéfinis return unknown_color @@ -162,6 +162,93 @@ function getColor (feature) { function displayPointsFromApi (points) { var resultAsGeojson = osmtogeojson(points) + console.log('resultAsGeojson', resultAsGeojson) + + function displayStatsFromGeoJson (resultAsGeojson) { + + let count = resultAsGeojson.features.length + let count_station_output = 0 + let count_ref_eu = 0 + let output_more_than_300 = 0 + let output_more_than_100 = 0 + let output_more_than_50 = 0 + let count_output_unknown = 0 + let count_estimated_type2combo = 0 + let count_found_type2combo = 0 + let count_found_type2 = 0 + + resultAsGeojson.features.map(feature => { + let found_type2_combo = false; + // trouver si les tags présentent un type combo + let found_type2 = false; + // trouver si les tags présentent un type 2 + let keys_of_object = Object.keys(feature.properties.tags) + keys_of_object.map(tagKey=>{ + // console.log('tagKey', tagKey) + if(tagKey.indexOf('type2_combo')!==-1){ + found_type2_combo = true + console.log('tagkey trouvé combo',tagKey ) + } + if(tagKey.indexOf('type2')!==-1){ + found_type2 = true + } + }) + let outputPower = guessOutputPowerFromFeature(feature) + if(found_type2_combo){ + count_found_type2combo++ + } + if(found_type2){ + count_found_type2++ + } + if(outputPower == 0){ + count_output_unknown++ + } + if(outputPower>200 && ! found_type2_combo){ + /** + * si on trouve une puissance supérieure à 200kW on peut partir du principe que la station dispose d'une prise type_2_combo à minima + */ + count_estimated_type2combo++ + } + if(outputPower>50){ + output_more_than_50++ + } + else if(outputPower>100){ + output_more_than_100++ + } + else if(outputPower>300){ + output_more_than_300++ + } + if (feature.properties.tags['charging_station:output']) { + count_station_output++ + } + if (feature.properties.tags['ref:EU:EVSE']) { + count_ref_eu++ + } + }) + + let stats_content = 'Statistiques des ' + count + ' stations trouvées:
' + + count_station_output + ' (' + calculerPourcentage(count_station_output, count) + '%)' + ' ont une info de puissance max délivrée charging_station:output.
' + + count_ref_eu + ' (' + calculerPourcentage(count_ref_eu, count) + '%)' + ' ont une référence européenne ref:EU:EVSE.
' + + count_output_unknown + ' (' + calculerPourcentage(count_output_unknown, count) + '%)' + ' ont une puissance max inconnue *output*.
' + + output_more_than_300 + ' (' + calculerPourcentage(output_more_than_300, count) + '%)' + ' ont une puissance max supérieure à 300 kW *output*.
' + + output_more_than_100 + ' (' + calculerPourcentage(output_more_than_100, count) + '%)' + ' ont une puissance max supérieure à 100 kW *output*.
' + + output_more_than_50 + ' (' + calculerPourcentage(output_more_than_50, count) + '%)' + ' ont une puissance max supérieure à 50 kW *output*.
' + + count_found_type2combo + ' (' + calculerPourcentage(count_found_type2combo, count) + '%)' + ' ont un prise combo définie *type2_combo*.
' + + count_estimated_type2combo + ' (' + calculerPourcentage(count_estimated_type2combo, count) + '%)' + ' ont une prise combo présumée à partir de la puissance max trouvée mais non spécifiée *type2_combo*.
' + + count_found_type2 + ' (' + calculerPourcentage(count_found_type2, count) + '%)' + ' ont un prise type2 définie *type2*.
' + + '' + + $('#found_charging_stations').html(stats_content) + } + + function calculerPourcentage (partie, total) { + if (total === 0) { + return 'Division par zéro impossible' + } + return ((partie / total) * 100).toFixed(1) + } + + displayStatsFromGeoJson(resultAsGeojson) var resultLayer = L.geoJson(resultAsGeojson, { style: function (feature) { return { color: '#f00' } @@ -188,8 +275,8 @@ function displayPointsFromApi (points) { if (tags_to_display_in_popup.indexOf(key)) { let value = feature.properties.tags[key] if (value) { - if(value.indexOf('http') !== -1){ - value = ''+value+'' + if (value.indexOf('http') !== -1) { + value = '' + value + '' } popupContent = popupContent + '
' + key + ' :' + value + '' } @@ -198,20 +285,17 @@ function displayPointsFromApi (points) { // popupContent = popupContent + '' layer.bindPopup(popupContent) - let iconSiZePx = 20 - - let rest_name = '' let outPowerGuessed = guessOutputPowerFromFeature(feature) let color = getColor(feature) - let displayOutPowerGuessed = '? kW'; - if(outPowerGuessed){ - displayOutPowerGuessed = outPowerGuessed+' kW max' + let displayOutPowerGuessed = '? kW' + if (outPowerGuessed) { + displayOutPowerGuessed = outPowerGuessed + ' kW max' } - if(!popupContent){ - popupContent = ' Aucune information renseignée, ajoutez la dans OpenStreetMap!' + if (!popupContent) { + popupContent = ' Aucune information renseignée, ajoutez la dans OpenStreetMap!' } let html = '' + - '✏️ '+displayOutPowerGuessed+'
' + popupContent +'' + '✏️ ' + displayOutPowerGuessed + '' + popupContent + '' // console.log('layer', layer) let marker = L.marker(layer._latlng, { @@ -223,7 +307,8 @@ function displayPointsFromApi (points) { iconSize: ['auto', 'auto'], }), }) - if(outPowerGuessed){ + + if (outPowerGuessed) { marker.bindTooltip(outPowerGuessed + ' kW max', { @@ -233,26 +318,20 @@ function displayPointsFromApi (points) { ) } - marker.addTo(map) + marker.addTo(map) - - let radius = 10 + let radius = 20 if (outPowerGuessed > 300) { radius = 200 - } - else if (outPowerGuessed > 200) { + } else if (outPowerGuessed > 200) { radius = 250 - } - else if (outPowerGuessed > 100) { + } else if (outPowerGuessed > 100) { radius = 150 - } - else if (outPowerGuessed > 50) { + } else if (outPowerGuessed > 50) { radius = 100 - } - else if (outPowerGuessed > 20) { + } else if (outPowerGuessed > 20) { radius = 50 - } - else if (outPowerGuessed > 7) { + } else if (outPowerGuessed > 7) { radius = 20 } @@ -263,7 +342,6 @@ function displayPointsFromApi (points) { radius: radius }).addTo(map) - circle.bindPopup(html) circle.on({ mouseover: function () { @@ -305,11 +383,18 @@ function getIconFromTags (tags) { return iconFileName } +$('#toggleMinPower_50').click(toggleMinPower(50)) +$('#toggleMinPower_100').click(toggleMinPower(100)) +$('#toggleMinPower_300').click(toggleMinPower(300)) $('#query-button').click(function () { supprimerMarqueurs(map) loadOverpassQuery() }) +function toggleMinPower (minPower) { + console.log('toggle', minPower) +} + let isLoading = false function loadOverpassQuery () { diff --git a/styles/style.css b/styles/style.css index e982f5f..39e141e 100644 --- a/styles/style.css +++ b/styles/style.css @@ -77,28 +77,12 @@ h2 { box-shadow: 0 0 15rem darkred; } -/*img.leaflet-marker-icon {*/ -/* background: #fff;*/ -/* -webkit-border-radius: 100%;*/ -/* -moz-border-radius: 100%;*/ -/* border-radius: 100%;*/ -/* padding: 0.25rem;*/ -/* border: solid 1px #ccc;*/ -/* margin-left: -20px;*/ -/* margin-top: -20px;*/ -/* box-shadow: 0 0 0.05em green;*/ -/*}*/ - img.leaflet-marker-icon.tag-socket\:type2_yes { box-shadow: 0 0 0.5em cornflowerblue; border-color: cornflowerblue; border-width: 3px; } -/*img.leaflet-marker-icon.diet--vegetarian_yes {*/ -/* border: solid 3px green;*/ -/*}*/ - #query-button, .edit-button { background: #497cd3; @@ -180,7 +164,8 @@ a { word-break: break-all; word-wrap: break-word; } -.popup-content{ + +.popup-content { overflow: auto; min-width: 10rem; max-width: 20rem; @@ -192,12 +177,14 @@ a { min-width: 6rem; display: inline-block; } -.popup-value{ + +.popup-value { min-width: 10rem; max-width: 49%; text-align: right; display: inline-block; } + .bottom-content { padding: 0 2rem 4rem; } @@ -217,7 +204,7 @@ a { top: -2rem; color: white; text-shadow: 0 0 0.5rem #222; - clear:right; + clear: right; } .no-data { @@ -230,3 +217,45 @@ a { .no-data a { color: dodgerblue; } + +/** +marqueurs + */ +.marker-demo { + margin-right: 3rem; +} +.map-marker-circle-demo { + border-radius: 100%; + display: inline-block; + width: 1rem; + height: 1rem; + background: #fff; +} +.color-unknown{ + background: #c0b1b1; +} + +.map-marker-circle-demo.color-1 { + background: #36423d; +} +.map-marker-circle-demo.color-2 { + background: #4e8a8d; +} +.map-marker-circle-demo.color-3 { + background: #2999b3; +} +.map-marker-circle-demo.color-4 { + background: #1782dd; +} +.map-marker-circle-demo.color-5 { + background: #2900ff; +} +.map-marker-circle-demo.color-6 { + background: #8000ff; +} + + +button{ + cursor: pointer; + padding: 0.5rem; +}