Find Nearby Cities
Find Nearby Cities
2. JavaScript (script.js)
This script uses placeholders for the API key and endpoint, as the exact implementation depends on the service provider.
JavaScript
document.getElementById('citySearchForm').addEventListener('submit', function(event) {
event.preventDefault();
const cityName = document.getElementById('cityName').value;
const radius = document.getElementById('radius').value * 1000; // Convert km to meters (common API unit)
document.getElementById('status').textContent = 'Searching...';
document.getElementById('results').innerHTML = ''; // Clear previous results
// Step 1: Geocode the city name to get Lat/Lng
geocodeCity(cityName)
.then(coordinates => {
if (coordinates) {
// Step 2: Search for nearby cities using coordinates
findNearbyCities(coordinates.lat, coordinates.lng, radius);
} else {
document.getElementById('status').textContent = `Could not find coordinates for "${cityName}".`;
}
})
.catch(error => {
console.error('Geocoding error:', error);
document.getElementById('status').textContent = 'An error occurred during geocoding.';
});
});
// ⚠️ IMPORTANT: Replace with your actual API key
const API_KEY = "YOUR_API_KEY_HERE";
/**
* Conceptual function for Step 1: Geocode
* This needs to be implemented using a specific Geocoding API (e.g., Google, HERE, etc.)
*/
async function geocodeCity(city) {
// --- API SPECIFIC IMPLEMENTATION REQUIRED HERE ---
// Example using a conceptual Geocoding API endpoint:
// const GEOCODE_URL = `https://api.geocoding-service.com/geocode?address=${encodeURIComponent(city)}&key=${API_KEY}`;
// For a real implementation, you'd fetch the data and parse the Lat/Lng.
// Since this is a template, we'll return hardcoded values for demonstration.
if (city.toLowerCase() === 'london') {
return { lat: 51.5074, lng: 0.1278 }; // London coordinates
}
return null; // City not found or API call failed
}
/**
* Conceptual function for Step 2: Nearby Search
* This needs to be implemented using a specific Places/Nearby Search API.
*/
async function findNearbyCities(lat, lng, radius) {
// --- API SPECIFIC IMPLEMENTATION REQUIRED HERE ---
// Example using a conceptual Nearby Search API endpoint:
// Some APIs require you to search for 'locality' or 'administrative_area_level_3' to get cities/towns.
// const NEARBY_URL = `https://api.places-service.com/nearby?location=${lat},${lng}&radius=${radius}&type=city&key=${API_KEY}`;
document.getElementById('status').textContent = `Searching for cities near (${lat.toFixed(4)}, ${lng.toFixed(4)}) within ${radius/1000}km...`;
try {
// Since we can't make a real API call, this is mock data for the template:
const mockResults = [
{ name: "City A", distance: 15.2 },
{ name: "City B", distance: 30.5 },
{ name: "City C", distance: 48.9 }
];
displayResults(mockResults);
} catch (error) {
console.error('Nearby search error:', error);
document.getElementById('status').textContent = 'An error occurred during the nearby search.';
}
}
/**
* Step 3: Display the results
*/
function displayResults(cities) {
const resultsList = document.getElementById('results');
if (cities.length === 0) {
resultsList.innerHTML = '
No nearby cities found.';
document.getElementById('status').textContent = 'Search complete.';
return;
}
cities.forEach(city => {
const listItem = document.createElement('li');
listItem.textContent = `${city.name} (${city.distance.toFixed(1)} km away)`;
resultsList.appendChild(listItem);
});
document.getElementById('status').textContent = 'Search complete.';
}
