<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geocoding Test</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
</head>
<body>
<h1>Geocoding Test</h1>
<div id="map" style="width: 100%; height: 500px;"></div>
<script>
const map = L.map('map').setView([20, 0], 2); // Centered and zoomed out map
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
const geocoder = L.Control.Geocoder.nominatim();
var query = 'Ny'
geocoder.geocode(query, function(results) {
if (results && results.length > 0) {
const result = results[0];
console.log(`Coordinates for ${query}: Latitude ${result.center.lat}, Longitude ${result.center.lng}`);
} else {
console.log(`No results found for ${query}.`);
}
});
query = 'NY'
geocoder.geocode(query, function(results) {
if (results && results.length > 0) {
const result = results[0];
console.log(`Coordinates for ${query}: Latitude ${result.center.lat}, Longitude ${result.center.lng}`);
} else {
console.log(`No results found for ${query}.`);
}
});
query = 'New York'
geocoder.geocode(query, function(results) {
if (results && results.length > 0) {
const result = results[0];
console.log(`Coordinates for ${query}: Latitude ${result.center.lat}, Longitude ${result.center.lng}`);
} else {
console.log(`No results found for ${query}.`);
}
});
</script>
</body>
</html>
SSCCE:
Why does this not work as expected? What is the format of
query? The documentation doesn't say: