Add GPX Map shortcode and related assets for displaying GPX tracks

static/admin/config.yml

@@ -53,6 +53,16 @@ collections:
         media_library:
           config:
             multiple: true
+      - label: "GPX Files"
+        name: "gpxFiles"
+        widget: "file"
+        required: false
+        choose_url: true
+        media_library:
+          media_folder: "/static/uploads/gpx"
+          public_folder: "/images/uploads"
+          config:
+            multiple: true
       - { label: "Body", name: "body", widget: "markdown" }
   ########################
   # POSTS COLLECTION

static/admin/index.html

@@ -84,6 +84,44 @@
           </div>`;
       }
     });
+
+    // Register the GPX Map shortcode as an editor component
+    window.CMS.registerEditorComponent({
+      id: "gpx-map",
+      label: "GPX Track Map",
+      fields: [
+        { name: "lat", label: "Latitude", widget: "string" },
+        { name: "lon", label: "Longitude", widget: "string" },
+        { name: "gpx", label: "GPX File Path", widget: "string", hint: "Example: /uploads/gpx/my-track.gpx" },
+        { name: "zoom", label: "Zoom Level", widget: "number", default: 13, required: false },
+        { name: "height", label: "Height (e.g. 500px)", widget: "string", default: "500px", required: false }
+      ],
+      pattern: /{{<\s*gpx-map\s+lat="([^"]+)"\s+lon="([^"]+)"\s+gpx="([^"]+)"(?:\s+zoom="([^"]+)")?(?:\s+height="([^"]+)")?\s*>}}/,
+      fromBlock: function (match) {
+        return {
+          lat: match[1],
+          lon: match[2],
+          gpx: match[3],
+          zoom: match[4] || "13",
+          height: match[5] || "500px"
+        };
+      },
+      toBlock: function (obj) {
+        let params = `lat="${obj.lat}" lon="${obj.lon}" gpx="${obj.gpx}"`;
+        if (obj.zoom) params += ` zoom="${obj.zoom}"`;
+        if (obj.height) params += ` height="${obj.height}"`;
+        return `{{< gpx-map ${params} >}}`;
+      },
+      toPreview: function (obj) {
+        // Simple preview (not interactive)
+        return `<div style="border:1px solid #ccc;padding:1em;">
+          <strong>GPX Track Map</strong><br>
+          Lat: ${obj.lat}, Lon: ${obj.lon}<br>
+          GPX: ${obj.gpx}<br>
+          Zoom: ${obj.zoom || 13}, Height: ${obj.height || "500px"}
+        </div>`;
+      }
+    });
   </script>
 </body>