diff --git a/js/main.js b/js/main.js index dba0413..a57bbd1 100644 --- a/js/main.js +++ b/js/main.js @@ -17,48 +17,70 @@ let unknown_color = '#c0b1b1' // color for unknown power output of the station // https://tile.openstreetmap.org/{z}/{x}/{y}.png // 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png' const tileServer = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png' +const tileServer_stamen = 'https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png' // Créer la carte centrée sur Rouen // Liste des 20 villes les plus peuplées de France avec leurs coordonnées géographiques let cities = [ - { name: "Paris", coords: [48.8566, 2.3522] }, - { name: "Marseille", coords: [43.2965, 5.3698] }, - { name: "Lyon", coords: [45.7640, 4.8357] }, - { name: "Toulouse", coords: [43.6042, 1.4437] }, - { name: "Nice", coords: [43.7101, 7.2620] }, - { name: "Nantes", coords: [47.2184, -1.5536] }, - { name: "Strasbourg", coords: [48.5831, 7.7521] }, - { name: "Montpellier", coords: [43.6167, 3.8742] }, - { name: "Bordeaux", coords: [44.8378, -0.5792] }, - { name: "Lille", coords: [50.6293, 3.1466] }, - { name: "Rennes", coords: [48.1120, -1.6823] }, - { name: "Toulon", coords: [43.1230, 5.9291] }, - { name: "Le Havre", coords: [49.4943, 0.1079] }, - { name: "Saint-Etienne", coords: [45.4380, 4.3841] }, - { name: "Grenoble", coords: [45.1667, 5.7295] }, - { name: "Rouen", coords: [49.4431, 1.0820] }, - { name: "Dijon", coords: [47.3221, 5.0446] }, - { name: "Angers", coords: [47.4786, -0.5551] }, - { name: "Nîmes", coords: [43.8366, 4.3623] }, - { name: "Reims", coords: [49.2500, 4.0333] } -]; + { name: 'Paris', coords: [48.8566, 2.3522] }, + { name: 'Marseille', coords: [43.2965, 5.3698] }, + { name: 'Lyon', coords: [45.7640, 4.8357] }, + { name: 'Toulouse', coords: [43.6042, 1.4437] }, + { name: 'Nice', coords: [43.7101, 7.2620] }, + { name: 'Nantes', coords: [47.2184, -1.5536] }, + { name: 'Strasbourg', coords: [48.5831, 7.7521] }, + { name: 'Montpellier', coords: [43.6167, 3.8742] }, + { name: 'Bordeaux', coords: [44.8378, -0.5792] }, + { name: 'Lille', coords: [50.6293, 3.1466] }, + { name: 'Rennes', coords: [48.1120, -1.6823] }, + { name: 'Toulon', coords: [43.1230, 5.9291] }, + { name: 'Le Havre', coords: [49.4943, 0.1079] }, + { name: 'Saint-Etienne', coords: [45.4380, 4.3841] }, + { name: 'Grenoble', coords: [45.1667, 5.7295] }, + { name: 'Rouen', coords: [49.4431, 1.0820] }, + { name: 'Dijon', coords: [47.3221, 5.0446] }, + { name: 'Angers', coords: [47.4786, -0.5551] }, + { name: 'Nîmes', coords: [43.8366, 4.3623] }, + { name: 'Reims', coords: [49.2500, 4.0333] } +] // Choix au hasard d'une ville parmi la liste -let randomCity = cities[Math.floor(Math.random() * cities.length)]; +let randomCity = cities[Math.floor(Math.random() * cities.length)] console.log('randomCity', randomCity) // Initialisation de la carte avec la vue centrée sur la ville choisie -let map = L.map('map').setView(randomCity.coords, initialZoom); +let map = L.map('map').setView(randomCity.coords, initialZoom) -// var map = L.map('map').setView([49.4438, 1.0993], initialZoom) -// 'https://overpass-api.de/api/interpreter?data=[out:json][timeout:25];' + -// 'area(id:3600075628)->.searchArea;' + -// 'node[amenity=charging_station](area.searchArea);' + -// 'out body geom;' +var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution: osmMention+'© OpenStreetMap contributors' +}) -L.tileLayer(tileServer, { - maxZoom: 21, - attribution: osmMention, -}).addTo(map) +var cycle = L.tileLayer('https://{s}.tile.opencyclemap.org/{z}/{x}/{y}.png', { + attribution: osmMention+'© OpenCycleMap contributors' +}) + +var transport = L.tileLayer('https://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png', { + attribution: osmMention +}) + +let tileGrey = + L.tileLayer(tileServer, { + attribution: osmMention + }) +let stamen = + L.tileLayer(tileServer_stamen, { + attribution: osmMention + }) +var baseLayers = { + 'Grey': tileGrey, + 'Stamen': stamen, + 'OpenStreetMap': osm, + 'OpenCycleMap': cycle, + 'Transport': transport +} + +let overlays = {} // Si vous avez des calques superposables, ajoutez-les ici + +const layerControl = L.control.layers(baseLayers, overlays, { collapsed: true }).addTo(map) let filteredMarkers = L.layerGroup().addTo(map) @@ -110,17 +132,18 @@ const tags_to_display_in_popup = [ 'authentication:app', 'authentication:debit_card', ] -const margin_josm_bbox= 0.00001 -function createJOSMEditLink(feature) { +const margin_josm_bbox = 0.00001 + +function createJOSMEditLink (feature) { console.log('createJOSMEditLink feature', feature) - var coordinates = feature.geometry.coordinates; - var nodeId = feature.properties.id; - var left = coordinates[0] - margin_josm_bbox; - var right = coordinates[0] + margin_josm_bbox; - var bottom = coordinates[1] - margin_josm_bbox; - var top = coordinates[1] + margin_josm_bbox; - var josmUrl = `http://127.0.0.1:8111/load_and_zoom?changeset_hashtags=IRVE&layer_name=irve-depuis-OSM&left=${left}&top=${top}&right=${right}&bottom=${bottom}&select=${nodeId}`; - return josmUrl; + var coordinates = feature.geometry.coordinates + var nodeId = feature.properties.id + var left = coordinates[0] - margin_josm_bbox + var right = coordinates[0] + margin_josm_bbox + var bottom = coordinates[1] - margin_josm_bbox + var top = coordinates[1] + margin_josm_bbox + var josmUrl = `http://127.0.0.1:8111/load_and_zoom?changeset_hashtags=IRVE&layer_name=irve-depuis-OSM&left=${left}&top=${top}&right=${right}&bottom=${bottom}&select=${nodeId}` + return josmUrl } function supprimerMarqueurs (map) { @@ -314,21 +337,23 @@ ${count_estimated_type2combo} (${calculerPourcentage(count_estimated_type2combo, $('#bars_power').html(bar_powers) } -let geojsondata; +let geojsondata function bindEventsOnJosmRemote () { let josm_remote_buttons = $(`.josm`) - console.log('josm_remote_buttons',josm_remote_buttons[0]) - $(josm_remote_buttons[0]).on('click',()=>{ + console.log('josm_remote_buttons', josm_remote_buttons[0]) + $(josm_remote_buttons[0]).on('click', () => { console.log('link', josm_remote_buttons[0]) let josm_link = $(josm_remote_buttons[0]).attr('data-href') console.log('lancer la télécommande josm', josm_link) - $.get(josm_link, (res)=>{ + $.get(josm_link, (res) => { console.log('res', res) }) }) } + const ratio_circle = 0.9 + function displayPointsFromApi (points) { geojsondata = osmtogeojson(points) @@ -354,7 +379,7 @@ function displayPointsFromApi (points) { } return true }, - onmoveend: function(event){ + onmoveend: function (event) { console.log('déplacement terminé') }, onzoomend: function (event) { @@ -390,7 +415,9 @@ function displayPointsFromApi (points) { } let link_josm = createJOSMEditLink(feature) console.log('link_josm', link_josm) - let html = `itinéraire 🚗🚴‍♀️👠 + // boutons d'itinéraire + + let html = ` 🚗🚴‍♀️👠 ✏️JOSM ${displayOutPowerGuessed}${popupContent}` let radius = 20 @@ -433,7 +460,6 @@ function displayPointsFromApi (points) { // link josm buttons to get request - } function makeCssClassFromTags (tags) { @@ -471,9 +497,9 @@ $('#query-button').on('click', function () { function toggleMinPower (showHighPower) { console.log('toggle', showHighPower) - showHighPower = !showHighPower; - addFilteredMarkers(showHighPower); - this.textContent = showHighPower ? "Montrer puissance haute" : "Montrer puissance normale"; + showHighPower = !showHighPower + addFilteredMarkers(showHighPower) + this.textContent = showHighPower ? 'Montrer puissance haute' : 'Montrer puissance normale' } function addFilteredMarkers (showHighPower) { @@ -515,19 +541,19 @@ $('#spinning_icon').hide() $('#message-loading').hide() function onMapMoveEnd () { - let center = map.getCenter(); - let zoom = map.getZoom(); + let center = map.getCenter() + let zoom = map.getZoom() let infos = `Lat: ${center.lat}, Lon: ${center.lng}, Zoom : ${zoom}` if (zoom > 10) { loadOverpassQuery() - }else{ - infos += "(zoomez au niveau 11 ou plus pour charger les stations en vous déplaçant)" + } else { + infos += '(zoomez au niveau 11 ou plus pour charger les stations en vous déplaçant)' } - $("#infos_carte").html(infos); + $('#infos_carte').html(infos) } -map.on('moveend', onMapMoveEnd); -$(document).ready(function() { - bindEventsOnJosmRemote(); +map.on('moveend', onMapMoveEnd) +$(document).ready(function () { + bindEventsOnJosmRemote() onMapMoveEnd() -}); +}) diff --git a/styles/style.css b/styles/style.css index 0341cf2..305ee33 100644 --- a/styles/style.css +++ b/styles/style.css @@ -61,8 +61,8 @@ h2 { #overpass-api-controls { position: fixed; - top: 0; - right: 1em; + top: -0.5rem; + left: 4em; padding: 10px; background-color: transparent; border: 0; @@ -93,6 +93,21 @@ img.leaflet-marker-icon.tag-socket\:type2_yes { border: solid 1px #497cd3ff; float: right; } +#query-button{ + min-width: 10em; +} +.navigation-link{ + background: white; + border-radius: 0.25em; + float:none; + position:relative; + top: 5.5em; + left: 0; +} +.navigation-link:hover{ + border: black; + background: #96b1ea; +} #query-button:hover, .edit-button:hover { @@ -106,9 +121,6 @@ img.leaflet-marker-icon.tag-socket\:type2_yes { } -#query-button { - min-width: 10em; -} .pull-left { float: left; @@ -143,8 +155,8 @@ a { #spinning_icon svg { position: fixed; - top: 1.5rem; - left: 0.8rem; + top: 0.5rem; + right: 3rem; background: white; border-radius: 100%; width: 3rem;