Mercurial > hg > LGMap

comparison map2.js @ 26:9f67e8afa1cc default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add new file for new LGService UI project
author Calvin Yeh <cyeh@mpiwg-berlin.mpg.de>
date Thu, 28 Sep 2017 23:58:34 +0200
parents
children
comparison
equal deleted inserted replaced
25:057b56c62b13 26:9f67e8afa1cc
1
2
3 //geoserver url
4 var url="http://geoserver.mpiwg-berlin.mpg.de/geoserver/China_Monograph_Project/ows";
5
6 //"name": "layer name"
7 var overlayArray=[
8 {name:"中國1820省界",
9 file:"China_Monograph_Project:AD1820ChinaProfPolgon",
10 preload:false
11 },
12 {name:"中國1820府界",
13 file:"China_Monograph_Project:AD1820ChinaPrefPolygon",
14 preload:false
15 },
16 {name:"中國1820省名",
17 file:"China_Monograph_Project:AD1820ChinaProfPoint",
18 preload:false
19 },
20 {name:"China 1820 Province",
21 file:"China_Monograph_Project:AD1820ChinaProfPoint_PY",
22 preload:false
23 },
24 {name:"中國1820府名",
25 file:"China_Monograph_Project:AD1820ChinaPrefPoint",
26 preload:false
27 },
28 {name:"China 1820 Prefecture",
29 file:"China_Monograph_Project:AD1820ChinaPrefPoint_PY",
30 preload:false
31 },
32 {name:"中國1820縣市名",
33 file:"China_Monograph_Project:AD1820ChinaCountyPoints",
34 preload:false
35 },
36 {name:"China 1820 County",
37 file:"China_Monograph_Project:AD1820ChinaCountyPoints_PY",
38 preload:false
39 },
40 {name:"中國1820鄉鎮名",
41 file:"China_Monograph_Project:AD1820ChinaTownPoint",
42 preload:false
43 },
44 {name:"China 1820 village",
45 file:"China_Monograph_Project:AD1820ChinaTownPoint_PY",
46 preload:false
47 },
48 {name:"China 1820 Prefecture (boundaries-only)",
49 file:"China_Monograph_Project:v5_1820_pref_pgn_utf_wgs84",
50 preload:false
51 },
52 {name:"provincial distribution of local gazetteers",
53 file:"China_Monograph_Project:monograph_distribution_prov_x",
54 preload:false
55 },
56 /*{
57 name:"test",
58 file:"China_Monograph_Project:v5_citas90_pref_pgn_utf",
59 preload:false
60 },*/
61 {
62 name:"provincial capitals",
63 file:"China_Monograph_Project:all_monographs_capital_points",
64 preload:false
65 }
66 ];
67 var datasetArray=[
68
69 { name:"distribution of local gazetteers",
70 file:"./datasets/books_coordinates.csv",
71 isFile: true,
72 preload:true
73
74 }
75 // ,{
76 // name:"蝗神廟之分佈",
77 // file:"./datasets/locust_temples.csv",
78 // preload:false
79 // }
80 ];
81 var backgroundMapArray=[
82 /*{
83 name: 'Barrington Roman Empire',
84 url: 'http://pelagios.dme.ait.ac.at/tilesets/imperium/${z}/${x}/${y}.png',
85 type:'XYZ',
86 attribution: "(c) Barrington Roman Empiry, <a href='http://pelagios.dme.ait.ac.at/maps/greco-roman/'>Pelagios</a>"
87 },*/
88 {
89 name: '世界地形圖',
90 url: '../ts/t/terrain/${z}/${x}/${y}.png',
91 type:'XYZ',
92 attribution: "<a href='../ts/index.html?y=1982' target='_blank'>Data Source</a>"
93 }
94 /*,{
95 name: '西元1820年 清朝 行政區',
96 url: 'http://wmsproxy.appspot.com/map.jsp?l=China1820-png-${z}-${x}-${y}',
97 type:'XYZ',
98 attribution: "© NTU CSIE 303 Lab, <a href='http://archimedes.csie.ntu.edu.tw/lab_web1/'>NTU CSIE 303 Lab</a>"
99 }*/
100 ];
101 //mpgiwg layers
102 // if (client_ip.substring(0,9)=="141.14.23") {
103 // backgroundMapArray.push(
104 // {
105 //
106 // name: '陳正祥–蝗神廟之分佈',
107 // url: '../ts/t/pa_cha/${z}/${x}/${y}.png',
108 // type:'XYZ',
109 // attribution: "© 中國文化地理 陳正祥, <a href='../ts/index.html?y=1982' target='_blank'>Data Source</a>"
110 // }
111 // );
112 // }
113
114 var colorArray=[{//blue
115 r1 : 0,
116 g1 : 128,
117 b1 : 255,
118 r0 : 205,
119 g0 : 230,
120 b0 : 255
121 },{//red
122 r1 : 255,
123 g1 : 84,
124 b1 : 22,
125 r0 : 255,
126 g0 : 218,
127 b0 : 205
128 }, {//purple
129 r1 : 132,
130 g1 : 0,
131 b1 : 255,
132 r0 : 231,
133 g0 : 205,
134 b0 : 255
135 }, {//green
136 r1 : 0,
137 g1 : 225,
138 b1 : 116,
139 r0 : 180,
140 g0 : 225,
141 b0 : 204
142 }, {//yellow
143 r1 : 255,
144 g1 : 191,
145 b1 : 0,
146 r0 : 255,
147 g0 : 243,
148 b0 : 205
149 }];
150 var map, table,timeline,pieChart;
151 var urlParameter=new Array();
152
153 $(document).ready(function(){
154
155 GeoTemConfig.datasets=[];
156
157 GeoTemConfig.colors=colorArray;
158
159 getUrlParameter();
160
161 //if(urlParameter['name']!=undefined&&urlParameter['file']!=undefined){ //See if this page is referred by search result
162 var keywords = decodeURI(urlParameter['keywords']),
163 filters = decodeURI(urlParameter['filters']),
164 excludes = decodeURI(urlParameter['excludes']),
165 name = decodeURI(urlParameter['name']),
166 isTOC = decodeURI(urlParameter['isTOC']),
167 obj={name:name, isFile:false, keywords:keywords, filters:filters, excludes: excludes, preload:true, isTOC: isTOC};
168
169 datasetArray.splice(0,0,obj);
170 //}
171
172 // zoe added for incoming json object from LGDataverse
173 if (urlParameter['name']!=undefined && urlParameter['file']==undefined && urlParameter['fileId']!=undefined) {
174 var file=undefined;
175 var name=decodeURI(urlParameter['name']);
176 var obj={name:name,file:file,isFile:true,preload:true};
177 datasetArray.splice(0,0,obj);
178 };
179 // end
180
181 initWindowWidget();
182 initWidget(); //initial Sebastian's widgets
183 initToolbar(); //initial the left side icons
184 // Syncronize checkboxes and table widget
185 var subscriber;
186
187 Publisher.Subscribe('filterData',subscriber,function(data){
188
189 $("#datasetContainer input:checkbox").each(function(){
190
191 var name=$(this).attr("name");
192
193 var dataset=$.grep(data,function(val,key){
194 return val.label==name;
195 });
196
197 if(dataset.length==0){
198 this.checked=false;
199 }
200 // zoe added
201 if (urlParameter['file']==undefined && urlParameter['fileId']!=undefined && name==urlParameter['name']) {
202 this.checked = true;
203 this.disabled = true;
204 }
205 // end
206 });
207 });
208 $(".windowWidget").hide();
209 $(".windowWidget .windowWidgetBar .visibilityButton").click();
210
211 // debug by yao
212 // $("#aboutIcon").click();
213
214 });
215
216 function getUrlParameter(){
217 //examine the parameter "mode" in the url
218 var url=window.location.href;
219 var pos=url.indexOf("?");
220 if(pos!=-1){
221 var params=url.substring(pos+1);
222 var varArray=params.split("&");
223 for(var i=0; i<varArray.length; i++){
224 pos=varArray[i].indexOf("=");
225 var name=varArray[i].substring(0,pos);
226 var value=varArray[i].substring(pos+1);
227 urlParameter[name]=value;
228 /*
229 if(name=="mode"){
230 mode=value;
231 }*/
232 }
233 }
234 }
235
236 function loadDataset(name, fileName){
237 // zoe added
238 if (fileName==undefined) {
239 // Get file json object from POST from LGDataverse by fileId in url
240 var fileId = urlParameter['fileId'];
241 var lgdv_url = lgdataverse_url + "getDatafile?fileId="+fileId; // lgdataverse_url is a global var
242 console.log("lgdv_url:"+lgdv_url);
243
244 var fileData = {};
245 $.ajax({
246 url : lgdataverse_url+"getDatafile",
247 async : false,
248 type : 'GET',
249 data: 'fileId='+fileId,
250 dataType: "json",
251 success: function (data) {
252 console.log("getting file from LGDataverse success!");
253 fileData = data;
254 },
255 error: function (data) {
256 console.log("getting file from LGDataverse failed!" + data);
257 alert("Data "+ urlParameter['name'] +" CANNOT be shown on the map.");
258
259 }
260 }).done(function(result) {
261
262 });
263
264 if (fileData.state == "ok") {
265 /*
266 var json = [
267 {
268 // these fields are required in map
269 "description":"20卷 ╱ (民國) 崔正春修 (民國) 尚希寳纂 ╱ 民國十八年鉛印本",
270 "lat":36.974178,
271 "lon":115.259262,
272 "place":"威縣",
273 // ----
274 "tableContent":{
275 // these fields are shown as columns in the table
276 "description":"20卷 ╱ (民國) 崔正春修 (民國) 尚希寳纂 ╱ 民國十八年鉛印本",
277 "name":"(民國) 威縣志",
278 "place":"威縣",
279 "testColumn1":"content1",
280 "testColumn2":"content2",
281 "testColumn3":"content3",
282
283 }
284 }
285 ];
286 */
287
288 var dataCSVformat = fileData.file.dataString;
289 dataCSVformat = dataCSVformat.substring(0, dataCSVformat.length-2); // remove the last two characters which are "\n"
290 // it will cause download error since the last element in table is null
291 //console.log(dataCSVformat);
292 var json = GeoTemConfig.convertCsv(dataCSVformat);
293 GeoTemConfig.addDataset(new Dataset(GeoTemConfig.loadJson(json),name));
294
295 }
296 }
297 else {
298 // zoe end
299 var fileURL = fileName, tmpObj;
300
301 if(fileName == name){
302
303 //means download directly
304 for(var idx = 0, len = datasetArray.length; idx < len; idx++){
305
306 tmpObj = datasetArray[idx];
307 if(name == tmpObj.name){
308
309 if(tmpObj.isTOC === "1"){
310 fileURL = "https://localgazetteers-test.mpiwg-berlin.mpg.de/lg-api/sections/export.map?filters="
311 + tmpObj.filters
312 + "&fileName="+ tmpObj.name;
313 }
314 else {
315 fileURL = "https://localgazetteers-test.mpiwg-berlin.mpg.de/lg-api/contents/export.map?keywords="
316 + tmpObj.keywords
317 + "&filters="+ tmpObj.filters
318 + "&excludes="+ tmpObj.excludes
319 + "&fileName="+ tmpObj.name;
320 }
321 break;
322 }
323 }
324 }
325
326 var csvFile=GeoTemConfig.getCsv(fileURL,
327 function(json){
328 GeoTemConfig.addDataset(new Dataset(GeoTemConfig.loadJson(json), name));
329
330 //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
331 $("#datasetContainer input:checkbox[value*='" + fileName + "']").prop("checked",true);
332 //rename the column "name" to "title"
333 $(".headerLabel").each(function(){
334 if ($(this).html() == "name"){
335 $(this).empty();
336 $(this).html("title");
337 }
338 });
339 /*//this is redundant when calling GeoTemConfig.addDataset
340 //display in all widgets
341 map.display(GeoTemConfig.datasets);
342 timeline.display(GeoTemConfig.datasets);
343 table.display(GeoTemConfig.datasets);
344 pieChart.display(GeoTemConfig.datasets); */
345
346 }
347
348 );
349
350 }
351
352 }
353
354 function closeDataset(name,fileName){
355 var idx;
356 //find the dataset to close by name
357 var data=$.grep(GeoTemConfig.datasets,function(val,key){
358 if(val.label==name){
359 idx=key;
360 }
361 return val.label==name;
362 });
363 //GeoTemConfig.datasets.splice(idx,1);
364 GeoTemConfig.removeDataset(idx);
365 }
366
367 function initWidget(){
368 var mapElem=document.getElementById("mapContainer");
369 map=new WidgetWrapper();
370 var mapWidget=new MapWidget(map,mapElem,{
371 mapTitle:"",
372 minimumRadius:2,
373 baseLayer:'世界地形圖', //底圖
374 alternativeMap:backgroundMapArray
375 });
376
377 var overlayLoaderElem=document.getElementById("overlayLoaderContainer");
378 var overlayLoader=new WidgetWrapper();
379 var overlayLoaderWidget=new OverlayloaderWidget(overlayLoader,overlayLoaderElem);
380 overlayLoaderWidget.attachMapWidget(mapWidget);
381 //insert overlay checkboxes
382 $.each(overlayArray,function(idx,obj){
383 var name=obj.name;
384 var file=obj.file;
385 var preload=obj.preload;
386 var optionObj=$("<div class='option'></div>");
387 $("#overlayContainer").append(optionObj);
388 var checkBoxObj=$("<input type='checkbox' name='"+name+"' value='"+file+"'>");
389 checkBoxObj.prop("checked",preload);
390 optionObj.append(checkBoxObj);
391 var nameObj=$("<div class='label'>"+name+"</div>");
392 optionObj.append(nameObj);
393 if(preload){
394 overlayLoaderWidget.overlayLoader.distributeArcGISWMS(url,file);
395 }
396 });
397
398 $("#overlayContainer input:checkbox").click(function(e){
399 //dirty insertion and deletion, delete all the overlays and insert them in the specified sequence
400 //in order to maintain the sequence of overlays, so that the smaller one will always be on top of the bigger ones
401 //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
402 while($("#overlayLoaderContainer div:last-child a").length!=0){
403 $("#overlayLoaderContainer div a:nth-child(1)").click();
404 }
405
406 $("#overlayContainer input:checkbox").each(function(){
407 if($(this).is(":checked")){
408 overlayLoaderWidget.overlayLoader.distributeArcGISWMS(url,
409 $(this).val());
410 }
411 });
412 //stop the event from propagating, or the list would close every time the user checks an item
413 e.stopPropagation();
414 /*
415 //normal insertion and deletion
416 if($(this).is(":checked")){//selected
417 overlayLoaderWidget.overlayLoader.distributeArcGISWMS("http://geoserver.mpiwg-berlin.mpg.de/geoserver/China_Monograph_Project/ows",
418 $(this).val());
419 }else{//deselect
420 var name=url+" - "+$(this).val();
421 var layerNameArray=$("#overlayLoaderContainer > div:last-child").html().split('<a href="">(x)</a>');
422 var idx=$.inArray(name,layerNameArray);
423 $("#overlayLoaderContainer div a:nth-child("+(idx+1)+")").click();
424 }*/
425 });
426
427
428 //insert dataset checkboxes
429 $.each(datasetArray,function(idx,obj){
430 var name=obj.name;
431 var file= (obj.isFile) ? obj.file : name;
432 var preload=obj.preload;
433 var optionObj=$("<div class='option'></div>");
434
435 $("#datasetContainer ").append(optionObj);
436
437 var checkBoxObj=$("<input type='checkbox' name='"+name+"' value='"+ file +"'>");
438
439 optionObj.append(checkBoxObj);
440 //checkBoxObj.prop("checked",preload);
441 var nameObj=$("<div class='label'>"+name+"</div>");
442
443 optionObj.append(nameObj);
444 if(preload){
445 loadDataset(name, file);
446 }
447 });
448
449 $("#datasetContainer input:checkbox").click(function(){
450 /*
451 //dirty insertion and deletion, too slow
452 while($("#tableContainer .tableTabs").children().length!=0){
453 //console.log($("#tableContainer .tableTabs").children().length);
454 //$("#tableContainer .tableTabs .tableTab:nth-child(1) .smallButton")[0].onclick();
455 GeoTemConfig.removeDataset(0);
456 }
457
458 $("#datasetContainer .content input:checkbox").each(function(){
459 if($(this).is(":checked")){
460 loadDataset($(this).attr("name"),$(this).val());
461 }
462 });
463 */
464 if($(this).is(":checked")){//selected
465 loadDataset($(this).attr("name"), $(this).val());
466 }else{
467 closeDataset($(this).attr("name"), $(this).val());
468 }
469 });
470
471 var timelineElem=document.getElementById("timelineContainer");
472 timeline=new WidgetWrapper();
473
474 var timelineWidget=new FuzzyTimelineWidget(timeline,timelineElem,{
475 timelineTitle:""
476 });
477
478 var tableElem=document.getElementById("tableContainer");
479 table=new WidgetWrapper();
480 var tableWidget=new TableWidget(table,tableElem);
481
482 var pieChartElem=document.getElementById("pieChartContainer");
483 pieChart=new WidgetWrapper();
484 var pieChartWidget=new PieChartWidget(pieChart,pieChartElem);
485 //pieChartWidget.addPieChart(0,"place");
486 }
487
488 function initToolbar(){
489 var mode=1;
490 if(urlParameter['mode']!=undefined)
491 mode=urlParameter['mode'];
492 if(mode==1){//locate the overlay selector on the map toolbar
493 $("#overlayIcon").hide();
494 var overlayContainerObj=$("#overlayContainer");
495 var overlayTitleObj=$("<td>Overlay</td>");
496 overlayTitleObj.insertAfter("#mapContainer .absoluteToolbar tr:nth-child(1) td:nth-child(1)");
497 var overlaySelectorObj=$("<td></td>");
498 var overlayContainerPadding=5;
499 overlayContainerObj.css("padding",overlayContainerPadding+"px");
500 //give the overlay selector the same look as the that of the background map and adjust the width
501 overlaySelectorObj.append("<div class='dropdownLeft'></div>");
502 overlaySelectorObj.append("<div class='dropdownSelection'>select overlays</div>");
503 overlaySelectorObj.append("<div class='dropdownButtonEnabled'></div>");
504 overlaySelectorObj.insertAfter("#mapContainer .absoluteToolbar tr:nth-child(2) td:nth-child(1)");
505 var w=parseInt(overlayContainerPadding*2+overlayContainerObj.width());
506 overlaySelectorObj.width(w);
507 w=w-overlaySelectorObj.children(".dropdownLeft").width()-overlaySelectorObj.children(".dropdownButtonEnabled").width();
508 overlaySelectorObj.children(".dropdownSelection").width(w);
509 overlaySelectorObj.append(overlayContainerObj);
510 //hide the overlay list and adjust the position
511 overlayContainerObj.hide();
512 overlayContainerObj.css("position","absolute");
513 var t=overlaySelectorObj.offset().top-parseInt(overlayContainerObj.css("padding"))+overlaySelectorObj.children(".dropdownButtonEnabled").height();
514 //var l=overlaySelectorObj.offset().left-overlayContainerObj.width()/2;
515 var l=overlaySelectorObj.position().left-$("#rightWrapper").css("margin-left");
516 overlayContainerObj.css("top",t);
517 overlayContainerObj.css("left",l);
518 overlayContainerObj.css("z-index",20000);
519 //toggle the visibility of the overlay list by clicking on the selector
520 overlaySelectorObj.click(function(){
521 var visible=overlayContainerObj.is(":visible");
522 if(visible){
523 $(this).children(".selector").show();
524 overlayContainerObj.hide();
525 }else{
526 $(this).children(".selector").hide();
527 overlayContainerObj.show();
528 }
529 });
530 }
531
532 $(".icon").each(function(){//adjust the position of the windows
533 var t=$(this).offset().top;
534 var l=$("#rightWrapper").css("margin-left");
535 var windowName="."+$(this).attr("id");
536 windowName=windowName.replace("Icon","");
537 var windowObj=$(windowName);
538 windowObj.css("top",t);
539 windowObj.css("left",l);
540 });
541
542 // The following two sections are to hide/show the windows
543 $(".icon").click(function(){//toggle the visibility of the window by clicking on the icons
544 var windowName="."+$(this).attr("id");
545 windowName=windowName.replace("Icon","");
546 var windowObj=$(windowName);
547 if(windowObj.is(":visible")){
548 //hide the window
549 windowObj.hide();
550 $(this).removeClass("selected");
551 }else{
552 //show the window
553 if(windowObj.children(".windowWidgetBar").children(".visibilityButton").html()=="+"){
554 windowObj.children(".windowWidgetBar").children(".visibilityButton").click();
555 }
556 windowObj.show();
557 $(this).addClass("selected");
558 }
559 });
560
561 $(".windowWidget .windowWidgetBar .visibilityButton").click(function(){
562 if($(this).html()=="+"){//if the window is minimized, it should be hidden
563 $(this).parent().parent().hide();
564 var windowName=$(this).parent().parent().attr("class");
565 windowName=windowName.replace("container","");
566 windowName=windowName.replace("windowWidget","");
567 windowName=windowName.replace("ui-draggable","");
568 windowName=windowName.replace(" ","");
569 windowName=windowName.trim();
570 windowName="#"+windowName+"Icon";
571 $(windowName).removeClass("selected");
572 }
573 });
574
575 }