marker.js 2 Demos: Configure markers

Configure available markers

You can easily control what marker types are available to your users. Just set the availableMarkerTypes property.

availableMarkerTypes is an array accepting both string marker type names and market type classes for type-checking and code-completion.

Click on the image to launch the demo and look at the code below.

Open in CodeSandbox

Code

Setting availableMarkerTypes controls what marker types are available to the user:

const markerArea = new markerjs2.MarkerArea(target);
// users can only access Frame and Arrow markers in this demo
markerArea.availableMarkerTypes = ['FrameMarker', markerjs2.ArrowMarker];
markerArea.addEventListener("render", (event) => (target.src = event.dataUrl));
markerArea.show();

And here's a complete HTML file to recreate this demo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>All defaults demo</title>
  <script src="https://unpkg.com/markerjs2/markerjs2.js"></script>
  <script>
    function showMarkerArea(target) {
      const markerArea = new markerjs2.MarkerArea(target);
      markerArea.availableMarkerTypes = ['FrameMarker', markerjs2.ArrowMarker];
      markerArea.addEventListener("render", (event) => (target.src = event.dataUrl));
      markerArea.show();
    }
  </script>
</head>
<body>

  <img src="img/sample-1.jpg" style="max-width: 600px;" onclick="showMarkerArea(this);" />
  
</body>
</html>

Check out a simple self-contained page for this demo.

« Previous demoNext demo »