|
0
|
1 //geoserver url
|
|
|
2 var url="http://geoserver.mpiwg-berlin.mpg.de/geoserver/China_Monograph_Project/ows";
|
|
|
3 //"name": "layer name"
|
|
|
4 var overlayArray=[{name:"provincial distribution of local monographs",
|
|
|
5 file:"China_Monograph_Project:monograph_distribution_prov",
|
|
|
6 preload:true
|
|
|
7 },
|
|
|
8 {
|
|
|
9 name:"test",
|
|
|
10 file:"China_Monograph_Project:v5_citas90_pref_pgn_utf",
|
|
|
11 preload:false
|
|
|
12 },
|
|
|
13 {
|
|
|
14 name:"provincial capitals",
|
|
|
15 file:"China_Monograph_Project:all_monographs_capital_points",
|
|
|
16 preload:false
|
|
|
17 }];
|
|
|
18 var datasetArray=[{name:"distribution of local monographs",
|
|
|
19 file:"./datasets/books_coordinates.csv",
|
|
|
20 preload:true
|
|
|
21 },
|
|
|
22 {
|
|
|
23 name:"distribution of local monographs (by province)",
|
|
|
24 file:"./datasets/provincial_capital_coordinates.csv",
|
|
|
25 preload:false
|
|
|
26 }];
|
|
|
27 var backgroundMapArray=[{
|
|
|
28 name: 'Barrington Roman Empire',
|
|
|
29 url: 'http://pelagios.dme.ait.ac.at/tilesets/imperium/${z}/${x}/${y}.png',
|
|
|
30 type:'XYZ',
|
|
|
31 attribution: "(c) Barrington Roman Empiry, <a href='http://pelagios.dme.ait.ac.at/maps/greco-roman/'>Pelagios</a>"
|
|
|
32 }];
|
|
|
33 var colorArray=[{//blue
|
|
|
34 r1 : 0,
|
|
|
35 g1 : 128,
|
|
|
36 b1 : 255,
|
|
|
37 r0 : 205,
|
|
|
38 g0 : 230,
|
|
|
39 b0 : 255
|
|
|
40 },{//red
|
|
|
41 r1 : 255,
|
|
|
42 g1 : 84,
|
|
|
43 b1 : 22,
|
|
|
44 r0 : 255,
|
|
|
45 g0 : 218,
|
|
|
46 b0 : 205
|
|
|
47 }, {//purple
|
|
|
48 r1 : 132,
|
|
|
49 g1 : 0,
|
|
|
50 b1 : 255,
|
|
|
51 r0 : 231,
|
|
|
52 g0 : 205,
|
|
|
53 b0 : 255
|
|
|
54 }, {//green
|
|
|
55 r1 : 0,
|
|
|
56 g1 : 225,
|
|
|
57 b1 : 116,
|
|
|
58 r0 : 180,
|
|
|
59 g0 : 225,
|
|
|
60 b0 : 204
|
|
|
61 }, {//yellow
|
|
|
62 r1 : 255,
|
|
|
63 g1 : 191,
|
|
|
64 b1 : 0,
|
|
|
65 r0 : 255,
|
|
|
66 g0 : 243,
|
|
|
67 b0 : 205
|
|
|
68 }];
|
|
|
69 var map, table,timeline,pieChart;
|
|
|
70 var urlParameter=new Array();
|
|
|
71 $(document).ready(function(){
|
|
|
72 GeoTemConfig.datasets=[];
|
|
|
73 GeoTemConfig.colors=colorArray;
|
|
|
74 getUrlParameter();
|
|
|
75 if(urlParameter['name']!=undefined&&urlParameter['file']!=undefined){ //See if this page is referred by search result
|
|
|
76 var file="./datasets/"+decodeURI(urlParameter['file']);
|
|
|
77 var name=decodeURI(urlParameter['name']);
|
|
|
78 var obj={name:name,file:file,preload:true};
|
|
|
79 datasetArray.splice(0,0,obj);
|
|
|
80 }
|
|
|
81 initWindowWidget();
|
|
|
82 initWidget(); //initial Sebastian's widgets
|
|
|
83 initToolbar(); //initial the left side icons
|
|
|
84 // Syncronize checkboxes and table widget
|
|
|
85 var subscriber;
|
|
|
86 Publisher.Subscribe('filterData',subscriber,function(data){
|
|
|
87 $("#datasetContainer input:checkbox").each(function(){
|
|
|
88 var name=$(this).attr("name");
|
|
|
89 var dataset=$.grep(data,function(val,key){
|
|
|
90 return val.label==name;
|
|
|
91 });
|
|
|
92 if(dataset.length==0){
|
|
|
93 this.checked=false;
|
|
|
94 }
|
|
|
95 });
|
|
|
96 });
|
|
|
97 $(".windowWidget").hide();
|
|
|
98 $(".windowWidget .windowWidgetBar .visibilityButton").click();
|
|
|
99
|
|
|
100 $("#aboutIcon").click();
|
|
|
101 });
|
|
|
102 function getUrlParameter(){
|
|
|
103 //examine the parameter "mode" in the url
|
|
|
104 var url=window.location.href;
|
|
|
105 var pos=url.indexOf("?");
|
|
|
106 if(pos!=-1){
|
|
|
107 var params=url.substring(pos+1);
|
|
|
108 var varArray=params.split("&");
|
|
|
109 for(var i=0; i<varArray.length; i++){
|
|
|
110 pos=varArray[i].indexOf("=");
|
|
|
111 var name=varArray[i].substring(0,pos);
|
|
|
112 var value=varArray[i].substring(pos+1);
|
|
|
113 urlParameter[name]=value;
|
|
|
114 /*
|
|
|
115 if(name=="mode"){
|
|
|
116 mode=value;
|
|
|
117 }*/
|
|
|
118 }
|
|
|
119 }
|
|
|
120 }
|
|
|
121 function loadDataset(name,fileName){
|
|
|
122 var csvFile=GeoTemConfig.getCsv(fileName,
|
|
|
123 function(json){
|
|
|
124 GeoTemConfig.addDataset(new Dataset(GeoTemConfig.loadJson(json),name));
|
|
|
125 //checking the checkbox has to be done here, because if done in the each loop below, it will be unchecked again in the Publisher.Subscribe function. For the Publisher.Subscribe function may be called when the dataset is not yet loaded, which causes dataset.length to be 0 and unchecks the checkbox
|
|
|
126 $("#datasetContainer input:checkbox[value*='"+fileName+"']").prop("checked",true);
|
|
|
127 //rename the column "name" to "title"
|
|
|
128 $(".headerLabel").each(function(){
|
|
|
129 if ($(this).html() == "name"){
|
|
|
130 $(this).empty();
|
|
|
131 $(this).html("title");
|
|
|
132 }
|
|
|
133 });
|
|
|
134 /*//this is redundant when calling GeoTemConfig.addDataset
|
|
|
135 //display in all widgets
|
|
|
136 map.display(GeoTemConfig.datasets);
|
|
|
137 timeline.display(GeoTemConfig.datasets);
|
|
|
138 table.display(GeoTemConfig.datasets);
|
|
|
139 pieChart.display(GeoTemConfig.datasets); */
|
|
|
140 }
|
|
|
141 );
|
|
|
142 }
|
|
|
143 function closeDataset(name,fileName){
|
|
|
144 var idx;
|
|
|
145 //find the dataset to close by name
|
|
|
146 var data=$.grep(GeoTemConfig.datasets,function(val,key){
|
|
|
147 if(val.label==name){
|
|
|
148 idx=key;
|
|
|
149 }
|
|
|
150 return val.label==name;
|
|
|
151 });
|
|
|
152 //GeoTemConfig.datasets.splice(idx,1);
|
|
|
153 GeoTemConfig.removeDataset(idx);
|
|
|
154 }
|
|
|
155 function initWidget(){
|
|
|
156 var mapElem=document.getElementById("mapContainer");
|
|
|
157 map=new WidgetWrapper();
|
|
|
158 var mapWidget=new MapWidget(map,mapElem,{
|
|
|
159 mapTitle:"",
|
|
|
160 alternativeMap:backgroundMapArray
|
|
|
161 });
|
|
|
162
|
|
|
163 var overlayLoaderElem=document.getElementById("overlayLoaderContainer");
|
|
|
164 var overlayLoader=new WidgetWrapper();
|
|
|
165 var overlayLoaderWidget=new OverlayloaderWidget(overlayLoader,overlayLoaderElem);
|
|
|
166 overlayLoaderWidget.attachMapWidget(mapWidget);
|
|
|
167 //insert overlay checkboxes
|
|
|
168 $.each(overlayArray,function(idx,obj){
|
|
|
169 var name=obj.name;
|
|
|
170 var file=obj.file;
|
|
|
171 var preload=obj.preload;
|
|
|
172 var optionObj=$("<div class='option'></div>");
|
|
|
173 $("#overlayContainer").append(optionObj);
|
|
|
174 var checkBoxObj=$("<input type='checkbox' name='"+name+"' value='"+file+"'>");
|
|
|
175 checkBoxObj.prop("checked",preload);
|
|
|
176 optionObj.append(checkBoxObj);
|
|
|
177 var nameObj=$("<div class='label'>"+name+"</div>");
|
|
|
178 optionObj.append(nameObj);
|
|
|
179 if(preload){
|
|
|
180 overlayLoaderWidget.overlayLoader.distributeArcGISWMS(url,file);
|
|
|
181 }
|
|
|
182 });
|
|
|
183
|
|
|
184 $("#overlayContainer input:checkbox").click(function(e){
|
|
|
185 //dirty insertion and deletion, delete all the overlays and insert them in the specified sequence
|
|
|
186 //in order to maintain the sequence of overlays, so that the smaller one will always be on top of the bigger ones
|
|
|
187 //in the overlayLoader, clicking on the "x" button deletes the overlay. Here deletion is done by triggering the click event rather than deleting the overlay directly
|
|
|
188 while($("#overlayLoaderContainer div:last-child a").length!=0){
|
|
|
189 $("#overlayLoaderContainer div a:nth-child(1)").click();
|
|
|
190 }
|
|
|
191
|
|
|
192 $("#overlayContainer input:checkbox").each(function(){
|
|
|
193 if($(this).is(":checked")){
|
|
|
194 overlayLoaderWidget.overlayLoader.distributeArcGISWMS(url,
|
|
|
195 $(this).val());
|
|
|
196 }
|
|
|
197 });
|
|
|
198 //stop the event from propagating, or the list would close every time the user checks an item
|
|
|
199 e.stopPropagation();
|
|
|
200 /*
|
|
|
201 //normal insertion and deletion
|
|
|
202 if($(this).is(":checked")){//selected
|
|
|
203 overlayLoaderWidget.overlayLoader.distributeArcGISWMS("http://geoserver.mpiwg-berlin.mpg.de/geoserver/China_Monograph_Project/ows",
|
|
|
204 $(this).val());
|
|
|
205 }else{//deselect
|
|
|
206 var name=url+" - "+$(this).val();
|
|
|
207 var layerNameArray=$("#overlayLoaderContainer > div:last-child").html().split('<a href="">(x)</a>');
|
|
|
208 var idx=$.inArray(name,layerNameArray);
|
|
|
209 $("#overlayLoaderContainer div a:nth-child("+(idx+1)+")").click();
|
|
|
210 }*/
|
|
|
211 });
|
|
|
212
|
|
|
213
|
|
|
214 //insert dataset checkboxes
|
|
|
215 $.each(datasetArray,function(idx,obj){
|
|
|
216 var name=obj.name;
|
|
|
217 var file=obj.file;
|
|
|
218 var preload=obj.preload;
|
|
|
219 var optionObj=$("<div class='option'></div>");
|
|
|
220 $("#datasetContainer ").append(optionObj);
|
|
|
221 var checkBoxObj=$("<input type='checkbox' name='"+name+"' value='"+file+"'>");
|
|
|
222 optionObj.append(checkBoxObj);
|
|
|
223 //checkBoxObj.prop("checked",preload);
|
|
|
224 var nameObj=$("<div class='label'>"+name+"</div>");
|
|
|
225 optionObj.append(nameObj);
|
|
|
226 if(preload){
|
|
|
227 loadDataset(name,file);
|
|
|
228 }
|
|
|
229 });
|
|
|
230 $("#datasetContainer input:checkbox").click(function(){
|
|
|
231 /*
|
|
|
232 //dirty insertion and deletion, too slow
|
|
|
233 while($("#tableContainer .tableTabs").children().length!=0){
|
|
|
234 //console.log($("#tableContainer .tableTabs").children().length);
|
|
|
235 //$("#tableContainer .tableTabs .tableTab:nth-child(1) .smallButton")[0].onclick();
|
|
|
236 GeoTemConfig.removeDataset(0);
|
|
|
237 }
|
|
|
238
|
|
|
239 $("#datasetContainer .content input:checkbox").each(function(){
|
|
|
240 if($(this).is(":checked")){
|
|
|
241 loadDataset($(this).attr("name"),$(this).val());
|
|
|
242 }
|
|
|
243 });
|
|
|
244 */
|
|
|
245 if($(this).is(":checked")){//selected
|
|
|
246 loadDataset($(this).attr("name"),$(this).val());
|
|
|
247 }else{
|
|
|
248 closeDataset($(this).attr("name"),$(this).val());
|
|
|
249 }
|
|
|
250 });
|
|
|
251 var timelineElem=document.getElementById("timelineContainer");
|
|
|
252 timeline=new WidgetWrapper();
|
|
|
253 var timelineWidget=new FuzzyTimelineWidget(timeline,timelineElem,{
|
|
|
254 timelineTitle:""
|
|
|
255 });
|
|
|
256
|
|
|
257 var tableElem=document.getElementById("tableContainer");
|
|
|
258 table=new WidgetWrapper();
|
|
|
259 var tableWidget=new TableWidget(table,tableElem);
|
|
|
260
|
|
|
261 var pieChartElem=document.getElementById("pieChartContainer");
|
|
|
262 pieChart=new WidgetWrapper();
|
|
|
263 var pieChartWidget=new PieChartWidget(pieChart,pieChartElem);
|
|
|
264 //pieChartWidget.addPieChart(0,"place");
|
|
|
265 }
|
|
|
266 function initToolbar(){
|
|
|
267 var mode=-1;
|
|
|
268 if(urlParameter['mode']!=undefined)
|
|
|
269 mode=urlParameter['mode'];
|
|
|
270 if(mode==1){//locate the overlay selector on the map toolbar
|
|
|
271 $("#overlayIcon").hide();
|
|
|
272 var overlayContainerObj=$("#overlayContainer");
|
|
|
273 var overlayTitleObj=$("<td>Overlay</td>");
|
|
|
274 overlayTitleObj.insertAfter("#mapContainer .absoluteToolbar tr:nth-child(1) td:nth-child(1)");
|
|
|
275 var overlaySelectorObj=$("<td></td>");
|
|
|
276 var overlayContainerPadding=5;
|
|
|
277 overlayContainerObj.css("padding",overlayContainerPadding+"px");
|
|
|
278 //give the overlay selector the same look as the that of the background map and adjust the width
|
|
|
279 overlaySelectorObj.append("<div class='dropdownLeft'></div>");
|
|
|
280 overlaySelectorObj.append("<div class='dropdownSelection'>select overlays</div>");
|
|
|
281 overlaySelectorObj.append("<div class='dropdownButtonEnabled'></div>");
|
|
|
282 overlaySelectorObj.insertAfter("#mapContainer .absoluteToolbar tr:nth-child(2) td:nth-child(1)");
|
|
|
283 var w=parseInt(overlayContainerPadding*2+overlayContainerObj.width());
|
|
|
284 overlaySelectorObj.width(w);
|
|
|
285 w=w-overlaySelectorObj.children(".dropdownLeft").width()-overlaySelectorObj.children(".dropdownButtonEnabled").width();
|
|
|
286 overlaySelectorObj.children(".dropdownSelection").width(w);
|
|
|
287 overlaySelectorObj.append(overlayContainerObj);
|
|
|
288 //hide the overlay list and adjust the position
|
|
|
289 overlayContainerObj.hide();
|
|
|
290 overlayContainerObj.css("position","absolute");
|
|
|
291 var t=overlaySelectorObj.offset().top-parseInt(overlayContainerObj.css("padding"))+overlaySelectorObj.children(".dropdownButtonEnabled").height();
|
|
|
292 //var l=overlaySelectorObj.offset().left-overlayContainerObj.width()/2;
|
|
|
293 var l=overlaySelectorObj.position().left-$("#rightWrapper").css("margin-left");
|
|
|
294 overlayContainerObj.css("top",t);
|
|
|
295 overlayContainerObj.css("left",l);
|
|
|
296 overlayContainerObj.css("z-index",20000);
|
|
|
297 //toggle the visibility of the overlay list by clicking on the selector
|
|
|
298 overlaySelectorObj.click(function(){
|
|
|
299 var visible=overlayContainerObj.is(":visible");
|
|
|
300 if(visible){
|
|
|
301 $(this).children(".selector").show();
|
|
|
302 overlayContainerObj.hide();
|
|
|
303 }else{
|
|
|
304 $(this).children(".selector").hide();
|
|
|
305 overlayContainerObj.show();
|
|
|
306 }
|
|
|
307 });
|
|
|
308 }
|
|
|
309
|
|
|
310 $(".icon").each(function(){//adjust the position of the windows
|
|
|
311 var t=$(this).offset().top;
|
|
|
312 var l=$("#rightWrapper").css("margin-left");
|
|
|
313 var windowName="."+$(this).attr("id");
|
|
|
314 windowName=windowName.replace("Icon","");
|
|
|
315 var windowObj=$(windowName);
|
|
|
316 windowObj.css("top",t);
|
|
|
317 windowObj.css("left",l);
|
|
|
318 });
|
|
|
319
|
|
|
320 // The following two sections are to hide/show the windows
|
|
|
321 $(".icon").click(function(){//toggle the visibility of the window by clicking on the icons
|
|
|
322 var windowName="."+$(this).attr("id");
|
|
|
323 windowName=windowName.replace("Icon","");
|
|
|
324 var windowObj=$(windowName);
|
|
|
325 if(windowObj.is(":visible")){
|
|
|
326 //hide the window
|
|
|
327 windowObj.hide();
|
|
|
328 $(this).removeClass("selected");
|
|
|
329 }else{
|
|
|
330 //show the window
|
|
|
331 if(windowObj.children(".windowWidgetBar").children(".visibilityButton").html()=="+"){
|
|
|
332 windowObj.children(".windowWidgetBar").children(".visibilityButton").click();
|
|
|
333 }
|
|
|
334 windowObj.show();
|
|
|
335 $(this).addClass("selected");
|
|
|
336 }
|
|
|
337 });
|
|
|
338 $(".windowWidget .windowWidgetBar .visibilityButton").click(function(){
|
|
|
339 if($(this).html()=="+"){//if the window is minimized, it should be hidden
|
|
|
340 $(this).parent().parent().hide();
|
|
|
341 var windowName=$(this).parent().parent().attr("class");
|
|
|
342 windowName=windowName.replace("container","");
|
|
|
343 windowName=windowName.replace("windowWidget","");
|
|
|
344 windowName=windowName.replace("ui-draggable","");
|
|
|
345 windowName=windowName.replace(" ","");
|
|
|
346 windowName=windowName.trim();
|
|
|
347 windowName="#"+windowName+"Icon";
|
|
|
348 $(windowName).removeClass("selected");
|
|
|
349 }
|
|
|
350 });
|
|
|
351
|
|
|
352 }
|
