ajax service to add points to graphic layer

990
3
08-16-2013 03:47 AM
NigelAlford
New Contributor III
I'm creating graphics layer with ajax return.  I can see the graphics layer in the map, but the points don't appear on the layer, I'm adding the points but somehow something seems missing. Jen is an object that's holding most of the map elements. EDIT: I'm now getting a new error here's the reformated code: 

**Error: Problem parsing d="Z"**

    
    $.ajax({
      url: opt.url,
      type: 'GET',
      dataType: 'json',
      error: function(error) {
        console.error('error: ' + error);
        jen.ajaxData.points = {
          "points": [
            [-122.63, 45.51],
            [-122.56, 45.51],
            [-122.56, 45.55],
            [-122.62, 45.00],
            [-122.59, 45.53]
          ],
          "spatialReference": ({
            "wkid": 4326
          })
        };
      },
      success: function(data) {
        console.info('ajax is successfull');
        jen.graphicObj = {};
        jen.graphicObj.Layer = new esri.layers.GraphicsLayer();

        for (var i = 0; i < (data.length); i++) {
          jen.ajaxData.long.push(data.latitude);
          jen.ajaxData.lat.push(data.longitude);
          jen.ajaxData.num.push(data.number);
          jen.ajaxData.idleTime.push(data.idelTimeMinutes);

          jen.ajaxData.points = {
            "points": [jen.ajaxData.long, jen.ajaxData.lat],
            "spatialReference": ({
              "wkid": 4326
            })
          };

          jen.graphicObj.geometry = new esri.geometry.Multipoint(jen.ajaxData.points);
          jen.graphicObj.infoTemplate = new esri.InfoTemplate(//);
          jen.graphicObj.graphic = new esri.Graphic(jen.graphicObj.webMercator, jen.circle, '', jen.graphicObj.infoTemplate);
          jen.graphicObj.webMercator = esri.geometry.geographicToWebMercator(jen.graphicObj.geometry);
          jen.graphicObj.Layer.add(jen.graphicObj.graphic);
        }
      } //end of success function

    }).done(function(){
      //layers get added in a loop after this point
  }
0 Kudos
3 Replies
SaraHintze
New Contributor
Hi there. I am trying to do something similar and have been unsuccessful. Would you be willing to share your final code?
0 Kudos
NigelAlford
New Contributor III
Hey I got it working, but haven't looked at it in a while, here's what I created.

   jen = {};
   function ajaxAdd(opt) {
    jen.ajaxData = {};

    $.ajax({
      url: opt.url,
      type: 'GET',
      dataType: 'json',
      error: function() {
        console.error('Ajax Load error');
      },
      success: function(data) {
        console.info('ajax is successfull');
        jen.graphicObj = {};
        jen.graphicObj.Layer = new esri.layers.GraphicsLayer();
        for (var i = 0; i < (data.length); i++) {
          jen.ajaxData.points = {
            "points": [Number(data.longitude), Number(data.latitude)],
            "spatialReference": ({
              "wkid": 4326
            })
          };
          jen.graphicObj.geometry = new esri.geometry.Point(data.longitude, data.latitude);
          jen.graphicObj.infoTemplate = new esri.InfoTemplate("Attributes:", "<tr>Loco Number: <td> " + data.number + "</tr></td><br><tr>Longitude: <td>" + data.longitude + "</tr></td><br><tr>Latitude: <td>" + data.latitude + "</tr></td><br><tr>Minutes Idle: <td>" + data.idelTimeMinutes + "</tr></td>");
          jen.graphicObj.graphic = new esri.Graphic(jen.graphicObj.geometry, jen.circle, '', jen.graphicObj.infoTemplate);
          jen.graphicObj.Layer.add(jen.graphicObj.graphic);
      }
    }
  }).done(function(){
     //build the layer once the call is created
    }); //end of ajax call
  }

jen.graphicObj.Layer.setRenderer(jen.rendererCircle);


This dumps everything into an object. loop through the object and you'll be able to add the layer to the map.  Let me know if you have some more questions.  Sorry if its too vague I ended up adding this to a bigger code base I've been building
0 Kudos
SaraHintze
New Contributor
Thank you so much! I really appreciate you sharing your code. It worked like a charm!
0 Kudos