Upload 2 files
Browse files- index.html +17 -0
- script.js +22 -0
index.html
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<title>Sample Map</title>
|
| 6 |
+
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
| 7 |
+
<style>
|
| 8 |
+
html, body { margin: 0; padding: 0; }
|
| 9 |
+
#map { height: 100vh; width: 100%; }
|
| 10 |
+
</style>
|
| 11 |
+
</head>
|
| 12 |
+
<body>
|
| 13 |
+
<div id="map"></div>
|
| 14 |
+
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
| 15 |
+
<script src="script.js"></script>
|
| 16 |
+
</body>
|
| 17 |
+
</html>
|
script.js
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
const map = L.map('map').setView([20, 0], 2);
|
| 2 |
+
|
| 3 |
+
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
| 4 |
+
attribution: '© OpenStreetMap contributors'
|
| 5 |
+
}).addTo(map);
|
| 6 |
+
|
| 7 |
+
fetch('data.json')
|
| 8 |
+
.then(response => response.json())
|
| 9 |
+
.then(data => {
|
| 10 |
+
data.forEach(entry => {
|
| 11 |
+
const lat = parseFloat(entry.latitude);
|
| 12 |
+
const lng = parseFloat(entry.longitude);
|
| 13 |
+
const name = entry.name || 'Unknown';
|
| 14 |
+
const desc = entry.description || '';
|
| 15 |
+
|
| 16 |
+
if (!isNaN(lat) && !isNaN(lng)) {
|
| 17 |
+
L.marker([lat, lng])
|
| 18 |
+
.addTo(map)
|
| 19 |
+
.bindPopup(`<strong>${name}</strong><br>${desc}`);
|
| 20 |
+
}
|
| 21 |
+
});
|
| 22 |
+
});
|