additional search area fitur - Follow Up Deployment

index.html

@@ -118,6 +118,17 @@
                 </div>
 
                 <div class="control-panel">
+                    <h2 class="text-xl font-semibold mb-4 text-gray-800 flex items-center">
+                        <i class="fas fa-search mr-2"></i> Location Search
+                    </h2>
+                    <div class="mb-4">
+                        <input type="text" id="searchInput" placeholder="Search for a location..." 
+                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <button id="searchButton" class="mt-2 w-full py-2 px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
+                            Search
+                        </button>
+                    </div>
+                    
                     <h2 class="text-xl font-semibold mb-4 text-gray-800 flex items-center">
                         <i class="fas fa-info-circle mr-2"></i> Instructions
                     </h2>
@@ -370,6 +381,47 @@
             function clearMeasurements() {
                 drawnItems.clearLayers();
             }
+            
+            // Location search functionality
+            const searchInput = document.getElementById('searchInput');
+            const searchButton = document.getElementById('searchButton');
+            
+            searchButton.addEventListener('click', searchLocation);
+            searchInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    searchLocation();
+                }
+            });
+            
+            function searchLocation() {
+                const query = searchInput.value.trim();
+                if (!query) return;
+                
+                fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}`)
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.length > 0) {
+                            const result = data[0];
+                            const lat = parseFloat(result.lat);
+                            const lon = parseFloat(result.lon);
+                            
+                            map.setView([lat, lon], 14);
+                            
+                            // Add marker for the found location
+                            drawnItems.clearLayers();
+                            L.marker([lat, lon])
+                                .bindPopup(`<b>${result.display_name}</b>`)
+                                .addTo(drawnItems)
+                                .openPopup();
+                        } else {
+                            alert('Location not found');
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Search error:', error);
+                        alert('Error searching for location');
+                    });
+            }
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=alterzick/geo-map-distance" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>