datamaps icon indicating copy to clipboard operation
datamaps copied to clipboard

`animationEnd` and `animationStart` as a configurable option for `map.arcConfig`

Open SmileSoftSr opened this issue 3 years ago • 0 comments

Is there a way to set a callback to be executed once an arc has finished or started rendering? The idea is for the arc to show up, and once it's done rendering, disappear from view.

Let's say you're tracking a car, a plane, a carrier pigeon, a football with VAR technology, etc.

Once your trackable target leaves its origin point, animationStart kicks off, with its callback (see pseudo example below).

Once your target reaches its destination, the arc is fully rendered, and animationEnd is triggered. As a simplification, let's assume that the tracked target always reaches its destination (for example, you're modeling some event after it has occurred / concluded).

For example:

var map = new Datamap({
  scope: 'world',
  element: document.getElementById('container'),
  projection: 'mercator',
  fills: {
    defaultFill: '#262e37',
    HIGH: '#3288BD',
    LOW: '#D53E4F'
  },
  arcConfig: {
    strokeColor: '#DD1C77',
    strokeWidth: 1,
    arcSharpness: 2,
    animationSpeed: 2000,
    animationStart: function(data) {  // data is the arc being rendered
         animate(data);
    }
    animationEnd: function(data) {  // data is the arc being rendered
    	removeArc(data);
    }
  },
});

function removeArc(arc) {
    // with the lowering opacity, the destination would become invisible as well
    // and then it would be removed alongside its destination

    arc.transition().duration(1000).style("opacity",0).remove();

    // or add a class which would start collapsing / shortening the arc from
    // it's origin point to its destination 
}

function animate(arc) {
    // semi-pseudo code to be triggered before the arc starts rendering
    // imagine the blinking bubble to be a fade-in, fade-out bordered / stroked
    // circle around the destination

    arc["destination"].classList.add("blinkingBubble");
}

Can something like this be done natively? I've looked at the source , and I've seen no mention of the said config options (animationStart, animationEnd), nor have I seen anything similar.

SmileSoftSr avatar Jan 14 '23 19:01 SmileSoftSr