Using marker.js Live plugins
Unlike marker.js 2, marker.js Live is meant to be used in wide audience end-user facing scenarios. Therefore it was designed to pack the core functionality into the library itself but leave out all the extra stuff that some people may need and others don't.
You can add the extra functionality either in your own code using events or use pre-made plugins to add just the features you need.
Available plugins
Here's the list of known marker.js Live plugins:
- mjslive-plugin-animate - adds basic animation to markers when the annotation is loaded.
- mjslive-plugin-links - detects URLs in marker's
notesfield and makes markers clickable (navigating to the first link in notes). - mjslive-plugin-notes - displays the content of the marker's
notesfield in the specified element. - mjslive-plugin-tooltip - automatically adds tooltips for all markers with
notes.
More plugins are coming soon...
How to add plugins
To use plugins you install and import them to your project, create an instance of the plugin, configure it (if needed), and then add it to the instance of marker.js Live using addPlugin().
In this example we add animate and links plugins to our instance of marker.js Live:
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);See also
Check out the plugins demo to see this code in action.