Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

animationEnd and animationStart as a configurable option for map.arcConfig #546

Open
SmileSoftSr opened this issue Jan 14, 2023 · 0 comments

Comments

@SmileSoftSr
Copy link

SmileSoftSr commented Jan 14, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant