feat: maps gl download (#432)

* fix: map download * Remove unused dependency
dhis2 · Jan 30, 2020 · 57cb9fb · 57cb9fb
1 parent c155f2a
commit 57cb9fb
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 889 deletions.
diff --git a/package.json b/package.json
@@ -70,6 +70,7 @@
         "d3-selection": "^1.4.0",
         "d3-time": "^1.0.11",
         "d3-time-format": "^2.1.3",
+        "dom-to-image": "^2.6.0",
         "file-saver": "^1.3.3",
         "lodash": "^4.17.5",
         "loglevel": "^1.6.1",

diff --git a/src/components/download/DownloadDialog.js b/src/components/download/DownloadDialog.js
@@ -139,14 +139,36 @@ export class DownloadDialog extends Component {
             .toString(36)
             .substring(7)}.png`;
 
+        // Skip map controls in download except attribution and scale
+        // Mapbox map controls contains inline SVG for CSS background-image, which
+        // is not accepted by dom-to-image
+        const skipControls = el =>
+            !el.classList ||
+            el.classList.contains('mapboxgl-ctrl-scale') ||
+            el.classList.contains('mapboxgl-ctrl-attrib') ||
+            !el.classList.contains('mapboxgl-ctrl');
+
         const options = {
             width: mapEl.offsetWidth,
             height: mapEl.offsetHeight,
+            filter: skipControls,
         };
 
+        // Adding 1 to the computed width of the title element avoids text
+        // wrapping outside the box in the generated image
+        const titleEl = mapEl.getElementsByClassName('dhis2-maps-title')[0];
+        const width = window
+            .getComputedStyle(titleEl, null)
+            .getPropertyValue('width');
+
+        titleEl.style.width = parseInt(width, 10) + 1 + 'px';
+
         convertToPng(mapEl, options)
             .then(dataUri => {
                 downloadFile(dataURItoBlob(dataUri), filename);
+
+                titleEl.style.width = 'auto';
+
                 this.onClose();
             })
             .catch(this.onError);

diff --git a/src/components/download/DownloadLegend.js b/src/components/download/DownloadLegend.js
@@ -42,11 +42,11 @@ const styles = theme => ({
         right: theme.spacing.unit,
     },
     bottomleft: {
-        bottom: 30,
+        bottom: 40,
         left: theme.spacing.unit,
     },
     bottomright: {
-        bottom: 20,
+        bottom: 30,
         right: theme.spacing.unit,
     },
     name: {

diff --git a/src/components/map/MapContainer.js b/src/components/map/MapContainer.js
@@ -77,7 +77,7 @@ const MapContainer = ({
                     coordinatePopup={coordinatePopup}
                     closeCoordinatePopup={closeCoordinatePopup}
                 />
-                {isDownload && legendPosition && (
+                {isDownload && legendPosition && layers.length && (
                     <DownloadLegend
                         position={legendPosition}
                         layers={layers}

diff --git a/src/components/map/MapName.js b/src/components/map/MapName.js
@@ -46,7 +46,7 @@ const styles = theme => ({
 const MapName = ({ showName, name, interpretationDate, uiLocale, classes }) =>
     showName && name ? (
         <div className={classes.root}>
-            <div className={classes.name}>{name}</div>
+            <div className={`${classes.name} dhis2-maps-title`}>{name}</div>
             {interpretationDate && (
                 <div className={classes.interpretation}>
                     <div className={classes.interpretationIcon}>