Parcourir la source

Add geo fields and search.

opi il y a 10 ans
Parent
commit
ce8a953fb7
2 fichiers modifiés avec 21 ajouts et 4 suppressions
  1. 6 4
      assets/main.js
  2. 15 0
      index.html

+ 6 - 4
assets/main.js

@@ -26,20 +26,22 @@ $( document ).ready(function() {
 	    longitude.value = m.lng;
 	}
 
-	$('#search-btn').click(function(){
+	$('#search-btn').click(function(e){
+		e.preventDefault();
+
 		var searchString = $('#search').val();
 		$.getJSON('http://nominatim.openstreetmap.org/search?limit=5&format=json&q='+searchString, function(data){
 			var items = [];
 			$.each(data, function(key, val) {
 			  items.push(
-			    "<li><a href='#' data-lat='"+val.lat+"' data-lng='"+val.lon+"'>" + val.display_name + '</a></li>'
+			    "<li class='list-group-item'><a href='#' data-lat='"+val.lat+"' data-lng='"+val.lon+"'>" + val.display_name + '</a></li>'
 			  );
 			});
 
 			$('#search-results').empty();
 	        if (items.length != 0) {
-	            $('<p>Resultats</p>').appendTo('#search-results');
-	            $('<ul/>').html(items.join('')).appendTo('#search-results');
+	            // $('<p>Resultats</p>').appendTo('#search-results');
+	            $('<ul/>').addClass("list-group").html(items.join('')).appendTo('#search-results');
 	        } else {
 	            $('<p>', { html: "No results found" }).appendTo('#search-results');
 	        }

+ 15 - 0
index.html

@@ -80,6 +80,21 @@
     <h2>Ma localisation</h2>
 
     <div id="map">&nbsp;</div>
+    <div class="form-group">
+      <label for="latitude">Latitude</label>
+      <input type="text" name="latitude" id="latitude" value="" class="form-control" />
+    </div>
+    <div class="form-group">
+      <label for="longitude">Longitude</label>
+      <input type="text" name="longitude" id="longitude" value="" class="form-control" />
+    </div>
+    <div class="form-group form-inline">
+      <label for="search" class="form-label">Recherche</label>
+      <input type="text" name="search" id="search" value="rue du calvaire, nantes" class="form-control" />
+      <span id="search-btn" class="btn btn-default">Recherche</span>
+      <div id="search-results" class=""></div>
+    </div>
+
 
     <h3>Orientation(s) de mes fenêtres</h3>