Pop-up from the uploaded csv data

RamakrishnanDurairajan · ‎01-09-2013

Hello all,

I have a map with some points. I'm able to display the fields in the feature layer using pop-ups. I have done this part.

Next, I upload a csv file and plot lines using the csv data. I have done this part too. Now, I wanna display a pop-up when one of the points (at the ends of the line) is clicked. How do I do it? Find below my code -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />
      <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
      <title>PopCap</title>
      <link rel="stylesheet" type="text/css" href="./claro.css" />
      <link rel="stylesheet" type="text/css" href="./esri.css" />
      <script src="./jquery.min.js"></script>
      <script src="./jquery.csv.js"></script>
      <style>
         html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
         .esriScalebar{
         padding: 20px 20px;
         }
         #map{
         padding:0;
         }
         .esriPopup.myTheme .titlePane,
         .dj_ie7 .esriPopup.myTheme .titlePane .title {
         background-color: #899752;
         color: #333333;
         font-weight: bold;
         }
         .esriPopup.myTheme .titlePane {
         border-bottom: 1px solid #121310;
         }
         .esriPopup.myTheme a {
         color: #d6e68a;
         }
         .esriPopup.myTheme .titleButton,
         .esriPopup.myTheme .pointer,
         .esriPopup.myTheme .outerPointer,
         .esriPopup.myTheme .esriViewPopup .gallery .mediaHandle,
         .esriPopup.myTheme .esriViewPopup .gallery .mediaIcon {
         background-image: url(./images/popup.png);
         }
         .esriPopup.myTheme .contentPane,
         .esriPopup.myTheme .actionsPane {
         border-color: 1px solid #121310;
         background-color: #424242;
         color:#ffffff;
         }
      </style>
      <script type="text/javascript">var dojoConfig = {parseOnLoad: true};</script>
      <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
      <script type="text/javascript">
         $(document).ready(function() {
            if(isAPIAvailable()) {
              $('#files').bind('change', handleFileSelect);
            }
          });
         
          function isAPIAvailable() {
            if (window.File && window.FileReader && window.FileList && window.Blob) {
              return true;
            } else {
              document.writeln('The HTML5 APIs used in this form are only available in the following browsers:<br />');
              // 6.0 File API & 13.0 <output>
              document.writeln(' - Google Chrome: 13.0 or later<br />');
              // 3.6 File API & 6.0 <output>
              document.writeln(' - Mozilla Firefox: 6.0 or later<br />');
              // 10.0 File API & 10.0 <output>
              document.writeln(' - Internet Explorer: Not supported (partial support expected in 10.0)<br />');
              // ? File API & 5.1 <output>
              document.writeln(' - Safari: Not supported<br />');
              // ? File API & 9.2 <output>
              document.writeln(' - Opera: Not supported');
              return false;
            }
          }
         
          function handleFileSelect(evt) {
            var files = evt.target.files;
            var file = files[0];
            printTable(file);
          }
         
          function printTable(file) {
            var reader = new FileReader();
            reader.readAsText(file);
            reader.onload = function(event){
              var csv = event.target.result;
              var data = $.csv.toArrays(csv);
              var html = '';
              for(var row in data) {
    addLineToMap(data[row][2],data[row][1],data[row][5],data[row][4],data[row][8],data[row][7])
              }
            };
            reader.onerror = function(){ alert('Unable to read ' + file.fileName); };
          }
          
              dojo.require("dijit.layout.BorderContainer");
              dojo.require("dijit.layout.ContentPane");
              dojo.require("esri.map");
              dojo.require("esri.dijit.Popup");
              dojo.require("esri.layers.FeatureLayer");
              
              var map;
              
           function addLineToMap(lon1, lat1, lon2, lat2, lon3, lat3) {
            var point1 = new esri.geometry.Point(lon1, lat1, map.spatialReference);
              var point2 = new esri.geometry.Point(lon2, lat2, map.spatialReference);
     var point3 = new esri.geometry.Point(lon3, lat3, map.spatialReference);
              var line = new esri.geometry.Polyline(map.spatialReference);
              line.addPath([point1, point2, point3]);
              var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0,0.5]),3);
              var pointSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([255,0,0, 0.5]));
              map.graphics.add(new esri.Graphic(point1, pointSymbol));
              map.graphics.add(new esri.Graphic(point2, pointSymbol));
     map.graphics.add(new esri.Graphic(point3, pointSymbol));
              map.graphics.add(new esri.Graphic(line, lineSymbol));
              }
           
              function pageReady() {
                var popup = new esri.dijit.Popup({
                  fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))
                }, dojo.create("div"));
         
                
                var initExtent = new esri.geometry.Extent({"xmin":-13626637,"ymin":4550020,"xmax":-13624728,"ymax":4551042,"spatialReference":{"wkid":102100}});
                map = new esri.Map("map",{
                  infoWindow:popup,
                  outFields: ["*"]
                });
         
                
                dojo.addClass(map.infoWindow.domNode, "myTheme");
         
         
                dojo.connect(map,"onClick",function(evt){
                  var query = new esri.tasks.Query();
                  query.geometry = pointToExtent(map,evt.mapPoint,10);
                  
                  var deferred = featureLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW);
         
                   map.infoWindow.setFeatures([deferred]);
                   map.infoWindow.show(evt.mapPoint);
            
                });
                
                var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");
                map.addLayer(basemap);
                
                var incidentLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://myservice/arcgis/rest/services/ABCD/MapServer");
                map.addLayer(incidentLayer);
                
                       
                var popupTemplate = new esri.dijit.PopupTemplate({
          title: "{nodeType}:{nodeName}",
          fieldInfos: [
          {fieldName: "nodeName", visible:true, label:"Node Name"},
    {fieldName: "lastUpdate", visible: true, label:"Last Updated"},
    {fieldName: "metadata", visible: true, label:"Metadata"},
          ],
          showAttachments:true
        });

    
                var featureLayer = new esri.layers.FeatureLayer("http://myservice/arcgis/rest/services/ABCD/MapServer/0",{
                  mode: esri.layers.FeatureLayer.MODE_SELECTION,
                  outFields: ["*"],
                  infoTemplate:popupTemplate
                });
                
                map.addLayer(featureLayer);
         
            
                dojo.connect(map, 'onLoad', function(theMap) {
                 dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
                });
              }
         
             function getTextContent(graphic) {
                return "test";
              }
              
             function pointToExtent(map, point, toleranceInPixel) {
               var pixelWidth = map.extent.getWidth() / map.width;
               var toleraceInMapCoords = toleranceInPixel * pixelWidth;
               return new esri.geometry.Extent( point.x - toleraceInMapCoords,
                            point.y - toleraceInMapCoords,
                            point.x + toleraceInMapCoords,
                            point.y + toleraceInMapCoords,
                            map.spatialReference );                           
              }
              
              dojo.addOnLoad(pageReady);
            
      </script>
   </head>
   <body class="claro">
      <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="width: 100%; height: 96%; margin: 0;">
         <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="border:1px solid #000;padding:0;">
         </div>
      </div>
   <center>
   <div id="inputs" class="clearfix">
         <input type="file" id="files" name="files[]" multiple />
      </div>
   </center>
   </body>
</html>

Any help would be appreciated, thanks!

Ram