Hugging Face's logo

Spaces:
JPLTedCas
/
MatrixMAP
Running

App Files Community
JPLTedCas commited on
Commit
7611efd
·
verified ·
1 Parent(s): 572f503

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +99 -18
index.html CHANGED
@@ -1,19 +1,100 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Mapa Interactivo</title>
7
+ <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
8
+ <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
9
+ <style>
10
+ #map { height: 500px; width: 100%; }
11
+ #controls { margin: 10px; }
12
+ </style>
13
+ </head>
14
+ <body>
15
+ <div id="controls">
16
+ <label for="category">Selecciona una categoría:</label>
17
+ <select id="category" onchange="updateMarkers()">
18
+ <option value="all">Todas</option>
19
+ <option value="assessment">Assessment</option>
20
+ <option value="deployment">In Deployment</option>
21
+ <option value="operative">Operative</option>
22
+ <option value="paused">Paused</option>
23
+ <option value="maintenance">Maintenance</option>
24
+ <option value="removed">Removed</option>
25
+ </select>
26
+ </div>
27
+
28
+ <div id="map"></div>
29
+
30
+ <script>
31
+ var map = L.map('map').setView([45, 10], 3); // Vista inicial
32
+
33
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
34
+ attribution: '&copy; OpenStreetMap contributors'
35
+ }).addTo(map);
36
+
37
+ var locations = [
38
+ { name: "Site 1", coords: [36.9257, 14.7244], category: "operative" }, // Ragusa, Italia
39
+ { name: "Site 2", coords: [37.3886, -5.9823], category: "operative" }, // Sevilla, España
40
+ { name: "Site 3", coords: [53.2194, 6.5665], category: "operative" }, // Groningen, Países Bajos
41
+ { name: "Site 4", coords: [-33.9249, 18.4241], category: "operative" }, // Ciudad del Cabo, Sudáfrica
42
+ { name: "Site 5", coords: [46.9481, 7.4474], category: "operative" }, // Berna, Suiza
43
+ { name: "Site 6", coords: [54.3233, 10.1228], category: "removed" }, // Kiel, Alemania
44
+ { name: "Site 7", coords: [17.0151, 54.0924], category: "assessment" }, // Salalah, Omán
45
+ { name: "Site 8", coords: [48.0077, 0.1996], category: "assessment" }, // Le Mans, Francia
46
+ { name: "Site 9", coords: [54.3520, 18.6466], category: "assessment" } // Gdansk, Polonia
47
+ ];
48
+
49
+ var categoryColors = {
50
+ "assessment": "blue",
51
+ "deployment": "green",
52
+ "operative": "green",
53
+ "paused": "yellow",
54
+ "maintenance": "orange",
55
+ "removed": "red"
56
+ };
57
+
58
+ var markers = [];
59
+
60
+ function updateMarkers() {
61
+ var selectedCategory = document.getElementById("category").value;
62
+
63
+ // Eliminar marcadores existentes
64
+ markers.forEach(marker => map.removeLayer(marker));
65
+ markers = [];
66
+
67
+ // Añadir los marcadores filtrados
68
+ locations.forEach(location => {
69
+ if (selectedCategory === "all" || location.category === selectedCategory) {
70
+ var marker = L.circleMarker(location.coords, {
71
+ color: categoryColors[location.category],
72
+ fillColor: categoryColors[location.category],
73
+ fillOpacity: 0.8,
74
+ radius: 8
75
+ }).bindPopup(`<b>${location.name}</b><br>Categoría: ${location.category}`);
76
+
77
+ marker.addTo(map);
78
+ markers.push(marker);
79
+ }
80
+ });
81
+ // Ajustar el zoom para mostrar los puntos visibles
82
+ if (markers.length > 1) {
83
+ var group = new L.featureGroup(markers);
84
+ map.fitBounds(group.getBounds());
85
+ } else if (markers.length === 1) {
86
+ let zoom_nivel_pais = 6; // Nivel de zoom adecuado para mostrar un país
87
+ map.setView(markers[0].getLatLng(), zoom_nivel_pais);
88
+ } else {
89
+ map.setView([45, 10], 3); // Vista inicial si no hay puntos
90
+ }
91
+
92
+
93
+ }
94
+
95
+ // Mostrar todos los marcadores al inicio
96
+ updateMarkers();
97
+ </script>
98
+ </body>
99
  </html>
100
+