applied design changes

OpenUpSA · Feb 10, 2021 · 1118f3a · 1118f3a
1 parent 893648f
commit 1118f3a
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/src/css/wazimap-ng-v1.webflow.css b/src/css/wazimap-ng-v1.webflow.css
@@ -7038,10 +7038,7 @@ label {
   top: 16px;
   right: auto;
   bottom: auto;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
+  display: none;
   margin-right: 24px;
   margin-left: 24px;
   padding: 12px;
@@ -7050,6 +7047,9 @@ label {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
   font-size: 1.2em;
   font-weight: 700;
+  z-index:999;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .map-title.webflow {

diff --git a/src/index.html b/src/index.html
@@ -312,6 +312,7 @@ <h1 class="clear">Map boundary change</h1>
       </div>
     </div>
     <div class="map">
+	  <div class="map-title">Loading...</div>
       <div class="map-about hidden">
         <div class="map-about__icon">
           <div class="svg-icon small w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24">

diff --git a/src/js/map/map_download.js b/src/js/map/map_download.js
@@ -12,30 +12,41 @@ export class MapDownload extends Observable {
     prepareDomElements = () => {
         $('.map-download').on('click', () => {
             this.triggerEvent('mapdownload.started');
+            this.titleClass = '.map-title';
+            this.legendClass = '.map-options__legend';
             this.downloadMap();
         });
     }
 
     downloadMap = () => {
         let self = this;
 
-        const options = {
-            useCORS: true
-        };
-        const title = $(`<div id="map-download-title">${this.mapChip.title}</div>`);
         const element = document.getElementById("main-map");
+        const title = $(self.titleClass)[0].cloneNode(true);
+        $(title).text(this.mapChip.title);
 
-        const legend = document.querySelector('.map-options__legend');
+        const legend = document.querySelector(self.legendClass);
         let clonedLegend = legend.cloneNode(true);
         $(clonedLegend).find('.map-options__legend_label').remove();
         clonedLegend.id = 'map-download-legend';
 
-        $(element).append(title);
         $(element).append(clonedLegend);
+        $(element).prepend(title);
+
+        const options = {
+            useCORS: true,
+            onclone: (clonedElement) => {
+                if (this.mapChip.title !== '')
+                {
+                    $(clonedElement).find(self.titleClass).show();
+                }
+                $(clonedElement).find(self.legendClass).remove();
+            }
+        };
 
         setTimeout(() => {
             html2canvas(element, options).then(function (canvas) {
-                $(title).remove();
+                $(element).find(title).remove();
                 $(clonedLegend).remove();
                 saveAs(canvas.toDataURL(), 'map.png');
                 self.triggerEvent('mapdownload.completed');