Retrieve the color of the TripsLayer in deck.gl

layers.push(new TripsLayer({
        id: 'trips',
        data: trips,
        getPath: (d: Trip) => d.segments.map((p: Waypoint) => p.coordinates),
        getTimestamps: (d: Trip) => d.segments.map((p: Waypoint) => p.timestamp),
        getColor: (d: Trip) => d.segments.map((p: Waypoint) => p.color),//this.getColor,
        opacity: 0.3,
        widthMinPixels: 5,
        trailLength,
        currentTime

I have a single trip displayed on Deck.gl, and I aim to assign unique colors to each coordinate of the trip. However, the color remains constant and often appears black despite changes in location and time. The color property is defined in the 'trips.json' as shown here:

javascriptjsonwebdeck.glgetcolor

Answer №1

I am facing a similar issue where my function to change the color seems to only run once. It could be because getcolor is considered a "render option" instead of a "data accessor". Referencing:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Cutting out the lowest identification that is not a certain object

A real-time counter showing the viewers of a news article on a website using Laravel Jetstream. .leaving(user => { this.participants.splice( this.participants.indexOf(user, 1)); }) .joining(user => { this.participants.push(user); ...

javascriptlaravelvue.jsinertiajs

Searching for multiple filtered items in Vue.js

When working with Vue js, searching through a list is straightforward. However, when dealing with a large dataset of 1000 records and needing to apply specific filters for user searches, I find myself at a loss. Is there a plugin or method that can help me ...

javascriptvue.jsvuejs2

Updating Sencha list itemTpl on the fly

Is there a way to dynamically change the itemTpl in a Sencha list to adjust the visibility of a column based on certain conditions? Your assistance would be greatly appreciated. ...

javascripthtmllistcsssencha-touch

HTML form with a dropdown menu

Imagine you have a HTML form containing two dropdown lists. The first dropdown is labeled "country" and contains a list of countries. The second dropdown, labeled "cities," should be dynamically populated based on the country selected. What is the best ...

javascriptjqueryajax

How to hide an image in the React carousel display

I am having an issue with my Carousel, specifically with the image not being displayed even though I have set up the data in a const called items. Here is how my const looks: var items = [ { url:'../../assets/img/hors1.jpg', ...

javascriptreactjsimagecarouselsrc

Is there a way to locate an element within innerHTML using getElementById?

Is it possible to achieve the following code snippet? <div id="parent"> <iframe id="myFrame" title="HEY!" srcdoc="<div id='inner'>Hello World!</div>"></iframe> </div> v ...

javascripthtml

Modify a unique custom binding handler in such a way that it is designated using an Immediately Invoked Function Expression

I am currently working on improving a custom binding handler by converting it into an Immediately Invoked Function Expression (IIFE). Despite researching IIFE online, I am still unsure of how to make the necessary changes to my custom handler. Can someon ...

javascriptjqueryiife

Invalid JSON Primitive encountered when making an AJAX call using jQuery

I've been struggling with a problem that I just can't seem to solve. I've tried numerous solutions and even searched on StackOverflow for similar questions, but nothing seems to work for me. Here is the issue at hand: I have this function ...

jqueryjsonajax

Is the neglected property being discarded?

First things first, let's talk about my class: class FavoriteFooBar { ... isPreferred: boolean = false; constructor() { this.isPreferred = false; } } Using a utility library called Uniquer, I arrange a list of FavoriteFooBar instances to pr ...

javascriptjsonangulartypescriptlodash

What is the best way to remove the excess numbers from the return date provided by the react-date-picker?

I need help displaying only the Month and Day with the format "Tue Oct 22 2019". Currently, I am getting "Tue Oct 22 2019 00:00:00 GMT-0700 (Mountain Standard Time)" when using "react-date-picker". How can I achieve this without having to truncate the te ...

javascriptreactjsreact-datepicker

Aligning the 'container-fluid' slideshow and video player

I'm struggling to center a video in a slick slider that is set as a 'container-fluid'. The slideshow and video display fine across the full width of the browser, but when I resize the browser window or view the site on a lower resolution, I ...

javascriptjquerycsstwitter-bootstraphtml5-video

Paginating content without the need for a database

Seeking assistance on implementing pagination for displaying trading history API responses, without utilizing a database. Can anyone provide guidance and help with the necessary logic? Here is an excerpt of my code: <?php error_reporting(E_ALL) ...

javascriptphpjquerypagination

Perform DOM manipulation prior to triggering the AJAX event to prevent CSRF Error

Currently, I am faced with a challenge while working on Django. My goal is to implement a chained AJAX call - meaning that once one call returns, it triggers additional AJAX calls. Despite thorough research and referencing the suggested methods in the Djan ...

javascriptjqueryajaxdjangocsrf

"Master the art of using express and jade to loop through data and generate dynamic

Hey there! I have a question regarding node.js. When working with express, we typically have multiple files such as app.js, index.jade, index.js, and server.js where most of the server logic resides. Let's say we have two objects defined in server.js ...

javascriptjquerynode.jsexpresspug

Error message stating that the function "data.map" is not recognized, resulting in a

const ShoppingList = ({ itemList }) => { let { loading, items } = itemList; console.log(items); return ( <div> {loading ? ( <p>Loading...</p> ) : ( <table> <thead> ...

javascriptreactjs

Passing the value of each table row using Ajax

On my webpage, I have a list of orders displayed. I'm facing an issue where the value of each row in the table is not being passed correctly to my controller and database when a user clicks on a button - it always shows null. Can someone please assist ...

javascriptjqueryhtmlajaxasp.net-mvc

Tips for displaying real-time data and potentially selecting alternative options from the dropdown menu

Is there a way to display the currently selected option from a dropdown list, and then have the rest of the options appear when the list is expanded? Currently, my dropdown list only shows the available elements that I can choose from. HTML: < ...

javascriptangulartypescriptangular5asp.net-core-webapi

Expanding columns with varying lengths in R

Having some difficulty handling a JSON file that I'm trying to convert into a data frame. The issue arises when attempting to unnest the data into a wider format due to columns containing lists of varying sizes. Furthermore, one column consists of lis ...

rjson

Using JavaScript to execute a JSON parse function will not work

I am currently working on this code and would appreciate any assistance. I'm trying to retrieve and parse data from my listApp.json file to display a list with one link. As a beginner, I could use some guidance. <script type = "text/javascript"> ...

javascriptjsonlistparsing

The functionality of jquery.load() seems to be experiencing issues in Internet Explorer when attempting to load an HTML file

Code $('.form').load('http://'+window.location.hostname+':8423/html/form/form_generate.html/?session='+session); In an attempt to load a html file from a different port on the same server. The original server is accessible ...

javascriptjqueryhtml