marker.js Live Demos

marker.js Live events demo

marker.js Live fires various events during the annotation layer lifecycle.

Check out Events in the documentation for a list of all supported events.

In this demo, we set all images to semi-transparent on load. Then when the mouse hovers over a marker we "light it up" by setting it to fully opaque.

Open in CodeSandbox

Code

Here's how yo do this:

import * as mjslive from 'markerjs-live';

...

const markerView = new mjslive.MarkerView(targetImage);

// when loaded make all markers semi-tranpsarent
markerView.addEventListener("load", (mv) => {
  mv.markers.forEach((m) => (m.outerContainer.style.opacity = "0.5"));
});
// when hovering over a marker make it opaque
markerView.addEventListener("over", (mv, m) => {
  if (m && m !== previousMarker) {
    m.outerContainer.style.opacity = "1";
  } else if (m === undefined && previousMarker !== undefined) {
    previousMarker.outerContainer.style.opacity = "0.5";
  }
  if (m !== previousMarker) {
    previousMarker = m;
  }
});

// show the annotations
markerView.show(config);

Check out this demo in CodeSandbox for a complete self-contained sample.

« Previous demo