style loaded elements

README.md

@@ -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+
 

index.html

@@ -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' >

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
   }

styles/style.css

@@ -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{