Leaflet. Geocode doesn't render results even when it works.

19 views
Skip to first unread message

Mario García García

unread,
Dec 20, 2024, 4:38:57 AM12/20/24
to Leaflet
Hello,

I've been using Leaflet for a few weeks and suddenly the results are not rendering.

Does anyone know why and can help me?

The code here:

<body>
<div id='map'></div>
<input type="text" id="place" name="place" placeholder="Place" value="Gijón" required>
<button type="button" id="locateButton" class="form-button">Locate</button>


<script>
const map = L.map('map').setView([43.3940202, -5.7067183], 9);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

const marcador = L.marker([43.3940202, -5.7067183]).addTo(map);

document.getElementById('locateButton').addEventListener('click', function(e) {
var place = document.getElementById('place').value;
var geocoder = L.Control.Geocoder.nominatim();

var resultado = geocoder.geocode(place, function(results) {
if (results.length > 0) {
var result = results[0];
marker = L.marker(result.center).addTo(map);
map.setView(result.center, 12);
}
else{
alert("{{ gettext('Place not found.') }}")
}
});
console.log(geocoder);
});

</script>
</body>

Sandy-Pascal Andriant

unread,
Dec 22, 2024, 2:31:08 PM12/22/24
to Leaflet
Hello,

I get this result
Capture d'écran 2024-12-22 202820.png
Have you add the necessarily links in the <head> ?
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/lea...@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>
 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/lea...@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>
</head>
<body>
Reply all
Reply to author
Forward
0 new messages