Add option to download GPX

README.md

@@ -1,4 +1,4 @@
-# Google Saved Places to Organic Maps
+# Convert Google Maps saved places to Organic Maps
 
 ![logo](logo.jpg)
 
@@ -10,4 +10,4 @@ https://rudokemper.github.io/google-maps-places-to-organic-maps/
 
 ## Credits
 
-This project uses the `tokml` library from [Mapbox](https://github.com/mapbox/tokml).
+This project uses the `tokml` library from [Mapbox](https://github.com/mapbox/tokml), and the `togpx` library from [tyrasd](https://github.com/tyrasd/togpx).

index.html

@@ -6,8 +6,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Convert Google Maps saved places to Organic Maps</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
-    <script src="script/vendor/tokml.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+    <script src="script/vendor/tokml.js"></script>
+    <script src="script/vendor/togpx.js"></script>
+    <script src="script/main.js"></script>
     <link rel="icon" href="./assets/favicon.ico">
 </head>
 <style>
@@ -127,7 +129,7 @@
         color: red;
         display: none;
     }
-    #downloadLink {
+    .downloadLink {
         margin-top: 20px;
         background-color: rgb(156, 73, 156);
     }
@@ -155,18 +157,19 @@
             <img src="assets/organicmaps.png" alt="Organic Maps logo">
         </div>
         <h1>Convert Google Maps saved places to Organic Maps</h1>
-        <p>Generate a KMZ file from your Google Maps saved places to import as bookmarks in <a href="https://organicmaps.app/" target="_blank">Organic Maps</a>. This tool generates everything locally in your browser and does not upload any data.</p>
+        <p>Generate GPX and KMZ files from your Google Maps saved places to import as bookmarks in <a href="https://organicmaps.app/" target="_blank">Organic Maps</a>, or use anywhere you'd like. This tool generates everything locally in your browser and does not upload any data.</p>
         <p>You can retrieve a <code>Saved Places.json</code> file by navigating to "Your data in Maps" in your Google Account settings or by accessing <a href="https://myaccount.google.com/yourdata/maps" target="_blank">this page</a>, then pressing "Download your Maps data."</p>
         <p>Read about why Organic Maps is <a href="https://news.itsfoss.com/organic-maps/" target="_blank">the open-source offline map you need to ditch Google Maps</a>.</p>
         <form id="kmlForm" class="form-group">
             <label for="json">Select <code>Saved Places.json</code></label>
             <input type="file" id="json" name="json"><br>
-            <button type="button" class="btn" id="generateBtn" onclick="generateKMZ()" disabled>Generate KMZ</button>
+            <button type="button" class="btn" id="generateBtn" onclick="generateFiles()" disabled>Generate Files</button>
         </form>
 
         <p id="errorMessage"></p>
 
-        <a id="downloadLink" class="btn" style="display:none;">Download KMZ</a>
+        <a id="downloadGpxLink" class="downloadLink btn" style="display:none;">Download GPX</a>
+        <a id="downloadKmzLink" class="downloadLink btn" style="display:none;">Download KMZ</a>
     </div>
     <div class="github">
         <a href="https://github.com/rudokemper/google-maps-places-to-organic-maps" class="btn" target="_blank">
@@ -178,7 +181,6 @@ <h1>Convert Google Maps saved places to Organic Maps</h1>
             document.getElementById('generateBtn').disabled = !this.files.length;
         });
     </script>
-    <script src="script/kmzGenerator.js"></script>
 </body>
 
 </html>

script/main.js

@@ -0,0 +1,78 @@
+function convertTimestamp(timestamp) {
+  const date = new Date(timestamp);
+  return date.toLocaleString();
+}
+
+function processGeoJSONFeatures(geoJSON) {
+  geoJSON.features.forEach((feature) => {
+    const properties = feature.properties;
+    const { date, google_maps_url, location } = properties;
+    let { address, name, Comment: comment } = location || {};
+
+    // If name is not available, use address or coordinates
+    properties.name =
+      name ||
+      address ||
+      (feature.geometry && feature.geometry.coordinates.join(", "));
+
+    if (address) properties.address = address;
+
+    // Add additional Google Maps data to the description
+    properties.description = "";
+    if (address) properties.description = `<b>Address:</b> ${address}<br>`;
+    if (date)
+      properties.description += `<b>Date bookmarked:</b> ${convertTimestamp(
+        date
+      )}<br>`;
+    if (comment) properties.description += `<b>Comment:</b> ${comment}<br>`;
+    if (google_maps_url)
+      properties.description += `<b>Google Maps URL:</b> <a href="${google_maps_url}">${google_maps_url}</a><br>`;
+
+    delete properties.location;
+    delete properties.date;
+    delete properties.google_maps_url;
+  });
+}
+
+function generateFiles() {
+  const geoJSONFile = document.getElementById("json").files[0];
+  const reader = new FileReader();
+
+  reader.onload = async function (event) {
+    let geoJSON;
+    try {
+      geoJSON = JSON.parse(event.target.result);
+      if (!geoJSON.features) throw new Error("Invalid GeoJSON file");
+    } catch (error) {
+      document.getElementById("errorMessage").textContent =
+        "Invalid GeoJSON file. Please upload a valid file.";
+      document.getElementById("errorMessage").style.display = "block";
+      return;
+    }
+
+    processGeoJSONFeatures(geoJSON);
+
+    const gpx = togpx(geoJSON);
+    const kml = tokml(geoJSON);
+
+    const zip = new JSZip();
+    zip.file("Google Saved Places.kml", kml);
+
+    const gpxBlob = new Blob([gpx], { type: "application/gpx+xml" });
+    const kmzBlob = await zip.generateAsync({ type: "blob" });
+
+    const gpxLink = document.getElementById("downloadGpxLink");
+    gpxLink.href = URL.createObjectURL(gpxBlob);
+    gpxLink.download = `Google Saved Places.gpx`;
+    gpxLink.style.display = "block";
+    gpxLink.textContent = "Download GPX";
+
+    const kmzLink = document.getElementById("downloadKmzLink");
+    kmzLink.href = URL.createObjectURL(kmzBlob);
+    kmzLink.download = `Google Saved Places.kmz`;
+    kmzLink.style.display = "block";
+    kmzLink.textContent = "Download KMZ";
+  };
+
+  reader.readAsText(geoJSONFile);
+}