Commit 09639a711f009a5c6a5cd15869fdf77d43c966b9

Add README file
  • README.md 1 +
  • index.html 81 -----------------------------------++++++++++++++++++++++++++++++++++++++++++++++
  • myVector.js 691 -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  • Diff rendering mode:
  • inline
  • side by side

README.md

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

index.html

2<html>2<html>
3 <meta charset="utf-8">3 <meta charset="utf-8">
4 <head>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 <title>Lepakshi Mural</title>5 <title>Lepakshi Mural</title>
26 <meta http-equiv='imagetoolbar' content='no'/>6 <meta http-equiv='imagetoolbar' content='no'/>
27 <link rel="stylesheet" type="text/css" href="bootstrap.css"></link>7 <link rel="stylesheet" type="text/css" href="bootstrap.css"></link>
28 <!--link rel="stylesheet" type="text/css" href="./tree.css"></link-->
29 <style type="text/css"> v\:* {behavior:url(#default#VML);}8 <style type="text/css"> v\:* {behavior:url(#default#VML);}
30 label { display: inline;}9 label { display: inline;}
31 h1 { margin: 0; padding: 6px; border:0; font-size: 20pt; }10 h1 { margin: 0; padding: 6px; border:0; font-size: 20pt; }
……
12 #subheader { height: 12px; text-align: right; font-size: 10px; color: #555;}12 #subheader { height: 12px; text-align: right; font-size: 10px; color: #555;}
13 #map {border: 1px solid #888;}13 #map {border: 1px solid #888;}
14 </style>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</head>15</head>
28<body onload="init();"> 16<body onload="init();">
29 <!--div id="header"><h1>Lepakshi Mural</h1></div-->
30 <div class="fluid-container">17 <div class="fluid-container">
3118
32 <div class="navbar">19 <div class="navbar">
……
54 <button onclick="handler.trigger1();" class="btn btn-small"> Face</button>54 <button onclick="handler.trigger1();" class="btn btn-small"> Face</button>
55 <button onclick="handler.trigger2();" class="btn btn-small">Jewellery</button>55 <button onclick="handler.trigger2();" class="btn btn-small">Jewellery</button>
56 </div>56 </div>
57
57 <p></p>58 <p></p>
59
58 <div id="map"></div>60 <div id="map"></div>
61
59 <div id="subheader">Generated by <a href="http://www.maptiler.org/">MapTiler</a><a href="http://www.klokan.cz/projects/gdal2tiles/">GDAL2Tiles</a>, Copyright &copy; 2008 <a href="http://www.klokan.cz/">Klokan Petr Pridal</a>, <a href="http://www.gdal.org/">GDAL</a> &amp; <a href="http://www.osgeo.org/">OSGeo</a> <a href="http://code.google.com/soc/">GSoC</a>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 &copy; 2008 <a href="http://www.klokan.cz/">Klokan Petr Pridal</a>, <a href="http://www.gdal.org/">GDAL</a> &amp; <a href="http://www.osgeo.org/">OSGeo</a> <a href="http://code.google.com/soc/">GSoC</a>
60 <!-- PLEASE, LET THIS NOTE ABOUT AUTHOR AND PROJECT SOMEWHERE ON YOUR WEBSITE, OR AT LEAST IN THE COMMENT IN HTML. THANK YOU -->63 <!-- PLEASE, LET THIS NOTE ABOUT AUTHOR AND PROJECT SOMEWHERE ON YOUR WEBSITE, OR AT LEAST IN THE COMMENT IN HTML. THANK YOU -->
61 </div>64 </div>
6265
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 </div>72 </div>
6473
65 <script type="text/javascript" >resize()</script>
6674
67 <div id="annotation-tree" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">75 <div id="annotation-tree" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
68 <div class="modal-header">76 <div class="modal-header">
……
102 </div>102 </div>
103 </div>103 </div>
104104
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</body>143</body>
107</html>144</html>

myVector.js

4var mapMaxZoom = 7;4var mapMaxZoom = 7;
5var boxes;5var boxes;
6var box_extents = [6var 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];
10var box_extents1 = [10var box_extents1 = [
11 [4263.0000, -1630.33337, 4559.0000, -1342.33337]
11 [4263.0000, -1630.33337, 4559.0000, -1342.33337]
12];12];
13var myJSON = [];13var myJSON = [];
14var ans = {14var ans = {
15 ans: [],
16 count: 0
17
15 ans: [],
16 count: 0
18};17};
19var user;18var user;
19
20// avoid pink tiles20// avoid pink tiles
21OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;21OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
22OpenLayers.Util.onImageLoadErrorColor = "transparent";22OpenLayers.Util.onImageLoadErrorColor = "transparent";
23var 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 }
23var 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 }
5959
60};60};
61function 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
62function 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 }
9996
100}97}
101function 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
100function 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}
112function onMyFeatureSelect(feature, json, x, y)
113{
110
111function onMyFeatureSelect(feature, json, x, y) {
114 json = "<pre><code>"+ JSON.stringify(json, null, ' ') +"</code></pre>";112 json = "<pre><code>"+ JSON.stringify(json, null, ' ') +"</code></pre>";
115 json = json.replace(/\{\n/g, '').replace(/\}[,]*/g, '').replace(/\[/g, '').replace(/\][,]/g, '').113 json = json.replace(/\{\n/g, '').replace(/\}[,]*/g, '').replace(/\[/g, '').replace(/\][,]/g, '').
116 replace(/\"/g, '');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}
127function 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 }
145125
146 }
126function 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]);
147150
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);
155156
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);
161164
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]);
169169
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});
174172
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 };
177184
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}
206function addLabel(left, top, name)
207{
208 var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
209 renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
210202
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}",
203function addLabel(left, top, name) {
204 var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
205 renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
223206
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}",
236219
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 var labelFeature = new OpenLayers.Feature.Vector(labelOffsetPoint);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{
250244
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 }
245function 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// function onmouse(data){253// function onmouse(data){
257// console.log(data);254// console.log(data);
258// }255// }
259function myfeatureadded(myObj)
260{
261 var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
262 renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
263256
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}",
257function myfeatureadded(myObj) {
258 var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
259 renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
276260
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}",
289273
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}
320317
321function toggleControl(element) {318function toggleControl(element) {
……
329}329}
330330
331function overlay_getTileURL(bounds) {331function 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}
342342
343function getWindowHeight() {343function 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}
350350
351function getWindowWidth() {351function 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}
358358
359function resize() {359function 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
369function allowPan(element) {370function 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 }
376onresize=function(){ resize();};
377function 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
378var onresize = function() {
379 resize();
380};
381
382function 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
410function 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
396var config = {420var 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}