|
|
<!DOCTYPE html> |
|
|
<!DOCTYPE html> |
|
|
<html lang="es"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Mapa Interactivo con Gráfico</title> |
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/> |
|
|
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<style> |
|
|
#map { height: 500px; width: 100%; } |
|
|
#controls { margin: 10px; } |
|
|
#chart-container { width: 80%; margin: 20px auto; } |
|
|
canvas { width: 100%; height: 300px; } |
|
|
</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> |
|
|
|
|
|
<div id="chart-container"> |
|
|
<canvas id="connectionsChart"></canvas> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
var locations = [ |
|
|
{ name: "Ragusa", coords: [36.9257, 14.7244], category: "operative", connections: 24 }, |
|
|
{ name: "Seville", coords: [37.3886, -5.9823], category: "operative", connections: 9 }, |
|
|
{ name: "Groningen", coords: [53.2194, 6.5665], category: "operative", connections: 13 }, |
|
|
{ name: "Cape Town", coords: [-33.9249, 18.4241], category: "operative", connections: 1 }, |
|
|
{ name: "Bern", coords: [46.9481, 7.4474], category: "operative", connections: 0 }, |
|
|
{ name: "Kiel", coords: [54.3233, 10.1228], category: "removed", connections: 0 }, |
|
|
{ name: "Le Mans", coords: [17.0151, 54.0924], category: "assessment", connections: 0 }, |
|
|
{ name: "Le Mans", coords: [48.0077, 0.1996], category: "assessment", connections: 0 }, |
|
|
{ name: "Gdansk", coords: [54.3520, 18.6466], category: "assessment", connections: 0 }, |
|
|
{ name: "Prague", coords: [50.0755, 14.4378], category: "assessment", connections: 0 }, |
|
|
{ name: "Kuwait", coords: [29.3759, 47.9774], category: "assessment", connections: 0 } |
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
var map = L.map('map').setView([50.0755, 14.4378], 3); |
|
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
|
|
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' |
|
|
}).addTo(map); |
|
|
|
|
|
var categoryColors = { |
|
|
"assessment": "blue", |
|
|
"deployment": "green", |
|
|
"operative": "green", |
|
|
"paused": "yellow", |
|
|
"maintenance": "orange", |
|
|
"removed": "red" |
|
|
}; |
|
|
|
|
|
var markers = []; |
|
|
var chart = null; |
|
|
|
|
|
function updateMarkers() { |
|
|
var selectedCategory = document.getElementById("category").value; |
|
|
|
|
|
|
|
|
markers.forEach(marker => map.removeLayer(marker)); |
|
|
markers = []; |
|
|
|
|
|
|
|
|
var filteredLocations = locations.filter(location => selectedCategory === "all" || location.category === selectedCategory); |
|
|
|
|
|
filteredLocations.forEach(location => { |
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
updateChart(filteredLocations); |
|
|
} |
|
|
|
|
|
function updateChart(filteredLocations) { |
|
|
|
|
|
var cityNames = filteredLocations.map(location => location.name); |
|
|
var connectionsData = filteredLocations.map(location => location.connections); |
|
|
var categoryColorsData = filteredLocations.map(location => categoryColors[location.category]); |
|
|
|
|
|
|
|
|
if (chart) { |
|
|
chart.destroy(); |
|
|
} |
|
|
|
|
|
|
|
|
var ctx = document.getElementById('connectionsChart').getContext('2d'); |
|
|
chart = new Chart(ctx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: cityNames, |
|
|
datasets: [{ |
|
|
label: 'Remote Connections', |
|
|
data: connectionsData, |
|
|
backgroundColor: categoryColorsData, |
|
|
borderColor: categoryColorsData, |
|
|
borderWidth: 1 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
ticks: { |
|
|
stepSize: 1 |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
updateMarkers(); |
|
|
</script> |
|
|
|
|
|
</body> |
|
|
</html> |
