Getting started with marker.js Live
marker.js Live is a JavaScript browser library enabling dynamic, responsive, and interactive displaying of image annotations created with marker.js 2.
marker.js Live is a companion library for marker.js 2. While you don't need to install and implement marker.js 2 in order to display pre-made image annotations, you need it to create the annotation "configurations" that marker.js Live will display.
If this describes your scenario, you can use a marker.js 2 demo in Codesandbox to create the annotation configuration, grab the output JSON and then use it with marker.js Live.
Installation
npm
Using a modern JavaScript/TypeScript environment? Just run:
npm install markerjs-liveyarn add markerjs-liveto add marker.js Live to your project.
From CDN or local file
Just add a script tag referencing the markerjs-live library.
<script src="https://unpkg.com/markerjs-live/markerjs-live.js"></script>In this case, we are referencing the library through the UNPKG CDN. For other options, please see the Downloads section.
Usage
To display dynamic image annotations in your project, first, annotate your images using marker.js 2, grab the "state" configuration of the annotations, and then follow these 2 easy steps:
- Create an instance of
mjslive.MarkerViewpassing a target image reference to the constructor. - Call its
show()method passing your annotation configuration (marker.js 2 state) to it.
That's it!
Here's a simple example:
// skip this line if you are importing marker.js Live into the global space via the script tag
import * as mjslive from 'markerjs-live';
// create an instance of MarkerView and pass the target image reference as a parameter
const markerView = new mjslive.MarkerView(target);
// call the show() method and pass your annotation configuration (created with marker.js 2) as a parameter
markerView.show(markerState);See also
Check out the "all defaults" demo for the simplest implementation of marker.js Live in action.