From 2fb1864580c4a9e9f2ab58c4794d84d8251cc2a0 Mon Sep 17 00:00:00 2001
From: albert1413 <albertjovani@iesmontsia.org>
Date: Tue, 17 Dec 2024 21:26:00 +0100
Subject: [PATCH] refactor: map development

---
 .../Layouts/Admin/AdminInventoryLayout.php    |   1 +
 app/src/app/Views/Admin/Inventory.php         | 204 +++++++++++++++++-
 2 files changed, 199 insertions(+), 6 deletions(-)

diff --git a/app/src/app/Layouts/Admin/AdminInventoryLayout.php b/app/src/app/Layouts/Admin/AdminInventoryLayout.php
index 82bdd6d..8b3c74e 100644
--- a/app/src/app/Layouts/Admin/AdminInventoryLayout.php
+++ b/app/src/app/Layouts/Admin/AdminInventoryLayout.php
@@ -16,6 +16,7 @@
     <script src="https://kit.fontawesome.com/f80b94bd90.js" crossorigin="anonymous"></script>
     <link href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css" rel="stylesheet">
     <script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
+
     <style>
         html, body {
             height: 100%; /* Asegúrate de que el body ocupe toda la pantalla */
diff --git a/app/src/app/Views/Admin/Inventory.php b/app/src/app/Views/Admin/Inventory.php
index 97c0747..f5b6017 100644
--- a/app/src/app/Views/Admin/Inventory.php
+++ b/app/src/app/Views/Admin/Inventory.php
@@ -1,16 +1,78 @@
-<div id="map"></div>
+<div id="map" class="relative">
+    <!-- Botón para abrir el panel de filtros -->
+    <button class="absolute z-10 bottom-5 right-5 p-2 bg-blue-500 text-white rounded-full" id="openMore">
+        <span class="material-icons">Filtros</span> 
+    </button>
+
+    <!-- Panel de filtros (desaparece desde abajo) -->
+    <div id="firstPanel" class="absolute z-10 bottom-0 right-20 bg-white shadow-lg w-full sm:w-96 h-1/4 p-5 transform translate-y-full transition-transform ease-in-out duration-300 rounded-xl">
+    <button class="absolute text-xl top-3" id="openFilters">
+        <span class="text-lg font-semibold">Filtros</span>
+    </button>
+    <button class="absolute text-xl top-1/3" id="openZones">
+        <span class="text-lg font-semibold">Agregar Zonas</span>
+    </button>
+    <button class="absolute text-xl top-2/3" id="openElements">
+        <span class="text-lg font-semibold">Agregar Elementos</span>
+    </button>
+</div>
+
+<div id="filterPanel" class="absolute z-10 bottom-0 right-[calc(20rem+1rem)] bg-white shadow-lg w-full sm:w-96 h-1/4 p-5 transform translate-y-full transition-transform ease-in-out duration-300 rounded-xl">
+    <div class="space-y-2">
+        <label class="block">
+            <input type="checkbox" class="mr-2" /> Opción 1
+        </label>
+        <label class="block">
+            <input type="checkbox" class="mr-2" /> Opción 2
+        </label>
+        <label class="block">
+            <input type="checkbox" class="mr-2" /> Opción 3
+        </label>
+    </div>
+</div>
+
+<script>
+    const openFiltersButton = document.getElementById("openMore");
+    const firstPanel = document.getElementById("firstPanel");
+    const openElementsButton = document.getElementById("openElements");
+    const filterPanel = document.getElementById("filterPanel");
+
+    // Primer Panel
+    let panel = false
+    let panel2 = false
+
+    openFiltersButton.addEventListener("click", () => {
+        if (panel === false){
+            firstPanel.style.transform = "translateY(0)"; // Mostrar panel
+            panel = true
+        }
+        else{
+            firstPanel.style.transform = "translateY(100%)"; // Ocultar panel
+            panel = false
+        }
+    });
+    openElementsButton.addEventListener("click",() =>{
+        if (panel2 === false){
+            filterPanel.style.transform = "translateY(0)";
+            panel2 = true
+        }
+        else{
+            filterPanel.style.transform = "translateY(100%)";
+        }
+    })
+</script>
+
 <script>
 	mapboxgl.accessToken = '<?= getenv("MAPBOX")?>';
     const map = new mapboxgl.Map({
         container: 'map',
-        style: 'mapbox://styles/mapbox/streets-v9',
+        style: 'mapbox://styles/mapbox/satellite-streets-v12', // Estil del mapa
         projection: 'globe', // Display the map as a globe, since satellite-v9 defaults to Mercator
-        zoom: 1,
-        center: [30, 15]
+        zoom: 12,
+        center: [-0.3763, 39.4699]
     });
 
-    map.addControl(new mapboxgl.NavigationControl());
-    map.scrollZoom.disable();
+    map.addControl(new mapboxgl.NavigationControl()); // Ampliar o alejar-se con el cursor
 
     map.on('style.load', () => {
         map.setFog({}); // Set the default atmosphere style
@@ -60,5 +122,135 @@ function spinGlobe() {
     });
 
     spinGlobe();
+
+    //GeoJSON
+    map.on('load', () => {
+    // Agregar fuente con GeoJSON
+    map.addSource('valencia-area', {
+        'type': 'geojson',
+        'data': {
+            'type': 'FeatureCollection',
+            'features': [
+                // Zona: Polígono
+                {
+                    'type': 'Feature',
+                    'geometry': {
+                        'type': 'Polygon',
+                        'coordinates': [
+                            [
+                                [-0.379946, 39.472606], // Estación del Norte
+                                [-0.377255, 39.470085], // Mercado Central
+                                [-0.374091, 39.470914], // Plaza Redonda
+                                [-0.372027, 39.472846], // Plaza de la Reina
+                                [-0.374709, 39.475012], // Torres de Serranos
+                                [-0.378901, 39.474073], // Plaza del Ayuntamiento
+                                [-0.379946, 39.472606]  // Cierra el polígono
+                            ]
+                        ]
+                    },
+                    'properties': {
+                        'name': 'Centro Histórico de Valencia',
+                        'description': 'Una de las zonas más emblemáticas de Valencia, que incluye plazas, mercados y torres históricas.'
+                    }
+                },
+                // Punto: Plaza del Ayuntamiento
+                {
+                    'type': 'Feature',
+                    'geometry': {
+                        'type': 'Point',
+                        'coordinates': [-0.3789, 39.4740]
+                    },
+                    'properties': {
+                        'name': 'Plaza del Ayuntamiento',
+                        'description': 'Centro neurálgico de Valencia con vistas icónicas y actividades culturales.'
+                    }
+                },
+                // Punto: Mercado Central
+                {
+                    'type': 'Feature',
+                    'geometry': {
+                        'type': 'Point',
+                        'coordinates': [-0.377255, 39.470085]
+                    },
+                    'properties': {
+                        'name': 'Mercado Central',
+                        'description': 'Un mercado icónico lleno de productos frescos y arquitectura modernista.'
+                    }
+                },
+                // Punto: Plaza de la Reina
+                {
+                    'type': 'Feature',
+                    'geometry': {
+                        'type': 'Point',
+                        'coordinates': [-0.372027, 39.472846]
+                    },
+                    'properties': {
+                        'name': 'Plaza de la Reina',
+                        'description': 'Una plaza histórica rodeada de cafeterías y la famosa Catedral de Valencia.'
+                    }
+                }
+            ]
+        }
+    });
+
+    // Añadir capas de polígono y puntos
+    map.addLayer({
+        'id': 'valencia-boundary',
+        'type': 'fill',
+        'source': 'valencia-area',
+        'paint': {
+            'fill-color': '#0080ff',
+            'fill-opacity': 0.3
+        },
+        'filter': ['==', '$type', 'Polygon']
+    });
+
+    map.addLayer({
+        'id': 'valencia-points',
+        'type': 'circle',
+        'source': 'valencia-area',
+        'paint': {
+            'circle-radius': 6,
+            'circle-color': '#ff5733'
+        },
+        'filter': ['==', '$type', 'Point']
+    });
+
+    // Evento para clic en el polígono
+    map.on('click', 'valencia-boundary', (e) => {
+        const coordinates = e.lngLat;
+        const properties = e.features[0].properties;
+
+        new mapboxgl.Popup()
+            .setLngLat(coordinates)
+            .setHTML(`<strong>${properties.name}</strong><p>${properties.description}</p>`)
+            .addTo(map);
+    });
+
+    // Evento para clic en los puntos
+    map.on('click', 'valencia-points', (e) => {
+        const coordinates = e.features[0].geometry.coordinates.slice();
+        const properties = e.features[0].properties;
+
+        new mapboxgl.Popup()
+            .setLngLat(coordinates)
+            .setHTML(`<strong>${properties.name}</strong><p>${properties.description}</p>`)
+            .addTo(map);
+    });
+
+    // Cambiar el cursor a "pointer" al pasar por los puntos o la zona
+    map.on('mouseenter', 'valencia-boundary', () => {
+        map.getCanvas().style.cursor = 'pointer';
+    });
+    map.on('mouseleave', 'valencia-boundary', () => {
+        map.getCanvas().style.cursor = '';
+    });
+    map.on('mouseenter', 'valencia-points', () => {
+        map.getCanvas().style.cursor = 'pointer';
+    });
+    map.on('mouseleave', 'valencia-points', () => {
+        map.getCanvas().style.cursor = '';
+    });
+});
 </script>