Adds download / export button

theborderland · Jul 16, 2024 · 620d3aa · 620d3aa
1 parent f8f92c8
commit 620d3aa
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "homepage": "https://github.com/theborderland/map#readme",
     "dependencies": {
         "@geoman-io/leaflet-geoman-free": "^2.14.2",
+        "@maphubs/tokml": "^0.6.1",
         "@turf/turf": "^6.5.0",
         "cheap-ruler": "^3.0.2",
         "dompurify": "^3.0.2",

diff --git a/src/map/map.js b/src/map/map.js
@@ -3,6 +3,7 @@ import 'leaflet.locatecontrol';
 import 'leaflet.polylinemeasure';
 import 'leaflet-copy-coordinates-control';
 import '@geoman-io/leaflet-geoman-free';
+import ToKML from '@maphubs/tokml';
 import { addPowerGridTomap } from './_addPowerGrid';
 import { addPointsOfInterestsTomap } from './_addPOI';
 import { addQuarterLabelsToMap, addNeighbourhoodLabelsToMap, addPlazaLabelsToMap } from './_addLabels';
@@ -222,6 +223,67 @@ export const createMap = async () => {
     });
     map.addControl(new guideButton());
 
+    // Add the download button
+    const downloadButton = L.Control.extend({
+        options: { position: 'topleft' },
+        onAdd: () => {
+            let btn = L.DomUtil.create('button', 'leaflet-bar help-button');
+            btn.title = 'Save everything';
+            btn.textContent = '💾';
+            L.DomEvent.disableClickPropagation(btn);
+
+            btn.onclick = async () => {
+                const quit = !confirm(
+                    'This will download all the current map information as several KML and GeoJSON files, are you sure?',
+                );
+                if (quit) {
+                    return;
+                }
+                const exportableLayers = [
+                    ['mapstuff'],
+                    ['poi'],
+                    ['powergrid'],
+                    ['soundguide'],
+                    ['plazas'],
+                    ['names'],
+                    ['neighbourhoods'],
+                    ['placement'],
+                ];
+                showNotification('Downloading map data...');
+                for (const [groupName] of exportableLayers) {
+                    try {
+                        const layer = map.groups[groupName];
+                        const geojson = layer.toGeoJSON();
+                        var kml = ToKML(geojson, {
+                            documentName: groupName,
+                            name: 'name',
+                            description: 'description',
+                        });
+                        for (const [data, filetype] of [
+                            [kml, '.kml'],
+                            [JSON.stringify(geojson), '.geojson'],
+                        ]) {
+                            const link = document.createElement('a');
+                            const uri = 'data:text/kml;charset=utf-8,' + encodeURIComponent(data);
+                            link.download = groupName + filetype;
+                            link.target = '_blank';
+                            link.href = uri;
+                            link.click();
+                            console.log('Downloading map data from layergroup ' + groupName);
+                            await new Promise((r) => setTimeout(r, 500));
+                        }
+                    } catch (err) {
+                        console.error(err);
+                        console.warn('Failed to download map data from layergroup ' + groupName);
+                    }
+                }
+            };
+
+            return btn;
+        },
+    });
+    map.addControl(new downloadButton());
+
     // Add the measure tool
     let polylineMeasure = L.control.polylineMeasure({ measureControlLabel: '&#128207;', arrow: { color: '#0000' } });
     polylineMeasure.addTo(map);