marker.js Live Demos

marker.js Live plugins

marker.js Live is structured in a way to include just the core functionality in the main product. Plugins do the rest.

This way you can include just the functionality you actually need.

In this demo, we add "animate" and "links" plugins. The former adds a subtle animation when markers are initially displayed and the latter takes URLs in the notes field of the markers (if present) and makes markers clickable.

Try clicking on any of the markers in the image below.


Here's how yo do this:

import * as mjslive from 'markerjs-live'; import { Animate } from 'mjslive-plugin-animate'; import { Links } from 'mjslive-plugin-links'; ... const markerView = new mjslive.MarkerView(targetImage); // add the Animate plugin markerView.addPlugin(new Animate()); // create an instance of the Links plugin const links = new Links(); // set it to open links in a new tab = '_blank'; // add it to the MarkerView plugins markerView.addPlugin(links); // show the annotations;

Here, config is the output state from marker.js 2.

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