MapContourEditor/index.html at master · evalexdy/MapContourEditor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE>
<html>
<head>
	<title>MapContour</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<script language="javascript" src="js/jquery-1.11.2.min.js"></script>
	<script src="js/mapcontoureditor.js"></script>

</head>
<body>
	<input type="button" id="magicStick" value="Disable magic stick">
	<input type="button" id="getCoords" value="Get contour data">
	<input type="button" id="destroy" value="Destroy">
	<br />
<<<<<<< HEAD
	<img src="ex_my.png" class="contourmap"><br />
=======
	<img src="ex_my.png" class="contourmap">
	<br />
>>>>>>> origin/master
	<div style="width:300px; height:150px; background:#eee; overflow:auto;" id="coord_data"></div>

	<script type="text/javascript">
		$(document).ready(function(){
			setTimeout(function(){initMapContour()},500);
		});
		function initMapContour(){
			//Delayed init, because we have to make sure, that all images are loaded
			$('.contourmap').mapContourEditor({contour:[55,63,18,87,12,34]});

			$('#magicStick').click(function(){
				//Set magic stick and change button #magicStick caption
				$('.contourmap').mapContourEditor('setData',{magicStick:1});

				if($('.contourmap').mapContourEditor('getData','magicStick')==1){
					$('#magicStick').attr('value','Disable magic stick');
				} else {
					$('#magicStick').attr('value','Enable magic stick');
				}
			});
			$('#getCoords').click(function(){
				//Get current contour coordinates
				$('#coord_data').html($('.contourmap').mapContourEditor('getData','contour').join());
			});

			$('.contourmap').on('magicStickChange',function(){
				//if event magicStickChange has occured - change button #magickStick caption
				if($('.contourmap').mapContourEditor('getData','magicStick')==1){
					$('#magicStick').attr('value','Disable magic stick');
				} else {
					$('#magicStick').attr('value','Enable magic stick');
				}
			});

			$('#getCoords').click(function(){
				//Get current contour coordinates
				$('#coord_data').html($('.contourmap').mapContourEditor('getData','contour').join());
			});

			$('#destroy').click(function(){
				$('.contourmap').mapContourEditor('destroy');
			});
		}
	</script>
</body>
</html>