Mercurial > hg > extraction-interface

comparison map/map.js @ 0:b12c99b7c3f0

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
commit for previous development
author Zoe Hong <zhong@mpiwg-berlin.mpg.de>
date Mon, 19 Jan 2015 17:13:49 +0100
parents
children ef6d0c6a13d7
comparison
equal deleted inserted replaced
-1:000000000000 0:b12c99b7c3f0
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:false
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 }