imgNotes Plugin - note display with custom markers


This example demonstrates how the appearance of markers can be changed by using custom callbacks and custom fields in a JSON notes array. Click the buttons to change the markers displayed.

There is also a Print button that shows how to use the printThis jQuery plugin to print the image view with markers.

The custom callbacks required depend on the desired effect. Variable marker coloring and the tooltip style marker can be implemented with just custom onAdd callbacks. The circle marker, which has a fixed diameter relative to the image, requires both a custom onAdd and onUpdateMarker because the size of the html element (a div) must be adjusted if the image zoom changes. Joining the markers with a line requires a custom onUpdate callback.