leaflet_map.html


<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Map</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</head>
<body>
    <div id="map" style="height: 1000px;"></div>
    <script>

        
    var map = L.map('map').setView([51.9, 4.5], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
    
    // Check if data.results is defined
    if (data.results && data.results.bindings) {
        // Add markers from the SPARQL query results
        data.results.bindings.forEach(function(item) {
            var lat = parseFloat(item.lat.value);
            var long = parseFloat(item.long.value);
            L.marker([lat, long]).addTo(map)
                .bindPopup(item.label.value);
        });
    } else {
        console.error("No results found or unexpected data structure.");
    }


    </script>
</body>
</html>