[Wordpress] Transforma tu sitio con un mapa interactivo de visitantes activos

Tiempo de lectura estimado: 3 minutos

Cómo crear un mapa interactivo con banderas redondas y visitantes activos en WordPress con Leaflet.js

Introducción:

En este tutorial, aprenderás cómo crear un mapa interactivo en WordPress que muestre las ubicaciones de los visitantes activos de tu sitio web, utilizando banderas redondas para cada país. Usaremos Leaflet.js, una librería de mapas ligera, y OpenStreetMap como base para el mapa. Además, implementaremos un sistema que actualice el mapa cada pocos segundos con los datos más recientes de los visitantes.

Paso 1: Instalación del plugin

Para empezar, necesitamos crear un pequeño plugin de WordPress que cargue el mapa interactivo. Puedes hacerlo directamente desde el panel de administración de WordPress o creando un archivo PHP para tu plugin. Aquí te mostramos cómo hacerlo:

1.1. Crea una carpeta para el plugin:
Dirígete a la carpeta wp-content/plugins/ y crea una nueva carpeta llamada rtwm-map.

1.2. Crea el archivo principal del plugin:
Dentro de la carpeta rtwm-map, crea un archivo llamado rtwm-map.php. Este archivo contendrá la estructura básica de nuestro plugin de WordPress:

<?php
/**
 * Plugin Name: RTWM Map
 * Description: Muestra un mapa interactivo con banderas redondas de visitantes activos.
 * Version: 1.0
 * Author: V.R.S
 */

defined('ABSPATH') or die('¡Sin acceso directo!');

function rtwm_map_enqueue_scripts() {
    wp_enqueue_script('leaflet-js', 'https://unpkg.com/leaflet@1.7.1/dist/leaflet.js', array(), '1.7.1', true);
    wp_enqueue_style('leaflet-css', 'https://unpkg.com/leaflet@1.7.1/dist/leaflet.css', array(), '1.7.1');
    wp_enqueue_script('rtwm-map-js', plugin_dir_url(__FILE__) . 'js/map.js', array('leaflet-js'), null, true);
    wp_enqueue_style('rtwm-map-css', plugin_dir_url(__FILE__) . 'css/map.css');
}
add_action('wp_enqueue_scripts', 'rtwm_map_enqueue_scripts');

function rtwm_map_shortcode() {
    return '<div id="rtwm-map"></div><div id="rtwm-counter">Cargando visitantes...</div>';
}
add_shortcode('rtwm_map', 'rtwm_map_shortcode');

Paso 2: Crear los archivos JavaScript y CSS

2.1. Archivo JS (map.js)
Este archivo contendrá el código JavaScript para crear el mapa interactivo. El código actualizado que hemos estado trabajando se coloca en este archivo:

document.addEventListener("DOMContentLoaded", function () {
    const map = L.map('rtwm-map', {
        maxZoom: 19,
        zoomControl: true
    }).setView([20.0, 0.0], 2);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors',
        minZoom: 2,
        maxZoom: 19,
        noWrap: true
    }).addTo(map);

    const markers = {}; // Guardar los marcadores existentes

    function updateVisitors() {
        fetch(rtwm_vars.ajaxurl + '?action=rtwm_get_data')
            .then(response => response.json())
            .then(data => {
                const activeIPs = new Set();

                data.forEach(function (visitor) {
                    const countryData = visitor.country.split('|');
                    const country = countryData[0];
                    const lat = visitor.lat;
                    const lng = visitor.lng;
                    const countryCode = countryData[3];
                    const ip = visitor.ip;

                    activeIPs.add(ip);

                    if (!countryCode || countryCode.length !== 2) {
                        console.log(`Código del país no válido o faltante: ${country}`);
                        return;
                    }

                    if (markers[ip]) {
                        return; // Ya está en el mapa
                    }

                    const flagUrl = `https://flagpedia.net/data/flags/h80/${countryCode.toLowerCase()}.png`;
                    const img = new Image();

                    img.onload = function () {
                        const zoomLevel = map.getZoom();
                        const size = zoomLevel > 5 ? 40 : 30;

                        const icon = L.divIcon({
                            className: 'rounded-flag',
                            html: ``,
                            iconSize: [size, size],
                            iconAnchor: [size / 2, size],
                            popupAnchor: [0, -size]
                        });

                        const marker = L.marker([lat, lng], { icon: icon }).addTo(map);
                        marker.bindPopup(`
                            ${country}

                            IP: ${ip}

                            Visita: ${visitor.visit_time}
                        `);
                        markers[ip] = marker;
                    };

                    img.onerror = function () {
                        console.log(`No se pudo cargar la bandera para ${countryCode}`);
                    };

                    img.src = flagUrl;
                });

                // Eliminar marcadores de IPs que ya no están activas
                for (const ip in markers) {
                    if (!activeIPs.has(ip)) {
                        map.removeLayer(markers[ip]);
                        delete markers[ip];
                    }
                }

                // Actualizar contador de visitas
                fetch(rtwm_vars.ajaxurl + '?action=rtwm_count')
                    .then(response => response.json())
                    .then(countData => {
                        document.getElementById('rtwm-counter').textContent = `${countData.count} visitantes activos`;
                    });
            });
    }

    // Escuchar cambios de zoom para actualizar tamaños
    map.on('zoomend', () => {
        // Recalcula el tamaño de banderas sin duplicar
        const zoomLevel = map.getZoom();
        const newSize = zoomLevel > 5 ? 40 : 30;

        for (const ip in markers) {
            const marker = markers[ip];
            const iconEl = marker.getElement();
            if (iconEl) {
                const img = iconEl.querySelector('img');
                if (img) {
                    img.width = newSize;
                    img.height = newSize;
                }
            }
        }
    });

    // Llamadas iniciales y periódicas
    updateVisitors();
    setInterval(updateVisitors, 5000);
});

2.2. Archivo CSS (map.css)

Este archivo contiene los estilos para las banderas redondas y el mapa:

#rtwm-map {
    width: 100%;
    height: 500px;
    position: relative;
}

.leaflet-container {
    image-rendering: auto !important;
}

.rounded-flag .flag-container {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rounded-flag img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

Paso 3: Crear el archivo `functions.php` para manejar AJAX

Este archivo es necesario para manejar las solicitudes de AJAX que envían los datos de los visitantes. Puedes agregar este código en el functions.php de tu tema:

function rtwm_get_data() {
    // Aquí debes implementar tu lógica para obtener los datos de los visitantes
    // Devuelve un JSON con la información de los visitantes (país, latitud, longitud, IP, hora de la visita)
    echo json_encode($data);
    wp_die();
}
add_action('wp_ajax_rtwm_get_data', 'rtwm_get_data');
add_action('wp_ajax_nopriv_rtwm_get_data', 'rtwm_get_data');

function rtwm_count_visits() {
    // Contar el número de visitas activas
    echo json_encode(array('count' => $visitor_count));
    wp_die();
}
add_action('wp_ajax_rtwm_count', 'rtwm_count_visits');
add_action('wp_ajax_nopriv_rtwm_count', 'rtwm_count_visits');

Paso 4: Incluir el shortcode en tu página

Una vez que el plugin esté activado, puedes agregar el mapa en cualquier página de WordPress usando el siguiente shortcode:

[rtwm_map]

Conclusión:

Con este artículo, hemos creado un mapa interactivo que muestra las ubicaciones de los visitantes activos de tu sitio web usando banderas redondas. Además, hemos configurado el mapa para que se actualice dinámicamente con cada nueva visita. ¡Ahora puedes ver en tiempo real de dónde vienen tus visitantes y cómo interactúan con tu sitio!

V.Serna

Website | + posts

Desarrollador web • Desarrollador de software· • Amante del diseño gráfico, diseño 2D/3D

🐙 Creando nuevo tema Wordpress en GitHub

🧪 Experimentos y pruebas varias en Serna Studio Lab