0

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 ?

2
  • Hi Tita, do you want to add "Multipoint" (one feature with multiple geometries) or just "multiple points"? The latter is much more common. Aug 1, 2018 at 0:03
  • I need to add one feature with multiple geometries, with this code I can get all the graphics in the features but I can display only the first one.
    – Tita
    Aug 1, 2018 at 7:49

1 Answer 1

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);
};
9
  • All the graphics are stocked in the graphicsLayer but none are displayed on the map
    – Tita
    Aug 1, 2018 at 11:08
  • Can you post the result of console.log(e.data); ?
    – LMokrane
    Aug 1, 2018 at 11:14
  • Add this line just before var message = e.data;
    – LMokrane
    Aug 1, 2018 at 11:16
  • I can get the data from the server but in the graphic the symbol and the infoTemplate are null
    – Tita
    Aug 1, 2018 at 11:32
  • did you add require([ ... "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol", ...], function (... InfoTemplate, SimpleMarkerSymbol, ...) ?
    – LMokrane
    Aug 1, 2018 at 12:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.