fix: use title-based slugs for new markers

Generate marker slugs from title (e.g., "marqueur-2") instead of
timestamp-based slugs (e.g., "marker-1770362950"). Also fix panelUrl
generation to use Kirby's panel URL method.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

public/site/plugins/map-editor/api/routes.php

@@ -166,9 +166,9 @@ return [
                     ->filterBy('intendedTemplate', 'marker');
                 $nextNum = $existingMarkers->count() + 1;
 
-                // Generate unique slug and title
-                $slug = 'marker-' . time();
+                // Generate title and slug based on title
                 $title = 'Marqueur ' . $nextNum;
+                $slug = Str::slug($title);
 
                 // Create the new marker page
                 $newMarker = $mapPage->createChild([
@@ -307,7 +307,7 @@ return [
                                 'lon' => $lon
                             ],
                             'num' => $marker->num(),
-                            'panelUrl' => '/panel/pages/' . $marker->id(),
+                            'panelUrl' => (string) $marker->panel()->url(),
                             'iconUrl' => $iconUrl,
                             'iconSize' => $iconSize
                         ]

public/site/plugins/map-editor/src/components/field/MapEditor.vue

@@ -36,7 +36,14 @@
 </template>
 
 <script>
-import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import {
+  ref,
+  computed,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+} from 'vue';
 import MapPreview from '../map/MapPreview.vue';
 import MarkerList from '../map/MarkerList.vue';
 import { useMarkersApi } from '../../composables/useMarkersApi.js';
@@ -120,9 +127,10 @@ export default {
     });
 
     // Initialize API composable (only for multi mode)
-    const markersApi = props.mode === 'multi'
-      ? useMarkersApi(pageId.value)
-      : { markers: ref([]), loading: ref(false), error: ref(null) };
+    const markersApi =
+      props.mode === 'multi'
+        ? useMarkersApi(pageId.value)
+        : { markers: ref([]), loading: ref(false), error: ref(null) };
 
     const { center, zoom, loadMapData, debouncedSave } = useMapData({
       defaultCenter: {
@@ -141,14 +149,23 @@ export default {
         const lon = singleLon.value;
 
         // Only create marker if we have valid coordinates
-        if (!isNaN(lat) && !isNaN(lon) && lat !== null && lon !== null && lat !== 0 && lon !== 0) {
-          return [{
-            id: 'single-marker',
-            position: { lat, lon },
-            title: 'Current position',
-            iconUrl: props.markerIconUrl,
-            iconSize: props.markerIconSize,
-          }];
+        if (
+          !isNaN(lat) &&
+          !isNaN(lon) &&
+          lat !== null &&
+          lon !== null &&
+          lat !== 0 &&
+          lon !== 0
+        ) {
+          return [
+            {
+              id: 'single-marker',
+              position: { lat, lon },
+              title: 'Current position',
+              iconUrl: props.markerIconUrl,
+              iconSize: props.markerIconSize,
+            },
+          ];
         }
         return [];
       }
@@ -175,7 +192,7 @@ export default {
 
       return {
         lat: latInput ? parseFloat(latInput.value) : null,
-        lon: lonInput ? parseFloat(lonInput.value) : null
+        lon: lonInput ? parseFloat(lonInput.value) : null,
       };
     }
 
@@ -194,7 +211,12 @@ export default {
         singleLat.value = coords.lat;
         singleLon.value = coords.lon;
 
-        if (!isNaN(coords.lat) && !isNaN(coords.lon) && coords.lat !== 0 && coords.lon !== 0) {
+        if (
+          !isNaN(coords.lat) &&
+          !isNaN(coords.lon) &&
+          coords.lat !== 0 &&
+          coords.lon !== 0
+        ) {
           center.value = { lat: coords.lat, lon: coords.lon };
         }
 
@@ -203,7 +225,11 @@ export default {
         if (form) {
           // Listen to input events
           form.addEventListener('input', (e) => {
-            if (e.target.name && (e.target.name.includes('latitude') || e.target.name.includes('longitude'))) {
+            if (
+              e.target.name &&
+              (e.target.name.includes('latitude') ||
+                e.target.name.includes('longitude'))
+            ) {
               const newCoords = getCoordinatesFromForm();
               singleLat.value = newCoords.lat;
               singleLon.value = newCoords.lon;
@@ -217,20 +243,32 @@ export default {
           if (latInput && lonInput) {
             const observer = new MutationObserver(() => {
               const newCoords = getCoordinatesFromForm();
-              if (newCoords.lat !== singleLat.value || newCoords.lon !== singleLon.value) {
+              if (
+                newCoords.lat !== singleLat.value ||
+                newCoords.lon !== singleLon.value
+              ) {
                 singleLat.value = newCoords.lat;
                 singleLon.value = newCoords.lon;
               }
             });
 
             // Observe attribute changes (value attribute)
-            observer.observe(latInput, { attributes: true, attributeFilter: ['value'] });
-            observer.observe(lonInput, { attributes: true, attributeFilter: ['value'] });
+            observer.observe(latInput, {
+              attributes: true,
+              attributeFilter: ['value'],
+            });
+            observer.observe(lonInput, {
+              attributes: true,
+              attributeFilter: ['value'],
+            });
 
             // Also poll periodically as a fallback
             const pollInterval = setInterval(() => {
               const newCoords = getCoordinatesFromForm();
-              if (newCoords.lat !== singleLat.value || newCoords.lon !== singleLon.value) {
+              if (
+                newCoords.lat !== singleLat.value ||
+                newCoords.lon !== singleLon.value
+              ) {
                 singleLat.value = newCoords.lat;
                 singleLon.value = newCoords.lon;
               }
@@ -271,7 +309,14 @@ export default {
       ([lat, lon]) => {
         if (props.mode === 'single') {
           // Center map on new position if valid
-          if (!isNaN(lat) && !isNaN(lon) && lat !== null && lon !== null && lat !== 0 && lon !== 0) {
+          if (
+            !isNaN(lat) &&
+            !isNaN(lon) &&
+            lat !== null &&
+            lon !== null &&
+            lat !== 0 &&
+            lon !== 0
+          ) {
             // Force immediate reactivity
             nextTick(() => {
               if (mapPreview.value && mapPreview.value.centerOnPosition) {
@@ -282,11 +327,14 @@ export default {
             // Coordinates are invalid/cleared - reset to default center
             center.value = {
               lat: props.defaultCenter[0],
-              lon: props.defaultCenter[1]
+              lon: props.defaultCenter[1],
             };
             nextTick(() => {
               if (mapPreview.value && mapPreview.value.centerOnPosition) {
-                mapPreview.value.centerOnPosition(center.value.lat, center.value.lon);
+                mapPreview.value.centerOnPosition(
+                  center.value.lat,
+                  center.value.lon
+                );
               }
             });
           }
@@ -317,7 +365,7 @@ export default {
       // Normalize position format (ensure lon, not lng)
       const position = {
         lat: currentCenter.lat,
-        lon: currentCenter.lon || currentCenter.lng
+        lon: currentCenter.lon || currentCenter.lng,
       };
 
       try {
@@ -351,7 +399,10 @@ export default {
       // Center map on marker
       const marker = markers.value.find((m) => m.id === markerId);
       if (marker && mapPreview.value && mapPreview.value.centerOnPosition) {
-        mapPreview.value.centerOnPosition(marker.position.lat, marker.position.lon);
+        mapPreview.value.centerOnPosition(
+          marker.position.lat,
+          marker.position.lon
+        );
       }
     }
 
@@ -398,7 +449,7 @@ export default {
     function editMarker(markerId) {
       if (props.mode === 'single') return;
 
-      const marker = markers.value.find(m => m.id === markerId);
+      const marker = markers.value.find((m) => m.id === markerId);
       if (marker && marker.panelUrl) {
         window.top.location.href = marker.panelUrl;
       }