Export Widget

Export Data

The export data tab will export visible, selected, or entire layers within your map to a CSV file. Only the data fields presented in the map are exported based on the export setting. CMaps Analytics will export CSV (Comma Separated) or TSV (Tab Separated Text).

Current Viewable Area
What is visible on the map based on where a user has panned / zoomed to.

Selected Location(s)
What is selected on the map by click or using the multi selection (lasso) options.

Entire Layer
All locations on the map even when they are not visible.

Print Map

Print map will take a graphical snapshot of the map in it’s current state.

Print map will only display base maps when opened from a web application through HTTP. This option will not work when launched on a desktop. The base maps will be hidden when executed on a desktop.

API Details

Card Markup and CSS

<div>

 <div class="com_cmapsanalytics_cardheader com_cmapsanalytics_card_innerbox">
 <div class="com_cmapsanalytics_alignleft com_cmapsanalytics_card_title">
 Export Layer Data
 </div>
 </div>
 
 <div style="margin-right: 5px;padding: 10px;">
 
 <div class="com_cmapsanalytics_actionheaderlinks">
 <a id="btnExportCsv">Export CSV</a>&nbsp;|&nbsp;
 <a id="btnExportTsv">Export TSV</a>
 </div>
 
 <label>Export data for</label>
 <div class="com_cmapsanalytics_horiznav">
 <ul>
 <li data-viewportcalmode="viewportonly"><a id="btnViewportOnly" class="active">Current Viewable Area</a></li><br/>
 <li data-viewportcalmode="selectedlocations"><a id="btnSelectedOnly">Selected Location(s)</a></li><br/>
 <li data-viewportcalmode="entirelayer"><a id="btnEntireLayer">Entire Layer</a></li>
 </ul>
 </div>
 
 </div>
 
</div>

JavaScript

(function(){

 createNamespaceUnderCentigon("ui.ExportCard");

 centigon.ui.ExportCard = function(){
 
 centigon.ui.Card.call(this);
 
 this.contentUrl = this.getCardAssetUrl() + "ExportCardMarkup.txt";
 
 this.controlIdToRandomId = {
 btnExportCsv: this._domUtil.getRandomDivId(),
 btnExportTsv: this._domUtil.getRandomDivId(),
 btnViewportOnly: this._domUtil.getRandomDivId(),
 btnSelectedOnly: this._domUtil.getRandomDivId(),
 btnEntireLayer: this._domUtil.getRandomDivId()
 };
 }
 
 centigon.ui.ExportCard.constructor = centigon.ui.Card;
 centigon.ui.ExportCard.prototype = new centigon.ui.Card();
 
 centigon.ui.ExportCard.prototype.getHtml = function(gotHtml){
 
 this.getRemoteContent({url: this.contentUrl, success: gotHtml});
 }
 
 centigon.ui.ExportCard.prototype.addEventListeners = function(){
 
 var calcMode = "viewportonly";
 
 var that = this;
 
 var btnOpts = [{id: this.controlIdToRandomId["btnViewportOnly"]},
 {id: this.controlIdToRandomId["btnSelectedOnly"]},
 {id: this.controlIdToRandomId["btnEntireLayer"]}];
 var calcModeList = new centigon.ui.ToggleListMenu(btnOpts);
 calcModeList.change = function(domElem){
 
 calcMode = that._domUtil.getDomObjectDataAttribute(domElem.parentElement, "viewportcalmode");
 }
 
 this.domObjByRandField("btnExportCsv").click(function(){
 
 that.exportDsv({delim:",", calcMode: calcMode, fileExt:"csv"});
 });
 
 this.domObjByRandField("btnExportTsv").click(function(){
 
 that.exportDsv({delim:"\t", calcMode: calcMode, fileExt:"tsv"});
 });
 }
 
 centigon.ui.ExportCard.prototype.exportDsv = function(opts){
 
 this.applyRestrictCalcsToVisible(opts.calcMode);
 
 var csvContent = "";
 
 var lyr = this.layer;
 
 var lbls = this._utilFactory.getCollectionIterator(lyr.getLabels());
 var vals = this._utilFactory.getCollectionIterator(lyr.getValues());
 var locs;
 
 if(this.cMap.layerTypeIsMarkerOrHeat(this.layer.type)){
 locs = this._utilFactory.getCollectionIterator(this.getLatLngCsvArrFromLocs(lyr.getLocations()));
 }
 else{
 locs = this._utilFactory.getCollectionIterator(lyr.getLocations());
 }
 
 csvContent += "Locations" + opts.delim + "Labels" + opts.delim + "Values";
 csvContent += "\r\n";
 
 var loc;
 
 while(locs.hasNext()){
 
 loc = locs.next();
 
 csvContent += '"' + loc + '"';
 csvContent += opts.delim;
 
 csvContent += lbls.hasNext() ? '"' + lbls.next() + '"': "";
 csvContent += opts.delim;
 
 csvContent += vals.hasNext() ? vals.next() : "";
 
 csvContent += locs.hasNext() ? "\r\n" : "";
 }
 
 var fileName = lyr.displayName.trim() + "_export." + opts.fileExt;
 
 if(this.isIE() === true){
 var blobObject = new Blob([csvContent]); 
 window.navigator.msSaveBlob(blobObject, fileName); // The user only has the option of clicking the Save button.
 }
 else{
 var ahref = document.createElement('a');
 ahref.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(csvContent));
 ahref.setAttribute('download', fileName);
 ahref.click();
 }
 }
 
 centigon.ui.ExportCard.prototype.getLatLngCsvArrFromLocs = function(locs){
 
 var latlngs = [];
 
 locs = this._utilFactory.getCollectionIterator(locs);
 
 while(locs.hasNext()){
 latlngs.push(locs.next().toCsvLatLon());
 }
 
 return latlngs;
 }
 
 centigon.ui.ExportCard.prototype.applyRestrictCalcsToVisible = function(calcCriteria){
 
 this.layer.restrictCalcsToVisible = true;
 
 if(calcCriteria === "selectedlocations"){
 this.layer.restrictCalcsToSelected = true;
 }
 else{
 this.layer.restrictCalcsToSelected = false;
 }
 
 if(calcCriteria === "viewportonly" || calcCriteria === "selectedlocations"){
 this.layer.restrictCalcsToVisible = true;
 this.layer.restrictCalcsToViewport = true;
 }
 else if(calcCriteria === "entirelayer"){
 this.layer.restrictCalcsToVisible = false;
 this.layer.restrictCalcsToViewport = false;
 }
 }
 
 centigon.ui.ExportCard.prototype.isIE = function() {
 
 var ua = window.navigator.userAgent;
 var msie = ua.indexOf("MSIE ");
 
 if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
 return true;
 }
 
 return false;
 }

})()