style shadow on bubbles, place of search button

index.html

@@ -23,30 +23,7 @@
 	<img class="icon" src="img/french.png" alt="plat avec sa cloche">
 
 		Melting Pot</h1>
-	<h2 class="pull-left title">Où manger et boire
 
-		<div id='spinning_icon' >
-		<div class='message-loading'>
-		chargement en cours...
-		</div>
-			<svg
-					id='star'
-					width='4cm'
-					height='4cm'
-					viewBox='0 0 700 400'
-					xmlns='http://www.w3.org/2000/svg'
-					version='1.1' >
-  <polygon
-		  fill='red'
-		  stroke='red'
-		  stroke-width='10'
-		  points='350,75  379,161 469,161 397,215
-                    423,301 350,250 277,301 303,215
-                    231,161 321,161' />
-
-</svg >
-		</div >
-	</h2 >
 
 	<p >
 		Par
@@ -56,6 +33,7 @@
 
 	</p >
 </div >
+
 <div id='map' >
 
 	<div class='leaflet-control-container' >
@@ -70,8 +48,32 @@
 				<input
 						id='query-button'
 						type='button'
-						value='Chercher' >
+						value='🍽️ Chercher' >
 			</div >
+
+			<div class="research_display">
+				<div id='spinning_icon' >
+					<div class='message-loading'>
+						chargement en cours...
+					</div>
+					<svg
+							id='star'
+							width='4cm'
+							height='4cm'
+							viewBox='0 0 700 400'
+							xmlns='http://www.w3.org/2000/svg'
+							version='1.1' >
+						<polygon
+								fill='red'
+								stroke='red'
+								stroke-width='10'
+								points='350,75  379,161 469,161 397,215
+									423,301 350,250 277,301 303,215
+									231,161 321,161' />
+
+					</svg >
+				</div >
+			</div>
 		</div >
 	</div >
 

js/main.js

@@ -950,6 +950,9 @@ function displayPointsFromApi(points) {
       }
       return true;
     },
+    onZoomEnd: function(event){
+      console.log('event', event);
+    },
     onEachFeature: function (feature, layer) {
       var popupContent = '';
       popupContent = popupContent + '<dt>@id</dt><dd>' + feature.properties.type + '/' + feature.properties.id + '</dd>';
@@ -1103,6 +1106,7 @@ function loadOverpassQuery() {
     var overpassApiUrl = buildOverpassApiUrl(map, queryTextfieldValue);
 
     $.get(overpassApiUrl, function (geoDataPointsFromApi) {
+
       displayPointsFromApi(geoDataPointsFromApi);
       $('#spinning_icon').fadeOut();
       isLoading = false;

styles/style.css

@@ -18,6 +18,7 @@ p{
     height: 70%;
     width: 100%;
     margin: 0;
+    border: solid 2px;
 }
 .padded{
     padding: 1rem;
@@ -52,8 +53,8 @@ h2{
 
 #overpass-api-controls {
     position: fixed;
-    top:0;
-    right: 1em;
+    top: 8em;
+    left: 4em;
     padding: 10px;
     background-color: rgb(255, 255, 255);
     z-index: 10;
@@ -72,6 +73,11 @@ img.leaflet-marker-icon{
     border: solid 1px #ccc;
     margin-left: -20px;
     margin-top: -20px;
+    box-shadow: 0 0 3em green;
+}
+img.leaflet-marker-icon.tag-amenity_drinking_water{
+
+    box-shadow: 0 0 3em cornflowerblue;
 }
 
 img.leaflet-marker-icon.diet--vegetarian_yes{
@@ -85,6 +91,16 @@ img.leaflet-marker-icon.diet--vegetarian_yes{
     color: white;
     border: solid 1px #497CD3FF;
 }
+#query-button:hover,
+.edit-button:hover{
+    background: #0d377b;
+    border: solid 1px #08285c;
+    cursor:pointer;
+}
+.edit-button{
+    margin-left: 1ch;
+
+}
 
 #query-button{
     min-width: 10em;
@@ -103,13 +119,20 @@ a{
 }
 #spinning_icon{
     position: fixed;
-    top: 0.5rem;
-    right: 0.5rem;
+    top: 11rem;
+    left: 3.5rem;
+    z-index: 10;
+    background: white;
+    font-size: 2rem;
 }
 #spinning_icon svg{
     position: fixed;
-    top: 0.5rem;
-    right: 0.5rem;
+    top: 1.5rem;
+    left: 0.8rem;
+    background: white;
+    border-radius: 100%;
+    width: 3rem;
+    height: 3rem;
 }
 #spinning_icon svg{
     animation: spin 2s linear infinite;