leaflet-control-geocoder
leaflet-control-geocoder copied to clipboard
perliedman
L.Control.Geocoder.nominatim().geocode(?)
SSCCE:
<!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>
Why does this not work as expected? What is the format of query? The documentation doesn't say:
- https://www.liedman.net/leaflet-control-geocoder/docs/interfaces/igeocoder.html#geocode
Maybe the first two are to short?
I used something similar, but that broke today / a few days ago?
Maybe it is related to this?
https://github.com/perliedman/leaflet-control-geocoder/pull/354
There was an update fixing the CSS problem, great.
And I saw that there was a small edit for the reverse search-demo.
In that demo I see a way to directly add search results to the map, But I need the Json for processing..
This is no longer possible in version 3 ?
var address = 'street City';
L.Control.Geocoder.nominatim().geocode(address,function(results) {
console.log(results);
}
This is no longer possible in version 3 ?
It is. I hopefully clarified the new usage in this commit: https://github.com/perliedman/leaflet-control-geocoder/commit/6e869c8a08596711d5f54ddc708af31afefdaba1
for those unfamiliar with 'promise', this is now the way to go:
var address = 'street City';
L.Control.Geocoder.nominatim().geocode(address).then(function(results) {
console.log('results:',results);
});