Draw Scatterplot custom layer fragment drawing outside of dimensions?

[rammoozz]

vis.academy states

The scatterplot layer draws a rectangle around each data point coordinate. The rectangle is sized to match user defined radius. 
The unitPosition is a vector that measures any pixel's relative distance to the center of the rectangle, between [-1, -1] and [1, 1].

Is it possible to use scatterplot with a custom fragment to render outside of the scatterplot? Example (A popup / tooltip that's floating above the scatterplot)

If not, what is the recommended approach to render a polygon above a given position (And include Text + Icon inside it)?

[ibgreen]

You can conditionally render a PolygonLayer / TextLayer / IconLayer combo when hovering.

[Pessimistress]

If you just need one or a few popups you can look at react-map-gl's Popup control

[rammoozz]

Thanks for the replies @Pessimistress @ibgreen :

Context:

• I am using GoogleMapsOverlay so react-map-gl might not be possible with Google maps.
• I need to show the "popup" all the time (maybe popup isn't the right term, I need to show a element/polygon that's relative (x,y) to the lat/lng position, and I didn't see a way provide an offset to a polygon (it is interactive, can be dragged + clicked, this is why I chose a layer, I had much success implementing a draggable scatterplot in GoogleMapsOverlay).
• I also need to position the IconLayer relative to the TextLayer (to the left of it on the same row), and the TextLayer relative to lat/lng (above it), and include an arrow, border.

https://user-images.githubusercontent.com/5125481/109386201-23d63d00-78c7-11eb-90ab-84e98eed7502.png

Attempt:

• I used a TextLayer, with IconLayer (both with x,y offsets), but the text is dynamic so generating the IconLayer offset isn't working as expected when I multiply string.length to get a offset value.
• I used if (abs(unitPosition.y) < 1.0 - abs(unitPosition.x) * 1.0) { to draw the arrow using a ScatterPlot with a custom fragment, my original question was if i could take that fragment code and draw outside of the 1 dimension (completing the popup shape), or return multiple shapes from that fragment?

Attempt with SimpleMeshLayer:

• I was able to use an svg with SimpleMeshLayer, I was afraid it wouldn't scale though is this the case? I could also do Use image from a programmatically generated SVG string for the shape

[rammoozz]

Thanks the SVG string is working well so far, what counts as a variation? The example shows the template string with a dynamic label. Would different colors, and embedding svg icons inside it also count as variations?

Edit: I see what you are saying, I don't think this method will scale if i include text, widths in the template, might try the sub layers.

[Pessimistress]

By variations I meant the number of "unique" icons, identified by either id or url: https://deck.gl/docs/api-reference/layers/icon-layer#geticon

All icons are packed into a single texture, so the number of unique icons that the layer can use depends on the width/height of your icons and the max texture size supported by your device. You can see the number on https://webglreport.com

[rammoozz]

To position the IconLayer relative to the TextLayer (to the left in a row), would I change the shader of TextLayer to draw the icon also? getPixelOffset is not working as expected when I derive the x from the length of the TextLayer.

Edit: Maybe calculating the width of the text inside the IconLayer vertex shader is the right approach?(similar to TextLayer), adding an offset to it there, looks like its even easier with shader hooks

 // project meters to pixels and clamp to limits
  float sizePixels = clamp(
    project_size_to_pixel(instanceSizes * sizeScale),
    sizeMinPixels, sizeMaxPixels
  );

[rammoozz]

Thanks to your comment on _subLayerProps I was able to copy the fragment/vertex shaders and begin editing them to add the desired offsets etc.

For those wanting to do something similar: https://codesandbox.io/s/deckgl-forked-2qzgz?file=/src/DeckGLOverlay.js

[rammoozz]

Thanks again!!

For those wanting to do something similar:
To position the Icon relative to the Text, I needed the IconLayer to have access to TextLayer's getBoundingRect. I copied the source of TextLayer, added an IconLayer to the renderLayers output. I also had to add gl_Position.xy += project_pixel_size_to_clipspace(vec2(instanceRects.x / 2.0,0.0)); to the icon-layer-vertex.