|
|
<!DOCTYPE html> |
|
|
<html lang="es"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Mapa Interactivo</title> |
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/> |
|
|
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> |
|
|
<style> |
|
|
#map { height: 500px; width: 100%; } |
|
|
#controls { margin: 10px; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div id="controls"> |
|
|
<label for="category">Selecciona una categoría:</label> |
|
|
<select id="category" onchange="updateMarkers()"> |
|
|
<option value="all">All</option> |
|
|
<option value="assessment">Assessment</option> |
|
|
<option value="deployment">In Deployment</option> |
|
|
<option value="operative">Operative</option> |
|
|
<option value="paused">Paused</option> |
|
|
<option value="maintenance">Maintenance</option> |
|
|
<option value="removed">Removed</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div id="map"></div> |
|
|
|
|
|
<script> |
|
|
var map = L.map('map').setView([45, 10], 3); |
|
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
|
|
attribution: '© OpenStreetMap contributors' |
|
|
}).addTo(map); |
|
|
|
|
|
var locations = [ |
|
|
{ name: "Site 1", coords: [36.9257, 14.7244], category: "operative" }, |
|
|
{ name: "Site 2", coords: [37.3886, -5.9823], category: "operative" }, |
|
|
{ name: "Site 3", coords: [53.2194, 6.5665], category: "operative" }, |
|
|
{ name: "Site 4", coords: [-33.9249, 18.4241], category: "operative" }, |
|
|
{ name: "Site 5", coords: [46.9481, 7.4474], category: "operative" }, |
|
|
{ name: "Site 6", coords: [54.3233, 10.1228], category: "removed" }, |
|
|
{ name: "Site 7", coords: [17.0151, 54.0924], category: "assessment" }, |
|
|
{ name: "Site 8", coords: [48.0077, 0.1996], category: "assessment" }, |
|
|
{ name: "Site 9", coords: [54.3520, 18.6466], category: "assessment" } |
|
|
]; |
|
|
|
|
|
var categoryColors = { |
|
|
"assessment": "blue", |
|
|
"deployment": "green", |
|
|
"operative": "green", |
|
|
"paused": "yellow", |
|
|
"maintenance": "orange", |
|
|
"removed": "red" |
|
|
}; |
|
|
|
|
|
var markers = []; |
|
|
|
|
|
function updateMarkers() { |
|
|
var selectedCategory = document.getElementById("category").value; |
|
|
|
|
|
|
|
|
markers.forEach(marker => map.removeLayer(marker)); |
|
|
markers = []; |
|
|
|
|
|
|
|
|
locations.forEach(location => { |
|
|
if (selectedCategory === "all" || location.category === selectedCategory) { |
|
|
var marker = L.circleMarker(location.coords, { |
|
|
color: categoryColors[location.category], |
|
|
fillColor: categoryColors[location.category], |
|
|
fillOpacity: 0.8, |
|
|
radius: 8 |
|
|
}).bindPopup(`<b>${location.name}</b><br>Categoría: ${location.category}`); |
|
|
|
|
|
marker.addTo(map); |
|
|
markers.push(marker); |
|
|
} |
|
|
}); |
|
|
|
|
|
if (markers.length > 1) { |
|
|
var group = new L.featureGroup(markers); |
|
|
map.fitBounds(group.getBounds()); |
|
|
} else if (markers.length === 1) { |
|
|
let zoom_nivel_pais = 6; |
|
|
map.setView(markers[0].getLatLng(), zoom_nivel_pais); |
|
|
} else { |
|
|
map.setView([45, 10], 3); |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
updateMarkers(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
