Simple Interactive Map - Plugin WordPress

Plugin de WordPress para crear mapas SVG interactivos con divisiones, puntos relevantes, videos de fondo y enlaces a posts.

• Versión actual: 1.4.6 (ver simple-interactive-map.php)
• Text domain: simple-interactive-map
• Repositorio: https://github.com/Pryw00/simple-interactive-map (antes simple-iteractive-map)

Los valores de ejemplo del plugin (mini mapa "Ibarra", división angochagua) provienen del proyecto para el cantón Ibarra.

📋 Características

• 🗺️ Mapa SVG Interactivo: Visualización de mapas divididos en secciones personalizables
• 🎯 Puntos Relevantes: Marcadores dentro de cada división con información adicional
• 🎬 Videos de Fondo: Video complementario para cada división y punto
• 📱 Responsive: Diseño adaptable a dispositivos móviles
• 🎨 Personalizable: Colores y estilos configurables
• ♿ Accesible: Soporte para navegación por teclado y lectores de pantalla
• 🌐 Multilingüe: Listo para traducción

🚀 Instalación

Desde un archivo ZIP

1. Comprime la carpeta simple-interactive-map (sin .git) en simple-interactive-map.zip
2. En WordPress ve a Plugins > Añadir nuevo > Subir plugin, selecciona el ZIP y actívalo
3. Ve a Interactive Map > Configuración para configurar el mapa

Instalación manual

1. Descarga el plugin (git clone https://github.com/Pryw00/simple-interactive-map.git) y sube la carpeta simple-interactive-map a /wp-content/plugins/
2. Activa el plugin desde el menú 'Plugins' en WordPress
3. Ve a Interactive Map > Configuración para configurar el mapa

🚀 Cómo usar el plugin

1. Crear y configurar mapas

1. Ve a Interactive Map > Mapas y crea un nuevo mapa. Cada mapa puede tener su propio SVG, colores y video de fondo.
2. Sube un archivo SVG o pega el código SVG en el campo correspondiente. Asegúrate de que cada división tenga un ID único (ejemplo: id="division1").
3. Personaliza los colores de hover y selección, y el video de fondo predeterminado para ese mapa.

2. Crear divisiones para cada mapa

1. Ve a Interactive Map > Divisiones.
2. Selecciona el mapa en el selector superior.
3. Haz clic en "Añadir Nueva División" o usa "Detectar Automáticamente" para crear divisiones a partir de los paths del SVG.
4. Completa los campos requeridos para cada división.

3. Crear puntos relevantes (opcional)

1. Ve a Interactive Map > Puntos Relevantes.
2. Selecciona el mapa en el selector superior.
3. Haz clic en "Añadir Nuevo Punto" y completa los campos (división, nombre, descripción, posición, video, enlace, icono).

4. Insertar el mapa en una página

Usa el shortcode:

[simple_interactive_map id="X"]

Donde X es el ID del mapa que quieres mostrar (lo puedes ver en la lista de mapas o en el selector de divisiones/puntos).

Puedes tener varios mapas en la misma página, cada uno con su propio shortcode e interactividad independiente.

---

📖 Uso

1. Configuración Inicial

Configurar el SVG del Mapa

1. Ve a Interactive Map > Configuración
2. Pega el código SVG de tu mapa en el campo "Contenido SVG del Mapa"
3. Asegúrate de que cada división tenga un ID único (ejemplo: id="angochagua", id="ibarra")
4. Configura el video de fondo predeterminado
5. Personaliza los colores de hover y selección
6. Guarda los cambios

Crear Divisiones

1. Ve a Interactive Map > Divisiones
2. Haz clic en "Añadir Nueva División"
3. Completa los campos:
   • Nombre: Nombre visible de la división (ej: "Angochagua")
   • SVG Path ID: ID del path en el SVG (ej: "angochagua")
   • Descripción: Texto descriptivo que aparecerá en el panel lateral
   • URL del Video de Fondo: Video que se mostrará al seleccionar esta división
   • Post Asociado: Post de WordPress que se enlazará con el botón "Vamos!"
   • Orden de Visualización: Número para ordenar las divisiones
4. Guarda la división

Crear Puntos Relevantes (Opcional)

1. Ve a Interactive Map > Puntos Relevantes
2. Haz clic en "Añadir Nuevo Punto"
3. Completa los campos:
   • División: Selecciona a qué división pertenece
   • Nombre: Nombre del punto
   • Descripción: Información sobre el punto
   • Posición X e Y: Coordenadas en porcentaje (0-100%)
   • URL del Video: Video asociado al punto
   • Enlace: URL opcional para más información
   • Tipo de Icono: Estilo visual del marcador (predeterminado, marcador, estrella, pin, o SVG personalizado)
   • SVG Personalizado: Si seleccionas "SVG Personalizado" como tipo de icono, puedes seleccionar o subir un archivo SVG desde la biblioteca de medios que se mostrará como marcador del punto
4. Guarda el punto

2. Insertar el Mapa

Usa el shortcode en cualquier página o entrada:

[simple_interactive_map]

Parámetros opcionales:

[simple_interactive_map width="100%" height="auto"]

🎨 Estructura del Plugin

simple-interactive-map/
├── simple-interactive-map.php    # Archivo principal
├── includes/                      # Clases principales
│   ├── class-simple-interactive-map.php
│   ├── class-loader.php
│   ├── class-activator.php
│   ├── class-deactivator.php
│   └── class-updater.php          # Migraciones / auto-reparación de tablas
├── assets/
│   ├── example-map.svg
│   └── fonts/
├── admin/                         # Backend (Panel de administración)
│   ├── class-admin.php
│   ├── css/
│   │   └── admin.css
│   ├── js/
│   │   └── admin.js
│   └── partials/
│       ├── settings-page.php
│       ├── maps-page.php
│       ├── divisions-page.php
│       └── points-page.php
└── public/                        # Frontend (Visualización pública)
    ├── class-public.php
    ├── css/
    │   └── public.css
    └── js/
        └── public.js

🔧 Requisitos del Sistema

• WordPress 6.0 o superior
• PHP 7.4 o superior
• MySQL 5.7 o superior

💾 Base de Datos

El plugin crea dos tablas personalizadas:

wp_sim_divisions

Almacena las divisiones del mapa:

• id: ID único
• name: Nombre de la división
• svg_path_id: ID del path SVG
• description: Descripción
• video_url: URL del video
• post_id: ID del post asociado
• display_order: Orden de visualización

wp_sim_points

Almacena los puntos relevantes:

• id: ID único
• division_id: ID de la división padre
• name: Nombre del punto
• description: Descripción
• position_x: Posición horizontal (%)
• position_y: Posición vertical (%)
• video_url: URL del video
• link_url: Enlace externo
• icon_type: Tipo de icono (default, marker, star, pin, custom)
• custom_svg: URL del archivo SVG personalizado para el icono
• display_order: Orden de visualización

🎯 Funcionalidades Principales

Frontend

Mapa Interactivo

• Hover sobre divisiones con efecto visual
• Click para seleccionar y ver información
• Mini mapa de referencia en la esquina superior derecha
• Video de fondo dinámico

Panel de Información

• Se desliza desde la izquierda al seleccionar una división
• Muestra nombre, descripción y botón "Vamos!"
• Enlaza al post de tours asociado

Puntos Relevantes

• Marcadores animados sobre el mapa
• Modal con información al hacer clic
• Video de fondo específico para cada punto

Backend

Panel de Configuración

• Subir/editar SVG del mapa
• Configurar videos predeterminados
• Personalizar colores

Gestión de Divisiones

• CRUD completo (Crear, Leer, Actualizar, Eliminar)
• Interfaz intuitiva con modales
• Selector de videos desde biblioteca de medios

Gestión de Puntos

• Asociar puntos a divisiones
• Posicionamiento mediante coordenadas porcentuales
• Múltiples tipos de iconos

🔐 Seguridad

• Validación y sanitización de todos los inputs
• Verificación de nonces en todas las peticiones AJAX
• Comprobación de capacidades de usuario
• Sanitización de SVG para prevenir XSS

🌍 Internacionalización

El plugin está preparado para traducción con:

• Text Domain: simple-interactive-map
• Domain Path: /languages

Todas las cadenas de texto están envueltas en funciones de traducción:

• __() para traducciones
• _e() para echo de traducciones
• esc_html__() y esc_attr__() para traducciones con escape

🎨 Personalización

CSS Personalizado

Puedes agregar CSS personalizado en tu tema:

/* Cambiar el color del mini mapa */
.sim-minimap {
  background: #your-color;
}

/* Personalizar botones */
.sim-btn-primary {
  background: #your-color;
}

JavaScript Personalizado

Accede a las funciones del mapa:

// Seleccionar una división programáticamente
window.simMap.selectDivision("division-id", "svg-path-id");

// Cerrar el panel de información
window.simMap.closeInfoPanel();

// Cerrar modales
window.simMap.closeModal();

🐛 Solución de Problemas

El mapa no se muestra

1. Verifica que el SVG esté correctamente configurado
2. Asegúrate de que cada división tenga un ID único
3. Revisa la consola del navegador para errores JavaScript

Los videos no se reproducen

1. Verifica que las URLs sean correctas y accesibles
2. Asegúrate de que los videos estén en formato MP4
3. Comprueba que los videos estén optimizados para web

Las divisiones no son clickeables

1. Verifica que el SVG Path ID coincida exactamente con el ID en el SVG
2. Asegúrate de que el SVG tenga elementos <path> con IDs únicos
3. Comprueba que no haya errores de JavaScript en la consola

📝 Changelog

El detalle siguiente llega hasta v1.1.0. Hitos posteriores (según el historial de Git):

• 1.4.6 (2026-02-10) — Versión actual; ajustes de estilos y ancho máximo del diálogo (1.4.5).
• 1.4.0 (2026-02-10) — Sistema de auto-reparación de tablas de base de datos; opciones de fondo para puntos relevantes.
• 2026-02-09 — Imagen y color de fondo para el mapa interactivo.
• 1.1.2 (2026-01-27) — La URL del SVG usa HTTPS cuando la página está en HTTPS.

Versión 1.1.0

• Agregada capacidad de usar archivos SVG personalizados para puntos relevantes desde la biblioteca de medios
• Reducción del tamaño de puntos relevantes en 40% para mejor visualización
• Mejoras en la interfaz de administración para puntos relevantes
• Soporte nativo para subir archivos SVG a WordPress
• Actualización automática de base de datos para instalaciones existentes

Versión 1.0.0

• Lanzamiento inicial
• Mapa SVG interactivo
• Panel de administración completo
• Gestión de divisiones y puntos relevantes
• Integración con videos de fondo
• Diseño responsive

👨‍💻 Desarrollo

Estructura de Clases

Backend separado del Frontend:

• Simple_Interactive_Map_Admin: Gestiona toda la funcionalidad del panel de administración
• Simple_Interactive_Map_Public: Gestiona la visualización y funcionalidad pública

Sistema de Hooks:

• Simple_Interactive_Map_Loader: Registra todos los hooks de WordPress

AJAX Endpoints

Admin

• sim_save_division: Guardar división
• sim_delete_division: Eliminar división
• sim_save_point: Guardar punto
• sim_delete_point: Eliminar punto

Public

• sim_get_division_data: Obtener datos de división
• sim_get_point_data: Obtener datos de punto

📄 Licencia

GPL-2.0+

🤝 Soporte

Para reportar bugs o solicitar nuevas funcionalidades, abre un issue en https://github.com/Pryw00/simple-interactive-map/issues

🛠️ Empaquetado

No hay proceso de compilación. Para generar el ZIP instalable:

# desde la carpeta padre
zip -r simple-interactive-map.zip simple-interactive-map -x "simple-interactive-map/.git/*"

📦 Repositorio

https://github.com/Pryw00/simple-interactive-map

🎉 Créditos

Desarrollado por Wilson Yépez (PRYW) — @Pryw00