Spaces:

JPLTedCas
/

MatrixMAP

Running

App Files Files Community

JPLTedCas commited on Feb 24

Commit

c7404c6

verified ·

1 Parent(s): 54e58ff

Update index.html

Browse files

Files changed (1) hide show

index.html +90 -34

index.html CHANGED Viewed

@@ -1,17 +1,22 @@
 <!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()">
@@ -27,25 +32,34 @@
     <div id="map"></div>
-    <script>
-        var map = L.map('map').setView([45, 10], 3); // Vista inicial
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            attribution: '&copy; OpenStreetMap contributors'
-        }).addTo(map);
         var locations = [
-        { name: "Site 1", coords: [36.9257, 14.7244], category: "operative" }, // Ragusa, Italia
-    { name: "Site 2", coords: [37.3886, -5.9823], category: "operative" }, // Sevilla, España
-    { name: "Site 3", coords: [53.2194, 6.5665], category: "operative" }, // Groningen, Países Bajos
-    { name: "Site 4", coords: [-33.9249, 18.4241], category: "operative" }, // Ciudad del Cabo, Sudáfrica
-    { name: "Site 5", coords: [46.9481, 7.4474], category: "operative" }, // Berna, Suiza
-    { name: "Site 6", coords: [54.3233, 10.1228], category: "removed" }, // Kiel, Alemania
-    { name: "Site 7", coords: [17.0151, 54.0924], category: "assessment" }, // Salalah, Omán
-    { name: "Site 8", coords: [48.0077, 0.1996], category: "assessment" }, // Le Mans, Francia
-    { name: "Site 9", coords: [54.3520, 18.6466], category: "assessment" } // Gdansk, Polonia
         ];
         var categoryColors = {
             "assessment": "blue",
             "deployment": "green",
@@ -56,6 +70,7 @@
         };
         var markers = [];
         function updateMarkers() {
             var selectedCategory = document.getElementById("category").value;
@@ -64,37 +79,78 @@
             markers.forEach(marker => map.removeLayer(marker));
             markers = [];
-            // Añadir los marcadores filtrados
-            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);
-                }
             });
-            // Ajustar el zoom para mostrar los puntos visibles
             if (markers.length > 1) {
                 var group = new L.featureGroup(markers);
                 map.fitBounds(group.getBounds());
             } else if (markers.length === 1) {
-                let zoom_nivel_pais = 6; // Nivel de zoom adecuado para mostrar un país
                 map.setView(markers[0].getLatLng(), zoom_nivel_pais);
             } else {
                 map.setView([45, 10], 3); // Vista inicial si no hay puntos
             }
         }
-        // Mostrar todos los marcadores al inicio
         updateMarkers();
     </script>
-</body>
-</html>

 <!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()">
     <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 }, // Ragusa, Italia
+            { name: "Seville", coords: [37.3886, -5.9823], category: "operative", connections: 9 }, // Sevilla, España
+            { name: "Groningen", coords: [53.2194, 6.5665], category: "operative", connections: 13 }, // Groningen, Países Bajos
+            { name: "Cape Town", coords: [-33.9249, 18.4241], category: "operative", connections: 1 }, // Ciudad del Cabo, Sudáfrica
+            { name: "Bern", coords: [46.9481, 7.4474], category: "operative", connections: 0 }, // Berna, Suiza
+            { name: "Kiel", coords: [54.3233, 10.1228], category: "removed", connections: 0 }, // Kiel, Alemania
+            { name: "Le Mans", coords: [17.0151, 54.0924], category: "assessment", connections: 0 }, // Salalah, Omán
+            { name: "Le Mans", coords: [48.0077, 0.1996], category: "assessment", connections: 0 }, // Le Mans, Francia
+            { name: "Gdansk", coords: [54.3520, 18.6466], category: "assessment", connections: 0 }, // Gdansk, Polonia
+            { name: "Prague", coords: [50.0755, 14.4378], category: "assessment", connections: 0 }, // Praga, República Checa
+            { name: "Kuwait", coords: [29.3759, 47.9774], category: "assessment", connections: 0 } // Kuwait, Kuwait
         ];
+        var map = L.map('map').setView([50.0755, 14.4378], 3); // Mapa centrado en Europa
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        }).addTo(map);
         var categoryColors = {
             "assessment": "blue",
             "deployment": "green",
         };
         var markers = [];
+        var chart = null; // Variable para almacenar el gráfico
         function updateMarkers() {
             var selectedCategory = document.getElementById("category").value;
             markers.forEach(marker => map.removeLayer(marker));
             markers = [];
+            // Filtrar y agregar los marcadores
+            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);
             });
+            // Ajustar el zoom
             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); // Vista inicial si no hay puntos
             }
+            // Actualizar el gráfico
+            updateChart(filteredLocations);
+        }
+        function updateChart(filteredLocations) {
+            // Obtener los datos para el gráfico
+            var cityNames = filteredLocations.map(location => location.name);
+            var connectionsData = filteredLocations.map(location => location.connections);
+            var categoryColorsData = filteredLocations.map(location => categoryColors[location.category]);
+            // Si el gráfico ya existe, destruirlo y crear uno nuevo
+            if (chart) {
+                chart.destroy();
+            }
+            // Crear el gráfico
+            var ctx = document.getElementById('connectionsChart').getContext('2d');
+            chart = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: cityNames,
+                    datasets: [{
+                        label: 'Remote Connections',
+                        data: connectionsData,
+                        backgroundColor: categoryColorsData, // Asignar color según categoría
+                        borderColor: categoryColorsData,    // Asignar color según categoría
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            ticks: {
+                                stepSize: 1
+                            }
+                        }
+                    }
+                }
+            });
         }
+        // Mostrar todos los marcadores y gráfico al inicio
         updateMarkers();
     </script>
+</body>
+</html>