Update templates/index.html

templates/index.html

@@ -39,7 +39,6 @@
                         <div id="map"></div>
                     </div>
                     <div class="col-lg-4">
-                        <!-- NEW: Location Search Bar -->
                         <div class="input-group mb-3">
                             <input type="text" id="location-search" class="form-control" placeholder="Search location (e.g., Paris, France)">
                             <button class="btn btn-outline-secondary" type="button" id="search-button">
@@ -47,7 +46,6 @@
                             </button>
                         </div>
                         <hr>
-                        <!-- End of New Section -->
                         <div class="mb-3">
                             <label for="lat" class="form-label">Latitude</label>
                             <input type="text" id="lat" class="form-control" placeholder="Click map or enter manually">
@@ -140,7 +138,6 @@
             });
         };
         
-        // --- NEW: Location Search Functionality ---
         document.getElementById('search-button').addEventListener('click', () => {
             const query = document.getElementById('location-search').value;
             if (!query) {
@@ -150,10 +147,9 @@
 
             const searchButton = document.getElementById('search-button');
             const searchIcon = searchButton.querySelector('i');
-            // Show loading state
             searchButton.disabled = true;
             searchIcon.style.display = 'none';
-            searchButton.innerHTML = `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>` + searchButton.innerHTML;
+            searchButton.innerHTML = `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>`;
 
             const apiUrl = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}`;
 
@@ -164,7 +160,10 @@
                 })
                 .then(data => {
                     if (data && data.length > 0) {
-                        const result = data; // Take the first, most relevant result
+                        // --- THIS IS THE FIX ---
+                        // Select the first result object from the data array
+                        const result = data[0]; 
+                        
                         const lat = parseFloat(result.lat).toFixed(6);
                         const lon = parseFloat(result.lon).toFixed(6);
 
@@ -182,10 +181,9 @@
                 })
                 .catch(error => showAlert(`Failed to search for location: ${error.message}`))
                 .finally(() => {
-                    // Restore button state
                     searchButton.disabled = false;
                     searchButton.querySelector('.spinner-border').remove();
-                    searchIcon.style.display = 'inline-block';
+                    searchButton.innerHTML = `<i class="bi bi-search"></i>`;
                 });
         });