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