From 620d3aa80af4d561712546653e69371478365442 Mon Sep 17 00:00:00 2001 From: Lyret Date: Tue, 16 Jul 2024 15:11:05 +0200 Subject: [PATCH] Adds download / export button --- package-lock.json | 34 ++++++++++++++++++++++++++ package.json | 1 + src/map/map.js | 62 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 97 insertions(+) diff --git a/package-lock.json b/package-lock.json index 161dcef..8e4f01a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "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", @@ -442,6 +443,19 @@ "leaflet": "^1.2.0" } }, + "node_modules/@maphubs/tokml": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/@maphubs/tokml/-/tokml-0.6.1.tgz", + "integrity": "sha512-C1qIeLpSDKPIQmYxiPmSZbw1eQDIaWTzeIMf2ym3gzY1q0b7UwDQDuUpccidrdLqOcERx2dlT4URhKl9H2scfA==", + "license": "BSD-2-Clause", + "dependencies": { + "minimist": "^1.2.5", + "rw": "^1.3.3" + }, + "bin": { + "tokml": "tokml" + } + }, "node_modules/@turf/along": { "version": "6.5.0", "resolved": "https://registry.npmjs.org/@turf/along/-/along-6.5.0.tgz", @@ -3333,6 +3347,12 @@ "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-2.0.4.tgz", "integrity": "sha512-l4NwboJM74Ilm4VKfbAtFeGq7aEjWL+5kVFcmgFA2MrdnQWx9iE/tUGvxY5HyMI7o/WpSIUFLbC5fbeaHgSCYg==" }, + "node_modules/rw": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz", + "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==", + "license": "BSD-3-Clause" + }, "node_modules/safe-buffer": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", @@ -3772,6 +3792,15 @@ "polygon-clipping": "0.15.3" } }, + "@maphubs/tokml": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/@maphubs/tokml/-/tokml-0.6.1.tgz", + "integrity": "sha512-C1qIeLpSDKPIQmYxiPmSZbw1eQDIaWTzeIMf2ym3gzY1q0b7UwDQDuUpccidrdLqOcERx2dlT4URhKl9H2scfA==", + "requires": { + "minimist": "^1.2.5", + "rw": "^1.3.3" + } + }, "@turf/along": { "version": "6.5.0", "resolved": "https://registry.npmjs.org/@turf/along/-/along-6.5.0.tgz", @@ -6052,6 +6081,11 @@ "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-2.0.4.tgz", "integrity": "sha512-l4NwboJM74Ilm4VKfbAtFeGq7aEjWL+5kVFcmgFA2MrdnQWx9iE/tUGvxY5HyMI7o/WpSIUFLbC5fbeaHgSCYg==" }, + "rw": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz", + "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==" + }, "safe-buffer": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", diff --git a/package.json b/package.json index 1be3482..5934186 100644 --- 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 index af3e681..e5d0c32 100644 --- 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: '📏', arrow: { color: '#0000' } }); polylineMeasure.addTo(map);