link to download json for map placed onto map interface

app/assets/javascripts/src/Metamaps.JIT.js

@@ -28,6 +28,8 @@ Metamaps.JIT = {
 
         $(".takeScreenshot").click(Metamaps.Map.exportImage);
 
+        $('.downloadMap').click(Metamaps.Map.downloadIt);
+
         self.topicDescImage = new Image();
         self.topicDescImage.src = '/assets/topic_description_signifier.png';
 

app/assets/javascripts/src/Metamaps.js

@@ -1,5 +1,36 @@
 var labelType, useGradients, nativeTextSupport, animate;
 
+window.downloadFile = function(sUrl, filename) {
+ 
+    //If in Chrome or Safari - download via virtual link click
+    if (window.downloadFile.isChrome || window.downloadFile.isSafari) {
+        //Creating new link node.
+        var link = document.createElement('a');
+        link.href = sUrl;
+ 
+        if (link.download !== undefined){
+            //Set HTML5 download attribute. This will prevent file from opening if supported.
+            link.download = filename;
+        }
+ 
+        //Dispatching click event.
+        if (document.createEvent) {
+            var e = document.createEvent('MouseEvents');
+            e.initEvent('click' ,true ,true);
+            link.dispatchEvent(e);
+            return true;
+        }
+    }
+ 
+    // Force file download (whether supported by server).
+    var query = '?download';
+ 
+    window.open(sUrl + query);
+}
+ 
+window.downloadFile.isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
+window.downloadFile.isSafari = navigator.userAgent.toLowerCase().indexOf('safari') > -1;
+
 (function () {
     var ua = navigator.userAgent,
         iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
@@ -4607,6 +4638,26 @@ Metamaps.Map = {
                 console.log('failed to save map screenshot');
             }
         });
+    },
+    downloadIt: function() {
+        var map = Metamaps.Active.Map;
+        var mapName = map.get("name").split(" ").join([separator = '-']);
+
+        var today = new Date();
+        var dd = today.getDate();
+        var mm = today.getMonth()+1; //January is 0!
+        var yyyy = today.getFullYear();
+        if(dd<10) {
+            dd='0'+dd
+        } 
+        if(mm<10) {
+            mm='0'+mm
+        }
+        today = mm+'/'+dd+'/'+yyyy;
+
+        var href = "/maps/" + map.id + "/contains.json";
+        var filename = "metamap-" + map.id + "-" + mapName + "-" + today + ".json"; // Set the file name.
+        window.downloadFile(href, filename);
     }
 };
 

app/assets/stylesheets/clean.css

@@ -915,6 +915,15 @@
     z-index: 4;
 }
 
+.downloadMap {
+    margin-bottom:5px;
+    border-radius: 2px;
+    color: #D5D5D5;
+    text-align: center;
+    padding-top: 6px;
+    height: 26px;
+}
+
 .takeScreenshot {
     margin-bottom: 5px;
     border-radius: 2px;
@@ -938,7 +947,7 @@
     background-position: -32px 0;
 }
 
-.zoomExtents:hover .tooltips, .zoomIn:hover .tooltips, .zoomOut:hover .tooltips, .takeScreenshot:hover .tooltips, .sidebarCollaborateIcon:hover .tooltipsUnder,
+.downloadMap:hover .tooltips, .zoomExtents:hover .tooltips, .zoomIn:hover .tooltips, .zoomOut:hover .tooltips, .takeScreenshot:hover .tooltips, .sidebarCollaborateIcon:hover .tooltipsUnder,
  .sidebarFilterIcon:hover .tooltipsUnder, .sidebarForkIcon:hover .tooltipsUnder, .addMap:hover .tooltipsUnder, .authenticated .sidebarAccountIcon:hover .tooltipsUnder,
  .mapInfoIcon:hover .tooltipsAbove, .openCheatsheet:hover .tooltipsAbove {
     display: block;
@@ -1033,7 +1042,7 @@
     margin-top: 40px;
 }
 
-.zoomExtents div::after, .zoomIn div::after, .zoomOut div::after, .takeScreenshot div:after {
+.downloadMap div::after, .zoomExtents div::after, .zoomIn div::after, .zoomOut div::after, .takeScreenshot div:after {
     content: '';
     position: absolute;
     top: 57%;

app/views/layouts/_lowermapelements.html.erb

@@ -1,4 +1,5 @@
 <div class="mapControls mapElement">
+  <div href="/test/" class="downloadMap mapControl"><div class="tooltips">Download Map JSON</div>DL</div>
 	<div class="takeScreenshot mapControl"><div class="tooltips">Capture Screenshot</div></div>
 	<div class="zoomExtents mapControl"><div class="tooltips">Center View</div></div>
 	<div class="zoomIn mapControl"><div class="tooltips">Zoom In</div></div>