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.

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, and zoom buttons (hidden by default) markerArea.uiStyleSettings.redoButtonVisible = true; markerArea.uiStyleSettings.notesButtonVisible = true; markerArea.uiStyleSettings.zoomButtonVisible = true; markerArea.uiStyleSettings.zoomOutButtonVisible = true; markerArea.addRenderEventListener((imgURL) => target.src = imgURL); 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, and zoom buttons (hidden by default) markerArea.uiStyleSettings.redoButtonVisible = true; markerArea.uiStyleSettings.notesButtonVisible = true; markerArea.uiStyleSettings.zoomButtonVisible = true; markerArea.uiStyleSettings.zoomOutButtonVisible = true; markerArea.addRenderEventListener((imgURL) => target.src = imgURL); 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.