jQuery Plugin For Adding Markers To Any DOM Elements - planit

planit is a jQuery plugin for creating draggable, interactive markers/notes/comments/annotations on any DOM elements (e.g. images, containers, canvas, etc) embedded in web page.

See also:

• jQuery Plugin For Adding Notes and Markers To An Image - imgNotes

How to use it:

1. Add jQuery planit plugin's files into your web page as follow.

<link href="planit.css" rel="stylesheet">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="planit.js"></script>

2. Call the plugin on the target element and add your own markers using markers array.

p = planit.new({
  container: 'planit',
  markers: [{
    coords: ['12','45'],
    draggable: true,
    infobox: "<h2>Title</h2><p>Marker 1.</p>"
  },{
    coords: ['45','62'],
    draggable: true,
    infobox: "<h2>Title</h2><p>Marker 2.</p>"
  }]
});

3. All the options.

p = planit.new({

  // The id of the container in which you want to load Planit.
  container: '',

  // A URL or local (web-accessible) path to the image you'd like to set as the background image. 
  // This image is set at 100% width of the container, 
  // and the height of the container is adjusted automatically.
  backgroundImage: ''

  markers: [{
    coords: ['12','45'],

    // Makes the markers draggable
    draggable: true,

    // The markup you'd like to include in the infobox
    infobox: "<h2>Title</h2><p>Marker 1.</p>"
  },{
    coords: ['45','62'],
    draggable: true,
    infobox: "<h2>Title</h2><p>Marker 2.</p>"
  }],

  // drag end callback function
  dragEnd: function() {},

  // add marker function
  addMarker: function() {},

});

Change log:

2015-03-21

• add background zoom option, but not zooming to correct point

---

This awesome jQuery plugin is developed by seancdavis. For more Advanced Usages, please check the demo page or visit the official website.