Adding multipoint to feature layer using ArcGIS API for JavaScript?

Question

I want to display a marker whenever I receive websocket message but with this code I can only display the first point and then when I receive the second message I can't display it.

socket.onmessage = function (e) {

    var message = e.data;
    alert("Message is received...");
    console.log(message);
    featureCollection.layerDefinition.drawingInfo.renderer.symbol.angle = course;

    featureCollection.layerDefinition.drawingInfo.renderer.symbol.url = alpha;

    featureLayer = new FeatureLayer(featureCollection, {
        id: 'Tracking',
        infoTemplate: popupTemplate
    });

    //associate the features with the popup on click
    featureLayer.on("click", function (evt) {
        map.infoWindow.setFeatures([evt.graphic]);
    });

    var location = {
        latitude: lat,
        longitude: Lon

    };
    point = new Point({
        longitude: 0,
        latitude: 0
    });

    point.longitude = location.longitude;
    point.latitude = location.latitude;

    console.log(point);
    graphic = new Graphic({
        geometry: point
    });
    var contentString = '<div id="content">' +
        '<div id="siteNotice">' +
        '</div>' +
        '<h1 id="firstHeading" class="firstHeading"> Info </h1>' +
        '<div id="bodyContent">' +
        '<p><b> Date : </b> ' + times +
        '<p><b> Vitesse : </b> ' + speed + ' <b> km/h </b> ' +
        '<p><b> Distance : </b> ' + distance + ' <b> m </b> ' +
        '<p><b> Altitude : </b> ' + alt + ' <b> m </b> ' +
        '<p><b> Direction : </b> ' + course + ' <b> ° </b> ' +
        '<p><b> Status : </b> ' + infostatus +
        '</div>' +
        '</div>';

    attr["description"] = contentString;
    attr["title"] = "Device :0906050400030201";

    graphic.setAttributes(attr);

    features.push(graphic);
    console.log(features);
    map.addLayers([featureLayer]);
};

map.on("layers-add-result", function (results) {

    featureLayer.applyEdits(features, features, null);

});

How can I fix this code to display multipoints ?

Answer 1

Your errors :

• Every time you receive a new message, you are creating another feature layer

• You always create a Point at the coordinates location.lat and location.lon, but those coordinates are not updated when you receive a new message

You have to create the feature layer (or even better a Graphics Layer) outside the event of a new message and only create a new point on every message you receive :

//first we code the "constant" part :

//define the info windows template
var infoTemplate = new InfoTemplate({
  title: "Device: ${deviceId}",
  content: '<div id="content">'+
    '<div id="siteNotice"></div>'+
    '<h1 id="firstHeading" class="firstHeading"> Info </h1>'+
    '<div id="bodyContent">'+
      '<p><b> Date : </b>${times}'+
      '<p><b> Vitesse : </b>${speed}<b> km/h</b>'+
      '<p><b> Distance : </b>${distance}<b> m</b>'+
      '<p><b> Altitude : </b>${alt}<b> m </b>'+
      '<p><b> Direction : </b>${course}<b> ° </b>'+
      '<p><b> Status : </b>${infostatus}'+
    '</div>'+
  '</div>'
});

var graphicsLayer = new GraphicsLayer({
  infoTemplate: infoTemplate
});

map.addLayer(graphicsLayer);

//we define the symbol
var symbol = new SimpleMarkerSymbol({
  "color": [255,255,255,64],
  "size": 12,
  "angle": 0,
  "xoffset": 0,
  "yoffset": 0,
  "type": "esriSMS",
  "style": "esriSMSCircle",
  "outline": {
    "color": [0,0,0,255],
    "width": 1,
    "type": "esriSLS",
    "style": "esriSLSSolid"
  }
});

//now we code the updating part :

socket.onmessage = function (e) {
  var message = JSON.parse(e.data);

  //let's suppose we get latitude and longitude from the message :
  var point = new Point(message.lon, message.lat);

  //let's suppose we get the attributes from the message :
  var attributes = {
    times: message.times,
    speed: message.speed,
    distance: message.distance,
    alt: message.alt,
    course: message.course,
    infoStatus: message.infoStatus,
    url: message.alpha,
    deviceId: message.deviceId,
    latitude: message.lat,
    longitude: message.lon
  };

  //we update the angle of the symbol
  symbol.angle = message.angle;

  //we create the new graphic
  var graphic = new Graphic(point, symbol, attributes, infoTemplate);

  graphicsLayer.add(graphic);
};