freepress-map/fp-geo-content/README.md

FP Geo Content

Plugin genérico de WordPress para mostrar contenido geolocalizado en un mapa interactivo usando Leaflet y OpenStreetMap.

Descripción

FP Geo Content permite mostrar cualquier tipo de contenido de WordPress que tenga campos de latitud y longitud en un mapa interactivo. Es completamente configurable y reutilizable en diferentes proyectos.

Características

• 🗺️ Mapa interactivo con Leaflet y OpenStreetMap (sin necesidad de API keys)
• 📍 Marcadores personalizables con iconos y colores por categoría
• 🔍 Filtros dinámicos por taxonomías
• 📱 Responsive - funciona en móviles y tablets
• 🎨 Personalizable - variables CSS para adaptar al diseño
• 🔌 Genérico - funciona con cualquier CPT que tenga coordenadas

Instalación

1. Sube la carpeta fp-geo-content a /wp-content/plugins/
2. Activa el plugin desde el panel de WordPress
3. Ve a Ajustes > FP Geo Content para configurar

Configuración

1. Tipos de Contenido

Selecciona qué tipos de contenido (posts, páginas, CPTs) quieres mostrar en el mapa.

2. Campos de Geolocalización

Indica el nombre de los campos ACF o meta que contienen la latitud y longitud:

• Campo de latitud (por defecto: latitud)
• Campo de longitud (por defecto: longitud)

3. Configuración del Mapa

• Centro por defecto: Coordenadas iniciales del mapa
• Niveles de zoom: Mínimo, máximo y por defecto
• Proveedor de tiles: OpenStreetMap, CartoDB, Stamen, etc.
• Clusters: Agrupar marcadores cercanos

4. Filtros

• Selecciona qué taxonomías pueden usarse como filtros
• Configura si los filtros se combinan con OR o AND

5. Visualización

• Sidebar: Panel lateral que se desliza sobre el mapa
• Modal: Ventana emergente centrada

Uso

Shortcode básico

[fp-geo-map]

Con atributos personalizados

[fp-geo-map post_types="actuacion,entidad" height="700px" filters="true"]

Todos los atributos

Atributo	Descripción	Ejemplo
post_types	Tipos de contenido (separados por coma)	post_types="actuacion,entidad"
taxonomies	Taxonomías para filtros	taxonomies="iniciativa,linea_trabajo"
height	Altura del mapa	height="500px"
lat / lng	Centro inicial	lat="40.4168" lng="-3.7038"
zoom	Nivel de zoom (1-18)	zoom="14"
filters	Mostrar filtros	filters="true"
detail	Modo de detalle	detail="sidebar" o detail="modal"
cluster	Agrupar marcadores	cluster="true"
class	Clases CSS adicionales	class="mi-mapa"

Personalización de estilos

Variables CSS

:root {
    --fp-geo-primary: #1E6B52;
    --fp-geo-secondary: #2A9D8F;
    --fp-geo-accent: #F4A261;
    --fp-geo-text: #333;
    --fp-geo-bg: #fff;
    --fp-geo-radius: 8px;
}

Selectores CSS principales

Selector	Descripción
.fp-geo-wrapper	Contenedor principal
.fp-geo-map	Elemento del mapa
.fp-geo-filters	Barra de filtros
.fp-geo-filter-btn	Botones de filtro
.fp-geo-detail	Panel de detalle
.fp-geo-sidebar	Panel lateral
.fp-geo-modal	Ventana modal

Ejemplo de personalización

/* Cambiar colores del tema */
.fp-geo-filters {
    background: #your-color;
}

.fp-geo-filter-btn.active {
    background: #your-accent;
}

/* Personalizar panel de detalle */
.fp-geo-detail-header {
    background: linear-gradient(135deg, #color1, #color2);
}

Hooks y Filtros

Filtrar datos del marcador

add_filter('fp_geo_marker_data', function($marker, $post) {
    // Añadir campos personalizados
    $marker['custom_field'] = get_field('mi_campo', $post->ID);
    return $marker;
}, 10, 2);

API JavaScript

// Obtener instancia del mapa
const mapData = FPGeoContent.getMap('fp-geo-map-1');

// Acceder al mapa Leaflet
const leafletMap = mapData.map;

// Refrescar marcadores
FPGeoContent.refreshMarkers('fp-geo-map-1', newMarkers);

// Aplicar filtros programáticamente
FPGeoContent.applyFilters('fp-geo-map-1');

Proveedores de Tiles disponibles

• OpenStreetMap (estándar)
• CartoDB Positron (claro)
• CartoDB Dark Matter (oscuro)
• CartoDB Voyager (colores)
• Stamen Toner (blanco y negro)
• Stamen Watercolor (acuarela)

Requisitos

• WordPress 6.0+
• PHP 8.0+
• ACF (recomendado para campos de geolocalización)

Compatibilidad

• ✅ Divi Theme Builder
• ✅ Elementor
• ✅ Gutenberg
• ✅ Classic Editor

Soporte

Plugin desarrollado por Freepress Coop

Licencia

GPL-2.0+