diff --git a/.gitignore b/.gitignore index 6d2198e..1ab6a0e 100644 --- a/.gitignore +++ b/.gitignore @@ -130,3 +130,5 @@ dist .yarn/install-state.gz .pnp.* +#ide +.idea \ No newline at end of file diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/README.md b/README.md index 7d53b52..cfea6da 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,7 @@ Ouvrir la page index.html dans votre navigateur préféré, ou utiliser le paque // requête sur la ville de rouen let req = 'https://overpass-api.de/api/interpreter?data=[out:json][timeout:25];' + 'area(id:3600075628)->.searchArea;' + - 'node[amenity=charging_station](area.searchArea);' + + 'nwr[amenity=charging_station](area.searchArea);' + 'out body geom;' ``` # sources diff --git a/js/main.js b/js/main.js index bfeb07a..4f2d568 100644 --- a/js/main.js +++ b/js/main.js @@ -112,7 +112,7 @@ function buildOverpassApiUrl (map, overpassQuery) { if (config.overrideQuery) { query = `?data=[out:json][timeout:15];( - node[amenity=charging_station](${bounds}); + nwr[amenity=charging_station](${bounds}); );out body geom;` } else { let nodeQuery = 'node[' + overpassQuery + '](' + bounds + ');' diff --git a/js/main_2.js b/js/main_2.js deleted file mode 100644 index 9b81a9a..0000000 --- a/js/main_2.js +++ /dev/null @@ -1,287 +0,0 @@ -//import * as geoDataPointsFromApi from './data.json'; - -const overrideQuery = true -const initialZoom = 14 -const maxZoom = 21 -const startCenterCoordinates = [] -const osmMention = '© OpenStreetMap contributors' -const baseUrl = 'https://overpass-api.de/api/interpreter' -// 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 -const tileServer = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png' - -/** - * config des couches de fond de carte - */ -// var osm = L.tileLayer( -// tileServer, { -// maxZoom: maxZoom, -// attribution: '© OpenStreetMap' -// }) -// -// var osmHOT = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', { -// maxZoom: maxZoom, -// attribution: '© OpenStreetMap contributors, Tiles style by Humanitarian OpenStreetMap Team hosted by OpenStreetMap France' -// }) -// var openTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', { -// maxZoom: 19, -// attribution: 'Map data: © OpenStreetMap contributors, SRTM | Map style: © OpenTopoMap (CC-BY-SA)' -// }) - -// Créer la carte centrée sur Rouen -// const map = L.map('map', { -// center: startCenterCoordinates, -// zoom: initialZoom, -// layers: [ -// // osm, -// osmHOT, -// // openTopoMap -// ], -// }) -const map = L.map('map').setView(startCenterCoordinates, initialZoom) - -// let circle = L.circle(startCenterCoordinates, { -// color: 'green', -// fillColor: '#f03', -// fillOpacity: 0.5, -// radius: 10 -// }).addTo(map) - -// var baseMaps = { - // 'OpenStreetMap': osm, - // 'OpenStreetMap.HOT': osmHOT -// } - -// exemple de markers à grouper -// var crownHill = L.marker([39.75, -105.09]).bindPopup('This is Crown Hill Park.'), -// rubyHill = L.marker([39.68, -105.00]).bindPopup('This is Ruby Hill Park.') -// var cities = L.layerGroup([crownHill]) -// var parks = L.layerGroup([crownHill, rubyHill]) -// -// var overlayMaps = { -// 'Cities': cities -// } -// -// var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map) -// layerControl.addBaseLayer(openTopoMap, 'OpenTopoMap') - -// layerControl.addOverlay(parks, '+150kW') - -function initMap (callback) { - // Créer un groupe de couches pour les marqueurs de type 2 - // var type2Markers = L.layerGroup() - - // L.tileLayer(tileServer, { - // maxZoom, - // attribution: osmMention, - // }).addTo(map) - -// Ajouter les marqueurs de type 2 au groupe de couches -// map.eachLayer(function (layer) { -// if (layer.feature) { -// if (layer.feature?.properties?.tags['socket:type2']) { -// type2Markers.addLayer(layer) -// console.log('includes', layer.feature.properties.tags['socket:type2']) -// } -// -// } -// }) - -// Ajouter le groupe de couches aux couches de la carte -// map.addLayer(type2Markers) - -// Ajouter un interrupteur pour afficher ou masquer les marqueurs de type 2 -// var type2Toggle = L.control({ position: 'topright' }) -// type2Toggle.onAdd = function (map) { -// var div = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom') -// div.innerHTML = '' -// L.DomEvent.on(document, 'click', function () { -// type2Markers.setVisible(document.getElementById('type2-toggle').checked) -// }) -// return div -// } -// map.addControl(type2Toggle) -} - -function buildOverpassApiUrl (map, overpassQuery) { - - var bounds = map.getBounds().getSouth() + ',' + map.getBounds().getWest() + ',' + map.getBounds().getNorth() + ',' + map.getBounds().getEast() - var resultUrl, query = '' - - if (overrideQuery) { - query = `?data=[out:json][timeout:15];( - node[amenity=charging_station](${bounds}); - );out body geom;` - } else { - var nodeQuery = 'node[' + overpassQuery + '](' + bounds + ');' - var wayQuery = 'way[' + overpassQuery + '](' + bounds + ');' - var relationQuery = 'relation[' + overpassQuery + '](' + bounds + ');' - query = '?data=[out:json][timeout:15];(' + nodeQuery + wayQuery + relationQuery + ');out body geom;' - - } - - resultUrl = baseUrl + query - console.log('resultUrl', resultUrl) - return resultUrl -} - -const tags_to_display_in_popup = ['capacity', 'socket:type_2', - 'socket:type2:output', - 'charging_station:output', - 'socket:typee', - 'socket:type2_combo', - 'socket:chademo', - 'operator', - 'ref:EU:EVSE', - 'network', - 'contact', - 'phone'] - -function supprimerMarqueurs (map) { - map.eachLayer(function (layer) { - if (layer instanceof L.Marker) { - map.removeLayer(layer) - } - }) -} - -function displayPointsFromApi (points) { - - // supprimerMarqueurs() - - var resultAsGeojson = osmtogeojson(points) - console.log('resultAsGeojson', resultAsGeojson) - var resultLayer = L.geoJson(resultAsGeojson, { - style: function (feature) { - return { color: '#f00' } - }, - // filter: function (feature, layer) { - // var isPolygon = (feature.geometry) && (feature.geometry.type !== undefined) && (feature.geometry.type === 'Polygon') - // if (isPolygon) { - // feature.geometry.type = 'Point' - // var polygonCenter = L.latLngBounds(feature.geometry.coordinates[0]).getCenter() - // feature.geometry.coordinates = [polygonCenter.lat, polygonCenter.lng] - // } - // return true - // }, - // onzoomend: function (event) { - // console.log('event zoom end', event) - // }, - onEachFeature: function (feature, layer) { - var popupContent = '' - console.log('feature.properties', feature.properties) - // var keys = Object.keys(feature.properties.tags) - // ne montrer que certains champs dans la popup - // tags_to_display_in_popup.forEach(function (key) { - // if (tags_to_display_in_popup.indexOf(key)) { - // let value = feature.properties.tags[key] - // if (value) { - // popupContent = popupContent + '
' + key + ' : ' + value + '' - // } - // } - // }) - // popupContent = popupContent + '' - // layer.bindPopup(popupContent) - // - // let iconSiZePx = 20 - // - // let rest_name = '' - // - // let html = '' + - // '✏️
' + popupContent - - console.log('layer', layer) - // var label = L.marker(layer._latlng, { - // icon: L.divIcon({ - // iconUrl: '/img/socket_type2svg', - // // + getIconFromTags(feature.properties.tags), - // className: 'label ' + makeCssClassFromTags(feature.properties.tags), - // // , - // iconSize: ['auto', 'auto'], - // }), - // }).addTo(map) - - // ajout de cercle coloré selon la puissance - - // var myIcon = L.icon({ - // iconUrl: 'https://cipherbliss.com/ou-manger/img/' + getIconFromTags(feature.properties.tags), - // iconSize: [iconSiZePx, iconSiZePx], - // iconAnchor: [iconSiZePx / 2, iconSiZePx / 2], - // popupAnchor: [iconSiZePx / 2, iconSiZePx / 2], - // className: makeCssClassFromTags(feature.properties.tags), - // - // }) - - // let regular_marker = L.marker(layer._latlng, { title: rest_name, icon: myIcon }).addTo(map) - - // regular_marker.bindPopup(html) - // regular_marker.on({ - // mouseover: function () { - // this.openPopup() - // }, - // mouseout: function () { - // setTimeout(() => this.closePopup(), 3000) - // }, - // click: function () { - // this.openPopup() - // }, - // }) - }, - }) -} - -function makeCssClassFromTags (tags) { - console.log('tags', tags) - let tagKeys = Object.keys(tags) - console.log('tagKeys', tagKeys) - if (!tags) { - return '' - } - let listOfClasses = [] - - tagKeys.forEach((element) => { - listOfClasses.push('tag-' + element + '_' + tags[element].replace(':', '--').replace(' ', '-')) - }) - - return listOfClasses.join(' ') -} - -function getIconFromTags (tags) { - let iconFileName = '' - // let iconFileName = 'icon_restaurant.png'; - if (tags['socket:type_2'] == '150 kW') { - iconFileName = 'fountain.png' - } - return iconFileName -} - -$('#query-button').click(function () { - loadOverpassQuery() -}) - -let isLoading = false - -function loadOverpassQuery () { - - console.log('load data') - // ne pas charger si on recherche déjà - if (!isLoading) { - isLoading = true - $('#spinning_icon').fadeIn() - var queryTextfieldValue = $('#query-textfield').val() - console.log('queryTextfieldValue', queryTextfieldValue) - var overpassApiUrl = buildOverpassApiUrl(map, queryTextfieldValue) - - $.get(overpassApiUrl, function (geoDataPointsFromApi) { - - displayPointsFromApi(geoDataPointsFromApi) - $('#spinning_icon').fadeOut() - isLoading = false - }) // end of the getting from overpass API - } -} - -// initMap() -// $('#spinning_icon').hide() -// loadOverpassQuery()