Commit 09639a711f009a5c6a5cd15869fdf77d43c966b9

Anon Ray
Thu Jan 10 16:40:27 IST 2013

Tree SHA1: e816ab8
Parent SHA1: f1de836 (Adding features)
raw diff | raw patch

Add README file

Diff rendering mode:
inline
side by side


		1	A project to facilitate annotation of murals, by breaking the murals into tiles so that they can panned and zoomed.


2	2	<html>
3	3	<meta charset="utf-8">
4	4	<head>
5		<script type="text/javascript">
6		function annotationTree() {
7		$('#annotation-tree').modal();
8		}
9		</script>
10		<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
11		<script type="text/javascript" src="./jit.js"></script>
12		<script type="text/javascript" src="./tree.js"></script>
13		<style type='text/css'>
14		/*#annotation-tree {
15		position:fixed;
16		top:0px;
17		left:0px;
18		width:100%;
19		height:100%;
20		background-color:rgba(0, 0, 0, 0.5);
21		display:none;
22		z-index:99999;
23		}*/
24		</style>
25	5	<title>Lepakshi Mural</title>
26	6	<meta http-equiv='imagetoolbar' content='no'/>
27	7	<link rel="stylesheet" type="text/css" href="bootstrap.css"></link>
28		<!--link rel="stylesheet" type="text/css" href="./tree.css"></link-->
29	8	<style type="text/css"> v\:* {behavior:url(#default#VML);}
30	9	label { display: inline;}
31	10	h1 { margin: 0; padding: 6px; border:0; font-size: 20pt; }
…	…
12	12	#subheader { height: 12px; text-align: right; font-size: 10px; color: #555;}
13	13	#map {border: 1px solid #888;}
14	14	</style>
15		<script src="http://www.openlayers.org/api/2.11/OpenLayers.js" type="text/javascript"></script>
16		<script type="text/javascript" src="myVector.js"></script>
17		<script type="text/javascript" src="bootstrap.js"></script>
18		<script type="text/javascript">
19		function treeClose() {
20		$('#annotation-tree').modal('hide');
21		attribs["character"] = $("#character-value").text();
22		attribs["material"] = $("#material-value").text();
23		myJSON.push(attribs);
24		$("#publish").attr("disabled", false);
25		}
26		</script>
27	15	</head>
28	16	<body onload="init();">
29		<!--div id="header"><h1>Lepakshi Mural</h1></div-->
30	17	<div class="fluid-container">
31	18
32	19	<div class="navbar">
…	…
54	54	<button onclick="handler.trigger1();" class="btn btn-small"> Face</button>
55	55	<button onclick="handler.trigger2();" class="btn btn-small">Jewellery</button>
56	56	</div>
	57
57	58	<p></p>
	59
58	60	<div id="map"></div>
	61
59	62	<div id="subheader">Generated by <a href="http://www.maptiler.org/">MapTiler</a><a href="http://www.klokan.cz/projects/gdal2tiles/">GDAL2Tiles</a>, Copyright © 2008 <a href="http://www.klokan.cz/">Klokan Petr Pridal</a>, <a href="http://www.gdal.org/">GDAL</a> & <a href="http://www.osgeo.org/">OSGeo</a> <a href="http://code.google.com/soc/">GSoC</a>
60	63	<!-- PLEASE, LET THIS NOTE ABOUT AUTHOR AND PROJECT SOMEWHERE ON YOUR WEBSITE, OR AT LEAST IN THE COMMENT IN HTML. THANK YOU -->
61	64	</div>
62	65
	66	<div class="edit-json">
	67	<button id="edit-json-btn" class="btn" onclick="editJSON();">Edit JSON manually</button>
	68	<textarea rows="3" id="edit-json" style="display: none;"></textarea>
	69	<button class="btn" id="save-json" style="display: none;" onclick="saveJSON();">Save</button>
	70	</div>
	71
63	72	</div>
64	73
65		<script type="text/javascript" >resize()</script>
66	74
67	75	<div id="annotation-tree" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
68	76	<div class="modal-header">
…	…
102	102	</div>
103	103	</div>
104	104
	105	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	106	<script type="text/javascript" src="jit.js"></script>
	107	<script type="text/javascript" src="tree.js"></script>
	108	<script src="http://www.openlayers.org/api/2.11/OpenLayers.js" type="text/javascript"></script>
	109	<script type="text/javascript" src="myVector.js"></script>
	110	<script type="text/javascript" src="bootstrap.js"></script>
	111	<script type="text/javascript">
	112	function annotationTree() {
	113	$('#annotation-tree').modal();
	114	$('#edit-json').hide();
	115	$('#edit-json-btn').show();
	116	}
	117	function editJSON() {
	118	$('#edit-json').show();
	119	$('#save-json').show();
	120	$('#edit-json-btn').hide();
	121	$('#edit-json').val(JSON.stringify(myJSON));
	122	}
	123	function saveJSON() {
	124	$('#edit-json').hide();
	125	$('#save-json').hide();
	126	$('#edit-json-btn').show();
	127	try {
	128	myJSON = JSON.parse($('#edit-json').val());
	129	} catch(e) {
	130	alert('The JSON you entered is invalid. Please try again');
	131	myJSON = [];
	132	}
	133	}
	134	function treeClose() {
	135	$('#annotation-tree').modal('hide');
	136	attribs["character"] = $("#character-value").text();
	137	attribs["material"] = $("#material-value").text();
	138	myJSON.push(attribs);
	139	$("#publish").attr("disabled", false);
	140	}
	141	</script>
105	142
106	143	</body>
107	144	</html>


4	4	var mapMaxZoom = 7;
5	5	var boxes;
6	6	var box_extents = [
7		[3759.0000, -1614.33337, 4079.0000, -1274.33337],
8		[3719, -1825, 3783, -1771]
	7	[3759.0000, -1614.33337, 4079.0000, -1274.33337],
	8	[3719, -1825, 3783, -1771]
9	9	];
10	10	var box_extents1 = [
11		[4263.0000, -1630.33337, 4559.0000, -1342.33337]
	11	[4263.0000, -1630.33337, 4559.0000, -1342.33337]
12	12	];
13	13	var myJSON = [];
14	14	var ans = {
15		ans: [],
16		count: 0
17
	15	ans: [],
	16	count: 0
18	17	};
19	18	var user;
	19
20	20	// avoid pink tiles
21	21	OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
22	22	OpenLayers.Util.onImageLoadErrorColor = "transparent";
23		var handler={
24		check: false,
25		check1: false,
26		check2: false,
27		trigger: function() {
28		myjson = {"temple":[
29		{"period": "16th century"},
30		{"location":"13.80338 - 77.61067"},
31		{"sthapati":"Shivakumar"},
32		{"innerloc": "MaharangaMandapa"}
33		],
34		"size": "311110px X 4668 px",
35		"narrative": "Narrative",
36		"muralTradition": "XYZ",
37		"muralTechnique": "Foo",
38		"muralContent": "Bar"
39		};
40		onMyFeatureSelect(map,myjson,15555, -2334);
41		},
42		trigger1: function() {
43		myjson = {"face":[
44		{"character":"Shiva"}
45		],
46		"size": "310px X 460px" // jewellery:earring; material: silver,
47		};
48		onMyFeatureSelect(map,myjson,3915,- 1438);
49		},
50		trigger2: function() {
51		myjson = {"ornament":[
52		{"jewelery":"Pendant"},
53		{"Material":"Silver"}
54		],
55		"size": "50px X 90px"
56		};
57		onMyFeatureSelect(map,myjson,3751,-1802)
58		}
	23	var handler = {
	24	check: false,
	25	check1: false,
	26	check2: false,
	27	trigger: function() {
	28	myjson = {"temple":[
	29	{"period": "16th century"},
	30	{"location":"13.80338 - 77.61067"},
	31	{"sthapati":"Shivakumar"},
	32	{"innerloc": "MaharangaMandapa"}
	33	],
	34	"size": "311110px X 4668 px",
	35	"narrative": "Narrative",
	36	"muralTradition": "XYZ",
	37	"muralTechnique": "Foo",
	38	"muralContent": "Bar"
	39	};
	40	onMyFeatureSelect(map,myjson,15555, -2334);
	41	},
	42	trigger1: function() {
	43	myjson = {"face":[
	44	{"character":"Shiva"}
	45	],
	46	"size": "310px X 460px" // jewellery:earring; material: silver,
	47	};
	48	onMyFeatureSelect(map,myjson,3915,- 1438);
	49	},
	50	trigger2: function() {
	51	myjson = {"ornament":[
	52	{"jewelery":"Pendant"},
	53	{"Material":"Silver"}
	54	],
	55	"size": "50px X 90px"
	56	};
	57	onMyFeatureSelect(map,myjson,3751,-1802)
	58	}
59	59
60	60	};
61		function onFeatureSelect(feature)
62		{
63		for(var i in ans.ans)
64		{
65		if(feature.geometry.bounds['left'] == ans.ans[i]['left'] && feature.geometry.bounds['right'] == ans.ans[i]['right'] && feature.geometry.bounds['top'] == ans.ans[i]['top'] && feature.geometry.bounds['bottom'] == ans.ans[i]['bottom'])
66		{
67		str = {};
68		if(ans.ans[i]['character'])
69		str['character'] = ans.ans[i]['character'];
70		else
71		{
72		str['material'] = ans.ans[i]['material'];
73		// str['jewellery'] = ans.ans[i]['jewellery']
74		}
75		z = new OpenLayers.Popup.FramedCloud(
76		"test",
77		feature.geometry.getBounds().getCenterLonLat(),
78		new OpenLayers.Size(640,480),
79		JSON.stringify(str,null,' '),null,true);
80		feature.popup = z;
81		z.panMapIfOutOfView = true;
82		map.addPopup(z);
83		break;
84		}
85		else{
86		if(i == ans.count-1)
87		{
88		z = new OpenLayers.Popup.FramedCloud(
89		"test",
90		feature.geometry.getBounds().getCenterLonLat(),
91		new OpenLayers.Size(640,480),
92		'<iframe width="480" height="360" src="http://www.youtube.com/embed/WwNUnmZ_aww" frameborder="0" allowfullscreen></iframe>',null,true);
93		feature.popup = z;
94		z.panMapIfOutOfView = true;
95		map.addPopup(z);
96		}
97		}
	61
	62	function onFeatureSelect(feature) {
	63	for(var i in ans.ans) {
	64	if(feature.geometry.bounds['left'] == ans.ans[i]['left'] && feature.geometry.bounds['right'] == ans.ans[i]['right'] && feature.geometry.bounds['top'] == ans.ans[i]['top'] && feature.geometry.bounds['bottom'] == ans.ans[i]['bottom']) {
	65	str = {};
	66	if(ans.ans[i]['character']) {
	67	str['character'] = ans.ans[i]['character'];
	68	}
	69	else {
	70	str['material'] = ans.ans[i]['material'];
	71	// str['jewellery'] = ans.ans[i]['jewellery']
	72	}
	73	z = new OpenLayers.Popup.FramedCloud(
	74	"test",
	75	feature.geometry.getBounds().getCenterLonLat(),
	76	new OpenLayers.Size(640,480),
	77	JSON.stringify(str,null,' '),null,true);
	78	feature.popup = z;
	79	z.panMapIfOutOfView = true;
	80	map.addPopup(z);
	81	break;
98	82	}
	83	else {
	84	if(i == ans.count-1) {
	85	z = new OpenLayers.Popup.FramedCloud(
	86	"test",
	87	feature.geometry.getBounds().getCenterLonLat(),
	88	new OpenLayers.Size(640,480),
	89	'<iframe width="480" height="360" src="http://www.youtube.com/embed/WwNUnmZ_aww" frameborder="0" allowfullscreen></iframe>',null,true);
	90	feature.popup = z;
	91	z.panMapIfOutOfView = true;
	92	map.addPopup(z);
	93	}
	94	}
	95	}
99	96
100	97	}
101		function onFeatureSelect1(feature)
102		{
103		z = new OpenLayers.Popup.FramedCloud(
104		"test",
105		feature.geometry.getBounds().getCenterLonLat(),
106		new OpenLayers.Size(640,480),
107		'<iframe width="480" height="360" src="http://www.youtube.com/embed/WwNUnmZ_aww" frameborder="0" allowfullscreen></iframe>',null,true);
108		feature.popup = z;
109		z.panMapIfOutOfView = true;
110		map.addPopup(z);
	98
	99
	100	function onFeatureSelect1(feature) {
	101	z = new OpenLayers.Popup.FramedCloud(
	102	"test",
	103	feature.geometry.getBounds().getCenterLonLat(),
	104	new OpenLayers.Size(640,480),
	105	'<iframe width="480" height="360" src="http://www.youtube.com/embed/WwNUnmZ_aww" frameborder="0" allowfullscreen></iframe>',null,true);
	106	feature.popup = z;
	107	z.panMapIfOutOfView = true;
	108	map.addPopup(z);
111	109	}
112		function onMyFeatureSelect(feature, json, x, y)
113		{
	110
	111	function onMyFeatureSelect(feature, json, x, y) {
114	112	json = "<pre><code>"+ JSON.stringify(json, null, ' ') +"</code></pre>";
115	113	json = json.replace(/\{\n/g, '').replace(/\}[,]*/g, '').replace(/\[/g, '').replace(/\][,]/g, '').
116	114	replace(/\"/g, '');
117		z = new OpenLayers.Popup.FramedCloud(
118		"test",
119		new OpenLayers.LonLat(x, y), // Always should be at the center of the map, not the center of viewport.
120		new OpenLayers.Size(640,480),
121		json
122		,null,true);
123		feature.popup = z;
124		z.panMapIfOutOfView = true;
125		map.addPopup(z);
	115	z = new OpenLayers.Popup.FramedCloud(
	116	"test",
	117	new OpenLayers.LonLat(x, y), // Always should be at the center of the map, not the center of viewport.
	118	new OpenLayers.Size(640,480),
	119	json
	120	,null,true);
	121	feature.popup = z;
	122	z.panMapIfOutOfView = true;
	123	map.addPopup(z);
126	124	}
127		function init(){
128		var options = {
129		controls: [],
130		maxExtent: new OpenLayers.Bounds( 0.0, -4668.0, 31110.0, 0.0 ),
131		maxResolution: 128.000000,
132		numZoomLevels: 8
133		};
134		map = new OpenLayers.Map('map', options);
135		$.get(config.indexer+"/fetch", function(data){
136		return;
137		if (data.length != 0)
138		{
139		ans.ans = JSON.parse(data);
140		for(var i in ans.ans)
141		{
142		ans.count+=1;
143		makeBoxes(ans.ans[i]);
144		}
145	125
146		}
	126	function init() {
	127	var options = {
	128	controls: [],
	129	maxExtent: new OpenLayers.Bounds( 0.0, -4668.0, 31110.0, 0.0 ),
	130	maxResolution: 128.000000,
	131	numZoomLevels: 8
	132	};
	133	map = new OpenLayers.Map('map', options);
	134	$.get(config.indexer+"/fetch", function(data) {
	135	return;
	136	if (data.length != 0) {
	137	ans.ans = JSON.parse(data);
	138	for(var i in ans.ans) {
	139	ans.count+=1;
	140	makeBoxes(ans.ans[i]);
	141	}
	142	}
	143	});
	144	var layer = new OpenLayers.Layer.TMS( "TMS Layer","",
	145	{ url: '', serviceVersion: '.', layername: '.', alpha: true,
	146	type: 'png', getURL: overlay_getTileURL
	147	});
	148	boxes = new OpenLayers.Layer.Vector( "Boxes" );
	149	map.addLayers([layer, boxes]);
147	150
148		});
149		var layer = new OpenLayers.Layer.TMS( "TMS Layer","",
150		{ url: '', serviceVersion: '.', layername: '.', alpha: true,
151		type: 'png', getURL: overlay_getTileURL
152		});
153		boxes = new OpenLayers.Layer.Vector( "Boxes" );
154		map.addLayers([layer, boxes]);
	151	boxes.events.register('featureadded', boxes, myfeatureadded);
	152	box2 = new OpenLayers.Layer.Vector( "Boxes" );
	153	for (var i = 0; i < box_extents.length; i++) {
	154	ext = box_extents[i];
	155	bounds = OpenLayers.Bounds.fromArray(ext);
155	156
156		boxes.events.register('featureadded', boxes, myfeatureadded);
157		box2 = new OpenLayers.Layer.Vector( "Boxes" );
158		for (var i = 0; i < box_extents.length; i++) {
159		ext = box_extents[i];
160		bounds = OpenLayers.Bounds.fromArray(ext);
	157	box = new OpenLayers.Feature.Vector(bounds.toGeometry());
	158	box2.addFeatures(box);
	159	}
	160	box3 = new OpenLayers.Layer.Vector( "Boxes");
	161	for (var i = 0; i < box_extents1.length; i++) {
	162	ext = box_extents1[i];
	163	bounds = OpenLayers.Bounds.fromArray(ext);
161	164
162		box = new OpenLayers.Feature.Vector(bounds.toGeometry());
163		box2.addFeatures(box);
164		}
165		box3 = new OpenLayers.Layer.Vector( "Boxes");
166		for (var i = 0; i < box_extents1.length; i++) {
167		ext = box_extents1[i];
168		bounds = OpenLayers.Bounds.fromArray(ext);
	165	box = new OpenLayers.Feature.Vector(bounds.toGeometry());
	166	box3.addFeatures(box);
	167	}
	168	map.addLayers([box2, box3]);
169	169
170		box = new OpenLayers.Feature.Vector(bounds.toGeometry());
171		box3.addFeatures(box);
172		}
173		map.addLayers([box2, box3]);
	170	selectControl = new OpenLayers.Control.SelectFeature(box3,
	171	{onSelect: onFeatureSelect});
174	172
175		selectControl = new OpenLayers.Control.SelectFeature(box3,
176		{onSelect: onFeatureSelect});
	173	drawControls = {
	174	box : new OpenLayers.Control.DrawFeature(boxes,
	175	OpenLayers.Handler.RegularPolygon, {
	176	handlerOptions: {
	177	sides: 4,
	178	irregular: true
	179	}
	180	}
	181	),
	182	select: selectControl
	183	};
177	184
178		drawControls = {
179		box : new OpenLayers.Control.DrawFeature(boxes,
180		OpenLayers.Handler.RegularPolygon, {
181		handlerOptions: {
182		sides: 4,
183		irregular: true
184		}
185		}
186		),
187		select: selectControl
188		};
189
190		map.zoomToExtent( mapBounds );
191		for(var key in drawControls){
192		map.addControl(drawControls[key]);
193		}
194		drawControls['select'].activate();
195		addLabel('3759.0000','-1274.33337','Face');
196		addLabel('3719','-1771','Jewelery');
197		addLabel('4263.0000','-1345.33337', 'Video');
198		map.addControl(new OpenLayers.Control.PanZoomBar());
199		map.addControl(new OpenLayers.Control.MousePosition());
200		map.addControl(new OpenLayers.Control.MouseDefaults());
201		map.addControl(new OpenLayers.Control.KeyboardDefaults());
202		map.addControl(new OpenLayers.Control.LayerSwitcher());
203		map.zoomToExtent( mapBounds );
204		//document.getElementById('noneToggle').checked = true;
	185	map.zoomToExtent( mapBounds );
	186	for(var key in drawControls){
	187	map.addControl(drawControls[key]);
	188	}
	189	drawControls['select'].activate();
	190	addLabel('3759.0000','-1274.33337','Face');
	191	addLabel('3719','-1771','Jewelery');
	192	addLabel('4263.0000','-1345.33337', 'Video');
	193	map.addControl(new OpenLayers.Control.PanZoomBar());
	194	map.addControl(new OpenLayers.Control.MousePosition());
	195	map.addControl(new OpenLayers.Control.MouseDefaults());
	196	map.addControl(new OpenLayers.Control.KeyboardDefaults());
	197	map.addControl(new OpenLayers.Control.LayerSwitcher());
	198	map.zoomToExtent( mapBounds );
	199	//document.getElementById('noneToggle').checked = true;
	200	resize();
205	201	}
206		function addLabel(left, top, name)
207		{
208		var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
209		renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
210	202
211		vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
212		styleMap: new OpenLayers.StyleMap({'default':{
213		strokeColor: "#000",
214		strokeOpacity: 1,
215		strokeWidth: 3,
216		fillColor: "#FFF",
217		fillOpacity: 1,
218		pointRadius: 2,
219		pointerEvents: "visiblePainted",
220		// label with \n linebreaks
221		label : "${name}\n",
222		//\nage: ${age}",
	203	function addLabel(left, top, name) {
	204	var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
	205	renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
223	206
224		fontColor: "#000",
225		fontSize: "16px",
226		fontFamily: "Georgia, Serif",
227		fontWeight: "bold",
228		labelAlign: "${align}",
229		labelXOffset: "${xOffset}",
230		labelYOffset: "${yOffset}",
231		labelOutlineColor: "white",
232		labelOutlineWidth: 3
233		}}),
234		renderers: renderer
235		});
	207	vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
	208	styleMap: new OpenLayers.StyleMap({'default':{
	209	strokeColor: "#000",
	210	strokeOpacity: 1,
	211	strokeWidth: 3,
	212	fillColor: "#FFF",
	213	fillOpacity: 1,
	214	pointRadius: 2,
	215	pointerEvents: "visiblePainted",
	216	// label with \n linebreaks
	217	label : "${name}\n",
	218	//\nage: ${age}",
236	219
237		var labelOffsetPoint = new OpenLayers.Geometry.Point(left, top)
	220	fontColor: "#000",
	221	fontSize: "16px",
	222	fontFamily: "Georgia, Serif",
	223	fontWeight: "bold",
	224	labelAlign: "${align}",
	225	labelXOffset: "${xOffset}",
	226	labelYOffset: "${yOffset}",
	227	labelOutlineColor: "white",
	228	labelOutlineWidth: 3
	229	}}),
	230	renderers: renderer
	231	});
	232
	233	var labelOffsetPoint = new OpenLayers.Geometry.Point(left, top)
238	234	var labelFeature = new OpenLayers.Feature.Vector(labelOffsetPoint);
239		labelFeature.attributes = {
240		align: 'cm',
241		favColor: 'blue',
242		};
243		labelFeature.attributes['name'] = name;
244		map.addLayer(vectorLayer);
245		vectorLayer.drawFeature(labelFeature);
246		vectorLayer.addFeatures([labelFeature]);
	235	labelFeature.attributes = {
	236	align: 'cm',
	237	favColor: 'blue',
	238	};
	239	labelFeature.attributes['name'] = name;
	240	map.addLayer(vectorLayer);
	241	vectorLayer.drawFeature(labelFeature);
	242	vectorLayer.addFeatures([labelFeature]);
247	243	}
248		function makeBoxes(x)
249		{
250	244
251		bounds = new OpenLayers.Bounds(x['left'], x['bottom'], x['right'], x['top']);
252		box = new OpenLayers.Feature.Vector(bounds.toGeometry());
253		box3.addFeatures(box);
254		addLabel(x['left'],x['top'],x['name']);
255		}
	245	function makeBoxes(x) {
	246
	247	bounds = new OpenLayers.Bounds(x['left'], x['bottom'], x['right'], x['top']);
	248	box = new OpenLayers.Feature.Vector(bounds.toGeometry());
	249	box3.addFeatures(box);
	250	addLabel(x['left'],x['top'],x['name']);
	251	}
	252
256	253	// function onmouse(data){
257	254	// console.log(data);
258	255	// }
259		function myfeatureadded(myObj)
260		{
261		var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
262		renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
263	256
264		vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
265		styleMap: new OpenLayers.StyleMap({'default':{
266		strokeColor: "#000",
267		strokeOpacity: 1,
268		strokeWidth: 3,
269		fillColor: "#FF5500",
270		fillOpacity: 0.5,
271		pointRadius: 2,
272		pointerEvents: "visiblePainted",
273		// label with \n linebreaks
274		label : "${name}\n",
275		//\nage: ${age}",
	257	function myfeatureadded(myObj) {
	258	var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
	259	renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
276	260
277		fontColor: "#000",
278		fontSize: "16px",
279		fontFamily: "Georgia, Serif",
280		fontWeight: "bold",
281		labelAlign: "${align}",
282		labelXOffset: "${xOffset}",
283		labelYOffset: "${yOffset}",
284		labelOutlineColor: "white",
285		labelOutlineWidth: 3
286		}}),
287		renderers: renderer
288		});
	261	vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
	262	styleMap: new OpenLayers.StyleMap({'default':{
	263	strokeColor: "#000",
	264	strokeOpacity: 1,
	265	strokeWidth: 3,
	266	fillColor: "#FF5500",
	267	fillOpacity: 0.5,
	268	pointRadius: 2,
	269	pointerEvents: "visiblePainted",
	270	// label with \n linebreaks
	271	label : "${name}\n",
	272	//\nage: ${age}",
289	273
290		var labelOffsetPoint = new OpenLayers.Geometry.Point(myObj.feature.geometry.bounds.left, myObj.feature.geometry.bounds.top);
291		var labelFeature = new OpenLayers.Feature.Vector(labelOffsetPoint);
292		labelFeature.attributes = {
293		align: 'cm',
294		favColor: 'blue',
	274	fontColor: "#000",
	275	fontSize: "16px",
	276	fontFamily: "Georgia, Serif",
	277	fontWeight: "bold",
	278	labelAlign: "${align}",
	279	labelXOffset: "${xOffset}",
	280	labelYOffset: "${yOffset}",
	281	labelOutlineColor: "white",
	282	labelOutlineWidth: 3
	283	}}),
	284	renderers: renderer
	285	});
	286
	287	var labelOffsetPoint = new OpenLayers.Geometry.Point(myObj.feature.geometry.bounds.left, myObj.feature.geometry.bounds.top);
	288	var labelFeature = new OpenLayers.Feature.Vector(labelOffsetPoint);
	289	labelFeature.attributes = {
	290	align: 'cm',
	291	favColor: 'blue',
	292	};
	293	labelFeature.attributes['name'] = prompt("Enter a label for the annotation..");
	294	user = prompt("Enter your name");
	295	if(labelFeature.attributes['name'])
	296	{
	297	topValue = myObj.feature.geometry.bounds.top;
	298	bottom = myObj.feature.geometry.bounds.bottom;
	299	left = myObj.feature.geometry.bounds.left;
	300	right = myObj.feature.geometry.bounds.right;
	301	name = labelFeature.attributes['name'];
	302	map.addLayer(vectorLayer);
	303	vectorLayer.drawFeature(labelFeature);
	304	vectorLayer.addFeatures([labelFeature]);
	305	annotationTree();
	306	attribs = {
	307	"top": topValue,
	308	"bottom": bottom,
	309	"right": right,
	310	"left": left,
	311	"name": name
295	312	};
296		labelFeature.attributes['name'] = prompt("Enter a label for the annotation..");
297		user = prompt("Enter your name");
298		if(labelFeature.attributes['name'])
299		{
300		topValue = myObj.feature.geometry.bounds.top;
301		bottom = myObj.feature.geometry.bounds.bottom;
302		left = myObj.feature.geometry.bounds.left;
303		right = myObj.feature.geometry.bounds.right;
304		name = labelFeature.attributes['name'];
305		map.addLayer(vectorLayer);
306		vectorLayer.drawFeature(labelFeature);
307		vectorLayer.addFeatures([labelFeature]);
308		annotationTree();
309		attribs = {
310		"top": topValue,
311		"bottom": bottom,
312		"right": right,
313		"left": left,
314		"name": name
315		};
316		}
317		else
318		myObj.feature.destroy();
	313	}
	314	else
	315	myObj.feature.destroy();
319	316	}
320	317
321	318	function toggleControl(element) {
…	…
329	329	}
330	330
331	331	function overlay_getTileURL(bounds) {
332		var res = this.map.getResolution();
333		var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
334		var y = Math.round((bounds.bottom - this.maxExtent.bottom) / (res * this.tileSize.h));
335		var z = this.map.getZoom();
336		if (x >= 0 && y >= 0) {
337		return this.url + z + "/" + x + "/" + y + "." + this.type;
338		} else {
339		return "http://www.maptiler.org/img/none.png";
340		}
	332	var res = this.map.getResolution();
	333	var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
	334	var y = Math.round((bounds.bottom - this.maxExtent.bottom) / (res * this.tileSize.h));
	335	var z = this.map.getZoom();
	336	if (x >= 0 && y >= 0) {
	337	return this.url + z + "/" + x + "/" + y + "." + this.type;
	338	} else {
	339	return "http://www.maptiler.org/img/none.png";
	340	}
341	341	}
342	342
343	343	function getWindowHeight() {
344		if (self.innerHeight) return self.innerHeight;
345		if (document.documentElement && document.documentElement.clientHeight)
346		return document.documentElement.clientHeight;
347		if (document.body) return document.body.clientHeight;
348		return 0;
	344	if (self.innerHeight) return self.innerHeight;
	345	if (document.documentElement && document.documentElement.clientHeight)
	346	return document.documentElement.clientHeight;
	347	if (document.body) return document.body.clientHeight;
	348	return 0;
349	349	}
350	350
351	351	function getWindowWidth() {
352		if (self.innerWidth) return self.innerWidth;
353		if (document.documentElement && document.documentElement.clientWidth)
354		return document.documentElement.clientWidth;
355		if (document.body) return document.body.clientWidth;
356		return 0;
	352	if (self.innerWidth) return self.innerWidth;
	353	if (document.documentElement && document.documentElement.clientWidth)
	354	return document.documentElement.clientWidth;
	355	if (document.body) return document.body.clientWidth;
	356	return 0;
357	357	}
358	358
359	359	function resize() {
360		var map = document.getElementById("map");
361		var header = document.getElementById("header");
362		var subheader = document.getElementById("subheader");
363		map.style.height = (getWindowHeight()-180) +"px";
364		map.style.width = (getWindowWidth()-60) + "px";
365		//header.style.width = (getWindowWidth()-60) + "px";
366		subheader.style.width = (getWindowWidth()-60) + "px";
367		if (map.updateSize) { map.updateSize(); };
	360	var map = document.getElementById("map");
	361	var header = document.getElementById("header");
	362	var subheader = document.getElementById("subheader");
	363	map.style.height = (getWindowHeight()-180) +"px";
	364	map.style.width = (getWindowWidth()-60) + "px";
	365	//header.style.width = (getWindowWidth()-60) + "px";
	366	subheader.style.width = (getWindowWidth()-60) + "px";
	367	if (map.updateSize) { map.updateSize(); };
368	368	}
	369
369	370	function allowPan(element) {
370		var stop = !element.checked;
371		for(var key in drawControls){
372		drawControls[key].handler.stopDown = stop;
373		drawControls[key].handler.stopUp = stop;
374		}
375		}
376		onresize=function(){ resize();};
377		function publish()
378		{
379		if(myJSON.length < 1){
380		return;}
381		for(var i in myJSON){
382		jString = JSON.stringify(myJSON[i]).replace(/\{/g, '').replace(/\}[,]*/g, '').replace(/\[/g, '').replace(/\][,]/g, '').
383		replace(/\"/g, '');
384		myJSON[i].text = ' annotated '+window.location.href+"#[top="+myJSON[i].top+",bottom="+myJSON[i].bottom+",left="+myJSON[i].left+",right="+myJSON[i].right+"] as "+myJSON[i].name+" "+jString+" #swtr"; //The string which gets posted as a tweet.
385		myJSON[i].text = encodeURIComponent(myJSON[i].text);
386		myJSON[i].user = user; // User need not know the modification to the JSON.
387		myJSON[i].title = 'Annotation for '+window.location.href;
388		}
389		$.post(config.indexer+'/submit', JSON.stringify(myJSON),function(){
390		$.post(config.postTweetUrl, {"data":JSON.stringify(myJSON)}, function(data) {
391		$('#posted').show();
392		myJSON = [];
393		});
394		});
	371	var stop = !element.checked;
	372	for(var key in drawControls){
	373	drawControls[key].handler.stopDown = stop;
	374	drawControls[key].handler.stopUp = stop;
	375	}
395	376	}
	377
	378	var onresize = function() {
	379	resize();
	380	};
	381
	382	function publish() {
	383	if(myJSON.length < 1) {
	384	return;
	385	}
	386	for(var i in myJSON) {
	387	//clean up the JSON to post as tweet
	388	jString = JSON.stringify(myJSON[i]).replace(/\{/g, '').replace(/\}[,]*/g, '').replace(/\[/g, '').
	389	replace(/\][,]/g, '').replace(/\"/g, '');
	390
	391	// construct the tweet string
	392	myJSON[i].text = ' annotated '+ window.location.href + "#[top="+myJSON[i].top +
	393	",bottom=" + myJSON[i].bottom + ",left=" + myJSON[i].left + ",right=" +
	394	myJSON[i].right + "] as " + myJSON[i].name + " " + jString + " #swtr";
	395
	396	myJSON[i].text = encodeURIComponent(myJSON[i].text);
	397	myJSON[i].user = user; // User need not know the modification to the JSON.
	398
	399	myJSON[i].title = 'Annotation for '+window.location.href;
	400	}
	401
	402	$.post(config.indexer+'/submit', JSON.stringify(myJSON),function() {
	403	$.post(config.postTweetUrl, {"data":JSON.stringify(myJSON)}, function(data) {
	404	$('#posted').show();
	405	myJSON = [];
	406	});
	407	});
	408	}
	409
	410	function publish2() {
	411	if(myJSON.length < 1) {
	412	return;
	413	}
	414	console.log(myJSON);
	415	$.post(config.postTweetUrl, {'data': JSON.stringify(myJSON)}, function() {
	416	console.log('posted to ', config.postTweetUrl);
	417	});
	418	}
	419
396	420	var config = {
397		'postTweetUrl':'http://127.0.0.1:5000/add',
398		'indexer':'http://192.168.100.56:82'
	421	'postTweetUrl':'http://demo.swtr.us/add',
	422	'indexer':'http://192.168.100.56:82'
399	423	}

Commit 09639a711f009a5c6a5cd15869fdf77d43c966b9

Gitorious