Merge pull request #90 from enflujo/interaccion-mapa

✨ Agregar interacción desde mapa

estaticos/datosMapaEgresados.geo.json

@@ -1 +1 @@
-{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"slug":"berlin","conteo":2},"geometry":{"type":"Point","coordinates":[13.259928,52.50673]}},{"type":"Feature","properties":{"slug":"bogota","conteo":53},"geometry":{"type":"Point","coordinates":[-74.10378,4.64958]}},{"type":"Feature","properties":{"slug":"bucaramanga","conteo":1},"geometry":{"type":"Point","coordinates":[-73.12099,7.11168]}},{"type":"Feature","properties":{"slug":"cali","conteo":2},"geometry":{"type":"Point","coordinates":[-76.68155,3.39505]}},{"type":"Feature","properties":{"slug":"cambridge","conteo":2},"geometry":{"type":"Point","coordinates":[0.04205,52.19881]}},{"type":"Feature","properties":{"slug":"dubai","conteo":1},"geometry":{"type":"Point","coordinates":[54.60365,25.07472]}},{"type":"Feature","properties":{"slug":"honda","conteo":1},"geometry":{"type":"Point","coordinates":[-74.84303,5.2104266]}},{"type":"Feature","properties":{"slug":"johannesburgo","conteo":1},"geometry":{"type":"Point","coordinates":[27.9988,-26.17151]}},{"type":"Feature","properties":{"slug":"madrid","conteo":2},"geometry":{"type":"Point","coordinates":[-3.84434,40.43783]}},{"type":"Feature","properties":{"slug":"medellin","conteo":2},"geometry":{"type":"Point","coordinates":[-75.57667,6.216123]}},{"type":"Feature","properties":{"slug":"oakland","conteo":1},"geometry":{"type":"Point","coordinates":[-122.4001,37.7586]}},{"type":"Feature","properties":{"slug":"oregon","conteo":1},"geometry":{"type":"Point","coordinates":[-123.2223,44.1152]}},{"type":"Feature","properties":{"slug":"oxford","conteo":1},"geometry":{"type":"Point","coordinates":[-1.288787,51.75041]}},{"type":"Feature","properties":{"slug":"quibdo","conteo":1},"geometry":{"type":"Point","coordinates":[-76.65319,5.68914]}},{"type":"Feature","properties":{"slug":"utrecht","conteo":1},"geometry":{"type":"Point","coordinates":[5.00009,52.0841]}},{"type":"Feature","properties":{"slug":"viena","conteo":1},"geometry":{"type":"Point","coordinates":[16.29727,48.22025]}},{"type":"Feature","properties":{"slug":"dubai","conteo":1},"geometry":{"type":"Point","coordinates":[55.24700319430791,25.1667024771733]}}]}
+{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"slug":"berlin","nombre":"Berlín","conteo":2},"geometry":{"type":"Point","coordinates":[13.259928,52.50673]}},{"type":"Feature","properties":{"slug":"bogota","nombre":"Bogotá","conteo":53},"geometry":{"type":"Point","coordinates":[-74.10378,4.64958]}},{"type":"Feature","properties":{"slug":"bucaramanga","nombre":"Bucaramanga","conteo":1},"geometry":{"type":"Point","coordinates":[-73.12099,7.11168]}},{"type":"Feature","properties":{"slug":"cali","nombre":"Cali","conteo":2},"geometry":{"type":"Point","coordinates":[-76.68155,3.39505]}},{"type":"Feature","properties":{"slug":"cambridge","nombre":"Cambridge","conteo":2},"geometry":{"type":"Point","coordinates":[0.04205,52.19881]}},{"type":"Feature","properties":{"slug":"dubai","nombre":"Dubai","conteo":1},"geometry":{"type":"Point","coordinates":[54.60365,25.07472]}},{"type":"Feature","properties":{"slug":"honda","nombre":"Honda","conteo":1},"geometry":{"type":"Point","coordinates":[-74.84303,5.2104266]}},{"type":"Feature","properties":{"slug":"johannesburgo","nombre":"Johannesburgo","conteo":1},"geometry":{"type":"Point","coordinates":[27.9988,-26.17151]}},{"type":"Feature","properties":{"slug":"madrid","nombre":"Madrid","conteo":2},"geometry":{"type":"Point","coordinates":[-3.84434,40.43783]}},{"type":"Feature","properties":{"slug":"medellin","nombre":"Medellín","conteo":2},"geometry":{"type":"Point","coordinates":[-75.57667,6.216123]}},{"type":"Feature","properties":{"slug":"oakland","nombre":"Oakland","conteo":1},"geometry":{"type":"Point","coordinates":[-122.4001,37.7586]}},{"type":"Feature","properties":{"slug":"oregon","nombre":"Oregon","conteo":1},"geometry":{"type":"Point","coordinates":[-123.2223,44.1152]}},{"type":"Feature","properties":{"slug":"oxford","nombre":"Oxford","conteo":1},"geometry":{"type":"Point","coordinates":[-1.288787,51.75041]}},{"type":"Feature","properties":{"slug":"quibdo","nombre":"Quibdó","conteo":1},"geometry":{"type":"Point","coordinates":[-76.65319,5.68914]}},{"type":"Feature","properties":{"slug":"utrecht","nombre":"Utrecht","conteo":1},"geometry":{"type":"Point","coordinates":[5.00009,52.0841]}},{"type":"Feature","properties":{"slug":"viena","nombre":"Viena","conteo":1},"geometry":{"type":"Point","coordinates":[16.29727,48.22025]}},{"type":"Feature","properties":{"slug":"dubai","nombre":"Dubai","conteo":1},"geometry":{"type":"Point","coordinates":[55.24700319430791,25.1667024771733]}}]}

procesador/lugares.ts

@@ -64,6 +64,7 @@ export async function procesarLugares(archivo: string, listas: Listas): Promise<
           type: 'Feature',
           properties: {
             slug: lugares[lugar].slug,
+            nombre: lugares[lugar].nombre,
             conteo
           },
           geometry: { type: 'Point', coordinates: [lugares[lugar].lon, lugares[lugar].lat] }
@@ -136,6 +137,7 @@ export async function procesarLugaresEgresados(archivo: string, listas: ListasEg
           type: 'Feature',
           properties: {
             slug: lugares[lugar].slug,
+            nombre: lugares[lugar].nombre,
             conteo
           },
           geometry: { type: 'Point', coordinates: [lugares[lugar].lon, lugares[lugar].lat] }

src/componentes/Ficha.astro

@@ -395,6 +395,11 @@ const secciones = [
     padding: 10px;
     border-radius: 1.5%;
 
+    a,
+    a:link {
+      overflow-wrap: anywhere;
+    }
+
     &::before {
       content: '';
       background-image: url(/enflujo-haciendocaminos/imgs/gusano_4.svg);

src/componentes/Mapa.astro

@@ -6,9 +6,10 @@
 
 <script>
   import mapbox from 'mapbox-gl';
-  import type { GeoJSONSource, Map } from 'mapbox-gl';
-  import { geo } from '@/utilidades/cerebro';
+  import { GeoJSONSource, type Map } from 'mapbox-gl';
+  import { actualizarUrl, datosListas, datosListasEgresados, geo } from '@/utilidades/cerebro';
   import 'mapbox-gl/dist/mapbox-gl.css';
+  import { vista } from '@/utilidades/cerebro';
 
   let mapaCreado = false; // Instancia creada
   let mapaCargado = false; // Instancia creada y ya terminó de cargar en la página
@@ -96,7 +97,7 @@
        * 🅰 Texto dentro del círculo
        */
       mapa.addLayer({
-        id: 'contadorObras',
+        id: 'contadorProyectos',
         type: 'symbol',
         source: 'ubicaciones',
         // Sólo mostrarlo cuando tiene más de un lugar agrupado ("point_count" lo crea mapbox y se va actualizando con el zoom).
@@ -122,9 +123,9 @@
         paint: {
           'circle-stroke-color': '#ff00ff',
           'circle-color': '#ff00ff',
-          'circle-radius': 15,
-          'circle-stroke-width': 2,
-          'circle-opacity': 0.05
+          'circle-radius': 7,
+          'circle-stroke-width': 0,
+          'circle-opacity': 1
         }
       });
 
@@ -141,25 +142,95 @@
             'format',
             ['get', 'nombre'],
             { 'font-scale': 0.8 },
-            ' ',
+            ' (',
             ['get', 'conteo'],
-            { 'font-scale': 0.75 }
+            { 'font-scale': 0.75 },
+            ')'
           ]
         },
         paint: {
-          'text-color': '#000',
-          'text-halo-width': ['case', ['boolean', ['feature-state', 'activo'], false], 3, 2],
-          'text-halo-blur': 0
+          'text-color': '#ff00ff',
+          'text-translate': [0, -15]
         }
       });
 
       mapaCargado = true;
-    });
+      const popup = new mapbox.Popup({
+        closeButton: false
+      });
+
+      function eventoEncima() {
+        mapa.getCanvas().style.cursor = 'pointer';
+      }
+
+      function eventoFuera() {
+        mapa.getCanvas().style.cursor = '';
+      }
+
+      // Función para mostrar algo al pasar el mouse por un punto
+      mapa.on('mouseenter', 'grupos', eventoEncima);
+      mapa.on('mouseleave', 'grupos', eventoFuera);
+      mapa.on('mouseenter', 'punto', eventoEncima);
+      mapa.on('mouseleave', 'punto', eventoFuera);
+
+      mapa.on('click', 'punto', (evento) => {
+        const datosPunto = evento.features?.[0].properties;
+        if (datosPunto && datosPunto.slug) {
+          const esProyectos = vista.get() === 'proyectos';
+          const fuente = esProyectos ? datosListas.get().municipios : datosListasEgresados.get().ciudades;
+          const indiceLugar = fuente.findIndex((obj) => obj.slug === datosPunto.slug);
+          actualizarUrl([
+            { nombre: 'id', valor: `${indiceLugar}` },
+            { nombre: 'tipo', valor: esProyectos ? 'municipios' : 'ciudades' }
+          ]);
+        }
+        // mapa.getCanvas().style.cursor = '';
+      });
 
-    // Función para mostrar algo al pasar el mouse por un punto
-    // mapa.on('mouseenter', 'grupos', (evento) => {
-    //   console.log(evento);
-    // });
+      mapa.on('click', 'grupos', (evento) => {
+        const datosGrupo = evento.features?.[0].properties;
+        if (!datosGrupo) return;
+
+        const clusterId = datosGrupo.cluster_id;
+        const conteoPuntos = datosGrupo.point_count;
+        const fuenteZonas = mapa.getSource('ubicaciones') as GeoJSONSource;
+
+        fuenteZonas.getClusterLeaves(clusterId, conteoPuntos, 0, (error, features) => {
+          if (error) {
+            // hacer algo si hay error
+          } else {
+            const contenedor = document.createElement('div');
+            contenedor.className = 'listaLugares';
+
+            const esProyectos = vista.get() === 'proyectos';
+            const fuente = esProyectos ? datosListas.get().municipios : datosListasEgresados.get().ciudades;
+
+            features.forEach((lugar) => {
+              const indiceLugar = fuente.findIndex((obj) => obj.slug === lugar.properties?.slug);
+              const datosLugar = fuente[indiceLugar];
+
+              const enlaceIdeaJulian = document.createElement('a');
+              enlaceIdeaJulian.classList.add('enlaceMapa');
+              enlaceIdeaJulian.innerText = `${datosLugar?.nombre}: ${datosLugar?.conteo}`;
+
+              enlaceIdeaJulian.onclick = () => {
+                popup.remove();
+                actualizarUrl([
+                  { nombre: 'id', valor: `${indiceLugar}` },
+                  { nombre: 'tipo', valor: esProyectos ? 'municipios' : 'ciudades' }
+                ]);
+              };
+
+              if (datosLugar) {
+                contenedor.appendChild(enlaceIdeaJulian);
+              }
+            });
+
+            popup.setLngLat(evento.lngLat).setDOMContent(contenedor).addTo(mapa);
+          }
+        });
+      });
+    });
   });
 </script>
 
@@ -169,5 +240,16 @@
     top: 0;
     width: 100%;
     height: 100%;
+
+    .listaLugares {
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      max-height: 200px;
+
+      .enlaceMapa {
+        cursor: pointer;
+      }
+    }
   }
 </style>

src/scss/estilos.scss

@@ -38,7 +38,6 @@ a,
 a:link {
   color: var(--resaltadoVerde);
   font-weight: bold;
-  overflow-wrap: anywhere;
 
   &:hover {
     color: var(--fondoVerdeClaro);

src/utilidades/cerebro.ts

@@ -68,18 +68,19 @@ vista.subscribe(async (vistaActual) => {
 
     const proyectos = await pedirDatos<Proyecto[]>(`${base}/proyectos.json`);
     datosProyectos.set(proyectos);
+
     revisarVariablesURL();
   } else if (vistaActual === 'egresados') {
     const geoEgresados = await pedirDatos<FeatureCollection<Point>>(`${base}/datosMapaEgresados.geo.json`);
     geo.set(geoEgresados);
+    _copiaDatosMapaEgresados = geoEgresados;
 
     const listasEgresados = await pedirDatos<ListasEgresados>(`${base}/listasEgresados.json`);
     datosListasEgresados.set(listasEgresados);
 
     const egresados = await pedirDatos<Egresado[]>(`${base}/egresados.json`);
     datosEgresados.set(egresados);
 
-    _copiaDatosMapaEgresados = geoEgresados;
     revisarVariablesURL();
   }
 
@@ -235,13 +236,17 @@ elementoSeleccionado.subscribe((elemento) => {
           {}
         );
 
-        const lugaresMapa = datos.relaciones.filter((relacion) => relacion.tipo === 'municipios');
+        if (tipo === 'municipios') {
+          filtrarMapa([{ slug: datos.slug, conteo: datos.conteo }]);
+        } else {
+          const lugaresMapa = datos.relaciones.filter((relacion) => relacion.tipo === 'municipios');
 
-        filtrarMapa(
-          lugaresMapa.map((lugar) => {
-            return { slug: lugar.slug, conteo: lugar.conteo };
-          })
-        );
+          filtrarMapa(
+            lugaresMapa.map((lugar) => {
+              return { slug: lugar.slug, conteo: lugar.conteo };
+            })
+          );
+        }
 
         datosFicha.set({
           visible: true,
@@ -313,13 +318,17 @@ elementoSeleccionado.subscribe((elemento) => {
           {}
         );
 
-        const lugaresMapa = datos.relaciones.filter((relacion) => relacion.tipo === 'ciudades');
+        if (tipo === 'ciudades') {
+          filtrarMapa([{ slug: datos.slug, conteo: datos.conteo }]);
+        } else {
+          const lugaresMapa = datos.relaciones.filter((relacion) => relacion.tipo === 'ciudades');
 
-        filtrarMapa(
-          lugaresMapa.map((lugar) => {
-            return { slug: lugar.slug, conteo: lugar.conteo };
-          })
-        );
+          filtrarMapa(
+            lugaresMapa.map((lugar) => {
+              return { slug: lugar.slug, conteo: lugar.conteo };
+            })
+          );
+        }
 
         datosFicha.set({
           visible: true,