I’m happy to introduce marker.js Live — a JavaScript library for displaying dynamic interactive image annotations in your web apps. Genesis First, there was marker.js (v1). Then it got a feature to render annotations in a separate transparent PNG (without the original image). Then there was marker.js 2 and it could save and restore its state to continue editing image annotations between sessions. Then I realized we could create a leaner library to take that state and display it on top of the original image without having to store any annotation images anywhere. Just store the JSON state in a database, text file, browser’s local storage, or wherever, then pass it to marker.js Live to be displayed over the original image. What it can do for you That’s how marker.js Live was born but it doesn’t stop there. Since annotations are displaying dynamically, we can adjust them to the current on-screen size of the target image. And since they are vector graphics, we can do it without losing any image quality. And since markers are objects, we can enable all kinds of interactive scenarios: highlighting markers on hover, redirecting to links on click, showing notes in a tooltip, and so on and so forth. Modular architecture I’ve decided to structure marker.js Live in a modular fashion. The core marker.js Live package is a lean library with just the core functionality and then you can use (or build) plugins to enable animation and interactivity based on your preferences and needs. At launch there are 4 plugins to add animation, link clicking, displaying notes in arbitrary page elements, or displaying notes in a tooltip. More first-party plugins are coming, and you can build your own and share them with the world (or keep them to yourself — your choice).

marker.js Live - Display dynamic and responsive image annotations, live

Replies