Some reason, leaflet.js is not displaying. I’m completely stumped.
I just want the map to show at full width and I have tried eliminating each file included but non seem to make it work.
any other help toward my code would be amazing as I’m purely learning as I go.
Thank you very much in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Park Finder</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.5.0/font/bootstrap-icons.min.css">
<style>
body { height: 100vh; display: flex; flex-direction: column; }
.navbar { background-color: #333; color: white; }
.suggestions { position: absolute; top: 100%; left: 0; width: 100%; border-radius: 8px; background: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 1000; max-height: 200px; overflow-y: auto; margin-top: 8px; }
.suggestion-item { padding: 10px; cursor: pointer; border-bottom: 1px solid #ddd; }
.suggestion-item:hover { background: #ff5722; color: white; }
#map { flex: 1; width: 100%; display: block; height: 100%; }
.nearby-parks { padding: 10px; background: #f8f8f8; border-top: 1px solid #ccc; height: 200px; overflow-y: auto; }
.nearby-park { padding: 10px; cursor: pointer; border-bottom: 1px solid #ddd; }
.nearby-park:hover { background: #007bff; color: white; }
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<span class="navbar-brand">Park Finder</span>
<div class="search-container ml-auto d-flex">
<div class="search-bar position-relative">
<input type="text" id="parkSearch" class="form-control" placeholder="Search for parks...">
<div class="suggestions" id="suggestions"></div>
</div>
<button class="btn btn-primary ml-2" onclick="centerMap()">
<i class="bi bi-geo-alt"></i> My Location
</button>
</div>
</div>
</nav>
<div id="map"></div>
<div class="nearby-parks container mt-3">
<h3>Nearby Parks</h3>
<div id="nearbyParks"></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
let parksData = [], userLocation = { lat: null, lon: null };
var map = L.map('map');
function centerMap() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
userLocation.lat = position.coords.latitude;
userLocation.lon = position.coords.longitude;
map.setView([userLocation.lat, userLocation.lon], 13);
showNearbyParks();
}, function(error) {
console.error("Geolocation failed: " + error.message);
alert("Geolocation is not supported by your browser or permission denied.");
});
} else {
alert('Geolocation is not supported by your browser.');
}
}
centerMap();
fetch('fetch.php')
.then(response => response.ok ? response.json() : Promise.reject('Network response was not ok'))
.then(data => {
parksData = data;
parksData.forEach(park => {
L.marker([park.latitude, park.longitude]).addTo(map)
.bindPopup(`<b>${park.name}</b><br>${park.amenities}`);
});
document.querySelector('#parkSearch').addEventListener('input', function(e) {
let query = e.target.value.toLowerCase();
if (query) {
let suggestions = parksData.filter(park => park.name.toLowerCase().includes(query));
suggestions.sort((a, b) => getDistance(userLocation.lat, userLocation.lon, a.latitude, a.longitude) - getDistance(userLocation.lat, userLocation.lon, b.latitude, b.longitude));
updateSuggestions(suggestions);
} else {
document.getElementById('suggestions').innerHTML = '';
}
});
document.querySelector('#parkSearch').addEventListener('change', function(e) {
let selectedPark = parksData.find(park => park.name.toLowerCase() === e.target.value.toLowerCase());
if (selectedPark) {
map.setView([selectedPark.latitude, selectedPark.longitude], 15);
L.marker([selectedPark.latitude, selectedPark.longitude]).addTo(map)
.bindPopup(`<b>${selectedPark.name}</b><br>${selectedPark.amenities}`).openPopup();
document.getElementById('suggestions').innerHTML = '';
}
});
showNearbyParks();
})
.catch(error => {
console.error('Fetching park data failed:', error);
alert('Failed to fetch park data. Please try again later.');
});
function updateSuggestions(parks) {
let suggestionsContainer = document.getElementById('suggestions');
suggestionsContainer.innerHTML = '';
parks.forEach(park => {
let suggestionItem = document.createElement('div');
suggestionItem.textContent = park.name;
suggestionItem.classList.add('suggestion-item');
suggestionItem.addEventListener('click', () => {
document.querySelector('#parkSearch').value = park.name;
map.setView([park.latitude, park.longitude], 15);
L.marker([park.latitude, park.longitude]).addTo(map)
.bindPopup(`<b>${park.name}</b><br>${park.amenities}`).openPopup();
suggestionsContainer.innerHTML = '';
});
suggestionsContainer.appendChild(suggestionItem);
});
}
function showNearbyParks() {
let nearbyParksContainer = document.getElementById('nearbyParks');
nearbyParksContainer.innerHTML = '';
let nearbyParks = parksData.filter(park => getDistance(userLocation.lat, userLocation.lon, park.latitude, park.longitude) <= 5);
nearbyParks.sort((a, b) => getDistance(userLocation.lat, userLocation.lon, a.latitude, a.longitude) - getDistance(userLocation.lat, userLocation.lon, b.latitude, b.longitude));
nearbyParks.forEach(park => {
let nearbyParkItem = document.createElement('div');
nearbyParkItem.textContent = `${park.name} (${getDistance(userLocation.lat, userLocation.lon, park.latitude, park.longitude).toFixed(2)} km)`;
nearbyParkItem.classList.add('nearby-park');
nearbyParkItem.addEventListener('click', () => {
map.setView([park.latitude, park.longitude], 15);
L.marker([park.latitude, park.longitude]).addTo(map)
.bindPopup(`<b>${park.name}</b><br>${park.amenities}`).openPopup();
});
nearbyParksContainer.appendChild(nearbyParkItem);
});
}
function getDistance(lat1, lon1, lat2, lon2) {
const R = 6371, dLat = (lat2 - lat1) * Math.PI / 180, dLon = (lon2 - lon1) * Math.PI / 180;
const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
}
});
</script>
</body>
</html>
I’ve tried different display modes in css but with no luck, it must be something really simple.