Meroje/index.html

## index.html
<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">
  <title>CodePen - Pen</title>

</head>

<body>

  <canvas id="demo" width="500" height="400"></canvas>
  <button id="clearMarks">Clear Marks</button>
  <button id="deleteMark">Remove selected</button>
  <select name="stands" id="stands">
    <option value="stand1">stand 1</option>
    <option value="stand2">stand 2</option>
    <option value="stand3">stand 3</option>
    <option value="stand4">stand 4</option>
    <option value="stand5">stand 5</option>
    <option value="stand6">stand 6</option>
  </select>
  <button id="setMark">Set name</button>
  <button id="unsetMark">Unset name</button>
  <button id="exportMarks">Export Marks</button>
  <textarea name="marks" id="marks" cols="30" rows="10"></textarea>
  <input type="text" id="currentMark" style="width:200px">

  <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
  <script src="index.js"></script>

</body>

</html>

## index.js
var stage = new createjs.Stage("demo"),
  w = stage.width,
  h = stage.height,
  bitmap = new createjs.Bitmap("map.png"),
  stands = document.getElementById('stands'),
  marks = new createjs.Container();
marks.selectedChild = null;

createjs.Shape.prototype.selected = false;
createjs.Shape.prototype.standId = null;
createjs.Shape.prototype.setSelected = function(selected) {
  if (selected == true) {
    this.selected = true;
    if (marks.selectedChild !== null) {
      marks.children[marks.selectedChild].setSelected(false);
    }
    marks.selectedChild = marks.getChildIndex(this);
    this.graphics.inject(function(color) {
      this.fillStyle = color;
    }, "blue");
    document.getElementById('currentMark').value = JSON.stringify({
      'x': this.x,
      'y': this.y,
      'name': this.name
    });
  } else {
    this.selected = false;
    marks.selectedChild = null;
    this.graphics.inject(function(color) {
      this.fillStyle = color;
    }, this.name ? "green" : "red");
  }
};

document.addEventListener('DOMContentLoaded', function() {
  stage.addChild(bitmap);
  stage.addChild(marks);
  bitmap.image.onload = function() {
    stage.canvas.width = bitmap.image.width;
    stage.canvas.height = bitmap.image.height;
    stage.update();
  };
  stage.addEventListener("click", function(e) {
    if (marks.selectedChild !== null) {
      marks.children[marks.selectedChild].setSelected(false);
    }
    var name = null;
    if (stands.selectedIndex != -1) {name = stands.selectedOptions[0].value}
    addMark(e.stageX, e.stageY, name);
    stage.update();
  });
  stage.update();
});

function addMark(x, y, name) {
  if (marks.children.length == stands.length) return;
  var circle = new createjs.Shape();
  circle.graphics.beginFill("red").drawCircle(0, 0, 7);
  circle.x = x;
  circle.y = y;
  circle.addEventListener("click", handleClick);

  marks.addChild(circle);
  circle.setSelected(true);
  stage.update();
  if (marks.children.length == stands.length) alert('All marks placed !');
}

function clearMarks() {
  marks.removeAllChildren();
  stage.update();
}
document.getElementById('clearMarks').addEventListener("click", clearMarks);

function deleteMark() {
  if (marks.children[marks.selectedChild].standId !== null)
    stands[marks.children[marks.selectedChild].standId].disabled = false;
  marks.removeChildAt(marks.selectedChild);
  marks.selectedChild = null;
  stage.update();
}
document.getElementById('deleteMark').addEventListener("click", deleteMark);

function setMark() {
  if (marks.selectedChild === null && stands.selectedOptions.length == 0) return;
  var mark = marks.children[marks.selectedChild];
  mark.name = stands.selectedOptions[0].value;
  mark.standId = stands.selectedOptions[0].index;
  document.getElementById('currentMark').value = JSON.stringify({
    'x': mark.x,
    'y': mark.y,
    'name': mark.name
  });
  stands.selectedOptions[0].disabled = true;
  var i = stands.selectedIndex;
  stands.options[++i%stands.options.length].selected = true;
  if (stands.selectedOptions[0].disabled == true) {
    stands.selectedIndex = -1;
    alert('All Done !');
  }
  stage.update();
}
document.getElementById('setMark').addEventListener("click", setMark);

function unsetMark() {
  if (marks.selectedChild === null && marks.children[marks.selectedChild].name == null) return;
  var mark = marks.children[marks.selectedChild];
  mark.name = null;
  stands[mark.standId].disabled = false;
  stands.selectedIndex = mark.standId;
  mark.standId = null;
  stage.update();
}
document.getElementById('unsetMark').addEventListener("click", unsetMark);

function exportMarks() {
  var exports = [];
  for (var i = 0; i < marks.children.length; i++) {
    var child = marks.children[i];
    if (child.name == null) continue;
    exports.push({
      'x': child.x,
      'y': child.y,
      'name': child.name
    });
  };
  document.getElementById('marks').value = JSON.stringify(exports);
}
document.getElementById('exportMarks').addEventListener("click", exportMarks);

function handleClick(e) {
  e.stopPropagation();
  if (e.target.selected == false) {
    e.target.setSelected(true);
  } else {
    e.target.setSelected(false);
  }
  stage.update();
}

## map.png

      
    Raw
  

              map.png
	<!DOCTYPE html>
	<html>

	<head>

	<meta charset="UTF-8">
	<title>CodePen - Pen</title>

	</head>

	<body>

	<canvas id="demo" width="500" height="400"></canvas>
	<button id="clearMarks">Clear Marks</button>
	<button id="deleteMark">Remove selected</button>
	<select name="stands" id="stands">
	<option value="stand1">stand 1</option>
	<option value="stand2">stand 2</option>
	<option value="stand3">stand 3</option>
	<option value="stand4">stand 4</option>
	<option value="stand5">stand 5</option>
	<option value="stand6">stand 6</option>
	</select>
	<button id="setMark">Set name</button>
	<button id="unsetMark">Unset name</button>
	<button id="exportMarks">Export Marks</button>
	<textarea name="marks" id="marks" cols="30" rows="10"></textarea>
	<input type="text" id="currentMark" style="width:200px">

	<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
	<script src="index.js"></script>

	</body>

	</html>
	var stage = new createjs.Stage("demo"),
	w = stage.width,
	h = stage.height,
	bitmap = new createjs.Bitmap("map.png"),
	stands = document.getElementById('stands'),
	marks = new createjs.Container();
	marks.selectedChild = null;

	createjs.Shape.prototype.selected = false;
	createjs.Shape.prototype.standId = null;
	createjs.Shape.prototype.setSelected = function(selected) {
	if (selected == true) {
	this.selected = true;
	if (marks.selectedChild !== null) {
	marks.children[marks.selectedChild].setSelected(false);
	}
	marks.selectedChild = marks.getChildIndex(this);
	this.graphics.inject(function(color) {
	this.fillStyle = color;
	}, "blue");
	document.getElementById('currentMark').value = JSON.stringify({
	'x': this.x,
	'y': this.y,
	'name': this.name
	});
	} else {
	this.selected = false;
	marks.selectedChild = null;
	this.graphics.inject(function(color) {
	this.fillStyle = color;
	}, this.name ? "green" : "red");
	}
	};

	document.addEventListener('DOMContentLoaded', function() {
	stage.addChild(bitmap);
	stage.addChild(marks);
	bitmap.image.onload = function() {
	stage.canvas.width = bitmap.image.width;
	stage.canvas.height = bitmap.image.height;
	stage.update();
	};
	stage.addEventListener("click", function(e) {
	if (marks.selectedChild !== null) {
	marks.children[marks.selectedChild].setSelected(false);
	}
	var name = null;
	if (stands.selectedIndex != -1) {name = stands.selectedOptions[0].value}
	addMark(e.stageX, e.stageY, name);
	stage.update();
	});
	stage.update();
	});

	function addMark(x, y, name) {
	if (marks.children.length == stands.length) return;
	var circle = new createjs.Shape();
	circle.graphics.beginFill("red").drawCircle(0, 0, 7);
	circle.x = x;
	circle.y = y;
	circle.addEventListener("click", handleClick);

	marks.addChild(circle);
	circle.setSelected(true);
	stage.update();
	if (marks.children.length == stands.length) alert('All marks placed !');
	}

	function clearMarks() {
	marks.removeAllChildren();
	stage.update();
	}
	document.getElementById('clearMarks').addEventListener("click", clearMarks);

	function deleteMark() {
	if (marks.children[marks.selectedChild].standId !== null)
	stands[marks.children[marks.selectedChild].standId].disabled = false;
	marks.removeChildAt(marks.selectedChild);
	marks.selectedChild = null;
	stage.update();
	}
	document.getElementById('deleteMark').addEventListener("click", deleteMark);

	function setMark() {
	if (marks.selectedChild === null && stands.selectedOptions.length == 0) return;
	var mark = marks.children[marks.selectedChild];
	mark.name = stands.selectedOptions[0].value;
	mark.standId = stands.selectedOptions[0].index;
	document.getElementById('currentMark').value = JSON.stringify({
	'x': mark.x,
	'y': mark.y,
	'name': mark.name
	});
	stands.selectedOptions[0].disabled = true;
	var i = stands.selectedIndex;
	stands.options[++i%stands.options.length].selected = true;
	if (stands.selectedOptions[0].disabled == true) {
	stands.selectedIndex = -1;
	alert('All Done !');
	}
	stage.update();
	}
	document.getElementById('setMark').addEventListener("click", setMark);

	function unsetMark() {
	if (marks.selectedChild === null && marks.children[marks.selectedChild].name == null) return;
	var mark = marks.children[marks.selectedChild];
	mark.name = null;
	stands[mark.standId].disabled = false;
	stands.selectedIndex = mark.standId;
	mark.standId = null;
	stage.update();
	}
	document.getElementById('unsetMark').addEventListener("click", unsetMark);

	function exportMarks() {
	var exports = [];
	for (var i = 0; i < marks.children.length; i++) {
	var child = marks.children[i];
	if (child.name == null) continue;
	exports.push({
	'x': child.x,
	'y': child.y,
	'name': child.name
	});
	};
	document.getElementById('marks').value = JSON.stringify(exports);
	}
	document.getElementById('exportMarks').addEventListener("click", exportMarks);

	function handleClick(e) {
	e.stopPropagation();
	if (e.target.selected == false) {
	e.target.setSelected(true);
	} else {
	e.target.setSelected(false);
	}
	stage.update();
	}