style loaded elements
This commit is contained in:
tykayn
parent
4129031aaa
commit
3b37a33c63
|
|
@ -18,7 +18,11 @@ Chaque point dispose d'un lien dans une popup d'information, afin de modifier le
|
|||
|
||||
Toute la logique est dans js/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...
|
||||
# Exemple de requête overpass listant les restaurants
|
||||
|
||||
```
|
||||
https://overpass-api.de/api/interpreter?data=[out:json][timeout:15];(%20%20%20%20%20%20node[amenity=cafe](48.41182300991387,1.154964091314268,48.85561940576297,2.8399921674861432);%20%20%20%20%20%20node[shop=bakery](48.41182300991387,1.154964091314268,48.85561940576297,2.8399921674861432);%20%20%20%20%20%20node[amenity=fast_food](48.41182300991387,1.154964091314268,48.85561940576297,2.8399921674861432);%20%20%20%20%20%20node[amenity=vending_machine](48.41182300991387,1.154964091314268,48.85561940576297,2.8399921674861432);%20%20%20%20%20%20node[amenity=restaurant](48.41182300991387,1.154964091314268,48.85561940576297,2.8399921674861432);%20%20%20%20%20%20node[amenity=pub](48.41182300991387,1.154964091314268,48.85561940576297,2.8399921674861432);%20%20%20%20%20%20node[amenity=bar](48.41182300991387,1.154964091314268,48.85561940576297,2.8399921674861432);%20%20%20%20%20%20node[amenity=drinking_water](48.41182300991387,1.154964091314268,48.85561940576297,2.8399921674861432);%20%20%20%20%20%20node[man_made=water_tap](48.41182300991387,1.154964091314268,48.85561940576297,2.8399921674861432);%20%20%20%20%20%20node[man_made=drinking_fountain](48.41182300991387,1.154964091314268,48.85561940576297,2.8399921674861432);%20%20%20%20%20%20way[amenity=pub](48.41182300991387,1.154964091314268,48.85561940576297,2.8399921674861432);%20%20%20%20%20%20way[amenity=bar](48.41182300991387,1.154964091314268,48.85561940576297,2.8399921674861432);%20%20%20%20%20%20way[amenity=cafe](48.41182300991387,1.154964091314268,48.85561940576297,2.8399921674861432);%20%20%20%20%20%20way[shop=bakery](48.41182300991387,1.154964091314268,48.85561940576297,2.8399921674861432);%20%20%20%20%20%20way[amenity=fast_food](48.41182300991387,1.154964091314268,48.85561940576297,2.8399921674861432);%20%20%20%20%20%20way[amenity=vending_machine](48.41182300991387,1.154964091314268,48.85561940576297,2.8399921674861432);%20%20%20%20%20%20way[amenity=restaurant](48.41182300991387,1.154964091314268,48.85561940576297,2.8399921674861432);%20%20%20%20%20%20);out%20body%20geom;
|
||||
```
|
||||
# licence
|
||||
Gnu Affero 3+
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,9 @@
|
|||
|
||||
</p >
|
||||
</div >
|
||||
|
||||
<div id="success_load" class="could-be-visible hidden">
|
||||
Données reçues
|
||||
</div>
|
||||
<div id='map' >
|
||||
|
||||
<div class='leaflet-control-container' >
|
||||
|
|
|
|||
7391
js/data.json
7391
js/data.json
File diff suppressed because one or more lines are too long
23
js/main.js
23
js/main.js
|
|
@ -896,16 +896,17 @@ function buildOverpassApiUrl(map, overpassQuery) {
|
|||
|
||||
if (overrideQuery) {
|
||||
query = `?data=[out:json][timeout:15];(
|
||||
node[amenity=cafe](${bounds});
|
||||
node[shop=bakery](${bounds});
|
||||
node[amenity=bar](${bounds});
|
||||
node[amenity=cafe](${bounds});
|
||||
node[amenity=fast_food](${bounds});
|
||||
node[amenity=vending_machine](${bounds});
|
||||
node[amenity=restaurant](${bounds});
|
||||
node[amenity=pub](${bounds});
|
||||
node[amenity=bar](${bounds});
|
||||
node[amenity=vending_machine](${bounds});
|
||||
node[amenity=drinking_water](${bounds});
|
||||
node[man_made=water_tap](${bounds});
|
||||
node[man_made=drinking_fountain](${bounds});
|
||||
way[amenity=microwave](${bounds});
|
||||
way[amenity=pub](${bounds});
|
||||
way[amenity=bar](${bounds});
|
||||
way[amenity=cafe](${bounds});
|
||||
|
|
@ -922,10 +923,11 @@ function buildOverpassApiUrl(map, overpassQuery) {
|
|||
|
||||
}
|
||||
resultUrl = baseUrl + query;
|
||||
console.log("query url" ,resultUrl)
|
||||
return resultUrl;
|
||||
}
|
||||
|
||||
const UseLocalJson = true;
|
||||
const UseLocalJson = false;
|
||||
|
||||
const loadQueryPoints = () => {
|
||||
|
||||
|
|
@ -936,7 +938,13 @@ const loadQueryPoints = () => {
|
|||
}
|
||||
|
||||
};
|
||||
|
||||
function loadedSuccess(){
|
||||
document.querySelector('#success_load').classList.add('visible')
|
||||
setTimeout(function(){
|
||||
document.querySelector('#success_load').classList.remove('visible')
|
||||
},1000)
|
||||
$('#spinning_icon').fadeOut();
|
||||
}
|
||||
function displayPointsFromApi(points) {
|
||||
|
||||
var resultAsGeojson = osmtogeojson(points);
|
||||
|
|
@ -975,7 +983,7 @@ function displayPointsFromApi(points) {
|
|||
}
|
||||
|
||||
let icon, cuisine, rest_name = '';
|
||||
if (feature.properties.tags['name']) {
|
||||
if (feature.properties.tags['name'] !== undefined) {
|
||||
rest_name = feature.properties.tags['name'];
|
||||
} else {
|
||||
rest_name = '? ';
|
||||
|
|
@ -1111,7 +1119,8 @@ function loadOverpassQuery() {
|
|||
$.get(overpassApiUrl, function (geoDataPointsFromApi) {
|
||||
|
||||
displayPointsFromApi(geoDataPointsFromApi);
|
||||
$('#spinning_icon').fadeOut();
|
||||
|
||||
loadedSuccess();
|
||||
isLoading = false;
|
||||
}); // end of the getting from overpass API
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,6 +50,30 @@ p{
|
|||
h2{
|
||||
font-weight: normal;
|
||||
}
|
||||
#success_load{
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
position: fixed;
|
||||
top: 1em;
|
||||
height: 3em;
|
||||
background: mediumseagreen;
|
||||
z-index: 100;
|
||||
width: 100vw;
|
||||
color: white;
|
||||
padding-right: 1em;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
line-height: 2em;
|
||||
}
|
||||
.could-be-visible{
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
.visible{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#overpass-api-controls {
|
||||
position: fixed;
|
||||
|
|
@ -73,11 +97,11 @@ img.leaflet-marker-icon{
|
|||
border: solid 1px #ccc;
|
||||
margin-left: -20px;
|
||||
margin-top: -20px;
|
||||
box-shadow: 0 0 3em green;
|
||||
box-shadow: 0 0 0.5em green;
|
||||
}
|
||||
img.leaflet-marker-icon.tag-amenity_drinking_water{
|
||||
|
||||
box-shadow: 0 0 3em cornflowerblue;
|
||||
box-shadow: 0 0 1em cornflowerblue;
|
||||
}
|
||||
|
||||
img.leaflet-marker-icon.diet--vegetarian_yes{
|
||||
|
|
|
|||
Loading…
Reference in New Issue