77 lines
2.8 KiB
HTML
77 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Map with Markers</title>
|
|
<script src="http://127.0.0.1:8080/ipfs/QmX5zu86RT2umWTkKqwT2trcyrP5MYTJpB3o3G1Jt8qYYf/leaflet.js"></script>
|
|
<link rel="stylesheet" href="http://127.0.0.1:8080/ipfs/QmX5zu86RT2umWTkKqwT2trcyrP5MYTJpB3o3G1Jt8qYYf/leaflet.css"/>
|
|
<script src="http://127.0.0.1:8080/ipfs/QmX5zu86RT2umWTkKqwT2trcyrP5MYTJpB3o3G1Jt8qYYf/leaflet.markercluster.js"></script>
|
|
<link rel="stylesheet" href="http://127.0.0.1:8080/ipfs/QmX5zu86RT2umWTkKqwT2trcyrP5MYTJpB3o3G1Jt8qYYf/MarkerCluster.css"/>
|
|
<link rel="stylesheet" href="http://127.0.0.1:8080/ipfs/QmX5zu86RT2umWTkKqwT2trcyrP5MYTJpB3o3G1Jt8qYYf/MarkerCluster.Default.css"/>
|
|
<style>
|
|
#map {
|
|
width: 800px;
|
|
height: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
|
|
<script>
|
|
var map = L.map('map');
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
}).addTo(map);
|
|
|
|
var markers = L.markerClusterGroup();
|
|
|
|
function addMarkersAroundLocation(latitude, longitude, zoom) {
|
|
markers.clearLayers(); // Clear previous markers
|
|
|
|
if (zoom > 11) {
|
|
var radius = 2; // in kilometers
|
|
var step = 0.01; // 0.01° precision
|
|
var markerArray = [];
|
|
for (var lat = latitude - radius; lat <= latitude + radius; lat += step) {
|
|
for (var lng = longitude - radius; lng <= longitude + radius; lng += step) {
|
|
markerArray.push(L.marker([lat, lng]).on('click', function(e) {
|
|
var markerLat = e.latlng.lat;
|
|
var markerLng = e.latlng.lng;
|
|
console.log(`Clicked marker at: (${markerLat}, ${markerLng})`);
|
|
window.open(`https://www.openstreetmap.org/directions?engine=fossgis_osrm_car&route=${markerLat}%2C${markerLng}%3B${latitude}%2C${longitude}`, '_blank');
|
|
}));
|
|
}
|
|
}
|
|
markers.addLayers(markerArray);
|
|
map.addLayer(markers);
|
|
}
|
|
}
|
|
|
|
function getLocation() {
|
|
if (navigator.geolocation) {
|
|
navigator.geolocation.getCurrentPosition(function(position) {
|
|
var latitude = position.coords.latitude;
|
|
var longitude = position.coords.longitude;
|
|
console.log(`Detected location: (${latitude}, ${longitude})`);
|
|
map.setView([latitude, longitude], 13);
|
|
addMarkersAroundLocation(latitude, longitude, 13); // Initial setup at zoom level 13
|
|
map.on('zoomend', function() {
|
|
var zoom = map.getZoom();
|
|
console.log(`Zoom level changed to: ${zoom}`);
|
|
addMarkersAroundLocation(latitude, longitude, zoom);
|
|
});
|
|
});
|
|
} else {
|
|
alert("Geolocation is not supported by this browser.");
|
|
}
|
|
}
|
|
|
|
getLocation();
|
|
</script>
|
|
</body>
|
|
</html>
|