Legend in deck.gl

user_12160920 0
Viewed 988

I am wondering if it is possible to get access to aggregated data from a deck.gl layer to be able to draw a legend.

Because the colour scheme is supplied I would only require the extent of the aggregated values calculated by the screengrid layer to be able to add this to the legend.

I know there are tooltips, but in some circumstances it would be nice to have access to these values.

deck.gl d3.js legend
1 Answers

I'm using the HexagonLayer and for that one you can find the values for the layers by using a semi custom onSetColorDomain function when initializing your layer. Then save the domain range array to a variable and call a make legend function.

for example:

        const hexlayer = new HexagonLayer({
          id: 'heatmap',
          pickable: true,
          colorRange: COLOR_RANGE,
          data:  feats_obj.coords_array,
          elevationScale: 9,
          extruded: true,
          radius: 300,
         getColorValue: points => {
            if( points.length > max_points) {
              max_points = points.length
            }
            renderCategories( incident_categories )
            return points.length
          },
          onSetColorDomain: (ecol) => {
            console.log('color domain set', ecol)
            max_span.innerHTML = ecol[1]
            color_domain = ecol;
            create_legend()

          //  console.log('max_points: ', max_points)
          },...
        })

The hacky way i figured out was to make a max points in a polygon global variable outside initializing the layer and have it update the value anytime there's a polygon with more points in it than that max value. An example of it in the wild is: https://mpmckenna8.github.io/sfviz/?start_date=2020-05-01&end_date=2020-05-31 with a link to the repo u can hack on there.

user_22259340
Related