ArcLayer with direction

[sgavathe]

Is it possible to have a direction on the ArcLayer?

I can get the center of the 2 points from the data that I passed in and Add the IconLayer with the Arrow Icon. How do I place it on top of the Arc so it will be exactly on center of Arc?

[Pessimistress]

import {WebMercatorViewport} from '@deck.gl/core';
import {lerp, distance} from 'gl-matrix/vec2';

const viewport = new WebMercatorViewport();

function paraboloid(source, target, ratio) {
  const x = lerp([], source, target, ratio);
  const center = lerp([], source, target, 0.5);
  const dSourceCenter = distance(source, center);
  const dXCenter = distance(x, center);
  const h = (dSourceCenter + dXCenter) * (dSourceCenter - dXCenter);
 return [x[0], x[1], h];
}

// ratio - a number between [0, 1]. 0 is the source, and 1 is the target.
function getPointAlongArc(sourceLngLat, targetLngLat, ratio) {
  const source = viewport.projectPosition(sourceLngLat);
  const target = viewport.projectPosition(targetLngLat);
  const p = paraboloid(source, target, ratio);
  return viewport.unprojectPosition(p);
}

// get center point
getPointAlongArc(from, to, 0.5);

[sgavathe]

@Pessimistress Thank you very much again. I am able to see them at the center of an Arc. They seemed to be little off in terms of (h) height.

Also wondering, if it is possible to get the pointAlongArc per Tilt?

[sgavathe]

Not familiar with the shaders hook. Can this be accomplished using shaders Hook API?

Example draw a ArrowShape and place it on arc center.

  float arrow(vec2 P, float size)
    {
      float x = P.x;
      float y = P.y;
      float r1 = abs(x) + abs(y) - size/2.0;
      float r2 = max(abs(x+size/2.0), abs(y)) - size/2.0;
      float r3 = max(abs(x-size/6.0)-size/4.0, abs(y)- size/4.0);
      return min(r3,max(.75*r1,r2));
    }