geoproject-app/public/site/plugins/map-editor/README.md

# Kirby Map Editor Plugin

Plugin d'édition de cartes interactives pour Kirby CMS avec marqueurs enrichis et géocodage.

## Structure du code

```
map-editor/
├── index.php                   # Enregistrement du plugin Kirby
├── lib/fields/
│   └── map-editor.php         # Définition du champ custom
├── src/
│   ├── index.js               # Entry point
│   ├── composables/           # Logique métier réutilisable
│   │   ├── useMarkers.js     # Gestion des marqueurs (CRUD)
│   │   └── useMapData.js     # Gestion des données YAML
│   ├── components/
│   │   ├── field/
│   │   │   └── MapEditor.vue # Composant principal (orchestrateur)
│   │   └── map/
│   │       ├── MapPreview.vue    # Carte MapLibre interactive
│   │       ├── MarkerList.vue    # Liste des marqueurs (sidebar)
│   │       ├── MarkerEditor.vue  # Modal d'édition de marqueur
│   │       └── GeocodeSearch.vue # Recherche d'adresse
│   └── utils/
│       ├── constants.js       # Constantes globales
│       ├── api/
│       │   └── nominatim.js  # Client API Nominatim
│       └── helpers/
│           └── debounce.js   # Fonction de debounce
├── package.json
└── README.md
```

## Composables

### useMarkers

Gère l'état et les opérations CRUD sur les marqueurs.

**Utilisation** :
\`\`\`javascript
import { useMarkers } from '../../composables/useMarkers.js';

const {
  markers,
  selectedMarkerId,
  canAddMarker,
  addMarker,
  deleteMarker,
} = useMarkers({ maxMarkers: 50 });
\`\`\`

### useMapData

Gère le chargement/sauvegarde des données de carte en YAML.

**Utilisation** :
\`\`\`javascript
import { useMapData } from '../../composables/useMapData.js';

const { center, zoom, loadMapData, debouncedSave } = useMapData({
  defaultCenter: { lat: 43.836699, lon: 4.360054 },
  defaultZoom: 13,
  onSave: (yamlString) => emit('input', yamlString),
});
\`\`\`

## Build

\`\`\`bash
npm install
npm run build
\`\`\`

Build avec Kirbyup → \`/index.js\` et \`/index.css\`

## Avantages du refactoring

- **Réutilisabilité** : Composables utilisables dans d'autres composants
- **Testabilité** : Fonctions pures testables indépendamment
- **Maintenabilité** : Code organisé par responsabilité
- **Lisibilité** : MapEditor réduit de 370 → 230 lignes
- **Performance** : Auto-save optimisé

## Technologies

- Vue 3 Composition API
- MapLibre GL JS 3.6+
- Nominatim API (OpenStreetMap)
- js-yaml pour parsing YAML