Labels and markers created but not updating.

john432003

The code creates the marker for each SN but the marker and labels do not move after the initial creation. 

 

      client.on('message', (topic, message) => {
        const payload = JSON.parse(message.toString());
        console.log('Received message:');

        const serialNumber = payload.serial_number;

        // Check if a point already exists for this serial number
        if (pointsBySerialNumber.hasOwnProperty(serialNumber)) {
          // Update the existing point's location
          const existingPoint = pointsBySerialNumber[serialNumber];
          existingPoint.latitude = payload.latitude;
          existingPoint.longitude = payload.longitude;
          existingPoint.z = payload.elevation_agl;
          console.log(existingPoint);
          // Update the existing label's location
          existingPoint.label.geometry = existingPoint.geometry.clone();
        } 
// The else works 
        else {
          // Create a new point and store it in the dictionary
          const newPoint = new Point({
            latitude: payload.latitude,
            longitude: payload.longitude,
            z: payload.elevation_agl,
            spatialReference: {
              wkid: 4326
            }
          });
          const newLabel = new Point({
            latitude: payload.latitude,
            longitude: payload.longitude,
            z: payload.elevation_agl + 50,
            spatialReference: {
              wkid: 4326
            }
          });

// Lets update the label and AGL using the Last 4 of the SN
          let lab = serialNumber.slice(-4) + ' \n AGL:' + Math.floor(payload.height).toString();

          const label = new Graphic({
            geometry: newLabel,
            symbol: {
              type: "text",
              color: [255, 255, 255],
              haloColor: [0, 0, 0],
              haloSize: 2,
              text: lab,
              font: {
                size: 12,
                family: "sans-serif"
              }
            }
          });

          const imageUrl = 'p.png'; // Replace with the URL of your image
          const imageSymbol = {
            type: 'picture-marker',
            url: imageUrl,
            width: 20, // Adjust the width of the image
            height: 20, // Adjust the height of the image
            yoffset: 25 // Adjust this value to set the desired vertical offset
          };

          // Add the new image and label to the map
          view.graphics.addMany([
            new Graphic({
              geometry: newPoint,
              symbol: imageSymbol
            }),
            label
          ]);

          // Store the new point and label in the dictionary
          pointsBySerialNumber[serialNumber] = {
            geometry: newPoint,
            label: label
          };
        }
      });

 

JoelBennett

It doesn't appear there's a documented way to make the View update when a geometry's coordinates have changed, apart from cloning the geometry or the graphic.

Probably the best alternate way to achieve this is to use the undocumented "notifyGeometryChanged" method of the Graphic class.  For example:

graphic.geometry.latitude = newLat;
graphic.geometry.longitude = newLon;
graphic.notifyGeometryChanged();

 

If you go in this direction, you'd need to change your "pointsBySerialNumber" map to store references to the graphic objects instead of the point objects.