Add recent nodes to start of tab, and return false from onclick actions
[rails.git] / app / views / browse / start.rjs
1 page.replace_html :sidebar_title, 'Browse'
2 page.replace_html :sidebar_content, :partial => 'start'
3 page << <<EOJ
4     
5     var gml, sf, objList, currentFeature;
6     OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
7     OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
8     
9     function start() {
10       openSidebar({ onclose: stopBrowse });
11       var vectors = new OpenLayers.Layer.Vector();
12     
13       box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, { 
14         handlerOptions: {
15           sides: 4,
16           snapAngle: 90,
17           irregular: true,
18           persist: true,
19           callbacks: { done: endDrag }
20         }
21       });
22       map.addControl(box);
23     }
24     
25     function stopBrowse() {
26         if (gml) {
27             gml.destroy();
28             gml = null; 
29         } 
30         if (sf) {   
31             sf.destroy();  
32             sf = null;
33         } 
34         if (currentFeature) {
35             currentFeature.destroy(); 
36             currentFeature = null; 
37         } 
38     }
39     
40     function startDrag() {
41       $("drag_box").innerHTML='Drag a box on the map to select an area';
42        box.activate(); 
43        return false;
44     };
45     $("drag_box").onclick = startDrag;
46     
47     function useMap() {
48         var bounds = map.getExtent();
49         setBounds(bounds);
50         getData(bounds);
51         return false;
52     }
53     $("use_map").onclick = useMap;
54     
55     function endDrag(bbox) {
56         var bounds = bbox.getBounds();
57         setBounds(bounds);
58         box.deactivate();
59         getData(bounds);
60         $("drag_box").innerHTML = "Manually select a different area";
61     }
62     
63     function getData(bounds) {
64         $("status").innerHTML = "Loading...";
65         
66         bounds.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
67         var url = "/api/0.5/map?bbox="+bounds.toBBOX();
68         
69         if (!gml) {
70             var def = OpenLayers.Feature.Vector.style['default'];
71             var style = new OpenLayers.Style();
72             style.addRules([new OpenLayers.Rule( 
73               {'symbolizer': 
74                 {"Polygon": {'fillColor': '#ff0000', 'strokeColor': '#ff0000'},
75                  "Line": {'fillColor': '#ffff00', 'strokeColor': '#000000', strokeOpacity: '0.4'},
76                  "Point": {'fillColor': '#00ff00', 'strokeColor': '#00ff00'}}
77               }
78             )]);
79             gml = new OpenLayers.Layer.GML("Data",url, 
80                     {format: OpenLayers.Format.OSM, formatOptions: {checkTags: true},
81                      styleMap: new OpenLayers.StyleMap({'default': style, 'select': {'strokeColor': '#0000ff'}})
82                     }
83             );
84             gml.events.register("loadend", gml, dataLoaded );
85             map.addLayer(gml);
86             
87             sf = new OpenLayers.Control.SelectFeature(gml, {'onSelect': onFeatureSelect});
88             map.addControl(sf);
89             sf.activate();
90         } else {
91             gml.setUrl(url);
92         }
93     }
94     
95     function dataLoaded() { 
96         $("status").innerHTML = "Loaded " + this.features.length + " features. (<a href='"+ this.url+"'>API</a>)";
97         
98         objList = document.createElement("ul");
99         for (var i = 0; i < this.features.length; i++) {
100             var feature = this.features[i]; 
101             
102             // Type, for linking
103             var type ="way";
104             if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
105                 type = "node";
106             }   
107             var nice_name = type.substr(0,1).toUpperCase() + type.substr(1,type.length); 
108             var li = document.createElement("li");
109             li.appendChild(document.createTextNode(nice_name + " "));
110             
111             // Link, for viewing in the tab
112             var link = document.createElement("a");
113             link.href =  "/browse/" + type + "/" + feature.osm_id; 
114             var name = feature.attributes.name || feature.osm_id;
115             link.appendChild(document.createTextNode(name));
116             link.feature = feature;
117             link.onclick = OpenLayers.Function.bind(viewFeatureLink, link);   
118             li.appendChild(link);
119
120             objList.appendChild(li);
121         }
122         $("object").innerHTML = "";
123         $("object").appendChild(objList); 
124     }
125     
126     function viewFeatureLink() {
127         var layer = this.feature.layer;
128         for (var i = 0; i < layer.selectedFeatures.length; i++) {
129             var f = layer.selectedFeatures[i]; 
130             layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default"));
131         }
132         onFeatureSelect(this.feature);
133         map.setCenter(this.feature.geometry.getBounds().getCenterLonLat()); 
134         return false;
135     }
136     
137     function loadObjList() {
138         $("object").innerHTML="";
139         $("object").appendChild(objList);
140         return false;
141     }
142       
143     function onFeatureSelect(feature) {
144         // Unselect previously selected feature
145         if (currentFeature) {
146           currentFeature.layer.drawFeature(
147             currentFeature, currentFeature.layer.styleMap.createSymbolizer(currentFeature, "default")
148           );
149         }
150
151         // Redraw in selected style
152         feature.layer.drawFeature(
153           feature, feature.layer.styleMap.createSymbolizer(feature, "select")
154         );
155
156         // If the current object is the list, don't innerHTML="", since that could clar it.   
157         if ($("object").firstChild == objList) { 
158             $("object").removeChild(objList);
159         } else { 
160             $("object").innerHTML = "";
161         }   
162         
163         // Create a link back to the object list
164         var div = document.createElement("div");
165         var link = document.createElement("a");
166         link.href="#";
167         link.onclick = loadObjList;
168         link.appendChild(document.createTextNode("Back to Object List"));
169         div.appendChild(link)
170         $("object").appendChild(div);    
171         
172         // Now the list of attributes
173         var ul = document.createElement("ul");
174         var type = "way";
175         if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
176             type = "node";
177         }    
178         var li = document.createElement("li");
179         var link = document.createElement("a");   
180         link.href =  "/browse/"+type+"/"+feature.osm_id;
181         link.appendChild(document.createTextNode(feature.osm_id));
182         li.appendChild(link);
183         ul.appendChild(li);
184         for (var key in feature.attributes) {
185             var li = document.createElement("li");
186             var b = document.createElement("b");
187             b.appendChild(document.createTextNode(key));
188             li.appendChild(b);
189             li.appendChild(document.createTextNode(": " + feature.attributes[key]));
190             ul.appendChild(li);
191         }
192         $("object").appendChild(ul);
193         
194         // Stash the currently drawn feature
195         currentFeature = feature; 
196     }   
197     
198     function setBounds(bounds) {
199       var epsg4326 = new OpenLayers.Projection("EPSG:4326");
200       var decimals = Math.pow(10, Math.floor(map.getZoom() / 3));
201
202       bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326);
203
204       $("minlon").innerHTML = Math.round(bounds.left * decimals) / decimals;
205       $("minlat").innerHTML = Math.round(bounds.bottom * decimals) / decimals;
206       $("maxlon").innerHTML = Math.round(bounds.right * decimals) / decimals;
207       $("maxlat").innerHTML = Math.round(bounds.top * decimals) / decimals;
208     }
209
210     start();
211 EOJ