]> git.openstreetmap.org Git - rails.git/blob - app/views/browse/start.js.erb
Use browser detection to decide how many features to show
[rails.git] / app / views / browse / start.js.erb
1 var browseBoxControl;
2 var browseMode = "auto";
3 var browseBounds;
4 var browseFeatureList;
5 var browseActiveFeature;
6 var browseDataLayer;
7 var browseSelectControl;
8 var browseObjectList;
9 var areasHidden = false;
10
11 OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
12 OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
13     
14 function startBrowse() {
15   map.dataLayer.active = true;
16
17   $("#sidebar_title").html("<%=j t 'browse.start_rjs.data_frame_title' %>");
18   $("#sidebar_content").html("<%=j render :partial => "sidebar" %>");
19
20   openSidebar({ onclose: stopBrowse });
21
22   var vectors = new OpenLayers.Layer.Vector();
23     
24   browseBoxControl = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, { 
25     handlerOptions: {
26       sides: 4,
27       snapAngle: 90,
28       irregular: true,
29       persist: true
30     }
31   });
32   browseBoxControl.handler.callbacks.done = endDrag;
33   map.addControl(browseBoxControl);
34
35   map.events.register("moveend", map, updateData);
36   map.events.triggerEvent("moveend");
37
38   $("#browse_select_box").click(startDrag);
39
40   $("#browse_hide_areas_box").html("<%=j t 'browse.start_rjs.hide_areas' %>");
41   $("#browse_hide_areas_box").show();
42   $("#browse_hide_areas_box").click(hideAreas);
43 }
44
45 function updateData() {
46   if (browseMode == "auto") {
47     if (map.getZoom() >= 15) {
48         useMap(false);
49     } else {
50         setStatus("<%=j t 'browse.start_rjs.zoom_or_select' %>");
51     }    
52   }
53 }
54
55 function stopBrowse() {
56   if (map.dataLayer.active) {
57     map.dataLayer.active = false;
58
59     if (browseSelectControl) {   
60       browseSelectControl.destroy();  
61       browseSelectControl = null;
62     } 
63
64     if (browseBoxControl) {
65       browseBoxControl.destroy();
66       browseBoxControl = null;
67     }           
68
69     if (browseActiveFeature) {
70       browseActiveFeature.destroy(); 
71       browseActiveFeature = null; 
72     }
73
74     if (browseDataLayer) {
75       browseDataLayer.destroy();
76       browseDataLayer = null; 
77     } 
78
79     map.dataLayer.setVisibility(false);
80     map.events.unregister("moveend", map, updateData);
81   }    
82 }
83
84 function startDrag() {
85   $("#browse_select_box").html("<%=j t 'browse.start_rjs.drag_a_box' %>");
86
87   browseBoxControl.activate();
88
89   return false;
90 }
91
92 function useMap(reload) {
93   var bounds = map.getExtent();
94   var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326);
95
96   if (!browseBounds || !browseBounds.containsBounds(projected)) {
97     var center = bounds.getCenterLonLat();
98     var tileWidth = bounds.getWidth() * 1.2;
99     var tileHeight = bounds.getHeight() * 1.2;
100     var tileBounds = new OpenLayers.Bounds(center.lon - (tileWidth / 2),
101                                            center.lat - (tileHeight / 2),
102                                            center.lon + (tileWidth / 2),
103                                            center.lat + (tileHeight / 2));
104
105     browseBounds = tileBounds;
106     getData(tileBounds, reload);
107
108     browseMode = "auto";
109
110     $("#browse_select_view").hide();
111   }
112
113   return false;
114 }
115
116 function hideAreas() {
117   $("#browse_hide_areas_box").html("<%=j t 'browse.start_rjs.show_areas' %>");
118   $("#browse_hide_areas_box").show();
119   $("#browse_hide_areas_box").click(showAreas);
120
121   areasHidden = true;
122
123   useMap(true);
124 }
125
126 function showAreas() {
127   $("#browse_hide_areas_box").html("<%=j t 'browse.start_rjs.hide_areas' %>");
128   $("#browse_hide_areas_box").show();
129   $("#browse_hide_areas_box").click(hideAreas);
130
131   areasHidden = false;
132
133   useMap(true);
134 }
135
136 $("#browse_select_view").click(useMap);
137
138 function endDrag(bbox) {
139   var bounds = bbox.getBounds();
140   var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326);
141
142   browseBoxControl.deactivate();
143   browseBounds = projected;
144   getData(bounds);
145
146   browseMode = "manual";  
147
148   $("#browse_select_box").html("<%=j t 'browse.start_rjs.manually_select' %>");
149   $("#browse_select_view").show();
150 }
151
152 function displayFeatureWarning() {
153   clearStatus();
154
155   var div = document.createElement("div");
156
157   var p = document.createElement("p");
158   p.appendChild(document.createTextNode(i18n("<%=j t 'browse.start_rjs.loaded_an_area_with_num_features' %>", { num_features: browseFeatureList.length })));
159   div.appendChild(p);
160
161   var input = document.createElement("input");
162   input.type = "submit";
163   input.value = "<%=j t 'browse.start_rjs.load_data' %>";
164   input.onclick = loadFeatureList;
165   div.appendChild(input); 
166
167   $("#browse_content").html("");
168   $("#browse_content").append(div);
169 }
170
171 function loadFeatureList() {
172   browseDataLayer.addFeatures(browseFeatureList);
173   browseDataLayer.events.triggerEvent("loadend");
174
175   browseFeatureList = []; 
176
177   return false;
178 }    
179
180 function customDataLoader(request) {
181   if (this.map.dataLayer.active) {
182     var doc = request.responseXML;
183
184     if (!doc || !doc.documentElement) {
185       doc = request.responseText;
186     }
187
188     var options = {};
189
190     OpenLayers.Util.extend(options, this.formatOptions);
191
192     if (this.map && !this.projection.equals(this.map.getProjectionObject())) {
193       options.externalProjection = this.projection;
194       options.internalProjection = this.map.getProjectionObject();
195     }    
196
197     var gml = this.format ? new this.format(options) : new OpenLayers.Format.GML(options);
198
199     browseFeatureList = gml.read(doc);
200
201     if (!this.maxFeatures || browseFeatureList.length <= this.maxFeatures) {
202       loadFeatureList();
203     } else {
204       displayFeatureWarning();
205     }
206   }
207 }
208
209 function getData(bounds, reload) {
210   var projected = bounds.clone().transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
211   var size = projected.getWidth() * projected.getHeight();
212
213   if (size > <%= MAX_REQUEST_AREA %>) {
214     setStatus(i18n("<%=j t 'browse.start_rjs.unable_to_load_size', :max_bbox_size => MAX_REQUEST_AREA %>", { bbox_size: size }));
215   } else {
216     loadGML("/api/<%= API_VERSION %>/map?bbox=" + projected.toBBOX(), reload);
217   }
218 }
219
220 function loadGML(url, reload) {
221   setStatus("<%=j t 'browse.start_rjs.loading' %>");
222
223   $("#browse_content").empty();
224
225   var formatOptions = {
226     checkTags: true,
227     interestingTagsExclude: ['source','source_ref','source:ref','history','attribution','created_by','tiger:county','tiger:tlid','tiger:upload_uuid']
228   };
229
230   if (areasHidden) formatOptions.areaTags = [];
231
232   if (!browseDataLayer || reload) {
233     var style = new OpenLayers.Style();
234
235     style.addRules([new OpenLayers.Rule({
236       symbolizer: {
237         Polygon: { fillColor: '#ff0000', strokeColor: '#ff0000' },
238         Line: { fillColor: '#ffff00', strokeColor: '#000000', strokeOpacity: '0.4' },
239         Point: { fillColor: '#00ff00', strokeColor: '#00ff00' }
240       }
241     })]);
242
243     if (browseDataLayer) browseDataLayer.destroyFeatures();
244
245     browseDataLayer = new OpenLayers.Layer.GML("Data", url, {
246       format: OpenLayers.Format.OSM,
247       formatOptions: formatOptions,
248       maxFeatures: <%= @max_features %>,
249       requestSuccess: customDataLoader,
250       displayInLayerSwitcher: false,
251       styleMap: new OpenLayers.StyleMap({
252         'default': style,
253         'select': { strokeColor: '#0000ff', strokeWidth: 8 }
254       })
255     });
256     browseDataLayer.events.register("loadend", browseDataLayer, dataLoaded );
257     map.addLayer(browseDataLayer);
258             
259     browseSelectControl = new OpenLayers.Control.SelectFeature(browseDataLayer, { onSelect: onFeatureSelect });
260     browseSelectControl.handlers.feature.stopDown = false;
261     browseSelectControl.handlers.feature.stopUp = false;
262     map.addControl(browseSelectControl);
263     browseSelectControl.activate();
264   } else {
265     browseDataLayer.destroyFeatures();
266     browseDataLayer.format(formatOptions);
267     browseDataLayer.setUrl(url);
268   }
269
270   browseActiveFeature = null;
271 }
272
273 function dataLoaded() {
274   if (this.map.dataLayer.active) {
275     clearStatus();
276
277     browseObjectList = document.createElement("div");
278
279     var heading = document.createElement("p");
280     heading.className = "browse_heading";
281     heading.appendChild(document.createTextNode("<%=j t 'browse.start_rjs.object_list.heading' %>"));
282     browseObjectList.appendChild(heading);
283
284     var list = document.createElement("ul");
285
286     for (var i = 0; i < this.features.length; i++) {
287       var feature = this.features[i]; 
288             
289       // Type, for linking
290       var type = featureType(feature);
291       var typeName = featureTypeName(feature);
292       var li = document.createElement("li");
293       li.appendChild(document.createTextNode(typeName + " "));
294             
295       // Link, for viewing in the tab
296       var link = document.createElement("a");
297       link.href =  "/browse/" + type + "/" + feature.osm_id; 
298       var name = featureName(feature);
299       link.appendChild(document.createTextNode(name));
300       link.feature = feature;
301       link.onclick = OpenLayers.Function.bind(viewFeatureLink, link);   
302       li.appendChild(link);
303
304       list.appendChild(li);
305     }
306
307     browseObjectList.appendChild(list);
308
309     var link = document.createElement("a");
310     link.href = this.url;
311     link.appendChild(document.createTextNode("<%=j t 'browse.start_rjs.object_list.api' %>"));
312     browseObjectList.appendChild(link);
313
314     $("#browse_content").html(browseObjectList); 
315   }
316 }
317     
318 function viewFeatureLink() {
319   var layer = this.feature.layer;
320
321   for (var i = 0; i < layer.selectedFeatures.length; i++) {
322     var f = layer.selectedFeatures[i]; 
323     layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default"));
324   }
325
326   onFeatureSelect(this.feature);
327
328   if (browseMode != "auto") {
329     map.setCenter(this.feature.geometry.getBounds().getCenterLonLat()); 
330   }
331
332   return false;
333 }
334     
335 function loadObjectList() {
336   $("#browse_content").empty();
337   $("#browse_content").append(browseObjectList);
338
339   return false;
340 }
341       
342 function onFeatureSelect(feature) {
343   // Unselect previously selected feature
344   if (browseActiveFeature) {
345     browseActiveFeature.layer.drawFeature(
346       browseActiveFeature, 
347       browseActiveFeature.layer.styleMap.createSymbolizer(browseActiveFeature, "default")
348     );
349   }
350
351   // Redraw in selected style
352   feature.layer.drawFeature(
353     feature, feature.layer.styleMap.createSymbolizer(feature, "select")
354   );
355
356   // If the current object is the list, don't innerHTML="", since that could clear it.
357   if ($("#browse_content").firstChild == browseObjectList) { 
358     $("#browse_content").removeChild(browseObjectList);
359   } else { 
360     $("#browse_content").empty();
361   }   
362         
363   // Create a link back to the object list
364   var div = document.createElement("div");
365   div.style.textAlign = "center";
366   div.style.marginBottom = "20px";
367   $("#browse_content").append(div);
368   var link = document.createElement("a");
369   link.href = "#";
370   link.onclick = loadObjectList;
371   link.appendChild(document.createTextNode("<%=j t 'browse.start_rjs.object_list.back' %>"));
372   div.appendChild(link);
373
374   var table = document.createElement("table");
375   table.width = "100%";
376   table.className = "browse_heading";
377   $("#browse_content").append(table);
378
379   var tr = document.createElement("tr");
380   table.appendChild(tr);
381
382   var heading = document.createElement("td");
383   heading.appendChild(document.createTextNode(featureNameSelect(feature)));
384   tr.appendChild(heading);
385
386   var td = document.createElement("td");
387   td.align = "right";
388   tr.appendChild(td);
389
390   var type = featureType(feature);
391   var link = document.createElement("a");   
392   link.href = "/browse/" + type + "/" + feature.osm_id;
393   link.appendChild(document.createTextNode("<%=j t 'browse.start_rjs.object_list.details' %>"));
394   td.appendChild(link);
395
396   var div = document.createElement("div");
397   div.className = "browse_details";
398
399   $("#browse_content").append(div);
400
401   // Now the list of attributes
402   var ul = document.createElement("ul");
403   for (var key in feature.attributes) {
404     var li = document.createElement("li");
405     var b = document.createElement("b");
406     b.appendChild(document.createTextNode(key));
407     li.appendChild(b);
408     li.appendChild(document.createTextNode(": " + feature.attributes[key]));
409     ul.appendChild(li);
410   }
411         
412   div.appendChild(ul);
413         
414   var link = document.createElement("a");   
415   link.href =  "/browse/" + type + "/" + feature.osm_id + "/history";
416   link.appendChild(document.createTextNode("<%=j t 'browse.start_rjs.show_history' %>"));
417   link.onclick = OpenLayers.Function.bind(loadHistory, {
418     type: type, feature: feature, link: link
419   });
420         
421   div.appendChild(link);
422
423   // Stash the currently drawn feature
424   browseActiveFeature = feature; 
425 }   
426
427 function loadHistory() {
428   this.link.href = "";
429   this.link.innerHTML = "<%=j t 'browse.start_rjs.wait' %>";
430
431   $.ajax("/api/<%= API_VERSION %>/" + this.type + "/" + this.feature.osm_id + "/history", {
432     complete: OpenLayers.Function.bind(displayHistory, this)
433   });
434
435   return false;
436 }
437
438 function displayHistory(request) {
439   if (browseActiveFeature.osm_id != this.feature.osm_id || $("#browse_content").firstChild == browseObjectList)  { 
440       return false;
441   } 
442
443   this.link.parentNode.removeChild(this.link);
444
445   var doc = request.responseXML;
446
447   var table = document.createElement("table");
448   table.width = "100%";
449   table.className = "browse_heading";
450   $("#browse_content").append(table);
451
452   var tr = document.createElement("tr");
453   table.appendChild(tr);
454
455   var heading = document.createElement("td");
456   heading.appendChild(document.createTextNode(i18n("<%=j t 'browse.start_rjs.history_for_feature' %>", { feature: featureNameHistory(this.feature) })));
457   tr.appendChild(heading);
458
459   var td = document.createElement("td");
460   td.align = "right";
461   tr.appendChild(td);
462
463   var link = document.createElement("a");   
464   link.href = "/browse/" + this.type + "/" + this.feature.osm_id + "/history";
465   link.appendChild(document.createTextNode("<%=j t 'browse.start_rjs.details' %>"));
466   td.appendChild(link);
467
468   var div = document.createElement("div");
469   div.className = "browse_details";
470
471   var nodes = doc.getElementsByTagName(this.type);
472   var history = document.createElement("ul");  
473   for (var i = nodes.length - 1; i >= 0; i--) {
474     var user = nodes[i].getAttribute("user") || "<%=j t 'browse.start_rjs.private_user' %>";
475     var timestamp = nodes[i].getAttribute("timestamp");
476     var item = document.createElement("li");
477     item.appendChild(document.createTextNode(i18n("<%=j t 'browse.start_rjs.edited_by_user_at_timestamp' %>", { user: user, timestamp: timestamp })));
478     history.appendChild(item);
479   }
480   div.appendChild(history);
481
482   $("#browse_content").append(div); 
483 }
484
485 function featureType(feature) {
486   if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
487     return "node";
488   } else {
489     return "way";
490   }
491 }
492
493 function featureTypeName(feature) {
494   if (featureType(feature) == "node") {
495     return "<%=j t 'browse.start_rjs.object_list.type.node' %>";
496   } else if (featureType(feature) == "way") {
497     return "<%=j t 'browse.start_rjs.object_list.type.way' %>";
498   }
499 }
500
501 function featureName(feature) {
502   if (feature.attributes['name:<%= I18n.locale %>']) {
503     return feature.attributes['name:<%= I18n.locale %>'];
504   } else if (feature.attributes.name) {
505     return feature.attributes.name;
506   } else {
507     return feature.osm_id;
508   }
509 }
510
511 function featureNameSelect(feature) {
512   if (feature.attributes['name:<%= I18n.locale %>']) {
513     return feature.attributes['name:<%= I18n.locale %>'];
514   } else if (feature.attributes.name) {
515     return feature.attributes.name;
516   } else if (featureType(feature) == "node") {
517     return i18n("<%=j t 'browse.start_rjs.object_list.selected.type.node' %>", { id: feature.osm_id });
518   } else if (featureType(feature) == "way") {
519     return i18n("<%=j t 'browse.start_rjs.object_list.selected.type.way' %>", { id: feature.osm_id });
520   }
521 }
522
523 function featureNameHistory(feature) {
524   if (feature.attributes['name:<%= I18n.locale %>']) {
525     return feature.attributes['name:<%= I18n.locale %>'];
526   } else if (feature.attributes.name) {
527     return feature.attributes.name;
528   } else if (featureType(feature) == "node") {
529     return i18n("<%=j t 'browse.start_rjs.object_list.history.type.node' %>", { id: feature.osm_id });
530   } else if (featureType(feature) == "way") {
531     return i18n("<%=j t 'browse.start_rjs.object_list.history.type.way' %>", { id: feature.osm_id });
532   }
533 }
534
535 function setStatus(status) {
536   $("#browse_status").html(status);
537   $("#browse_status").show();
538 }
539   
540 function clearStatus() {
541   $("#browse_status").html("");
542   $("#browse_status").hide();
543 }
544
545 startBrowse();