Select to view content in your preferred language

ajax service to add points to graphic layer

1280
3
08-16-2013 03:47 AM
NigelAlford
Occasional Contributor
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
Deactivated User
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
Occasional Contributor
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
Deactivated User
Thank you so much! I really appreciate you sharing your code. It worked like a charm!
0 Kudos