Select to view content in your preferred language

Export to PDF print dijit fails when printing with CSV layer on map

2425
1
05-19-2014 07:54 AM
JordanPorter
Deactivated User
Hi,

i am attempting to print a map with a csv layer with custom unique value renderer (picture marker symbols)


when i have this layer in the map, the print dijit fails, in Chrome logging
SyntaxError: Unexpected token <    at Object.b.fromJson (http://js.arcgis.com/3.9/init.js:226:310)


When i remove the CSV layer, it prints out fine.


here is the code in its entirety.

     
     

     CSVpath = "http://astro.ngacres.com/htmlemails/master/master/lburbank.csv";
 
 
 
     
     request(CSVpath).then(function(data){
                     lines = data.split(/\r?\n/);
                 }); 
     
     
     
                    var popup = new Popup({
                        popupWindow: true
                    }, domConstruct.create("div"));
                    
     
     var csvTemplate = new PopupTemplate({
                     title: "{name}",  //wrap field names in {}
                        fieldInfos: [
                                     
          {
                                         fieldName: "address",   //acutal field name in the file
                                         visible: true,
                                         label: "Address: "      //what shows in the popup box
                                                                            
                                        },
          {
                                         fieldName: "city",
                                         visible: true,
                                         label: "City: "
                                                                            
                                        },
          {
                                         fieldName: "state",
                                         visible: true,
                                         label: "State: "
                                                                            
                                        },
          {
                                         fieldName: "zipcode",
                                         visible: true,
                                         label: "Zip Code: "
                                                                            
                                        },
          {
                                         fieldName: "county",
                                         visible: true,
                                         label: "County: "
                                                                            
                                        },
          {
                                         fieldName: "psf",
                                         visible: true,
                                         label: "Price per Square Foot: "
                                                                            
                                        },
          {
                                         fieldName: "acres",
                                         visible: true,
                                         label: "Acreage: "
                                                                            
                                        },
          {
                                         fieldName: "parcel_id",
                                         visible: true,
                                         label: "Parcel Number: "
                                                                            
                                        }
                                    ]
                                                                        
                    });
     
     
     
     map = new Map("mapDiv", {
                        basemap: "hybrid",
                        center: [-111.98868856152143, 40.76044344742585], // long, lat
                        zoom: 14, //the smaller the number, the farther it zooms out
                        infoWindow: popup, //reference to the popup object we made
                        logo: false, //hide esri logo
                        minZoom: 3 ,//farthest we can zoom out
                        wrapAround180: true, //continuous scrolling
                        slider: true
                    });
                    map.attribution.destroy()  
     
     
     
                    
                    csv = new CSVLayer(CSVpath, {
                        copyright: "Acres Companies",
      id: "CSV"
                    });
     
     csv.setInfoTemplate(csvTemplate);
     
     
     
     var i = 1;
     var orderNums = []
     while(i<100){
      orderNums.push(i)
      i++
     }
     
     
     
     map.on("load", addRenderRules); //When the map is done loading, add some rendering rules to the CSV Layer with a function called 'addRenderRules'

           function addRenderRules() {
             var defaultSymbol = null; //if there is a feature that doesnt match the 'Order' rules, it will not draw
             
   
             //create renderer and rules
             var renderer = new UniqueValueRenderer(defaultSymbol, "order"); //Create the renderer based on the 'Order' field
     //add symbol for each value 1-99
     for (var n=0;n<orderNums.length;n++){
      renderer.addValue(orderNums, new PictureMarkerSymbol('http://astro.ngacres.com/htmlemails/interactive/images/'+orderNums+'.png', 25, 25)) //variable URL to icon images, width, height
     };
     
             csv.setRenderer(renderer); //apply the render rules to the CSV layer
             
           }
     
     
                    
                    
                    //ESRI roads layer
                    var Transportation = new Tiled("http://services.arcgisonline.com/arcgis/rest/services/Reference/World_Transportation/MapServer",{
                                                                 id: "Roads"
                                                                });
     var items = []; //placeholder to count the items added to the legend
     
     //once the layers has been added, build the legend by referencing the CSV file
     map.on("layers-add-result",function(){
      
      var headers = lines[0].split(',');
      var otherData = lines.splice(1);
     
      array.map(headers, function(header){   ///get the header fields from the CSV File
       return {
        field: header,
        name: header
       };
      });
     
     
     
      array.map(otherData, function(line){  //Match the subsequent fields to their headers
       var cells = line.split(','), obj = {};
       array.forEach(cells, function(cell, idx){
        obj[headers[idx]] = cell;
       });
       
       if (obj.name !== undefined) { //All valid data added one by one to the legend
        items.push(obj.order)
        document.getElementById("legendDiv").innerHTML += "<img src=http://astro.ngacres.com/htmlemails/interactive/images/" + obj.order + ".png style='width:20px;height:20px;vertical-align:middle'> " + "<a href='javascript: void(0)' id='button"+obj.order+"'>" + obj.name + "</a><br/>"
        
       }
       return obj
      });
      
      array.forEach(items, function(id){  //Click on legend to pan to feature
       document.getElementById('button' + id).onclick = function(me){
        var buttonID = me.srcElement.id.replace(/[A-Za-z]/g,"");
        array.forEach(map.getLayer("CSV").graphics, function(item){
         if (item.attributes.order === buttonID){
          map.centerAt([item.attributes.longitude,item.attributes.latitude]);
         }
        })
        
       };
      })
      
     })               
                   
       
        
                    printer = new Print({
                        map: map,
                        templates: [{
                            label: "Letter Portrait",
                            format: "PDF",
                            layout: "Letter ANSI A Portrait",
                            preserveScale: false,
                            exportOptions: {
                                dpi: 300
                            },
                            showAttribution: false
                        }, {
                            label: "Letter Landscape",
                            format: "PDF",
                            layout: "Letter ANSI A Landscape",
                            preserveScale: false,
                            exportOptions: {
                                dpi: 300
                            },
                            showAttribution: false
                        }],
                        url: "http://maphics:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
                    }, dom.byId("printButton"));
                    printer.startup();
                    
                    map.addLayers([csv,Transportation]);  //add the layers to the map
     
                    
                });
                
                
            });


How can i get the print dijit working with my CSV layer in the map?
Any help would be much appreciated!!!
0 Kudos
1 Reply
JordanPorter
Deactivated User
Also, when i just have the CSV layer symbolized with, lets say, a circle graphic, (not a PNG image) it prints to PDF fine.  So i am assuming there is some issue happening with it being symbolized with an Image.  Any ideas?
0 Kudos