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

Sube la carpeta fp-geo-content a /wp-content/plugins/
Activa el plugin desde el panel de WordPress
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+