Best way to extend TextLayer?

[dlbnco]

Hi,

I've just started using deck.gl to fulfill some map visualization needs that Mapbox GL itself couldn't offer—the equivalent on Mapbox would be Popup but it uses HTML, and I'd rather have everything on the canvas.

The desired functionality is mostly offered by TextLayer, except that I'd like it to have a "tip" connecting the provided position to the text background when an offset is given.

It would look like this:

(everything above was already achieved with deck.gl alone, except for the cyan line which was manually drawn by myself using Photoshop)

I'd need to extend TextLayer to have that feature built in. Would that be a good approach? If so, where I could start?

I thought about using IconLayer somehow — it somehow acts like it, except that it shouldn't render a sprite image, but rather a line or rectangle of specific dimensions.

Then I realized that the "line" would act exactly as the existing text background, so maybe it could just be instantiated with different parameters on TextLayer.renderLayers.

[Pessimistress]

Try use SimpleMeshLayer where the mesh is just a line?

[dlbnco]

Would that "always face the camera" as with billboard: true?

[dlbnco]

I achieved the above by using IconLayer and a canvas as the iconAtlas:

const MOCK_MARKERS = [
  {
    title: 'Sprint',
    lngLat: [12.93011869521977, 43.49301565258902],
    anchor: 'top',
    textAnchor: 'start',
  },
  {
    title: 'Climb',
    lngLat: [12.691684874211667, 43.525184353921055],
    anchor: 'left',
    textAnchor: 'start',
  },
  {
    title: 'Feed',
    lngLat: [12.592471985684547, 43.65109327950044],
    anchor: 'bottom',
    textAnchor: 'middle',
  },
  {
    title: 'Feed',
    lngLat: [12.5346, 43.52081],
    anchor: 'right',
    textAnchor: 'end',
  },
];

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = params.lineColor;
ctx.fillRect(0, 0, 2, 96);

mapboxMap.addControl(
    new MapboxOverlay({
      id: 'deck-overlay',
      interleaved: true,
      layers: [
        new IconLayer({
          id: 'tip-layer',
          data: MOCK_MARKERS,
          getPosition: (d) => d.lngLat,
          iconAtlas: canvas,
          getIcon: () => 'tip',
          sizeScale: 1,
          getSize: (d) => 96,
          getAngle: (d) => {
            switch (d.anchor) {
              case 'bottom':
                return 180;
              case 'right':
                return 270;
              case 'top':
                return 0;
              case 'left':
                return 90;
            }
          },
          iconMapping: {
            tip: {
              x: 0,
              y: 0,
              width: 2,
              height: 96,
              anchorY: 0,
              mask: false,
            },
          },
        }),
        new TextLayer({
          id: 'text-layer',
          data: MOCK_MARKERS,
          getPosition: (d) => d.lngLat,
          getText: (d) => d.title,
          getTipColor: () => lineColor,
          getSize: () => 24,
          fontFamily: 'interstate-mono',
          background: true,
          backgroundPadding: [16, 8],
          getBackgroundColor: () => [255, 255, 255, 255],
          getBorderColor: () => lineColor,
          getBorderWidth: () => 2,
          getTextAnchor: (d) => d.textAnchor,
          getPixelOffset: (d) => {
            switch (d.anchor) {
              case 'bottom':
                return [0, -96];
              case 'left':
                return [96, 0];
              case 'top':
                return [0, 96];
              case 'right':
                return [-96, 0];
            }
          },
        }),
      ],
    }),
  );
};

[amiramir2124]

https://khanephotoshop.com/
photoshop tutorials