marker.js Live Documentation: Creating plugins

Creating marker.js Live plugins

You can extend marker.js Live with custom functionality from your own code but you can also go one step further and package this functionality into reusable marker.js Live plugins.

What constitutes a plugin?

To be a valid marker.js Live plugin your code should implement the IMarkerViewPlugin interface:

interface IMarkerViewPlugin {
  init: (markerView: MarkerView) => void;
}

For those not familiar with TypeScript, this essentially means that your class has to have one method - init. It gets the current instance of MarkerView as the only argument and that's it.

Here's a valid marker.js Live plugin in plain ES2015:

class MyPlugin {
  init(markerView) {
    console.log('I do nothing!');
  }
}

The init() method is called right after the marker.js Live instance is created but before any markers are added to it. Within it, you perform all the initialization actions needed by your plugin. The most common scenario is to add event listeners for MarkerView events.

Here is the init method from the Notes plugin:

init(markerView: MarkerView): void {
  this.markerView = markerView;

  this.markerView.addEventListener('over', this.markerOver);
}

Plugin Starter Kit

You are free to develop plugins any way you want. Having said that, there's a "quick start" repository that makes developing and packaging plugins a breeze.

Just fork/copy the mjslive-plugin-starter repository and follow the instructions in its README file.

It uses rollup, TypeScript, ESLint, and other tools to make developing and distributing plugins easy. But as said above — you are absolutely free to develop plugins in any environment that makes the most sense to you.

« Previous