JSON Web Service appear on Map with point graphics , when click on point show the data into info temple.

[AnujKumar5]

I have JSON Web Service which need to show on Dynamic Map with point Graphics so, when i click on point graphics which are appear on Map it should be show data of Json Service into Info template. I have define all thing in code as per my knowledge and i can see the json data at the time of debugging but when i call it i get error length property . am sharing code any one help predicated.

My code:-

 <script src="https://js.arcgis.com/3.23/"></script> 
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
      <script>    var dojoConfig = {      parseOnLoad: true    };  </script> 
   <script>     
 var map; var mis_rec = [];    
 var mis_recPoly = []; var gis_rec = []; var attributes = [],point,pointData;      

  require(["esri/map",   
      "esri/layers/ArcGISDynamicMapServiceLayer",
         "esri/layers/ImageParameters", 
           "esri/InfoTemplate",  
            "dojo/dom",  
             "dojo/on",     
             "dojo/dom-class",  
             "dojo/_base/json",        
             "esri/config",      
           "dojo/_base/lang",         
           "esri/request",  
         "esri/geometry/Point",
 "esri/symbols/SimpleMarkerSymbol",
         "esri/graphic", "esri/layers/GraphicsLayer",
            "dojo/domReady!" ],
 function (Map, ArcGISDynamicMapServiceLayer, 
               ImageParameters,InfoTemplate, dom,
                  on, domClass, dojoJson, esriConfig, 
          esriRequestlang,esriRequest,Point, SimpleMarkerSymbol,
           Grahpic, GraphicsLayer) { 
  esriConfig.defaults.io.corsEnabledServers.push("ncog.gov.in");   
      map = new Map("mapDiv", {  
        sliderOrientation : "horizontal" 
        });  
          var imageParameters = new ImageParameters();
         imageParameters.format = "jpeg"; //set the image type to PNG24, note default is PNG8.  
        //Takes a URL to a non cached map service.
         var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://10.1.31.13/arcgis/rest/services/Thematic_Atlas/DVA/MapServer", 
            { 
             "opacity" : 1, 
          "imageParameters" : imageParameters
         });   
          var polygraphlayer = new GraphicsLayer(); 
          map.addLayers([dynamicMapServiceLayer,polygraphlayer]);
       dojo.connect(map,"onLoad",_ajaxcall);
               function _ajaxcall(gis_rec) { 
        //document.getElementById("bodyloadimg").style.display = "block"; 
        $.ajax({
             type: 'GET',   
          url: "https://ncog.gov.in/JSON_webservice/get_food_data?code=7654",   
          crossDomain: true, 
            success: function (dat) {
                 mis_rec = []; 
              mis_recPoly = [];       
                      point = new Point();
                  pointData = dat.point;     
                    for (var j = 0; j < pointData.length; j++) {   
                     var attributes = [];     
                for (var i = 0; i < pointData.children.length; i++) {    
                     var chk = pointData.children[1].nodeName + "=" + pointData.children[1].innerHTML;                         
                        attributes[pointData.children.nodeName] = pointData.children.innerHTML; 
                    }
                     mis_rec.push(attributes); 
                }                // var polygonData = dat.getElementsByTagName('polygon');
                   gis_mis1(mis_rec);  
                 },
             error: function (err) { 
                //document.getElementById("bodyloadimg").style.display = "none";    
             alert(err.statusText);             }
         });      }   
  function gis_mis1(mis_rec) {
               clearGraphics();
             for (var i = 0; i < mis_rec.length; i++) {
                 if (mis_rec.log && mis_rec.lat) {
                     var pt = new Point(Number(mis_rec.log), Number(mis_rec.lat), new SpatialReference({ wkid: 4326 }));   
                 // if (mis_rec[name]>0) {  
                       var markersymbol = new PictureMarkerSymbol('images/hos.png', 18, 22); 
                       var attr = mis_rec;
             //{ "Activity": activity.activityName, "Activity Code": activity.activityCode }; 
                    var content = '<table>'; 
                    content += "<tr><td><b>District Id</td></b>" + "<td><b>: </b></td><td> ${dist_id}</td></tr>"; 
                    content += "<tr><td><b>Email Nodal</td></b>" + "<td><b>: </b></td><td> ${email_nodal}</td></tr>"; 
                    content += "<tr><td><b>State Id</td></b>" + "<td><b>: </b></td><td> ${st_id}</td></tr>";  
                   content += "<tr><td><b>Total Land</td></b>" + "<td><b>: </b></td><td> ${total_land}</td></tr>"; 
                    content += "<tr><td><b>Industrial Name</td></b>" + "<td><b>: </b></td><td> ${industrial_name}</td></tr>";
                     content += "<tr><td><b>Land Area</td></b>" + "<td><b>: </b></td><td> ${land_area}</td></tr>";  
                   content += "<tr><td><b>Nodal Name</td></b>" + "<td><b>: </b></td><td> ${name_nodal}</td></tr>"; 
                    content += "<tr><td><b>EHR</td></b>" + "<td><b>: </b></td><td> ${EHR}</td></tr>";     
                content += "<tr><td><b>Id</td></b>" + "<td><b>: </b></td><td> ${id}</td></tr>";       
              content += "<tr><td><b>Category</td></b>" + "<td><b>: </b></td><td> ${category}</td></tr>";  
                   content += '</table>';                     
         var infoTemplate = new InfoTemplate('Land Info', content);   
                  polygraphlayer.add(new Graphic(pt, markersymbol, attr, infoTemplate)); 
                //}        
      }             }      }        
  var gl = new GraphicsLayer({ id: "st_id" }); 
          map.addLayer(gl);  

[RobertScheitlin__GISP · Accepted solution]

Anuj,

   Here is your code modified to work. I did not have access to some things in your code so I adjusted because of that. Your biggest issue was you were not specifying the dataType of the ajax call and then you were parsing it wrong.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Create web map from id</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.24/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
  <script src="https://js.arcgis.com/3.23/"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  <style>
      html, body, #mapDiv {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  <script>
    var dojoConfig = {
      parseOnLoad: true
    };
  </script>
  <script>
    var map;
    var mis_rec = [];
    var mis_recPoly = [];
    var gis_rec = [];
    var attributes = [],
      point, pointData;

    require(["esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters",
        "esri/InfoTemplate",
        "dojo/dom",
        "dojo/on",
        "dojo/dom-class",
        "esri/config",
        "dojo/_base/lang",
        "esri/request",
        "esri/SpatialReference",
        "esri/geometry/Point",
        "esri/symbols/PictureMarkerSymbol",
        "esri/graphic",
        "esri/layers/GraphicsLayer",
        "dojo/domReady!"
      ],
      function(Map, ArcGISDynamicMapServiceLayer,
        ImageParameters, InfoTemplate, dom,
        on, domClass, esriConfig,
        esriRequestlang, esriRequest, SpatialReference, Point, PictureMarkerSymbol,
        Graphic, GraphicsLayer) {
        //esriConfig.defaults.io.corsEnabledServers.push("ncog.gov.in");
        map = new Map("mapDiv", {
          basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
          center: [75.0444, 15.3563], // longitude, latitude
          zoom: 5
        });
        var imageParameters = new ImageParameters();
        imageParameters.format = "jpeg"; //set the image type to PNG24, note default is PNG8.
        //Takes a URL to a non cached map service.
        var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://10.1.31.13/arcgis/rest/services/Thematic_Atlas/DVA/MapServer", {
          "opacity": 1,
          "imageParameters": imageParameters
        });
        var polygraphlayer = new GraphicsLayer();
        map.addLayers([dynamicMapServiceLayer, polygraphlayer]);
        dojo.connect(map, "onLoad", _ajaxcall);

        _ajaxcall();

        function _ajaxcall(gis_rec) {
          //document.getElementById("bodyloadimg").style.display = "block";
          $.ajax({
            type: 'GET',
            dataType: 'json',
            url: "https://ncog.gov.in/JSON_webservice/get_food_data?code=7654",
            crossDomain: true,
            success: function(dat) {
              gis_mis1(dat);
            },
            error: function(err) {
              //document.getElementById("bodyloadimg").style.display = "none";
              alert(err.statusText);
            }
          });
        }

        function gis_mis1(mis_rec) {
          //clearGraphics();
          for (var i = 0; i < mis_rec.length; i++) {
            var rec = mis_rec[i];
            if (rec.lon && rec.lat) {
              var pt = new Point(Number(mis_rec[i].lon), Number(mis_rec[i].lat), new SpatialReference({
                wkid: 4326
              }));
              var markersymbol = new PictureMarkerSymbol("https://js.arcgis.com/3.15/esri/dijit/images/Directions/greenPoint.png", 21, 29);
              var attr = mis_rec[i];
              var content = '<table>';
              content += "<tr><td><b>District Id</td></b>" + "<td><b>: </b></td><td> ${dist_id}</td></tr>";
              content += "<tr><td><b>Email Nodal</td></b>" + "<td><b>: </b></td><td> ${email_nodal}</td></tr>";
              content += "<tr><td><b>State Id</td></b>" + "<td><b>: </b></td><td> ${st_id}</td></tr>";
              content += "<tr><td><b>Total Land</td></b>" + "<td><b>: </b></td><td> ${total_land}</td></tr>";
              content += "<tr><td><b>Industrial Name</td></b>" + "<td><b>: </b></td><td> ${industrial_name}</td></tr>";
              content += "<tr><td><b>Land Area</td></b>" + "<td><b>: </b></td><td> ${land_area}</td></tr>";
              content += "<tr><td><b>Nodal Name</td></b>" + "<td><b>: </b></td><td> ${name_nodal}</td></tr>";
              content += "<tr><td><b>EHR</td></b>" + "<td><b>: </b></td><td> ${EHR}</td></tr>";
              content += "<tr><td><b>Id</td></b>" + "<td><b>: </b></td><td> ${id}</td></tr>";
              content += "<tr><td><b>Category</td></b>" + "<td><b>: </b></td><td> ${category}</td></tr>";
              content += '</table>';
              var infoTemplate = new InfoTemplate('Land Info', content);
              polygraphlayer.add(new Graphic(pt, markersymbol, attr, infoTemplate));
              //}
            }
          }
        }
        var gl = new GraphicsLayer({
          id: "st_id"
        });
        map.addLayer(gl);
      });
  </script>
</head>

<body>
  <div id="mapDiv"></div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[AnujKumar5]

Thank you Robert..!

[AnujKumar5]

Robert,

I have an issue that how to remove this graphic from map on checkbox event ,

it try to map.graphics.clear() function  but it's won't work.