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.

Open in CodeSandbox

Code

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
links.target = '_blank';
// add it to the MarkerView plugins
markerView.addPlugin(links);

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

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

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

« Previous demoNext demo »