Can I show a label with TripsLayer ?

[Chious]

Hi there!

Recently, I try build up a React App to show up flight info on the map with time series data. Wondering if I can show object's info aside of route, so I can know who is moving.

[
  {
    "name": "Flight-1",
    "color": [
      0,
      0,
      255
    ],
    "coordinates": [
      [
        -73.780004,
        40.65,
        7600
      ],
      [
        -73.746181,
        40.284853,
        7600
      ]
    ],
    "timestamps": [
      34126.88,
      34457.62
    ]
  }
] 

Than draw the map with TripsLayer

interface DataType {
  name: string;
  color: number[];
  coordinates: number[];
  timestamps: number[];
}

  
  const layer = new TripsLayer<DataType>({
    id: 'TripsLayer',
    data: data

    getPath: (d: DataType) => d.coordinates,
    getTimestamps: (d: DataType) => d.timestamps,
    getColor: (d: DataType) => d.color,
    currentTime: time,
    trailLength: 180,
    capRounded: true,
    jointRounded: true,
    pickable: true,
    widthMinPixels: 3,
  });

Wondering if I can show up object's info like this, and also present some current info ( e.g.: current longitude, latitude, altitude ).

Also thinking if I can add TextLayer after click SHOW UP button, not sure if this make sense in deck.gl

[Chious]

Thankfully, I review the explanation in Animations and Transitions again. Try to practice with useMemo in React

const getFlightsPositions(data, time){
// calculate and return current log, lng, alt
}

const [time, setTime] = useState(0)
const flightPositions = useMemo(
 () => getFlightsPositions(data, time),
[time]
)

// Than apply it to textlayer

const textLayer = new TextLayer({
id: "text-layer",
data: flightPositions,
getPosition: (d) => d.position,
getText: (d) => d.name
})