cc44a68e66
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 19s
Fixed marker display and centering in single mode (marker pages) by
changing from props-based to form-based coordinate synchronization.
Issues Fixed:
- Kirby blueprint query syntax {{ page.field }} passed literal strings
instead of values to component props
- Invalid coordinates (NaN, NaN) caused map initialization errors
- Marker not displaying in marker page position tab
- Map not centering on marker location
Solution:
- Remove latitude/longitude props from marker.yml blueprint
- Read coordinates directly from Panel form fields via DOM
- Add event listeners to sync form changes with map
- Bidirectional sync: drag marker → updates form fields
- Robust coordinate validation (check for NaN, null, 0)
Changes:
- MapEditor.vue: Add form field reading and event listeners
- MapEditor.vue: Replace props-based coords with reactive refs
- MapEditor.vue: Update marker drag handler to modify form inputs
- marker.yml: Remove non-functional query string props
- routes.php: Use data() instead of body() for all routes
Single Mode Flow:
1. Component reads latitude/longitude from form inputs on mount
2. Creates marker and centers map on valid coordinates
3. Form changes → updates marker position
4. Marker drag → updates form fields (triggers save on user action)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
|
||
|---|---|---|
| .. | ||
| api | ||
| assets/icons | ||
| src | ||
| index.css | ||
| index.js | ||
| index.php | ||
| package-lock.json | ||
| package.json | ||
| 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