# 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

```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

```css
/* 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

```php
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

```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](https://freepress.coop)

## Licencia

GPL-2.0+