jImageMap - jQuery ImageMap Area Canvas Editor

jQuery plugin to create imagemap area polygon coordinates. Display an image with a canvas on which points may be added to create a polygon.

Flexible API allows you to create multiple areas, manipulate them in several ways, get notified on changes, for any purpose. Please check the demo.html page to view an example of the usage of the API.

DEMO: http://repos.codehot.io/jquery-canvas-area-draw/

EXAMPLE

Include the javascript file in your page after jQuery and use the following jQuery call:

<div id="element"></div>
<script type="text/javascript">
  (function($){
    $(document).ready(function(){
      var htmlmap = $("#element").htmlimagemap({
        imageUrl: "http://farm8.staticflickr.com/7259/6956772778_2fa755a228.jpg",
        areas: [{
    				href:"",
    				coords:[208,221,208,202,198,199,201,191,218,176,229,155,221,132,196,117,169,131,157,158,163,172,177,164,173,180,190,185,192,199,187,201,185,222]
    			}],
        onMove: function(area){
        },
        onUpdateArea: function(area){
        }
      });
    });
  })(jQuery);
</script>

OPTIONS

$("#elem").htmlimagemap({
  //REQUIRED
  imageUrl: "", 
  //OPTIONAL
  areas: [{
    href: "http://www.example.com",
    coords: [208,221,208,202,198,199]
  },{
    href: "http://www.example2.com",
    coords: [176,229,155,221,132,196]
  }], 
  label: "Demo2",
  labelFont: "14px Arial",
  labelColor: "#ffffff",
	activeColor: '#ff9911',
  inactiveColor: "#323232",
	fillOpacity: "0.3",
	lineWidth: 2,
  handleColor: "#cccccc",
  mobile: false,

  //OPTIONAL EVENT HANDLER
  onMove: function(area){}, 
  //OPTIONAL EVENT HANDLER
  onUpdateArea: function(area){} 
});

EVENTS

onMove

onMove: function(area){}

Fires every moment you drag a point on the canvas

onUpdateArea

onUpdateArea: function(area){}

Fires every:

Event	Description
stopDrag	The mouse stops dragging a point in the canvas
rightClick	A right-click removes a point in the area map
mousedown	A mousedown event occurs on the canvas
resetArea	An area is reset

API

	get	set	remove	reset
all			x
areas	x	x
area	x	x	x	x
activeArea	x	x	x	x
activeAreaIndex	x	x
imageUrl	x	x

removeAll()

$("#elem").htmlimagemap("removeAll");

getAreas()

var areas = $("#elem").htmlimagemap("getAreas");

setAreas(areas)

$("#elem").htmlimagemap("setAreas",areas);

getArea(i)

var area = $("#elem").htmlimagemap("getArea",i);

setArea(i,area)

$("#elem").htmlimagemap("setArea",i,area);

removeArea(i)

$("#elem").htmlimagemap("removeArea",i);

resetArea(i)

$("#elem").htmlimagemap("resetArea",i);

getActiveArea()

var area = $("#elem").htmlimagemap("getActiveArea");

setActiveArea(area)

$("#elem").htmlimagemap("setActiveArea",area);

resetActiveArea()

$("#elem").htmlimagemap("resetActiveArea");

removeActiveArea()

$("#elem").htmlimagemap("removeActiveArea");

getActiveAreaIndex()

var i = $("#elem").htmlimagemap("getActiveAreaIndex");

setActiveAreaIndex(i)

$("#elem").htmlimagemap("setActiveAreaIndex",i);

getImageUrl()

var imgurl = $("#elem").htmlimagemap("getImageUrl");

setImageUrl(url)

$("#elem").htmlimagemap("setImageUrl",url);

You may want to use a document load or ready event to make sure your elements are already added to the DOM before you invoke the plugin.

SUPPORT

Supports IE6 and later if you include the excanvas polyfill before the canvasAreaDraw script.

<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript" src="jquery.canvasAreaDraw.js"></script>