Mercurial > hg > LGMap
view map.js @ 19:3f1800e63c48
new overlay : China 1820 Prefecture (boundaries-only)
author | Calvin Yeh <cyeh@mpipw-berlin.mpg.com> |
---|---|
date | Thu, 23 Mar 2017 11:13:23 +0100 |
parents | b4c4d04b8270 |
children | 2104dde1a7e4 |
line wrap: on
line source
//geoserver url var url="http://geoserver.mpiwg-berlin.mpg.de/geoserver/China_Monograph_Project/ows"; //"name": "layer name" var overlayArray=[ {name:"中國1820省界", file:"China_Monograph_Project:AD1820ChinaProfPolgon", preload:false }, {name:"中國1820府界", file:"China_Monograph_Project:AD1820ChinaPrefPolygon", preload:false }, {name:"中國1820省名", file:"China_Monograph_Project:AD1820ChinaProfPoint", preload:false }, {name:"China 1820 Province", file:"China_Monograph_Project:AD1820ChinaProfPoint_PY", preload:false }, {name:"中國1820府名", file:"China_Monograph_Project:AD1820ChinaPrefPoint", preload:false }, {name:"China 1820 Prefecture", file:"China_Monograph_Project:AD1820ChinaPrefPoint_PY", preload:false }, {name:"中國1820縣市名", file:"China_Monograph_Project:AD1820ChinaCountyPoints", preload:false }, {name:"China 1820 County", file:"China_Monograph_Project:AD1820ChinaCountyPoints_PY", preload:false }, {name:"中國1820鄉鎮名", file:"China_Monograph_Project:AD1820ChinaTownPoint", preload:false }, {name:"China 1820 village", file:"China_Monograph_Project:AD1820ChinaTownPoint_PY", preload:false }, {name:"China 1820 Prefecture (boundaries-only)", file:"China_Monograph_Project:v5_1820_pref_pgn_utf_wgs84", preload:false }, {name:"provincial distribution of local monographs", file:"China_Monograph_Project:monograph_distribution_prov_x", preload:false }, /*{ name:"test", file:"China_Monograph_Project:v5_citas90_pref_pgn_utf", preload:false },*/ { name:"provincial capitals", file:"China_Monograph_Project:all_monographs_capital_points", preload:false } ]; var datasetArray=[ {name:"distribution of local monographs", file:"./datasets/books_coordinates.csv", preload:true }, { name:"蝗神廟之分佈", file:"./datasets/locust_temples.csv", preload:false }]; var backgroundMapArray=[ /*{ name: 'Barrington Roman Empire', url: 'http://pelagios.dme.ait.ac.at/tilesets/imperium/${z}/${x}/${y}.png', type:'XYZ', attribution: "(c) Barrington Roman Empiry, <a href='http://pelagios.dme.ait.ac.at/maps/greco-roman/'>Pelagios</a>" },*/ { name: '世界地形圖', url: '../ts/t/terrain/${z}/${x}/${y}.png', type:'XYZ', attribution: "<a href='../ts/index.html?y=1982' target='_blank'>Data Source</a>" } , /*,{ name: '西元1820年 清朝 行政區', url: 'http://wmsproxy.appspot.com/map.jsp?l=China1820-png-${z}-${x}-${y}', type:'XYZ', attribution: "© NTU CSIE 303 Lab, <a href='http://archimedes.csie.ntu.edu.tw/lab_web1/'>NTU CSIE 303 Lab</a>" }*/ ]; //mpgiwg layers if (client_ip.substring(0,9)=="141.14.23") { backgroundMapArray.push( { name: '陳正祥–蝗神廟之分佈', url: '../ts/t/pa_cha/${z}/${x}/${y}.png', type:'XYZ', attribution: "© 中國文化地理 陳正祥, <a href='../ts/index.html?y=1982' target='_blank'>Data Source</a>" } ); } var colorArray=[{//blue r1 : 0, g1 : 128, b1 : 255, r0 : 205, g0 : 230, b0 : 255 },{//red r1 : 255, g1 : 84, b1 : 22, r0 : 255, g0 : 218, b0 : 205 }, {//purple r1 : 132, g1 : 0, b1 : 255, r0 : 231, g0 : 205, b0 : 255 }, {//green r1 : 0, g1 : 225, b1 : 116, r0 : 180, g0 : 225, b0 : 204 }, {//yellow r1 : 255, g1 : 191, b1 : 0, r0 : 255, g0 : 243, b0 : 205 }]; var map, table,timeline,pieChart; var urlParameter=new Array(); $(document).ready(function(){ GeoTemConfig.datasets=[]; GeoTemConfig.colors=colorArray; getUrlParameter(); if(urlParameter['name']!=undefined&&urlParameter['file']!=undefined){ //See if this page is referred by search result var file="./datasets/"+decodeURI(urlParameter['file']); var name=decodeURI(urlParameter['name']); var obj={name:name,file:file,preload:true}; datasetArray.splice(0,0,obj); } // zoe added for incoming json object from LGDataverse if (urlParameter['name']!=undefined && urlParameter['file']==undefined && urlParameter['fileId']!=undefined) { var file=undefined; var name=decodeURI(urlParameter['name']); var obj={name:name,file:file,preload:true}; datasetArray.splice(0,0,obj); }; // end initWindowWidget(); initWidget(); //initial Sebastian's widgets initToolbar(); //initial the left side icons // Syncronize checkboxes and table widget var subscriber; Publisher.Subscribe('filterData',subscriber,function(data){ $("#datasetContainer input:checkbox").each(function(){ var name=$(this).attr("name"); var dataset=$.grep(data,function(val,key){ return val.label==name; }); if(dataset.length==0){ this.checked=false; } // zoe added if (urlParameter['file']==undefined && urlParameter['fileId']!=undefined && name==urlParameter['name']) { this.checked = true; this.disabled = true; } // end }); }); $(".windowWidget").hide(); $(".windowWidget .windowWidgetBar .visibilityButton").click(); // debug by yao $("#aboutIcon").click(); }); function getUrlParameter(){ //examine the parameter "mode" in the url var url=window.location.href; var pos=url.indexOf("?"); if(pos!=-1){ var params=url.substring(pos+1); var varArray=params.split("&"); for(var i=0; i<varArray.length; i++){ pos=varArray[i].indexOf("="); var name=varArray[i].substring(0,pos); var value=varArray[i].substring(pos+1); urlParameter[name]=value; /* if(name=="mode"){ mode=value; }*/ } } } function loadDataset(name,fileName){ // zoe added if (fileName==undefined) { // Get file json object from POST from LGDataverse by fileId in url var fileId = urlParameter['fileId']; var lgdv_url = lgdataverse_url + "getDatafile?fileId="+fileId; // lgdataverse_url is a global var console.log("lgdv_url:"+lgdv_url); var fileData = {}; $.ajax({ url : lgdataverse_url+"getDatafile", async : false, type : 'GET', data: 'fileId='+fileId, dataType: "json", success: function (data) { console.log("getting file from LGDataverse success!"); fileData = data; }, error: function (data) { console.log("getting file from LGDataverse failed!" + data); alert("Data "+ urlParameter['name'] +" CANNOT be shown on the map."); } }).done(function(result) { }); if (fileData.state == "ok") { /* var json = [ { // these fields are required in map "description":"20卷 ╱ (民國) 崔正春修 (民國) 尚希寳纂 ╱ 民國十八年鉛印本", "lat":36.974178, "lon":115.259262, "place":"威縣", // ---- "tableContent":{ // these fields are shown as columns in the table "description":"20卷 ╱ (民國) 崔正春修 (民國) 尚希寳纂 ╱ 民國十八年鉛印本", "name":"(民國) 威縣志", "place":"威縣", "testColumn1":"content1", "testColumn2":"content2", "testColumn3":"content3", } } ]; */ var dataCSVformat = fileData.file.dataString; dataCSVformat = dataCSVformat.substring(0, dataCSVformat.length-2); // remove the last two characters which are "\n" // it will cause download error since the last element in table is null //console.log(dataCSVformat); var json = GeoTemConfig.convertCsv(dataCSVformat); GeoTemConfig.addDataset(new Dataset(GeoTemConfig.loadJson(json),name)); } } else { // zoe end var csvFile=GeoTemConfig.getCsv(fileName, function(json){ GeoTemConfig.addDataset(new Dataset(GeoTemConfig.loadJson(json),name)); //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 $("#datasetContainer input:checkbox[value*='"+fileName+"']").prop("checked",true); //rename the column "name" to "title" $(".headerLabel").each(function(){ if ($(this).html() == "name"){ $(this).empty(); $(this).html("title"); } }); /*//this is redundant when calling GeoTemConfig.addDataset //display in all widgets map.display(GeoTemConfig.datasets); timeline.display(GeoTemConfig.datasets); table.display(GeoTemConfig.datasets); pieChart.display(GeoTemConfig.datasets); */ } ); } } function closeDataset(name,fileName){ var idx; //find the dataset to close by name var data=$.grep(GeoTemConfig.datasets,function(val,key){ if(val.label==name){ idx=key; } return val.label==name; }); //GeoTemConfig.datasets.splice(idx,1); GeoTemConfig.removeDataset(idx); } function initWidget(){ var mapElem=document.getElementById("mapContainer"); map=new WidgetWrapper(); var mapWidget=new MapWidget(map,mapElem,{ mapTitle:"", minimumRadius:2, baseLayer:'世界地形圖', //底圖 alternativeMap:backgroundMapArray }); var overlayLoaderElem=document.getElementById("overlayLoaderContainer"); var overlayLoader=new WidgetWrapper(); var overlayLoaderWidget=new OverlayloaderWidget(overlayLoader,overlayLoaderElem); overlayLoaderWidget.attachMapWidget(mapWidget); //insert overlay checkboxes $.each(overlayArray,function(idx,obj){ var name=obj.name; var file=obj.file; var preload=obj.preload; var optionObj=$("<div class='option'></div>"); $("#overlayContainer").append(optionObj); var checkBoxObj=$("<input type='checkbox' name='"+name+"' value='"+file+"'>"); checkBoxObj.prop("checked",preload); optionObj.append(checkBoxObj); var nameObj=$("<div class='label'>"+name+"</div>"); optionObj.append(nameObj); if(preload){ overlayLoaderWidget.overlayLoader.distributeArcGISWMS(url,file); } }); $("#overlayContainer input:checkbox").click(function(e){ //dirty insertion and deletion, delete all the overlays and insert them in the specified sequence //in order to maintain the sequence of overlays, so that the smaller one will always be on top of the bigger ones //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 while($("#overlayLoaderContainer div:last-child a").length!=0){ $("#overlayLoaderContainer div a:nth-child(1)").click(); } $("#overlayContainer input:checkbox").each(function(){ if($(this).is(":checked")){ overlayLoaderWidget.overlayLoader.distributeArcGISWMS(url, $(this).val()); } }); //stop the event from propagating, or the list would close every time the user checks an item e.stopPropagation(); /* //normal insertion and deletion if($(this).is(":checked")){//selected overlayLoaderWidget.overlayLoader.distributeArcGISWMS("http://geoserver.mpiwg-berlin.mpg.de/geoserver/China_Monograph_Project/ows", $(this).val()); }else{//deselect var name=url+" - "+$(this).val(); var layerNameArray=$("#overlayLoaderContainer > div:last-child").html().split('<a href="">(x)</a>'); var idx=$.inArray(name,layerNameArray); $("#overlayLoaderContainer div a:nth-child("+(idx+1)+")").click(); }*/ }); //insert dataset checkboxes $.each(datasetArray,function(idx,obj){ var name=obj.name; var file=obj.file; var preload=obj.preload; var optionObj=$("<div class='option'></div>"); $("#datasetContainer ").append(optionObj); var checkBoxObj=$("<input type='checkbox' name='"+name+"' value='"+file+"'>"); optionObj.append(checkBoxObj); //checkBoxObj.prop("checked",preload); var nameObj=$("<div class='label'>"+name+"</div>"); optionObj.append(nameObj); if(preload){ loadDataset(name,file); } }); $("#datasetContainer input:checkbox").click(function(){ /* //dirty insertion and deletion, too slow while($("#tableContainer .tableTabs").children().length!=0){ //console.log($("#tableContainer .tableTabs").children().length); //$("#tableContainer .tableTabs .tableTab:nth-child(1) .smallButton")[0].onclick(); GeoTemConfig.removeDataset(0); } $("#datasetContainer .content input:checkbox").each(function(){ if($(this).is(":checked")){ loadDataset($(this).attr("name"),$(this).val()); } }); */ if($(this).is(":checked")){//selected loadDataset($(this).attr("name"),$(this).val()); }else{ closeDataset($(this).attr("name"),$(this).val()); } }); var timelineElem=document.getElementById("timelineContainer"); timeline=new WidgetWrapper(); var timelineWidget=new FuzzyTimelineWidget(timeline,timelineElem,{ timelineTitle:"" }); var tableElem=document.getElementById("tableContainer"); table=new WidgetWrapper(); var tableWidget=new TableWidget(table,tableElem); var pieChartElem=document.getElementById("pieChartContainer"); pieChart=new WidgetWrapper(); var pieChartWidget=new PieChartWidget(pieChart,pieChartElem); //pieChartWidget.addPieChart(0,"place"); } function initToolbar(){ var mode=1; if(urlParameter['mode']!=undefined) mode=urlParameter['mode']; if(mode==1){//locate the overlay selector on the map toolbar $("#overlayIcon").hide(); var overlayContainerObj=$("#overlayContainer"); var overlayTitleObj=$("<td>Overlay</td>"); overlayTitleObj.insertAfter("#mapContainer .absoluteToolbar tr:nth-child(1) td:nth-child(1)"); var overlaySelectorObj=$("<td></td>"); var overlayContainerPadding=5; overlayContainerObj.css("padding",overlayContainerPadding+"px"); //give the overlay selector the same look as the that of the background map and adjust the width overlaySelectorObj.append("<div class='dropdownLeft'></div>"); overlaySelectorObj.append("<div class='dropdownSelection'>select overlays</div>"); overlaySelectorObj.append("<div class='dropdownButtonEnabled'></div>"); overlaySelectorObj.insertAfter("#mapContainer .absoluteToolbar tr:nth-child(2) td:nth-child(1)"); var w=parseInt(overlayContainerPadding*2+overlayContainerObj.width()); overlaySelectorObj.width(w); w=w-overlaySelectorObj.children(".dropdownLeft").width()-overlaySelectorObj.children(".dropdownButtonEnabled").width(); overlaySelectorObj.children(".dropdownSelection").width(w); overlaySelectorObj.append(overlayContainerObj); //hide the overlay list and adjust the position overlayContainerObj.hide(); overlayContainerObj.css("position","absolute"); var t=overlaySelectorObj.offset().top-parseInt(overlayContainerObj.css("padding"))+overlaySelectorObj.children(".dropdownButtonEnabled").height(); //var l=overlaySelectorObj.offset().left-overlayContainerObj.width()/2; var l=overlaySelectorObj.position().left-$("#rightWrapper").css("margin-left"); overlayContainerObj.css("top",t); overlayContainerObj.css("left",l); overlayContainerObj.css("z-index",20000); //toggle the visibility of the overlay list by clicking on the selector overlaySelectorObj.click(function(){ var visible=overlayContainerObj.is(":visible"); if(visible){ $(this).children(".selector").show(); overlayContainerObj.hide(); }else{ $(this).children(".selector").hide(); overlayContainerObj.show(); } }); } $(".icon").each(function(){//adjust the position of the windows var t=$(this).offset().top; var l=$("#rightWrapper").css("margin-left"); var windowName="."+$(this).attr("id"); windowName=windowName.replace("Icon",""); var windowObj=$(windowName); windowObj.css("top",t); windowObj.css("left",l); }); // The following two sections are to hide/show the windows $(".icon").click(function(){//toggle the visibility of the window by clicking on the icons var windowName="."+$(this).attr("id"); windowName=windowName.replace("Icon",""); var windowObj=$(windowName); if(windowObj.is(":visible")){ //hide the window windowObj.hide(); $(this).removeClass("selected"); }else{ //show the window if(windowObj.children(".windowWidgetBar").children(".visibilityButton").html()=="+"){ windowObj.children(".windowWidgetBar").children(".visibilityButton").click(); } windowObj.show(); $(this).addClass("selected"); } }); $(".windowWidget .windowWidgetBar .visibilityButton").click(function(){ if($(this).html()=="+"){//if the window is minimized, it should be hidden $(this).parent().parent().hide(); var windowName=$(this).parent().parent().attr("class"); windowName=windowName.replace("container",""); windowName=windowName.replace("windowWidget",""); windowName=windowName.replace("ui-draggable",""); windowName=windowName.replace(" ",""); windowName=windowName.trim(); windowName="#"+windowName+"Icon"; $(windowName).removeClass("selected"); } }); }