marker.js 2 Demos

All features demo

This demo enables all markers and all features that come with marker.js 2.

In addition to default markers, you can try ellipse frame, measurement, cover, line, and curve markers. Additionally, redo, notes, and zooming functions are enabled.

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

Open in CodeSandbox

Code

Here's the code to enable all the core features marker.js 2 has to offer:

const markerArea = new markerjs2.MarkerArea(target);

// add all marker types
markerArea.availableMarkerTypes = markerArea.ALL_MARKER_TYPES;

// enable redo, notes, zoom, and clear buttons (hidden by default)
markerArea.uiStyleSettings.redoButtonVisible = true;
markerArea.uiStyleSettings.notesButtonVisible = true;
markerArea.uiStyleSettings.zoomButtonVisible = true;
markerArea.uiStyleSettings.zoomOutButtonVisible = true;
markerArea.uiStyleSettings.clearButtonVisible = true;


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);

      // add all marker types
      markerArea.availableMarkerTypes = markerArea.ALL_MARKER_TYPES;
      
      // enable redo, notes, zoom, and clear buttons (hidden by default)
      markerArea.uiStyleSettings.redoButtonVisible = true;
      markerArea.uiStyleSettings.notesButtonVisible = true;
      markerArea.uiStyleSettings.zoomButtonVisible = true;
      markerArea.uiStyleSettings.zoomOutButtonVisible = true;
      markerArea.uiStyleSettings.clearButtonVisible = true;
      
      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 this demo in CodeSandbox.

« Previous demoNext demo »